npm - q2-tecton-elements - Versions diffs - 1.54.3 → 1.54.4 - Mend

q2-tecton-elements 1.54.3 → 1.54.4

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

package/dist/bundle-report.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-05-12T20:58:43",
+  "timestamp": "2025-05-21T19:30:42",
   "compiler": {
     "name": "node",
     "version": "20.18.1"
@@ -9,11 +9,11 @@
     "fsNamespace": "q2-tecton-elements",
     "components": 56,
     "entries": 56,
-    "bundles": 914,
+    "bundles": 916,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 334,
+        "files": 336,
         "generatedFiles": [
           "./dist/collection/components/click-elsewhere/click-elsewhere.js",
           "./dist/collection/components/click-elsewhere/click-elsewhere.js.map",
@@ -341,6 +341,8 @@
           "./dist/collection/utils/helpers.js.map",
           "./dist/collection/utils/index.js",
           "./dist/collection/utils/index.js.map",
+          "./dist/collection/utils/mirror-emit.js",
+          "./dist/collection/utils/mirror-emit.js.map",
           "./dist/collection/utils/sanitize-html-string.js",
           "./dist/collection/utils/sanitize-html-string.js.map",
           "./dist/collection/utils/sanitize-regex-string.js",
@@ -1466,7 +1468,7 @@
           "index-7a5365e2.js",
           "index-504f1a9e.js"
         ],
-        "originalByteSize": 7605
+        "originalByteSize": 8402
       },
       {
         "key": "q2-item.q2-link.q2-list.entry",
@@ -1558,7 +1560,7 @@
           "index-7a5365e2.js",
           "index-504f1a9e.js"
         ],
-        "originalByteSize": 6849
+        "originalByteSize": 7450
       },
       {
         "key": "q2-option-list.q2-popover.entry",
@@ -1572,7 +1574,7 @@
           "index-7a5365e2.js",
           "index-504f1a9e.js"
         ],
-        "originalByteSize": 42128
+        "originalByteSize": 42276
       },
       {
         "key": "click-elsewhere.entry",
@@ -2094,7 +2096,7 @@
           "index-7a5365e2.js",
           "index-504f1a9e.js"
         ],
-        "originalByteSize": 7605
+        "originalByteSize": 8402
       },
       {
         "key": "q2-item.q2-link.q2-list.entry",
@@ -2186,7 +2188,7 @@
           "index-7a5365e2.js",
           "index-504f1a9e.js"
         ],
-        "originalByteSize": 6849
+        "originalByteSize": 7450
       },
       {
         "key": "q2-option-list.q2-popover.entry",
@@ -2200,7 +2202,7 @@
           "index-7a5365e2.js",
           "index-504f1a9e.js"
         ],
-        "originalByteSize": 42128
+        "originalByteSize": 42276
       },
       {
         "key": "click-elsewhere.entry",
@@ -2724,7 +2726,7 @@
           "index-e7e68b1e.js",
           "index-76f63767.js"
         ],
-        "originalByteSize": 7703
+        "originalByteSize": 8506
       },
       {
         "key": "q2-item.q2-link.q2-list.entry",
@@ -2816,7 +2818,7 @@
           "index-e7e68b1e.js",
           "index-76f63767.js"
         ],
-        "originalByteSize": 6953
+        "originalByteSize": 7560
       },
       {
         "key": "q2-option-list.q2-popover.entry",
@@ -2830,7 +2832,7 @@
           "index-e7e68b1e.js",
           "index-76f63767.js"
         ],
-        "originalByteSize": 42223
+        "originalByteSize": 42371
       },
       {
         "key": "click-elsewhere.entry",
@@ -9529,6 +9531,27 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
+          "docs": {
+            "tags": [
+              {
+                "name": "deprecated"
+              }
+            ],
+            "text": "Is emitted when the item is clicked."
+          },
+          "complexType": {
+            "original": "{ type: 'select' | 'remove'; value: string }",
+            "resolved": "{ type: \"select\" | \"remove\"; value: string; }",
+            "references": {}
+          },
+          "internal": false
+        },
+        {
+          "name": "tctClick",
+          "method": "tctClick",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
           "docs": {
             "tags": [],
             "text": "Is emitted when the item is clicked."
@@ -13490,6 +13513,23 @@
             "references": {}
           },
           "internal": false
+        },
+        {
+          "name": "tctClick",
+          "method": "tctClick",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": {
+            "tags": [],
+            "text": "Is emitted when the option is clicked."
+          },
+          "complexType": {
+            "original": "{ type: 'select' | 'remove'; value: string }",
+            "resolved": "{ type: \"select\" | \"remove\"; value: string; }",
+            "references": {}
+          },
+          "internal": false
         }
       ],
       "internal": false,
@@ -38940,6 +38980,27 @@
               "bubbles": true,
               "cancelable": true,
               "composed": true,
