npm - q2-tecton-elements - Versions diffs - 1.67.2 → 1.68.0 - Mend

q2-tecton-elements 1.67.2 → 1.68.0

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

Files changed (807) hide show

package/dist/esm/q2-detail.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-detail.entry.js","sources":["src/components/q2-detail/q2-detail.scss?tag=q2-detail&encapsulation=shadow","src/components/q2-detail/q2-detail.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n::slotted([slot]) {\n display: flex;\n align-items: center;\n --tct-icon-size: var(--tct-detail-label-icon-size, 16px);\n}\n\n.detail {\n column-gap: var-list(--tct-detail-gap-column, --app-scale-1x, 5px);\n row-gap: var-list(--tct-detail-gap-row, 0px);\n\n &-block {\n display: flex;\n width: 100%;\n }\n\n &-inline {\n display: flex;\n }\n\n &-horizontal {\n align-items: var(--tct-detail-vertical-alignment, baseline);\n flex-direction: row;\n }\n\n &-stacked {\n flex-direction: column;\n\n &-alignment-left {\n align-items: flex-start;\n }\n\n &-alignment-right {\n align-items: flex-end;\n }\n\n &-alignment-center {\n align-items: center;\n }\n }\n}\n\n.label {\n flex: 1;\n text-align: left;\n line-height: 1.5;\n color: var(--tct-detail-label-font-color, #141430);\n\n &-size {\n &-xsmall {\n color: var(--tct-detail-label-xsmall-font-color, #6f6f82);\n font-size: var(--tct-detail-label-xsmall-font-size, 14px);\n font-weight: var(--tct-detail-label-xsmall-font-weight, 400);\n }\n &-small {\n color: var(--tct-detail-label-small-font-color);\n font-size: var(--tct-detail-label-small-font-size, 14px);\n font-weight: var(--tct-detail-label-small-font-weight, 400);\n }\n &-medium {\n color: var(--tct-detail-label-medium-font-color);\n font-size: var(--tct-detail-label-medium-font-size, 14px);\n font-weight: var(--tct-detail-label-medium-font-weight, 400);\n }\n &-large {\n color: var(--tct-detail-label-large-font-color);\n font-size: var(--tct-detail-label-large-font-size, 16px);\n font-weight: var(--tct-detail-label-large-font-weight, 400);\n }\n &-xlarge {\n color: var(--tct-detail-label-xlarge-font-color);\n font-size: var(--tct-detail-label-xlarge-font-size, 18px);\n font-weight: var(--tct-detail-label-xlarge-font-weight, 400);\n }\n &-inline {\n font-size: var(--tct-detail-label-inline-font-size, 1em);\n font-weight: var(--tct-detail-label-inline-font-weight, 400);\n color: inherit;\n }\n }\n}\n\n.description {\n flex: 1;\n display: flex;\n align-items: center;\n line-height: 1.5;\n color: var(--tct-detail-description-font-color, #141430);\n column-gap: var-list(--tct-detail-description-gap-column, --app-scale-1x, 5px);\n\n &-alignment-right {\n justify-content: flex-end;\n }\n\n &-size {\n &-xsmall {\n color: var(--tct-detail-description-xsmall-font-color, #6f6f82);\n font-size: var(--tct-detail-description-xsmall-font-size, 14px);\n font-weight: var(--tct-detail-description-xsmall-font-weight, 400);\n }\n &-small {\n color: var(--tct-detail-description-small-font-color);\n font-size: var(--tct-detail-description-small-font-size, 14px);\n font-weight: var(--tct-detail-description-small-font-weight, 400);\n }\n &-medium {\n color: var(--tct-detail-description-medium-font-color);\n font-size: var(--tct-detail-description-medium-font-size, 24px);\n font-weight: var(--tct-detail-description-medium-font-weight, 600);\n }\n &-large {\n color: var(--tct-detail-description-large-font-color);\n font-size: var(--tct-detail-description-large-font-size, 28px);\n font-weight: var(--tct-detail-description-large-font-weight, 600);\n }\n &-xlarge {\n color: var(--tct-detail-description-xlarge-font-color);\n font-size: var(--tct-detail-description-xlarge-font-size, 32px);\n font-weight: var(--tct-detail-description-xlarge-font-weight, 700);\n }\n &-inline {\n font-size: var(--tct-detail-description-inline-font-size, 1em);\n color: inherit;\n }\n }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\n/*\n @name Detail\n * @category Display\n * @summary Use for displaying label-value pairs like account details or miscellaneous info.\n * @slot label - An optional slot to display a custom label.\n /\n@Component({\n tag: 'q2-detail',\n styleUrl: 'q2-detail.scss',\n shadow: true,\n})\nexport class Q2Detail {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Defines the alignment of the label and description when stacked, or when only the label or description is present. /\n @Prop({ reflect: true })\n alignment: 'left' \| 'right' \| 'center' = 'left';\n\n /\n Defines the text content of the description.\n \n @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n Defines the text content of the label.\n \n @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Defines the text size of the label and description.\n \n If not specified, the detail will display as inline text.\n /\n @Prop({ reflect: true })\n size: null \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge';\n\n /* Determines if the description should appear beneath the label. /\n @Prop({ reflect: true })\n stacked: boolean = false;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.setSlotSizeProps();\n }\n\n // #endregion\n // #region Local Methods\n\n get descriptionClasses() {\n const classes = ['description'];\n if (this.size) {\n classes.push(`description-size-${this.size}`);\n } else {\n classes.push(`description-size-inline`);\n }\n if (!this.stacked) {\n classes.push(`description-alignment-right`);\n }\n\n return classes.join(' ');\n }\n\n get detailClasses() {\n const classes = ['detail'];\n if (this.size) {\n classes.push(`detail-block`);\n } else {\n classes.push(`detail-inline`);\n }\n if (this.stacked \|\| this.onlyHasDescripiton \|\| this.onlyHasLabel) {\n classes.push('detail-stacked', `detail-stacked-alignment-${this.alignment}`);\n } else {\n classes.push('detail-horizontal');\n }\n\n return classes.join(' ');\n }\n\n get hasDefaultSlotContent() {\n const hasInnerHtml = !!this.hostElement.innerHTML.trim();\n const namedSlotCount = this.hostElement.querySelectorAll(':scope > [slot]').length;\n const hostChildNodeCount = this.hostElement.childNodes.length;\n\n return hasInnerHtml && hostChildNodeCount > namedSlotCount;\n }\n\n get hasDescripiton() {\n return !!this.description \|\| this.hasDefaultSlotContent;\n }\n\n get hasLabel() {\n return !!this.label \|\| this.hasLabelSlotContent;\n }\n\n get hasLabelSlotContent() {\n return hasSlotContent(this.hostElement, 'label');\n }\n\n get labelClasses() {\n const classes = ['label'];\n if (this.size) {\n classes.push(`label-size-${this.size}`);\n } else {\n classes.push(`label-size-inline`);\n }\n if (!this.stacked) {\n classes.push(`label-align-left`);\n }\n\n return classes.join(' ');\n }\n\n get onlyHasDescripiton() {\n return this.hasDescripiton && !this.hasLabel;\n }\n\n get onlyHasLabel() {\n return this.hasLabel && !this.hasDescripiton;\n }\n\n setSlotSizeProps() {\n const slotElements = Array.from(\n this.hostElement.querySelectorAll(':scope > :not([slot]), :scope > [slot=\"label\"] > *')\n ) as { slotSize?: string; localName?: string }[];\n slotElements.forEach(element => {\n let size = this.size;\n if (element.localName === 'q2-currency') {\n switch (size) {\n case 'xsmall':\n size = 'small';\n break;\n case 'xlarge':\n size = 'large';\n break;\n default:\n break;\n }\n }\n element.slotSize = size;\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class={this.detailClasses}>\n {this.hasLabel && (\n <div\n class={this.labelClasses}\n aria-describedby={!!this.description ? 'label-description' : undefined}\n >\n {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n </div>\n )}\n {this.hasDescripiton && (\n <div\n id=\"label-description\"\n class={this.descriptionClasses}\n >\n {!!this.description ? loc(this.description) : this.hasDefaultSlotContent ? <slot /> : ''}\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-detail.entry.js","sources":["src/components/q2-detail/q2-detail.scss?tag=q2-detail&encapsulation=shadow","src/components/q2-detail/q2-detail.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: block;\n}\n\n::slotted([slot]) {\n display: flex;\n align-items: center;\n --tct-icon-size: var(--tct-detail-label-icon-size, 16px);\n}\n\n.detail {\n column-gap: var-list(--tct-detail-gap-column, --app-scale-1x, 5px);\n row-gap: var-list(--tct-detail-gap-row, 0px);\n\n &-block {\n display: flex;\n width: 100%;\n }\n\n &-inline {\n display: flex;\n }\n\n &-horizontal {\n align-items: var(--tct-detail-vertical-alignment, baseline);\n flex-direction: row;\n }\n\n &-stacked {\n flex-direction: column;\n\n &-alignment-left {\n align-items: flex-start;\n }\n\n &-alignment-right {\n align-items: flex-end;\n }\n\n &-alignment-center {\n align-items: center;\n }\n }\n}\n\n.label {\n flex: 1;\n text-align: left;\n line-height: 1.5;\n color: var(--tct-detail-label-font-color, #141430);\n\n &-size {\n &-xsmall {\n color: var(--tct-detail-label-xsmall-font-color, #6f6f82);\n font-size: var(--tct-detail-label-xsmall-font-size, 14px);\n font-weight: var(--tct-detail-label-xsmall-font-weight, 400);\n }\n &-small {\n color: var(--tct-detail-label-small-font-color);\n font-size: var(--tct-detail-label-small-font-size, 14px);\n font-weight: var(--tct-detail-label-small-font-weight, 400);\n }\n &-medium {\n color: var(--tct-detail-label-medium-font-color);\n font-size: var(--tct-detail-label-medium-font-size, 14px);\n font-weight: var(--tct-detail-label-medium-font-weight, 400);\n }\n &-large {\n color: var(--tct-detail-label-large-font-color);\n font-size: var(--tct-detail-label-large-font-size, 16px);\n font-weight: var(--tct-detail-label-large-font-weight, 400);\n }\n &-xlarge {\n color: var(--tct-detail-label-xlarge-font-color);\n font-size: var(--tct-detail-label-xlarge-font-size, 18px);\n font-weight: var(--tct-detail-label-xlarge-font-weight, 400);\n }\n &-inline {\n font-size: var(--tct-detail-label-inline-font-size, 1em);\n font-weight: var(--tct-detail-label-inline-font-weight, 400);\n color: inherit;\n }\n }\n}\n\n.description {\n flex: 1;\n display: flex;\n align-items: center;\n line-height: 1.5;\n color: var(--tct-detail-description-font-color, #141430);\n column-gap: var-list(--tct-detail-description-gap-column, --app-scale-1x, 5px);\n\n &-alignment-right {\n justify-content: flex-end;\n }\n\n &-size {\n &-xsmall {\n color: var(--tct-detail-description-xsmall-font-color, #6f6f82);\n font-size: var(--tct-detail-description-xsmall-font-size, 14px);\n font-weight: var(--tct-detail-description-xsmall-font-weight, 400);\n }\n &-small {\n color: var(--tct-detail-description-small-font-color);\n font-size: var(--tct-detail-description-small-font-size, 14px);\n font-weight: var(--tct-detail-description-small-font-weight, 400);\n }\n &-medium {\n color: var(--tct-detail-description-medium-font-color);\n font-size: var(--tct-detail-description-medium-font-size, 24px);\n font-weight: var(--tct-detail-description-medium-font-weight, 600);\n }\n &-large {\n color: var(--tct-detail-description-large-font-color);\n font-size: var(--tct-detail-description-large-font-size, 28px);\n font-weight: var(--tct-detail-description-large-font-weight, 600);\n }\n &-xlarge {\n color: var(--tct-detail-description-xlarge-font-color);\n font-size: var(--tct-detail-description-xlarge-font-size, 32px);\n font-weight: var(--tct-detail-description-xlarge-font-weight, 700);\n }\n &-inline {\n font-size: var(--tct-detail-description-inline-font-size, 1em);\n color: inherit;\n }\n }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\n/*\n @name Detail\n * @category Display\n * @summary Use for displaying label-value pairs like account details or miscellaneous info.\n * @slot label - An optional slot to display a custom label.\n /\n@Component({\n tag: 'q2-detail',\n styleUrl: 'q2-detail.scss',\n shadow: true,\n})\nexport class Q2Detail {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Defines the alignment of the label and description when stacked, or when only the label or description is present. /\n @Prop({ reflect: true })\n alignment: 'left' \| 'right' \| 'center' = 'left';\n\n /\n Defines the text content of the description.\n \n @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n Defines the text content of the label.\n \n @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Defines the text size of the label and description.\n \n If not specified, the detail will display as inline text.\n /\n @Prop({ reflect: true })\n size: null \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge';\n\n /* Determines if the description should appear beneath the label. /\n @Prop({ reflect: true })\n stacked: boolean = false;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.setSlotSizeProps();\n }\n\n // #endregion\n // #region Local Methods\n\n get descriptionClasses() {\n const classes = ['description'];\n if (this.size) {\n classes.push(`description-size-${this.size}`);\n } else {\n classes.push(`description-size-inline`);\n }\n if (!this.stacked) {\n classes.push(`description-alignment-right`);\n }\n\n return classes.join(' ');\n }\n\n get detailClasses() {\n const classes = ['detail'];\n if (this.size) {\n classes.push(`detail-block`);\n } else {\n classes.push(`detail-inline`);\n }\n if (this.stacked \|\| this.onlyHasDescripiton \|\| this.onlyHasLabel) {\n classes.push('detail-stacked', `detail-stacked-alignment-${this.alignment}`);\n } else {\n classes.push('detail-horizontal');\n }\n\n return classes.join(' ');\n }\n\n get hasDefaultSlotContent() {\n const hasInnerHtml = !!this.hostElement.innerHTML.trim();\n const namedSlotCount = this.hostElement.querySelectorAll(':scope > [slot]').length;\n const hostChildNodeCount = this.hostElement.childNodes.length;\n\n return hasInnerHtml && hostChildNodeCount > namedSlotCount;\n }\n\n get hasDescripiton() {\n return !!this.description \|\| this.hasDefaultSlotContent;\n }\n\n get hasLabel() {\n return !!this.label \|\| this.hasLabelSlotContent;\n }\n\n get hasLabelSlotContent() {\n return hasSlotContent(this.hostElement, 'label');\n }\n\n get labelClasses() {\n const classes = ['label'];\n if (this.size) {\n classes.push(`label-size-${this.size}`);\n } else {\n classes.push(`label-size-inline`);\n }\n if (!this.stacked) {\n classes.push(`label-align-left`);\n }\n\n return classes.join(' ');\n }\n\n get onlyHasDescripiton() {\n return this.hasDescripiton && !this.hasLabel;\n }\n\n get onlyHasLabel() {\n return this.hasLabel && !this.hasDescripiton;\n }\n\n setSlotSizeProps() {\n const slotElements = Array.from(\n this.hostElement.querySelectorAll(':scope > :not([slot]), :scope > [slot=\"label\"] > *')\n ) as { slotSize?: string; localName?: string }[];\n slotElements.forEach(element => {\n let size = this.size;\n if (element.localName === 'q2-currency') {\n switch (size) {\n case 'xsmall':\n size = 'small';\n break;\n case 'xlarge':\n size = 'large';\n break;\n default:\n break;\n }\n }\n element.slotSize = size;\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class={this.detailClasses}>\n {this.hasLabel && (\n <div\n class={this.labelClasses}\n aria-describedby={!!this.description ? 'label-description' : undefined}\n >\n {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n </div>\n )}\n {this.hasDescripiton && (\n <div\n id=\"label-description\"\n class={this.descriptionClasses}\n >\n {!!this.description ? loc(this.description) : this.hasDefaultSlotContent ? <slot /> : ''}\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-CGkHOjh1.js';
-import { l as loc, d as handleAriaLabel, o as overrideFocus } from './index-C4PILj1_.js';
+import { l as loc, d as handleAriaLabel, o as overrideFocus } from './index-C5gj0T_3.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
-import { b as hasValidAncestor } from './component-DVxzK3WH.js';
+import { b as hasValidAncestor } from './component-DaQM9u3s.js';
 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));font-size:var(--tct-dropdown-item-font-size, 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)))}";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-dropdown-item.entry.js","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 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 font-size: var(--tct-dropdown-item-font-size, 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';\nimport { hasValidAncestor } from '@/utils/component';\n\n/*\n @name Dropdown Item\n * @category Display\n * @summary Use as a single action item within a Dropdown menu.\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 hasValidAncestor(this.hostElement, 'q2-dropdown');\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({ preventScroll: true });\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 role=\"menuitem\"\n onClick={this.onRemoveBtnClick}\n onKeyDown={this.onRemoveBtnKeydown}\n onFocus={this.onRemoveBtnFocus}\n test-id=\"removeDropdownItem\"\n >\n <q2-icon type=\"close\" />\n </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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"}
