adding default label

static/js/appbundle.js

@@ -104553,6 +104553,7 @@ def note_with_error(value, err):
       const clone3 = template.content.cloneNode(true);
       this.appendChild(clone3);
       const select = this.querySelector("select");
+      const label = this.dataset["label"] || "";
       if (select === null) {
         throw new Error("Expected an inner select to go with the hedy-select component!");
       }
@@ -104583,6 +104584,12 @@ def note_with_error(value, err):
           }
         }
       }
+      const span = this.getElementsByTagName("span");
+      if (span.length !== 1) {
+        throw new Error("HedySelect should only have one span element!");
+      }
+      span[0].dataset["value"] = label;
+      span[0].innerHTML = label;
       updateLabelText(this.querySelector(".dropdown"));
     }
     onOptionClick(_event) {

static/js/custom-elements.ts

@@ -11,7 +11,7 @@ export class HedySelect extends HTMLElement {
         const clone = template.content.cloneNode(true) as HTMLElement;
         this.appendChild(clone);
         const select = this.querySelector('select');
-
+        const label = this.dataset['label'] || '';
         if (select === null) {
             throw new Error('Expected an inner select to go with the hedy-select component!')
         }
@@ -29,7 +29,6 @@ export class HedySelect extends HTMLElement {
             dropdownMenu.appendChild(newDiv)
             newDiv.addEventListener('click', this.onOptionClick)
         }
-
         for (const option of options) {
             const newDiv = document.createElement('div');
             newDiv.classList.add('option');
@@ -44,6 +43,12 @@ export class HedySelect extends HTMLElement {
                 }
             }
         }
+        const span = this.getElementsByTagName('span')
+        if (span.length !== 1) {
+            throw new Error('HedySelect should only have one span element!');
+        }
+        span[0].dataset['value'] = label;
+        span[0].innerHTML = label;
         updateLabelText(this.querySelector('.dropdown')!)
     }
 

templates/custom-elements-templates.html

@@ -5,7 +5,7 @@
         <button type="button" class="toggle-button font-semibold rounded inline-flex justify-between
                             appearance-none w-full border border-gray-200 text-gray-700 p-2 rounded"
             onclick="hedyApp.toggleDropdown(event)">
-            <span class="label" data-value="{{_('used_in')}}">{{_('used_in')}}</span>
+            <span class="label"></span>
             <svg class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 20 20">
                 <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />

templates/customize-adventure.html

@@ -25,7 +25,7 @@ <h3 class="text-center mt-0 mb-4">{{_('general_settings')}}</h3>
                     <div class="flex flex-row items-center mb-4">
                         <label for="custom_adventure_classes" class="inline-block w-40 text-xl">{{_('used_in')}}</label>
                         <div class="flex-1">
-                            <hedy-select id="classes_dropdown">
+                            <hedy-select id="classes_dropdown" data-label="{{_('used_in')}}">
                                 <select multiple>
                                     {% for class in all_classes %}
                                         <option {% if class.id in adventure.classes %}selected{% endif %} value="{{class.id}}">{{ class.name }}</option>
@@ -37,7 +37,7 @@ <h3 class="text-center mt-0 mb-4">{{_('general_settings')}}</h3>
                     <div class="flex flex-row items-center mb-4">
                         <label for="custom_adventure_levels" class="inline-block w-40 text-xl">{{_('available_in')}}</label>
                         <div class="flex-1">
-                            <hedy-select id="levels_dropdown">
+                            <hedy-select id="levels_dropdown" data-label="{{_('select_levels')}}">
                                 <select multiple>
                                     {% for i in range(1, (max_level + 1)) %}
                                         {% set adv_levels = adventure.levels if adventure.get("levels") else [adventure.level|string] %}
@@ -50,7 +50,7 @@ <h3 class="text-center mt-0 mb-4">{{_('general_settings')}}</h3>
                     <div class="flex flex-row items-center mb-4">
                         <label class="inline-block w-40 text-xl" for="language">{{_('language')}}</label>
                         <div class="flex-1">
-                            <hedy-select id="languages_dropdown">
+                            <hedy-select id="languages_dropdown" data-label="{{_('select_lang')}}">
                                 <select>
                                     <option value="{{ adventure['language'] or current_language().lang }}" selected>{{ lang_to_sym(adventure['language'] or current_language().lang) }}</option>
                                     {% for language in other_languages(adventure["language"]) %}