@oiz/stzh-components 2.6.0-beta → 2.7.0-alpha

package/dist/collection/libraries/tom-select/cjs/tom-select.complete.js

@@ -2128,17 +2128,24 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const query = "label[for='" + escapeQuery(self.inputId) + "']";
     const label = document.querySelector(query);
     const label_click = self.focus.bind(self);
+    const labelled_by = input.getAttribute('aria-labelledby');
     if (label) {
       addEvent(label, 'click', label_click);
       setAttr(label, {
         for: control_id
       });
-      const label_id = getId(label, self.inputId + '-ts-label');
+
+      // const label_id = getId(label,self.inputId+'-ts-label');
+      // setAttr(focus_node,{'aria-labelledby':label_id});
+      // setAttr(dropdown_content,{'aria-labelledby':label_id});
+    }
+
+    if (labelled_by) {
       setAttr(focus_node, {
-        'aria-labelledby': label_id
+        'aria-labelledby': labelled_by
       });
       setAttr(dropdown_content, {
-        'aria-labelledby': label_id
+        'aria-labelledby': labelled_by
       });
     }
     wrapper.style.width = input.style.width;
@@ -2146,10 +2153,15 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       const classes_plugins = 'plugin-' + self.plugins.names.join(' plugin-');
       addClasses([wrapper, dropdown], classes_plugins);
     }
