npm - q2-tecton-elements - Versions diffs - 1.56.1 → 1.56.3 - Mend

q2-tecton-elements 1.56.1 → 1.56.3

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

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

@@ -86,7 +86,6 @@ const Q2EditableField = class {
     componentDidRender() {
         this.scheduledAfterRender.forEach(fn => fn());
         this.scheduledAfterRender = [];
-        this.formattedValue = this.inputElement.formattedValue;
     }
     // #endregion
     // #region Listeners
@@ -118,6 +117,9 @@ const Q2EditableField = class {
             return;
         this.hostElement.shadowRoot.querySelector(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();
     }
+    inputFormatted(event) {
+        this.formattedValue = event.detail.formattedValue;
+    }
     // #endregion
     // #region Public Methods API
     /**
@@ -202,22 +204,19 @@ const Q2EditableField = class {
     get wrapperClass() {
         return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
     }
-    generateEditBtn() {
-        return (index.h("q2-btn", { ref: el => (this.editBtnElement = el), class: "begin-edit", label: `${index$1.loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, disabled: this.disabled, "test-id": "editButton", onClick: this.editClick }, index.h("q2-icon", { type: "edit" })));
-    }
     generateEditStateDOM() {
         return (index.h("div", { class: this.wrapperClass, hidden: !this.editing }, index.h("q2-input", { ref: el => (this.inputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: this.hasHints ? this.hints : undefined, errors: this.hasErrors ? this.errors : undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), index.h("q2-btn", { ref: el => (this.cancelBtnElement = el), class: "cancel-edit", label: `${index$1.loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick }, index.h("q2-icon", { type: "close" })), index.h("q2-btn", { ref: el => (this.saveBtnElement = el), class: "save-edit", label: `${index$1.loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick }, index.h("q2-icon", { type: "checkmark" }))));
     }
     generateReadStateDOM() {
         if (this.persistentLabel && this.locLabel) {
-            return (index.h("div", { class: this.wrapperClass, hidden: this.editing }, index.h("dl", null, index.h("dt", { class: "read-state-label" }, this.locLabel), index.h("dd", null, index.h("span", { class: "text-wrapper" }, this.formattedValue || this.value), this.generateEditBtn()))));
+            return (index.h("div", { class: this.wrapperClass, hidden: this.editing }, index.h("dl", null, index.h("dt", { class: "read-state-label" }, this.locLabel), index.h("dd", null, index.h("span", { class: "text-wrapper" }, this.formattedValue || this.value), index.h("q2-btn", { ref: el => (this.editBtnElement = el), class: "begin-edit", label: `${index$1.loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, disabled: this.disabled, "test-id": "editButton", onClick: this.editClick }, index.h("q2-icon", { type: "edit" }))))));
         }
-        return (index.h("div", { class: this.wrapperClass, hidden: this.editing }, index.h("div", { class: "text-wrapper" }, this.formattedValue || this.value), this.generateEditBtn()));
+        return (index.h("div", { class: this.wrapperClass, hidden: this.editing }, index.h("div", { class: "text-wrapper" }, this.formattedValue || this.value), index.h("q2-btn", { ref: el => (this.editBtnElement = el), class: "begin-edit", label: `${index$1.loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, disabled: this.disabled, "test-id": "editButton", onClick: this.editClick }, index.h("q2-icon", { type: "edit" }))));
     }
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '2ef1d8ffac344d753365e3a0a09d87b54af2d213' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (index.h("div", { key: 'cd976a515db2bc31d2fb16cae89358d5363dad9a' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"q2-editable-field.entry.cjs.js","mappings":"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","names":["handleAriaLabel","overrideFocus","isEventFromElement","waitForNextPaint","loc","h"],"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\n:host {\n display: inline-block;\n max-width: 100%;\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\nq2-btn {\n flex: 0 0 44px;\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 { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\n\ninterface IExtendedQ2InputElement extends HTMLQ2InputElement {\n formattedValue: IFormatterValueObject['formattedValue'];\n}\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 /\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 /\n @Event()\n input: 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 this.formattedValue = (this.inputElement as IExtendedQ2InputElement).formattedValue;\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 // #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?: MouseEvent) => {\n event?.stopPropagation();\n this.change.emit({ editing: false, name: 'cancel' });\n this.inputElement.setValue(this.defaultValue);\n };\n\n editClick = (event: MouseEvent) => {\n event?.stopPropagation();\n this.change.emit({ editing: true, name: 'edit' });\n };\n\n generateEditBtn() {\n return (\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={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n );\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 onInput={this.inputInput}\n onChange={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={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={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 {this.generateEditBtn()}\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 {this.generateEditBtn()}\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<IEventDetail> & InputEvent) => {\n event.stopPropagation();\n this.input.emit(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?: MouseEvent) => {\n event && event.stopPropagation();\n const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n this.defaultValue = valueFromInputProp;\n this.change.emit({\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"],"version":3}
1	+ {"file":"q2-editable-field.entry.cjs.js","mappings":"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","names":["handleAriaLabel","overrideFocus","isEventFromElement","waitForNextPaint","loc","h"],"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\n:host {\n display: inline-block;\n max-width: 100%;\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\nq2-btn {\n flex: 0 0 44px;\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 { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\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 /\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 /\n @Event()\n input: 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('formatted')\n inputFormatted(event: CustomEvent<IFormatterValueObject>) {\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?: MouseEvent) => {\n event?.stopPropagation();\n this.change.emit({ editing: false, name: 'cancel' });\n this.inputElement.setValue(this.defaultValue);\n };\n\n editClick = (event: MouseEvent) => {\n event?.stopPropagation();\n this.change.emit({ 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 onInput={this.inputInput}\n onChange={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={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={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={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={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<IEventDetail> & InputEvent) => {\n event.stopPropagation();\n this.input.emit(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?: MouseEvent) => {\n event && event.stopPropagation();\n const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n this.defaultValue = valueFromInputProp;\n this.change.emit({\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"],"version":3}

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

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

package/dist/cjs/q2-form.cjs.entry.js CHANGED Viewed

@@ -13,7 +13,7 @@ const Q2Checkbox = class {
         this.spacing = 'normal';
     }
     render() {
-        return (index.h("div", { key: '04799c303aece51e5a4db5b73b250b23042ac929', class: "container" }, index.h("slot", { key: '8461f1f0db3fe541583548fe574a12a6dfb8bd26' })));
+        return (index.h("div", { key: 'befb2b017cd148d0ea0ce96a640911a8f973bce1', class: "container" }, index.h("slot", { key: '82eec71b0e44cfa7cf8d6559f62fd4cc64a68a1c' })));
     }
 };
 Q2Checkbox.style = Q2FormStyle0;

package/dist/cjs/q2-formatted-text.cjs.entry.js CHANGED Viewed

@@ -55,7 +55,7 @@ const Q2FormattedText = class {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (index.h("div", { key: '59f16336df671d957674678a7c129652ba98672d', class: formattedTextClasses, "aria-label": this.formattedValue }, index.h("span", { key: '9bdf70755092e11ad43b2f7d6d487d0bb0b838a1' }, this.formattedValue)));
+        return (index.h("div", { key: '0d59672677b0655bdab402c0cf9ded5f12d85338', class: formattedTextClasses, "aria-label": this.formattedValue }, index.h("span", { key: '74152644c1b97e05acf05b64ccc8255b98002c31' }, this.formattedValue)));
     }
     static get watchers() { return {
         "value": ["propsUpdated"],

package/dist/cjs/q2-item_3.cjs.entry.js CHANGED Viewed

@@ -109,7 +109,7 @@ const Q2Item = class {
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (index.h("div", { key: '40ce0bd3c330b4fff2b4e846035dac01c0fd7773', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (index.h("div", { key: 'b1bbdfbd340cc93e3fda71e361b3f42e46757914', class: this.bulletClasses }, index.h("slot", { key: '57b96870dec3b052b561726c138af977dfb72b50', name: "bullet" }))), index.h("div", { key: '47c92c8eeaecbc20cf83d08589369f56fa84327d', class: this.mainClasses }, this.hasHeaderSlotContent && (index.h("div", { key: '005de58a8d3570e3e487b1ee8feb75778a67e5df', class: "header" }, index.h("slot", { key: 'd18a38954f1418b998a0e666409806161d00710a', name: "header" }))), this.hasBodySlotContent && (index.h("div", { key: '3c49afb728f1d850680ce340540f96f4e66b038d', class: "body" }, index.h("slot", { key: 'a48218bf13429473b3dfeaca8188350da2028edf', name: "body" })))), this.hasActionSlotContent && (index.h("div", { key: '4d0b77a7ae10ee942dcd9e99cdacc6344fb31993', class: this.actionClasses }, index.h("slot", { key: 'c3877b2dbe56a15ed3a4ab5e5dfa221495f905e1', name: "action" }))), this.hasFooterSlotContent && (index.h("div", { key: '8fb01a51cb3a663886a6f985f6195ea2d639c573', class: this.footerClasses }, index.h("slot", { key: '0469761b85c1e10e9379865c089e0bea16c401a2', name: "footer" })))));
+        return (index.h("div", { key: 'b8fd1943532c8b21e6009abdc074adb8804de569', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (index.h("div", { key: 'e24948885dc1c5adc00daf6c79f50ab6e12c1a5f', class: this.bulletClasses }, index.h("slot", { key: '3f7a9d142e999ae4e2d0f4030962a99b92d2009f', name: "bullet" }))), index.h("div", { key: '1fce62c21f3c0e2b99aa2687a19dbd6081043242', class: this.mainClasses }, this.hasHeaderSlotContent && (index.h("div", { key: 'e73680590a2f8612d93ced7065e0cdb85c5690e9', class: "header" }, index.h("slot", { key: 'b550f6e06b3987b21a9e1340b6b3338304271513', name: "header" }))), this.hasBodySlotContent && (index.h("div", { key: '5397462440a383586ad044b0fa3601b99151f6b6', class: "body" }, index.h("slot", { key: 'c33d16c661a9f18f154685598a93229e6b99b01d', name: "body" })))), this.hasActionSlotContent && (index.h("div", { key: '12d47acdf2b4915d7db0b506552decf3e8339b15', class: this.actionClasses }, index.h("slot", { key: '35cd3d9956350f7839e3b32947ce646ac093e0b0', name: "action" }))), this.hasFooterSlotContent && (index.h("div", { key: '8ff5309d31bc9472721f0e67144ec16d79b5bc76', class: this.footerClasses }, index.h("slot", { key: '14b717dfd672f169a8ee7aedab6bb70d5a0f2dfe', name: "footer" })))));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -238,7 +238,7 @@ const Q2List = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: 'a62513330a8eb2a86fd42c4769631118d6ed73bb', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (index.h("div", { key: '59a5e757c4a2e905ab6e3ea556772f025b0f3e9d', class: this.headerClasses }, index.h("div", { key: 'b0e25c5d70ea57d5a003e41df0d2bef18e8546ac', class: "label" }, this.label), this.hasFilterSlot && index.h("slot", { key: '13a72e5ff372225b81baa82c30dc048cffdcf3bb', name: "filter" }))), index.h("div", { key: 'c1046e879e12b2582862afe0dda3f6209ff901dc', role: "list" }, index.h("slot", { key: 'c4bd23906fbed01d15b54e473cd36e289d9c7b31' }))));
+        return (index.h("div", { key: 'f4669851dfbd167e38d5ca50043f15d77cc0d800', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (index.h("div", { key: '528c9d5ebb2d5ed8924ad67f6f79415443d5bd93', class: this.headerClasses }, index.h("div", { key: '1c6a2dc44ae7d8c1664bcd8c96584d451f379918', class: "label" }, this.label), this.hasFilterSlot && index.h("slot", { key: '116cace9b3451dad4e7b4c045989cd0d768216d2', name: "filter" }))), index.h("div", { key: '20f693f5b706961ad9f0fc9b6e934eb3d16211dc', role: "list" }, index.h("slot", { key: '260f0822b4bf149adc6b0269f3f09e9d4550b7a4' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-legend.cjs.entry.js CHANGED Viewed

@@ -106,7 +106,7 @@ const Q2Legend = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("click-elsewhere", { key: '9e3655b908d343e9184630069adf04b3917902bb', onChange: () => this.onClickElsewhere(this) }, index.h("ul", { key: '7dbda73b13652bc876bab45b53a4864161b64f8b' }, this.dataWithClasses.map(item => (index.h("li", { class: "item" }, index.h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, index.h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), index.h("span", { "test-id": "itemName", class: "item-name" }, item.name), index.h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (index.h("click-elsewhere", { key: '95da1d55b13d20ce807598d88339e36c45b52c49', onChange: () => this.onClickElsewhere(this) }, index.h("ul", { key: 'dd9a72bab53b5a4093821fc6834fe13cdf8e65b9' }, this.dataWithClasses.map(item => (index.h("li", { class: "item" }, index.h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, index.h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), index.h("span", { "test-id": "itemName", class: "item-name" }, item.name), index.h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get watchers() { return {
         "hoveredItemId": ["watchHoveredItemId"],

package/dist/cjs/q2-message.cjs.entry.js CHANGED Viewed

@@ -66,7 +66,7 @@ const Q2Message = class {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = index$1.loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (index.h("div", { key: '5f3c103f660a2417f5c7843ee4d8a65170945ac4', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && index.h("div", { key: '9646ad49631660393be05303568ac2f120eb4c3a', class: "sr" }), index.h("div", { key: 'f1b9a59acc27ccec3f988c69dcda0a41aba71f45', class: "sr message-label" }, messageLabel), index.h("div", { key: '5397f4a9e266630aa0ef97f37e0b28262c7a1995', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, index.h("slot", { key: 'a856f4f132ed0e40061499a889bb9429e5e7a088' }))));
+        return (index.h("div", { key: 'af95b16f26f096c960a0481a236c1d73f7fd971e', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && index.h("div", { key: '0f0d5c38c9faa86f8aa80cca24580fd211d21db7', class: "sr" }), index.h("div", { key: '5d996e61acffbcbd7672ac62ff24df956b890c78', class: "sr message-label" }, messageLabel), index.h("div", { key: '9139aad1c78a1388a39ef44ede6c98a7082fad54', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, index.h("slot", { key: 'b9bac3aaf099af6d9ad0ecf024de89b92fe6c30d' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-modal.cjs.entry.js CHANGED Viewed

@@ -161,7 +161,7 @@ const Q2Modal = class {
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (index.h("dialog", { key: '2165ebfae56e7003aded62c0af837542bb9149a0', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, index.h("div", { key: '66d0c4eba12b73dfda0a96bb43ba5a070ecd61f2', class: interiorClasses }, this.title && (index.h("header", { key: '8bbd73d303cef868bef465c7251687cfc7599e1f' }, this.title && index.h("h2", { key: '8dd1586d26b59f726854ea4172500a53c757a64d', class: "title" }, this.title), !!this.closable && (index.h("q2-btn", { key: 'c664e338916490370fe8361f722c3e0e96f07717', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, index.h("q2-icon", { key: '6d3caa17da95a3c89f949b090702451ad9ea78ee', type: "close" }))))), index.h("div", { key: 'cfa8aac15fc865cb50e8bc78d82aa5f385946b5c', class: "content", ref: el => (this.contentElement = el) }, this.icon && (index.h("div", { key: '407d8c7571b8da638aa6954bd754c6c90ffa66b8', class: "icon" }, index.h("q2-icon", { key: '10f29256dba2f51f71ad883ffa02ddd1d753e5f5', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (index.h("div", { key: '3eb1c59e1f68b3db89dc41baa690a563a2b0396c', class: "image" }, index.h("img", { key: 'a5a7d3ffd29bbc87463b07c637c29d380e394177', src: this.imageSrc }))), index$1.hasSlotContent(this.hostElement, 'content') && index.h("slot", { key: 'c9173d235dcf128da853a52ce87fc76bc79500e9', name: "content" }), this.description && index.h("p", { key: '42370a7e92de9fd376b981587ac6e6714057e566', class: "description" }, this.description), this.customMarkup && (index.h("p", { key: '34fbdc1421c2b70158858b63dbeff72b78e6a832', class: "customMarkup", innerHTML: sanitizeHtmlString.sanitizeHTMLString(this.customMarkup) }))), index.h("footer", { key: 'c42b4b7f460a2c67c83f7ad6dd13903220c601e0' }, index.h("q2-action-group", { key: 'd3a8d1fcca9af7dbf9800e446be70b43c2ab8570', "full-width": true }, index.h("slot", { key: '8f499bf2dabd0766de6240dd586f23d9b97bccdb', name: "action" }))))));
+        return (index.h("dialog", { key: '30273b5d1cec5b21ea86f9ffc2a49bab6fd92737', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, index.h("div", { key: '65ad95c5f7f030c5d600022ad9054800a74c7165', class: interiorClasses }, this.title && (index.h("header", { key: 'd5e592cb3ecfd4255eb2498cd4976823c1f486cd' }, this.title && index.h("h2", { key: '11184e0132eec11c6191c2d26303126ad8b1f7d2', class: "title" }, this.title), !!this.closable && (index.h("q2-btn", { key: '4aa2602d31a4d2665a15a9657ffa7685be383c6e', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, index.h("q2-icon", { key: 'c8ac5c3ec739a6a5de2fc426d32e4e0c0cb070f0', type: "close" }))))), index.h("div", { key: 'b9ca1c39bd0bf93e98ff999a17e48eab5305d910', class: "content", ref: el => (this.contentElement = el) }, this.icon && (index.h("div", { key: '0e73d98e58f678f39cea7eca1edaae2ec301068d', class: "icon" }, index.h("q2-icon", { key: '54603ab9ea578570453885deb99a04aedcad32b3', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (index.h("div", { key: '013e627b7a4b772eecaf08b4a3179670f86f5f90', class: "image" }, index.h("img", { key: '0250e63bbbb8927ff02346cd94653cd4a7fa6acb', src: this.imageSrc }))), index$1.hasSlotContent(this.hostElement, 'content') && index.h("slot", { key: 'd7c56222d99a7251f9e991f93a2b07e8e8fb9e93', name: "content" }), this.description && index.h("p", { key: 'd6b9582584579f96bb95d2727bb099ab19175046', class: "description" }, this.description), this.customMarkup && (index.h("p", { key: '761b77672e0cc7c3781aef9ac56cf2ac892d145b', class: "customMarkup", innerHTML: sanitizeHtmlString.sanitizeHTMLString(this.customMarkup) }))), index.h("footer", { key: '351623e5d1e6251cc67bf3a0b9a0f6caf2753af6' }, index.h("q2-action-group", { key: '08350951cd2a3ffc150be56e49d6f57b0f68a66a', "full-width": true }, index.h("slot", { key: 'd244c6b82ed1a1ad8d469807e8438fd03bf415a8', name: "action" }))))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-month-picker.cjs.entry.js CHANGED Viewed

@@ -145,10 +145,10 @@ const Q2MonthPicker = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '6c9a7ca40d2a597f21e289b540f07900f2588cac', class: "month-container", onKeyDown: this.onMonthKeydown }, index.h("div", { key: 'bf2a873e6a183df04920eb603ef507eff82c89bd', class: "navigation" }, index.h("q2-btn", { key: '4eff95a05e80cfe5c0593d638fd82ca2a7954765', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (index.h("div", { key: 'dfa012542089f3e031225e11d942731d95caa467', class: "month-container", onKeyDown: this.onMonthKeydown }, index.h("div", { key: '2196be700d87a1e01b1f90e6f4b7d661d593bf48', class: "navigation" }, index.h("q2-btn", { key: 'ff943c45617ff8b3a17a9ef1b61b82e67356c300', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, index.h("span", { key: '69f3247510f67d368e1f15ce054cbfdb3d56901c', class: "year" }, this.year), index.h("q2-icon", { key: '281bdf4e671b05ea28aea658ae05ab11d3c4667d', class: "year-icon off", type: "chevron-down" })), index.h("div", { key: '9528cc408878d4f4839bed485fe5a46cb005f139', class: "month-controller" }, index.h("div", { key: '8d7330c4e3951a001203c5f08af7495b320da5c9', class: "cal-year-prev-next" }, index.h("q2-btn", { key: 'e725c2476177186c83ecdf31ca8ebfabb3c132c7', label: index$1.loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, index.h("q2-icon", { key: '4a6b9d629c98cbdc248cfd66694cf610f2ca4423', type: "arrow-left" })), index.h("q2-btn", { key: '797eb8389dbffd0e1e2588d68799be8dc425ef85', label: index$1.loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, index.h("q2-icon", { key: 'c75dfb662cf8cf336b059650d24e8f22397dd9d5', type: "arrow-right" }))))), index.h("div", { key: '18b5c98c2bc3d4c9f353b79b99fbc76c91942724', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index$1) => (index.h("div", { class: "month" }, index.h("span", { role: "button", class: "month-button", "data-index": index$1, "aria-label": month.label, tabindex: index$1 === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (index.h("div", { key: '96451bd771873ee8643221db902dcf70bfa8df1c', class: "today-label" }, index$1.loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, index.h("span", { key: 'c6f84bf595bf100315098d9afd5df8e70506a79d', class: "year" }, this.year), index.h("q2-icon", { key: 'f1cb6d06f24c3bdd3247b4d6a6af04efc481fc67', class: "year-icon off", type: "chevron-down" })), index.h("div", { key: 'c617358f45586c3d7a6492e3573ec92b810535ab', class: "month-controller" }, index.h("div", { key: '500c5a6765139d5b62449a0ba388494e85524d0a', class: "cal-year-prev-next" }, index.h("q2-btn", { key: '697f65cfd3d52698f7004395d428848548fbc856', label: index$1.loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, index.h("q2-icon", { key: 'aa83487a228127ef847439d876172afa17c3557e', type: "arrow-left" })), index.h("q2-btn", { key: '0813d6a858b325ba240bc1c9c84196a810e231ec', label: index$1.loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, index.h("q2-icon", { key: '2c8f1259ebafba900e913dffeb1b5df05d37f916', type: "arrow-right" }))))), index.h("div", { key: '27bdc96d859976a0c1483aabef3794ada911f02a', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index$1) => (index.h("div", { class: "month" }, index.h("span", { role: "button", class: "month-button", "data-index": index$1, "aria-label": month.label, tabindex: index$1 === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (index.h("div", { key: 'ccd5c945bc1abcc38e545577178678e4c0ca54dc', class: "today-label" }, index$1.loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-optgroup.cjs.entry.js CHANGED Viewed

@@ -53,7 +53,7 @@ const Q2Optgroup = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: 'a4aa78ea138abae562f4171acd8b0b86747f7fa2', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: '80eccf2178714afe5aa742176e5c982e86941789', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: '934682de3e212ef449cad6be24ff2c6d6a8e3bcf', class: "q2-optgroup-options" }, index.h("slot", { key: 'e0f90a3bac305ef163e508ce4dddd92a3dfecadf' }))));
+        return (index.h("div", { key: 'f90682c8578b1f2b99ce5c4d0babf9014a91b90a', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: 'ab4c0d3663ec1de61afc73b627b16d2ce07ac7f1', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: 'c4d1132b03317e468909df943b1dfdee09a8f00f', class: "q2-optgroup-options" }, index.h("slot", { key: 'ca578208cd825c9d5d08adeb6ce89e221dc3ad57' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -687,6 +687,10 @@ const Q2Popover = class {
     // #region Component Lifecycle Events
     disconnectedCallback() {
         this.removeViewportListeners();
+        this.containerElement = null;
+        this.contentElement = null;
+        this.controlElement = null;
+        this.rootElementRect = null;
     }
     componentDidLoad() {
         this.handleMinHeight();
@@ -758,7 +762,7 @@ const Q2Popover = class {
         visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener('resize', this.viewPortChanged);
         // #region remove when Popover API is supported in iOS
         window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });
-        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.viewPortOrientationChanged);
+        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('orientationchange', this.viewPortOrientationChanged);
         window.addEventListener('orientationchange', this.viewPortOrientationChanged);
         // #endregion
     }
@@ -833,7 +837,7 @@ const Q2Popover = class {
         window.removeEventListener('resize', this.viewPortOrientationChanged);
         visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener('resize', this.viewPortChanged);
         // #region remove when Popover API is supported in iOS
-        window.removeEventListener('scroll', this.viewPortChanged);
+        window.removeEventListener('scroll', this.viewPortChanged, { capture: true });
         (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('orientationchange', this.viewPortOrientationChanged);
         window.removeEventListener('orientationchange', this.viewPortOrientationChanged);
         // #endregion
@@ -897,7 +901,7 @@ const Q2Popover = class {
             containerClasses.push('show');
         if (this.mode === 'legacy')
             containerClasses.push('legacy');
-        return (index.h("div", { key: '0d638a8870e04fed2741e2654dfcf0dfd8abec9f', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, index.h("div", { key: '69a38b7a374a979675dc039b247d8abf88662fae', ref: el => (this.contentElement = el), class: "content" }, index.h("slot", { key: 'da9b5c29369f776443e258b0727492a46541dffa' }))));
+        return (index.h("div", { key: 'c6811c849c6782e77a762a227192dd169b5b8a44', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, index.h("div", { key: '21cd6d307e22fec14249c02b2976b2f542a11aa8', ref: el => (this.contentElement = el), class: "content" }, index.h("slot", { key: '20747824b57f94c6edee7bde429135f9a03b1bc5' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {