q2-tecton-elements 1.51.1 → 1.52.1

package/dist/q2-tecton-elements/q2-dropdown-item.entry.js

@@ -0,0 +1,146 @@
+import { r as t, h as o, g as e } from "./index-7a5365e2.js";
+
+import { l as r, a as i } from "./index-d18e2a20.js";
+
+const d = "*{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 n = d;
+
+const a = class {
+  constructor(o) {
+    t(this, o);
+    this.handleQ2LocValue = () => {
+      const t = this.hostElement.querySelector("q2-loc");
+      if (!t) return "";
+      return t.value ? r(t.value, t.substitutions) : r(t.innerText, t.substitutions);
+    };
+    this.onItemClick = t => {
+      t.stopImmediatePropagation();
+      this.hostElement.dispatchEvent(new CustomEvent("click", {
+        detail: {
+          type: "select",
+          value: this.value || ""
+        },
+        bubbles: true
+      }));
+    };
+    this.onItemFocus = t => {
+      t.stopPropagation();
+    };
+    this.onItemKeydown = t => {
+      if (t.key === "ArrowRight") this.focusRemoveBtn();
+    };
+    this.onRemoveBtnClick = t => {
+      t.stopImmediatePropagation();
+      this.hostElement.dispatchEvent(new CustomEvent("click", {
+        detail: {
+          type: "remove",
+          value: this.value || ""
+        },
+        bubbles: true
+      }));
+    };
+    this.onRemoveBtnFocus = t => {
+      t.stopPropagation();
+    };
+    this.onRemoveBtnKeydown = t => {
+      if (t.key === "ArrowLeft") this.focusItem();
+    };
+    this.q2LocValue = undefined;
+    this.ariaLabel = undefined;
+    this.disabled = undefined;
+    this.label = undefined;
+    this.removable = undefined;
+    this.separator = undefined;
+    this.value = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    i(this);
+    this.q2LocValue = this.handleQ2LocValue();
+  }
+  // #endregion
+  // #region Listeners
+  onHostElementFocus(t) {
+    if (t.target === this.hostElement) {
+      this.focusItem();
+    }
+  }
+  // #endregion
+  // #region Watchers
+  ariaLabelObserver() {
+    i(this);
+  }
+  // #endregion
+  // #region Local Methods
+  get innerLabel() {
+    return this.label || this.hostElement.textContent.trim() || this.q2LocValue;
+  }
+  get removeLabel() {
+    return r("tecton.element.dropdownItem.remove", [ this.innerLabel || "" ]);
+  }
+  focusItem() {
+    this.dropdownItemBtn.focus();
+  }
+  focusRemoveBtn() {
+    this.removeBtn && this.removeBtn.focus();
+  }
+  // #endregion
+  // #region Render Methods
+  renderItemDOM() {
+    return o("div", {
+      class: "dropdown-item-wrapper",
+      role: "presentation"
+    }, o("button", {
+      ref: t => this.dropdownItemBtn = t,
+      "aria-label": r(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"
+    }, o("slot", null, r(this.innerLabel))), this.removable && o("button", {
+      ref: t => this.removeBtn = t,
+      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"
+    }, o("q2-icon", {
+      type: "close"
+    })));
+  }
+  renderSeparatorDOM() {
+    return o("div", {
+      class: "dropdown-separator",
+      role: "separator",
+      "test-id": "dropdownItemSeparator"
+    });
+  }
+  render() {
+    if (this.separator) {
+      return this.renderSeparatorDOM();
+    }
+    return this.renderItemDOM();
+  }
+  get hostElement() {
+    return e(this);
+  }
+  static get watchers() {
+    return {
+      ariaLabel: [ "ariaLabelObserver" ]
+    };
+  }
+};
+
+a.style = n;
+
+export { a as q2_dropdown_item };
+//# sourceMappingURL=q2-dropdown-item.entry.js.map

package/dist/q2-tecton-elements/q2-dropdown-item.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2DropdownItemCss","Q2DropdownItemStyle0","Q2DropdownItem","this","handleQ2LocValue","locElement","hostElement","querySelector","value","loc","substitutions","innerText","onItemClick","event","stopImmediatePropagation","dispatchEvent","CustomEvent","detail","type","bubbles","onItemFocus","stopPropagation","onItemKeydown","key","focusRemoveBtn","onRemoveBtnClick","onRemoveBtnFocus","onRemoveBtnKeydown","focusItem","componentWillLoad","handleAriaLabel","q2LocValue","onHostElementFocus","target","ariaLabelObserver","innerLabel","label","textContent","trim","removeLabel","dropdownItemBtn","focus","removeBtn","renderItemDOM","h","class","role","ref","el","tabindex","disabled","onClick","onKeyDown","onFocus","removable","renderSeparatorDOM","render","separator"],"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"],"mappings":";;;;AAAA,MAAMA,IAAoB;;AAC1B,MAAAC,IAAeD;;MCIFE,IAAc;;;IAuGvBC,KAAAC,mBAAmB;MACf,MAAMC,IAAaF,KAAKG,YAAYC,cAAc;MAClD,KAAKF,GAAY,OAAO;MAExB,OAAOA,EAAWG,QACZC,EAAIJ,EAAWG,OAAOH,EAAWK,iBACjCD,EAAIJ,EAAWM,WAAWN,EAAWK;AAAc;IAG7DP,KAAAS,cAAeC;MACXA,EAAMC;MACNX,KAAKG,YAAYS,cACb,IAAIC,YAAY,SAAS;QACrBC,QAAQ;UACJC,MAAM;UACNV,OAAOL,KAAKK,SAAS;;QAEzBW,SAAS;;AAEhB;IAGLhB,KAAAiB,cAAeP;MACXA,EAAMQ;AAAiB;IAG3BlB,KAAAmB,gBAAiBT;MACb,IAAIA,EAAMU,QAAQ,cAAcpB,KAAKqB;AAAgB;IAGzDrB,KAAAsB,mBAAoBZ;MAChBA,EAAMC;MAENX,KAAKG,YAAYS,cACb,IAAIC,YAAY,SAAS;QACrBC,QAAQ;UACJC,MAAM;UACNV,OAAOL,KAAKK,SAAS;;QAEzBW,SAAS;;AAEhB;IAGLhB,KAAAuB,mBAAoBb;MAChBA,EAAMQ;AAAiB;IAG3BlB,KAAAwB,qBAAsBd;MAClB,IAAIA,EAAMU,QAAQ,aAAapB,KAAKyB;AAAW;;;;;;;;;;;EA3FnD,iBAAAC;IACIC,EAAgB3B;IAChBA,KAAK4B,aAAa5B,KAAKC;;;;EAO3B,kBAAA4B,CAAmBnB;IACf,IAAIA,EAAMoB,WAAW9B,KAAKG,aAAa;MACnCH,KAAKyB;;;;;EAQb,iBAAAM;IACIJ,EAAgB3B;;;;EAMpB,cAAIgC;IACA,OAAOhC,KAAKiC,SAASjC,KAAKG,YAAY+B,YAAYC,UAAUnC,KAAK4B;;EAGrE,eAAIQ;IACA,OAAO9B,EAAI,sCAAsC,EAACN,KAAKgC,cAAc;;EAGzE,SAAAP;IACIzB,KAAKqC,gBAAgBC;;EAGzB,cAAAjB;IACIrB,KAAKuC,aAAavC,KAAKuC,UAAUD;;;;EA0DrC,aAAAE;IACI,OACIC,EAAA;MACIC,OAAM;MACNC,MAAK;OAELF,EAAA;MACIG,KAAKC,KAAO7C,KAAKqC,kBAAkBQ;MAAG,cAC1BvC,EAAIN,KAAKgC;MACrBU,OAAM;MACNI,UAAS;MACTC,UAAU/C,KAAK+C;MACfJ,MAAK;MACLK,SAAShD,KAAKS;MACdwC,WAAWjD,KAAKmB;MAChB+B,SAASlD,KAAKiB;MAAW,WACjB;OAERwB,EAAA,cAAOnC,EAAIN,KAAKgC,eAEnBhC,KAAKmD,aACFV,EAAA;MACIG,KAAKC,KAAO7C,KAAKuC,YAAYM;MAC7BH,OAAM;MACNI,UAAS;MAAI,cACD9C,KAAKoC;MACjBW,UAAU/C,KAAK+C;MACfC,SAAShD,KAAKsB;MACd2B,WAAWjD,KAAKwB;MAChB0B,SAASlD,KAAKuB;MAAgB,WACtB;OAERkB,EAAA;MAAS1B,MAAK;;;EAOlC,kBAAAqC;IACI,OACIX,EAAA;MACIC,OAAM;MACNC,MAAK;MAAW,WACR;;;EAKpB,MAAAU;IACI,IAAIrD,KAAKsD,WAAW;MAChB,OAAOtD,KAAKoD;;IAGhB,OAAOpD,KAAKwC"}

package/dist/q2-tecton-elements/q2-dropdown.entry.js

@@ -0,0 +1,430 @@
+import { r as t, h as e, F as i, g as n } from "./index-7a5365e2.js";
+
+import { w as s, o, i as r, j as a, a as d, l as h } from "./index-d18e2a20.js";
+
+const l = "*{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 c = l;
+
+const u = class {
+  constructor(e) {
+    t(this, e);
+    // #region Own Properties
+        this.dropdownItemSelector = "q2-dropdown-item:not([disabled]):not([separator])";
+    this.closeDropdown = () => {
+      if (!this.open) return;
+      this.open = false;
+    };
+    this.focusFirstItem = async () => {
+      const t = this.hostElement.querySelector(`${this.dropdownItemSelector}:first-child`);
+      if (!t) return;
+      await s();
+      t.dispatchEvent(new FocusEvent("focus"));
+    };
+    this.focusLastItem = async () => {
+      const t = this.hostElement.querySelector(`${this.dropdownItemSelector}:last-child`);
+      if (!t) return;
+      await s();
+      t.dispatchEvent(new FocusEvent("focus"));
+    };
+    this.focusToggle = () => {
+      this.controlElement.focus();
+    };
+    this.onClickElsewhere = t => {
+      const e = t.target;
+      if (e.localName === "click-elsewhere") {
+        t.stopPropagation();
+        const {popoverElement: e} = this;
+        if (!e) return;
+        e.open = false;
+      }
+    };
+    this.onDropdownMenuClick = async t => {
+      const e = t.target;
+      if (e.disabled || e.separator) return;
+      this.closeDropdown();
+      await s();
+      this.focusToggle();
+    };
+    this.onDropdownMenuKeydown = t => {
+      const e = t.target;
+      switch (t.key) {
+       case "Escape":
+        this.closeDropdown();
+        this.focusToggle();
+        break;
+
+       case "Tab":
+        this.closeDropdown();
+        break;
+
+       case "ArrowUp":
+        t.preventDefault();
+        this.focusAdjacentItem(e, "prev");
+        break;
+
+       case "ArrowDown":
+        t.preventDefault();
+        this.focusAdjacentItem(e, "next");
+        break;
+      }
+    };
+    this.onToggleClick = () => {
+      if (this.open) {
+        this.closeDropdown();
+      } else {
+        this.openDropdown();
+      }
+    };
+    this.onToggleKeydown = async t => {
+      switch (t.key) {
+       case "ArrowUp":
+        t.preventDefault();
+        this.openDropdown();
+        await s();
+        this.focusLastItem();
+        break;
+
+       case "ArrowDown":
+        t.preventDefault();
+        this.openDropdown();
+        await s();
+        this.focusFirstItem();
+        return;
+
+       case "Escape":
+        t.preventDefault();
+        this.closeDropdown();
+        break;
+
+       case "Tab":
+        if (this.open) this.closeDropdown();
+        break;
+      }
+    };
+    this.openDropdown = () => {
+      if (this.open) return;
+      this.open = true;
+    };
+    this.controlElement = undefined;
+    this.additionalContext = undefined;
+    this.alignment = undefined;
+    this.ariaLabel = undefined;
+    this.block = undefined;
+    this.context = undefined;
+    this.contextValue = undefined;
+    this.disabled = undefined;
+    this.hideLabel = undefined;
+    this.icon = undefined;
+    this.label = undefined;
+    this.name = undefined;
+    this.open = undefined;
+    this.popDirection = undefined;
+    this.popoverAlignment = "left";
+    this.popoverDirection = undefined;
+    this.popoverMaxHeight = undefined;
+    this.popoverMinHeight = undefined;
+    this.popoverMode = null;
+    this.resolvedType = undefined;
+    this.type = "icon";
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    this.popDirectionHandler();
+    this.alignmentHandler();
+    this.ariaLabelHandler();
+  }
+  componentDidLoad() {
+    this.orchestrateResolvedMenuItems();
+    o(this.hostElement);
+  }
+  // #endregion
+  // #region Listeners
+  delegateFocus(t) {
+    if (!r(t, this.hostElement)) return;
+    this.focusToggle();
+  }
+  popoverStateHandler({detail: {open: t}}) {
+    var e;
+    if (this.open !== t) this.open = t;
+    (e = this.popoverElement) === null || e === void 0 ? void 0 : e.scrollContainerTo({
+      top: 0
+    });
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.
+     * @testOnly
+     */
+  async closePopover() {
+    if (!this.open || this.disabled) return;
+    this._togglePopover();
+  }
+  /**
+     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.
+     * @testOnly
+     */  async openPopover() {
+    if (this.open || this.disabled) return;
+    this._togglePopover();
+  }
+  /**
+     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).
+     *
+     * If the dropdown is closed, this will open it before selecting the item.
+     *
+     * If the value does not match any item's value, this method does nothing.
+     * @testOnly
+     */  async selectItem(t) {
+    var e;
+    const i = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
+    const n = i === null || i === void 0 ? void 0 : i.shadowRoot.querySelector(".dropdown-item");
+    if (!i || this.disabled) return;
+    if (!this.open) {
+      (e = this.controlElement) === null || e === void 0 ? void 0 : e.click();
+      await s();
+    }
+    n.click();
+    await s();
+  }
+  /**
+     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.
+     *
+     * If the dropdown is closed, this will open it before selecting the remove item button.
+     *
+     * Requirements for this method to work properly:
+     * - Provided `value` matches the item's `value` property
+     * - Item has the `removable` property enabled
+     * @testOnly
+     */  async selectRemoveItem(t) {
+    var e;
+    const i = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
+    const n = i === null || i === void 0 ? void 0 : i.shadowRoot.querySelector(".remove-dropdown-item");
+    if (!i || !n || this.disabled) return;
+    if (!this.open) {
+      (e = this.controlElement) === null || e === void 0 ? void 0 : e.click();
+      await s();
+    }
+    n.click();
+    await s();
+  }
+  // #endregion
+  // #region Watchers
+  additionalContextHandler() {
+    this.orchestrateResolvedMenuItems();
+  }
+  alignmentHandler() {
+    a(this, "alignment", "popoverAlignment");
+  }
+  ariaLabelHandler() {
+    d(this);
+  }
+  contextHandler() {
+    this.orchestrateResolvedMenuItems();
+  }
+  contextValueHandler() {
+    this.orchestrateResolvedMenuItems();
+  }
+  nameHandler() {
+    this.orchestrateResolvedMenuItems();
+  }
+  popDirectionHandler() {
+    a(this, "popDirection", "popoverDirection");
+  }
+  resolvedTypeHandler() {
+    this.orchestrateResolvedMenuItems();
+  }
+  // #endregion
+  // #region Local Methods
+  get determineDropdownItemCount() {
+    return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;
+  }
+  get hasCustomControl() {
+    return !!this.hostElement.querySelector("[slot=control]");
+  }
+  get toggleButtonProps() {
+    const t = [ "primary", "secondary", "neutral" ];
+    const e = [ "icon", "fab", "custom", ...t ];
+    const i = e.includes(this.type) ? this.type : "";
+    const n = i === "icon";
+    const s = i === "fab";
+    const o = i === "custom";
+    let r;
+    if (t.includes(i)) {
+      r = i === "neutral" ? i : `workflow-${i}`;
+    }
+    const a = this.open;
+    const d = !!this.disabled;
+    const h = this.open;
+    const l = !n && !s && !r ? "unstyled" : "";
+    return {
+      icon: n,
+      fab: s,
+      intent: r,
+      active: a,
+      disabled: d,
+      ariaExpanded: h,
+      className: l,
+      custom: o
+    };
+  }
+  _togglePopover() {
+    const {controlElement: t} = this;
+    if (!t) return;
+    t.click();
+    t.focus();
+    t.dispatchEvent(new FocusEvent("focus"));
+  }
+  focusAdjacentItem(t, e) {
+    const i = Array.from(this.hostElement.querySelectorAll(this.dropdownItemSelector));
+    const n = i.indexOf(t);
+    if (n === -1) {
+      return;
+    }
+    let s = 0;
+    if (e === "next") {
+      s = n < i.length - 1 ? n + 1 : 0;
+    } else if (e === "prev") {
+      if (n > 0) {
+        s = n - 1;
+      } else {
+        s = i.length - 1;
+      }
+    }
+    const o = i[s];
+    o && o.dispatchEvent(new Event("focus"));
+  }
+  navigateTo(t, e, i) {
+    var n, s;
+    return (s = (n = window.TectonElements) === null || n === void 0 ? void 0 : n.navigateTo) === null || s === void 0 ? void 0 : s.call(n, t, e, i);
+  }
+  orchestrateResolvedMenuItems() {
+    if (!this.name || !this.context) {
+      // this is only for contextual menu outlets
+      this.removeResolvedElements();
+      return;
+    }
+    this.resolveMenuItemElements().then((t => {
+      this.removeResolvedElements();
+      t.forEach((t => {
+        this.hostElement.appendChild(t);
+      }));
+    })).catch((t => {
+      this.removeResolvedElements();
+      throw t;
+    }));
+  }
+  removeResolvedElements() {
+    const t = this.hostElement.querySelectorAll("q2-dropdown-item.resolved-menu-item");
+    t.forEach((t => this.hostElement.removeChild(t)));
+  }
+  resolveMenu() {
+    return this.name && window.TectonElements && window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext);
+  }
+  resolveMenuItemElements() {
+    return this.resolveMenu().then((t => t.map((t => {
+      let e;
+      let i;
+      if (t["tct-ctxid"]) {
+        i = {};
+        i[t.contextIdParamName] = t["tct-ctxid"];
+      }
+      switch (t.action) {
+       case "navigateTo":
+        e = () => this.navigateTo(t.featureName, t.moduleName, i);
+        break;
+
+       case "showOverpanel":
+        e = () => this.showOverpanel(`${t.featureName}.${t.moduleName}`, i);
+        break;
+      }
+      const n = document.createElement("q2-dropdown-item");
+      n.setAttribute("value", t.itemLabel);
+      n.classList.add("resolved-menu-item");
+      n.textContent = t.itemLabel;
+      n.onclick = e;
+      return n;
+    }))));
+  }
+  showOverpanel(t, e) {
+    var i, n;
+    return (n = (i = window.TectonElements) === null || i === void 0 ? void 0 : i.showOverpanel) === null || n === void 0 ? void 0 : n.call(i, t, e, undefined, true);
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const t = this.toggleButtonProps;
+    return e("click-elsewhere", {
+      key: "7a236b18d5616dda29f7da0539dd00c01dece506",
+      class: this.open ? "dropdown-open" : "",
+      onChange: this.onClickElsewhere,
+      "test-id": "dropdownContainer"
+    }, e("q2-btn", {
+      key: "727835a5795103cbe809ac21a763c9340ca98dd7",
+      ref: t => this.controlElement = t,
+      class: t.className,
+      onClick: this.onToggleClick,
+      onKeyDown: this.onToggleKeydown,
+      fab: t.fab,
+      intent: t.intent,
+      active: t.active,
+      disabled: t.disabled,
+      ariaExpanded: `${!!t.ariaExpanded}`,
+      label: this.hideLabel && this.label ? h(this.label) : undefined,
+      hideLabel: this.hideLabel,
+      ariaHasPopup: "menu",
+      "test-id": "dropdownButton",
+      block: this.block,
+      description: h("tecton.element.dropdown.itemCount", [ this.determineDropdownItemCount ])
+    }, this.hasCustomControl ? e("div", {
+      "test-id": "dropdownControl",
+      class: t.custom ? "" : "hidden"
+    }, e("slot", {
+      name: "control"
+    })) : e(i, null, this.icon ? e("q2-icon", {
+      type: this.icon
+    }) : " ", this.label && !this.hideLabel && e("span", {
+      class: "dropdown-button-text"
+    }, h(this.label)))), e("q2-popover", {
+      key: "dec1bbf5bf99c0cb9bfc211345de03195d2b98f0",
+      ref: t => this.popoverElement = t,
+      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
+    }, e("div", {
+      key: "fa615534dcffe52b944b0b7ec4444add025ad0a6",
+      onClick: this.onDropdownMenuClick,
+      onKeyDown: this.onDropdownMenuKeydown,
+      role: "menu",
+      "aria-label": h(this.label) || undefined
+    }, e("slot", {
+      key: "d71de2a1130d8966561015da63f09e85b8808bb9"
+    }))));
+  }
+  get hostElement() {
+    return n(this);
+  }
+  static get watchers() {
+    return {
+      additionalContext: [ "additionalContextHandler" ],
+      alignment: [ "alignmentHandler" ],
+      ariaLabel: [ "ariaLabelHandler" ],
+      context: [ "contextHandler" ],
+      contextValue: [ "contextValueHandler" ],
+      name: [ "nameHandler" ],
+      popDirection: [ "popDirectionHandler" ],
+      resolvedType: [ "resolvedTypeHandler" ]
+    };
+  }
+};
+
+u.style = c;
+
+export { u as q2_dropdown };
+//# sourceMappingURL=q2-dropdown.entry.js.map