npm - q2-tecton-elements - Versions diffs - 1.56.2 → 1.56.4 - Mend

q2-tecton-elements 1.56.2 → 1.56.4

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

Files changed (289) hide show

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7a5365e2.js';
-import { a as handleAriaLabel, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc } from './index-c215e8ef.js';
+import { a as handleAriaLabel, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc } from './index-f2a66217.js';
 const q2EditableFieldCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";
 const Q2EditableFieldStyle0 = q2EditableFieldCss;
@@ -82,7 +82,6 @@ const Q2EditableField = class {
     componentDidRender() {
         this.scheduledAfterRender.forEach(fn => fn());
         this.scheduledAfterRender = [];
-        this.formattedValue = this.inputElement.formattedValue;
     }
     // #endregion
     // #region Listeners
@@ -114,6 +113,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
     /**
@@ -198,22 +200,19 @@ const Q2EditableField = class {
     get wrapperClass() {
         return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
     }
-    generateEditBtn() {
-        return (h("q2-btn", { ref: el => (this.editBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, disabled: this.disabled, "test-id": "editButton", onClick: this.editClick }, h("q2-icon", { type: "edit" })));
-    }
     generateEditStateDOM() {
         return (h("div", { class: this.wrapperClass, hidden: !this.editing }, 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 }), h("q2-btn", { ref: el => (this.cancelBtnElement = el), class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { ref: el => (this.saveBtnElement = el), class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
     }
     generateReadStateDOM() {
         if (this.persistentLabel && this.locLabel) {
-            return (h("div", { class: this.wrapperClass, hidden: this.editing }, h("dl", null, h("dt", { class: "read-state-label" }, this.locLabel), h("dd", null, h("span", { class: "text-wrapper" }, this.formattedValue || this.value), this.generateEditBtn()))));
+            return (h("div", { class: this.wrapperClass, hidden: this.editing }, h("dl", null, h("dt", { class: "read-state-label" }, this.locLabel), h("dd", null, h("span", { class: "text-wrapper" }, this.formattedValue || this.value), h("q2-btn", { ref: el => (this.editBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, disabled: this.disabled, "test-id": "editButton", onClick: this.editClick }, h("q2-icon", { type: "edit" }))))));
         }
-        return (h("div", { class: this.wrapperClass, hidden: this.editing }, h("div", { class: "text-wrapper" }, this.formattedValue || this.value), this.generateEditBtn()));
+        return (h("div", { class: this.wrapperClass, hidden: this.editing }, h("div", { class: "text-wrapper" }, this.formattedValue || this.value), h("q2-btn", { ref: el => (this.editBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, disabled: this.disabled, "test-id": "editButton", onClick: this.editClick }, h("q2-icon", { type: "edit" }))));
     }
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '045844a547274328958144578f205451727d9a82' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: 'cd976a515db2bc31d2fb16cae89358d5363dad9a' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

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

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

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

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

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

@@ -9,7 +9,7 @@ const Q2Checkbox = class {
         this.spacing = 'normal';
     }
     render() {
-        return (h("div", { key: 'befb2b017cd148d0ea0ce96a640911a8f973bce1', class: "container" }, h("slot", { key: '82eec71b0e44cfa7cf8d6559f62fd4cc64a68a1c' })));
+        return (h("div", { key: '75b376daf1c33d954674037fea49b27b00ab49c3', class: "container" }, h("slot", { key: '0d23b04de6f082f7985adecb3d4b9bf89f8efbf4' })));
     }
 };
 Q2Checkbox.style = Q2FormStyle0;

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

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

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement, c as createEvent } from './index-7a5365e2.js';
-import { o as overrideFocus, e as hasSlotContent } from './index-c215e8ef.js';
+import { o as overrideFocus, e as hasSlotContent } from './index-f2a66217.js';
 const q2ItemCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 const Q2ItemStyle0 = q2ItemCss;
@@ -105,7 +105,7 @@ const Q2Item = class {
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (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 && (h("div", { key: 'e24948885dc1c5adc00daf6c79f50ab6e12c1a5f', class: this.bulletClasses }, h("slot", { key: '3f7a9d142e999ae4e2d0f4030962a99b92d2009f', name: "bullet" }))), h("div", { key: '1fce62c21f3c0e2b99aa2687a19dbd6081043242', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: 'e73680590a2f8612d93ced7065e0cdb85c5690e9', class: "header" }, h("slot", { key: 'b550f6e06b3987b21a9e1340b6b3338304271513', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '5397462440a383586ad044b0fa3601b99151f6b6', class: "body" }, h("slot", { key: 'c33d16c661a9f18f154685598a93229e6b99b01d', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '12d47acdf2b4915d7db0b506552decf3e8339b15', class: this.actionClasses }, h("slot", { key: '35cd3d9956350f7839e3b32947ce646ac093e0b0', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '8ff5309d31bc9472721f0e67144ec16d79b5bc76', class: this.footerClasses }, h("slot", { key: '14b717dfd672f169a8ee7aedab6bb70d5a0f2dfe', name: "footer" })))));
+        return (h("div", { key: '50dfa5bbda8a2e9e999e8d2f8802769f364d89b1', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '1c26db2c974577f5fbbec8a01e6e9f4e9cef9f96', class: this.bulletClasses }, h("slot", { key: '91e7c3f7b1c8fc0d75fa33b4dca0c07e11257020', name: "bullet" }))), h("div", { key: '5942e7972b1bf3894e4854973b9f3a6667e578bf', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '21f2819f13d44e5ed8738e415c1e3d793fb75e44', class: "header" }, h("slot", { key: 'a6c8182d90972e7492ead940ae386fc1739209a7', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '91fbced71976b927615b32e54a7b9f42261d0d0e', class: "body" }, h("slot", { key: 'cd989467616bc33970cd1e32477678855c32ff79', name: "body" })))), this.hasActionSlotContent && (h("div", { key: 'ff878148864e9c18365e820c1b47937de4d57750', class: this.actionClasses }, h("slot", { key: '5b03288fd354d4d00ae9b3339e22374288897ceb', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '986e46c47edfee86e61937902a94aa25463cf6f3', class: this.footerClasses }, h("slot", { key: '5fbbe5165bb9e9fc700e01082aca5d7319d1e448', name: "footer" })))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -234,7 +234,7 @@ const Q2List = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'f4669851dfbd167e38d5ca50043f15d77cc0d800', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '528c9d5ebb2d5ed8924ad67f6f79415443d5bd93', class: this.headerClasses }, h("div", { key: '1c6a2dc44ae7d8c1664bcd8c96584d451f379918', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '116cace9b3451dad4e7b4c045989cd0d768216d2', name: "filter" }))), h("div", { key: '20f693f5b706961ad9f0fc9b6e934eb3d16211dc', role: "list" }, h("slot", { key: '260f0822b4bf149adc6b0269f3f09e9d4550b7a4' }))));
+        return (h("div", { key: 'b9a278c2835f8019f4ce77f3faad5245da4837be', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '9b748a716d57f3aa8cd1f951dd6dc6431e8ad598', class: this.headerClasses }, h("div", { key: '1ccc3478d514a9a977351579b83286c33dd01721', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '92220efb13353cf88f24adcc77bb9591b25bc94b', name: "filter" }))), h("div", { key: 'eacbad6f3cfe9b7c714771da194da02e480bf928', role: "list" }, h("slot", { key: 'f509ef608b8e016f1d22e93e66f8d10285dfad8f' }))));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -102,7 +102,7 @@ const Q2Legend = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '95da1d55b13d20ce807598d88339e36c45b52c49', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'dd9a72bab53b5a4093821fc6834fe13cdf8e65b9' }, 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: 'f1b2cc98ce1049fdab0a64f1bf716060cc8658c2', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '9310fd8b724fb252b7c8f76147d2447d48d1d14b' }, 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/esm/q2-loc.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, g as getElement } from './index-7a5365e2.js';
-import { l as loc } from './index-c215e8ef.js';
+import { l as loc } from './index-f2a66217.js';
 const Q2Loc = class {
     constructor(hostRef) {

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { o as overrideFocus, i as isEventFromElement, n as nextPaint, t as isFirefox, l as loc } from './index-c215e8ef.js';
+import { o as overrideFocus, i as isEventFromElement, n as nextPaint, t as isFirefox, l as loc } from './index-f2a66217.js';
 const q2MessageCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";
 const Q2MessageStyle0 = q2MessageCss;
@@ -62,7 +62,7 @@ const Q2Message = class {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (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 && h("div", { key: '0f0d5c38c9faa86f8aa80cca24580fd211d21db7', class: "sr" }), h("div", { key: '5d996e61acffbcbd7672ac62ff24df956b890c78', class: "sr message-label" }, messageLabel), h("div", { key: '9139aad1c78a1388a39ef44ede6c98a7082fad54', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: 'b9bac3aaf099af6d9ad0ecf024de89b92fe6c30d' }))));
+        return (h("div", { key: '6f3af6002aa956f2a62e66df60f86e4c3d2318ab', 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: 'be9dc7762c3b6142862d18adb51b37431e1c965e', class: "sr" }), h("div", { key: '123d2b573a948eaa40867097e882a495580dde0e', class: "sr message-label" }, messageLabel), h("div", { key: '31bec3d11a0fa60dde66d54053c1a92c842c55cf', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '8a15ba2c2b36a8f3b73cb211d817304abb38da9b' }))));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7a5365e2.js';
-import { p as debounce, w as waitForNextPaint, e as hasSlotContent } from './index-c215e8ef.js';
+import { p as debounce, w as waitForNextPaint, e as hasSlotContent } from './index-f2a66217.js';
 import { s as sanitizeHTMLString } from './sanitize-html-string-735c19f5.js';
 const q2ModalCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, 40vh);--comp-dialog-box-shadow:var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .message{font-size:1rem}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:\"\";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:flex;justify-content:space-between}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0;padding-top:0.5rem}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}";
@@ -157,7 +157,7 @@ const Q2Modal = class {
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: '30273b5d1cec5b21ea86f9ffc2a49bab6fd92737', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '65ad95c5f7f030c5d600022ad9054800a74c7165', class: interiorClasses }, this.title && (h("header", { key: 'd5e592cb3ecfd4255eb2498cd4976823c1f486cd' }, this.title && h("h2", { key: '11184e0132eec11c6191c2d26303126ad8b1f7d2', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '4aa2602d31a4d2665a15a9657ffa7685be383c6e', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: 'c8ac5c3ec739a6a5de2fc426d32e4e0c0cb070f0', type: "close" }))))), h("div", { key: 'b9ca1c39bd0bf93e98ff999a17e48eab5305d910', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '0e73d98e58f678f39cea7eca1edaae2ec301068d', class: "icon" }, h("q2-icon", { key: '54603ab9ea578570453885deb99a04aedcad32b3', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: '013e627b7a4b772eecaf08b4a3179670f86f5f90', class: "image" }, h("img", { key: '0250e63bbbb8927ff02346cd94653cd4a7fa6acb', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'd7c56222d99a7251f9e991f93a2b07e8e8fb9e93', name: "content" }), this.description && h("p", { key: 'd6b9582584579f96bb95d2727bb099ab19175046', class: "description" }, this.description), this.customMarkup && (h("p", { key: '761b77672e0cc7c3781aef9ac56cf2ac892d145b', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '351623e5d1e6251cc67bf3a0b9a0f6caf2753af6' }, h("q2-action-group", { key: '08350951cd2a3ffc150be56e49d6f57b0f68a66a', "full-width": true }, h("slot", { key: 'd244c6b82ed1a1ad8d469807e8438fd03bf415a8', name: "action" }))))));
+        return (h("dialog", { key: 'e261675529f0fca98e0df94747ab85a391675b56', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '92e29c8d96c9a200faa5de4bb745682adddc9672', class: interiorClasses }, this.title && (h("header", { key: 'c9be962ee668dd38bc9687b7513e1b8212271c13' }, this.title && h("h2", { key: '49408207c3bcab05902f2b086ad33c0a6f4bed5b', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '125ef2f2501db785ee64bf6cd0f2819c9fbb1c08', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '356f891879eb7236df237dea9ca3a04492e3ef9d', type: "close" }))))), h("div", { key: '8011acdd94084041c5638dd7f36b11383bc8d96b', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '1ea508709847537f75bec4dc6dffa994608f673a', class: "icon" }, h("q2-icon", { key: '498a9f7315cbe8b1a6a665a21fe3f059fbaeef75', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: '3cf8de8eff6f76a6d393d203e076a5342428efef', class: "image" }, h("img", { key: '661271b0feee6b05d65fe45be304a7a3c8724ef6', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'ff394b2cbcb073433820b1b749351dc23abf7ba0', name: "content" }), this.description && h("p", { key: '1a1ee0636c1519995711530fcf6ae6c142a3c6e3', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'aa28aaa4fcd83e1ba5663886f4ef6b9f3cc384f6', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '0934473d012524592ee0760b19333f50ca6ddd81' }, h("q2-action-group", { key: 'ecd8fee68fb7262800185fdd139d2bb79743092a', "full-width": true }, h("slot", { key: '6e603da8f98bfc10ff65d3d310d135e7931bed54', name: "action" }))))));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7a5365e2.js';
-import { l as loc, o as overrideFocus } from './index-c215e8ef.js';
+import { l as loc, o as overrideFocus } from './index-f2a66217.js';
 const q2MonthPickerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
 const Q2MonthPickerStyle0 = q2MonthPickerCss;
@@ -141,10 +141,10 @@ const Q2MonthPicker = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'dfa012542089f3e031225e11d942731d95caa467', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '2196be700d87a1e01b1f90e6f4b7d661d593bf48', class: "navigation" }, h("q2-btn", { key: 'ff943c45617ff8b3a17a9ef1b61b82e67356c300', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: 'a2cd6eda280f23475ee4f1ab29872e6667d4c7a6', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '17998748ded31646cb5ab2a9ec7b110c9fae386e', class: "navigation" }, h("q2-btn", { key: 'cedd674d79ffeab0fa6603cd17cc196030a1ea64', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: 'c6f84bf595bf100315098d9afd5df8e70506a79d', class: "year" }, this.year), h("q2-icon", { key: 'f1cb6d06f24c3bdd3247b4d6a6af04efc481fc67', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'c617358f45586c3d7a6492e3573ec92b810535ab', class: "month-controller" }, h("div", { key: '500c5a6765139d5b62449a0ba388494e85524d0a', class: "cal-year-prev-next" }, h("q2-btn", { key: '697f65cfd3d52698f7004395d428848548fbc856', 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: 'aa83487a228127ef847439d876172afa17c3557e', type: "arrow-left" })), h("q2-btn", { key: '0813d6a858b325ba240bc1c9c84196a810e231ec', 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: '2c8f1259ebafba900e913dffeb1b5df05d37f916', type: "arrow-right" }))))), h("div", { key: '27bdc96d859976a0c1483aabef3794ada911f02a', 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: 'ccd5c945bc1abcc38e545577178678e4c0ca54dc', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: '82dc9d7302ad2b286986601098343716052974d8', class: "year" }, this.year), h("q2-icon", { key: 'b7f2ff86e4ad317b38fb495145516975600e95e5', class: "year-icon off", type: "chevron-down" })), h("div", { key: '3544cee5c78dac5e9886e76a14bf7acc09916070', class: "month-controller" }, h("div", { key: 'a5a6ed45da80ea01f2ccb61518f48c6ceb69e99f', class: "cal-year-prev-next" }, h("q2-btn", { key: '38a50b26ef2652c70edd45fa062dd0a492bda180', 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: 'b8f64f6bace3a2136c1760ef9e000c7fabab4e23', type: "arrow-left" })), h("q2-btn", { key: '1d8a2d56bf3697a60e68c5716425427c9ce35f3e', 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: 'cf841e5dba06f28527cd9e89c3da94b84a3ff267', type: "arrow-right" }))))), h("div", { key: '61863a2ef6c42ad6dddf276835ec14e0b262120b', 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: 'baee50514a1673f651ed0724d2fe52faf1384037', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { c as createGuid, l as loc } from './index-c215e8ef.js';
+import { c as createGuid, l as loc } from './index-f2a66217.js';
 const q2OptgroupCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 const Q2OptgroupStyle0 = q2OptgroupCss;
@@ -49,7 +49,7 @@ const Q2Optgroup = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'f90682c8578b1f2b99ce5c4d0babf9014a91b90a', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'ab4c0d3663ec1de61afc73b627b16d2ce07ac7f1', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'c4d1132b03317e468909df943b1dfdee09a8f00f', class: "q2-optgroup-options" }, h("slot", { key: 'ca578208cd825c9d5d08adeb6ce89e221dc3ad57' }))));
+        return (h("div", { key: '16906b816decbeeaa6c86a6334d5c51459ed6419', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'c60a5fdeb4a8ea3696b4f9dc9c636bb6469dee43', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'ce8276d408d6358fadabd91b2abc6eb1143031c1', class: "q2-optgroup-options" }, h("slot", { key: 'd252050c0565f501f74ef493eec41490dcaa9576' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {