npm - q2-tecton-elements - Versions diffs - 1.55.4 → 1.55.5 - Mend

q2-tecton-elements 1.55.4 → 1.55.5

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

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

	@@ -1 +1 @@
1	- {"file":"q2-editable-field.js","mappings":"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","names":["Q2EditableField"],"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.js","mappings":"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","names":["Q2EditableField"],"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/components/q2-example.js CHANGED Viewed

@@ -128,7 +128,7 @@ const Q2Example$1 = /*@__PURE__*/ proxyCustomElement(class Q2Example extends HTM
             }, onClick: () => this.tctClick.emit(), role: "menu" }, h("slot", null))));
     }
     render() {
-        return h(Host, { key: 'a89b3080a47ebc5401317f5620c918ff2c34bac2', attribute: "navigation" }, this.renderMenuInner());
+        return h(Host, { key: 'e4df51465f7c14e0ff4ae2463613e73cc6100318', attribute: "navigation" }, this.renderMenuInner());
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/q2-form.js CHANGED Viewed

@@ -11,7 +11,7 @@ const Q2Checkbox = /*@__PURE__*/ proxyCustomElement(class Q2Checkbox extends HTM
         this.spacing = 'normal';
     }
     render() {
-        return (h("div", { key: '377fbc8245a6d6734536a37f3d733384801fd00b', class: "container" }, h("slot", { key: '73d1054f5ca1af44c78a4f85b1009143989a5530' })));
+        return (h("div", { key: 'aa542ff0f5ecdee36ffdb070cb863553c3d725bc', class: "container" }, h("slot", { key: '980dc6939c003dfbd57189e7ba9fb151033e8b29' })));
     }
     static get style() { return Q2FormStyle0; }
 }, [1, "q2-form", {

package/dist/components/q2-formatted-text.js CHANGED Viewed

@@ -53,7 +53,7 @@ const Q2FormattedText$1 = /*@__PURE__*/ proxyCustomElement(class Q2FormattedText
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (h("div", { key: '29aac8ea5e737d01243d42d0a9790d18a11f768c', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '613fe3f2d365edd4a2ffefd37ac2ec4f05220978' }, this.formattedValue)));
+        return (h("div", { key: 'f8729c7f3dea39a14da8add529ae642e78d20643', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '94390c62b148e3a0ce2d470377818ac442e9257e' }, this.formattedValue)));
     }
     static get watchers() { return {
         "value": ["propsUpdated"],

package/dist/components/q2-icon2.js CHANGED Viewed

@@ -572,6 +572,10 @@ const Q2Icon = /*@__PURE__*/ proxyCustomElement(class Q2Icon extends HTMLElement
         // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari
         (_d = this.spriteUse) === null || _d === void 0 ? void 0 : _d.setAttribute('href', `#${appendedClone.id}`);
     }
+    disconnectedCallback() {
+        this.spriteGroup = null;
+        this.spriteUse = null;
+    }
     // #endregion
     // #region Watchers
     handleIcon() {

package/dist/components/q2-icon2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-icon2.js","mappings":"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","names":[],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, 1.5);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n // #region Own Properties\n\n spriteGroup: SVGElement;\n spriteUse: SVGElement;\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 iconClone: SVGSymbolElement;\n\n // #endregion\n // #region Public Property API\n\n /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true })\n inline: boolean;\n\n /* The text that is presented by screen-readers when they encounter the icon. /\n @Prop({ reflect: true })\n label: string;\n\n /* The name of the icon to be displayed. /\n @Prop({ reflect: true })\n type: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tecton-sprite-${spriteFileName}`;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n const spriteContainer = this.getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.querySelector(`#${spriteId}`);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n cloneSpriteNode() {\n const spriteContainer = this.getOrCreateSpriteContainer();\n const spriteNode = spriteContainer.querySelector<HTMLElement>(`#tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.querySelector(`#${spriteId}`);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n /\n Checks for the sprite container element in the global DOM\n * If it does not exist, it creates and appends it to the body\n */\n getOrCreateSpriteContainer() {\n const spriteContainerId = 'tecton-sprites';\n let spriteContainer: HTMLDivElement = document.querySelector(`#${spriteContainerId}`);\n\n if (spriteContainer) return spriteContainer;\n spriteContainer = document.createElement('div');\n spriteContainer.id = spriteContainerId;\n spriteContainer.style.display = 'none';\n document.body.appendChild(spriteContainer);\n return spriteContainer;\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={!!label ? undefined : 'true'}\n role={!!label ? 'img' : undefined}\n aria-labelledby={!!label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {!!label && <title id=\"label\">{label}</title>}\n {!!type && <use ref={el => (this.spriteUse = el)} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </svg>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-icon2.js","mappings":"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","names":[],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, 1.5);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n // #region Own Properties\n\n spriteGroup: SVGElement;\n spriteUse: SVGElement;\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 iconClone: SVGSymbolElement;\n\n // #endregion\n // #region Public Property API\n\n /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true })\n inline: boolean;\n\n /* The text that is presented by screen-readers when they encounter the icon. /\n @Prop({ reflect: true })\n label: string;\n\n /* The name of the icon to be displayed. /\n @Prop({ reflect: true })\n type: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n }\n\n disconnectedCallback(): void {\n this.spriteGroup = null;\n this.spriteUse = null;\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tecton-sprite-${spriteFileName}`;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n const spriteContainer = this.getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.querySelector(`#${spriteId}`);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n cloneSpriteNode() {\n const spriteContainer = this.getOrCreateSpriteContainer();\n const spriteNode = spriteContainer.querySelector<HTMLElement>(`#tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.querySelector(`#${spriteId}`);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n /\n Checks for the sprite container element in the global DOM\n * If it does not exist, it creates and appends it to the body\n */\n getOrCreateSpriteContainer() {\n const spriteContainerId = 'tecton-sprites';\n let spriteContainer: HTMLDivElement = document.querySelector(`#${spriteContainerId}`);\n\n if (spriteContainer) return spriteContainer;\n spriteContainer = document.createElement('div');\n spriteContainer.id = spriteContainerId;\n spriteContainer.style.display = 'none';\n document.body.appendChild(spriteContainer);\n return spriteContainer;\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={!!label ? undefined : 'true'}\n role={!!label ? 'img' : undefined}\n aria-labelledby={!!label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {!!label && <title id=\"label\">{label}</title>}\n {!!type && <use ref={el => (this.spriteUse = el)} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </svg>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-input2.js CHANGED Viewed

@@ -3539,7 +3539,7 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
         return (h(Fragment, null, hasCustomDisplaySlot && (h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }))), h("input", { ref: el => (this.inputRef = el), class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, maxlength: ['date', 'currency'].includes(this.type) ? undefined : this.maxlength || undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-activedescendant": ariaActivedescendant, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect === 'on' ? 'on' : 'off', autofocus: this.autofocus, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: this._role, "test-id": "inputField", readonly: this.readonly || this._preventEntry, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode, pattern: this.pattern || undefined })));
     }
     render() {
-        return (h("div", { key: 'fbf148503e4dbf8fb9b033fecf698e4021fd763f', class: this.wrapperClasses }, h("div", { key: 'b8820ad0d238ba787775c793bb8757c60dcb82fd', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this)));
+        return (h("div", { key: '2cc30e91a73c9add9f82e794a0e04266fe5e8e78', class: this.wrapperClasses }, h("div", { key: '64baf86fc032a16240e7d4afb9985de4ed63346f', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this)));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-item2.js CHANGED Viewed

@@ -107,7 +107,7 @@ const Q2Item = /*@__PURE__*/ proxyCustomElement(class Q2Item extends HTMLElement
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: '4afba65f3586f010f5e6f6faa72ab04d6ec79fb8', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '778ec58acfdc9a57662cb070028c5efbaced8056', class: this.bulletClasses }, h("slot", { key: '6429ec996adb7b400f7dbc37e66196394b2e4c5d', name: "bullet" }))), h("div", { key: '2a81129ad24d95857183c72813d60eb785ee1b2d', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '53315a1d62bc8ffc6f2f910e881659d61c670fbf', class: "header" }, h("slot", { key: 'a11063eda67cd353a7742397a4701c7939193d09', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '903998a8a296b11c60ce105b6bb181badee3580c', class: "body" }, h("slot", { key: 'c47b8387918feea518d56b25d2f4770a1cae9c00', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '7b44a3c72b6d8cca1b409b9a37764a317ba8acb7', class: this.actionClasses }, h("slot", { key: 'ea50fb238aeae9c96276cf53234cfe2bdea55b42', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '636e87198073af605443840a79ef2640ad7d4552', class: this.footerClasses }, h("slot", { key: '9b9112e049d8e6f2d5983ad499ad27ee6ec08b14', name: "footer" })))));
+        return (h("div", { key: '7b0894fa0180d68cba7b47a6e63f837255a70057', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '5ef5a26d2fb4644e9b9d902bc7ff314a90df9976', class: this.bulletClasses }, h("slot", { key: '7db082ffd73b04494e67cbdee93b140afb11e016', name: "bullet" }))), h("div", { key: '42212f56e12da4b57ae14b613efcdc59fbbc93b4', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '9153d8de21c4809716f17f31717d97463bb045a5', class: "header" }, h("slot", { key: 'ab504063f003daa1ea3984555ccf703426116dc0', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '1a8b650df30033853919f6492aaa194f60a11c60', class: "body" }, h("slot", { key: 'b8262d4ef02751e63b62b525543394d0f14824db', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '056bc3b9f932495baf46613b66857325d19c0e3b', class: this.actionClasses }, h("slot", { key: 'f5332dd36657b470c993b773195044f7c809fe66', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '111359c030a37ad8e72df6e3a40d8b8d226a4734', class: this.footerClasses }, h("slot", { key: '8afe6c9372a9c53663d6383116256f19b470858b', name: "footer" })))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ItemStyle0; }

package/dist/components/q2-legend2.js CHANGED Viewed

@@ -105,7 +105,7 @@ const Q2Legend = /*@__PURE__*/ proxyCustomElement(class Q2Legend extends HTMLEle
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '1253e1dba3334134aa16432ef4dd7e71a87d1420', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'd9252af5543da55989ec69b18b4438624c39a90e' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, 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) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: '17df977aa81845d2b4e6db411b2860495ba61e4b', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '21d4f05b1b2e5f5374e04a8a93249704043ed447' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, 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) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get watchers() { return {
         "hoveredItemId": ["watchHoveredItemId"],

package/dist/components/q2-list2.js CHANGED Viewed

@@ -70,7 +70,7 @@ const Q2List = /*@__PURE__*/ proxyCustomElement(class Q2List extends HTMLElement
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '815b7bb01cdd74d76d2390a9e969484189682c6b', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '3495d4aa9461d655f0c5bf5c67ce26b320324675', class: this.headerClasses }, h("div", { key: '9b5f21524fc50f41a38b7ff234cca04142e4783b', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '4765b21b09161cad072e90f351e55d210c07a33c', name: "filter" }))), h("div", { key: '9157531d4ee7d3362fd23ae665dcc8f4ca28fd8d', role: "list" }, h("slot", { key: '6cfa2724ee61b1b2271d673b6b71113e7bfd06e7' }))));
+        return (h("div", { key: 'cb7c090b2e018bc46ef3ae829f4fd7f3cbb896e8', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '16672b343894a78a378b17e18f21b1412b103683', class: this.headerClasses }, h("div", { key: '4f78dabab7f982fb6e472c29195bbcc8f4c6758c', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '7ce97a75b66749f137a6c1b70827ddcef60df8ce', name: "filter" }))), h("div", { key: '05f39d183177a30f3d5edacecafa57503e1bef9c', role: "list" }, h("slot", { key: '37be8bca5d3b81404db947d96605585b3a1cce32' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ListStyle0; }

package/dist/components/q2-message2.js CHANGED Viewed

@@ -65,7 +65,7 @@ const Q2Message = /*@__PURE__*/ proxyCustomElement(class Q2Message extends HTMLE
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: 'e74bbda0808b5430f9f3533d5cfe32463c246fb7', 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 && h("div", { key: '11f8a2db8016024dc4cd51567a6e95a1eaea8e75', class: "sr" }), h("div", { key: 'e6c4f2f7aff57d19e0da9f5d6240f14ae881ddb8', class: "sr message-label" }, messageLabel), h("div", { key: 'e473b74d78048bc8c370f724356066e963b8667e', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: 'adcaf51ebf8a023b8b1d5a6556c79b3c2b64d8cc' }))));
+        return (h("div", { key: 'ccca9e80908f73482c73f865743e5f7cd6438d99', 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 && h("div", { key: 'a9937495e83a7e0852034c36639d8c60ea3c30ac', class: "sr" }), h("div", { key: 'e650f7ef7c2544e44f63ce7a23f33f04145a7e83', class: "sr message-label" }, messageLabel), h("div", { key: 'daa66069373ac3030fb33dc3c88c0621c91bb6a4', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '464a52a941be194c1267beee2c1b307ece17f964' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2MessageStyle0; }

package/dist/components/q2-modal.js CHANGED Viewed

@@ -164,7 +164,7 @@ const Q2Modal$1 = /*@__PURE__*/ proxyCustomElement(class Q2Modal extends HTMLEle
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: '23605420f182cf36687c22f5d9a25512fe12aa1f', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'e0bd45778d125c39028e9a7e999b36cdd920d471', class: interiorClasses }, this.title && (h("header", { key: '4658009b1bd010941c7d3128306ab44a1da80194' }, this.title && h("h2", { key: 'ec33e00aa837cd0033f3a5f84f292ee7fb59fb45', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '19a02dda7a62729b20d79d7b380ac5225427a25b', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '513d17ba802c6681ec399e44fc07180568695cfb', type: "close" }))))), h("div", { key: 'd291afd421f5a4f4bcccb1e7762cf633f84ffce2', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '3e4256c22f6b1a0c4da33c6e950ad682115c0be8', class: "icon" }, h("q2-icon", { key: '9440c8af3d66157a1f66dbdbc15490e61d086ca8', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: 'a6a8451fea0accc0ebf1236bce6581db59af53e8', class: "image" }, h("img", { key: 'a512e1803682e81187647ecddc8ac77d0d07240c', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '128d28110b50319c978b96598f73b204a8b36c68', name: "content" }), this.description && h("p", { key: '498bc624e6187e76365d03e50ad7aeaed23c9a18', class: "description" }, this.description), this.customMarkup && (h("p", { key: '68c58bc1abbf26ed2729fd420b56db3e8b8cce10', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '090a95b0eae17b929781cea8292cc531f67f0cb7' }, h("q2-action-group", { key: 'f2b72a7b97df9771be3eeb7d09d8baca6522a2f6', "full-width": true }, h("slot", { key: 'b6eca7b862e41fecd08516ade207a6d444c08ed3', name: "action" }))))));
+        return (h("dialog", { key: '73f146b4e163c9395837b932588870487645b6ce', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '4219e99c0186ffe1a7e0d3a9e81334adb02a4979', class: interiorClasses }, this.title && (h("header", { key: '77d134b2d00f7e4221b25917ab46714446c19b22' }, this.title && h("h2", { key: '0f43942c22bd5b9ca7784bcd4c637c6fc3fb1203', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '6dcf3f2a05cf76a78cf8e2fddd4566d88ddb7421', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '8cdf1b3e2b4990547381f04527e0ca3116802949', type: "close" }))))), h("div", { key: 'e1bcef9f5eca9e2f4504abbbd4d90ba690e4a6d2', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '0bd5d3ca0d3f13c3879b752202697841fffabf94', class: "icon" }, h("q2-icon", { key: 'f236ba5a6f0b14fa865ace8f69813634fa65494c', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: '9c2978ebff4bdc67930fe2a5232b5fb92822e3c9', class: "image" }, h("img", { key: '6c5ac47ad9f780e6496b3c8464f003a7f76cbb58', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'cd4bb02b38c02115a5c8601cc0c4371cbe01611d', name: "content" }), this.description && h("p", { key: 'e94d10a5b24629b9a8c965b28a5b439a83e1324b', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'cfc781b852faeba9d089355a92809873f0efdda0', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '57c18d04f08e1e00bf3e869d84e8e2f9d8901ae5' }, h("q2-action-group", { key: '9f27a49f45568166416acf2a9df83d3d0da58cb2', "full-width": true }, h("slot", { key: '64a30e7f6ebaf5f5b99264235d5510835826f566', name: "action" }))))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ModalStyle0; }

package/dist/components/q2-month-picker.js CHANGED Viewed

@@ -146,10 +146,10 @@ const Q2MonthPicker$1 = /*@__PURE__*/ proxyCustomElement(class Q2MonthPicker ext
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'ef6f597bba438aaab680e81a46ead6824194be0b', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '47704b17e8e57736008bef75949940f45d9904f4', class: "navigation" }, h("q2-btn", { key: 'b93c143037130d7e7045ac0b6f9c3c9998b8fb71', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: '9208eb9402c7bd1d9a9d52db3153d4b027e2d676', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: 'e6a68034e723e758d9c9824d1a88aeefa73d4ef5', class: "navigation" }, h("q2-btn", { key: '552ca23bfaedc6a787ca78b6db0c027f13b94713', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: '5a955a89a4d24dca59bd3edcecdb3a183c6ee266', class: "year" }, this.year), h("q2-icon", { key: 'b1edd309501caa293294d1768324672737d7486b', class: "year-icon off", type: "chevron-down" })), h("div", { key: '307a38769bc318dc2b60f0c71cb50699d23c0b74', class: "month-controller" }, h("div", { key: 'e4248e62e113e5984220ebdb065c682b1e049214', class: "cal-year-prev-next" }, h("q2-btn", { key: '05845d8ec8daf805acb89f34867a0d6bba84b35f', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: 'e986148af0f9952a60910669e5b39280d31bc3bd', type: "arrow-left" })), h("q2-btn", { key: 'f1f05af3e9e4b570d738e91dbdbb6560e69c171b', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '0a4d0689881d13b43be98df62bd96b008c88b891', type: "arrow-right" }))))), h("div", { key: 'f80c97d98668100e9e086f5d665e881127ddd39d', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '83ddc501e823cf58e07784cae545a1a473ae263c', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: '758eeb0b67194fb19c191965684ec1f96663fb0e', class: "year" }, this.year), h("q2-icon", { key: 'c510bb62e965091cf52213ca7ea6b14fd5f00746', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'b523d3a4d99316266e494b1375ba0f7630e5a2b5', class: "month-controller" }, h("div", { key: '22ad01820573025add8690107ad17a173fee2551', class: "cal-year-prev-next" }, h("q2-btn", { key: '9305d7ea801adc18e2fa613f395c2ad3bcaf16b8', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '01e0409616245ff1f468a3945bf570697a745f7c', type: "arrow-left" })), h("q2-btn", { key: 'c89e7e4c668ab6c69caa767746e9eccbc127e321', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: 'd15cd07ed6ecc9d0ca4f6b2c1c66e7804195a912', type: "arrow-right" }))))), h("div", { key: 'bc5f547b283296e8caff1d10ab0babd269ff5d80', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '1ad90d319a3589309eec05791fe289c5a8813df9', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return this; }
     static get style() { return Q2MonthPickerStyle0; }

package/dist/components/q2-optgroup2.js CHANGED Viewed

@@ -51,7 +51,7 @@ const Q2Optgroup = /*@__PURE__*/ proxyCustomElement(class Q2Optgroup extends HTM
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'ac0997f3f9bd1b65dced4ac274c3f51a72b41858', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'a5b2c9d4c9e506f925fad95b272994516e8a6e39', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'bbbb697d598f71a7cf2ced1a59fbba713c9a7986', class: "q2-optgroup-options" }, h("slot", { key: '8e7fef13eb234ce7104fa4ce8227cf7792f4f9b6' }))));
+        return (h("div", { key: '72e78e35e909a826dbff58572ccf2eb922992ad8', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '3c25d95961cf0b41f1633782647a708043033bea', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '126e87b4daeb27564289a5c183f2fa155f8b086f', class: "q2-optgroup-options" }, h("slot", { key: '21e7c0f8f8992915b029343ce917ebb20f0579b5' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-option-list2.js CHANGED Viewed

@@ -575,7 +575,7 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class Q2OptionList extends
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: '608fc11b974c992855405ddd47cb340bde6be3dc' }, h("div", { key: 'a1cc689919b7099c559aa372adade9973aaad1d3', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: 'b68880e08145e4f055736b1e08d9e2da22cb10ef', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '3b0cf3b91296b54c060d0ab23b99dbe0630b6336' })))));
+        return (h(Host, { key: '5708785bddc01b545a3b2a94417ad415c6cba32e' }, h("div", { key: 'e6f36e235609824dae19e93edc14d8f8504eb860', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: 'cbdf42235da01a1fc10efcc0798edeb653fe26ae', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: 'cec72b3912c96f09a12c171e4227efd29a9097c9' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-pagination.js CHANGED Viewed

@@ -274,7 +274,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 total,
             });
         }
-        return (h("nav", { key: 'e18f02a628ca1451833e97815e058fdc1517b7c5', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '8801238ba154a24bcd118cf509091db356b0a1d1', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '81ad5cb26deb25850937b8cc9532c085c7ae7a7a', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '80e730df9072d5d807d21fa589bb743dfc3c47c1', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -283,10 +283,10 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: '8a0cf0a8b262edaf0077a355c71879744f76430b', class: "btn-group" }, h("q2-btn", { key: 'f6f72d75981cbc97fe6fd7fd716f5d92bd16ca9d', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '0ff61de6fd143ea8ea28ff08f2c22b2c4514cd2f', type: "chevron-double-left" })), h("q2-btn", { key: '6c31fb1cfc557a89a3471bae25d09be52897cfb7', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '6d0a5e92eff20620045439a95f13683d45b21ee9', type: "chevron-left" }))), h("div", { key: '4e7ece9248a798b9cb885f2b2811dbe43c53cc04', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '00925990c7d99ec9052d50eae011df20c55c0b95', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '5f4100b75ac2b1145b9de2d61c4b20eb5f490108', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'fcccaf8f66e18aade799cdb031d4109f9844d71f', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => {
+            })), h("div", { key: '4ac5c21e45e4d4aed43e01fd49a0f398cb2ffa0b', class: "btn-group" }, h("q2-btn", { key: '1f2a32ece3c921d9173e5d5958527d7c6e0e3910', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '11250e5b156691b6800475010416711941f60b95', type: "chevron-double-left" })), h("q2-btn", { key: 'af6e51286ec4017c92bf941a5b0aecfc5eb5e082', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '7090e6297c5983639e7113416101d1811e95d4c7', type: "chevron-left" }))), h("div", { key: 'e09c5ef5a837b14cdbd4a26f5acc71e47cfb6728', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '1dd05c355c04f568d17ccdfc927b570e8795c99f', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'a9e13e527bfe98e928a467c9c99e21cfadae182f', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '368f0f7ee7f23c45101362b0dacf9df0ee9cc41c', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page" })), h("span", { key: 'e0fdad1c715b9769b9c553f94200309f51a86607', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'dbe11e2baf541ce460b6337af343a7dc3d118556', class: "btn-group" }, h("q2-btn", { key: '4ac8658d56c414ffa1ba221450aa14e3dfc8e0e7', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'e6cbc43459c891d1bc8f54b85c3574d45a5c998b', type: "chevron-right" })), h("q2-btn", { key: 'ddafd0e4f3b12898ca349bb2ba94c148cc830214', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '7c1f82c1535d8cdbe0de180e7c426de2759bf282', type: "chevron-double-right" }))), h("div", { key: 'f27168fdb16b48520a9a3134e6a3db4acd1fa551', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page" })), h("span", { key: '29a9af7d27dc1f28387df6ef1dd052c2ce0c27ac', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '7cd9ea6486ef69c90bf03cac9f80fd575f78103a', class: "btn-group" }, h("q2-btn", { key: '138e654a3112debc75c12ab01cca93f9a768e7a9', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '2b6ab242a2f1d090c07675753c5b5a3f2b36ffe0', type: "chevron-right" })), h("q2-btn", { key: '35103fb040b0b9117c035a2808be49afaffaa9f2', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '47ee1ca35772437aad4319aa391b5623f3546500', type: "chevron-double-right" }))), h("div", { key: '639a79c43ddb8c2757ffb34b9f54da4e75323a80', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-pill.js CHANGED Viewed

@@ -354,7 +354,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '5fe692c7573238a78296f886bd692b0844f895bd', onChange: this.onClickElsewhere }, h("div", { key: '8cddac8df3418aca8d04be122b9e6aa48bc74902', class: wrapperClassNames.join(' ') }, h("div", { key: 'e745b7a2898c15da468cb0b00046099def363414', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '522395fae2eee423a40ad74610472d8ce67c3e84', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '6e91c9098217a94765f2f2cc9420257c4d8ad3f5', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '3607af8a2bcf760f2b2a235302a4fd0e28a4561b', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '999b8fbfcd6b11ba0aeffc3a5875b6f0a21e955a', class: "popover-content" }, h("div", { key: '10bcc35df0240b11da8e5df19db854576fe8dcbd', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: 'f2ada769ff4352ed962ca937172a8697e3a5b96b', name: "popover-top" })), h("q2-option-list", { key: '9b62b035a72927fea994a792630596d84401d8bb', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '1867828a0d847460d0ee6cb55a31114de91e188a' })), h("div", { key: 'd25e55fcbc1322bb79a5f61d9f0a957df90c3173', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: 'cd358ea147bf56405752ec90fa54d21576ba64bc', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: 'c6dfa2ec426f3a2e3f2623fa0f218045cf22bf65', onChange: this.onClickElsewhere }, h("div", { key: 'b06ee5e8fd7c66e535ae786bbc41b7bbb2f890f0', class: wrapperClassNames.join(' ') }, h("div", { key: '33cfc2f0ac6d50cde4ff3c4d301b81081018faa0', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'ce96d775d2cd1349ac8e982862bce850bfb7ff00', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: 'd7def68e55ecd39072d2b7a268459d01fa9f0715', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '962a7145528d951a7a56e51a8290e2a3d22fe469', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '35da2a4a0f9487329dd2f6599433278b842f5730', class: "popover-content" }, h("div", { key: '084bad243e6946269d3a4525bf98a6b717101a65', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '5f2e3b51085f841e816f5052f56a7ed89214e169', name: "popover-top" })), h("q2-option-list", { key: 'd176a943fd4a94ed519c42dcf1182931d02a8b13', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '34b6eb444aefb59b23c85d4354861135cf63919f' })), h("div", { key: 'b30d3f4dd110de4cc4ccc2887f9e936af5986db1', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '003d70ef29d638287629f4af176cf3d1852168be', name: "popover-bottom" })))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-popover2.js CHANGED Viewed

@@ -93,6 +93,10 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
     // #region Component Lifecycle Events
     disconnectedCallback() {
         this.removeViewportListeners();
+        this.containerElement = null;
+        this.contentElement = null;
+        this.controlElement = null;
+        this.rootElementRect = null;
     }
     componentDidLoad() {
         this.handleMinHeight();
@@ -163,7 +167,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         window.addEventListener('resize', this.viewPortOrientationChanged);
         // #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
     }
@@ -237,7 +241,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         var _a;
         window.removeEventListener('resize', this.viewPortOrientationChanged);
         // #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
@@ -301,7 +305,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
             containerClasses.push('show');
         if (this.mode === 'legacy')
             containerClasses.push('legacy');
-        return (h("div", { key: '7f8b390b6a1e7fd2b17603fb803591fd1cb62ba4', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, h("div", { key: '878b6b01de37233ce5cd9f36b694fad89d599b3e', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '83b9de3b4fe050d82d9473cc098bd599fe5c645b' }))));
+        return (h("div", { key: 'd32d4929d567609b450603228c6747cfaf60f42f', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, h("div", { key: 'bab899e8951dd534c21a09fbac84bae890bc932e', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '6b222ff386edeaf985dee48074ba30e68a95964c' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {