q2-tecton-elements 1.64.1 → 1.64.2

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 (15) hide show
  1. package/dist/bundle-report.json +4 -4
  2. package/dist/cjs/q2-dropdown-item.cjs.entry.js +3 -3
  3. package/dist/cjs/q2-dropdown-item.cjs.entry.js.map +1 -1
  4. package/dist/cjs/q2-dropdown-item.entry.cjs.js.map +1 -1
  5. package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.css +43 -29
  6. package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js +2 -2
  7. package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js.map +1 -1
  8. package/dist/components/q2-dropdown-item2.js +3 -3
  9. package/dist/components/q2-dropdown-item2.js.map +1 -1
  10. package/dist/esm/q2-dropdown-item.entry.js +3 -3
  11. package/dist/esm/q2-dropdown-item.entry.js.map +1 -1
  12. package/dist/q2-tecton-elements/q2-dropdown-item.entry.esm.js.map +1 -1
  13. package/dist/q2-tecton-elements/q2-dropdown-item.entry.js +12 -12
  14. package/dist/q2-tecton-elements/q2-dropdown-item.entry.js.map +1 -1
  15. package/package.json +2 -2
package/dist/bundle-report.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2026-02-03T22:29:50",
2
+ "timestamp": "2026-02-17T21:39:43",
3
3
  "compiler": {
4
4
  "name": "node",
5
5
  "version": "24.10.0"
@@ -1594,7 +1594,7 @@
1594
1594
  "index-CGkHOjh1.js",
1595
1595
  "index-YJ5sXwiE.js"
1596
1596
  ],
1597
- "originalByteSize": 8543
1597
+ "originalByteSize": 9355
1598
1598
  },
1599
1599
  {
1600
1600
  "key": "q2-icon.entry",
@@ -2385,7 +2385,7 @@
2385
2385
  "index-CGkHOjh1.js",
2386
2386
  "index-YJ5sXwiE.js"
2387
2387
  ],
2388
- "originalByteSize": 8539
2388
+ "originalByteSize": 9351
2389
2389
  },
2390
2390
  {
2391
2391
  "key": "q2-icon.entry",
@@ -3178,7 +3178,7 @@
3178
3178
  "index-BYXz4owL.js",
3179
3179
  "index-CyqXtdz-.js"
3180
3180
  ],
3181
- "originalByteSize": 8585
3181
+ "originalByteSize": 9397
3182
3182
  },
3183
3183
  {
3184
3184
  "key": "q2-icon.entry",
package/dist/cjs/q2-dropdown-item.cjs.entry.js CHANGED
@@ -21,7 +21,7 @@ const mirrorEmit = (context, events, detail) => {
21
21
  });
22
22
  };
23
23
 
24
- const q2DropdownItemCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{display:flex}.dropdown-item-button{--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-default-dropdown-item-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));text-align:left;width:100%;--comp-padding:0 var(--app-scale-2x, 10px);padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:grid;align-items:center;grid-template-columns:var(--comp-selected-icon-size) 1fr;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}slot{grid-area:\"content\"}.remove-dropdown-item:focus-visible,.dropdown-item:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}:host(:not([disabled])) .remove-dropdown-item:hover,:host(:not([disabled])) .remove-dropdown-item:focus,:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item:focus,:host(:not([disabled])) .remove-dropdown-item:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}.remove-dropdown-item{flex:0 0 44px}";
24
+ const q2DropdownItemCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding-y:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding:var(--comp-default-dropdown-item-padding-y)\n var(--comp-default-dropdown-item-padding-x);display:grid;align-items:center;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));grid-template-columns:1fr;color:inherit}.dropdown-item-wrapper.removable{grid-template-columns:1fr auto}.dropdown-item-wrapper.removable .dropdown-item{padding-right:0}.dropdown-item-wrapper.removable .remove-dropdown-item{flex:0 0 44px}.dropdown-item-button{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width;cursor:pointer}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);width:100%;display:grid;align-items:center;justify-content:start;grid-template-columns:1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));min-height:var(--tct-dropdown-item-min-height, 44px);padding-left:var(--comp-default-dropdown-item-padding-x);padding-right:var(--comp-default-dropdown-item-padding-x);text-align:left;min-height:var(--tct-dropdown-item-min-height, 44px)}.dropdown-item-button:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}.dropdown-item-btn-content{display:flex;justify-content:start;color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item-button:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}";
25
25
 
26
26
  const Q2DropdownItem = class {
27
27
  constructor(hostRef) {
@@ -105,10 +105,10 @@ const Q2DropdownItem = class {
105
105
  // #endregion
106
106
  // #region Render Methods
107
107
  renderItemDOM() {
108
- return (index.h("div", { class: "dropdown-item-wrapper", role: "presentation" }, index.h("button", { ref: el => (this.dropdownItemBtn = el), "aria-label": index$1.loc(this.innerLabel), class: "dropdown-item-button dropdown-item", tabindex: "-1", disabled: this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, index.h("div", { class: "icon" }), index.h("slot", null, index$1.loc(this.innerLabel))), this.removable && (index.h("button", { ref: el => (this.removeBtn = el), class: "dropdown-item-button remove-dropdown-item", tabindex: "-1", "aria-label": this.removeLabel, disabled: this.disabled, onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, index.h("q2-icon", { type: "close" })))));
108
+ return (index.h("div", { class: `dropdown-item-wrapper ${this.removable ? 'removable' : ''}`, role: "presentation" }, index.h("button", { ref: el => (this.dropdownItemBtn = el), "aria-label": index$1.loc(this.innerLabel), class: "dropdown-item-button dropdown-item", tabindex: "-1", disabled: this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, index.h("div", { class: "dropdown-item-btn-content" }, index.h("slot", null, index$1.loc(this.innerLabel)))), this.removable && (index.h("button", { ref: el => (this.removeBtn = el), class: "dropdown-item-button remove-dropdown-item", tabindex: "-1", "aria-label": this.removeLabel, disabled: this.disabled, onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, index.h("q2-icon", { type: "close" })))));
109
109
  }
110
110
  renderSeparatorDOM() {
111
- return (index.h("div", { class: "separator", "test-id": "dropdownItemSeparator", role: "separator" }));
111
+ return (index.h("div", { class: "dropdown-separator", "test-id": "dropdownItemSeparator", role: "separator" }));
112
112
  }
113
113
  render() {
114
114
  if (this.separator) {
package/dist/cjs/q2-dropdown-item.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"q2-dropdown-item.entry.cjs.js","mappings":"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","names":["loc","handleAriaLabel","overrideFocus","h"],"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"],"version":3}
1
+ {"file":"q2-dropdown-item.entry.cjs.js","mappings":";;;;;AAEA;;;;;;;AAOG;AACH,MAAM,UAAU,GAAG,CAA4B,OAA2B,EAAE,MAAqB,EAAE,MAAS,KAAI;AAC5G,IAAA,MAAM,CAAC,OAAO,CAAC,KAAK,IAAG;;AACnB,QAAA,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAoB;AACpD,QAAA,IAAI,CAAC,UAAU;YAAE;AACjB,QAAA,CAAA,EAAA,GAAA,UAAU,CAAC,IAAI,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,EAAA,MAAM,CAAC;AAC7B,KAAC,CAAC;AACN,CAAC;;AChBD,MAAM,iBAAiB,GAAG,k0IAAk0I;;MCiB/0I,cAAc,GAAA,MAAA;AAD3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAoII,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAa;YAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC3D,YAAA,IAAI,CAAC,UAAU;AAAE,gBAAA,OAAO,EAAE;YAE1B,OAAO,UAAU,CAAC;kBACZA,WAAG,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,aAAa;kBAC9CA,WAAG,CAAC,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,aAAa,CAAC;AAC7D,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,KAAK,CAAC,wBAAwB,EAAE;YAEhC,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;AACpC,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAC1B,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,KAAK,CAAC,eAAe,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AACrC,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY;gBAAE,IAAI,CAAC,cAAc,EAAE;AACzD,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;YACrC,KAAK,CAAC,wBAAwB,EAAE;YAEhC,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;AACpC,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAC1B,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;YACrC,KAAK,CAAC,eAAe,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAAoB,KAAI;AAC1C,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW;gBAAE,IAAI,CAAC,SAAS,EAAE;AACnD,SAAC;AAkEJ;;;IA1JG,iBAAiB,GAAA;QACbC,uBAAe,CAAC,IAAI,CAAC;AACrB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE;;IAG7C,gBAAgB,GAAA;QACZ,IAAI,IAAI,CAAC,SAAS;YAAE;AACpB,QAAAC,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,kBAAkB,CAAC,KAAiB,EAAA;QAChC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;YACnC,IAAI,CAAC,SAAS,EAAE;;;;;IAQxB,iBAAiB,GAAA;QACbD,uBAAe,CAAC,IAAI,CAAC;;;;AAMzB,IAAA,IAAI,UAAU,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,UAAU;;AAG/E,IAAA,IAAI,WAAW,GAAA;AACX,QAAA,OAAOD,WAAG,CAAC,oCAAoC,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC;;IAG7E,SAAS,GAAA;AACL,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE;;IAGhC,cAAc,GAAA;QACV,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;;;;IAiD5C,aAAa,GAAA;QACT,QACIG,iBACI,KAAK,EAAE,CAAyB,sBAAA,EAAA,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EACnE,IAAI,EAAC,cAAc,EAAA,EAEnBA,OACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,gBAC1BH,WAAG,CAAC,IAAI,CAAC,UAAU,CAAC,EAChC,KAAK,EAAC,oCAAoC,EAC1C,QAAQ,EAAC,IAAI,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,SAAA,EACjB,cAAc,EAAA,EAEtBG,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EAClCA,OAAO,CAAA,MAAA,EAAA,IAAA,EAAAH,WAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAQ,CACjC,CACD,EAER,IAAI,CAAC,SAAS,KACXG,OAAA,CAAA,QAAA,EAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAC,2CAA2C,EACjD,QAAQ,EAAC,IAAI,EAAA,YAAA,EACD,IAAI,CAAC,WAAW,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,SAAA,EACtB,oBAAoB,EAAA,EAE5BA,OAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAA,CAAG,CACnB,CACZ,CACC;;IAId,kBAAkB,GAAA;QACd,QACIA,OAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,oBAAoB,EAAA,SAAA,EAClB,uBAAuB,EAC/B,IAAI,EAAC,WAAW,EAAA,CACb;;IAIf,MAAM,GAAA;AACF,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,OAAO,IAAI,CAAC,kBAAkB,EAAE;;AAGpC,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE;;;;;;;;;;;","names":["loc","handleAriaLabel","overrideFocus","h"],"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 var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n\n.dropdown-item-wrapper {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n\n --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n --comp-default-dropdown-item-padding-y: var(--app-scale-2x, 10px);\n --comp-default-dropdown-item-padding: var(--comp-default-dropdown-item-padding-y)\n var(--comp-default-dropdown-item-padding-x);\n\n \n display: grid;\n align-items: center;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n grid-template-columns: 1fr;\n\n &.removable {\n grid-template-columns: 1fr auto;\n .dropdown-item {\n padding-right: 0;\n }\n .remove-dropdown-item {\n flex: 0 0 44px;\n }\n }\n color: inherit;\n}\n\n.dropdown-item-button {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\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 cursor: pointer;\n}\n\n.dropdown-item {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n width: 100%;\n display: grid;\n align-items:center;\n justify-content: start;\n grid-template-columns: 1fr;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n min-height: var(--tct-dropdown-item-min-height, 44px);\n padding-left: var(--comp-default-dropdown-item-padding-x);\n padding-right: var(--comp-default-dropdown-item-padding-x);\n text-align: left;\n min-height: var(--tct-dropdown-item-min-height, 44px);\n}\n\n.dropdown-item-button: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.dropdown-item-btn-content{\n display:flex;\n justify-content: start;\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 .dropdown-item-button:hover,\n .dropdown-item-button: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 color: var(--tct-option-active-color, inherit);\n }\n\n .dropdown-item-button:hover,\n .dropdown-item-button:focus {\n color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n }\n\n .dropdown-item-button: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","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 ${this.removable ? 'removable' : ''}`}\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 <div class=\"dropdown-item-btn-content\">\n <slot>{loc(this.innerLabel)}</slot>\n </div>\n </button>\n\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 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"],"version":3}
package/dist/cjs/q2-dropdown-item.entry.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"q2-dropdown-item.entry.cjs.js","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"],"names":["loc","handleAriaLabel","overrideFocus","h"],"mappings":";;;;;AAEA;;;;;;;AAOG;AACH,MAAM,UAAU,GAAG,CAA4B,OAA2B,EAAE,MAAqB,EAAE,MAAS,KAAI;AAC5G,IAAA,MAAM,CAAC,OAAO,CAAC,KAAK,IAAG;;AACnB,QAAA,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAoB;AACpD,QAAA,IAAI,CAAC,UAAU;YAAE;AACjB,QAAA,CAAA,EAAA,GAAA,UAAU,CAAC,IAAI,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,EAAA,MAAM,CAAC;AAC7B,KAAC,CAAC;AACN,CAAC;;AChBD,MAAM,iBAAiB,GAAG,ylHAAylH;;MCiBtmH,cAAc,GAAA,MAAA;AAD3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAoII,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAa;YAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC3D,YAAA,IAAI,CAAC,UAAU;AAAE,gBAAA,OAAO,EAAE;YAE1B,OAAO,UAAU,CAAC;kBACZA,WAAG,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,aAAa;kBAC9CA,WAAG,CAAC,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,aAAa,CAAC;AAC7D,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,KAAK,CAAC,wBAAwB,EAAE;YAEhC,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;AACpC,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAC1B,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,KAAK,CAAC,eAAe,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AACrC,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY;gBAAE,IAAI,CAAC,cAAc,EAAE;AACzD,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;YACrC,KAAK,CAAC,wBAAwB,EAAE;YAEhC,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;AACpC,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAC1B,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;YACrC,KAAK,CAAC,eAAe,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAAoB,KAAI;AAC1C,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW;gBAAE,IAAI,CAAC,SAAS,EAAE;AACnD,SAAC;AAiEJ;;;IAzJG,iBAAiB,GAAA;QACbC,uBAAe,CAAC,IAAI,CAAC;AACrB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE;;IAG7C,gBAAgB,GAAA;QACZ,IAAI,IAAI,CAAC,SAAS;YAAE;AACpB,QAAAC,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,kBAAkB,CAAC,KAAiB,EAAA;QAChC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;YACnC,IAAI,CAAC,SAAS,EAAE;;;;;IAQxB,iBAAiB,GAAA;QACbD,uBAAe,CAAC,IAAI,CAAC;;;;AAMzB,IAAA,IAAI,UAAU,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,UAAU;;AAG/E,IAAA,IAAI,WAAW,GAAA;AACX,QAAA,OAAOD,WAAG,CAAC,oCAAoC,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC;;IAG7E,SAAS,GAAA;AACL,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE;;IAGhC,cAAc,GAAA;QACV,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;;;;IAiD5C,aAAa,GAAA;QACT,QACIG,iBACI,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,cAAc,EAAA,EAEnBA,OACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,gBAC1BH,WAAG,CAAC,IAAI,CAAC,UAAU,CAAC,EAChC,KAAK,EAAC,oCAAoC,EAC1C,QAAQ,EAAC,IAAI,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,SAAA,EACjB,cAAc,EAAA,EAGtBG,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAO,CAAA,EACxBA,OAAA,CAAA,MAAA,EAAA,IAAA,EAAOH,WAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAQ,CAC9B,EACR,IAAI,CAAC,SAAS,KACXG,OAAA,CAAA,QAAA,EAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAC,2CAA2C,EACjD,QAAQ,EAAC,IAAI,EAAA,YAAA,EACD,IAAI,CAAC,WAAW,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,SAAA,EACtB,oBAAoB,EAAA,EAE5BA,OAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAA,CAAG,CACnB,CACZ,CACC;;IAId,kBAAkB,GAAA;QACd,QACIA,OAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,WAAW,EAAA,SAAA,EACT,uBAAuB,EAC/B,IAAI,EAAC,WAAW,EAAA,CACb;;IAIf,MAAM,GAAA;AACF,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,OAAO,IAAI,CAAC,kBAAkB,EAAE;;AAGpC,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE;;;;;;;;;;;"}
1
+ {"version":3,"file":"q2-dropdown-item.entry.cjs.js","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 var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n\n.dropdown-item-wrapper {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n\n --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n --comp-default-dropdown-item-padding-y: var(--app-scale-2x, 10px);\n --comp-default-dropdown-item-padding: var(--comp-default-dropdown-item-padding-y)\n var(--comp-default-dropdown-item-padding-x);\n\n \n display: grid;\n align-items: center;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n grid-template-columns: 1fr;\n\n &.removable {\n grid-template-columns: 1fr auto;\n .dropdown-item {\n padding-right: 0;\n }\n .remove-dropdown-item {\n flex: 0 0 44px;\n }\n }\n color: inherit;\n}\n\n.dropdown-item-button {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\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 cursor: pointer;\n}\n\n.dropdown-item {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n width: 100%;\n display: grid;\n align-items:center;\n justify-content: start;\n grid-template-columns: 1fr;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n min-height: var(--tct-dropdown-item-min-height, 44px);\n padding-left: var(--comp-default-dropdown-item-padding-x);\n padding-right: var(--comp-default-dropdown-item-padding-x);\n text-align: left;\n min-height: var(--tct-dropdown-item-min-height, 44px);\n}\n\n.dropdown-item-button: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.dropdown-item-btn-content{\n display:flex;\n justify-content: start;\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 .dropdown-item-button:hover,\n .dropdown-item-button: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 color: var(--tct-option-active-color, inherit);\n }\n\n .dropdown-item-button:hover,\n .dropdown-item-button:focus {\n color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n }\n\n .dropdown-item-button: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","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 ${this.removable ? 'removable' : ''}`}\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 <div class=\"dropdown-item-btn-content\">\n <slot>{loc(this.innerLabel)}</slot>\n </div>\n </button>\n\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 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"],"names":["loc","handleAriaLabel","overrideFocus","h"],"mappings":"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"}
package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.css CHANGED
@@ -65,17 +65,36 @@ button {
65
65
  visibility: hidden;
66
66
  }
67
67
 
68
- .separator {
68
+ .dropdown-separator {
69
69
  --comp-default-separator-margin: 0 var(--tct-scale-1, var(--app-scale-3x, 15px));
70
70
  margin: var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));
71
71
  border-bottom: 1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc));
72
72
  }