+              "docs": {
+                "tags": [
+                  {
+                    "name": "deprecated"
+                  }
+                ],
+                "text": "Is emitted when the item is clicked."
+              },
+              "complexType": {
+                "original": "{ type: 'select' | 'remove'; value: string }",
+                "resolved": "{ type: \"select\" | \"remove\"; value: string; }",
+                "references": {}
+              },
+              "internal": false
+            },
+            {
+              "name": "tctClick",
+              "method": "tctClick",
+              "bubbles": true,
+              "cancelable": true,
+              "composed": true,
               "docs": {
                 "tags": [],
                 "text": "Is emitted when the item is clicked."
@@ -41725,6 +41786,23 @@
                 "references": {}
               },
               "internal": false
+            },
+            {
+              "name": "tctClick",
+              "method": "tctClick",
+              "bubbles": true,
+              "cancelable": true,
+              "composed": true,
+              "docs": {
+                "tags": [],
+                "text": "Is emitted when the option is clicked."
+              },
+              "complexType": {
+                "original": "{ type: 'select' | 'remove'; value: string }",
+                "resolved": "{ type: \"select\" | \"remove\"; value: string; }",
+                "references": {}
+              },
+              "internal": false
             }
           ],
           "watchers": [
@@ -41800,7 +41878,7 @@
           "hasVdomClass": true,
           "hasVdomFunctional": false,
           "hasVdomKey": false,
-          "hasVdomListener": false,
+          "hasVdomListener": true,
           "hasVdomPropOrAttr": true,
           "hasVdomRef": false,
           "hasVdomRender": true,
@@ -41815,6 +41893,8 @@
             "aria-selected",
             "aria-hidden",
             "display",
+            "onClick",
+            "onKeydown",
             "type"
           ],
           "htmlTagNames": [
@@ -43407,6 +43487,7 @@
       "./src/utils"
     ],
     "./src/utils/index.tsx": [],
+    "./src/utils/mirror-emit.ts": [],
     "./src/utils/sanitize-html-string.ts": [],
     "./src/utils/sanitize-regex-string.ts": [],
     "./src/utils/test/action-sheet-test.e2e.ts": [

package/dist/cjs/q2-dropdown-item.cjs.entry.js CHANGED Viewed

@@ -5,6 +5,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e7e68b1e.js');
 const index$1 = require('./index-76f63767.js');
+/**
+ * Emits specified events from a given component context with the provided detail.
+ *
+ * @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.
+ * @param context - The component context that contains the event emitters.
+ * @param events - An array of event names to be emitted.
+ * @param detail - The detail payload to be passed to each emitted event.
+ */
+const mirrorEmit = (context, events, detail) => {
+    events.forEach(event => {
+        var _a;
+        const eventEntry = context[event];
+        if (!eventEntry)
+            return;
+        (_a = eventEntry.emit) === null || _a === void 0 ? void 0 : _a.call(eventEntry, detail);
+    });
+};
 const q2DropdownItemCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item-button{--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height: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);flex:1;text-align:left;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, var(--comp-default-dropdown-item-padding)));background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .remove-dropdown-item:hover,:host(:not([disabled])) .remove-dropdown-item:focus,:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))))}:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item:focus,:host(:not([disabled])) .remove-dropdown-item:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}.remove-dropdown-item{flex:0 0 44px}";
 const Q2DropdownItemStyle0 = q2DropdownItemCss;
@@ -12,6 +30,7 @@ const Q2DropdownItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.click = index.createEvent(this, "click", 7);
+        this.tctClick = index.createEvent(this, "tctClick", 7);
         this.handleQ2LocValue = () => {
             const locElement = this.hostElement.querySelector('q2-loc');
             if (!locElement)
@@ -22,7 +41,7 @@ const Q2DropdownItem = class {
         };
         this.onItemClick = (event) => {
             event.stopImmediatePropagation();
-            this.click.emit({
+            mirrorEmit(this, ['click', 'tctClick'], {
                 type: 'select',
                 value: this.value || '',
             });
@@ -36,7 +55,7 @@ const Q2DropdownItem = class {
         };
         this.onRemoveBtnClick = (event) => {
             event.stopImmediatePropagation();
-            this.click.emit({
+            mirrorEmit(this, ['click', 'tctClick'], {
                 type: 'remove',
                 value: this.value || '',
             });

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

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

package/dist/cjs/q2-option-list_2.cjs.entry.js CHANGED Viewed

@@ -134,24 +134,26 @@ const Q2OptionList = class {
                         this.searchOptions(key, false);
                         break;
                     }
-                    event.preventDefault();
                     newOption = allOptions.find(element => element.active);
                     if (!newOption || newOption.disabled)
                         break;
                     this.selectOption(newOption);
                     if (multiple)
                         break;
-                    this.popoverState.emit({ open: false, action: 'select' });
+                    this.hostElement.addEventListener('tctClick', () => {
+                        this.popoverState.emit({ open: false, action: 'select' });
+                    }, { once: true });
                     break;
                 case 'Enter':
-                    event.preventDefault();
                     newOption = allOptions.find(element => element.active);
                     if (!newOption || newOption.disabled)
                         break;
                     this.selectOption(newOption);
                     if (multiple)
                         break;
-                    this.popoverState.emit({ open: false, action: 'select' });
+                    this.hostElement.addEventListener('tctClick', () => {
+                        this.popoverState.emit({ open: false, action: 'select' });
+                    }, { once: true });
                     break;
                 case 'ArrowUp':
                     event.preventDefault();
@@ -575,7 +577,7 @@ const Q2OptionList = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h(index.Host, { key: '16e12e08dcd1d6514aa59ad8dd20dbf33d352bbe' }, index.h("div", { key: 'b0eb152206ccb8b93e98d11c32894cb136ffc9a9', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { key: 'bccbd0eb8bc8fc92db4629be02ab23e050e32fe9', class: "options", "aria-label": index$1.loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, index.h("slot", { key: '9b5a130d4d0a1a5f594b47669607febf39c0ea87' })))));
+        return (index.h(index.Host, { key: '5708785bddc01b545a3b2a94417ad415c6cba32e' }, index.h("div", { key: 'e6f36e235609824dae19e93edc14d8f8504eb860', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { key: 'cbdf42235da01a1fc10efcc0798edeb653fe26ae', class: "options", "aria-label": index$1.loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, index.h("slot", { key: 'cec72b3912c96f09a12c171e4227efd29a9097c9' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {