npm - q2-tecton-elements - Versions diffs - 1.51.1 → 1.52.1 - Mend

q2-tecton-elements 1.51.1 → 1.52.1

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 (613) hide show

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

@@ -1,10 +1,8 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { l as loc, h as handleAriaLabel } from './index2.js';
-import { d as defineCustomElement$3 } from './q2-btn2.js';
-import { d as defineCustomElement$2 } from './q2-icon2.js';
-import { d as defineCustomElement$1 } from './q2-loading2.js';
+import { d as defineCustomElement$1 } from './q2-icon2.js';
-const q2DropdownItemCss = "*{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 #0066cc)}: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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";
+const q2DropdownItemCss = "*{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 #0066cc)}: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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item-button{--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:44px;min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-default-dropdown-item-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);flex:1;text-align:left;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, var(--comp-default-dropdown-item-padding)));background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .remove-dropdown-item:hover,:host(:not([disabled])) .remove-dropdown-item:focus,:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))))}:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item:focus,:host(:not([disabled])) .remove-dropdown-item:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}.remove-dropdown-item{flex:0 0 44px}";
 const Q2DropdownItemStyle0 = q2DropdownItemCss;
 const Q2DropdownItem = /*@__PURE__*/ proxyCustomElement(class Q2DropdownItem extends HTMLElement {
@@ -14,7 +12,11 @@ const Q2DropdownItem = /*@__PURE__*/ proxyCustomElement(class Q2DropdownItem ext
         this.__attachShadow();
         this.handleQ2LocValue = () => {
             const locElement = this.hostElement.querySelector('q2-loc');
-            return locElement ? loc(locElement.value, locElement.substitutions) : '';
+            if (!locElement)
+                return '';
+            return locElement.value
+                ? loc(locElement.value, locElement.substitutions)
+                : loc(locElement.innerText, locElement.substitutions);
         };
         this.onItemClick = (event) => {
             event.stopImmediatePropagation();
@@ -78,34 +80,28 @@ const Q2DropdownItem = /*@__PURE__*/ proxyCustomElement(class Q2DropdownItem ext
     }
     // #endregion
     // #region Local Methods
-    get dropdownItemBtn() {
-        return this.hostElement.shadowRoot.querySelector('.dropdown-item');
-    }
     get innerLabel() {
         return this.label || this.hostElement.textContent.trim() || this.q2LocValue;
     }
-    get removeBtn() {
-        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');
-    }
     get removeLabel() {
         return loc('tecton.element.dropdownItem.remove', [this.innerLabel || '']);
     }
     focusItem() {
-        this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
+        this.dropdownItemBtn.focus();
     }
     focusRemoveBtn() {
-        this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
+        this.removeBtn && this.removeBtn.focus();
     }
     // #endregion
     // #region Render Methods
     renderItemDOM() {
-        return (h("div", { class: "dropdown-item-wrapper" }, h("q2-btn", { class: "dropdown-item", label: this.innerLabel, "hide-label": true, tabIndex: -1, disabled: this.disabled, _role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "dropdown-item-content" }, h("slot", null))), !!this.removable && (h("q2-btn", { class: "remove-dropdown-item", label: this.removeLabel, "hide-label": true, disabled: this.disabled, _role: "menuitem", onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" })))));
+        return (h("div", { class: "dropdown-item-wrapper", role: "presentation" }, h("button", { ref: el => (this.dropdownItemBtn = el), "aria-label": loc(this.innerLabel), class: "dropdown-item-button dropdown-item", tabindex: "-1", disabled: this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("slot", null, loc(this.innerLabel))), this.removable && (h("button", { ref: el => (this.removeBtn = el), class: "dropdown-item-button remove-dropdown-item", tabindex: "-1", "aria-label": this.removeLabel, disabled: this.disabled, onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" })))));
     }
     renderSeparatorDOM() {
         return (h("div", { class: "dropdown-separator", role: "separator", "test-id": "dropdownItemSeparator" }));
     }
     render() {
-        if (!!this.separator) {
+        if (this.separator) {
             return this.renderSeparatorDOM();
         }
         return this.renderItemDOM();
@@ -130,24 +126,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["q2-dropdown-item", "q2-btn", "q2-icon", "q2-loading"];
+    const components = ["q2-dropdown-item", "q2-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "q2-dropdown-item":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, Q2DropdownItem);
             }
             break;
-        case "q2-btn":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
         case "q2-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "q2-loading":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

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

	@@ -1 +1 @@
1	- {"file":"q2-dropdown-item2.js","mappings":"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","names":[],"sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n border-bottom: 1px solid\n var-list(\n var-prefixer(dropdown-item-separator-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n}\n\n.dropdown-item-wrapper {\n display: flex;\n}\n\n.dropdown-item {\n min-height: 44px;\n flex: 1 1 100%;\n padding: var-list(var-prefixer(dropdown-item-padding), 2px);\n}\n\n.dropdown-item-content {\n --comp-default-content-padding: 12px var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(dropdown-item-content-padding), --comp-default-content-padding);\n text-align: left;\n background: var-list(\n --tct-dropdown-item-background,\n var-prefixer(dropdown-item-bg),\n --tct-white,\n --t-base,\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n transition: background-color\n var-list(var-prefixer(dropdown-item-content-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n}\n\n:host(:not([disabled])) .dropdown-item-content:hover,\n:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {\n background: var-list(\n --tct-dropdown-item-hover-background,\n var-prefixer(dropdown-item-selected-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n --t-base,\n #f2f2f2\n );\n color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n}\n\n.remove-dropdown-item {\n flex: 0 0 44px;\n margin: 2px;\n}\n","import { Component, ComponentInterface, Prop, State, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n q2LocValue: string;\n\n // #endregion\n // #region Public Property API\n\n /** @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* Disables interaction with the item and blocks its click event. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n The text that appears within the dropdown item.\n \n @info\n * This will be used as the `aria-label` for this item.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Renders an icon button in the item.\n * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n /\n @Prop({ reflect: true })\n removable: boolean;\n\n /\n Renders a line in the item instead of text.\n * Click events from these items will not have details provided.\n * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n /\n @Prop({ reflect: true })\n separator: boolean;\n\n /* A static reference value for the item. This value is returned in the click event detail. */\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.q2LocValue = this.handleQ2LocValue();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.focusItem();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\n\n get dropdownItemBtn(): HTMLQ2BtnElement {\n return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n }\n\n get innerLabel(): string {\n return this.label \|\| this.hostElement.textContent.trim() \|\| this.q2LocValue;\n }\n\n get removeBtn(): HTMLQ2BtnElement {\n return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n }\n\n get removeLabel(): string {\n return loc('tecton.element.dropdownItem.remove', [this.innerLabel \|\| '']);\n }\n\n focusItem() {\n this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n }\n\n focusRemoveBtn() {\n this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n }\n\n handleQ2LocValue = (): string => {\n const locElement = this.hostElement.querySelector('q2-loc');\n return locElement ? loc(locElement.value, locElement.substitutions) : '';\n };\n\n onItemClick = (event: MouseEvent) => {\n event.stopImmediatePropagation();\n this.hostElement.dispatchEvent(\n new CustomEvent('click', {\n detail: {\n type: 'select',\n value: this.value \|\| '',\n },\n bubbles: true,\n })\n );\n };\n\n onItemFocus = (event: FocusEvent) => {\n event.stopPropagation();\n };\n\n onItemKeydown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowRight') this.focusRemoveBtn();\n };\n\n onRemoveBtnClick = (event: MouseEvent) => {\n event.stopImmediatePropagation();\n\n this.hostElement.dispatchEvent(\n new CustomEvent('click', {\n detail: {\n type: 'remove',\n value: this.value \|\| '',\n },\n bubbles: true,\n })\n );\n };\n\n onRemoveBtnFocus = (event: FocusEvent) => {\n event.stopPropagation();\n };\n\n onRemoveBtnKeydown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') this.focusItem();\n };\n\n // #endregion\n // #region Render Methods\n\n renderItemDOM(): JSX.IntrinsicElements {\n return (\n <div class=\"dropdown-item-wrapper\">\n <q2-btn\n class=\"dropdown-item\"\n label={this.innerLabel}\n hide-label\n tabIndex={-1}\n disabled={this.disabled}\n _role=\"menuitem\"\n onClick={this.onItemClick}\n onKeyDown={this.onItemKeydown}\n onFocus={this.onItemFocus}\n test-id=\"dropdownItem\"\n >\n <div class=\"dropdown-item-content\">\n <slot />\n </div>\n </q2-btn>\n {!!this.removable && (\n <q2-btn\n class=\"remove-dropdown-item\"\n label={this.removeLabel}\n hide-label\n disabled={this.disabled}\n _role=\"menuitem\"\n onClick={this.onRemoveBtnClick}\n onKeyDown={this.onRemoveBtnKeydown}\n onFocus={this.onRemoveBtnFocus}\n test-id=\"removeDropdownItem\"\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n )}\n </div>\n );\n }\n\n renderSeparatorDOM(): JSX.IntrinsicElements {\n return (\n <div\n class=\"dropdown-separator\"\n role=\"separator\"\n test-id=\"dropdownItemSeparator\"\n />\n );\n }\n\n render() {\n if (!!this.separator) {\n return this.renderSeparatorDOM();\n }\n\n return this.renderItemDOM();\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-dropdown-item2.js","mappings":"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","names":[],"sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n border-bottom: 1px solid\n var-list(\n var-prefixer(dropdown-item-separator-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n}\n\n.dropdown-item-wrapper {\n display: flex;\n}\n\n.dropdown-item-button {\n --comp-dropdown-item-tween: #{var-list(--tct-tween-1, --app-tween-1, cubic-bezier(0.4, 0, 0.2, 1))};\n margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n min-height: 44px;\n min-width: 44px;\n border: none;\n background: transparent;\n outline: 0;\n // box-shadow: none;\n transition: var-list(--tct-dropdown-item-tween, --comp-dropdown-item-tween);\n transition-property: background, color, box-shadow, fill, border-color, border-width;\n &:disabled {\n opacity: var-list(--tct-dropdown-item-disabled-opacity, --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n}\n\n.dropdown-item {\n --comp-default-dropdown-item-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n flex: 1;\n text-align: left;\n padding: var-list(var-prefixer(dropdown-item-padding), --comp-default-dropdown-item-padding);\n background: var-list(\n --tct-dropdown-item-background,\n var-prefixer(dropdown-item-bg),\n --tct-white,\n --t-base,\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host(:not([disabled])) {\n .remove-dropdown-item:hover,\n .remove-dropdown-item:focus,\n .dropdown-item:hover,\n .dropdown-item:focus {\n background: var-list(\n --tct-dropdown-item-hover-background,\n var-prefixer(dropdown-item-selected-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n --t-base,\n #f2f2f2\n );\n }\n\n .dropdown-item:hover,\n .dropdown-item:focus {\n color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n }\n\n .dropdown-item:focus,\n .remove-dropdown-item:focus {\n box-shadow: var-list(\n --tct-dropdown-item-focus-box-shadow,\n --const-inset-double-focus-ring,\n unquote(\n 'inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)'\n )\n );\n }\n}\n\n.remove-dropdown-item {\n flex: 0 0 44px;\n}\n","import { Component, ComponentInterface, Prop, State, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n // #region Own Properties\n\n dropdownItemBtn: HTMLButtonElement;\n removeBtn: HTMLButtonElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n q2LocValue: string;\n\n // #endregion\n // #region Public Property API\n\n /** @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* Disables interaction with the item and blocks its click event. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n The text that appears within the dropdown item.\n \n @info\n * This will be used as the `aria-label` for this item.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Renders an icon button in the item.\n * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n /\n @Prop({ reflect: true })\n removable: boolean;\n\n /\n Renders a line in the item instead of text.\n * Click events from these items will not have details provided.\n * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n /\n @Prop({ reflect: true })\n separator: boolean;\n\n /* A static reference value for the item. This value is returned in the click event detail. */\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.q2LocValue = this.handleQ2LocValue();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.focusItem();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\n\n get innerLabel(): string {\n return this.label \|\| this.hostElement.textContent.trim() \|\| this.q2LocValue;\n }\n\n get removeLabel(): string {\n return loc('tecton.element.dropdownItem.remove', [this.innerLabel \|\| '']);\n }\n\n focusItem() {\n this.dropdownItemBtn.focus();\n }\n\n focusRemoveBtn() {\n this.removeBtn && this.removeBtn.focus();\n }\n\n handleQ2LocValue = (): string => {\n const locElement = this.hostElement.querySelector('q2-loc');\n if (!locElement) return '';\n\n return locElement.value\n ? loc(locElement.value, locElement.substitutions)\n : loc(locElement.innerText, locElement.substitutions);\n };\n\n onItemClick = (event: MouseEvent) => {\n event.stopImmediatePropagation();\n this.hostElement.dispatchEvent(\n new CustomEvent('click', {\n detail: {\n type: 'select',\n value: this.value \|\| '',\n },\n bubbles: true,\n })\n );\n };\n\n onItemFocus = (event: FocusEvent) => {\n event.stopPropagation();\n };\n\n onItemKeydown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowRight') this.focusRemoveBtn();\n };\n\n onRemoveBtnClick = (event: MouseEvent) => {\n event.stopImmediatePropagation();\n\n this.hostElement.dispatchEvent(\n new CustomEvent('click', {\n detail: {\n type: 'remove',\n value: this.value \|\| '',\n },\n bubbles: true,\n })\n );\n };\n\n onRemoveBtnFocus = (event: FocusEvent) => {\n event.stopPropagation();\n };\n\n onRemoveBtnKeydown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') this.focusItem();\n };\n\n // #endregion\n // #region Render Methods\n\n renderItemDOM(): JSX.IntrinsicElements {\n return (\n <div\n class=\"dropdown-item-wrapper\"\n role=\"presentation\"\n >\n <button\n ref={el => (this.dropdownItemBtn = el)}\n aria-label={loc(this.innerLabel)}\n class=\"dropdown-item-button dropdown-item\"\n tabindex=\"-1\"\n disabled={this.disabled}\n role=\"menuitem\"\n onClick={this.onItemClick}\n onKeyDown={this.onItemKeydown}\n onFocus={this.onItemFocus}\n test-id=\"dropdownItem\"\n >\n <slot>{loc(this.innerLabel)}</slot>\n </button>\n {this.removable && (\n <button\n ref={el => (this.removeBtn = el)}\n class=\"dropdown-item-button remove-dropdown-item\"\n tabindex=\"-1\"\n aria-label={this.removeLabel}\n disabled={this.disabled}\n onClick={this.onRemoveBtnClick}\n onKeyDown={this.onRemoveBtnKeydown}\n onFocus={this.onRemoveBtnFocus}\n test-id=\"removeDropdownItem\"\n >\n <q2-icon type=\"close\" />\n </button>\n )}\n </div>\n );\n }\n\n renderSeparatorDOM(): JSX.IntrinsicElements {\n return (\n <div\n class=\"dropdown-separator\"\n role=\"separator\"\n test-id=\"dropdownItemSeparator\"\n />\n );\n }\n\n render() {\n if (this.separator) {\n return this.renderSeparatorDOM();\n }\n\n return this.renderItemDOM();\n }\n\n // #endregion\n}\n"],"version":3}

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

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './q2-icon2.js';
 import { d as defineCustomElement$3 } from './q2-loading2.js';
 import { d as defineCustomElement$2 } from './q2-popover2.js';
-const q2DropdownCss = "*{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 #0066cc)}: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-flex}:host([block]){display:block}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
+const q2DropdownCss = "*{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 #0066cc)}: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-flex}:host([block]){display:block}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
 const Q2DropdownStyle0 = q2DropdownCss;
 const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends HTMLElement {
@@ -15,6 +15,7 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends H
         super();
         this.__registerHost();
         this.__attachShadow();
+        // #region Own Properties
         this.dropdownItemSelector = 'q2-dropdown-item:not([disabled]):not([separator])';
         this.closeDropdown = () => {
             if (!this.open)
@@ -113,6 +114,7 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends H
                 return;
             this.open = true;
         };
+        this.controlElement = undefined;
         this.additionalContext = undefined;
         this.alignment = undefined;
         this.ariaLabel = undefined;
@@ -129,7 +131,7 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends H
         this.popoverAlignment = 'left';
         this.popoverDirection = undefined;
         this.popoverMaxHeight = undefined;
-        this.popoverMinHeight = 150;
+        this.popoverMinHeight = undefined;
         this.popoverMode = null;
         this.resolvedType = undefined;
         this.type = 'icon';
@@ -376,7 +378,7 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends H
     // #region Render Methods
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: 'f3f6bb604359a216582ed5f93bfcb841ea9d4727', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '6dffde462115a3694e289475cd7d3de2d0e794ce', 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.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (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", { key: 'a3db16809091ecf21d7349e1df6bb19350fffcfe', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("div", { key: '2778a6aaf98bc01aed8f3d1a3d90324b7be7de38', onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown, role: "menu", "aria-label": loc(this.label) || undefined }, h("slot", { key: 'e905dc9815b93be3f749147fa9a7f70e70e6aa97' })))));
+        return (h("click-elsewhere", { key: '7a236b18d5616dda29f7da0539dd00c01dece506', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '727835a5795103cbe809ac21a763c9340ca98dd7', 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.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (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", { key: 'dec1bbf5bf99c0cb9bfc211345de03195d2b98f0', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("div", { key: 'fa615534dcffe52b944b0b7ec4444add025ad0a6', onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown, role: "menu", "aria-label": loc(this.label) || undefined }, h("slot", { key: 'd71de2a1130d8966561015da63f09e85b8808bb9' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -411,6 +413,7 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends H
         "popoverMode": [1025, "popover-mode"],
         "resolvedType": [513, "resolved-type"],
         "type": [513],
+        "controlElement": [32],
         "closePopover": [64],
         "openPopover": [64],
         "selectItem": [64],

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/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-flex;\n}\n\n:host([block]) {\n display: block;\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, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n // #region Own Properties\n\n controlElement?: HTMLQ2BtnElement;\n dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n popoverElement?: HTMLQ2PopoverElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n @Prop({ reflect: true })\n additionalContext: string;\n\n /** @deprecated /\n @Prop({ reflect: true })\n alignment: 'left' \| 'right';\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* If `true`, component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /\n Tells the outlet what the type of object being passed in as contextValue.\n * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n \n @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n context: string;\n\n /\n Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n \n @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n contextValue: string;\n\n /* Indicates the menu cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /* The icon that will render within the toggle button. You may use any of the `q2-icon` types. /\n @Prop({ reflect: true })\n icon: string;\n\n /\n The text that appears within the button.\n * @warning\n * This property should not be used if the `type` is `icon`.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n name: string;\n\n /* Determine whether the popover is open or closed. /\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true })\n popDirection: 'up' \| 'down';\n\n /* Aligns the popover dropdown to the left or right side of the input field. /\n @Prop({ mutable: true })\n popoverAlignment: 'left' \| 'right' = 'left'; // being used in dropdown.scss\n\n /\n Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n /\n @Prop({ mutable: true })\n popoverDirection: 'up' \| 'down';\n\n /\n Force the maximum height of the popover. This value will be interpreted as pixels.\n * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n /\n @Prop()\n popoverMaxHeight: number;\n\n /* @deprecated /\n @Prop()\n popoverMinHeight: number = 150;\n\n /\n Determines the display mode of the popover.\n \n Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n \n @info\n * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n * when nested inside of elements with transform properties. This will be removed once the popover API is available\n * for use.\n /\n @Prop({ mutable: true })\n popoverMode: 'legacy' = null;\n\n /\n Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n resolvedType: string;\n\n /* The type of button used as the menu toggle.\n * @info\n * Type must be \"custom\" to use the custom button slot.\n /\n @Prop({ reflect: true })\n type: 'icon' \| 'fab' \| 'custom' \| 'primary' \| 'secondary' \| 'neutral' = 'icon';\n\n // #endregion\n // #region Component Lifecycle Events\n\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 // #endregion\n // #region Listeners\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 // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n * @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n * @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n \n If the dropdown is closed, this will open it before selecting the item.\n \n If the value does not match any item's value, this method does nothing.\n * @testOnly\n /\n @Method()\n async selectItem(value: string) {\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n if (!item \|\| this.disabled) return;\n if (!this.open) {\n this.controlElement?.click();\n await waitForNextPaint();\n }\n itemBtn.click();\n await waitForNextPaint();\n }\n\n /\n Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s remove button.\n \n If the dropdown is closed, this will open it before selecting the remove item button.\n \n Requirements for this method to work properly:\n * - Provided `value` matches the item's `value` property\n * - Item has the `removable` property enabled\n * @testOnly\n */\n @Method()\n async selectRemoveItem(value: string) {\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n if (!item \|\| !removeButton \|\| this.disabled) return;\n if (!this.open) {\n this.controlElement?.click();\n await waitForNextPaint();\n }\n removeButton.click();\n await waitForNextPaint();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('additionalContext')\n additionalContextHandler() {\n this.orchestrateResolvedMenuItems();\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('context')\n contextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('contextValue')\n contextValueHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('name')\n nameHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('popDirection')\n popDirectionHandler() {\n handleRenamedProp(this, 'popDirection', 'popoverDirection');\n }\n\n @Watch('resolvedType')\n resolvedTypeHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n // #endregion\n // #region Local Methods\n\n get determineDropdownItemCount() {\n return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n }\n\n get hasCustomControl() {\n return !!this.hostElement.querySelector('[slot=control]');\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 _togglePopover() {\n const { controlElement } = this;\n if (!controlElement) return;\n controlElement.click();\n controlElement.focus();\n controlElement.dispatchEvent(new FocusEvent('focus'));\n }\n\n closeDropdown = () => {\n if (!this.open) return;\n this.open = false;\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 focusFirstItem = async () => {\n const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:first-child`\n );\n if (!firstItem) return;\n await waitForNextPaint();\n firstItem.dispatchEvent(new FocusEvent('focus'));\n };\n\n focusLastItem = async () => {\n const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:last-child`\n );\n if (!lastItem) return;\n await waitForNextPaint();\n lastItem.dispatchEvent(new FocusEvent('focus'));\n };\n\n focusToggle = () => {\n this.controlElement.focus();\n };\n\n navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\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 onDropdownMenuClick = async (event: MouseEvent \| CustomEvent) => {\n const item = event.target as HTMLQ2DropdownItemElement;\n if (item.disabled \|\| item.separator) return;\n this.closeDropdown();\n await waitForNextPaint();\n this.focusToggle();\n };\n\n onDropdownMenuKeydown = (event: KeyboardEvent) => {\n const item = event.target as HTMLQ2DropdownItemElement;\n switch (event.key) {\n case 'Escape':\n this.closeDropdown();\n this.focusToggle();\n break;\n\n case 'Tab':\n this.closeDropdown();\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n this.focusAdjacentItem(item, 'prev');\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.focusAdjacentItem(item, 'next');\n break;\n\n default:\n break;\n }\n };\n\n onToggleClick = () => {\n if (this.open) {\n this.closeDropdown();\n } else {\n this.openDropdown();\n }\n };\n\n onToggleKeydown = async (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n this.openDropdown();\n await waitForNextPaint();\n this.focusLastItem();\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.openDropdown();\n await waitForNextPaint();\n this.focusFirstItem();\n return;\n\n case 'Escape':\n event.preventDefault();\n this.closeDropdown();\n break;\n\n case 'Tab':\n if (this.open) this.closeDropdown();\n break;\n\n default:\n break;\n }\n };\n\n openDropdown = () => {\n if (this.open) return;\n this.open = true;\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 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 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.textContent = menuItemData.itemLabel;\n newDropdownItem.onclick = onClickFn;\n\n return newDropdownItem;\n });\n });\n }\n\n showOverpanel(overpanelPath: string, params: IDict<string>) {\n return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n }\n\n // #endregion\n // #region Render Methods\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.hasCustomControl ? (\n <div\n test-id=\"dropdownControl\"\n class={btnProps.custom ? '' : 'hidden'}\n >\n <slot name=\"control\" />\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 max-height={this.popoverMaxHeight}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode \|\| undefined}\n block={this.block}\n >\n <div\n onClick={this.onDropdownMenuClick}\n onKeyDown={this.onDropdownMenuKeydown}\n role=\"menu\"\n aria-label={loc(this.label) \|\| undefined}\n >\n <slot />\n </div>\n </q2-popover>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-dropdown.js","mappings":"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","names":["Q2Dropdown"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-flex;\n}\n\n:host([block]) {\n display: block;\n}\n\nq2-icon {\n pointer-events: none;\n margin-block: -100px;\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, Method, h, Fragment, Listen, State } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n // #region Own Properties\n\n dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n popoverElement?: HTMLQ2PopoverElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n controlElement?: HTMLQ2BtnElement;\n\n // #endregion\n // #region Public Property API\n\n @Prop({ reflect: true })\n additionalContext: string;\n\n /** @deprecated /\n @Prop({ reflect: true })\n alignment: 'left' \| 'right';\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* If `true`, component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /\n Tells the outlet what the type of object being passed in as contextValue.\n * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n \n @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n context: string;\n\n /\n Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n \n @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n contextValue: string;\n\n /* Indicates the menu cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /* The icon that will render within the toggle button. You may use any of the `q2-icon` types. /\n @Prop({ reflect: true })\n icon: string;\n\n /\n The text that appears within the button.\n * @warning\n * This property should not be used if the `type` is `icon`.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n name: string;\n\n /* Determine whether the popover is open or closed. /\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true })\n popDirection: 'up' \| 'down';\n\n /* Aligns the popover dropdown to the left or right side of the input field. /\n @Prop({ mutable: true })\n popoverAlignment: 'left' \| 'right' = 'left'; // being used in dropdown.scss\n\n /\n Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n /\n @Prop({ mutable: true })\n popoverDirection: 'up' \| 'down';\n\n /\n Force the maximum height of the popover. This value will be interpreted as pixels.\n * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n /\n @Prop()\n popoverMaxHeight: number;\n\n /* @deprecated /\n @Prop()\n popoverMinHeight: number;\n\n /\n Determines the display mode of the popover.\n \n Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n \n @info\n * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n * when nested inside of elements with transform properties. This will be removed once the popover API is available\n * for use.\n /\n @Prop({ mutable: true })\n popoverMode: 'legacy' = null;\n\n /\n Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n resolvedType: string;\n\n /* The type of button used as the menu toggle.\n * @info\n * Type must be \"custom\" to use the custom button slot.\n /\n @Prop({ reflect: true })\n type: 'icon' \| 'fab' \| 'custom' \| 'primary' \| 'secondary' \| 'neutral' = 'icon';\n\n // #endregion\n // #region Component Lifecycle Events\n\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 // #endregion\n // #region Listeners\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 // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n * @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n * @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n \n If the dropdown is closed, this will open it before selecting the item.\n \n If the value does not match any item's value, this method does nothing.\n * @testOnly\n /\n @Method()\n async selectItem(value: string) {\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n if (!item \|\| this.disabled) return;\n if (!this.open) {\n this.controlElement?.click();\n await waitForNextPaint();\n }\n itemBtn.click();\n await waitForNextPaint();\n }\n\n /\n Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s remove button.\n \n If the dropdown is closed, this will open it before selecting the remove item button.\n \n Requirements for this method to work properly:\n * - Provided `value` matches the item's `value` property\n * - Item has the `removable` property enabled\n * @testOnly\n */\n @Method()\n async selectRemoveItem(value: string) {\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n if (!item \|\| !removeButton \|\| this.disabled) return;\n if (!this.open) {\n this.controlElement?.click();\n await waitForNextPaint();\n }\n removeButton.click();\n await waitForNextPaint();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('additionalContext')\n additionalContextHandler() {\n this.orchestrateResolvedMenuItems();\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('context')\n contextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('contextValue')\n contextValueHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('name')\n nameHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('popDirection')\n popDirectionHandler() {\n handleRenamedProp(this, 'popDirection', 'popoverDirection');\n }\n\n @Watch('resolvedType')\n resolvedTypeHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n // #endregion\n // #region Local Methods\n\n get determineDropdownItemCount() {\n return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n }\n\n get hasCustomControl() {\n return !!this.hostElement.querySelector('[slot=control]');\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 _togglePopover() {\n const { controlElement } = this;\n if (!controlElement) return;\n controlElement.click();\n controlElement.focus();\n controlElement.dispatchEvent(new FocusEvent('focus'));\n }\n\n closeDropdown = () => {\n if (!this.open) return;\n this.open = false;\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 focusFirstItem = async () => {\n const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:first-child`\n );\n if (!firstItem) return;\n await waitForNextPaint();\n firstItem.dispatchEvent(new FocusEvent('focus'));\n };\n\n focusLastItem = async () => {\n const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:last-child`\n );\n if (!lastItem) return;\n await waitForNextPaint();\n lastItem.dispatchEvent(new FocusEvent('focus'));\n };\n\n focusToggle = () => {\n this.controlElement.focus();\n };\n\n navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\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 onDropdownMenuClick = async (event: MouseEvent \| CustomEvent) => {\n const item = event.target as HTMLQ2DropdownItemElement;\n if (item.disabled \|\| item.separator) return;\n this.closeDropdown();\n await waitForNextPaint();\n this.focusToggle();\n };\n\n onDropdownMenuKeydown = (event: KeyboardEvent) => {\n const item = event.target as HTMLQ2DropdownItemElement;\n switch (event.key) {\n case 'Escape':\n this.closeDropdown();\n this.focusToggle();\n break;\n\n case 'Tab':\n this.closeDropdown();\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n this.focusAdjacentItem(item, 'prev');\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.focusAdjacentItem(item, 'next');\n break;\n\n default:\n break;\n }\n };\n\n onToggleClick = () => {\n if (this.open) {\n this.closeDropdown();\n } else {\n this.openDropdown();\n }\n };\n\n onToggleKeydown = async (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n this.openDropdown();\n await waitForNextPaint();\n this.focusLastItem();\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.openDropdown();\n await waitForNextPaint();\n this.focusFirstItem();\n return;\n\n case 'Escape':\n event.preventDefault();\n this.closeDropdown();\n break;\n\n case 'Tab':\n if (this.open) this.closeDropdown();\n break;\n\n default:\n break;\n }\n };\n\n openDropdown = () => {\n if (this.open) return;\n this.open = true;\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 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 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.textContent = menuItemData.itemLabel;\n newDropdownItem.onclick = onClickFn;\n\n return newDropdownItem;\n });\n });\n }\n\n showOverpanel(overpanelPath: string, params: IDict<string>) {\n return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n }\n\n // #endregion\n // #region Render Methods\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.hasCustomControl ? (\n <div\n test-id=\"dropdownControl\"\n class={btnProps.custom ? '' : 'hidden'}\n >\n <slot name=\"control\" />\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 max-height={this.popoverMaxHeight}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode \|\| undefined}\n block={this.block}\n >\n <div\n onClick={this.onDropdownMenuClick}\n onKeyDown={this.onDropdownMenuKeydown}\n role=\"menu\"\n aria-label={loc(this.label) \|\| undefined}\n >\n <slot />\n </div>\n </q2-popover>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"version":3}

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

@@ -220,7 +220,7 @@ const Q2EditableField$1 = /*@__PURE__*/ proxyCustomElement(class Q2EditableField
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '5d8bb7b03afcc5c8efe1d9dab03e09e34bcd3148' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: '255dac3b6e39618e37fc129ef0a743aca1aefc88' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-example.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface Q2Example extends Components.Q2Example, HTMLElement {}
+export const Q2Example: {
+    prototype: Q2Example;
+    new (): Q2Example;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-example.js ADDED Viewed

@@ -0,0 +1,170 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
+const q2ExampleCss = "*{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 #0066cc)}: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}";
+const Q2ExampleStyle0 = q2ExampleCss;
+const Q2Example$1 = /*@__PURE__*/ proxyCustomElement(class Q2Example extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tctClick = createEvent(this, "tctClick", 7);
+        this.tctDrag = createEvent(this, "tctDrag", 7);
+        this.tctOpen = createEvent(this, "tctOpen", 7);
+        this.someText = 'default';
+        this.isValidated = undefined;
+        this.status = 0;
+        this.content = undefined;
+        this.disabled = undefined;
+        this.type = 'overlay';
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    /**
+     * 6. Component lifecycle events
+     *    Order by their natural call order.
+     */
+    connectedCallback() { }
+    disconnectedCallback() { }
+    componentWillLoad() { }
+    componentDidLoad() { }
+    componentShouldUpdate(newVal, oldVal, propName) {
+        if (propName === 'content' && newVal !== oldVal) {
+            return true;
+        }
+        return false;
+    }
+    componentWillUpdate() { }
+    componentDidUpdate() { }
+    componentWillRender() { }
+    componentDidRender() { }
+    // #endregion
+    // #region Listeners
+    /**
+     * 7. Listeners
+     *    Event listeners defined via the @Listen() decorator. List in
+     *    alphabetical order of the event name. Recommend starting listener
+     *    methods with "on".
+     */
+    onClick(ev) {
+        this.tctClick.emit(ev);
+    }
+    onDrag(ev) {
+        this.tctDrag.emit(ev);
+    }
+    // #endregion
+    // #region Public Methods API
+    /**
+     * 8. Public methods API
+     *    Methods exposed on the host element via the @Method() decorator.
+     *    Document each using JSDoc comments and include the "@testOnly" tag for
+     *    test methods. Must be async, and listed in alphabetical order.
+     */
+    /**
+     * Closes the menu.
+     */
+    async close() {
+        // ...
+    }
+    /*
+     * Opens the menu. If the menu is already open or it can't be opened, it
+     * returns `false`.
+     *
+     * @testOnly
+     */
+    async openMenu() {
+        // ...
+        return true;
+    }
+    // #endregion
+    // #region Watchers
+    /**
+     * 9. Watchers
+     *    Methods that are called when a property is updated as specified via
+     *    the @Watch() decorator. List in alphabetical order of the property.
+     */
+    contentChanged(newContent, oldContent) {
+        if (newContent !== oldContent) {
+            this.updateState();
+        }
+    }
+    statusChanged(newStatus, oldStatus) {
+        if (newStatus !== oldStatus) {
+            this.updateState();
+        }
+    }
+    // #endregion
+    // #region Local Methods
+    /**
+     * 10. Local methods
+     *     Methods that contain internal business logic. These methods cannot be
+     *     called from the host element. This includes getters. List getters
+     *     first in alphabetical order, then list the rest of the methods in
+     *     alphabetical order.
+     */
+    get menuState() {
+        //...
+        return 'open';
+    }
+    async prepareAnimation() {
+        // ...
+    }
+    updateState() {
+        // ...
+    }
+    // #endregion
+    // #region Render Methods
+    /**
+     * 11. Render methods
+     *     The render() method and helper methods used by render() that return
+     *     JSX. Names should start with "render". List in alphabetical order,
+     *     except for the render() method which should always be last
+     */
+    renderMenuInner() {
+        return (h(Fragment, null, h("div", { class: {
+                menu: true,
+                'page-inner': true,
+                disabled: this.disabled,
+            }, onClick: () => this.tctClick.emit(), role: "menu" }, h("slot", null))));
+    }
+    render() {
+        return h(Host, { key: 'e4df51465f7c14e0ff4ae2463613e73cc6100318', attribute: "navigation" }, this.renderMenuInner());
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "content": ["contentChanged"],
+        "status": ["statusChanged"]
+    }; }
+    static get style() { return Q2ExampleStyle0; }
+}, [1, "q2-example", {
+        "content": [1],
+        "disabled": [4],
+        "type": [1],
+        "isValidated": [32],
+        "status": [32],
+        "close": [64],
+        "openMenu": [64]
+    }, [[0, "click", "onClick"], [1, "drag", "onDrag"]], {
+        "content": ["contentChanged"],
+        "status": ["statusChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["q2-example"];
+    components.forEach(tagName => { switch (tagName) {
+        case "q2-example":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Q2Example$1);
+            }
+            break;
+    } });
+}
+const Q2Example = Q2Example$1;
+const defineCustomElement = defineCustomElement$1;
+export { Q2Example, defineCustomElement };
+//# sourceMappingURL=q2-example.js.map

package/dist/components/q2-example.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"q2-example.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ypBAAypB,CAAC;AAC/qB,wBAAe,YAAY;;MCoBdA,WAAS;;;;;;;;QAiBlB,aAAQ,GAAG,SAAS,CAAC;;sBA6BZ,CAAC;;;oBA8BH,SAAS;;;;;;;;IA8BhB,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,iBAAiB,MAAK;IAEtB,gBAAgB,MAAK;IAErB,qBAAqB,CAAC,MAAW,EAAE,MAAW,EAAE,QAAgB;QAC5D,IAAI,QAAQ,KAAK,SAAS,IAAI,MAAM,KAAK,MAAM,EAAE;YAC7C,OAAO,IAAI,CAAC;SACf;QACD,OAAO,KAAK,CAAC;KAChB;IAED,mBAAmB,MAAK;IAExB,kBAAkB,MAAK;IAEvB,mBAAmB,MAAK;IAExB,kBAAkB,MAAK;;;;;;;;;IAavB,OAAO,CAAC,EAAW;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC1B;IAGD,MAAM,CAAC,EAAW;QACd,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACzB;;;;;;;;;;;;IAgBD,MAAM,KAAK;;KAEV;;;;;;;IASD,MAAM,QAAQ;;QAEV,OAAO,IAAI,CAAC;KACf;;;;;;;;IAYD,cAAc,CAAC,UAAkB,EAAE,UAAkB;QACjD,IAAI,UAAU,KAAK,UAAU,EAAE;YAC3B,IAAI,CAAC,WAAW,EAAE,CAAC;SACtB;KACJ;IAGD,aAAa,CAAC,SAAiB,EAAE,SAAiB;QAC9C,IAAI,SAAS,KAAK,SAAS,EAAE;YACzB,IAAI,CAAC,WAAW,EAAE,CAAC;SACtB;KACJ;;;;;;;;;;IAaD,IAAI,SAAS;;QAET,OAAO,MAAM,CAAC;KACjB;IAED,MAAM,gBAAgB;;KAErB;IAED,WAAW;;KAEV;;;;;;;;;IAYD,eAAe;QACX,QACI,EAAC,QAAQ,QACL,WACI,KAAK,EAAE;gBACH,IAAI,EAAE,IAAI;gBACV,YAAY,EAAE,IAAI;gBAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aAC1B,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EACnC,IAAI,EAAC,MAAM,IAEX,eAAa,CACX,CACC,EACb;KACL;IAED,MAAM;QACF,OAAO,EAAC,IAAI,qDAAC,SAAS,EAAC,YAAY,IAAE,IAAI,CAAC,eAAe,EAAE,CAAQ,CAAC;KACvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Example"],"sources":["src/components/q2-example/q2-example.scss?tag=q2-example&encapsulation=shadow","src/components/q2-example/q2-example.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n","import {\n Component,\n ComponentInterface,\n Element,\n EventEmitter,\n Fragment,\n Method,\n Event,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\n@Component({\n tag: 'q2-example',\n shadow: true,\n styleUrl: 'q2-example.scss',\n})\nexport class Q2Example implements ComponentInterface {\n // #region Own Properties\n\n /**\n * 1. Own properties\n * Variables that are not exposed publicly due to the lack of the @Prop()\n * decorator. They are for internal use only. List in alphabetical order\n * and always set the type if a default value has not been set. If a\n * default value has been set, then the type can be omitted because it is\n * already inferred. If one of these properties needs to be initialized\n * with the value of another one of these properties, then the\n * initialization should be done in the componentWillLoad() lifecycle\n * event so that these properties can be alphabetizes without referencing\n * a property before it is declared.\n */\n\n num: number;\n someText = 'default';\n\n // #endregion\n // #region Host HTML Element\n\n /**\n * 2. Host HTML element\n * Reference to host HTML element if needed.\n */\n\n @Element()\n el: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n /**\n * 3. State properties\n * Variables that are used to track state internally via the @State()\n * decorator. They are for internal use only. List in alphabetical order\n * and always set the type if a default value has not been set. If a\n * default value has been set, then the type can be omitted because it is\n * already inferred.\n */\n\n @State()\n isValidated: boolean;\n\n @State()\n status = 0;\n\n // #endregion\n // #region Public Property API\n\n /**\n * 4. Public property API\n * Variables that are exposed publicly via @Prop() decorator as\n * properties and attributes on the host element. Document each using\n * JSDoc comments, list in alphabetical order, and always set the type if\n * a default value has not been set. If a default value has been set,\n * then the type can be omitted because it is already inferred.\n */\n\n /**\n * The content of the menu.\n */\n @Prop()\n content: string;\n\n /**\n * If `true`, the user cannot interact with the menu.\n */\n @Prop()\n disabled: boolean;\n\n /**\n * Specifies the menu type.\n */\n @Prop()\n type = 'overlay';\n\n // #endregion\n // #region Events\n\n /**\n * 5. Events\n * Custom events dispatched from the component that are defined via the\n * @Event() decorator. Start each event name with \"tct\" so they do not\n * conflict with native events. Document each using JSDoc comments and\n * list in alphabetical order.\n */\n\n @Event()\n tctClick: EventEmitter;\n\n @Event()\n tctDrag: EventEmitter;\n\n @Event()\n tctOpen: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n /**\n * 6. Component lifecycle events\n * Order by their natural call order.\n */\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n componentWillLoad() {}\n\n componentDidLoad() {}\n\n componentShouldUpdate(newVal: any, oldVal: any, propName: string) {\n if (propName === 'content' && newVal !== oldVal) {\n return true;\n }\n return false;\n }\n\n componentWillUpdate() {}\n\n componentDidUpdate() {}\n\n componentWillRender() {}\n\n componentDidRender() {}\n\n // #endregion\n // #region Listeners\n\n /**\n * 7. Listeners\n * Event listeners defined via the @Listen() decorator. List in\n * alphabetical order of the event name. Recommend starting listener\n * methods with \"on\".\n */\n\n @Listen('click')\n onClick(ev: UIEvent) {\n this.tctClick.emit(ev);\n }\n\n @Listen('drag')\n onDrag(ev: UIEvent) {\n this.tctDrag.emit(ev);\n }\n\n // #endregion\n // #region Public Methods API\n\n /**\n * 8. Public methods API\n * Methods exposed on the host element via the @Method() decorator.\n * Document each using JSDoc comments and include the \"@testOnly\" tag for\n * test methods. Must be async, and listed in alphabetical order.\n */\n\n /**\n * Closes the menu.\n */\n @Method()\n async close(): Promise<void> {\n // ...\n }\n\n /*\n * Opens the menu. If the menu is already open or it can't be opened, it\n * returns `false`.\n *\n * @testOnly\n */\n @Method()\n async openMenu(): Promise<boolean> {\n // ...\n return true;\n }\n\n // #endregion\n // #region Watchers\n\n /**\n * 9. Watchers\n * Methods that are called when a property is updated as specified via\n * the @Watch() decorator. List in alphabetical order of the property.\n */\n\n @Watch('content')\n contentChanged(newContent: string, oldContent: string) {\n if (newContent !== oldContent) {\n this.updateState();\n }\n }\n\n @Watch('status')\n statusChanged(newStatus: string, oldStatus: string) {\n if (newStatus !== oldStatus) {\n this.updateState();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n /**\n * 10. Local methods\n * Methods that contain internal business logic. These methods cannot be\n * called from the host element. This includes getters. List getters\n * first in alphabetical order, then list the rest of the methods in\n * alphabetical order.\n */\n\n get menuState(): string {\n //...\n return 'open';\n }\n\n async prepareAnimation(): Promise<void> {\n // ...\n }\n\n updateState() {\n // ...\n }\n\n // #endregion\n // #region Render Methods\n\n /**\n * 11. Render methods\n * The render() method and helper methods used by render() that return\n * JSX. Names should start with \"render\". List in alphabetical order,\n * except for the render() method which should always be last\n */\n\n renderMenuInner() {\n return (\n <Fragment>\n <div\n class={{\n menu: true,\n 'page-inner': true,\n disabled: this.disabled,\n }}\n onClick={() => this.tctClick.emit()}\n role=\"menu\"\n >\n <slot></slot>\n </div>\n </Fragment>\n );\n }\n\n render() {\n return <Host attribute=\"navigation\">{this.renderMenuInner()}</Host>;\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-formatted-text.js CHANGED Viewed

@@ -53,7 +53,7 @@ const Q2FormattedText$1 = /*@__PURE__*/ proxyCustomElement(class Q2FormattedText
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (h("div", { key: '0deb2247f66e39d44ab56bc889520cd67caf20dc', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '7b8bba7f894f439d4628329082dd41a3629b3f79' }, this.formattedValue)));
+        return (h("div", { key: '1957c3f976bc87c24859d94c27e1baf35da8fc03', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '8dac0d558d205fc183d16c4aef922ab470eec6ab' }, this.formattedValue)));
     }
     static get watchers() { return {
         "value": ["propsUpdated"],