npm - q2-tecton-elements - Versions diffs - 1.32.1 → 1.34.0 - Mend

q2-tecton-elements 1.32.1 → 1.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (294) hide show

package/dist/components/q2-checkbox-group.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as createGuid, l as loc } from './index16.js';
+import { c as createGuid, l as loc } from './index16.js';
 import { d as defineCustomElement$2 } from './index8.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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgb(255, 255, 255))))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";
@@ -70,7 +70,7 @@ const Q2CheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2CheckboxGroup
     }
   }
   render() {
-    return (h("div", null, this.label || this.optional ? (h("div", { class: "group-legend" }, this.label && loc(this.label), this.optional ? h("span", { class: "optional-tag" }, loc('tecton.element.input.optional')) : '')) : (''), h("fieldset", { class: `q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerCheckboxChange }, this.label || this.optional ? (h("legend", { class: "sr-only" }, this.label && loc(this.label), this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''))) : (''), this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` }, h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
+    return (h("div", null, this.label || this.optional ? (h("div", { class: "group-legend" }, this.label && loc(this.label), this.optional ? h("span", { class: "optional-tag" }, loc('tecton.element.input.optional')) : '')) : (''), h("fieldset", { class: `q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerCheckboxChange }, this.label || this.optional || this.hasError ? (h("legend", { class: "sr-only" }, this.label && loc(this.label), this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''), this.hasError ? h("span", { class: "sr" }, loc('tecton.element.checkboxGroup.error')) : '')) : (''), this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` }, h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
   }
   inputDom() {
     return h("slot", null);

package/dist/components/q2-checkbox-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-checkbox-group.js","mappings":"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~~IACxB~~,cAAQ,KAAK,EAAC,SAAS,IAClB,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAC7B,IAAI,CAAC,QAAQ,IACV,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,KAExE,EAAE,CACL,~~CACI~~,KAET,EAAE,CACL,EACA,IAAI,CAAC,QAAQ,IACV,WAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,UAAU,EAAE,IAC/E,eACI,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,OAAO,GACL,CACT,KAEN,EAAE,CACL,EACA,IAAI,CAAC,QAAQ,EAAE,CACT,CACT,EACR;GACL;EAED,QAAQ;IACJ,OAAO,eAAQ,CAAC;GACnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2CheckboxGroup"],"sources":["./src/components/q2-checkbox-group/styles.scss?tag=q2-checkbox-group&encapsulation=shadow","./src/components/q2-checkbox-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n padding: var(--tct-input-error-padding, 0);\n margin: 0;\n border: 0;\n}\n\nfieldset.has-error {\n border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));\n border-width: 1px;\n border-style: solid;\n border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n top: 8px;\n right: 8px;\n position: absolute;\n width: 40%;\n text-align: right;\n background: linear-gradient(\n to right,\n var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n top: 28px;\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n color: var(\n --tct-input-label-optional-font-color,\n var(\n --tct-a11y-color,\n var(\n --t-a11y-gray-color,\n var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )\n );\n font-size: var(--tct-input-label-optional-font-size, 12px);\n font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n}\n.flexed.left {\n justify-content: left;\n}\n","import { Component, Prop, Element, h, Listen, EventEmitter, Event, ComponentInterface, Watch } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n tag: 'q2-checkbox-group',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ mutable: true }) value: object;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readonly: boolean = false;\n @Prop({ reflect: true }) optional: boolean = false;\n @Prop({ reflect: true }) hasError: boolean = false;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get protectedValue(): object {\n return this.value \|\| {};\n }\n\n onMutationObserved = () => {\n this.valueUpdated();\n this.updateDisabled();\n };\n\n onInnerCheckboxChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n const groupValue = {};\n this.checkboxElements.forEach(check => {\n groupValue[check.value] = !!check.checked;\n });\n this.change.emit(groupValue);\n };\n\n ///// LIFECYCLE HOOK ///////\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n @Watch('value')\n valueUpdated() {\n if (this.readonly) return;\n this.checkboxElements.forEach(check => {\n if (this.protectedValue.hasOwnProperty(check.value)) {\n check.checked = this.value[check.value];\n }\n });\n }\n\n @Watch('disabled')\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n ///// HOST ELEMENT EVENTS ///////\n\n @Event() change: EventEmitter;\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail;\n }\n }\n\n render() {\n return (\n <div>\n {this.label \|\| this.optional ? (\n <div class=\"group-legend\">\n {this.label && loc(this.label)}\n {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n </div>\n ) : (\n ''\n )}\n <fieldset\n class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n onChange={this.onInnerCheckboxChange}\n >\n {this.label \|\| this.optional ? (\n <legend class=\"sr-only\">\n {this.label && loc(this.label)}\n {this.optional ? (\n <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n ) : (\n ''\n )}\n </legend>\n ) : (\n ''\n )}\n {this.hasError ? (\n <div class={`error-icon-container ${this.label \|\| this.optional ? '' : 'no-label'}`}>\n <q2-icon\n class=\"h(4) w(4) mrg-b(2)\"\n type=\"error\"\n ></q2-icon>\n </div>\n ) : (\n ''\n )}\n {this.inputDom()}\n </fieldset>\n </div>\n );\n }\n\n inputDom() {\n return <slot />;\n }\n}\n"],"version":3}
1	+ {"file":"q2-checkbox-group.js","mappings":"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","names":["Q2CheckboxGroup"],"sources":["./src/components/q2-checkbox-group/styles.scss?tag=q2-checkbox-group&encapsulation=shadow","./src/components/q2-checkbox-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n padding: var(--tct-input-error-padding, 0);\n margin: 0;\n border: 0;\n}\n\nfieldset.has-error {\n border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));\n border-width: 1px;\n border-style: solid;\n border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n top: 8px;\n right: 8px;\n position: absolute;\n width: 40%;\n text-align: right;\n background: linear-gradient(\n to right,\n var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n top: 28px;\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n color: var(\n --tct-input-label-optional-font-color,\n var(\n --tct-a11y-color,\n var(\n --t-a11y-gray-color,\n var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )\n );\n font-size: var(--tct-input-label-optional-font-size, 12px);\n font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n}\n.flexed.left {\n justify-content: left;\n}\n","import { Component, Prop, Element, h, Listen, EventEmitter, Event, ComponentInterface, Watch } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n tag: 'q2-checkbox-group',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ mutable: true }) value: object;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readonly: boolean = false;\n @Prop({ reflect: true }) optional: boolean = false;\n @Prop({ reflect: true }) hasError: boolean = false;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get protectedValue(): object {\n return this.value \|\| {};\n }\n\n onMutationObserved = () => {\n this.valueUpdated();\n this.updateDisabled();\n };\n\n onInnerCheckboxChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n const groupValue = {};\n this.checkboxElements.forEach(check => {\n groupValue[check.value] = !!check.checked;\n });\n this.change.emit(groupValue);\n };\n\n ///// LIFECYCLE HOOK ///////\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n @Watch('value')\n valueUpdated() {\n if (this.readonly) return;\n this.checkboxElements.forEach(check => {\n if (this.protectedValue.hasOwnProperty(check.value)) {\n check.checked = this.value[check.value];\n }\n });\n }\n\n @Watch('disabled')\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n ///// HOST ELEMENT EVENTS ///////\n\n @Event() change: EventEmitter;\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail;\n }\n }\n\n render() {\n return (\n <div>\n {this.label \|\| this.optional ? (\n <div class=\"group-legend\">\n {this.label && loc(this.label)}\n {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n </div>\n ) : (\n ''\n )}\n <fieldset\n class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n onChange={this.onInnerCheckboxChange}\n >\n {this.label \|\| this.optional \|\| this.hasError ? (\n <legend class=\"sr-only\">\n {this.label && loc(this.label)}\n {this.optional ? (\n <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n ) : (\n ''\n )}\n {this.hasError ? <span class=\"sr\">{loc('tecton.element.checkboxGroup.error')}</span> : ''}\n </legend>\n ) : (\n ''\n )}\n {this.hasError ? (\n <div class={`error-icon-container ${this.label \|\| this.optional ? '' : 'no-label'}`}>\n <q2-icon\n class=\"h(4) w(4) mrg-b(2)\"\n type=\"error\"\n ></q2-icon>\n </div>\n ) : (\n ''\n )}\n {this.inputDom()}\n </fieldset>\n </div>\n );\n }\n\n inputDom() {\n return <slot />;\n }\n}\n"],"version":3}

package/dist/components/q2-dropdown.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-import { b as handleRenamedProp, h as handleAriaLabel, a as isEventFromElement, o as overrideFocus, l as loc } from './index16.js';
+import { a as handleRenamedProp, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus, l as loc } from './index16.js';
 import { d as defineCustomElement$7 } from './index2.js';
 import { d as defineCustomElement$6 } from './index5.js';
 import { d as defineCustomElement$5 } from './index7.js';
@@ -97,6 +97,9 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends H
         this.focusAdjacentItem(item, 'next');
         return;
       }
+      if (event.key === 'Tab') {
+        event.preventDefault();
+      }
     };
     this.type = 'icon';
     this.icon = undefined;
@@ -181,6 +184,9 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends H
   get hasCustomButton() {
     return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');
   }
+  get determineDropdownItemCount() {
+    return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;
+  }
   get toggleButtonProps() {
     const allowedIntents = ['primary', 'secondary', 'neutral'];
     const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];
@@ -282,9 +288,10 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends H
     const targetItem = dropdownItems[targetIndex];
     targetItem && targetItem.dispatchEvent(new Event('focus'));
   }