73
73
 
74
74
  .dropdown-item-wrapper {
75
- display: flex;
75
+ --comp-selected-icon-size: var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));
76
+ --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);
77
+ --comp-default-dropdown-item-padding-y: var(--app-scale-2x, 10px);
78
+ --comp-default-dropdown-item-padding: var(--comp-default-dropdown-item-padding-y)
79
+ var(--comp-default-dropdown-item-padding-x);
80
+ display: grid;
81
+ align-items: center;
82
+ gap: var(--tct-scale-1, var(--app-scale-1x, 5px));
83
+ grid-template-columns: 1fr;
84
+ color: inherit;
85
+ }
86
+ .dropdown-item-wrapper.removable {
87
+ grid-template-columns: 1fr auto;
88
+ }
89
+ .dropdown-item-wrapper.removable .dropdown-item {
90
+ padding-right: 0;
91
+ }
92
+ .dropdown-item-wrapper.removable .remove-dropdown-item {
93
+ flex: 0 0 44px;
76
94
  }
77
95
 
78
96
  .dropdown-item-button {
97
+ --comp-selected-icon-size: var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));
79
98
  --comp-dropdown-item-tween: var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));
80
99
  margin: var(--tct-scale-0, var(--app-scale-0x, 0));
81
100
  padding: var(--tct-scale-0, var(--app-scale-0x, 0));
