npm - q2-tecton-elements - Versions diffs - 1.63.1 → 1.64.0 - Mend

q2-tecton-elements 1.63.1 → 1.64.0

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

Files changed (390) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["mirrorEmit","context","events","detail","forEach","event","eventEntry","_a","emit","call","q2DropdownItemCss","Q2DropdownItem","constructor","hostRef","this","handleQ2LocValue","locElement","hostElement","querySelector","value","loc","substitutions","innerText","onItemClick","stopImmediatePropagation","type","onItemFocus","stopPropagation","onItemKeydown","key","focusRemoveBtn","onRemoveBtnClick","onRemoveBtnFocus","onRemoveBtnKeydown","focusItem","componentWillLoad","handleAriaLabel","q2LocValue","componentDidLoad","separator","overrideFocus","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"],"sources":["src/utils/mirror-emit.ts","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 { ComponentInterface, EventEmitter } from '@stencil/core';\n\n/*\n Emits specified events from a given component context with the provided detail.\n \n @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.\n * @param context - The component context that contains the event emitters.\n * @param events - An array of event names to be emitted.\n * @param detail - The detail payload to be passed to each emitted event.\n /\nconst mirrorEmit = <T = CustomEvent['detail']>(context: ComponentInterface, events: Array<string>, detail: T) => {\n events.forEach(event => {\n const eventEntry = context[event] as EventEmitter<T>;\n if (!eventEntry) return;\n eventEntry.emit?.(detail);\n });\n};\n\nexport default mirrorEmit;\n","@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: var(--tct-dropdown-item-min-height, 44px);\n min-width: 44px;\n border: none;\n background: transparent;\n outline: 0;\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 {\n Component,\n ComponentInterface,\n Prop,\n State,\n Element,\n Event,\n Listen,\n Watch,\n h,\n EventEmitter,\n} from '@stencil/core';\nimport { loc, handleAriaLabel, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\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 /\n Used by q2-option-list to indicate the option is active\n * @private\n /\n @Prop({ reflect: true })\n active: boolean;\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 Events\n\n /\n Is emitted when the item is clicked.\n * @deprecated\n /\n @Event()\n click: EventEmitter<{ type: 'select' \| 'remove'; value: string }>;\n\n /\n Is emitted when the item is clicked.\n */\n @Event()\n tctClick: EventEmitter<{ type: 'select' \| 'remove'; value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.q2LocValue = this.handleQ2LocValue();\n }\n\n componentDidLoad() {\n if (this.separator) return;\n overrideFocus(this.hostElement);\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\n mirrorEmit(this, ['click', 'tctClick'], {\n type: 'select',\n value: this.value \|\| '',\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 mirrorEmit(this, ['click', 'tctClick'], {\n type: 'remove',\n value: this.value \|\| '',\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":";;;;;;;;;;;GAUA,OAAMA,aAAa,CAA4BC,GAA6BC,GAAuBC;EAC/FD,EAAOE,SAAQC;;IACX,MAAMC,IAAaL,EAAQI;IAC3B,KAAKC,GAAY;KACjBC,IAAAD,EAAWE,UAAO,QAAAD,WAAA,aAAAA,EAAAE,KAAAH,GAAAH;AAAO;AAC3B;;ACfN,MAAMO,IAAoB;;MCiBbC,IAAc;EAD3B,WAAAC,CAAAC;;;;IAoIIC,KAAgBC,mBAAG;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,cAAelB;MACXA,EAAMmB;MAENxB,WAAWc,MAAM,EAAC,SAAS,cAAa;QACpCW,MAAM;QACNN,OAAOL,KAAKK,SAAS;;AACvB;IAGNL,KAAAY,cAAerB;MACXA,EAAMsB;AAAiB;IAG3Bb,KAAAc,gBAAiBvB;MACb,IAAIA,EAAMwB,QAAQ,cAAcf,KAAKgB;AAAgB;IAGzDhB,KAAAiB,mBAAoB1B;MAChBA,EAAMmB;MAENxB,WAAWc,MAAM,EAAC,SAAS,cAAa;QACpCW,MAAM;QACNN,OAAOL,KAAKK,SAAS;;AACvB;IAGNL,KAAAkB,mBAAoB3B;MAChBA,EAAMsB;AAAiB;IAG3Bb,KAAAmB,qBAAsB5B;MAClB,IAAIA,EAAMwB,QAAQ,aAAaf,KAAKoB;AAAW;AAgEtD;;;EAvJG,iBAAAC;IACIC,EAAgBtB;IAChBA,KAAKuB,aAAavB,KAAKC;;EAG3B,gBAAAuB;IACI,IAAIxB,KAAKyB,WAAW;IACpBC,EAAc1B,KAAKG;;;;EAOvB,kBAAAwB,CAAmBpC;IACf,IAAIA,EAAMqC,WAAW5B,KAAKG,aAAa;MACnCH,KAAKoB;;;;;EAQb,iBAAAS;IACIP,EAAgBtB;;;;EAMpB,cAAI8B;IACA,OAAO9B,KAAK+B,SAAS/B,KAAKG,YAAY6B,YAAYC,UAAUjC,KAAKuB;;EAGrE,eAAIW;IACA,OAAO5B,EAAI,sCAAsC,EAACN,KAAK8B,cAAc;;EAGzE,SAAAV;IACIpB,KAAKmC,gBAAgBC;;EAGzB,cAAApB;IACIhB,KAAKqC,aAAarC,KAAKqC,UAAUD;;;;EAiDrC,aAAAE;IACI,OACIC,EAAA;MACIC,OAAM;MACNC,MAAK;OAELF,EACI;MAAAG,KAAKC,KAAO3C,KAAKmC,kBAAkBQ;MAAG,cAC1BrC,EAAIN,KAAK8B;MACrBU,OAAM;MACNI,UAAS;MACTC,UAAU7C,KAAK6C;MACfJ,MAAK;MACLK,SAAS9C,KAAKS;MACdsC,WAAW/C,KAAKc;MAChBkC,SAAShD,KAAKY;MAAW,WACjB;OAER2B,EAAA,cAAOjC,EAAIN,KAAK8B,eAEnB9B,KAAKiD,aACFV,EAAA;MACIG,KAAKC,KAAO3C,KAAKqC,YAAYM;MAC7BH,OAAM;MACNI,UAAS;MAAI,cACD5C,KAAKkC;MACjBW,UAAU7C,KAAK6C;MACfC,SAAS9C,KAAKiB;MACd8B,WAAW/C,KAAKmB;MAChB6B,SAAShD,KAAKkB;MAAgB,WACtB;OAERqB,EAAS;MAAA5B,MAAK;;;EAOlC,kBAAAuC;IACI,OACIX,EAAA;MACIC,OAAM;MACNC,MAAK;MAAW,WACR;;;EAKpB,MAAAU;IACI,IAAInD,KAAKyB,WAAW;MAChB,OAAOzB,KAAKkD;;IAGhB,OAAOlD,KAAKsC","ignoreList":[]}
1	+ {"version":3,"names":["mirrorEmit","context","events","detail","forEach","event","eventEntry","_a","emit","call","q2DropdownItemCss","Q2DropdownItem","constructor","hostRef","this","handleQ2LocValue","locElement","hostElement","querySelector","value","loc","substitutions","innerText","onItemClick","stopImmediatePropagation","type","onItemFocus","stopPropagation","onItemKeydown","key","focusRemoveBtn","onRemoveBtnClick","onRemoveBtnFocus","onRemoveBtnKeydown","focusItem","componentWillLoad","handleAriaLabel","q2LocValue","componentDidLoad","separator","overrideFocus","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"],"sources":["src/utils/mirror-emit.ts","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 { ComponentInterface, EventEmitter } from '@stencil/core';\n\n/*\n Emits specified events from a given component context with the provided detail.\n \n @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.\n * @param context - The component context that contains the event emitters.\n * @param events - An array of event names to be emitted.\n * @param detail - The detail payload to be passed to each emitted event.\n /\nconst mirrorEmit = <T = CustomEvent['detail']>(context: ComponentInterface, events: Array<string>, detail: T) => {\n events.forEach(event => {\n const eventEntry = context[event] as EventEmitter<T>;\n if (!eventEntry) return;\n eventEntry.emit?.(detail);\n });\n};\n\nexport default mirrorEmit;\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.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 var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\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: var(--tct-dropdown-item-min-height, 44px);\n min-width: 44px;\n border: none;\n background: transparent;\n outline: 0;\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 --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n text-align: left;\n width: 100%;\n --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n padding: var-list(var-prefixer(option-padding), --comp-padding);\n\n color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n\n display: grid;\n align-items: center;\n grid-template-columns:\n var(--comp-selected-icon-size)\n 1fr;\n grid-template-areas: 'icon content';\n\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\nslot {\n grid-area: 'content';\n}\n\n.remove-dropdown-item:focus-visible,\n.dropdown-item:focus-visible {\n box-shadow: var-list(\n --tct-option-focus-box-shadow,\n --const-inset-double-focus-ring,\n unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n ) !important;\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 {\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(--tct-option-active-color, inherit);\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 {\n Component,\n ComponentInterface,\n Prop,\n State,\n Element,\n Event,\n Listen,\n Watch,\n h,\n EventEmitter,\n} from '@stencil/core';\nimport { loc, handleAriaLabel, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\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 /\n Used by q2-option-list to indicate the option is active\n * @private\n /\n @Prop({ reflect: true })\n active: boolean;\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 Events\n\n /\n Is emitted when the item is clicked.\n * @deprecated\n /\n @Event()\n click: EventEmitter<{ type: 'select' \| 'remove'; value: string }>;\n\n /\n Is emitted when the item is clicked.\n /\n @Event()\n tctClick: EventEmitter<{ type: 'select' \| 'remove'; value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.q2LocValue = this.handleQ2LocValue();\n }\n\n componentDidLoad() {\n if (this.separator) return;\n overrideFocus(this.hostElement);\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\n mirrorEmit(this, ['click', 'tctClick'], {\n type: 'select',\n value: this.value \|\| '',\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 mirrorEmit(this, ['click', 'tctClick'], {\n type: 'remove',\n value: this.value \|\| '',\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 {/ .icon is a placeholder to make the dd-item match the structure of option */}\n <div class=\"icon\"></div>\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=\"separator\"\n test-id=\"dropdownItemSeparator\"\n role=\"separator\"\n ></div>\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":";;;;;;;;;;;GAUA,OAAMA,aAAa,CAA4BC,GAA6BC,GAAuBC;EAC/FD,EAAOE,SAAQC;;IACX,MAAMC,IAAaL,EAAQI;IAC3B,KAAKC,GAAY;KACjBC,IAAAD,EAAWE,UAAO,QAAAD,WAAA,aAAAA,EAAAE,KAAAH,GAAAH;AAAO;AAC3B;;ACfN,MAAMO,IAAoB;;MCiBbC,IAAc;EAD3B,WAAAC,CAAAC;;;;IAoIIC,KAAgBC,mBAAG;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,cAAelB;MACXA,EAAMmB;MAENxB,WAAWc,MAAM,EAAC,SAAS,cAAa;QACpCW,MAAM;QACNN,OAAOL,KAAKK,SAAS;;AACvB;IAGNL,KAAAY,cAAerB;MACXA,EAAMsB;AAAiB;IAG3Bb,KAAAc,gBAAiBvB;MACb,IAAIA,EAAMwB,QAAQ,cAAcf,KAAKgB;AAAgB;IAGzDhB,KAAAiB,mBAAoB1B;MAChBA,EAAMmB;MAENxB,WAAWc,MAAM,EAAC,SAAS,cAAa;QACpCW,MAAM;QACNN,OAAOL,KAAKK,SAAS;;AACvB;IAGNL,KAAAkB,mBAAoB3B;MAChBA,EAAMsB;AAAiB;IAG3Bb,KAAAmB,qBAAsB5B;MAClB,IAAIA,EAAMwB,QAAQ,aAAaf,KAAKoB;AAAW;AAkEtD;;;EAzJG,iBAAAC;IACIC,EAAgBtB;IAChBA,KAAKuB,aAAavB,KAAKC;;EAG3B,gBAAAuB;IACI,IAAIxB,KAAKyB,WAAW;IACpBC,EAAc1B,KAAKG;;;;EAOvB,kBAAAwB,CAAmBpC;IACf,IAAIA,EAAMqC,WAAW5B,KAAKG,aAAa;MACnCH,KAAKoB;;;;;EAQb,iBAAAS;IACIP,EAAgBtB;;;;EAMpB,cAAI8B;IACA,OAAO9B,KAAK+B,SAAS/B,KAAKG,YAAY6B,YAAYC,UAAUjC,KAAKuB;;EAGrE,eAAIW;IACA,OAAO5B,EAAI,sCAAsC,EAACN,KAAK8B,cAAc;;EAGzE,SAAAV;IACIpB,KAAKmC,gBAAgBC;;EAGzB,cAAApB;IACIhB,KAAKqC,aAAarC,KAAKqC,UAAUD;;;;EAiDrC,aAAAE;IACI,OACIC,EAAA;MACIC,OAAM;MACNC,MAAK;OAELF,EACI;MAAAG,KAAKC,KAAO3C,KAAKmC,kBAAkBQ;MAAG,cAC1BrC,EAAIN,KAAK8B;MACrBU,OAAM;MACNI,UAAS;MACTC,UAAU7C,KAAK6C;MACfJ,MAAK;MACLK,SAAS9C,KAAKS;MACdsC,WAAW/C,KAAKc;MAChBkC,SAAShD,KAAKY;MAAW,WACjB;OAGR2B,EAAK;MAAAC,OAAM;QACXD,EAAA,cAAOjC,EAAIN,KAAK8B,eAEnB9B,KAAKiD,aACFV,EAAA;MACIG,KAAKC,KAAO3C,KAAKqC,YAAYM;MAC7BH,OAAM;MACNI,UAAS;MAAI,cACD5C,KAAKkC;MACjBW,UAAU7C,KAAK6C;MACfC,SAAS9C,KAAKiB;MACd8B,WAAW/C,KAAKmB;MAChB6B,SAAShD,KAAKkB;MAAgB,WACtB;OAERqB,EAAS;MAAA5B,MAAK;;;EAOlC,kBAAAuC;IACI,OACIX,EAAA;MACIC,OAAM;MAAW,WACT;MACRC,MAAK;;;EAKjB,MAAAU;IACI,IAAInD,KAAKyB,WAAW;MAChB,OAAOzB,KAAKkD;;IAGhB,OAAOlD,KAAKsC","ignoreList":[]}

package/dist/q2-tecton-elements/q2-dropdown.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-dropdown.entry.esm.js","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 { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n/ @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown must** have `type=\"custom\"` to use the control slot. /\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 optionList: HTMLQ2OptionListElement;\n optionSelector: string = 'q2-option: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 /\n Instructs the component to use the action sheet workflow for displaying its options.\n \n For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n /\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\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 /\n Determine whether the popover is open or closed.\n \n @readonly\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /* Determines the label that is applied to the option list for accessibility purposes. /\n @Prop()\n optionListLabel: string;\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 popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) {\n this.popoverElement?.scrollContainerTo({ top: 0 });\n } else {\n this.optionList.setActiveElement(null);\n }\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 _clickItem(value: string) {\n if (!value \|\| this.disabled) return;\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n option?.click();\n }\n\n async _handleActionSheet(event: MouseEvent \| KeyboardEvent) {\n const { value } = await showActionSheetList(this, event);\n this._clickItem(value);\n this.controlElement.focus();\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 focusToggle = () => {\n this.controlElement.focus();\n };\n\n handleFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (this.popoverElement?.contains(relatedTarget)) return;\n if (this.hostElement.contains(relatedTarget)) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLElement;\n if (target.localName === 'q2-option-list') {\n event.stopPropagation();\n }\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 onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n if (event.detail.open) return;\n this.controlElement.focus();\n };\n\n onToggleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this)) {\n this._handleActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n };\n\n onToggleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (isTabMetaOrCtrl) return;\n\n event.preventDefault();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this, event)) {\n this._handleActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n orchestrateResolvedMenuItems() {\n if (!this.name \|\| !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n 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 = function () {\n return window.TectonElements?.navigateTo?.(\n menuItemData.featureName,\n menuItemData.moduleName,\n queryParams\n );\n };\n break;\n case 'showOverpanel':\n onClickFn = function () {\n return window.TectonElements?.showOverpanel?.(\n `${menuItemData.featureName}.${menuItemData.moduleName}`,\n queryParams,\n undefined,\n true\n );\n };\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 // #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 onFocusout={this.handleFocusOut}\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 onFocusout={this.handleFocusOut}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode \|\| undefined}\n block={this.block}\n >\n <q2-option-list\n onPopoverState={this.onPopoverState}\n id=\"option-list\"\n ref={el => (this.optionList = el)}\n type=\"menu\"\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n no-select\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-dropdown.entry.esm.js","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 { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n/ @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown must** have `type=\"custom\"` to use the control slot. /\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 optionList: HTMLQ2OptionListElement;\n optionSelector: string = 'q2-option: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 /\n Instructs the component to use the action sheet workflow for displaying its options.\n \n For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n /\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\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 /\n Determine whether the popover is open or closed.\n \n @readonly\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /* Determines the label that is applied to the option list for accessibility purposes. /\n @Prop()\n optionListLabel: string;\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 popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) {\n this.popoverElement?.scrollContainerTo({ top: 0 });\n } else {\n this.optionList.setActiveElement(null);\n }\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 _clickItem(value: string) {\n if (!value \|\| this.disabled) return;\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n option?.click();\n }\n\n async _handleActionSheet(event: MouseEvent \| KeyboardEvent) {\n const { value } = await showActionSheetList(this, event);\n this._clickItem(value);\n this.controlElement.focus();\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 focusToggle = () => {\n this.controlElement.focus();\n };\n\n handleFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (this.popoverElement?.contains(relatedTarget)) return;\n if (this.hostElement.contains(relatedTarget)) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLElement;\n if (target.localName === 'q2-option-list') {\n event.stopPropagation();\n }\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 onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n if (event.detail.open) return;\n this.controlElement.focus();\n };\n\n onToggleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this)) {\n this._handleActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n };\n\n onToggleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (isTabMetaOrCtrl) return;\n\n event.preventDefault();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this, event)) {\n this._handleActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n orchestrateResolvedMenuItems() {\n if (!this.name \|\| !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n 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 = function () {\n return window.TectonElements?.navigateTo?.(\n menuItemData.featureName,\n menuItemData.moduleName,\n queryParams\n );\n };\n break;\n case 'showOverpanel':\n onClickFn = function () {\n return window.TectonElements?.showOverpanel?.(\n `${menuItemData.featureName}.${menuItemData.moduleName}`,\n queryParams,\n undefined,\n true\n );\n };\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 // #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 onFocusout={this.handleFocusOut}\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.label && !this.hideLabel && (\n <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n )}\n {this.icon ? <q2-icon type={this.icon} /> : ' '}\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 onFocusout={this.handleFocusOut}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode \|\| undefined}\n block={this.block}\n >\n <q2-option-list\n onPopoverState={this.onPopoverState}\n id=\"option-list\"\n ref={el => (this.optionList = el)}\n type=\"menu\"\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n no-select\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

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

@@ -331,11 +331,11 @@ const u = class {
       class: t.custom ? "" : "hidden"
     }, i("slot", {
       name: "control"
-    })) : i(e, null, this.icon ? i("q2-icon", {
-      type: this.icon
-    }) : " ", this.label && !this.hideLabel && i("span", {
+    })) : i(e, null, this.label && !this.hideLabel && i("span", {
       class: "dropdown-button-text"
-    }, c(this.label)))), i("q2-popover", {
+    }, c(this.label)), this.icon ? i("q2-icon", {
+      type: this.icon
+    }) : " ")), i("q2-popover", {
       key: "ea7ffefe5e462f6da78256fa3728361a75cbc932",
       ref: t => this.popoverElement = t,
       controlElement: this.controlElement,

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2DropdownCss","Q2Dropdown","constructor","hostRef","this","dropdownItemSelector","optionSelector","hoist","_a","window","Tecton","useActionSheets","popoverAlignment","popoverMode","type","focusToggle","controlElement","focus","handleFocusOut","event","relatedTarget","popoverElement","contains","hostElement","open","onClickElsewhere","target","localName","stopPropagation","onPopoverState","detail","onToggleClick","async","shouldShowActionSheet","_handleActionSheet","toggle","onToggleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateChangeHandler","scrollContainerTo","top","setActiveElement","closePopover","disabled","_togglePopover","openPopover","selectItem","value","item","querySelector","itemBtn","shadowRoot","click","waitForNextPaint","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomControl","toggleButtonProps","allowedIntents","allowedTypes","includes","icon","fab","custom","intent","active","ariaExpanded","className","_clickItem","option","showActionSheetList","dispatchEvent","FocusEvent","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","TectonElements","contextValue","resolvedType","additionalContext","datas","map","menuItemData","onClickFn","queryParams","contextIdParamName","action","_b","navigateTo","call","featureName","moduleName","showOverpanel","undefined","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","textContent","onclick","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","onFocusout","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","mode","id","optionListLabel"],"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 { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n/ @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown must** have `type=\"custom\"` to use the control slot. /\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 optionList: HTMLQ2OptionListElement;\n optionSelector: string = 'q2-option: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 /\n Instructs the component to use the action sheet workflow for displaying its options.\n \n For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n /\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\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 /\n Determine whether the popover is open or closed.\n \n @readonly\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /* Determines the label that is applied to the option list for accessibility purposes. /\n @Prop()\n optionListLabel: string;\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 popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) {\n this.popoverElement?.scrollContainerTo({ top: 0 });\n } else {\n this.optionList.setActiveElement(null);\n }\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 _clickItem(value: string) {\n if (!value \|\| this.disabled) return;\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n option?.click();\n }\n\n async _handleActionSheet(event: MouseEvent \| KeyboardEvent) {\n const { value } = await showActionSheetList(this, event);\n this._clickItem(value);\n this.controlElement.focus();\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 focusToggle = () => {\n this.controlElement.focus();\n };\n\n handleFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (this.popoverElement?.contains(relatedTarget)) return;\n if (this.hostElement.contains(relatedTarget)) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLElement;\n if (target.localName === 'q2-option-list') {\n event.stopPropagation();\n }\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 onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n if (event.detail.open) return;\n this.controlElement.focus();\n };\n\n onToggleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this)) {\n this._handleActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n };\n\n onToggleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (isTabMetaOrCtrl) return;\n\n event.preventDefault();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this, event)) {\n this._handleActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n orchestrateResolvedMenuItems() {\n if (!this.name \|\| !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n 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 = function () {\n return window.TectonElements?.navigateTo?.(\n menuItemData.featureName,\n menuItemData.moduleName,\n queryParams\n );\n };\n break;\n case 'showOverpanel':\n onClickFn = function () {\n return window.TectonElements?.showOverpanel?.(\n `${menuItemData.featureName}.${menuItemData.moduleName}`,\n queryParams,\n undefined,\n true\n );\n };\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 // #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 onFocusout={this.handleFocusOut}\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 onFocusout={this.handleFocusOut}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode \|\| undefined}\n block={this.block}\n >\n <q2-option-list\n onPopoverState={this.onPopoverState}\n id=\"option-list\"\n ref={el => (this.optionList = el)}\n type=\"menu\"\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n no-select\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["q2DropdownCss","Q2Dropdown","constructor","hostRef","this","dropdownItemSelector","optionSelector","hoist","_a","window","Tecton","useActionSheets","popoverAlignment","popoverMode","type","focusToggle","controlElement","focus","handleFocusOut","event","relatedTarget","popoverElement","contains","hostElement","open","onClickElsewhere","target","localName","stopPropagation","onPopoverState","detail","onToggleClick","async","shouldShowActionSheet","_handleActionSheet","toggle","onToggleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateChangeHandler","scrollContainerTo","top","setActiveElement","closePopover","disabled","_togglePopover","openPopover","selectItem","value","item","querySelector","itemBtn","shadowRoot","click","waitForNextPaint","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomControl","toggleButtonProps","allowedIntents","allowedTypes","includes","icon","fab","custom","intent","active","ariaExpanded","className","_clickItem","option","showActionSheetList","dispatchEvent","FocusEvent","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","TectonElements","contextValue","resolvedType","additionalContext","datas","map","menuItemData","onClickFn","queryParams","contextIdParamName","action","_b","navigateTo","call","featureName","moduleName","showOverpanel","undefined","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","textContent","onclick","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","onFocusout","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","mode","id","optionListLabel"],"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 { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n/ @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown must** have `type=\"custom\"` to use the control slot. /\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 optionList: HTMLQ2OptionListElement;\n optionSelector: string = 'q2-option: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 /\n Instructs the component to use the action sheet workflow for displaying its options.\n \n For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n /\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\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 /\n Determine whether the popover is open or closed.\n \n @readonly\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /* Determines the label that is applied to the option list for accessibility purposes. /\n @Prop()\n optionListLabel: string;\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 popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) {\n this.popoverElement?.scrollContainerTo({ top: 0 });\n } else {\n this.optionList.setActiveElement(null);\n }\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 _clickItem(value: string) {\n if (!value \|\| this.disabled) return;\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n option?.click();\n }\n\n async _handleActionSheet(event: MouseEvent \| KeyboardEvent) {\n const { value } = await showActionSheetList(this, event);\n this._clickItem(value);\n this.controlElement.focus();\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 focusToggle = () => {\n this.controlElement.focus();\n };\n\n handleFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (this.popoverElement?.contains(relatedTarget)) return;\n if (this.hostElement.contains(relatedTarget)) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLElement;\n if (target.localName === 'q2-option-list') {\n event.stopPropagation();\n }\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 onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n if (event.detail.open) return;\n this.controlElement.focus();\n };\n\n onToggleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this)) {\n this._handleActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n };\n\n onToggleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (isTabMetaOrCtrl) return;\n\n event.preventDefault();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this, event)) {\n this._handleActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n orchestrateResolvedMenuItems() {\n if (!this.name \|\| !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n 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 = function () {\n return window.TectonElements?.navigateTo?.(\n menuItemData.featureName,\n menuItemData.moduleName,\n queryParams\n );\n };\n break;\n case 'showOverpanel':\n onClickFn = function () {\n return window.TectonElements?.showOverpanel?.(\n `${menuItemData.featureName}.${menuItemData.moduleName}`,\n queryParams,\n undefined,\n true\n );\n };\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 // #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 onFocusout={this.handleFocusOut}\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.label && !this.hideLabel && (\n <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n )}\n {this.icon ? <q2-icon type={this.icon} /> : ' '}\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 onFocusout={this.handleFocusOut}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode \|\| undefined}\n block={this.block}\n >\n <q2-option-list\n onPopoverState={this.onPopoverState}\n id=\"option-list\"\n ref={el => (this.optionList = el)}\n type=\"menu\"\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n no-select\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}