q2-tecton-elements 1.55.4 → 1.55.6

package/dist/q2-tecton-elements/q2-editable-field.entry.js

@@ -90,7 +90,6 @@ const c = class {
   componentDidRender() {
     this.scheduledAfterRender.forEach((t => t()));
     this.scheduledAfterRender = [];
-    this.formattedValue = this.inputElement.formattedValue;
   }
   // #endregion
   // #region Listeners
@@ -122,6 +121,9 @@ const c = class {
     if (!h(t, this.hostElement)) return;
     this.hostElement.shadowRoot.querySelector(this.editing ? "q2-input" : "q2-btn.begin-edit").focus();
   }
+  inputFormatted(t) {
+    this.formattedValue = t.detail.formattedValue;
+  }
   // #endregion
   // #region Public Methods API
   /**
@@ -200,19 +202,6 @@ const c = class {
   get wrapperClass() {
     return `q2-editable-field-wrapper ${this.editing ? "editing" : ""}`;
   }
-  generateEditBtn() {
-    return e("q2-btn", {
-      ref: t => this.editBtnElement = t,
-      class: "begin-edit",
-      label: `${d("tecton.element.editableField.edit")} ${this.locLabel}`,
-      "hide-label": true,
-      disabled: this.disabled,
-      "test-id": "editButton",
-      onClick: this.editClick
-    }, e("q2-icon", {
-      type: "edit"
-    }));
-  }
   generateEditStateDOM() {
     return e("div", {
       class: this.wrapperClass,
@@ -262,20 +251,40 @@ const c = class {
         class: "read-state-label"
       }, this.locLabel), e("dd", null, e("span", {
         class: "text-wrapper"
-      }, this.formattedValue || this.value), this.generateEditBtn())));
+      }, this.formattedValue || this.value), e("q2-btn", {
+        ref: t => this.editBtnElement = t,
+        class: "begin-edit",
+        label: `${d("tecton.element.editableField.edit")} ${this.locLabel}`,
+        "hide-label": true,
+        disabled: this.disabled,
+        "test-id": "editButton",
+        onClick: this.editClick
+      }, e("q2-icon", {
+        type: "edit"
+      })))));
     }
     return e("div", {
       class: this.wrapperClass,
       hidden: this.editing
     }, e("div", {
       class: "text-wrapper"
-    }, this.formattedValue || this.value), this.generateEditBtn());
+    }, this.formattedValue || this.value), e("q2-btn", {
+      ref: t => this.editBtnElement = t,
+      class: "begin-edit",
+      label: `${d("tecton.element.editableField.edit")} ${this.locLabel}`,
+      "hide-label": true,
+      disabled: this.disabled,
+      "test-id": "editButton",
+      onClick: this.editClick
+    }, e("q2-icon", {
+      type: "edit"
+    })));
   }
   // #endregion
   // #region Render Methods
   render() {
     return e("div", {
-      key: "e4537652284887776f863a690eef445a3bdaa3c6"
+      key: "4dd832e58ab37f49b7026b6b297de802c83f630b"
     }, this.generateEditStateDOM(), this.generateReadStateDOM());
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-editable-field.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2EditableFieldCss","Q2EditableFieldStyle0","Q2EditableField","this","scheduledAfterRender","cancelClick","event","stopPropagation","change","emit","editing","name","inputElement","setValue","defaultValue","editClick","inputChange","e","inputClick","inputInput","input","detail","formattedValue","innerValue","value","inputKeyDown","key","preventDefault","saveClick","valueFromInputProp","hostElement","shadowRoot","querySelector","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","onHostElementChange","isEventFromElement","onchange","queueMicrotask","hasErrors","focus","delegateFocus","clickCancel","_a","cancelBtnElement","click","clickEdit","editBtnElement","clickSave","saveBtnElement","options","waitForNextPaint","ariaLabelObserver","observesEditing","newValue","oldValue","push","errorsObserver","focusedElement","activeElement","isInputFocused","tagName","Array","isArray","errors","length","hasHints","hints","locLabel","label","loc","wrapperClass","generateEditBtn","h","ref","el","class","disabled","onClick","type","generateEditStateDOM","hidden","hideLabel","undefined","formatModifier","maxlength","onInput","onChange","onKeyDown","generateReadStateDOM","persistentLabel","render"],"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"],"mappings":"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"}
+{"version":3,"names":["q2EditableFieldCss","Q2EditableFieldStyle0","Q2EditableField","this","scheduledAfterRender","cancelClick","event","stopPropagation","change","emit","editing","name","inputElement","setValue","defaultValue","editClick","inputChange","e","inputClick","inputInput","input","detail","formattedValue","innerValue","value","inputKeyDown","key","preventDefault","saveClick","valueFromInputProp","hostElement","shadowRoot","querySelector","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","onHostElementChange","isEventFromElement","onchange","queueMicrotask","hasErrors","focus","delegateFocus","inputFormatted","clickCancel","_a","cancelBtnElement","click","clickEdit","editBtnElement","clickSave","saveBtnElement","options","waitForNextPaint","ariaLabelObserver","observesEditing","newValue","oldValue","push","errorsObserver","focusedElement","activeElement","isInputFocused","tagName","Array","isArray","errors","length","hasHints","hints","locLabel","label","loc","wrapperClass","generateEditStateDOM","h","class","hidden","ref","el","hideLabel","undefined","type","disabled","formatModifier","maxlength","onInput","onChange","onKeyDown","onClick","generateReadStateDOM","persistentLabel","render"],"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"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-example.entry.js

@@ -131,7 +131,7 @@ const d = class {
   }
   render() {
     return n(o, {
-      key: "a89b3080a47ebc5401317f5620c918ff2c34bac2",
+      key: "2a8810e8b8152257cb5f710570a7b60708f76bde",
       attribute: "navigation"
     }, this.renderMenuInner());
   }

package/dist/q2-tecton-elements/q2-form.entry.js

@@ -11,10 +11,10 @@ const i = class {
   }
   render() {
     return o("div", {
-      key: "377fbc8245a6d6734536a37f3d733384801fd00b",
+      key: "caf601b969251105caec706267978caae64478c7",
       class: "container"
     }, o("slot", {
-      key: "73d1054f5ca1af44c78a4f85b1009143989a5530"
+      key: "72983087473bc5c1eb88e0d610f54a414bad02d4"
     }));
   }
 };

package/dist/q2-tecton-elements/q2-formatted-text.entry.js

@@ -49,11 +49,11 @@ const s = class {
   render() {
     const {formattedTextClasses: t} = this;
     return e("div", {
-      key: "29aac8ea5e737d01243d42d0a9790d18a11f768c",
+      key: "5361b448c2dcd9deb0b52e97c399fe70402739b6",
       class: t,
       "aria-label": this.formattedValue
     }, e("span", {
-      key: "613fe3f2d365edd4a2ffefd37ac2ec4f05220978"
+      key: "989054158a669360d1908cd9bd613078d3fcfcb2"
     }, this.formattedValue));
   }
   static get watchers() {

package/dist/q2-tecton-elements/q2-item_3.entry.js

@@ -106,44 +106,44 @@ const d = class {
   render() {
     const {clickable: t} = this;
     return e("div", {
-      key: "4afba65f3586f010f5e6f6faa72ab04d6ec79fb8",
+      key: "bc07c660098ad5236aeb3a925541bb655272ad1d",
       "test-id": "itemContainer",
       class: this.itemClasses,
       ref: t => this.itemElement = t,
       role: t ? "button" : undefined,
       tabIndex: t ? 0 : undefined
     }, this.hasBulletSlotContent && e("div", {
-      key: "778ec58acfdc9a57662cb070028c5efbaced8056",
+      key: "9f4fc9b8d77c4ceebd1c1532288bf4f74b5ec619",
       class: this.bulletClasses
     }, e("slot", {
-      key: "6429ec996adb7b400f7dbc37e66196394b2e4c5d",
+      key: "b244c86afa4ce153a49eadf1ff0f975c7c22873f",
       name: "bullet"
     })), e("div", {
-      key: "2a81129ad24d95857183c72813d60eb785ee1b2d",
+      key: "bd94e2e41171c738cc120bcac21e313d10a92d86",
       class: this.mainClasses
     }, this.hasHeaderSlotContent && e("div", {
-      key: "53315a1d62bc8ffc6f2f910e881659d61c670fbf",
+      key: "a45a52eb18000754a27c9dfb5db34cd1ac7117d2",
       class: "header"
     }, e("slot", {
-      key: "a11063eda67cd353a7742397a4701c7939193d09",
+      key: "1caa04a58064ddadfe9838d6537e7c85860b2671",
       name: "header"
     })), this.hasBodySlotContent && e("div", {
-      key: "903998a8a296b11c60ce105b6bb181badee3580c",
+      key: "5420a4bb0b8f79ddcbe7f83f35543c66a38a6eaf",
       class: "body"
     }, e("slot", {
-      key: "c47b8387918feea518d56b25d2f4770a1cae9c00",
+      key: "e21252069146947cdcfca63c42ebd9f5dabb4f64",
       name: "body"
     }))), this.hasActionSlotContent && e("div", {
-      key: "7b44a3c72b6d8cca1b409b9a37764a317ba8acb7",
+      key: "cdb5a454b1017fd64fe535cc843dac0498220690",
       class: this.actionClasses
     }, e("slot", {
-      key: "ea50fb238aeae9c96276cf53234cfe2bdea55b42",
+      key: "e519a4e72b11096f941bc68d1f334afaecdf61a2",
       name: "action"
     })), this.hasFooterSlotContent && e("div", {
-      key: "636e87198073af605443840a79ef2640ad7d4552",
+      key: "c03d5bd27317087e8bbdf61a3b4a6ed489070ea6",
       class: this.footerClasses
     }, e("slot", {
-      key: "9b9112e049d8e6f2d5983ad499ad27ee6ec08b14",
+      key: "010ef88185cc77bd471fdd1e5b0746ea77ecf5d0",
       name: "footer"
     })));
   }
@@ -302,23 +302,23 @@ const f = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "815b7bb01cdd74d76d2390a9e969484189682c6b",
+      key: "647fd58f76aef5077994f9a23a1741d10fb5f256",
       class: this.listClasses,
       ref: t => this.listElement = t
     }, (this.hasFilterSlot || this.hasLabelContent) && e("div", {
-      key: "3495d4aa9461d655f0c5bf5c67ce26b320324675",
+      key: "463450b42ec44b2ac1f22ad6b620ecc98d6db8f8",
       class: this.headerClasses
     }, e("div", {
-      key: "9b5f21524fc50f41a38b7ff234cca04142e4783b",
+      key: "792da568158522281d8c204759f4cfb49a62f5cc",
       class: "label"
     }, this.label), this.hasFilterSlot && e("slot", {
-      key: "4765b21b09161cad072e90f351e55d210c07a33c",
+      key: "ae70aee4513869c1cdc77fafeb645b4fb0a1f272",
       name: "filter"
     })), e("div", {
-      key: "9157531d4ee7d3362fd23ae665dcc8f4ca28fd8d",
+      key: "6d6be3031adf8dd8a491c7a945f350d50665cbed",
       role: "list"
     }, e("slot", {
-      key: "6cfa2724ee61b1b2271d673b6b71113e7bfd06e7"
+      key: "f81aa4bb6a4d5973bd84eb482782df5da9f0fb07"
     })));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-legend.entry.js

@@ -103,10 +103,10 @@ const a = class {
   // #region Render Methods
   render() {
     return i("click-elsewhere", {
-      key: "1253e1dba3334134aa16432ef4dd7e71a87d1420",
+      key: "541be05761592ed685067cf99e9e5a9b7ce9f445",
       onChange: () => this.onClickElsewhere(this)
     }, i("ul", {
-      key: "d9252af5543da55989ec69b18b4438624c39a90e"
+      key: "92fbbc5ae4d9ca2803645285c2faca4c9356a319"
     }, this.dataWithClasses.map((t => i("li", {
       class: "item"
     }, i("button", {

package/dist/q2-tecton-elements/q2-message.entry.js

@@ -1,4 +1,4 @@
-import { r as t, h as e, g as a } from "./index-7a5365e2.js";
+import { r as t, h as a, g as e } from "./index-7a5365e2.js";
 
 import { o as s, i as o, n as r, t as i, l as n } from "./index-f2a66217.js";
 
@@ -7,8 +7,8 @@ const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;bo
 const p = c;
 
 const d = class {
-  constructor(e) {
-    t(this, e);
+  constructor(a) {
+    t(this, a);
     this.presentToggle = undefined;
     this.appearance = "standard";
     this.description = false;
@@ -44,15 +44,15 @@ const d = class {
     return i();
   }
   messageIcon(t) {
-    const a = {
+    const e = {
       success: "success",
       warning: "warning",
       danger: "error",
       error: "error",
       info: "info"
     };
-    const s = a[t] || a.info;
-    return e("q2-icon", {
+    const s = e[t] || e.info;
+    return a("q2-icon", {
       type: s,
       class: "message-icon"
     });
@@ -61,35 +61,35 @@ const d = class {
   // #region Render Methods
   render() {
     const {isFirefox: t} = this;
-    const a = t && this.presentToggle;
+    const e = t && this.presentToggle;
     const s = !t && this.presentToggle;
     const {description: o} = this;
     const r = n(`tecton.element.message.type.${this.type ? this.type : "info"}`);
-    return e("div", {
-      key: "e74bbda0808b5430f9f3533d5cfe32463c246fb7",
+    return a("div", {
+      key: "f4161e85adba8c023d8ad135c955a312e145ad9a",
       tabindex: "-1",
       class: "message",
       role: o ? undefined : "alert",
       "aria-live": o ? undefined : "assertive",
       "aria-atomic": o ? undefined : "true",
-      "aria-relevant": o && a ? undefined : "all",
+      "aria-relevant": o && e ? undefined : "all",
       "test-id": "messageContainer"
-    }, this.appearance === "standard" ? this.messageIcon(this.type) : "", s && e("div", {
-      key: "11f8a2db8016024dc4cd51567a6e95a1eaea8e75",
+    }, this.appearance === "standard" ? this.messageIcon(this.type) : "", s && a("div", {
+      key: "75a17b9f1d17e1c051e7ed986d1382f83da6747b",
       class: "sr"
-    }), e("div", {
-      key: "e6c4f2f7aff57d19e0da9f5d6240f14ae881ddb8",
+    }), a("div", {
+      key: "4d1761c6d6391d2f6ed982add6effc441f7284f3",
       class: "sr message-label"
-    }, r), e("div", {
-      key: "e473b74d78048bc8c370f724356066e963b8667e",
+    }, r), a("div", {
+      key: "035a1040c019d8aa6eb6899e275469ab9edfc69d",
       class: "message-content",
-      "aria-hidden": a ? "true" : undefined
-    }, e("slot", {
-      key: "adcaf51ebf8a023b8b1d5a6556c79b3c2b64d8cc"
+      "aria-hidden": e ? "true" : undefined
+    }, a("slot", {
+      key: "59187a716f498e899c6c5bf6c81aca27dbfb32c2"
     })));
   }
   get hostElement() {
-    return a(this);
+    return e(this);
   }
 };
 

package/dist/q2-tecton-elements/q2-modal.entry.js

@@ -156,62 +156,62 @@ const l = class {
     const t = `interior`;
     const i = `${this.renderStatus || ""}`;
     return o("dialog", {
-      key: "23605420f182cf36687c22f5d9a25512fe12aa1f",
+      key: "14c7d74be95682be1c6523d495a2b35bcc247e4a",
       ref: t => this.dialogElement = t,
       class: i,
       onClick: this.onClick
     }, o("div", {
-      key: "e0bd45778d125c39028e9a7e999b36cdd920d471",
+      key: "64d3d8d9e01f4e8fee2ae452714e4eedd2570e68",
       class: t
     }, this.title && o("header", {
-      key: "4658009b1bd010941c7d3128306ab44a1da80194"
+      key: "d36f931c9f7ae0f14817abb9a6dedee6257a5664"
     }, this.title && o("h2", {
-      key: "ec33e00aa837cd0033f3a5f84f292ee7fb59fb45",
+      key: "39097ca1ee788258b9e349b8bc374b190ecaa8a5",
       class: "title"
     }, this.title), !!this.closable && o("q2-btn", {
-      key: "19a02dda7a62729b20d79d7b380ac5225427a25b",
+      key: "d1c9a7bd159e4c7fdfa557efca9204593f27803d",
       class: "btn-close",
       "test-id": "btnClose",
       onClick: this.onCancel,
       label: "tecton.element.modal.close",
       "hide-label": true
     }, o("q2-icon", {
-      key: "513d17ba802c6681ec399e44fc07180568695cfb",
+      key: "6225815f507315357b545a3177727f9f3438bccf",
       type: "close"
     }))), o("div", {
-      key: "d291afd421f5a4f4bcccb1e7762cf633f84ffce2",
+      key: "4988151b63997614a382f7241f60af147b120e88",
       class: "content",
       ref: t => this.contentElement = t
     }, this.icon && o("div", {
-      key: "3e4256c22f6b1a0c4da33c6e950ad682115c0be8",
+      key: "a54460f79a828bed7630108dd6f04ca1929dfbfb",
       class: "icon"
     }, o("q2-icon", {
-      key: "9440c8af3d66157a1f66dbdbc15490e61d086ca8",
+      key: "3bd18a8787e40183f1d71ddd48e6ca207062588b",
       type: this.icon,
       style: this.iconStyle()
     })), this.imageSrc && o("div", {
-      key: "a6a8451fea0accc0ebf1236bce6581db59af53e8",
+      key: "074f8bda9529d16d06630b4107a51e478a07d156",
       class: "image"
     }, o("img", {
-      key: "a512e1803682e81187647ecddc8ac77d0d07240c",
+      key: "608a63353a935f44dfe3c2b809f4f28b89c38b31",
       src: this.imageSrc
     })), s(this.hostElement, "content") && o("slot", {
-      key: "128d28110b50319c978b96598f73b204a8b36c68",
+      key: "4f23c254881c6840e05ac24b0ff712fd6e1f90df",
       name: "content"
     }), this.description && o("p", {
-      key: "498bc624e6187e76365d03e50ad7aeaed23c9a18",
+      key: "af66d8b53f300ff96b68d59a4e47bf5fe5a535ea",
       class: "description"
     }, this.description), this.customMarkup && o("p", {
-      key: "68c58bc1abbf26ed2729fd420b56db3e8b8cce10",
+      key: "bae1c644d7e41fd6389cf40689afe3c62dada367",
       class: "customMarkup",
       innerHTML: d(this.customMarkup)
     })), o("footer", {
-      key: "090a95b0eae17b929781cea8292cc531f67f0cb7"
+      key: "f5b4756a03b61a192074100ca8d0e2162a95ba58"
     }, o("q2-action-group", {
-      key: "f2b72a7b97df9771be3eeb7d09d8baca6522a2f6",
+      key: "3586e0321e11e3a97ee2d640d55d71fc502ee50f",
       "full-width": true
     }, o("slot", {
-      key: "b6eca7b862e41fecd08516ade207a6d444c08ed3",
+      key: "3a66978962bfdafe16dc1948d3fd31f8088c0100",
       name: "action"
     })))));
   }