q2-tecton-elements 1.28.3 → 1.29.1

package/dist/components/index12.js

@@ -1,72 +1,72 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './index7.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as createGuid, l as loc } from './index16.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background-color:var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))}:host(:focus){border:1px solid #33b4ff}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6))))));padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-multi-select-header-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 
-const Q2Option = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Q2Optgroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.role = 'option';
-    this.display = undefined;
-    this.value = undefined;
-    this.disabled = undefined;
-    this.disabledGroup = undefined;
-    this.selected = undefined;
-    this.hidden = undefined;
-    this.multiline = undefined;
-    this.active = undefined;
-    this._multiSelectHidden = false;
+    this.guid = createGuid();
+    this.setHidden = () => {
+      this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
+    };
+    this.disabled = false;
+    this.label = undefined;
+    this.hidden = false;
   }
+  /// LIFECYCLE HOOKS ///
   componentWillLoad() {
-    this.handleDisplay();
+    const observer = new MutationObserver(this.setHidden);
+    observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
+    this.mutationObserver = observer;
+    // set initially
+    this.setHidden();
+    this.disabledWatcher(this.disabled);
   }
-  handleDisplay() {
-    if (this.display || this.multiline)
-      return;
-    this.display = this.hostElement.textContent.trim();
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    this.mutationObserver = null;
+  }
+  get headerId() {
+    return `q2-optgroup-header-${this.guid}`;
+  }
+  get options() {
+    return Array.from(this.hostElement.querySelectorAll('q2-option'));
+  }
+  ///// OBSERVERS ///////
+  disabledWatcher(disabled) {
+    this.options.forEach(opt => {
+      opt.disabledGroup = !!disabled;
+    });
   }
   render() {
-    const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
-    const isDisabled = disabled || disabledGroup;
-    return (h(Host, { tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
+    return (h("div", { class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { class: "q2-optgroup-options" }, h("slot", null))));
   }
   get hostElement() { return this; }
   static get watchers() { return {
-    "display": ["handleDisplay"]
+    "disabled": ["disabledWatcher"]
   }; }
   static get style() { return stylesCss; }
-}, [1, "q2-option", {
-    "role": [513],
-    "display": [1025],
-    "value": [513],
+}, [1, "q2-optgroup", {
     "disabled": [516],
-    "disabledGroup": [516, "disabled-group"],
-    "selected": [516],
-    "hidden": [516],
-    "multiline": [516],
-    "active": [516],
-    "_multiSelectHidden": [516, "_multiselecthidden"]
+    "label": [513],
+    "hidden": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["q2-option", "q2-icon"];
+  const components = ["q2-optgroup"];
   components.forEach(tagName => { switch (tagName) {
-    case "q2-option":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Q2Option);
-      }
-      break;
-    case "q2-icon":
+    case "q2-optgroup":
       if (!customElements.get(tagName)) {
-        defineCustomElement$1();
+        customElements.define(tagName, Q2Optgroup);
       }
       break;
   } });
 }
 defineCustomElement();
 
-export { Q2Option as Q, defineCustomElement as d };
+export { Q2Optgroup as Q, defineCustomElement as d };