@@ -86,6 +105,7 @@ button {
86
105
  outline: 0;
87
106
  transition: var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));
88
107
  transition-property: background, color, box-shadow, fill, border-color, border-width;
108
+ cursor: pointer;
89
109
  }
90
110
  .dropdown-item-button:disabled {
91
111
  opacity: var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
@@ -93,48 +113,42 @@ button {
93
113
  }
94
114
 
95
115
  .dropdown-item {
96
- --comp-default-dropdown-item-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);
97
116
  --comp-selected-icon-size: var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));
98
- text-align: left;
117
+ --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);
99
118
  width: 100%;
100
- --comp-padding: 0 var(--app-scale-2x, 10px);
101
- padding: var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));
102
- color: var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));
103
- overflow: hidden;
104
- text-overflow: ellipsis;
105
- cursor: pointer;
106
119
  display: grid;
107
120
  align-items: center;
108
- grid-template-columns: var(--comp-selected-icon-size) 1fr;
109
- grid-template-areas: "icon content";
121
+ justify-content: start;
122
+ grid-template-columns: 1fr;
110
123
  gap: var(--tct-scale-1, var(--app-scale-1x, 5px));
124
+ min-height: var(--tct-dropdown-item-min-height, 44px);
125
+ padding-left: var(--comp-default-dropdown-item-padding-x);
126
+ padding-right: var(--comp-default-dropdown-item-padding-x);
127
+ text-align: left;
128
+ min-height: var(--tct-dropdown-item-min-height, 44px);
111
129
  }
112
130
 
113
- slot {
114
- grid-area: "content";
131
+ .dropdown-item-button:focus-visible {
132
+ box-shadow: var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important;
115
133
  }
116
134
 
117
- .remove-dropdown-item:focus-visible,
118
- .dropdown-item:focus-visible {
119
- box-shadow: var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important;
135
+ .dropdown-item-btn-content {
136
+ display: flex;
137
+ justify-content: start;
138
+ color: var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));
139
+ overflow: hidden;
140
+ text-overflow: ellipsis;
120
141
  }
121
142
 
122
- :host(:not([disabled])) .remove-dropdown-item:hover,
123
- :host(:not([disabled])) .remove-dropdown-item:focus,
124
- :host(:not([disabled])) .dropdown-item:hover,
125
- :host(:not([disabled])) .dropdown-item:focus {
143
+ :host(:not([disabled])) .dropdown-item-button:hover,
144
+ :host(:not([disabled])) .dropdown-item-button:focus {
126
145
  background: var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));
127
146
  color: var(--tct-option-active-color, inherit);
128
147
  }
129
- :host(:not([disabled])) .dropdown-item:hover,
130
- :host(:not([disabled])) .dropdown-item:focus {
148
+ :host(:not([disabled])) .dropdown-item-button:hover,
149
+ :host(:not([disabled])) .dropdown-item-button:focus {
131
150
  color: var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)));
132
151
  }
133
- :host(:not([disabled])) .dropdown-item:focus,
134
- :host(:not([disabled])) .remove-dropdown-item:focus {
152
+ :host(:not([disabled])) .dropdown-item-button:focus {
135
153
  box-shadow: var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)));
136
- }
137
-
138
- .remove-dropdown-item {
139
- flex: 0 0 44px;
140
154
  }
package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js CHANGED
@@ -80,10 +80,10 @@ export class Q2DropdownItem {
80
80
  // #endregion
81
81
  // #region Render Methods
82
82
  renderItemDOM() {
83
- return (h("div", { class: "dropdown-item-wrapper", role: "presentation" }, h("button", { ref: el => (this.dropdownItemBtn = el), "aria-label": loc(this.innerLabel), class: "dropdown-item-button dropdown-item", tabindex: "-1", disabled: this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "icon" }), h("slot", null, loc(this.innerLabel))), this.removable && (h("button", { ref: el => (this.removeBtn = el), class: "dropdown-item-button remove-dropdown-item", tabindex: "-1", "aria-label": this.removeLabel, disabled: this.disabled, onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" })))));
83
+ return (h("div", { class: `dropdown-item-wrapper ${this.removable ? 'removable' : ''}`, role: "presentation" }, h("button", { ref: el => (this.dropdownItemBtn = el), "aria-label": loc(this.innerLabel), class: "dropdown-item-button dropdown-item", tabindex: "-1", disabled: this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "dropdown-item-btn-content" }, h("slot", null, loc(this.innerLabel)))), this.removable && (h("button", { ref: el => (this.removeBtn = el), class: "dropdown-item-button remove-dropdown-item", tabindex: "-1", "aria-label": this.removeLabel, disabled: this.disabled, onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" })))));
84
84
  }
85
85
  renderSeparatorDOM() {
86
- return (h("div", { class: "separator", "test-id": "dropdownItemSeparator", role: "separator" }));
86
+ return (h("div", { class: "dropdown-separator", "test-id": "dropdownItemSeparator", role: "separator" }));
87
87
  }
88
88
  render() {
89
89
  if (this.separator) {
package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"q2-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1
+ {"version":3,"file":"q2-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"names":[],"mappings":"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","sourcesContent":["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 ${this.removable ? 'removable' : ''}`}\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 <div class=\"dropdown-item-btn-content\">\n <slot>{loc(this.innerLabel)}</slot>\n </div>\n </button>\n\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 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"]}
package/dist/components/q2-dropdown-item2.js CHANGED
@@ -20,7 +20,7 @@ const mirrorEmit = (context, events, detail) => {
20
20
  });
21
21
  };
22
22
 
23
- const q2DropdownItemCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{display:flex}.dropdown-item-button{--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-default-dropdown-item-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));text-align:left;width:100%;--comp-padding:0 var(--app-scale-2x, 10px);padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:grid;align-items:center;grid-template-columns:var(--comp-selected-icon-size) 1fr;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}slot{grid-area:\"content\"}.remove-dropdown-item:focus-visible,.dropdown-item:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}:host(:not([disabled])) .remove-dropdown-item:hover,:host(:not([disabled])) .remove-dropdown-item:focus,:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item:focus,:host(:not([disabled])) .remove-dropdown-item:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}.remove-dropdown-item{flex:0 0 44px}";
23
+ const q2DropdownItemCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding-y:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding:var(--comp-default-dropdown-item-padding-y)\n var(--comp-default-dropdown-item-padding-x);display:grid;align-items:center;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));grid-template-columns:1fr;color:inherit}.dropdown-item-wrapper.removable{grid-template-columns:1fr auto}.dropdown-item-wrapper.removable .dropdown-item{padding-right:0}.dropdown-item-wrapper.removable .remove-dropdown-item{flex:0 0 44px}.dropdown-item-button{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width;cursor:pointer}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);width:100%;display:grid;align-items:center;justify-content:start;grid-template-columns:1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));min-height:var(--tct-dropdown-item-min-height, 44px);padding-left:var(--comp-default-dropdown-item-padding-x);padding-right:var(--comp-default-dropdown-item-padding-x);text-align:left;min-height:var(--tct-dropdown-item-min-height, 44px)}.dropdown-item-button:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}.dropdown-item-btn-content{display:flex;justify-content:start;color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item-button:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}";
24
24
 
25
25
  const Q2DropdownItem = /*@__PURE__*/ proxyCustomElement(class Q2DropdownItem extends HTMLElement {
26
26
  constructor() {
@@ -106,10 +106,10 @@ const Q2DropdownItem = /*@__PURE__*/ proxyCustomElement(class Q2DropdownItem ext
106
106
  // #endregion
107
107
  // #region Render Methods
108
108
  renderItemDOM() {
109
- return (h("div", { class: "dropdown-item-wrapper", role: "presentation" }, h("button", { ref: el => (this.dropdownItemBtn = el), "aria-label": loc(this.innerLabel), class: "dropdown-item-button dropdown-item", tabindex: "-1", disabled: this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "icon" }), h("slot", null, loc(this.innerLabel))), this.removable && (h("button", { ref: el => (this.removeBtn = el), class: "dropdown-item-button remove-dropdown-item", tabindex: "-1", "aria-label": this.removeLabel, disabled: this.disabled, onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" })))));
109
+ return (h("div", { class: `dropdown-item-wrapper ${this.removable ? 'removable' : ''}`, role: "presentation" }, h("button", { ref: el => (this.dropdownItemBtn = el), "aria-label": loc(this.innerLabel), class: "dropdown-item-button dropdown-item", tabindex: "-1", disabled: this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "dropdown-item-btn-content" }, h("slot", null, loc(this.innerLabel)))), this.removable && (h("button", { ref: el => (this.removeBtn = el), class: "dropdown-item-button remove-dropdown-item", tabindex: "-1", "aria-label": this.removeLabel, disabled: this.disabled, onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" })))));
110
110
  }
111
111
  renderSeparatorDOM() {
112
- return (h("div", { class: "separator", "test-id": "dropdownItemSeparator", role: "separator" }));
112
+ return (h("div", { class: "dropdown-separator", "test-id": "dropdownItemSeparator", role: "separator" }));
113
113
  }
114
114
  render() {
115
115
  if (this.separator) {
package/dist/components/q2-dropdown-item2.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"q2-dropdown-item2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"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"],"version":3}
1
+ {"file":"q2-dropdown-item2.js","mappings":";;;;AAEA;;;;;;;AAOG;AACH,MAAM,UAAU,GAAG,CAA4B,OAA2B,EAAE,MAAqB,EAAE,MAAS,KAAI;AAC5G,IAAA,MAAM,CAAC,OAAO,CAAC,KAAK,IAAG;;AACnB,QAAA,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAoB;AACpD,QAAA,IAAI,CAAC,UAAU;YAAE;AACjB,QAAA,CAAA,EAAA,GAAA,UAAU,CAAC,IAAI,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,EAAA,MAAM,CAAC;AAC7B,KAAC,CAAC;AACN,CAAC;;AChBD,MAAM,iBAAiB,GAAG,k0IAAk0I;;MCiB/0I,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA;AAD3B,IAAA,WAAA,GAAA;;;;;;AAoII,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAa;YAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC3D,YAAA,IAAI,CAAC,UAAU;AAAE,gBAAA,OAAO,EAAE;YAE1B,OAAO,UAAU,CAAC;kBACZ,GAAG,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,aAAa;kBAC9C,GAAG,CAAC,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,aAAa,CAAC;AAC7D,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,KAAK,CAAC,wBAAwB,EAAE;YAEhC,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;AACpC,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAC1B,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,KAAK,CAAC,eAAe,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AACrC,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY;gBAAE,IAAI,CAAC,cAAc,EAAE;AACzD,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;YACrC,KAAK,CAAC,wBAAwB,EAAE;YAEhC,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;AACpC,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAC1B,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;YACrC,KAAK,CAAC,eAAe,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAAoB,KAAI;AAC1C,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW;gBAAE,IAAI,CAAC,SAAS,EAAE;AACnD,SAAC;AAkEJ;;;IA1JG,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;AACrB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE;;IAG7C,gBAAgB,GAAA;QACZ,IAAI,IAAI,CAAC,SAAS;YAAE;AACpB,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,kBAAkB,CAAC,KAAiB,EAAA;QAChC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;YACnC,IAAI,CAAC,SAAS,EAAE;;;;;IAQxB,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;;;;AAMzB,IAAA,IAAI,UAAU,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,UAAU;;AAG/E,IAAA,IAAI,WAAW,GAAA;AACX,QAAA,OAAO,GAAG,CAAC,oCAAoC,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC;;IAG7E,SAAS,GAAA;AACL,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE;;IAGhC,cAAc,GAAA;QACV,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;;;;IAiD5C,aAAa,GAAA;QACT,QACI,WACI,KAAK,EAAE,CAAyB,sBAAA,EAAA,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EACnE,IAAI,EAAC,cAAc,EAAA,EAEnB,CACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,gBAC1B,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,EAChC,KAAK,EAAC,oCAAoC,EAC1C,QAAQ,EAAC,IAAI,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,SAAA,EACjB,cAAc,EAAA,EAEtB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EAClC,CAAO,CAAA,MAAA,EAAA,IAAA,EAAA,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAQ,CACjC,CACD,EAER,IAAI,CAAC,SAAS,KACX,CAAA,CAAA,QAAA,EAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAC,2CAA2C,EACjD,QAAQ,EAAC,IAAI,EAAA,YAAA,EACD,IAAI,CAAC,WAAW,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,SAAA,EACtB,oBAAoB,EAAA,EAE5B,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAA,CAAG,CACnB,CACZ,CACC;;IAId,kBAAkB,GAAA;QACd,QACI,CAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,oBAAoB,EAAA,SAAA,EAClB,uBAAuB,EAC/B,IAAI,EAAC,WAAW,EAAA,CACb;;IAIf,MAAM,GAAA;AACF,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,OAAO,IAAI,CAAC,kBAAkB,EAAE;;AAGpC,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"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 var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n\n.dropdown-item-wrapper {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n\n --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n --comp-default-dropdown-item-padding-y: var(--app-scale-2x, 10px);\n --comp-default-dropdown-item-padding: var(--comp-default-dropdown-item-padding-y)\n var(--comp-default-dropdown-item-padding-x);\n\n \n display: grid;\n align-items: center;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n grid-template-columns: 1fr;\n\n &.removable {\n grid-template-columns: 1fr auto;\n .dropdown-item {\n padding-right: 0;\n }\n .remove-dropdown-item {\n flex: 0 0 44px;\n }\n }\n color: inherit;\n}\n\n.dropdown-item-button {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\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 cursor: pointer;\n}\n\n.dropdown-item {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n width: 100%;\n display: grid;\n align-items:center;\n justify-content: start;\n grid-template-columns: 1fr;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n min-height: var(--tct-dropdown-item-min-height, 44px);\n padding-left: var(--comp-default-dropdown-item-padding-x);\n padding-right: var(--comp-default-dropdown-item-padding-x);\n text-align: left;\n min-height: var(--tct-dropdown-item-min-height, 44px);\n}\n\n.dropdown-item-button: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.dropdown-item-btn-content{\n display:flex;\n justify-content: start;\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 .dropdown-item-button:hover,\n .dropdown-item-button: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 color: var(--tct-option-active-color, inherit);\n }\n\n .dropdown-item-button:hover,\n .dropdown-item-button:focus {\n color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n }\n\n .dropdown-item-button: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","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 ${this.removable ? 'removable' : ''}`}\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 <div class=\"dropdown-item-btn-content\">\n <slot>{loc(this.innerLabel)}</slot>\n </div>\n </button>\n\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 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"],"version":3}
package/dist/esm/q2-dropdown-item.entry.js CHANGED
@@ -19,7 +19,7 @@ const mirrorEmit = (context, events, detail) => {
19
19
  });
20
20
  };
21
21
 
22
- const q2DropdownItemCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{display:flex}.dropdown-item-button{--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-default-dropdown-item-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));text-align:left;width:100%;--comp-padding:0 var(--app-scale-2x, 10px);padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:grid;align-items:center;grid-template-columns:var(--comp-selected-icon-size) 1fr;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}slot{grid-area:\"content\"}.remove-dropdown-item:focus-visible,.dropdown-item:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}:host(:not([disabled])) .remove-dropdown-item:hover,:host(:not([disabled])) .remove-dropdown-item:focus,:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item:focus,:host(:not([disabled])) .remove-dropdown-item:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}.remove-dropdown-item{flex:0 0 44px}";
22
+ const q2DropdownItemCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding-y:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding:var(--comp-default-dropdown-item-padding-y)\n var(--comp-default-dropdown-item-padding-x);display:grid;align-items:center;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));grid-template-columns:1fr;color:inherit}.dropdown-item-wrapper.removable{grid-template-columns:1fr auto}.dropdown-item-wrapper.removable .dropdown-item{padding-right:0}.dropdown-item-wrapper.removable .remove-dropdown-item{flex:0 0 44px}.dropdown-item-button{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width;cursor:pointer}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);width:100%;display:grid;align-items:center;justify-content:start;grid-template-columns:1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));min-height:var(--tct-dropdown-item-min-height, 44px);padding-left:var(--comp-default-dropdown-item-padding-x);padding-right:var(--comp-default-dropdown-item-padding-x);text-align:left;min-height:var(--tct-dropdown-item-min-height, 44px)}.dropdown-item-button:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}.dropdown-item-btn-content{display:flex;justify-content:start;color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item-button:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}";
23
23
 
24
24
  const Q2DropdownItem = class {
25
25
  constructor(hostRef) {
@@ -103,10 +103,10 @@ const Q2DropdownItem = class {
103
103
  // #endregion
104
104
  // #region Render Methods
105
105
  renderItemDOM() {
106
- return (h("div", { class: "dropdown-item-wrapper", role: "presentation" }, h("button", { ref: el => (this.dropdownItemBtn = el), "aria-label": loc(this.innerLabel), class: "dropdown-item-button dropdown-item", tabindex: "-1", disabled: this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "icon" }), h("slot", null, loc(this.innerLabel))), this.removable && (h("button", { ref: el => (this.removeBtn = el), class: "dropdown-item-button remove-dropdown-item", tabindex: "-1", "aria-label": this.removeLabel, disabled: this.disabled, onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" })))));
106
+ return (h("div", { class: `dropdown-item-wrapper ${this.removable ? 'removable' : ''}`, role: "presentation" }, h("button", { ref: el => (this.dropdownItemBtn = el), "aria-label": loc(this.innerLabel), class: "dropdown-item-button dropdown-item", tabindex: "-1", disabled: this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "dropdown-item-btn-content" }, h("slot", null, loc(this.innerLabel)))), this.removable && (h("button", { ref: el => (this.removeBtn = el), class: "dropdown-item-button remove-dropdown-item", tabindex: "-1", "aria-label": this.removeLabel, disabled: this.disabled, onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" })))));
107
107
  }
108
108
  renderSeparatorDOM() {
109
- return (h("div", { class: "separator", "test-id": "dropdownItemSeparator", role: "separator" }));
109
+ return (h("div", { class: "dropdown-separator", "test-id": "dropdownItemSeparator", role: "separator" }));
110
110
  }
111
111
  render() {
112
112
  if (this.separator) {
package/dist/esm/q2-dropdown-item.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"q2-dropdown-item.entry.js","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"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"q2-dropdown-item.entry.js","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 var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n\n.dropdown-item-wrapper {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n\n --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n --comp-default-dropdown-item-padding-y: var(--app-scale-2x, 10px);\n --comp-default-dropdown-item-padding: var(--comp-default-dropdown-item-padding-y)\n var(--comp-default-dropdown-item-padding-x);\n\n \n display: grid;\n align-items: center;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n grid-template-columns: 1fr;\n\n &.removable {\n grid-template-columns: 1fr auto;\n .dropdown-item {\n padding-right: 0;\n }\n .remove-dropdown-item {\n flex: 0 0 44px;\n }\n }\n color: inherit;\n}\n\n.dropdown-item-button {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\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 cursor: pointer;\n}\n\n.dropdown-item {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n width: 100%;\n display: grid;\n align-items:center;\n justify-content: start;\n grid-template-columns: 1fr;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n min-height: var(--tct-dropdown-item-min-height, 44px);\n padding-left: var(--comp-default-dropdown-item-padding-x);\n padding-right: var(--comp-default-dropdown-item-padding-x);\n text-align: left;\n min-height: var(--tct-dropdown-item-min-height, 44px);\n}\n\n.dropdown-item-button: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.dropdown-item-btn-content{\n display:flex;\n justify-content: start;\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 .dropdown-item-button:hover,\n .dropdown-item-button: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 color: var(--tct-option-active-color, inherit);\n }\n\n .dropdown-item-button:hover,\n .dropdown-item-button:focus {\n color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n }\n\n .dropdown-item-button: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","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 ${this.removable ? 'removable' : ''}`}\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 <div class=\"dropdown-item-btn-content\">\n <slot>{loc(this.innerLabel)}</slot>\n </div>\n </button>\n\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 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"],"names":[],"mappings":"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"}
package/dist/q2-tecton-elements/q2-dropdown-item.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"q2-dropdown-item.entry.esm.js","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"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"q2-dropdown-item.entry.esm.js","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 var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n\n.dropdown-item-wrapper {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n\n --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n --comp-default-dropdown-item-padding-y: var(--app-scale-2x, 10px);\n --comp-default-dropdown-item-padding: var(--comp-default-dropdown-item-padding-y)\n var(--comp-default-dropdown-item-padding-x);\n\n \n display: grid;\n align-items: center;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n grid-template-columns: 1fr;\n\n &.removable {\n grid-template-columns: 1fr auto;\n .dropdown-item {\n padding-right: 0;\n }\n .remove-dropdown-item {\n flex: 0 0 44px;\n }\n }\n color: inherit;\n}\n\n.dropdown-item-button {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\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 cursor: pointer;\n}\n\n.dropdown-item {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n width: 100%;\n display: grid;\n align-items:center;\n justify-content: start;\n grid-template-columns: 1fr;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n min-height: var(--tct-dropdown-item-min-height, 44px);\n padding-left: var(--comp-default-dropdown-item-padding-x);\n padding-right: var(--comp-default-dropdown-item-padding-x);\n text-align: left;\n min-height: var(--tct-dropdown-item-min-height, 44px);\n}\n\n.dropdown-item-button: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.dropdown-item-btn-content{\n display:flex;\n justify-content: start;\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 .dropdown-item-button:hover,\n .dropdown-item-button: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 color: var(--tct-option-active-color, inherit);\n }\n\n .dropdown-item-button:hover,\n .dropdown-item-button:focus {\n color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n }\n\n .dropdown-item-button: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","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 ${this.removable ? 'removable' : ''}`}\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 <div class=\"dropdown-item-btn-content\">\n <slot>{loc(this.innerLabel)}</slot>\n </div>\n </button>\n\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 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"],"names":[],"mappings":"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"}
package/dist/q2-tecton-elements/q2-dropdown-item.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as t, c as o, h as e, g as r } from "./index-CGkHOjh1.js";
2
2
 
3
- import { l as i, d as a, o as n } from "./index-YJ5sXwiE.js";
3
+ import { l as i, d as n, o as a } from "./index-YJ5sXwiE.js";
4
4
 
5
5
  /**
6
6
  * Emits specified events from a given component context with the provided detail.
@@ -18,9 +18,9 @@ import { l as i, d as a, o as n } from "./index-YJ5sXwiE.js";
18
18
  }));
19
19
  };
20
20
 
21
- const s = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{display:flex}.dropdown-item-button{--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-default-dropdown-item-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));text-align:left;width:100%;--comp-padding:0 var(--app-scale-2x, 10px);padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:grid;align-items:center;grid-template-columns:var(--comp-selected-icon-size) 1fr;grid-template-areas:"icon content";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}slot{grid-area:"content"}.remove-dropdown-item:focus-visible,.dropdown-item:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}:host(:not([disabled])) .remove-dropdown-item:hover,:host(:not([disabled])) .remove-dropdown-item:focus,:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item:focus,:host(:not([disabled])) .remove-dropdown-item:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}.remove-dropdown-item{flex:0 0 44px}';
21
+ const d = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding-y:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding:var(--comp-default-dropdown-item-padding-y)\n var(--comp-default-dropdown-item-padding-x);display:grid;align-items:center;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));grid-template-columns:1fr;color:inherit}.dropdown-item-wrapper.removable{grid-template-columns:1fr auto}.dropdown-item-wrapper.removable .dropdown-item{padding-right:0}.dropdown-item-wrapper.removable .remove-dropdown-item{flex:0 0 44px}.dropdown-item-button{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width;cursor:pointer}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);width:100%;display:grid;align-items:center;justify-content:start;grid-template-columns:1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));min-height:var(--tct-dropdown-item-min-height, 44px);padding-left:var(--comp-default-dropdown-item-padding-x);padding-right:var(--comp-default-dropdown-item-padding-x);text-align:left;min-height:var(--tct-dropdown-item-min-height, 44px)}.dropdown-item-button:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}.dropdown-item-btn-content{display:flex;justify-content:start;color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item-button:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}";
22
22
 
23
- const d = class {
23
+ const s = class {
24
24
  constructor(e) {
25
25
  t(this, e);
26
26
  this.click = o(this, "click", 7);
@@ -60,12 +60,12 @@ const d = class {
60
60
  // #endregion
61
61
  // #region Component Lifecycle Events
62
62
  componentWillLoad() {
63
- a(this);
63
+ n(this);
64
64
  this.q2LocValue = this.handleQ2LocValue();
65
65
  }
66
66
  componentDidLoad() {
67
67
  if (this.separator) return;
68
- n(this.hostElement);
68
+ a(this.hostElement);
69
69
  }
70
70
  // #endregion
71
71
  // #region Listeners
@@ -77,7 +77,7 @@ const d = class {
77
77
  // #endregion
78
78
  // #region Watchers
79
79
  ariaLabelObserver() {
80
- a(this);
80
+ n(this);
81
81
  }
82
82
  // #endregion
83
83
  // #region Local Methods
@@ -97,7 +97,7 @@ const d = class {
97
97
  // #region Render Methods
98
98
  renderItemDOM() {
99
99
  return e("div", {
100
- class: "dropdown-item-wrapper",
100
+ class: `dropdown-item-wrapper ${this.removable ? "removable" : ""}`,
101
101
  role: "presentation"
102
102
  }, e("button", {
103
103
  ref: t => this.dropdownItemBtn = t,
@@ -111,8 +111,8 @@ const d = class {
111
111
  onFocus: this.onItemFocus,
112
112
  "test-id": "dropdownItem"
113
113
  }, e("div", {
114
- class: "icon"
115
- }), e("slot", null, i(this.innerLabel))), this.removable && e("button", {
114
+ class: "dropdown-item-btn-content"
115
+ }, e("slot", null, i(this.innerLabel)))), this.removable && e("button", {
116
116
  ref: t => this.removeBtn = t,
117
117
  class: "dropdown-item-button remove-dropdown-item",
118
118
  tabindex: "-1",
@@ -128,7 +128,7 @@ const d = class {
128
128
  }
129
129
  renderSeparatorDOM() {
130
130
  return e("div", {
131
- class: "separator",
131
+ class: "dropdown-separator",
132
132
  "test-id": "dropdownItemSeparator",
133
133
  role: "separator"
134
134
  });
@@ -149,8 +149,8 @@ const d = class {
149
149
  }
150
150
  };
151
151
 
152
- d.style = s;
152
+ s.style = d;
153
153
 
154
- export { d as q2_dropdown_item };
154
+ export { s as q2_dropdown_item };
155
155
  //# sourceMappingURL=q2-dropdown-item.entry.esm.js.map
156
156
  //# sourceMappingURL=q2-dropdown-item.entry.js.map
package/dist/q2-tecton-elements/q2-dropdown-item.entry.js.map CHANGED
@@ -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.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":[]}
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","removable","role","ref","el","tabindex","disabled","onClick","onKeyDown","onFocus","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 var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n\n.dropdown-item-wrapper {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n\n --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n --comp-default-dropdown-item-padding-y: var(--app-scale-2x, 10px);\n --comp-default-dropdown-item-padding: var(--comp-default-dropdown-item-padding-y)\n var(--comp-default-dropdown-item-padding-x);\n\n \n display: grid;\n align-items: center;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n grid-template-columns: 1fr;\n\n &.removable {\n grid-template-columns: 1fr auto;\n .dropdown-item {\n padding-right: 0;\n }\n .remove-dropdown-item {\n flex: 0 0 44px;\n }\n }\n color: inherit;\n}\n\n.dropdown-item-button {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\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 cursor: pointer;\n}\n\n.dropdown-item {\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n width: 100%;\n display: grid;\n align-items:center;\n justify-content: start;\n grid-template-columns: 1fr;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n min-height: var(--tct-dropdown-item-min-height, 44px);\n padding-left: var(--comp-default-dropdown-item-padding-x);\n padding-right: var(--comp-default-dropdown-item-padding-x);\n text-align: left;\n min-height: var(--tct-dropdown-item-min-height, 44px);\n}\n\n.dropdown-item-button: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.dropdown-item-btn-content{\n display:flex;\n justify-content: start;\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 .dropdown-item-button:hover,\n .dropdown-item-button: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 color: var(--tct-option-active-color, inherit);\n }\n\n .dropdown-item-button:hover,\n .dropdown-item-button:focus {\n color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n }\n\n .dropdown-item-button: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","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 ${this.removable ? 'removable' : ''}`}\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 <div class=\"dropdown-item-btn-content\">\n <slot>{loc(this.innerLabel)}</slot>\n </div>\n </button>\n\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 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;AAmEtD;;;EA1JG,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,OAAO,yBAAyBxC,KAAKyC,YAAY,cAAc;MAC/DC,MAAK;OAELH,EACI;MAAAI,KAAKC,KAAO5C,KAAKmC,kBAAkBS;MAAG,cAC1BtC,EAAIN,KAAK8B;MACrBU,OAAM;MACNK,UAAS;MACTC,UAAU9C,KAAK8C;MACfJ,MAAK;MACLK,SAAS/C,KAAKS;MACduC,WAAWhD,KAAKc;MAChBmC,SAASjD,KAAKY;MAAW,WACjB;OAER2B,EAAK;MAAAC,OAAM;OACPD,EAAO,cAAAjC,EAAIN,KAAK8B,gBAIvB9B,KAAKyC,aACFF,EAAA;MACII,KAAKC,KAAO5C,KAAKqC,YAAYO;MAC7BJ,OAAM;MACNK,UAAS;MAAI,cACD7C,KAAKkC;MACjBY,UAAU9C,KAAK8C;MACfC,SAAS/C,KAAKiB;MACd+B,WAAWhD,KAAKmB;MAChB8B,SAASjD,KAAKkB;MAAgB,WACtB;OAERqB,EAAS;MAAA5B,MAAK;;;EAOlC,kBAAAuC;IACI,OACIX,EAAA;MACIC,OAAM;MAAoB,WAClB;MACRE,MAAK;;;EAKjB,MAAAS;IACI,IAAInD,KAAKyB,WAAW;MAChB,OAAOzB,KAAKkD;;IAGhB,OAAOlD,KAAKsC","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "q2-tecton-elements",
3
- "version": "1.64.1",
3
+ "version": "1.64.2",
4
4
  "description": "Q2 Tecton Custom Elements",
5
5
  "license": "MIT",
6
6
  "author": "Q2 Tecton Team",
@@ -18,7 +18,7 @@
18
18
  "dependencies": {
19
19
  "@stencil/core": "~4.32.0",
20
20
  "swiper": "8.4.4",
21
- "q2-tecton-common": "1.64.1"
21
+ "q2-tecton-common": "1.64.2"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@figma/code-connect": "^1.3.12",