1	+ {"version":3,"file":"q2-dropdown-item.entry.js","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@import './variables';\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 font-size: var(--tct-dropdown-item-font-size, 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';\nimport { hasValidAncestor } from '@/utils/component';\n\n/*\n @name Dropdown Item\n * @category Display\n * @summary Use as a single action item within a Dropdown menu.\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 hasValidAncestor(this.hostElement, 'q2-dropdown');\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({ preventScroll: true });\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 role=\"menuitem\"\n onClick={this.onRemoveBtnClick}\n onKeyDown={this.onRemoveBtnKeydown}\n onFocus={this.onRemoveBtnFocus}\n test-id=\"removeDropdownItem\"\n >\n <q2-icon type=\"close\" />\n </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/esm/q2-dropdown.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment, g as getElement } from './index-CGkHOjh1.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-B7adb3xs.js';
-import { o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, b as handleRenamedProp, d as handleAriaLabel, l as loc } from './index-C4PILj1_.js';
+import { o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, b as handleRenamedProp, d as handleAriaLabel, l as loc } from './index-C5gj0T_3.js';
 const q2DropdownCss = "*{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}:host{display:inline-flex}:host([block]){display:block}:host([full-width]:not([full-width=false])){display:inline-flex;justify-content:center;width:100%}::slotted([slot=popover-top]){padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}::slotted([slot=popover-bottom]){padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width));--tct-popover-padding:var(--tct-dropdown-content-padding)}";
@@ -111,10 +111,8 @@ const Q2Dropdown = class {
         var _a;
         if (this.open !== open)
             this.open = open;
-        if (open) {
+        if (!open) {
             (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.scrollContainerTo({ top: 0 });
-        }
-        else {
             this.optionList.setActiveElement(null);
         }
     }
@@ -362,7 +360,7 @@ const Q2Dropdown = class {
     // #region Render Methods
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: 'b6e82a77840792da2ab918048abf38578ec4ccb3', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '5c26f1d198bd92ba61ac51080a3f8e2769d07b01', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: '4db48630a62011863293587a76a17448a503df9d', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: '20cf54aca49692025c64ca230433366e14a242df', name: "popover-top" }), h("q2-option-list", { key: 'f2f8b61de7682fda8b18ddee17995fbbe1529ff7', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '380049eda306cad1283f509977cfc32924f86d22' })), h("slot", { key: 'bc02de04e8e0ca08205425ced651183535a80c78', name: "popover-bottom" }))));
+        return (h("click-elsewhere", { key: '126229197fe6e46bdb7996e231cf8ea56247cd6b', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '09085fa1729f9ac7d6afa69ae30a5078f10f290a', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: 'b96c783d7dcbb38ee5679ae3b1e1fde489d45cb3', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: 'd769d709d0634cf62123caed5565c82a81327d50', name: "popover-top" }), h("q2-option-list", { key: 'ba46fe90836fd6ffcb4d1611c490073f77060ce0', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'ed9f811ef752a082c6c82d6bff7fbd71e88bfb2c' })), h("slot", { key: '7bb093af52b5f779f43485f219586d7a5e1353c8', name: "popover-bottom" }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-dropdown.entry.js","sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-flex;\n}\n\n:host([block]) {\n display: block;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n display: inline-flex;\n justify-content: center;\n width: 100%;\n}\n\n::slotted([slot=\"popover-top\"]) {\n padding: var-list(--tct-dropdown-popover-top-slot-padding, 0);\n border-bottom: var-list(--tct-dropdown-slot-border-top);\n}\n\n::slotted([slot=\"popover-bottom\"]) {\n padding: var-list(--tct-dropdown-popover-bottom-slot-padding, 0);\n border-top: var-list(--tct-dropdown-slot-border-bottom);\n}\n\nq2-icon {\n pointer-events: none;\n margin-block: -100px;\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n\nq2-popover {\n --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n --tct-popover-padding: #{var-list(--tct-dropdown-content-padding)};\n}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n/*\n @name Dropdown\n * @category Display\n * @summary Use for menus of contextual actions triggered by a button click.\n * @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown must have `type=\"custom\"` to use the control slot.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the q2-dropdown.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the q2-dropdown.\n /\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n // #region Own Properties\n\n controlElement?: HTMLQ2BtnElement;\n dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n optionList: HTMLQ2OptionListElement;\n optionSelector: string = 'q2-option:not([disabled]):not([separator])';\n popoverElement?: HTMLQ2PopoverElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n @Prop({ reflect: true })\n additionalContext: string;\n\n /* @deprecated /\n @Prop({ reflect: true })\n alignment: 'left' \| 'right';\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* If `true`, component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /\n Tells the outlet what the type of object being passed in as contextValue.\n * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n \n @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n context: string;\n\n /\n Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n \n @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n contextValue: string;\n\n /* Indicates the menu cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* If `true`, it takes up 100% width. /\n @Prop({ reflect: true })\n fullWidth: boolean;\n\n /\n Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Instructs the component to use the action sheet workflow for displaying its options.\n \n For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n /\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\n\n /* The icon that will render within the toggle button. You may use any of the `q2-icon` types. /\n @Prop({ reflect: true })\n icon: string;\n\n /\n The text that appears within the button.\n * @warning\n * This property should not be used if the `type` is `icon`.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n name: string;\n\n /\n Determine whether the popover is open or closed.\n \n @readonly\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /* Determines the label that is applied to the option list for accessibility purposes. /\n @Prop()\n optionListLabel: string;\n\n /* @deprecated /\n @Prop({ reflect: true })\n popDirection: 'up' \| 'down';\n\n /* Aligns the popover dropdown to the left or right side of the input field. /\n @Prop({ mutable: true })\n popoverAlignment: 'left' \| 'right' = 'left'; // being used in dropdown.scss\n\n /\n Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n /\n @Prop({ mutable: true })\n popoverDirection: 'up' \| 'down';\n\n /\n Force the maximum height of the popover. This value will be interpreted as pixels.\n * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n /\n @Prop()\n popoverMaxHeight: number;\n\n /* @deprecated /\n @Prop()\n popoverMinHeight: number;\n\n /\n Determines the display mode of the popover.\n \n Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n \n @info\n * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n * when nested inside of elements with transform properties. This will be removed once the popover API is available\n * for use.\n /\n @Prop({ mutable: true })\n popoverMode: 'legacy' = null;\n\n /\n Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n resolvedType: string;\n\n /* The type of button used as the menu toggle.\n * @info\n * Type must be \"custom\" to use the custom button slot.\n /\n @Prop({ reflect: true })\n type: 'icon' \| 'fab' \| 'custom' \| 'primary' \| 'secondary' \| 'neutral' = 'icon';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this._alignOptionStructure();\n this.popDirectionHandler();\n this.alignmentHandler();\n this.ariaLabelHandler();\n }\n\n componentDidLoad() {\n this.orchestrateResolvedMenuItems();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusToggle();\n }\n\n @Listen('popoverStateChanged')\n popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) {\n this.popoverElement?.scrollContainerTo({ top: 0 });\n } else {\n this.optionList.setActiveElement(null);\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Gets the outerHTML for top/bottom slotted elements.\n /\n @Method()\n async _getSlotsHtml() {\n return [\n ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-top']`)).map(slot => ({\n slot: 'top',\n html: slot.outerHTML,\n })),\n ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-bottom']`)).map(slot => ({\n slot: 'bottom',\n html: slot.outerHTML,\n })),\n ];\n }\n\n /\n Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n * @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n * @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates opening the dropdown and selecting a\n * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/) or\n * [Option](https://tecton.q2developer.com/design-system/q2-option/).\n \n If the dropdown is closed, this will open it before selecting the item.\n \n If the value does not match any item's value, or the dropdown is disabled, this method does nothing.\n * @testOnly\n /\n @Method()\n async selectItem(value: string) {\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n const target = item ? itemBtn : option;\n if (!target \|\| this.disabled) return;\n if (!this.open) {\n this.controlElement?.click();\n await waitForNextPaint();\n }\n target.click();\n await waitForNextPaint();\n }\n\n /\n Emulates opening the dropdown and selecting a\n * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s remove button.\n \n This method only applies to the deprecated `q2-dropdown-item` element, since\n * `q2-option` (its replacement) does not support the `removable` attribute.\n \n If the dropdown is closed, this will open it before selecting the remove item button.\n \n If the dropdown is disabled, this method does nothing.\n \n Requirements for this method to work properly:\n * - Provided `value` matches the item's `value` property\n * - Item has the `removable` property enabled\n * @testOnly\n */\n @Method()\n async selectRemoveItem(value: string) {\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n if (!item \|\| !removeButton \|\| this.disabled) return;\n if (!this.open) {\n this.controlElement?.click();\n await waitForNextPaint();\n }\n removeButton.click();\n await waitForNextPaint();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('additionalContext')\n additionalContextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('alignment')\n alignmentHandler() {\n handleRenamedProp(this, 'alignment', 'popoverAlignment');\n }\n\n @Watch('ariaLabel')\n ariaLabelHandler() {\n handleAriaLabel(this);\n }\n\n @Watch('context')\n contextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('contextValue')\n contextValueHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('name')\n nameHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('popDirection')\n popDirectionHandler() {\n handleRenamedProp(this, 'popDirection', 'popoverDirection');\n }\n\n @Watch('resolvedType')\n resolvedTypeHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n // #endregion\n // #region Local Methods\n\n get determineDropdownItemCount() {\n return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n }\n\n get hasCustomControl() {\n return !!this.hostElement.querySelector('[slot=control]');\n }\n\n get toggleButtonProps() {\n const allowedIntents = ['primary', 'secondary', 'neutral'];\n const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n const type = allowedTypes.includes(this.type) ? this.type : '';\n const icon = type === 'icon';\n const fab = type === 'fab';\n const custom = type === 'custom';\n let intent;\n if (allowedIntents.includes(type)) {\n intent = type === 'neutral' ? type : `workflow-${type}`;\n }\n const active = this.open;\n const disabled = !!this.disabled;\n const ariaExpanded = this.open;\n const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n return {\n icon,\n fab,\n intent,\n active,\n disabled,\n ariaExpanded,\n className,\n custom,\n };\n }\n\n _alignOptionStructure(elem: Element = this.hostElement) {\n Array.from(elem.children).forEach(el => {\n if (el.tagName === 'Q2-OPTION') {\n el.setAttribute('_hide-selected-block', '');\n } else if (el.tagName === 'Q2-OPTGROUP') {\n this._alignOptionStructure(el);\n }\n });\n }\n\n _clickItem(value: string) {\n if (!value \|\| this.disabled) return;\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n option?.click();\n }\n\n async _handleActionSheet(event: MouseEvent \| KeyboardEvent) {\n const { value } = await showActionSheetList(this, event);\n this._clickItem(value);\n this.controlElement.focus();\n }\n\n _togglePopover() {\n const { controlElement } = this;\n if (!controlElement) return;\n controlElement.click();\n controlElement.focus();\n controlElement.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusToggle = () => {\n this.controlElement.focus();\n };\n\n handleFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (this.popoverElement?.contains(relatedTarget)) return;\n if (this.hostElement.contains(relatedTarget)) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLElement;\n if (target.localName === 'q2-option-list') {\n event.stopPropagation();\n }\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n if (event.detail.open) return;\n this.controlElement.focus();\n };\n\n onToggleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this)) {\n this._handleActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n };\n\n onToggleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (isTabMetaOrCtrl) return;\n\n event.preventDefault();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this, event)) {\n this._handleActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n orchestrateResolvedMenuItems() {\n if (!this.name \|\| !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n resolveMenu() {\n return (\n this.name &&\n window.TectonElements &&\n window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n );\n }\n\n resolveMenuItemElements() {\n return this.resolveMenu().then(datas => {\n return datas.map(menuItemData => {\n let onClickFn;\n let queryParams;\n if (menuItemData['tct-ctxid']) {\n queryParams = {};\n queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n }\n\n switch (menuItemData.action) {\n case 'navigateTo':\n onClickFn = function () {\n return window.TectonElements?.navigateTo?.(\n menuItemData.featureName,\n menuItemData.moduleName,\n queryParams\n );\n };\n break;\n case 'showOverpanel':\n onClickFn = function () {\n return window.TectonElements?.showOverpanel?.(\n `${menuItemData.featureName}.${menuItemData.moduleName}`,\n queryParams,\n undefined,\n true\n );\n };\n break;\n }\n\n const newDropdownItem = document.createElement('q2-dropdown-item');\n newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n newDropdownItem.classList.add('resolved-menu-item');\n newDropdownItem.textContent = menuItemData.itemLabel;\n newDropdownItem.onclick = onClickFn;\n\n return newDropdownItem;\n });\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const btnProps = this.toggleButtonProps;\n return (\n <click-elsewhere\n class={this.open ? 'dropdown-open' : ''}\n onChange={this.onClickElsewhere}\n test-id=\"dropdownContainer\"\n >\n <q2-btn\n tabIndex={0}\n ref={el => (this.controlElement = el)}\n class={btnProps.className}\n onClick={this.onToggleClick}\n onKeyDown={this.onToggleKeydown}\n fab={btnProps.fab}\n intent={btnProps.intent}\n onFocusout={this.handleFocusOut}\n active={btnProps.active}\n disabled={btnProps.disabled}\n ariaExpanded={`${!!btnProps.ariaExpanded}`}\n label={this.hideLabel && this.label ? loc(this.label) : undefined}\n hideLabel={this.hideLabel}\n ariaHasPopup=\"menu\"\n test-id=\"dropdownButton\"\n block={this.block}\n description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n >\n {this.hasCustomControl ? (\n <div\n test-id=\"dropdownControl\"\n class={btnProps.custom ? '' : 'hidden'}\n >\n <slot name=\"control\" />\n </div>\n ) : (\n <Fragment>\n {this.label && !this.hideLabel && (\n <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n )}\n {this.icon ? <q2-icon type={this.icon} /> : ' '}\n </Fragment>\n )}\n </q2-btn>\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.controlElement}\n open={this.open}\n max-height={this.popoverMaxHeight}\n onFocusout={this.handleFocusOut}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode \|\| undefined}\n block={this.block}\n >\n <slot name=\"popover-top\" />\n <q2-option-list\n onPopoverState={this.onPopoverState}\n id=\"option-list\"\n ref={el => (this.optionList = el)}\n type=\"menu\"\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n no-select\n >\n <slot />\n </q2-option-list>\n <slot name=\"popover-bottom\" />\n </q2-popover>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-dropdown.entry.js","sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: inline-flex;\n}\n\n:host([block]) {\n display: block;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n display: inline-flex;\n justify-content: center;\n width: 100%;\n}\n\n::slotted([slot=\"popover-top\"]) {\n padding: var-list(--tct-dropdown-popover-top-slot-padding, 0);\n border-bottom: var-list(--tct-dropdown-slot-border-top);\n}\n\n::slotted([slot=\"popover-bottom\"]) {\n padding: var-list(--tct-dropdown-popover-bottom-slot-padding, 0);\n border-top: var-list(--tct-dropdown-slot-border-bottom);\n}\n\nq2-icon {\n pointer-events: none;\n margin-block: -100px;\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n\nq2-popover {\n --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n --tct-popover-padding: #{var-list(--tct-dropdown-content-padding)};\n}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n/*\n @name Dropdown\n * @category Display\n * @summary Use for menus of contextual actions triggered by a button click.\n * @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown must have `type=\"custom\"` to use the control slot.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the q2-dropdown.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the q2-dropdown.\n /\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n // #region Own Properties\n\n controlElement?: HTMLQ2BtnElement;\n dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n optionList: HTMLQ2OptionListElement;\n optionSelector: string = 'q2-option:not([disabled]):not([separator])';\n popoverElement?: HTMLQ2PopoverElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n @Prop({ reflect: true })\n additionalContext: string;\n\n /* @deprecated /\n @Prop({ reflect: true })\n alignment: 'left' \| 'right';\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* If `true`, component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /\n Tells the outlet what the type of object being passed in as contextValue.\n * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n \n @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n context: string;\n\n /\n Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n \n @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n contextValue: string;\n\n /* Indicates the menu cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* If `true`, it takes up 100% width. /\n @Prop({ reflect: true })\n fullWidth: boolean;\n\n /\n Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Instructs the component to use the action sheet workflow for displaying its options.\n \n For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n /\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\n\n /* The icon that will render within the toggle button. You may use any of the `q2-icon` types. /\n @Prop({ reflect: true })\n icon: string;\n\n /\n The text that appears within the button.\n * @warning\n * This property should not be used if the `type` is `icon`.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n name: string;\n\n /\n Determine whether the popover is open or closed.\n \n @readonly\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /* Determines the label that is applied to the option list for accessibility purposes. /\n @Prop()\n optionListLabel: string;\n\n /* @deprecated /\n @Prop({ reflect: true })\n popDirection: 'up' \| 'down';\n\n /* Aligns the popover dropdown to the left or right side of the input field. /\n @Prop({ mutable: true })\n popoverAlignment: 'left' \| 'right' = 'left'; // being used in dropdown.scss\n\n /\n Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n /\n @Prop({ mutable: true })\n popoverDirection: 'up' \| 'down';\n\n /\n Force the maximum height of the popover. This value will be interpreted as pixels.\n * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n /\n @Prop()\n popoverMaxHeight: number;\n\n /* @deprecated /\n @Prop()\n popoverMinHeight: number;\n\n /\n Determines the display mode of the popover.\n \n Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n \n @info\n * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n * when nested inside of elements with transform properties. This will be removed once the popover API is available\n * for use.\n /\n @Prop({ mutable: true })\n popoverMode: 'legacy' = null;\n\n /\n Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n /\n @Prop({ reflect: true })\n resolvedType: string;\n\n /* The type of button used as the menu toggle.\n * @info\n * Type must be \"custom\" to use the custom button slot.\n /\n @Prop({ reflect: true })\n type: 'icon' \| 'fab' \| 'custom' \| 'primary' \| 'secondary' \| 'neutral' = 'icon';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this._alignOptionStructure();\n this.popDirectionHandler();\n this.alignmentHandler();\n this.ariaLabelHandler();\n }\n\n componentDidLoad() {\n this.orchestrateResolvedMenuItems();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusToggle();\n }\n\n @Listen('popoverStateChanged')\n popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (!open) {\n this.popoverElement?.scrollContainerTo({ top: 0 });\n this.optionList.setActiveElement(null);\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Gets the outerHTML for top/bottom slotted elements.\n /\n @Method()\n async _getSlotsHtml() {\n return [\n ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-top']`)).map(slot => ({\n slot: 'top',\n html: slot.outerHTML,\n })),\n ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-bottom']`)).map(slot => ({\n slot: 'bottom',\n html: slot.outerHTML,\n })),\n ];\n }\n\n /\n Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n * @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n * @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates opening the dropdown and selecting a\n * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/) or\n * [Option](https://tecton.q2developer.com/design-system/q2-option/).\n \n If the dropdown is closed, this will open it before selecting the item.\n \n If the value does not match any item's value, or the dropdown is disabled, this method does nothing.\n * @testOnly\n /\n @Method()\n async selectItem(value: string) {\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n const target = item ? itemBtn : option;\n if (!target \|\| this.disabled) return;\n if (!this.open) {\n this.controlElement?.click();\n await waitForNextPaint();\n }\n target.click();\n await waitForNextPaint();\n }\n\n /\n Emulates opening the dropdown and selecting a\n * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s remove button.\n \n This method only applies to the deprecated `q2-dropdown-item` element, since\n * `q2-option` (its replacement) does not support the `removable` attribute.\n \n If the dropdown is closed, this will open it before selecting the remove item button.\n \n If the dropdown is disabled, this method does nothing.\n \n Requirements for this method to work properly:\n * - Provided `value` matches the item's `value` property\n * - Item has the `removable` property enabled\n * @testOnly\n */\n @Method()\n async selectRemoveItem(value: string) {\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n if (!item \|\| !removeButton \|\| this.disabled) return;\n if (!this.open) {\n this.controlElement?.click();\n await waitForNextPaint();\n }\n removeButton.click();\n await waitForNextPaint();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('additionalContext')\n additionalContextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('alignment')\n alignmentHandler() {\n handleRenamedProp(this, 'alignment', 'popoverAlignment');\n }\n\n @Watch('ariaLabel')\n ariaLabelHandler() {\n handleAriaLabel(this);\n }\n\n @Watch('context')\n contextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('contextValue')\n contextValueHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('name')\n nameHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('popDirection')\n popDirectionHandler() {\n handleRenamedProp(this, 'popDirection', 'popoverDirection');\n }\n\n @Watch('resolvedType')\n resolvedTypeHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n // #endregion\n // #region Local Methods\n\n get determineDropdownItemCount() {\n return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n }\n\n get hasCustomControl() {\n return !!this.hostElement.querySelector('[slot=control]');\n }\n\n get toggleButtonProps() {\n const allowedIntents = ['primary', 'secondary', 'neutral'];\n const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n const type = allowedTypes.includes(this.type) ? this.type : '';\n const icon = type === 'icon';\n const fab = type === 'fab';\n const custom = type === 'custom';\n let intent;\n if (allowedIntents.includes(type)) {\n intent = type === 'neutral' ? type : `workflow-${type}`;\n }\n const active = this.open;\n const disabled = !!this.disabled;\n const ariaExpanded = this.open;\n const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n return {\n icon,\n fab,\n intent,\n active,\n disabled,\n ariaExpanded,\n className,\n custom,\n };\n }\n\n _alignOptionStructure(elem: Element = this.hostElement) {\n Array.from(elem.children).forEach(el => {\n if (el.tagName === 'Q2-OPTION') {\n el.setAttribute('_hide-selected-block', '');\n } else if (el.tagName === 'Q2-OPTGROUP') {\n this._alignOptionStructure(el);\n }\n });\n }\n\n _clickItem(value: string) {\n if (!value \|\| this.disabled) return;\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n option?.click();\n }\n\n async _handleActionSheet(event: MouseEvent \| KeyboardEvent) {\n const { value } = await showActionSheetList(this, event);\n this._clickItem(value);\n this.controlElement.focus();\n }\n\n _togglePopover() {\n const { controlElement } = this;\n if (!controlElement) return;\n controlElement.click();\n controlElement.focus();\n controlElement.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusToggle = () => {\n this.controlElement.focus();\n };\n\n handleFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (this.popoverElement?.contains(relatedTarget)) return;\n if (this.hostElement.contains(relatedTarget)) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLElement;\n if (target.localName === 'q2-option-list') {\n event.stopPropagation();\n }\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n if (event.detail.open) return;\n this.controlElement.focus();\n };\n\n onToggleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this)) {\n this._handleActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n };\n\n onToggleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (isTabMetaOrCtrl) return;\n\n event.preventDefault();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this, event)) {\n this._handleActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n orchestrateResolvedMenuItems() {\n if (!this.name \|\| !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n resolveMenu() {\n return (\n this.name &&\n window.TectonElements &&\n window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n );\n }\n\n resolveMenuItemElements() {\n return this.resolveMenu().then(datas => {\n return datas.map(menuItemData => {\n let onClickFn;\n let queryParams;\n if (menuItemData['tct-ctxid']) {\n queryParams = {};\n queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n }\n\n switch (menuItemData.action) {\n case 'navigateTo':\n onClickFn = function () {\n return window.TectonElements?.navigateTo?.(\n menuItemData.featureName,\n menuItemData.moduleName,\n queryParams\n );\n };\n break;\n case 'showOverpanel':\n onClickFn = function () {\n return window.TectonElements?.showOverpanel?.(\n `${menuItemData.featureName}.${menuItemData.moduleName}`,\n queryParams,\n undefined,\n true\n );\n };\n break;\n }\n\n const newDropdownItem = document.createElement('q2-dropdown-item');\n newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n newDropdownItem.classList.add('resolved-menu-item');\n newDropdownItem.textContent = menuItemData.itemLabel;\n newDropdownItem.onclick = onClickFn;\n\n return newDropdownItem;\n });\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const btnProps = this.toggleButtonProps;\n return (\n <click-elsewhere\n class={this.open ? 'dropdown-open' : ''}\n onChange={this.onClickElsewhere}\n test-id=\"dropdownContainer\"\n >\n <q2-btn\n tabIndex={0}\n ref={el => (this.controlElement = el)}\n class={btnProps.className}\n onClick={this.onToggleClick}\n onKeyDown={this.onToggleKeydown}\n fab={btnProps.fab}\n intent={btnProps.intent}\n onFocusout={this.handleFocusOut}\n active={btnProps.active}\n disabled={btnProps.disabled}\n ariaExpanded={`${!!btnProps.ariaExpanded}`}\n label={this.hideLabel && this.label ? loc(this.label) : undefined}\n hideLabel={this.hideLabel}\n ariaHasPopup=\"menu\"\n test-id=\"dropdownButton\"\n block={this.block}\n description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n >\n {this.hasCustomControl ? (\n <div\n test-id=\"dropdownControl\"\n class={btnProps.custom ? '' : 'hidden'}\n >\n <slot name=\"control\" />\n </div>\n ) : (\n <Fragment>\n {this.label && !this.hideLabel && (\n <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n )}\n {this.icon ? <q2-icon type={this.icon} /> : ' '}\n </Fragment>\n )}\n </q2-btn>\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.controlElement}\n open={this.open}\n max-height={this.popoverMaxHeight}\n onFocusout={this.handleFocusOut}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode \|\| undefined}\n block={this.block}\n >\n <slot name=\"popover-top\" />\n <q2-option-list\n onPopoverState={this.onPopoverState}\n id=\"option-list\"\n ref={el => (this.optionList = el)}\n type=\"menu\"\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n no-select\n >\n <slot />\n </q2-option-list>\n <slot name=\"popover-bottom\" />\n </q2-popover>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/q2-editable-field.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-CGkHOjh1.js';
-import { d as handleAriaLabel, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc } from './index-C4PILj1_.js';
+import { d as handleAriaLabel, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc } from './index-C5gj0T_3.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 const q2EditableFieldCss = "*{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}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper .begin-edit,.q2-editable-field-wrapper .save-edit,.q2-editable-field-wrapper .cancel-edit{flex:0 0 44px;--tct-btn-icon-hover-background:var(--tct-editable-field-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-editable-field-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-editable-field-btn-icon-stroke-secondary, var(--app-gray, #747474))}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";

package/dist/esm/q2-editable-field.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-editable-field.entry.js","sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n max-width: 100%;\n}\n\n.q2-editable-field-wrapper {\n .begin-edit,\n .save-edit,\n .cancel-edit {\n flex: 0 0 44px;\n --tct-btn-icon-hover-background: #{var-list(\n --tct-editable-field-btn-hover-background,\n --app-gray-l3,\n #f2f2f2\n )};\n --tct-icon-stroke-primary: #{var-list(--tct-editable-field-btn-icon-stroke-primary, --app-gray, #747474)};\n --tct-icon-stroke-secondary: #{var-list(--tct-editable-field-btn-icon-stroke-secondary, --app-gray, #747474)};\n }\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n align-items: flex-end;\n}\n\n:host([block]) {\n display: block;\n width: 100%;\n .q2-editable-field-wrapper:not([hidden]) {\n display: grid;\n grid-template-columns: 1fr auto auto;\n }\n}\n\nq2-input,\n.text-wrapper {\n margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n flex: 1 1 auto;\n min-width: 170px;\n}\n\n.text-wrapper {\n flex: 0 auto;\n align-self: center;\n display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\ndl {\n margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n font-weight: 600;\n}\n\ndd {\n margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n display: flex;\n align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport type { EventDetail, FormatterValueObject } from 'q2-tecton-common/lib/types/elements';\nimport { Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { Q2Input } from '../q2-input/q2-input';\n\n/*\n @name Editable Field\n * @category Forms\n * @summary Use for inline editing of data that is normally displayed as read-only.\n /\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n // #region Own Properties\n\n cancelBtnElement: HTMLQ2BtnElement;\n defaultValue: string;\n editBtnElement: HTMLQ2BtnElement;\n innerValue: string;\n inputElement: HTMLQ2InputElement;\n saveBtnElement: HTMLQ2BtnElement;\n scheduledAfterRender: (() => void)[] = [];\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 formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* If `true`, component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /* Disables the edit button and field. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* Controls the edit state of the element. /\n @Prop({ reflect: true, mutable: true })\n editing: boolean = false;\n\n /\n Determines the `errors` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop()\n errors: string[];\n\n /\n Determines the `formatModifier` applied to the `q2-input` element.\n * @info\n * Only applicable when `type=\"currency\"`.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /* Hide's the field's `<label>` element from view. /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Determines the `hints` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop()\n hints: string[];\n\n /\n The visible descriptor for the element.\n * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string = '';\n\n /\n Determines the `maxLength` applied to the `q2-input`.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop({ reflect: true })\n maxlength: number;\n\n /* Displays the provided label in the read state. /\n @Prop({ reflect: true })\n persistentLabel: boolean;\n\n /* Shortens long values with ellipses instead of splitting into multiple lines. /\n @Prop({ reflect: true })\n truncated: boolean;\n\n /\n Determines the `type` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.\n /\n @Prop({ reflect: true })\n type: Q2Input['type'];\n\n /* Serves as the visible text while in the read state, and the default value of the input while in the edit state. /\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n \n The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n @info\n If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n editing: boolean;\n name: 'edit' \| 'cancel' \| 'save';\n value?: string;\n formattedValue?: string;\n }>;\n\n /\n Emitted when the user updates the `q2-input` element in the editing state.\n * @deprecated Use 'tctInput' instead\n /\n @Event()\n input: EventEmitter<{ formattedValue: string; value: string }>;\n\n /\n Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n \n The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n \n @info\n * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n /\n @Event()\n tctChange: EventEmitter<{\n editing: boolean;\n name: 'edit' \| 'cancel' \| 'save';\n value?: string;\n formattedValue?: string;\n }>;\n\n /\n Emitted when the user updates the `q2-input` element in the editing state.\n /\n @Event()\n tctInput: EventEmitter<{ formattedValue: string; value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n\n this.defaultValue = this.value;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (!isEventFromElement(event, this.hostElement) \|\| this.hostElement.onchange) return;\n queueMicrotask(() => {\n switch (event.detail.name) {\n case 'save':\n if (this.hasErrors) {\n this.inputElement.focus();\n break;\n }\n this.value = event.detail.value;\n this.editing = event.detail.editing;\n break;\n\n case 'cancel':\n this.inputElement.value = this.value;\n this.editing = event.detail.editing;\n break;\n\n case 'edit':\n this.editing = event.detail.editing;\n break;\n }\n });\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n }\n\n @Listen('tctFormatted')\n inputFormatted(event: CustomEvent<FormatterValueObject>) {\n this.formattedValue = event.detail.formattedValue;\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the cancel button, which will hide the `<q2-input>` field.\n \n @testOnly\n /\n @Method()\n clickCancel() {\n if (!this.editing) return;\n this.cancelBtnElement?.click();\n }\n\n /\n Emulates clicking the edit button, which will display the `<q2-input>` field.\n \n @testOnly\n /\n @Method()\n clickEdit() {\n if (this.editing) return;\n this.editBtnElement?.click();\n }\n\n /\n Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.\n \n @testOnly\n /\n @Method()\n clickSave() {\n if (!this.editing) return;\n this.saveBtnElement?.click();\n }\n\n /\n Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n \n If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n * `change` event will be emitted.\n \n @testOnly\n */\n @Method()\n async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n await this.clickEdit();\n await waitForNextPaint();\n\n await this.inputElement.setValue(value);\n\n if (options.clickSave) {\n await this.clickSave();\n await waitForNextPaint();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('editing')\n observesEditing(newValue: boolean, oldValue: boolean) {\n if (newValue === oldValue) return;\n this.scheduledAfterRender.push(this.hostElement.focus);\n }\n\n @Watch('errors')\n errorsObserver() {\n const { editing, hasErrors } = this;\n const focusedElement = this.hostElement.shadowRoot.activeElement;\n const isInputFocused = focusedElement?.tagName === 'Q2-INPUT';\n if (isInputFocused \|\| !focusedElement \|\| !editing \|\| !hasErrors) return;\n this.inputElement.focus();\n }\n\n // #endregion\n // #region Local Methods\n\n get hasErrors(): boolean {\n return Array.isArray(this.errors) && !!this.errors.length;\n }\n\n get hasHints(): boolean {\n return Array.isArray(this.hints) && !!this.hints.length;\n }\n\n get locLabel() {\n return (this.label && loc(this.label)) \|\| '';\n }\n\n get wrapperClass() {\n return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n }\n\n cancelClick = (event?: CustomEvent) => {\n event?.stopPropagation();\n mirrorEmit(this, ['change', 'tctChange'], { editing: false, name: 'cancel' });\n this.inputElement.setValue(this.defaultValue);\n };\n\n editClick = (event: CustomEvent) => {\n event?.stopPropagation();\n mirrorEmit(this, ['change', 'tctChange'], { editing: true, name: 'edit' });\n };\n\n generateEditStateDOM() {\n return (\n <div\n class={this.wrapperClass}\n hidden={!this.editing}\n >\n <q2-input\n ref={el => (this.inputElement = el)}\n label={this.locLabel}\n hideLabel={this.hideLabel}\n value={this.value}\n hints={this.hasHints ? this.hints : undefined}\n errors={this.hasErrors ? this.errors : undefined}\n type={this.type}\n disabled={this.disabled}\n formatModifier={this.formatModifier}\n maxlength={this.maxlength}\n test-id=\"editableInput\"\n onChange={e => e.stopImmediatePropagation()}\n onInput={e => e.stopImmediatePropagation()}\n onTctInput={this.inputInput}\n onTctChange={this.inputChange}\n onKeyDown={this.inputKeyDown}\n onClick={this.inputClick}\n />\n <q2-btn\n ref={el => (this.cancelBtnElement = el)}\n class=\"cancel-edit\"\n label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n hide-label\n test-id=\"cancelButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.cancelClick}\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n <q2-btn\n ref={el => (this.saveBtnElement = el)}\n class=\"save-edit\"\n label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n hide-label\n test-id=\"saveButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.saveClick}\n >\n <q2-icon type=\"checkmark\" />\n </q2-btn>\n </div>\n );\n }\n\n generateReadStateDOM() {\n if (this.persistentLabel && this.locLabel) {\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <dl>\n <dt class=\"read-state-label\">{this.locLabel}</dt>\n <dd>\n <span class=\"text-wrapper\">{this.formattedValue \|\| this.value}</span>\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n </dd>\n </dl>\n </div>\n );\n }\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <div class=\"text-wrapper\">{this.formattedValue \|\| this.value}</div>\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n </div>\n );\n }\n\n inputChange = (e: CustomEvent) => {\n e.stopPropagation();\n };\n\n inputClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n inputInput = (event: Q2InputCustomEvent<EventDetail> & InputEvent) => {\n event.stopPropagation();\n mirrorEmit(this, ['input', 'tctInput'], event.detail);\n this.formattedValue = event.detail.formattedValue;\n this.innerValue = event.detail.value;\n };\n\n inputKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' \|\| e.key === 'Esc') {\n e.preventDefault();\n this.cancelClick();\n return;\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n this.saveClick();\n return;\n }\n };\n\n saveClick = (event?: CustomEvent) => {\n event && event.stopPropagation();\n const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n this.defaultValue = valueFromInputProp;\n mirrorEmit(this, ['change', 'tctChange'], {\n editing: false,\n name: 'save',\n value: this.innerValue \|\| valueFromInputProp,\n formattedValue: this.formattedValue \|\| valueFromInputProp,\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div>\n {this.generateEditStateDOM()}\n {this.generateReadStateDOM()}\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-editable-field.entry.js","sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: inline-block;\n max-width: 100%;\n}\n\n.q2-editable-field-wrapper {\n .begin-edit,\n .save-edit,\n .cancel-edit {\n flex: 0 0 44px;\n --tct-btn-icon-hover-background: #{var-list(\n --tct-editable-field-btn-hover-background,\n --app-gray-l3,\n #f2f2f2\n )};\n --tct-icon-stroke-primary: #{var-list(--tct-editable-field-btn-icon-stroke-primary, --app-gray, #747474)};\n --tct-icon-stroke-secondary: #{var-list(--tct-editable-field-btn-icon-stroke-secondary, --app-gray, #747474)};\n }\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n align-items: flex-end;\n}\n\n:host([block]) {\n display: block;\n width: 100%;\n .q2-editable-field-wrapper:not([hidden]) {\n display: grid;\n grid-template-columns: 1fr auto auto;\n }\n}\n\nq2-input,\n.text-wrapper {\n margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n flex: 1 1 auto;\n min-width: 170px;\n}\n\n.text-wrapper {\n flex: 0 auto;\n align-self: center;\n display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\ndl {\n margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n font-weight: 600;\n}\n\ndd {\n margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n display: flex;\n align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport type { EventDetail, FormatterValueObject } from 'q2-tecton-common/lib/types/elements';\nimport { Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { Q2Input } from '../q2-input/q2-input';\n\n/*\n @name Editable Field\n * @category Forms\n * @summary Use for inline editing of data that is normally displayed as read-only.\n /\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n // #region Own Properties\n\n cancelBtnElement: HTMLQ2BtnElement;\n defaultValue: string;\n editBtnElement: HTMLQ2BtnElement;\n innerValue: string;\n inputElement: HTMLQ2InputElement;\n saveBtnElement: HTMLQ2BtnElement;\n scheduledAfterRender: (() => void)[] = [];\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 formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* If `true`, component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /* Disables the edit button and field. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* Controls the edit state of the element. /\n @Prop({ reflect: true, mutable: true })\n editing: boolean = false;\n\n /\n Determines the `errors` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop()\n errors: string[];\n\n /\n Determines the `formatModifier` applied to the `q2-input` element.\n * @info\n * Only applicable when `type=\"currency\"`.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /* Hide's the field's `<label>` element from view. /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Determines the `hints` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop()\n hints: string[];\n\n /\n The visible descriptor for the element.\n * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string = '';\n\n /\n Determines the `maxLength` applied to the `q2-input`.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop({ reflect: true })\n maxlength: number;\n\n /* Displays the provided label in the read state. /\n @Prop({ reflect: true })\n persistentLabel: boolean;\n\n /* Shortens long values with ellipses instead of splitting into multiple lines. /\n @Prop({ reflect: true })\n truncated: boolean;\n\n /\n Determines the `type` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.\n /\n @Prop({ reflect: true })\n type: Q2Input['type'];\n\n /* Serves as the visible text while in the read state, and the default value of the input while in the edit state. /\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n \n The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n @info\n If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n editing: boolean;\n name: 'edit' \| 'cancel' \| 'save';\n value?: string;\n formattedValue?: string;\n }>;\n\n /\n Emitted when the user updates the `q2-input` element in the editing state.\n * @deprecated Use 'tctInput' instead\n /\n @Event()\n input: EventEmitter<{ formattedValue: string; value: string }>;\n\n /\n Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n \n The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n \n @info\n * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n /\n @Event()\n tctChange: EventEmitter<{\n editing: boolean;\n name: 'edit' \| 'cancel' \| 'save';\n value?: string;\n formattedValue?: string;\n }>;\n\n /\n Emitted when the user updates the `q2-input` element in the editing state.\n /\n @Event()\n tctInput: EventEmitter<{ formattedValue: string; value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n\n this.defaultValue = this.value;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (!isEventFromElement(event, this.hostElement) \|\| this.hostElement.onchange) return;\n queueMicrotask(() => {\n switch (event.detail.name) {\n case 'save':\n if (this.hasErrors) {\n this.inputElement.focus();\n break;\n }\n this.value = event.detail.value;\n this.editing = event.detail.editing;\n break;\n\n case 'cancel':\n this.inputElement.value = this.value;\n this.editing = event.detail.editing;\n break;\n\n case 'edit':\n this.editing = event.detail.editing;\n break;\n }\n });\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n }\n\n @Listen('tctFormatted')\n inputFormatted(event: CustomEvent<FormatterValueObject>) {\n this.formattedValue = event.detail.formattedValue;\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the cancel button, which will hide the `<q2-input>` field.\n \n @testOnly\n /\n @Method()\n clickCancel() {\n if (!this.editing) return;\n this.cancelBtnElement?.click();\n }\n\n /\n Emulates clicking the edit button, which will display the `<q2-input>` field.\n \n @testOnly\n /\n @Method()\n clickEdit() {\n if (this.editing) return;\n this.editBtnElement?.click();\n }\n\n /\n Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.\n \n @testOnly\n /\n @Method()\n clickSave() {\n if (!this.editing) return;\n this.saveBtnElement?.click();\n }\n\n /\n Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n \n If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n * `change` event will be emitted.\n \n @testOnly\n */\n @Method()\n async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n await this.clickEdit();\n await waitForNextPaint();\n\n await this.inputElement.setValue(value);\n\n if (options.clickSave) {\n await this.clickSave();\n await waitForNextPaint();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('editing')\n observesEditing(newValue: boolean, oldValue: boolean) {\n if (newValue === oldValue) return;\n this.scheduledAfterRender.push(this.hostElement.focus);\n }\n\n @Watch('errors')\n errorsObserver() {\n const { editing, hasErrors } = this;\n const focusedElement = this.hostElement.shadowRoot.activeElement;\n const isInputFocused = focusedElement?.tagName === 'Q2-INPUT';\n if (isInputFocused \|\| !focusedElement \|\| !editing \|\| !hasErrors) return;\n this.inputElement.focus();\n }\n\n // #endregion\n // #region Local Methods\n\n get hasErrors(): boolean {\n return Array.isArray(this.errors) && !!this.errors.length;\n }\n\n get hasHints(): boolean {\n return Array.isArray(this.hints) && !!this.hints.length;\n }\n\n get locLabel() {\n return (this.label && loc(this.label)) \|\| '';\n }\n\n get wrapperClass() {\n return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n }\n\n cancelClick = (event?: CustomEvent) => {\n event?.stopPropagation();\n mirrorEmit(this, ['change', 'tctChange'], { editing: false, name: 'cancel' });\n this.inputElement.setValue(this.defaultValue);\n };\n\n editClick = (event: CustomEvent) => {\n event?.stopPropagation();\n mirrorEmit(this, ['change', 'tctChange'], { editing: true, name: 'edit' });\n };\n\n generateEditStateDOM() {\n return (\n <div\n class={this.wrapperClass}\n hidden={!this.editing}\n >\n <q2-input\n ref={el => (this.inputElement = el)}\n label={this.locLabel}\n hideLabel={this.hideLabel}\n value={this.value}\n hints={this.hasHints ? this.hints : undefined}\n errors={this.hasErrors ? this.errors : undefined}\n type={this.type}\n disabled={this.disabled}\n formatModifier={this.formatModifier}\n maxlength={this.maxlength}\n test-id=\"editableInput\"\n onChange={e => e.stopImmediatePropagation()}\n onInput={e => e.stopImmediatePropagation()}\n onTctInput={this.inputInput}\n onTctChange={this.inputChange}\n onKeyDown={this.inputKeyDown}\n onClick={this.inputClick}\n />\n <q2-btn\n ref={el => (this.cancelBtnElement = el)}\n class=\"cancel-edit\"\n label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n hide-label\n test-id=\"cancelButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.cancelClick}\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n <q2-btn\n ref={el => (this.saveBtnElement = el)}\n class=\"save-edit\"\n label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n hide-label\n test-id=\"saveButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.saveClick}\n >\n <q2-icon type=\"checkmark\" />\n </q2-btn>\n </div>\n );\n }\n\n generateReadStateDOM() {\n if (this.persistentLabel && this.locLabel) {\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <dl>\n <dt class=\"read-state-label\">{this.locLabel}</dt>\n <dd>\n <span class=\"text-wrapper\">{this.formattedValue \|\| this.value}</span>\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n </dd>\n </dl>\n </div>\n );\n }\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <div class=\"text-wrapper\">{this.formattedValue \|\| this.value}</div>\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n </div>\n );\n }\n\n inputChange = (e: CustomEvent) => {\n e.stopPropagation();\n };\n\n inputClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n inputInput = (event: Q2InputCustomEvent<EventDetail> & InputEvent) => {\n event.stopPropagation();\n mirrorEmit(this, ['input', 'tctInput'], event.detail);\n this.formattedValue = event.detail.formattedValue;\n this.innerValue = event.detail.value;\n };\n\n inputKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' \|\| e.key === 'Esc') {\n e.preventDefault();\n this.cancelClick();\n return;\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n this.saveClick();\n return;\n }\n };\n\n saveClick = (event?: CustomEvent) => {\n event && event.stopPropagation();\n const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n this.defaultValue = valueFromInputProp;\n mirrorEmit(this, ['change', 'tctChange'], {\n editing: false,\n name: 'save',\n value: this.innerValue \|\| valueFromInputProp,\n formattedValue: this.formattedValue \|\| valueFromInputProp,\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div>\n {this.generateEditStateDOM()}\n {this.generateReadStateDOM()}\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/q2-example.entry.js CHANGED Viewed

@@ -125,7 +125,7 @@ const Q2Example = class {
             }, onClick: () => this.tctClick.emit(), role: "menu" }, h("slot", null))));
     }
     render() {
-        return h(Host, { key: '6ffb94ccdcae5f6a0762f80b2d022997345f5cc0', attribute: "navigation" }, this.renderMenuInner());
+        return h(Host, { key: '7878622b0f2a455617e109b9aa32290bffc00a92', attribute: "navigation" }, this.renderMenuInner());
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-file-picker.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-CGkHOjh1.js';
-import { l as loc, h as hasSlotContent } from './index-C4PILj1_.js';
+import { l as loc, h as hasSlotContent } from './index-C5gj0T_3.js';
 const q2FilePickerCss = "*{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}*{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}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{--tct-link-font-weight:var(--tct-file-picker-browse-link-font-weight, 700);color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{--tct-icon-stroke-primary:var(--tct-file-picker-drop-zone-icon-color, var(--t-text, #4d4d4d));--tct-icon-stroke-secondary:var(--tct-file-picker-drop-zone-icon-color, var(--t-text, #4d4d4d));align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-width:var(--tct-file-picker-drop-zone-border-width, 2px);color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;max-width:var(--tct-file-picker-drop-zone-max-width, 640px);min-width:var(--tct-file-picker-drop-zone-min-width, 320px);padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.drop-zone-disabled{opacity:var(--tct-file-picker-drop-zone-disabled-opacity, var(--app-disabled-opacity, 0.4));cursor:not-allowed}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:var(--tct-file-picker-item-close-btn-border-radius, 4px);--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-info{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);max-width:var(--tct-file-picker-drop-zone-max-width, 640px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";