+  /// DOM ///
   render() {
     const btnProps = this.toggleButtonProps;
-    return (h("click-elsewhere", { class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null, this.icon ? h("q2-icon", { type: this.icon }) : ' ', this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))), h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("div", { onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown }, h("slot", null), this.open && (h("q2-btn", { class: "sr close-dropdown", onFocus: this.closeDropdown }))))));
+    return (h("click-elsewhere", { class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null, this.icon ? h("q2-icon", { type: this.icon }) : ' ', this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))), h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("div", { onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown }, h("slot", null), this.open && (h("q2-btn", { class: "sr close-dropdown", onFocus: this.closeDropdown }))))));
   }
   get hostElement() { return this; }
   static get watchers() { return {

package/dist/components/q2-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-dropdown.js","mappings":"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","names":["Q2Dropdown"],"sources":["./src/components/q2-dropdown/styles.scss?tag=q2-dropdown&encapsulation=shadow","./src/components/q2-dropdown/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-flex;\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n\nq2-popover {\n --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { handleAriaLabel, handleRenamedProp, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-dropdown',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Dropdown implements ComponentInterface {\n @Prop({ reflect: true }) type: 'icon' \| 'fab' \| 'custom' \| 'primary' \| 'secondary' \| 'neutral' = 'icon';\n @Prop({ reflect: true }) icon: string;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) context: string;\n @Prop({ reflect: true }) contextValue: string;\n @Prop({ reflect: true }) resolvedType: string;\n @Prop({ reflect: true }) additionalContext: string;\n @Prop({ reflect: true }) block: boolean;\n @Prop({ reflect: true, mutable: true }) open: boolean;\n @Prop() popoverMinHeight: number = 150;\n @Prop({ mutable: true }) popoverDirection: 'up' \| 'down';\n @Prop({ mutable: true }) popoverAlignment: 'left' \| 'right' = 'left'; // being used in dropdown.scss\n\n /** @deprecated /\n @Prop({ reflect: true }) alignment: 'left' \| 'right';\n\n /* @deprecated /\n @Prop({ reflect: true }) popDirection: 'up' \| 'down';\n\n /* @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n\n privatePopDirection: 'down' \| 'up';\n controlElement?: HTMLQ2BtnElement;\n popoverElement?: HTMLQ2PopoverElement;\n dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n\n resolveMenu() {\n return (\n this.name &&\n window.TectonElements &&\n window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n );\n }\n\n orchestrateResolvedMenuItems() {\n if (!this.name \|\| !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n resolveMenuItemElements() {\n return this.resolveMenu().then(datas => {\n return datas.map(menuItemData => {\n let onClickFn;\n let queryParams;\n if (menuItemData['tct-ctxid']) {\n queryParams = {};\n queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n }\n\n switch (menuItemData.action) {\n case 'navigateTo':\n onClickFn = () =>\n this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n break;\n case 'showOverpanel':\n onClickFn = () =>\n this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n break;\n }\n\n const newDropdownItem = document.createElement('q2-dropdown-item');\n newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n newDropdownItem.classList.add('resolved-menu-item');\n newDropdownItem.innerHTML = menuItemData.itemLabel;\n newDropdownItem.onclick = onClickFn;\n\n return newDropdownItem;\n });\n });\n }\n\n navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n }\n\n showOverpanel(overpanelPath: string, params: IDict<string>) {\n return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n }\n\n get hasCustomButton() {\n return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');\n }\n\n get toggleButtonProps() {\n const allowedIntents = ['primary', 'secondary', 'neutral'];\n const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n const type = allowedTypes.includes(this.type) ? this.type : '';\n const icon = type === 'icon';\n const fab = type === 'fab';\n const custom = type === 'custom';\n let intent;\n if (allowedIntents.includes(type)) {\n intent = type === 'neutral' ? type : `workflow-${type}`;\n }\n const active = this.open;\n const disabled = !!this.disabled;\n const ariaExpanded = this.open;\n const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n return {\n icon,\n fab,\n intent,\n active,\n disabled,\n ariaExpanded,\n className,\n custom,\n };\n }\n\n //////// Observers //////////\n @Watch('popDirection')\n popDirectionHandler() {\n handleRenamedProp(this, 'popDirection', 'popoverDirection');\n }\n\n @Watch('alignment')\n alignmentHandler() {\n handleRenamedProp(this, 'alignment', 'popoverAlignment');\n }\n\n @Watch('ariaLabel')\n ariaLabelHandler() {\n handleAriaLabel(this);\n }\n\n @Watch('name')\n nameHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('context')\n contextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('contextValue')\n contextValueHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('resolvedType')\n resolvedTypeHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('additionalContext')\n additionalContextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusToggle();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n this.popoverElement?.scrollContainerTo({ top: 0 });\n }\n\n ///// Lifecycle Hooks ////////\n componentWillLoad() {\n this.popDirectionHandler();\n this.alignmentHandler();\n this.ariaLabelHandler();\n }\n\n componentDidLoad() {\n this.orchestrateResolvedMenuItems();\n overrideFocus(this.hostElement);\n }\n\n ///// Actions ////////\n focusToggle = () => {\n this.controlElement.shadowRoot.querySelector<HTMLButtonElement>('button').focus();\n };\n\n openDropdown = () => {\n if (this.open) return;\n this.open = true;\n };\n\n closeDropdown = () => {\n if (!this.open) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onToggleClick = () => {\n if (this.open) {\n this.closeDropdown();\n } else {\n this.openDropdown();\n }\n };\n\n onToggleKeydown = (event: KeyboardEvent) => {\n if (['ArrowUp', 'Up'].includes(event.key)) {\n event.preventDefault();\n this.openDropdown();\n this.focusLastItem();\n return;\n }\n\n if (['ArrowDown', 'Down'].includes(event.key)) {\n event.preventDefault();\n this.openDropdown();\n this.focusFirstItem();\n return;\n }\n\n if (['Escape', 'Esc'].includes(event.key)) {\n event.preventDefault();\n this.focusToggle();\n this.closeDropdown();\n return;\n }\n };\n\n onDropdownMenuClick = (event: MouseEvent \| CustomEvent) => {\n if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n return;\n }\n const item = event.target as HTMLQ2DropdownItemElement;\n if (!item.disabled && !item.separator) {\n this.focusToggle();\n this.closeDropdown();\n }\n };\n\n focusFirstItem() {\n const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:first-child`\n );\n\n firstItem?.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusLastItem() {\n const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:last-child`\n );\n lastItem?.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' \| 'prev') {\n const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n this.hostElement.querySelectorAll(this.dropdownItemSelector)\n );\n\n const activeIndex = dropdownItems.indexOf(activeItem);\n\n if (activeIndex === -1) {\n return;\n }\n\n let targetIndex: number = 0;\n if (direction === 'next') {\n targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n } else if (direction === 'prev') {\n if (activeIndex > 0) {\n targetIndex = activeIndex - 1;\n } else {\n targetIndex = dropdownItems.length - 1;\n }\n }\n const targetItem = dropdownItems[targetIndex];\n targetItem && targetItem.dispatchEvent(new Event('focus'));\n }\n\n onDropdownMenuKeydown = (event: KeyboardEvent) => {\n if (['Escape', 'Esc'].includes(event.key)) {\n this.closeDropdown();\n this.focusToggle();\n return;\n }\n\n if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n return;\n }\n\n const item = event.target as HTMLQ2DropdownItemElement;\n if (['ArrowUp', 'Up'].includes(event.key)) {\n event.preventDefault();\n this.focusAdjacentItem(item, 'prev');\n return;\n }\n\n if (['ArrowDown', 'Down'].includes(event.key)) {\n event.preventDefault();\n this.focusAdjacentItem(item, 'next');\n return;\n }\n };\n\n render() {\n const btnProps = this.toggleButtonProps;\n\n return (\n <click-elsewhere\n class={this.open ? 'dropdown-open' : ''}\n onChange={this.onClickElsewhere}\n test-id=\"dropdownContainer\"\n >\n <q2-btn\n ref={el => (this.controlElement = el)}\n class={btnProps.className}\n onClick={this.onToggleClick}\n onKeyDown={this.onToggleKeydown}\n fab={btnProps.fab}\n intent={btnProps.intent}\n active={btnProps.active}\n disabled={btnProps.disabled}\n ariaExpanded={`${!!btnProps.ariaExpanded}`}\n label={this.hideLabel && this.label ? loc(this.label) : undefined}\n hideLabel={this.hideLabel}\n ariaHasPopup=\"menu\"\n test-id=\"dropdownButton\"\n block={this.block}\n >\n {this.hasCustomButton ? (\n <div\n test-id=\"dropdownCustom\"\n class={btnProps.custom ? '' : 'hidden'}\n >\n <slot name=\"custom-dropdown-button\" />\n </div>\n ) : (\n <Fragment>\n {this.icon ? <q2-icon type={this.icon} /> : ' '}\n {this.label && !this.hideLabel && (\n <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n )}\n </Fragment>\n )}\n </q2-btn>\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.controlElement}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <div\n onClick={this.onDropdownMenuClick}\n onKeyDown={this.onDropdownMenuKeydown}\n >\n <slot />\n {this.open && (\n <q2-btn\n class=\"sr close-dropdown\"\n onFocus={this.closeDropdown}\n />\n )}\n </div>\n </q2-popover>\n </click-elsewhere>\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-dropdown.js","mappings":"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","names":["Q2Dropdown"],"sources":["./src/components/q2-dropdown/styles.scss?tag=q2-dropdown&encapsulation=shadow","./src/components/q2-dropdown/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-flex;\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n\nq2-popover {\n --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { handleAriaLabel, handleRenamedProp, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-dropdown',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Dropdown implements ComponentInterface {\n @Prop({ reflect: true }) type: 'icon' \| 'fab' \| 'custom' \| 'primary' \| 'secondary' \| 'neutral' = 'icon';\n @Prop({ reflect: true }) icon: string;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) context: string;\n @Prop({ reflect: true }) contextValue: string;\n @Prop({ reflect: true }) resolvedType: string;\n @Prop({ reflect: true }) additionalContext: string;\n @Prop({ reflect: true }) block: boolean;\n @Prop({ reflect: true, mutable: true }) open: boolean;\n @Prop() popoverMinHeight: number = 150;\n @Prop({ mutable: true }) popoverDirection: 'up' \| 'down';\n @Prop({ mutable: true }) popoverAlignment: 'left' \| 'right' = 'left'; // being used in dropdown.scss\n\n /** @deprecated /\n @Prop({ reflect: true }) alignment: 'left' \| 'right';\n\n /* @deprecated /\n @Prop({ reflect: true }) popDirection: 'up' \| 'down';\n\n /* @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n privatePopDirection: 'down' \| 'up';\n controlElement?: HTMLQ2BtnElement;\n popoverElement?: HTMLQ2PopoverElement;\n dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n\n resolveMenu() {\n return (\n this.name &&\n window.TectonElements &&\n window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n );\n }\n\n orchestrateResolvedMenuItems() {\n if (!this.name \|\| !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n resolveMenuItemElements() {\n return this.resolveMenu().then(datas => {\n return datas.map(menuItemData => {\n let onClickFn;\n let queryParams;\n if (menuItemData['tct-ctxid']) {\n queryParams = {};\n queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n }\n\n switch (menuItemData.action) {\n case 'navigateTo':\n onClickFn = () =>\n this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n break;\n case 'showOverpanel':\n onClickFn = () =>\n this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n break;\n }\n\n const newDropdownItem = document.createElement('q2-dropdown-item');\n newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n newDropdownItem.classList.add('resolved-menu-item');\n newDropdownItem.innerHTML = menuItemData.itemLabel;\n newDropdownItem.onclick = onClickFn;\n\n return newDropdownItem;\n });\n });\n }\n\n navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n }\n\n showOverpanel(overpanelPath: string, params: IDict<string>) {\n return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n }\n\n get hasCustomButton() {\n return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');\n }\n\n get determineDropdownItemCount() {\n return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n }\n\n get toggleButtonProps() {\n const allowedIntents = ['primary', 'secondary', 'neutral'];\n const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n const type = allowedTypes.includes(this.type) ? this.type : '';\n const icon = type === 'icon';\n const fab = type === 'fab';\n const custom = type === 'custom';\n let intent;\n if (allowedIntents.includes(type)) {\n intent = type === 'neutral' ? type : `workflow-${type}`;\n }\n const active = this.open;\n const disabled = !!this.disabled;\n const ariaExpanded = this.open;\n const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n return {\n icon,\n fab,\n intent,\n active,\n disabled,\n ariaExpanded,\n className,\n custom,\n };\n }\n\n //////// Observers //////////\n @Watch('popDirection')\n popDirectionHandler() {\n handleRenamedProp(this, 'popDirection', 'popoverDirection');\n }\n\n @Watch('alignment')\n alignmentHandler() {\n handleRenamedProp(this, 'alignment', 'popoverAlignment');\n }\n\n @Watch('ariaLabel')\n ariaLabelHandler() {\n handleAriaLabel(this);\n }\n\n @Watch('name')\n nameHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('context')\n contextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('contextValue')\n contextValueHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('resolvedType')\n resolvedTypeHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('additionalContext')\n additionalContextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusToggle();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n this.popoverElement?.scrollContainerTo({ top: 0 });\n }\n\n ///// Lifecycle Hooks ////////\n componentWillLoad() {\n this.popDirectionHandler();\n this.alignmentHandler();\n this.ariaLabelHandler();\n }\n\n componentDidLoad() {\n this.orchestrateResolvedMenuItems();\n overrideFocus(this.hostElement);\n }\n\n ///// Actions ////////\n focusToggle = () => {\n this.controlElement.shadowRoot.querySelector<HTMLButtonElement>('button').focus();\n };\n\n openDropdown = () => {\n if (this.open) return;\n this.open = true;\n };\n\n closeDropdown = () => {\n if (!this.open) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onToggleClick = () => {\n if (this.open) {\n this.closeDropdown();\n } else {\n this.openDropdown();\n }\n };\n\n onToggleKeydown = (event: KeyboardEvent) => {\n if (['ArrowUp', 'Up'].includes(event.key)) {\n event.preventDefault();\n this.openDropdown();\n this.focusLastItem();\n return;\n }\n\n if (['ArrowDown', 'Down'].includes(event.key)) {\n event.preventDefault();\n this.openDropdown();\n this.focusFirstItem();\n return;\n }\n\n if (['Escape', 'Esc'].includes(event.key)) {\n event.preventDefault();\n this.focusToggle();\n this.closeDropdown();\n return;\n }\n };\n\n onDropdownMenuClick = (event: MouseEvent \| CustomEvent) => {\n if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n return;\n }\n const item = event.target as HTMLQ2DropdownItemElement;\n if (!item.disabled && !item.separator) {\n this.focusToggle();\n this.closeDropdown();\n }\n };\n\n focusFirstItem() {\n const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:first-child`\n );\n\n firstItem?.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusLastItem() {\n const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:last-child`\n );\n lastItem?.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' \| 'prev') {\n const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n this.hostElement.querySelectorAll(this.dropdownItemSelector)\n );\n\n const activeIndex = dropdownItems.indexOf(activeItem);\n\n if (activeIndex === -1) {\n return;\n }\n\n let targetIndex: number = 0;\n if (direction === 'next') {\n targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n } else if (direction === 'prev') {\n if (activeIndex > 0) {\n targetIndex = activeIndex - 1;\n } else {\n targetIndex = dropdownItems.length - 1;\n }\n }\n const targetItem = dropdownItems[targetIndex];\n targetItem && targetItem.dispatchEvent(new Event('focus'));\n }\n\n onDropdownMenuKeydown = (event: KeyboardEvent) => {\n if (['Escape', 'Esc'].includes(event.key)) {\n this.closeDropdown();\n this.focusToggle();\n return;\n }\n\n if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n return;\n }\n\n const item = event.target as HTMLQ2DropdownItemElement;\n if (['ArrowUp', 'Up'].includes(event.key)) {\n event.preventDefault();\n this.focusAdjacentItem(item, 'prev');\n return;\n }\n\n if (['ArrowDown', 'Down'].includes(event.key)) {\n event.preventDefault();\n this.focusAdjacentItem(item, 'next');\n return;\n }\n if (event.key === 'Tab') {\n event.preventDefault();\n }\n };\n\n /// DOM ///\n\n render() {\n const btnProps = this.toggleButtonProps;\n\n return (\n <click-elsewhere\n class={this.open ? 'dropdown-open' : ''}\n onChange={this.onClickElsewhere}\n test-id=\"dropdownContainer\"\n >\n <q2-btn\n ref={el => (this.controlElement = el)}\n class={btnProps.className}\n onClick={this.onToggleClick}\n onKeyDown={this.onToggleKeydown}\n fab={btnProps.fab}\n intent={btnProps.intent}\n active={btnProps.active}\n disabled={btnProps.disabled}\n ariaExpanded={`${!!btnProps.ariaExpanded}`}\n label={this.hideLabel && this.label ? loc(this.label) : undefined}\n hideLabel={this.hideLabel}\n ariaHasPopup=\"menu\"\n test-id=\"dropdownButton\"\n block={this.block}\n description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n >\n {this.hasCustomButton ? (\n <div\n test-id=\"dropdownCustom\"\n class={btnProps.custom ? '' : 'hidden'}\n >\n <slot name=\"custom-dropdown-button\" />\n </div>\n ) : (\n <Fragment>\n {this.icon ? <q2-icon type={this.icon} /> : ' '}\n {this.label && !this.hideLabel && (\n <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n )}\n </Fragment>\n )}\n </q2-btn>\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.controlElement}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <div\n onClick={this.onDropdownMenuClick}\n onKeyDown={this.onDropdownMenuKeydown}\n >\n <slot />\n {this.open && (\n <q2-btn\n class=\"sr close-dropdown\"\n onFocus={this.closeDropdown}\n />\n )}\n </div>\n </q2-popover>\n </click-elsewhere>\n );\n }\n}\n"],"version":3}

package/dist/components/q2-editable-field.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loc, h as handleAriaLabel, o as overrideFocus, a as isEventFromElement } from './index16.js';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index16.js';
 import { d as defineCustomElement$6 } from './index4.js';
 import { d as defineCustomElement$5 } from './index5.js';
 import { d as defineCustomElement$4 } from './index8.js';

package/dist/components/q2-loading-element.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 import { a as atoms } from './shapes.js';
-const stylesCss = "q2-loading-element{display:block}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2))))}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}";
+const stylesCss = "q2-loading-element{display:block}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--t-a11y-gray-color-AA, #949494)))}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}";
 const Q2Loading = /*@__PURE__*/ proxyCustomElement(class Q2Loading extends HTMLElement {
   constructor() {

package/dist/components/q2-loading-element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-loading-element.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~ojBAAojB~~;;~~MCQzjB~~,SAAS;;;;;;;;;EAMlB,IAAI,WAAW;IACX,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;QAClB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACd,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,YAAY,EAAE,IAAI,CAAC,YAAY;OAClC,CAAC;QACF,EAAE,CAAC;GACZ;EAED,MAAM;IACF,OAAO,IAAI,CAAC,WAAW,CAAC;GAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/q2-loading/skeleton/q2-loading-element/styles.scss?tag=q2-loading-element","./src/components/q2-loading/skeleton/q2-loading-element/index.tsx"],"sourcesContent":["q2-loading-element {\n display: block;\n}\n\n@import './../atoms.scss';","import { Component, Prop, ComponentInterface } from '@stencil/core';\nimport { atoms } from './../shapes';\n\n@Component({\n tag: 'q2-loading-element',\n shadow: false,\n styleUrl: 'styles.scss',\n})\nexport class Q2Loading implements ComponentInterface {\n @Prop({ reflect: true }) shape: string;\n @Prop({ reflect: true }) width: string;\n @Prop({ reflect: true }) height: string;\n @Prop({ reflect: true }) borderRadius: string;\n\n get shapeMarkup() {\n return atoms[this.shape]\n ? atoms[this.shape]({\n width: this.width,\n height: this.height,\n borderRadius: this.borderRadius,\n })\n : '';\n }\n\n render() {\n return this.shapeMarkup;\n }\n}\n"],"version":3}
1	+ {"file":"q2-loading-element.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,2iBAA2iB;;MCQhjB,SAAS;;;;;;;;;EAMlB,IAAI,WAAW;IACX,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;QAClB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACd,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,YAAY,EAAE,IAAI,CAAC,YAAY;OAClC,CAAC;QACF,EAAE,CAAC;GACZ;EAED,MAAM;IACF,OAAO,IAAI,CAAC,WAAW,CAAC;GAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/q2-loading/skeleton/q2-loading-element/styles.scss?tag=q2-loading-element","./src/components/q2-loading/skeleton/q2-loading-element/index.tsx"],"sourcesContent":["q2-loading-element {\n display: block;\n}\n\n@import './../atoms.scss';","import { Component, Prop, ComponentInterface } from '@stencil/core';\nimport { atoms } from './../shapes';\n\n@Component({\n tag: 'q2-loading-element',\n shadow: false,\n styleUrl: 'styles.scss',\n})\nexport class Q2Loading implements ComponentInterface {\n @Prop({ reflect: true }) shape: string;\n @Prop({ reflect: true }) width: string;\n @Prop({ reflect: true }) height: string;\n @Prop({ reflect: true }) borderRadius: string;\n\n get shapeMarkup() {\n return atoms[this.shape]\n ? atoms[this.shape]({\n width: this.width,\n height: this.height,\n borderRadius: this.borderRadius,\n })\n : '';\n }\n\n render() {\n return this.shapeMarkup;\n }\n}\n"],"version":3}

package/dist/components/q2-pagination.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { n as nextPaint, o as overrideFocus, a as isEventFromElement, l as loc } from './index16.js';
+import { n as nextPaint, o as overrideFocus, i as isEventFromElement, l as loc } from './index16.js';
 import { d as defineCustomElement$6 } from './index4.js';
 import { d as defineCustomElement$5 } from './index5.js';
 import { d as defineCustomElement$4 } from './index8.js';

package/dist/components/q2-pill.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { r as resizeIframe, o as overrideFocus, l as loc, a as isEventFromElement } from './index16.js';
+import { r as resizeIframe, o as overrideFocus, l as loc, i as isEventFromElement } from './index16.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet.js';
 import { d as defineCustomElement$5 } from './index2.js';
 import { d as defineCustomElement$4 } from './index8.js';
 import { d as defineCustomElement$3 } from './index14.js';
 import { d as defineCustomElement$2 } from './index15.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{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--compt-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--t-primary-l5, #61c4ff);--comp-active-btn-color:var(--t-primary-text, #ffffff);--comp-active-btn-border-color:var(--t-primary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-primary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-primary-l3, #21acff)}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--t-secondary-l5, #d9e1e6);--comp-active-btn-color:var(--t-secondary-text, #141414);--comp-active-btn-border-color:var(--t-secondary-l5, #d9e1e6);--comp-hover-active-btn-background:var(--t-secondary-l3, #c9d5db);--comp-hover-active-btn-border-color:var(--t-secondary-l3, #c9d5db)}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--t-tertiary-l5, #f4fafe);--comp-active-btn-color:var(--t-tertiary-text, #141414);--comp-active-btn-border-color:var(--t-tertiary-l5, #f4fafe);--comp-hover-active-btn-background:var(--t-tertiary-l3, #eff8fd);--comp-hover-active-btn-border-color:var(--t-tertiary-l3, #eff8fd)}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";
+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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-color, var(--t-primary-l5, #61c4ff));--comp-active-btn-color:var(--t-primary-text, #ffffff);--comp-active-btn-border-color:var(--t-primary-l5, #61c4ff);--comp-hover-active-btn-background:var(--tct-pill-hover-primary-color, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--t-primary-l3, #21acff)}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-color, var(--t-secondary-l5, #d9e1e6));--comp-active-btn-color:var(--t-secondary-text, #141414);--comp-active-btn-border-color:var(--t-secondary-l5, #d9e1e6);--comp-hover-active-btn-background:var(--tct-pill-hover-secondary-color, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--t-secondary-l3, #c9d5db)}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-color, var(--t-tertiary-l5, #f4fafe));--comp-active-btn-color:var(--t-tertiary-text, #141414);--comp-active-btn-border-color:var(--t-tertiary-l5, #f4fafe);--comp-hover-active-btn-background:var(--tct-pill-hover-tertiary-color, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--t-tertiary-l3, #eff8fd)}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";
 const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLElement {
   constructor() {
@@ -38,13 +38,13 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
       const { selectedOptions } = this;
       const selectedValues = selectedOptions.map(option => option.value);
       const options = await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions());
-      if (this.hasOptions)
+      if (this.optionCount)
         this.active = !!selectedValues.length;
       this.selectedOptionElements = (options === null || options === void 0 ? void 0 : options.filter(option => selectedValues.includes(option.value))) || [];
     };
-    this.determineHasOptions = () => {
-      const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
-      this.hasOptions = hasOptions;
+    this.determineOptionCount = () => {
+      const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;
+      this.optionCount = numberOfOptions;
     };
     this.clearSelectedOptions = () => {
       this.selectedOptions = [];
@@ -60,7 +60,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
       event.stopPropagation();
       if (this.disabled)
         return;
-      if (this.hasOptions) {
+      if (this.optionCount) {
         if (shouldShowActionSheet(this)) {
           this.executeActionSheet(event);
         }
@@ -82,7 +82,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
     };
     this.handleKeydown = async (event) => {
       const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';
-      if (!this.hasOptions || this.disabled || isTabMetaOrCtrl)
+      if (!this.optionCount || this.disabled || isTabMetaOrCtrl)
         return;
       event.preventDefault();
       if (shouldShowActionSheet(this, event)) {
@@ -101,7 +101,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
     };
     this.handleChange = event => {
       event.stopPropagation();
-      if (!this.hasOptions)
+      if (!this.optionCount)
         return;
       this.handleSelectionChanges(event.detail);
     };
@@ -132,12 +132,13 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
     this.popoverMinHeight = 150;
     this.popoverDirection = undefined;
     this.popoverAlignment = 'right';
-    this.hasOptions = undefined;
+    this.optionListLabel = undefined;
+    this.optionCount = undefined;
     this.selectedOptionElements = [];
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
-    const observer = new MutationObserver(this.determineHasOptions);
+    const observer = new MutationObserver(this.determineOptionCount);
     observer.observe(this.hostElement, { childList: true, attributes: true });
     this.mutationObserver = observer;
   }
@@ -155,8 +156,8 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
   }
   /// Getters ///
   get buttonContent() {
-    const { label, selectedOptions, selectedOptionElements, hasOptions } = this;
-    if (!hasOptions || selectedOptionElements.length === 0)
+    const { label, selectedOptions, selectedOptionElements, optionCount } = this;
+    if (!optionCount || selectedOptionElements.length === 0)
       return label;
     else if (selectedOptionElements.length === 1)
       return selectedOptionElements[0].display;
@@ -247,20 +248,23 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
   }
   /// DOM ///
   generateIcon() {
-    const { hasOptions, active } = this;
-    const isButton = hasOptions && active;
+    const { optionCount, active } = this;
+    const isButton = optionCount && active;
     const TagName = isButton ? 'button' : 'div';
-    const iconName = isButton || !hasOptions ? 'close' : 'chevron-down';
+    const iconName = isButton || !optionCount ? 'close' : 'chevron-down';
     return (h(TagName, { class: "btn-close", onClick: isButton && this.clearSelectedOptions, disabled: isButton && this.disabled, "aria-label": isButton && loc('tecton.element.pill.clearSelection'), type: isButton && 'button' }, h("q2-icon", { type: iconName })));
   }
+  generateHiddenElement() {
+    return (h("div", { id: "option-description", class: "sr", "aria-hidden": "true" }, loc('tecton.element.optionList.optionCount', [this.optionCount])));
+  }
   render() {
-    const { hasOptions, active, open } = this;
+    const { optionCount, active, open } = this;
     const wrapperClassNames = ['btn-wrapper'];
-    if (hasOptions || active)
+    if (optionCount || active)
       wrapperClassNames.push('has-icon');
-    if (hasOptions)
+    if (optionCount)
       wrapperClassNames.push('has-options');
-    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent }, this.truncatedButtonContent, !hasOptions && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon()), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { role: "menu", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements() }, h("slot", null))))));
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": optionCount && 'option-list', "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { role: "menu", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", null))))));
   }
   get hostElement() { return this; }
   static get watchers() { return {
@@ -282,7 +286,8 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
     "popoverMinHeight": [2, "popover-min-height"],
     "popoverDirection": [1, "popover-direction"],
     "popoverAlignment": [1025, "popover-alignment"],
-    "hasOptions": [32],
+    "optionListLabel": [1, "option-list-label"],
+    "optionCount": [32],
     "selectedOptionElements": [32]
   }, [[0, "focus", "delegateFocus"], [0, "popoverStateChanged", "popoverStateHandler"], [0, "displayChanged", "handleSelectedDisplay"]]]);
 function defineCustomElement$1() {

package/dist/components/q2-pill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-pill.js","mappings":"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","names":["Q2Pill"],"sources":["./src/components/q2-pill/styles.scss?tag=q2-pill&encapsulation=shadow","./src/components/q2-pill/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n --comp-close-size: 0px;\n --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n --compt-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n --comp-active-btn-color: var(--comp-btn-background);\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n position: relative;\n\n :host(:not(:empty)) &,\n &.has-icon {\n --comp-close-size: var(--comp-pill-btn-height);\n }\n\n :host([active]) & {\n --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n }\n\n :host([theme='primary']) & {\n --comp-active-btn-background: #{var-list(--t-primary-l5, #61c4ff)};\n --comp-active-btn-color: #{var-list(--t-primary-text, #ffffff)};\n --comp-active-btn-border-color: #{var-list(--t-primary-l5, #61c4ff)};\n --comp-hover-active-btn-background: #{var-list(--t-primary-l3, #21acff)};\n --comp-hover-active-btn-border-color: #{var-list(--t-primary-l3, #21acff)};\n }\n\n :host([theme='secondary']) & {\n --comp-active-btn-background: #{var-list(--t-secondary-l5, #d9e1e6)};\n --comp-active-btn-color: #{var-list(--t-secondary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--t-secondary-l5, #d9e1e6)};\n --comp-hover-active-btn-background: #{var-list(--t-secondary-l3, #c9d5db)};\n --comp-hover-active-btn-border-color: #{var-list(--t-secondary-l3, #c9d5db)};\n }\n\n :host([theme='tertiary']) & {\n --comp-active-btn-background: #{var-list(--t-tertiary-l5, #f4fafe)};\n --comp-active-btn-color: #{var-list(--t-tertiary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--t-tertiary-l5, #f4fafe)};\n --comp-hover-active-btn-background: #{var-list(--t-tertiary-l3, #eff8fd)};\n --comp-hover-active-btn-border-color: #{var-list(--t-tertiary-l3, #eff8fd)};\n }\n}\n\n.btn-height-wrapper {\n height: var(--comp-pill-min-height);\n display: flex;\n align-items: center;\n cursor: pointer;\n &:focus {\n box-shadow: none;\n }\n\n :host([disabled]) & {\n cursor: not-allowed;\n }\n}\n\n.btn-close,\n.btn-primary {\n cursor: pointer;\n height: var(--comp-pill-btn-height);\n border-style: solid;\n border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n transition-property: background, color, padding, width, opacity;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n :host([disabled]) & {\n opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n}\n\n.btn-primary {\n background: var(--comp-btn-background);\n border-width: var-list(--comp-pill-btn-border-width);\n border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n padding-inline: var(--comp-btn-padding);\n padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n color: var(--comp-btn-color);\n display: block;\n width: 100%;\n text-align: start;\n\n &:focus,\n &:hover {\n background: var(--comp-hover-btn-background);\n }\n\n :host(:not(:empty)) &,\n .has-icon & {\n padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n }\n\n .has-options & {\n @include line-clamp(1);\n max-width: var-list(var-prefixer(pill-max-width), 200px);\n }\n\n :host([active]) & {\n background: var(--comp-active-btn-background);\n border-color: var(--comp-active-btn-border-color);\n color: var(--comp-active-btn-color);\n\n &:focus,\n &:hover {\n background: var(--comp-hover-active-btn-background);\n border-color: var(--comp-hover-active-btn-border-color);\n }\n }\n}\n\n.btn-close {\n background: transparent;\n border-color: transparent;\n border-width: var(--comp-pill-btn-border-width);\n width: var(--comp-close-size);\n height: var(--comp-close-size);\n padding: 0;\n border: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n :host([active]) & {\n color: var(--comp-active-btn-color);\n }\n\n :host(:not(:empty)) &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --t-icon-stroke-primary: currentColor;\n width: var-list(var-prefixer(pill-icon-size), 14px);\n height: var-list(var-prefixer(pill-icon-size), 14px);\n transition-property: transform;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n pointer-events: none;\n\n :host([open]) & q2-icon {\n transform: rotate(180deg);\n }\n}\n\nbutton.btn-close {\n :host([active]) & {\n &:focus,\n &:hover {\n background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n }\n }\n}\n\nq2-popover {\n top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Listen,\n Watch,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list';\n\n@Component({\n tag: 'q2-pill',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Pill implements ComponentInterface {\n @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true, mutable: true }) active: boolean;\n @Prop({ reflect: true, mutable: true }) open: boolean;\n @Prop({ reflect: true }) multiple: boolean;\n @Prop({ reflect: true }) maxLength: number;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true, mutable: true }) value: string;\n @Prop({ reflect: true }) theme: 'primary' \| 'secondary' \| 'tertiary';\n @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n @Prop() popoverMinHeight: number = 150;\n @Prop() popoverDirection: 'up' \| 'down';\n @Prop({ mutable: true }) popoverAlignment: 'left' \| 'right' = 'right';\n\n @State() hasOptions: boolean;\n @State() selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n @Element() hostElement: HTMLElement;\n @Event() change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n scheduledAfterRender: (() => void)[] = [];\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n optionList: HTMLQ2OptionListElement;\n mutationObserver: MutationObserver;\n popoverElement: HTMLQ2PopoverElement;\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n const observer = new MutationObserver(this.determineHasOptions);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, hasOptions } = this;\n\n if (!hasOptions \|\| selectedOptionElements.length === 0) return label;\n else if (selectedOptionElements.length === 1) return selectedOptionElements[0].display;\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength)\n return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n else return buttonContent;\n }\n\n /// Helpers ///\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\n };\n\n getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.hasOptions) this.active = !!selectedValues.length;\n this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) \|\| [];\n };\n\n determineHasOptions = () => {\n const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;\n this.hasOptions = hasOptions;\n };\n\n async executeActionSheet(event: MouseEvent \| KeyboardEvent) {\n const result = await showActionSheetList(this, event);\n this.handleSelectionChanges(result);\n }\n\n async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = await this.getOption(value);\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : undefined;\n this.value = selectedOption.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n /// Watchers ///\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (multiple) return;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = await this.getOption(newValue);\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = [{ value, display }];\n }\n }\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n /// Listeners ///\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.optionList.setActiveElement(null);\n }\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n /// Event Handlers ///\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.hasOptions) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.selectedOptions = values;\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.hasOptions \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n\n event.preventDefault();\n if (shouldShowActionSheet(this, event)) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n this.open = false;\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.hasOptions) return;\n this.handleSelectionChanges(event.detail);\n };\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.click();\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n /// DOM ///\n generateIcon() {\n const { hasOptions, active } = this;\n const isButton = hasOptions && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !hasOptions ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={isButton && this.clearSelectedOptions}\n disabled={isButton && this.disabled}\n aria-label={isButton && loc('tecton.element.pill.clearSelection')}\n type={isButton && 'button'}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n render() {\n const { hasOptions, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (hasOptions \|\| active) wrapperClassNames.push('has-icon');\n if (hasOptions) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n disabled={this.disabled}\n aria-selected={!hasOptions && active ? 'true' : 'false'}\n aria-roledescription={!hasOptions && 'filter'}\n aria-controls={hasOptions && 'option-list'}\n aria-haspopup={hasOptions && 'true'}\n aria-expanded={(hasOptions && `${!!open}`) \|\| undefined}\n aria-label={this.maxLength && this.buttonContent}\n >\n {this.truncatedButtonContent}\n {!hasOptions && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.generateIcon()}\n </div>\n {this.hasOptions && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <q2-option-list\n role=\"menu\"\n ref={el => (this.optionList = el)}\n id=\"option-list\"\n onChange={this.handleChange}\n multiple={this.multiple}\n selectedOptions={this.selectedOptions}\n onReady={() => this.updateSelectedOptionElements()}\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-pill.js","mappings":"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","names":["Q2Pill"],"sources":["./src/components/q2-pill/styles.scss?tag=q2-pill&encapsulation=shadow","./src/components/q2-pill/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n --comp-close-size: 0px;\n --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n --comp-active-btn-color: var(--comp-btn-background);\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n position: relative;\n\n :host(:not(:empty)) &,\n &.has-icon {\n --comp-close-size: var(--comp-pill-btn-height);\n }\n\n :host([active]) & {\n --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n }\n\n :host([theme='primary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-primary-color, --t-primary-l5, #61c4ff)};\n --comp-active-btn-color: #{var-list(--t-primary-text, #ffffff)};\n --comp-active-btn-border-color: #{var-list(--t-primary-l5, #61c4ff)};\n --comp-hover-active-btn-background: #{var-list(--tct-pill-hover-primary-color, --t-primary-l3, #21acff)};\n --comp-hover-active-btn-border-color: #{var-list(--t-primary-l3, #21acff)};\n }\n\n :host([theme='secondary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-secondary-color, --t-secondary-l5, #d9e1e6)};\n --comp-active-btn-color: #{var-list(--t-secondary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--t-secondary-l5, #d9e1e6)};\n --comp-hover-active-btn-background: #{var-list(--tct-pill-hover-secondary-color, --t-secondary-l3, #c9d5db)};\n --comp-hover-active-btn-border-color: #{var-list(--t-secondary-l3, #c9d5db)};\n }\n\n :host([theme='tertiary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-tertiary-color, --t-tertiary-l5, #f4fafe)};\n --comp-active-btn-color: #{var-list(--t-tertiary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--t-tertiary-l5, #f4fafe)};\n --comp-hover-active-btn-background: #{var-list(--tct-pill-hover-tertiary-color, --t-tertiary-l3, #eff8fd)};\n --comp-hover-active-btn-border-color: #{var-list(--t-tertiary-l3, #eff8fd)};\n }\n}\n\n.btn-height-wrapper {\n height: var(--comp-pill-min-height);\n display: flex;\n align-items: center;\n cursor: pointer;\n &:focus {\n box-shadow: none;\n }\n\n :host([disabled]) & {\n cursor: not-allowed;\n }\n}\n\n.btn-close,\n.btn-primary {\n cursor: pointer;\n height: var(--comp-pill-btn-height);\n border-style: solid;\n border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n transition-property: background, color, padding, width, opacity;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n :host([disabled]) & {\n opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n}\n\n.btn-primary {\n background: var(--comp-btn-background);\n border-width: var-list(--comp-pill-btn-border-width);\n border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n padding-inline: var(--comp-btn-padding);\n padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n color: var(--comp-btn-color);\n display: block;\n width: 100%;\n text-align: start;\n\n &:focus,\n &:hover {\n background: var(--comp-hover-btn-background);\n }\n\n :host(:not(:empty)) &,\n .has-icon & {\n padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n }\n\n .has-options & {\n @include line-clamp(1);\n max-width: var-list(var-prefixer(pill-max-width), 200px);\n }\n\n :host([active]) & {\n background: var(--comp-active-btn-background);\n border-color: var(--comp-active-btn-border-color);\n color: var(--comp-active-btn-color);\n\n &:focus,\n &:hover {\n background: var(--comp-hover-active-btn-background);\n border-color: var(--comp-hover-active-btn-border-color);\n }\n }\n}\n\n.btn-close {\n background: transparent;\n border-color: transparent;\n border-width: var(--comp-pill-btn-border-width);\n width: var(--comp-close-size);\n height: var(--comp-close-size);\n padding: 0;\n border: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n :host([active]) & {\n color: var(--comp-active-btn-color);\n }\n\n :host(:not(:empty)) &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --t-icon-stroke-primary: currentColor;\n width: var-list(var-prefixer(pill-icon-size), 14px);\n height: var-list(var-prefixer(pill-icon-size), 14px);\n transition-property: transform;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n pointer-events: none;\n\n :host([open]) & q2-icon {\n transform: rotate(180deg);\n }\n}\n\nbutton.btn-close {\n :host([active]) & {\n &:focus,\n &:hover {\n background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n }\n }\n}\n\nq2-popover {\n top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Listen,\n Watch,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list';\n\n@Component({\n tag: 'q2-pill',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Pill implements ComponentInterface {\n @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true, mutable: true }) active: boolean;\n @Prop({ reflect: true, mutable: true }) open: boolean;\n @Prop({ reflect: true }) multiple: boolean;\n @Prop({ reflect: true }) maxLength: number;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true, mutable: true }) value: string;\n @Prop({ reflect: true }) theme: 'primary' \| 'secondary' \| 'tertiary';\n @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n @Prop() popoverMinHeight: number = 150;\n @Prop() popoverDirection: 'up' \| 'down';\n @Prop({ mutable: true }) popoverAlignment: 'left' \| 'right' = 'right';\n @Prop() optionListLabel: string;\n\n @State() optionCount: number;\n @State() selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n @Element() hostElement: HTMLElement;\n @Event() change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n scheduledAfterRender: (() => void)[] = [];\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n optionList: HTMLQ2OptionListElement;\n mutationObserver: MutationObserver;\n popoverElement: HTMLQ2PopoverElement;\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n const observer = new MutationObserver(this.determineOptionCount);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n if (!optionCount \|\| selectedOptionElements.length === 0) return label;\n else if (selectedOptionElements.length === 1) return selectedOptionElements[0].display;\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength)\n return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n else return buttonContent;\n }\n\n /// Helpers ///\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\n };\n\n getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) \|\| [];\n };\n\n determineOptionCount = () => {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n };\n\n async executeActionSheet(event: MouseEvent \| KeyboardEvent) {\n const result = await showActionSheetList(this, event);\n this.handleSelectionChanges(result);\n }\n\n async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = await this.getOption(value);\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : undefined;\n this.value = selectedOption.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n /// Watchers ///\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (multiple) return;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = await this.getOption(newValue);\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = [{ value, display }];\n }\n }\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n /// Listeners ///\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.optionList.setActiveElement(null);\n }\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n /// Event Handlers ///\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.optionCount) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.selectedOptions = values;\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.optionCount \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n\n event.preventDefault();\n if (shouldShowActionSheet(this, event)) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n this.open = false;\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n this.handleSelectionChanges(event.detail);\n };\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.click();\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n /// DOM ///\n generateIcon() {\n const { optionCount, active } = this;\n const isButton = optionCount && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !optionCount ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={isButton && this.clearSelectedOptions}\n disabled={isButton && this.disabled}\n aria-label={isButton && loc('tecton.element.pill.clearSelection')}\n type={isButton && 'button'}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n generateHiddenElement() {\n return (\n <div\n id=\"option-description\"\n class=\"sr\"\n aria-hidden=\"true\"\n >\n {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n </div>\n );\n }\n\n render() {\n const { optionCount, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (optionCount \|\| active) wrapperClassNames.push('has-icon');\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={optionCount && 'option-list'}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.maxLength && this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.generateIcon()}\n {this.generateHiddenElement()}\n </div>\n {this.optionCount && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <q2-option-list\n role=\"menu\"\n ref={el => (this.optionList = el)}\n id=\"option-list\"\n onChange={this.handleChange}\n multiple={this.multiple}\n selectedOptions={this.selectedOptions}\n onReady={() => this.updateSelectedOptionElements()}\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n}\n"],"version":3}