-    if ((settings.maxItems === null || settings.maxItems > 1) && self.is_select_tag) {
-      setAttr(input, {
-        multiple: 'multiple'
+    if (settings.mode === 'multi') {
+      setAttr(dropdown_content, {
+        'aria-multiselectable': 'true'
       });
+      if (self.is_select_tag) {
+        setAttr(input, {
+          multiple: 'multiple'
+        });
+      }
     }
     if (settings.placeholder) {
       setAttr(control_input, {
@@ -2805,7 +2817,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    *
    */
   getValue() {
-    if (this.is_select_tag && this.input.hasAttribute('multiple')) {
+    if (this.settings.mode === 'multi' && this.is_select_tag) {
       return this.items;
     }
     return this.items.join(this.settings.delimiter);
@@ -2938,9 +2950,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     setAttr(this.focus_node, {
       'aria-activedescendant': option.getAttribute('id')
     });
-    setAttr(option, {
-      'aria-selected': 'true'
-    });
+    if (this.settings.mode === 'single' || this.settings.hideSelected) {
+      setAttr(option, {
+        'aria-selected': 'true'
+      });
+    }
     addClasses(option, 'active');
     if (scroll) this.scrollToOption(option);
   }
@@ -2983,9 +2997,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
   clearActiveOption() {
     if (this.activeOption) {
       removeClasses(this.activeOption, 'active');
-      setAttr(this.activeOption, {
-        'aria-selected': null
-      });
+      if (this.settings.mode === 'single' || this.settings.hideSelected) {
+        setAttr(this.activeOption, {
+          'aria-selected': null
+        });
+      }
     }
     this.activeOption = null;
     setAttr(this.focus_node, {
@@ -3200,10 +3216,16 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       if (option === undefined) continue;
       let opt_hash = get_hash(opt_value);
       let option_el = self.getOption(opt_hash, true);
+      const option_selected = self.items.includes(opt_hash);
 
       // toggle 'selected' class
       if (!self.settings.hideSelected) {
-        option_el.classList.toggle('selected', self.items.includes(opt_hash));
+        option_el.classList.toggle('selected', option_selected);
+        if (this.settings.mode === 'multi') {
+          setAttr(option_el, {
+            'aria-selected': option_selected ? 'true' : 'false'
+          });
+        }
       }
       optgroup = option[self.settings.optgroupField] || '';
       optgroups = Array.isArray(optgroup) ? optgroup : [optgroup];
@@ -3221,10 +3243,17 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         // nodes can only have one parent, so if the option is in mutple groups, we need a clone
         if (j > 0) {
           option_el = option_el.cloneNode(true);
-          setAttr(option_el, {
-            id: option.$id + '-clone-' + j,
-            'aria-selected': null
-          });
+          if (this.settings.mode === 'multi' && !self.settings.hideSelected) {
+            setAttr(option_el, {
+              id: option.$id + '-clone-' + j,
+              'aria-selected': option_selected ? 'true' : 'false'
+            });
+          } else {
+            setAttr(option_el, {
+              id: option.$id + '-clone-' + j,
+              'aria-selected': null
+            });
+          }
           option_el.classList.add('ts-cloned');
           removeClasses(option_el, 'active');
 

package/dist/collection/libraries/tom-select/cjs/tom-select.js

@@ -2128,17 +2128,24 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const query = "label[for='" + escapeQuery(self.inputId) + "']";
     const label = document.querySelector(query);
     const label_click = self.focus.bind(self);
+    const labelled_by = input.getAttribute('aria-labelledby');
     if (label) {
       addEvent(label, 'click', label_click);
       setAttr(label, {
         for: control_id
       });
-      const label_id = getId(label, self.inputId + '-ts-label');
+
+      // const label_id = getId(label,self.inputId+'-ts-label');
+      // setAttr(focus_node,{'aria-labelledby':label_id});
+      // setAttr(dropdown_content,{'aria-labelledby':label_id});
+    }
+
+    if (labelled_by) {
       setAttr(focus_node, {
-        'aria-labelledby': label_id
+        'aria-labelledby': labelled_by
       });
       setAttr(dropdown_content, {
-        'aria-labelledby': label_id
+        'aria-labelledby': labelled_by
       });
     }
     wrapper.style.width = input.style.width;
@@ -2146,10 +2153,15 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       const classes_plugins = 'plugin-' + self.plugins.names.join(' plugin-');
       addClasses([wrapper, dropdown], classes_plugins);
     }
-    if ((settings.maxItems === null || settings.maxItems > 1) && self.is_select_tag) {
-      setAttr(input, {
-        multiple: 'multiple'
+    if (settings.mode === 'multi') {
+      setAttr(dropdown_content, {
+        'aria-multiselectable': 'true'
       });
+      if (self.is_select_tag) {
+        setAttr(input, {
+          multiple: 'multiple'
+        });
+      }
     }
     if (settings.placeholder) {
       setAttr(control_input, {
@@ -2805,7 +2817,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    *
    */
   getValue() {
-    if (this.is_select_tag && this.input.hasAttribute('multiple')) {
+    if (this.settings.mode === 'multi' && this.is_select_tag) {
       return this.items;
     }
     return this.items.join(this.settings.delimiter);
@@ -2938,9 +2950,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     setAttr(this.focus_node, {
       'aria-activedescendant': option.getAttribute('id')
     });
-    setAttr(option, {
-      'aria-selected': 'true'
-    });
+    if (this.settings.mode === 'single' || this.settings.hideSelected) {
+      setAttr(option, {
+        'aria-selected': 'true'
+      });
+    }
     addClasses(option, 'active');
     if (scroll) this.scrollToOption(option);
   }
@@ -2983,9 +2997,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
   clearActiveOption() {
     if (this.activeOption) {
       removeClasses(this.activeOption, 'active');
-      setAttr(this.activeOption, {
-        'aria-selected': null
-      });
+      if (this.settings.mode === 'single' || this.settings.hideSelected) {
+        setAttr(this.activeOption, {
+          'aria-selected': null
+        });
+      }
     }
     this.activeOption = null;
     setAttr(this.focus_node, {
@@ -3200,10 +3216,16 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       if (option === undefined) continue;
       let opt_hash = get_hash(opt_value);
       let option_el = self.getOption(opt_hash, true);
+      const option_selected = self.items.includes(opt_hash);
 
       // toggle 'selected' class
       if (!self.settings.hideSelected) {
-        option_el.classList.toggle('selected', self.items.includes(opt_hash));
+        option_el.classList.toggle('selected', option_selected);
+        if (this.settings.mode === 'multi') {
+          setAttr(option_el, {
+            'aria-selected': option_selected ? 'true' : 'false'
+          });
+        }
       }
       optgroup = option[self.settings.optgroupField] || '';
       optgroups = Array.isArray(optgroup) ? optgroup : [optgroup];
@@ -3221,10 +3243,17 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         // nodes can only have one parent, so if the option is in mutple groups, we need a clone
         if (j > 0) {
           option_el = option_el.cloneNode(true);
-          setAttr(option_el, {
-            id: option.$id + '-clone-' + j,
-            'aria-selected': null
-          });
+          if (this.settings.mode === 'multi' && !self.settings.hideSelected) {
+            setAttr(option_el, {
+              id: option.$id + '-clone-' + j,
+              'aria-selected': option_selected ? 'true' : 'false'
+            });
+          } else {
+            setAttr(option_el, {
+              id: option.$id + '-clone-' + j,
+              'aria-selected': null
+            });
+          }
           option_el.classList.add('ts-cloned');
           removeClasses(option_el, 'active');
 

package/dist/collection/libraries/tom-select/cjs/tom-select.popular.js

@@ -2128,17 +2128,24 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const query = "label[for='" + escapeQuery(self.inputId) + "']";
     const label = document.querySelector(query);
     const label_click = self.focus.bind(self);
+    const labelled_by = input.getAttribute('aria-labelledby');
     if (label) {
       addEvent(label, 'click', label_click);
       setAttr(label, {
         for: control_id
       });
-      const label_id = getId(label, self.inputId + '-ts-label');
+
+      // const label_id = getId(label,self.inputId+'-ts-label');
+      // setAttr(focus_node,{'aria-labelledby':label_id});
+      // setAttr(dropdown_content,{'aria-labelledby':label_id});
+    }
+
+    if (labelled_by) {
       setAttr(focus_node, {
-        'aria-labelledby': label_id
+        'aria-labelledby': labelled_by
       });
       setAttr(dropdown_content, {
-        'aria-labelledby': label_id
+        'aria-labelledby': labelled_by
       });
     }
     wrapper.style.width = input.style.width;
@@ -2146,10 +2153,15 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       const classes_plugins = 'plugin-' + self.plugins.names.join(' plugin-');
       addClasses([wrapper, dropdown], classes_plugins);
     }
-    if ((settings.maxItems === null || settings.maxItems > 1) && self.is_select_tag) {
-      setAttr(input, {
-        multiple: 'multiple'
+    if (settings.mode === 'multi') {
+      setAttr(dropdown_content, {
+        'aria-multiselectable': 'true'
       });
+      if (self.is_select_tag) {
+        setAttr(input, {
+          multiple: 'multiple'
+        });
+      }
     }
     if (settings.placeholder) {
       setAttr(control_input, {
@@ -2805,7 +2817,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    *
    */
   getValue() {
-    if (this.is_select_tag && this.input.hasAttribute('multiple')) {
+    if (this.settings.mode === 'multi' && this.is_select_tag) {
       return this.items;
     }
     return this.items.join(this.settings.delimiter);
@@ -2938,9 +2950,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     setAttr(this.focus_node, {
       'aria-activedescendant': option.getAttribute('id')
     });
-    setAttr(option, {
-      'aria-selected': 'true'
-    });
+    if (this.settings.mode === 'single' || this.settings.hideSelected) {
+      setAttr(option, {
+        'aria-selected': 'true'
+      });
+    }
     addClasses(option, 'active');
     if (scroll) this.scrollToOption(option);
   }
@@ -2983,9 +2997,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
   clearActiveOption() {
     if (this.activeOption) {
       removeClasses(this.activeOption, 'active');
-      setAttr(this.activeOption, {
-        'aria-selected': null
-      });
+      if (this.settings.mode === 'single' || this.settings.hideSelected) {
+        setAttr(this.activeOption, {
+          'aria-selected': null
+        });
+      }
     }
     this.activeOption = null;
     setAttr(this.focus_node, {
@@ -3200,10 +3216,16 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       if (option === undefined) continue;
       let opt_hash = get_hash(opt_value);
       let option_el = self.getOption(opt_hash, true);
+      const option_selected = self.items.includes(opt_hash);
 
       // toggle 'selected' class
       if (!self.settings.hideSelected) {
-        option_el.classList.toggle('selected', self.items.includes(opt_hash));
+        option_el.classList.toggle('selected', option_selected);
+        if (this.settings.mode === 'multi') {
+          setAttr(option_el, {
+            'aria-selected': option_selected ? 'true' : 'false'
+          });
+        }
       }
       optgroup = option[self.settings.optgroupField] || '';
       optgroups = Array.isArray(optgroup) ? optgroup : [optgroup];
@@ -3221,10 +3243,17 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         // nodes can only have one parent, so if the option is in mutple groups, we need a clone
         if (j > 0) {
           option_el = option_el.cloneNode(true);
-          setAttr(option_el, {
-            id: option.$id + '-clone-' + j,
-            'aria-selected': null
-          });
+          if (this.settings.mode === 'multi' && !self.settings.hideSelected) {
+            setAttr(option_el, {
+              id: option.$id + '-clone-' + j,
+              'aria-selected': option_selected ? 'true' : 'false'
+            });
+          } else {
+            setAttr(option_el, {
+              id: option.$id + '-clone-' + j,
+              'aria-selected': null
+            });
+          }
           option_el.classList.add('ts-cloned');
           removeClasses(option_el, 'active');
 

package/dist/collection/libraries/tom-select/esm/tom-select.complete.js

@@ -2126,17 +2126,24 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const query = "label[for='" + escapeQuery(self.inputId) + "']";
     const label = document.querySelector(query);
     const label_click = self.focus.bind(self);
+    const labelled_by = input.getAttribute('aria-labelledby');
     if (label) {
       addEvent(label, 'click', label_click);
       setAttr(label, {
         for: control_id
       });
-      const label_id = getId(label, self.inputId + '-ts-label');
+
+      // const label_id = getId(label,self.inputId+'-ts-label');
+      // setAttr(focus_node,{'aria-labelledby':label_id});
+      // setAttr(dropdown_content,{'aria-labelledby':label_id});
+    }
+
+    if (labelled_by) {
       setAttr(focus_node, {
-        'aria-labelledby': label_id
+        'aria-labelledby': labelled_by
       });
       setAttr(dropdown_content, {
-        'aria-labelledby': label_id
+        'aria-labelledby': labelled_by
       });
     }
     wrapper.style.width = input.style.width;
@@ -2144,10 +2151,15 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       const classes_plugins = 'plugin-' + self.plugins.names.join(' plugin-');
       addClasses([wrapper, dropdown], classes_plugins);
     }
-    if ((settings.maxItems === null || settings.maxItems > 1) && self.is_select_tag) {
-      setAttr(input, {
-        multiple: 'multiple'
+    if (settings.mode === 'multi') {
+      setAttr(dropdown_content, {
+        'aria-multiselectable': 'true'
       });
+      if (self.is_select_tag) {
+        setAttr(input, {
+          multiple: 'multiple'
+        });
+      }
     }
     if (settings.placeholder) {
       setAttr(control_input, {
@@ -2803,7 +2815,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    *
    */
   getValue() {
-    if (this.is_select_tag && this.input.hasAttribute('multiple')) {
+    if (this.settings.mode === 'multi' && this.is_select_tag) {
       return this.items;
     }
     return this.items.join(this.settings.delimiter);
@@ -2936,9 +2948,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     setAttr(this.focus_node, {
       'aria-activedescendant': option.getAttribute('id')
     });
-    setAttr(option, {
-      'aria-selected': 'true'
-    });
+    if (this.settings.mode === 'single' || this.settings.hideSelected) {
+      setAttr(option, {
+        'aria-selected': 'true'
+      });
+    }
     addClasses(option, 'active');
     if (scroll) this.scrollToOption(option);
   }
@@ -2981,9 +2995,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
   clearActiveOption() {
     if (this.activeOption) {
       removeClasses(this.activeOption, 'active');
-      setAttr(this.activeOption, {
-        'aria-selected': null
-      });
+      if (this.settings.mode === 'single' || this.settings.hideSelected) {
+        setAttr(this.activeOption, {
+          'aria-selected': null
+        });
+      }
     }
     this.activeOption = null;
     setAttr(this.focus_node, {
@@ -3198,10 +3214,16 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       if (option === undefined) continue;
       let opt_hash = get_hash(opt_value);
       let option_el = self.getOption(opt_hash, true);
+      const option_selected = self.items.includes(opt_hash);
 
       // toggle 'selected' class
       if (!self.settings.hideSelected) {
-        option_el.classList.toggle('selected', self.items.includes(opt_hash));
+        option_el.classList.toggle('selected', option_selected);
+        if (this.settings.mode === 'multi') {
+          setAttr(option_el, {
+            'aria-selected': option_selected ? 'true' : 'false'
+          });
+        }
       }
       optgroup = option[self.settings.optgroupField] || '';
       optgroups = Array.isArray(optgroup) ? optgroup : [optgroup];
@@ -3219,10 +3241,17 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         // nodes can only have one parent, so if the option is in mutple groups, we need a clone
         if (j > 0) {
           option_el = option_el.cloneNode(true);
-          setAttr(option_el, {
-            id: option.$id + '-clone-' + j,
-            'aria-selected': null
-          });
+          if (this.settings.mode === 'multi' && !self.settings.hideSelected) {
+            setAttr(option_el, {
+              id: option.$id + '-clone-' + j,
+              'aria-selected': option_selected ? 'true' : 'false'
+            });
+          } else {
+            setAttr(option_el, {
+              id: option.$id + '-clone-' + j,
+              'aria-selected': null
+            });
+          }
           option_el.classList.add('ts-cloned');
           removeClasses(option_el, 'active');
 

package/dist/collection/libraries/tom-select/esm/tom-select.js

@@ -2126,17 +2126,24 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const query = "label[for='" + escapeQuery(self.inputId) + "']";
     const label = document.querySelector(query);
     const label_click = self.focus.bind(self);
+    const labelled_by = input.getAttribute('aria-labelledby');
     if (label) {
       addEvent(label, 'click', label_click);
       setAttr(label, {
         for: control_id
       });
-      const label_id = getId(label, self.inputId + '-ts-label');
+
+      // const label_id = getId(label,self.inputId+'-ts-label');
+      // setAttr(focus_node,{'aria-labelledby':label_id});
+      // setAttr(dropdown_content,{'aria-labelledby':label_id});
+    }
+
+    if (labelled_by) {
       setAttr(focus_node, {
-        'aria-labelledby': label_id
+        'aria-labelledby': labelled_by
       });
       setAttr(dropdown_content, {
-        'aria-labelledby': label_id
+        'aria-labelledby': labelled_by
       });
     }
     wrapper.style.width = input.style.width;
@@ -2144,10 +2151,15 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       const classes_plugins = 'plugin-' + self.plugins.names.join(' plugin-');
       addClasses([wrapper, dropdown], classes_plugins);
     }
-    if ((settings.maxItems === null || settings.maxItems > 1) && self.is_select_tag) {
-      setAttr(input, {
-        multiple: 'multiple'
+    if (settings.mode === 'multi') {
+      setAttr(dropdown_content, {
+        'aria-multiselectable': 'true'
       });
+      if (self.is_select_tag) {
+        setAttr(input, {
+          multiple: 'multiple'
+        });
+      }
     }
     if (settings.placeholder) {
       setAttr(control_input, {
@@ -2803,7 +2815,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    *
    */
   getValue() {
-    if (this.is_select_tag && this.input.hasAttribute('multiple')) {
+    if (this.settings.mode === 'multi' && this.is_select_tag) {
       return this.items;
     }
     return this.items.join(this.settings.delimiter);
@@ -2936,9 +2948,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     setAttr(this.focus_node, {
       'aria-activedescendant': option.getAttribute('id')
     });
-    setAttr(option, {
-      'aria-selected': 'true'
-    });
+    if (this.settings.mode === 'single' || this.settings.hideSelected) {
+      setAttr(option, {
+        'aria-selected': 'true'
+      });
+    }
     addClasses(option, 'active');
     if (scroll) this.scrollToOption(option);
   }
@@ -2981,9 +2995,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
   clearActiveOption() {
     if (this.activeOption) {
       removeClasses(this.activeOption, 'active');
-      setAttr(this.activeOption, {
-        'aria-selected': null
-      });
+      if (this.settings.mode === 'single' || this.settings.hideSelected) {
+        setAttr(this.activeOption, {
+          'aria-selected': null
+        });
+      }
     }
     this.activeOption = null;
     setAttr(this.focus_node, {
@@ -3198,10 +3214,16 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       if (option === undefined) continue;
       let opt_hash = get_hash(opt_value);
       let option_el = self.getOption(opt_hash, true);
+      const option_selected = self.items.includes(opt_hash);
 
       // toggle 'selected' class
       if (!self.settings.hideSelected) {
-        option_el.classList.toggle('selected', self.items.includes(opt_hash));
+        option_el.classList.toggle('selected', option_selected);
+        if (this.settings.mode === 'multi') {
+          setAttr(option_el, {
+            'aria-selected': option_selected ? 'true' : 'false'
+          });
+        }
       }
       optgroup = option[self.settings.optgroupField] || '';
       optgroups = Array.isArray(optgroup) ? optgroup : [optgroup];
@@ -3219,10 +3241,17 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         // nodes can only have one parent, so if the option is in mutple groups, we need a clone
         if (j > 0) {
           option_el = option_el.cloneNode(true);
-          setAttr(option_el, {
-            id: option.$id + '-clone-' + j,
-            'aria-selected': null
-          });
+          if (this.settings.mode === 'multi' && !self.settings.hideSelected) {
+            setAttr(option_el, {
+              id: option.$id + '-clone-' + j,
+              'aria-selected': option_selected ? 'true' : 'false'
+            });
+          } else {
+            setAttr(option_el, {
+              id: option.$id + '-clone-' + j,
+              'aria-selected': null
+            });
+          }
           option_el.classList.add('ts-cloned');
           removeClasses(option_el, 'active');