npm - q2-tecton-elements - Versions diffs - 1.65.0 → 1.65.1 - Mend

q2-tecton-elements 1.65.0 → 1.65.1

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

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

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

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

@@ -198,7 +198,7 @@ const Q2EditableField = class {
         return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
     }
     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: e => e.stopImmediatePropagation(), onTctInput: this.inputInput, onTctChange: 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: e => e.stopImmediatePropagation(), onTctClick: 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: e => e.stopImmediatePropagation(), onTctClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
+        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", onChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.inputInput, onTctChange: 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: e => e.stopImmediatePropagation(), onTctClick: 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: e => e.stopImmediatePropagation(), onTctClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
     }
     generateReadStateDOM() {
         if (this.persistentLabel && this.locLabel) {
@@ -209,7 +209,7 @@ const Q2EditableField = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6773c95b44605f93ae04f2b026459ac76fafa281' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: '0083bb7919cd079285118b0b3c8b8e00025f36f0' }, 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	- {"version":3,"file":"q2-editable-field.entry.js","sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n max-width: 100%;\n}\n\n.q2-editable-field-wrapper {\n .begin-edit,\n .save-edit,\n .cancel-edit {\n flex: 0 0 44px;\n --tct-btn-icon-hover-background: #{var-list(\n --tct-editable-field-btn-hover-background,\n --app-gray-l3,\n #f2f2f2\n )};\n --tct-icon-stroke-primary: #{var-list(--tct-editable-field-btn-icon-stroke-primary, --app-gray, #747474)};\n --tct-icon-stroke-secondary: #{var-list(--tct-editable-field-btn-icon-stroke-secondary, --app-gray, #747474)};\n }\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n align-items: flex-end;\n}\n\n:host([block]) {\n display: block;\n width: 100%;\n .q2-editable-field-wrapper:not([hidden]) {\n display: grid;\n grid-template-columns: 1fr auto auto;\n }\n}\n\nq2-input,\n.text-wrapper {\n margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n flex: 1 1 auto;\n min-width: 170px;\n}\n\n.text-wrapper {\n flex: 0 auto;\n align-self: center;\n display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\ndl {\n margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n font-weight: 600;\n}\n\ndd {\n margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n display: flex;\n align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\n\n/*\n @name Editable Field\n * @category Forms\n * @summary Use for inline editing of data that is normally displayed as read-only.\n /\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n // #region Own Properties\n\n cancelBtnElement: HTMLQ2BtnElement;\n defaultValue: string;\n editBtnElement: HTMLQ2BtnElement;\n innerValue: string;\n inputElement: HTMLQ2InputElement;\n saveBtnElement: HTMLQ2BtnElement;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* If `true`, component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /* Disables the edit button and field. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* Controls the edit state of the element. /\n @Prop({ reflect: true, mutable: true })\n editing: boolean = false;\n\n /\n Determines the `errors` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop()\n errors: string[];\n\n /\n Determines the `formatModifier` applied to the `q2-input` element.\n * @info\n * Only applicable when `type=\"currency\"`.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /* Hide's the field's `<label>` element from view. /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Determines the `hints` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop()\n hints: string[];\n\n /\n The visible descriptor for the element.\n * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string = '';\n\n /\n Determines the `maxLength` applied to the `q2-input`.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop({ reflect: true })\n maxlength: number;\n\n /* Displays the provided label in the read state. /\n @Prop({ reflect: true })\n persistentLabel: boolean;\n\n /* Shortens long values with ellipses instead of splitting into multiple lines. /\n @Prop({ reflect: true })\n truncated: boolean;\n\n /\n Determines the `type` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.\n /\n @Prop({ reflect: true })\n type: Q2Input['type'];\n\n /* Serves as the visible text while in the read state, and the default value of the input while in the edit state. /\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n \n The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n @info\n If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n editing: boolean;\n name: 'edit' \| 'cancel' \| 'save';\n value?: string;\n formattedValue?: string;\n }>;\n\n /\n Emitted when the user updates the `q2-input` element in the editing state.\n * @deprecated Use 'tctInput' instead\n /\n @Event()\n input: EventEmitter<{ formattedValue: string; value: string }>;\n\n /\n Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n \n The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n \n @info\n * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n /\n @Event()\n tctChange: EventEmitter<{\n editing: boolean;\n name: 'edit' \| 'cancel' \| 'save';\n value?: string;\n formattedValue?: string;\n }>;\n\n /\n Emitted when the user updates the `q2-input` element in the editing state.\n /\n @Event()\n tctInput: EventEmitter<{ formattedValue: string; value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n\n this.defaultValue = this.value;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (!isEventFromElement(event, this.hostElement) \|\| this.hostElement.onchange) return;\n queueMicrotask(() => {\n switch (event.detail.name) {\n case 'save':\n if (this.hasErrors) {\n this.inputElement.focus();\n break;\n }\n this.value = event.detail.value;\n this.editing = event.detail.editing;\n break;\n\n case 'cancel':\n this.inputElement.value = this.value;\n this.editing = event.detail.editing;\n break;\n\n case 'edit':\n this.editing = event.detail.editing;\n break;\n }\n });\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n }\n\n @Listen('tctFormatted')\n inputFormatted(event: CustomEvent<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?: CustomEvent) => {\n event?.stopPropagation();\n mirrorEmit(this, ['change', 'tctChange'], { editing: false, name: 'cancel' });\n this.inputElement.setValue(this.defaultValue);\n };\n\n editClick = (event: CustomEvent) => {\n event?.stopPropagation();\n mirrorEmit(this, ['change', 'tctChange'], { editing: true, name: 'edit' });\n };\n\n generateEditStateDOM() {\n return (\n <div\n class={this.wrapperClass}\n hidden={!this.editing}\n >\n <q2-input\n ref={el => (this.inputElement = el)}\n label={this.locLabel}\n hideLabel={this.hideLabel}\n value={this.value}\n hints={this.hasHints ? this.hints : undefined}\n errors={this.hasErrors ? this.errors : undefined}\n type={this.type}\n disabled={this.disabled}\n formatModifier={this.formatModifier}\n maxlength={this.maxlength}\n test-id=\"editableInput\"\n onInput={e => e.stopImmediatePropagation()}\n onTctInput={this.inputInput}\n onTctChange={this.inputChange}\n onKeyDown={this.inputKeyDown}\n onClick={this.inputClick}\n />\n <q2-btn\n ref={el => (this.cancelBtnElement = el)}\n class=\"cancel-edit\"\n label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n hide-label\n test-id=\"cancelButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.cancelClick}\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n <q2-btn\n ref={el => (this.saveBtnElement = el)}\n class=\"save-edit\"\n label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n hide-label\n test-id=\"saveButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.saveClick}\n >\n <q2-icon type=\"checkmark\" />\n </q2-btn>\n </div>\n );\n }\n\n generateReadStateDOM() {\n if (this.persistentLabel && this.locLabel) {\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <dl>\n <dt class=\"read-state-label\">{this.locLabel}</dt>\n <dd>\n <span class=\"text-wrapper\">{this.formattedValue \|\| this.value}</span>\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n </dd>\n </dl>\n </div>\n );\n }\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <div class=\"text-wrapper\">{this.formattedValue \|\| this.value}</div>\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n </div>\n );\n }\n\n inputChange = (e: CustomEvent) => {\n e.stopPropagation();\n };\n\n inputClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n event.stopPropagation();\n mirrorEmit(this, ['input', 'tctInput'], event.detail);\n this.formattedValue = event.detail.formattedValue;\n this.innerValue = event.detail.value;\n };\n\n inputKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' \|\| e.key === 'Esc') {\n e.preventDefault();\n this.cancelClick();\n return;\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n this.saveClick();\n return;\n }\n };\n\n saveClick = (event?: CustomEvent) => {\n event && event.stopPropagation();\n const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n this.defaultValue = valueFromInputProp;\n mirrorEmit(this, ['change', 'tctChange'], {\n editing: false,\n name: 'save',\n value: this.innerValue \|\| valueFromInputProp,\n formattedValue: this.formattedValue \|\| valueFromInputProp,\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div>\n {this.generateEditStateDOM()}\n {this.generateReadStateDOM()}\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-editable-field.entry.js","sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n max-width: 100%;\n}\n\n.q2-editable-field-wrapper {\n .begin-edit,\n .save-edit,\n .cancel-edit {\n flex: 0 0 44px;\n --tct-btn-icon-hover-background: #{var-list(\n --tct-editable-field-btn-hover-background,\n --app-gray-l3,\n #f2f2f2\n )};\n --tct-icon-stroke-primary: #{var-list(--tct-editable-field-btn-icon-stroke-primary, --app-gray, #747474)};\n --tct-icon-stroke-secondary: #{var-list(--tct-editable-field-btn-icon-stroke-secondary, --app-gray, #747474)};\n }\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n align-items: flex-end;\n}\n\n:host([block]) {\n display: block;\n width: 100%;\n .q2-editable-field-wrapper:not([hidden]) {\n display: grid;\n grid-template-columns: 1fr auto auto;\n }\n}\n\nq2-input,\n.text-wrapper {\n margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n flex: 1 1 auto;\n min-width: 170px;\n}\n\n.text-wrapper {\n flex: 0 auto;\n align-self: center;\n display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\ndl {\n margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n font-weight: 600;\n}\n\ndd {\n margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n display: flex;\n align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\n\n/*\n @name Editable Field\n * @category Forms\n * @summary Use for inline editing of data that is normally displayed as read-only.\n /\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n // #region Own Properties\n\n cancelBtnElement: HTMLQ2BtnElement;\n defaultValue: string;\n editBtnElement: HTMLQ2BtnElement;\n innerValue: string;\n inputElement: HTMLQ2InputElement;\n saveBtnElement: HTMLQ2BtnElement;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* If `true`, component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /* Disables the edit button and field. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* Controls the edit state of the element. /\n @Prop({ reflect: true, mutable: true })\n editing: boolean = false;\n\n /\n Determines the `errors` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop()\n errors: string[];\n\n /\n Determines the `formatModifier` applied to the `q2-input` element.\n * @info\n * Only applicable when `type=\"currency\"`.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /* Hide's the field's `<label>` element from view. /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Determines the `hints` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop()\n hints: string[];\n\n /\n The visible descriptor for the element.\n * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string = '';\n\n /\n Determines the `maxLength` applied to the `q2-input`.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop({ reflect: true })\n maxlength: number;\n\n /* Displays the provided label in the read state. /\n @Prop({ reflect: true })\n persistentLabel: boolean;\n\n /* Shortens long values with ellipses instead of splitting into multiple lines. /\n @Prop({ reflect: true })\n truncated: boolean;\n\n /\n Determines the `type` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.\n /\n @Prop({ reflect: true })\n type: Q2Input['type'];\n\n /* Serves as the visible text while in the read state, and the default value of the input while in the edit state. /\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n \n The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n @info\n If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n editing: boolean;\n name: 'edit' \| 'cancel' \| 'save';\n value?: string;\n formattedValue?: string;\n }>;\n\n /\n Emitted when the user updates the `q2-input` element in the editing state.\n * @deprecated Use 'tctInput' instead\n /\n @Event()\n input: EventEmitter<{ formattedValue: string; value: string }>;\n\n /\n Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n \n The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n \n @info\n * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n /\n @Event()\n tctChange: EventEmitter<{\n editing: boolean;\n name: 'edit' \| 'cancel' \| 'save';\n value?: string;\n formattedValue?: string;\n }>;\n\n /\n Emitted when the user updates the `q2-input` element in the editing state.\n /\n @Event()\n tctInput: EventEmitter<{ formattedValue: string; value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n\n this.defaultValue = this.value;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (!isEventFromElement(event, this.hostElement) \|\| this.hostElement.onchange) return;\n queueMicrotask(() => {\n switch (event.detail.name) {\n case 'save':\n if (this.hasErrors) {\n this.inputElement.focus();\n break;\n }\n this.value = event.detail.value;\n this.editing = event.detail.editing;\n break;\n\n case 'cancel':\n this.inputElement.value = this.value;\n this.editing = event.detail.editing;\n break;\n\n case 'edit':\n this.editing = event.detail.editing;\n break;\n }\n });\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n }\n\n @Listen('tctFormatted')\n inputFormatted(event: CustomEvent<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?: CustomEvent) => {\n event?.stopPropagation();\n mirrorEmit(this, ['change', 'tctChange'], { editing: false, name: 'cancel' });\n this.inputElement.setValue(this.defaultValue);\n };\n\n editClick = (event: CustomEvent) => {\n event?.stopPropagation();\n mirrorEmit(this, ['change', 'tctChange'], { editing: true, name: 'edit' });\n };\n\n generateEditStateDOM() {\n return (\n <div\n class={this.wrapperClass}\n hidden={!this.editing}\n >\n <q2-input\n ref={el => (this.inputElement = el)}\n label={this.locLabel}\n hideLabel={this.hideLabel}\n value={this.value}\n hints={this.hasHints ? this.hints : undefined}\n errors={this.hasErrors ? this.errors : undefined}\n type={this.type}\n disabled={this.disabled}\n formatModifier={this.formatModifier}\n maxlength={this.maxlength}\n test-id=\"editableInput\"\n onChange={e => e.stopImmediatePropagation()}\n onInput={e => e.stopImmediatePropagation()}\n onTctInput={this.inputInput}\n onTctChange={this.inputChange}\n onKeyDown={this.inputKeyDown}\n onClick={this.inputClick}\n />\n <q2-btn\n ref={el => (this.cancelBtnElement = el)}\n class=\"cancel-edit\"\n label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n hide-label\n test-id=\"cancelButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.cancelClick}\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n <q2-btn\n ref={el => (this.saveBtnElement = el)}\n class=\"save-edit\"\n label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n hide-label\n test-id=\"saveButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.saveClick}\n >\n <q2-icon type=\"checkmark\" />\n </q2-btn>\n </div>\n );\n }\n\n generateReadStateDOM() {\n if (this.persistentLabel && this.locLabel) {\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <dl>\n <dt class=\"read-state-label\">{this.locLabel}</dt>\n <dd>\n <span class=\"text-wrapper\">{this.formattedValue \|\| this.value}</span>\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n </dd>\n </dl>\n </div>\n );\n }\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <div class=\"text-wrapper\">{this.formattedValue \|\| this.value}</div>\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n </div>\n );\n }\n\n inputChange = (e: CustomEvent) => {\n e.stopPropagation();\n };\n\n inputClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n event.stopPropagation();\n mirrorEmit(this, ['input', 'tctInput'], event.detail);\n this.formattedValue = event.detail.formattedValue;\n this.innerValue = event.detail.value;\n };\n\n inputKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' \|\| e.key === 'Esc') {\n e.preventDefault();\n this.cancelClick();\n return;\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n this.saveClick();\n return;\n }\n };\n\n saveClick = (event?: CustomEvent) => {\n event && event.stopPropagation();\n const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n this.defaultValue = valueFromInputProp;\n mirrorEmit(this, ['change', 'tctChange'], {\n editing: false,\n name: 'save',\n value: this.innerValue \|\| valueFromInputProp,\n formattedValue: this.formattedValue \|\| valueFromInputProp,\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div>\n {this.generateEditStateDOM()}\n {this.generateReadStateDOM()}\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,g0DAAg0D;;MCa90D,eAAe,GAAA,MAAA;AAD5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;AAUI,QAAA,IAAoB,CAAA,oBAAA,GAAmB,EAAE;;AA+BzC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAgCxB;;;;AAIG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AA4BlB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AA+MlB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAmB,KAAI;AAClC,YAAA,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,eAAe,EAAE;AACxB,YAAA,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;YAC7E,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC;AACjD,SAAC;AAED,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,KAAkB,KAAI;AAC/B,YAAA,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,eAAe,EAAE;AACxB,YAAA,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAC9E,SAAC;AAuGD,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,CAAc,KAAI;YAC7B,CAAC,CAAC,eAAe,EAAE;AACvB,SAAC;AAED,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,KAAiB,KAAI;YAC/B,KAAK,CAAC,eAAe,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,KAAoD,KAAI;YAClE,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC;YACrD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,cAAc;YACjD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;AACxC,SAAC;AAED,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAgB,KAAI;AAChC,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;gBACvC,CAAC,CAAC,cAAc,EAAE;gBAClB,IAAI,CAAC,WAAW,EAAE;gBAClB;;AAGJ,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACnB,CAAC,CAAC,cAAc,EAAE;gBAClB,IAAI,CAAC,SAAS,EAAE;gBAChB;;AAER,SAAC;AAED,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,KAAmB,KAAI;AAChC,YAAA,KAAK,IAAI,KAAK,CAAC,eAAe,EAAE;AAChC,YAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,KAAK;AACtF,YAAA,IAAI,CAAC,YAAY,GAAG,kBAAkB;YACtC,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE;AACtC,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,kBAAkB;AAC5C,gBAAA,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,kBAAkB;AAC5D,aAAA,CAAC;AACN,SAAC;AAeJ;;;IAhUG,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;AAErB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK;;IAGlC,gBAAgB,GAAA;AACZ,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGnC,kBAAkB,GAAA;AACd,QAAA,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC;AAC7C,QAAA,IAAI,CAAC,oBAAoB,GAAG,EAAE;;;;AAOlC,IAAA,mBAAmB,CAAC,KAAkB,EAAA;AAClC,QAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ;YAAE;QAC/E,cAAc,CAAC,MAAK;AAChB,YAAA,QAAQ,KAAK,CAAC,MAAM,CAAC,IAAI;AACrB,gBAAA,KAAK,MAAM;AACP,oBAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,wBAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;wBACzB;;oBAEJ,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;oBAC/B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;oBACnC;AAEJ,gBAAA,KAAK,QAAQ;oBACT,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;oBACpC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;oBACnC;AAEJ,gBAAA,KAAK,MAAM;oBACP,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;oBACnC;;AAEZ,SAAC,CAAC;;AAIN,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;QAClD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAc,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,mBAAmB,CAAC,CAAC,KAAK,EAAE;;AAInH,IAAA,cAAc,CAAC,KAAyC,EAAA;QACpD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,cAAc;;;;AAMrD;;;;AAIG;IAEH,WAAW,GAAA;;QACP,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;QACnB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;AAGlC;;;;AAIG;IAEH,SAAS,GAAA;;QACL,IAAI,IAAI,CAAC,OAAO;YAAE;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;AAGhC;;;;AAIG;IAEH,SAAS,GAAA;;QACL,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;QACnB,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;AAGhC;;;;;;;AAOG;IAEH,MAAM,QAAQ,CAAC,KAAa,EAAE,UAAmC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAA;AAChF,QAAA,MAAM,IAAI,CAAC,SAAS,EAAE;QACtB,MAAM,gBAAgB,EAAE;QAExB,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEvC,QAAA,IAAI,OAAO,CAAC,SAAS,EAAE;AACnB,YAAA,MAAM,IAAI,CAAC,SAAS,EAAE;YACtB,MAAM,gBAAgB,EAAE;;;;;IAQhC,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;;IAIzB,eAAe,CAAC,QAAiB,EAAE,QAAiB,EAAA;QAChD,IAAI,QAAQ,KAAK,QAAQ;YAAE;QAC3B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;;IAI1D,cAAc,GAAA;AACV,QAAA,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI;QACnC,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa;QAChE,MAAM,cAAc,GAAG,CAAA,cAAc,KAAd,IAAA,IAAA,cAAc,KAAd,MAAA,GAAA,MAAA,GAAA,cAAc,CAAE,OAAO,MAAK,UAAU;QAC7D,IAAI,cAAc,IAAI,CAAC,cAAc,IAAI,CAAC,OAAO,IAAI,CAAC,SAAS;YAAE;AACjE,QAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;;;;AAM7B,IAAA,IAAI,SAAS,GAAA;AACT,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;AAG7D,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;;AAG3D,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;;AAGhD,IAAA,IAAI,YAAY,GAAA;AACZ,QAAA,OAAO,CAA6B,0BAAA,EAAA,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE;;IAcvE,oBAAoB,GAAA;AAChB,QAAA,QACI,CAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,OAAO,EAAA,EAErB,CAAA,CAAA,UAAA,EAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACnC,KAAK,EAAE,IAAI,CAAC,QAAQ,EACpB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,EAC7C,MAAM,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAChD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,SAAA,EACjB,eAAe,EACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,wBAAwB,EAAE,EAC3C,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,wBAAwB,EAAE,EAC1C,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,YAAY,EAC5B,OAAO,EAAE,IAAI,CAAC,UAAU,EAC1B,CAAA,EACF,CACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACvC,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,CAAA,EAAG,GAAG,CAAC,qCAAqC,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,CAAE,CAAA,iCAE/D,cAAc,EACtB,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,wBAAwB,EAAE,EAC1C,UAAU,EAAE,IAAI,CAAC,WAAW,EAAA,EAE5B,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,OAAO,EAAA,CAAG,CACnB,EACT,CACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,CAAG,EAAA,GAAG,CAAC,mCAAmC,CAAC,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,EAAE,iCAE7D,YAAY,EACpB,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,wBAAwB,EAAE,EAC1C,UAAU,EAAE,IAAI,CAAC,SAAS,EAAA,EAE1B,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,WAAW,GAAG,CACvB,CACP;;IAId,oBAAoB,GAAA;QAChB,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,QAAQ,EAAE;AACvC,YAAA,QACI,CAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,MAAM,EAAE,IAAI,CAAC,OAAO,EAAA,EAEpB,CAAA,CAAA,IAAA,EAAA,IAAA,EACI,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,QAAQ,CAAM,EACjD,CAAA,CAAA,IAAA,EAAA,IAAA,EACI,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAE,EAAA,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAQ,EACrE,CACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,GAAG,GAAG,CAAC,mCAAmC,CAAC,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,EAAE,EAErE,YAAA,EAAA,IAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,SAAA,EACf,YAAY,EACpB,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,wBAAwB,EAAE,EAC1C,UAAU,EAAE,IAAI,CAAC,SAAS,EAAA,EAE1B,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAA,CAAG,CAClB,CACR,CACJ,CACH;;QAGd,QACI,CAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,MAAM,EAAE,IAAI,CAAC,OAAO,EAAA,EAEpB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAE,EAAA,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAO,EACnE,CACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,CAAA,EAAG,GAAG,CAAC,mCAAmC,CAAC,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,EAErE,YAAA,EAAA,IAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,SAAA,EACf,YAAY,EACpB,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,wBAAwB,EAAE,EAC1C,UAAU,EAAE,IAAI,CAAC,SAAS,EAAA,EAE1B,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,MAAM,GAAG,CAClB,CACP;;;;IAgDd,MAAM,GAAA;QACF,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACK,IAAI,CAAC,oBAAoB,EAAE,EAC3B,IAAI,CAAC,oBAAoB,EAAE,CAC1B;;;;;;;;;;;;;"}

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

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

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

@@ -212,6 +212,7 @@ const c = class {
       formatModifier: this.formatModifier,
       maxlength: this.maxlength,
       "test-id": "editableInput",
+      onChange: t => t.stopImmediatePropagation(),
       onInput: t => t.stopImmediatePropagation(),
       onTctInput: this.inputInput,
       onTctChange: this.inputChange,
@@ -283,7 +284,7 @@ const c = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "6773c95b44605f93ae04f2b026459ac76fafa281"
+      key: "0083bb7919cd079285118b0b3c8b8e00025f36f0"
     }, this.generateEditStateDOM(), this.generateReadStateDOM());
   }
   get hostElement() {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2EditableFieldCss","Q2EditableField","constructor","hostRef","this","scheduledAfterRender","editing","label","value","cancelClick","event","stopPropagation","mirrorEmit","name","inputElement","setValue","defaultValue","editClick","inputChange","e","inputClick","inputInput","detail","formattedValue","innerValue","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","loc","wrapperClass","generateEditStateDOM","h","class","hidden","ref","el","hideLabel","undefined","type","disabled","formatModifier","maxlength","onInput","stopImmediatePropagation","onTctInput","onTctChange","onKeyDown","onClick","onTctClick","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@import '../../styles/functions';\n\n:host {\n display: inline-block;\n max-width: 100%;\n}\n\n.q2-editable-field-wrapper {\n .begin-edit,\n .save-edit,\n .cancel-edit {\n flex: 0 0 44px;\n --tct-btn-icon-hover-background: #{var-list(\n --tct-editable-field-btn-hover-background,\n --app-gray-l3,\n #f2f2f2\n )};\n --tct-icon-stroke-primary: #{var-list(--tct-editable-field-btn-icon-stroke-primary, --app-gray, #747474)};\n --tct-icon-stroke-secondary: #{var-list(--tct-editable-field-btn-icon-stroke-secondary, --app-gray, #747474)};\n }\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n align-items: flex-end;\n}\n\n:host([block]) {\n display: block;\n width: 100%;\n .q2-editable-field-wrapper:not([hidden]) {\n display: grid;\n grid-template-columns: 1fr auto auto;\n }\n}\n\nq2-input,\n.text-wrapper {\n margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n flex: 1 1 auto;\n min-width: 170px;\n}\n\n.text-wrapper {\n flex: 0 auto;\n align-self: center;\n display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\ndl {\n margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n font-weight: 600;\n}\n\ndd {\n margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n display: flex;\n align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\n\n/*\n @name Editable Field\n * @category Forms\n * @summary Use for inline editing of data that is normally displayed as read-only.\n /\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n // #region Own Properties\n\n cancelBtnElement: HTMLQ2BtnElement;\n defaultValue: string;\n editBtnElement: HTMLQ2BtnElement;\n innerValue: string;\n inputElement: HTMLQ2InputElement;\n saveBtnElement: HTMLQ2BtnElement;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* If `true`, component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /* Disables the edit button and field. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* Controls the edit state of the element. /\n @Prop({ reflect: true, mutable: true })\n editing: boolean = false;\n\n /\n Determines the `errors` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop()\n errors: string[];\n\n /\n Determines the `formatModifier` applied to the `q2-input` element.\n * @info\n * Only applicable when `type=\"currency\"`.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /* Hide's the field's `<label>` element from view. /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Determines the `hints` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop()\n hints: string[];\n\n /\n The visible descriptor for the element.\n * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string = '';\n\n /\n Determines the `maxLength` applied to the `q2-input`.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop({ reflect: true })\n maxlength: number;\n\n /* Displays the provided label in the read state. /\n @Prop({ reflect: true })\n persistentLabel: boolean;\n\n /* Shortens long values with ellipses instead of splitting into multiple lines. /\n @Prop({ reflect: true })\n truncated: boolean;\n\n /\n Determines the `type` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.\n /\n @Prop({ reflect: true })\n type: Q2Input['type'];\n\n /* Serves as the visible text while in the read state, and the default value of the input while in the edit state. /\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n \n The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n @info\n If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n editing: boolean;\n name: 'edit' \| 'cancel' \| 'save';\n value?: string;\n formattedValue?: string;\n }>;\n\n /\n Emitted when the user updates the `q2-input` element in the editing state.\n * @deprecated Use 'tctInput' instead\n /\n @Event()\n input: EventEmitter<{ formattedValue: string; value: string }>;\n\n /\n Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n \n The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n \n @info\n * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n /\n @Event()\n tctChange: EventEmitter<{\n editing: boolean;\n name: 'edit' \| 'cancel' \| 'save';\n value?: string;\n formattedValue?: string;\n }>;\n\n /\n Emitted when the user updates the `q2-input` element in the editing state.\n /\n @Event()\n tctInput: EventEmitter<{ formattedValue: string; value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n\n this.defaultValue = this.value;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (!isEventFromElement(event, this.hostElement) \|\| this.hostElement.onchange) return;\n queueMicrotask(() => {\n switch (event.detail.name) {\n case 'save':\n if (this.hasErrors) {\n this.inputElement.focus();\n break;\n }\n this.value = event.detail.value;\n this.editing = event.detail.editing;\n break;\n\n case 'cancel':\n this.inputElement.value = this.value;\n this.editing = event.detail.editing;\n break;\n\n case 'edit':\n this.editing = event.detail.editing;\n break;\n }\n });\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n }\n\n @Listen('tctFormatted')\n inputFormatted(event: CustomEvent<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?: CustomEvent) => {\n event?.stopPropagation();\n mirrorEmit(this, ['change', 'tctChange'], { editing: false, name: 'cancel' });\n this.inputElement.setValue(this.defaultValue);\n };\n\n editClick = (event: CustomEvent) => {\n event?.stopPropagation();\n mirrorEmit(this, ['change', 'tctChange'], { editing: true, name: 'edit' });\n };\n\n generateEditStateDOM() {\n return (\n <div\n class={this.wrapperClass}\n hidden={!this.editing}\n >\n <q2-input\n ref={el => (this.inputElement = el)}\n label={this.locLabel}\n hideLabel={this.hideLabel}\n value={this.value}\n hints={this.hasHints ? this.hints : undefined}\n errors={this.hasErrors ? this.errors : undefined}\n type={this.type}\n disabled={this.disabled}\n formatModifier={this.formatModifier}\n maxlength={this.maxlength}\n test-id=\"editableInput\"\n onInput={e => e.stopImmediatePropagation()}\n onTctInput={this.inputInput}\n onTctChange={this.inputChange}\n onKeyDown={this.inputKeyDown}\n onClick={this.inputClick}\n />\n <q2-btn\n ref={el => (this.cancelBtnElement = el)}\n class=\"cancel-edit\"\n label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n hide-label\n test-id=\"cancelButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.cancelClick}\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n <q2-btn\n ref={el => (this.saveBtnElement = el)}\n class=\"save-edit\"\n label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n hide-label\n test-id=\"saveButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.saveClick}\n >\n <q2-icon type=\"checkmark\" />\n </q2-btn>\n </div>\n );\n }\n\n generateReadStateDOM() {\n if (this.persistentLabel && this.locLabel) {\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <dl>\n <dt class=\"read-state-label\">{this.locLabel}</dt>\n <dd>\n <span class=\"text-wrapper\">{this.formattedValue \|\| this.value}</span>\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n </dd>\n </dl>\n </div>\n );\n }\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <div class=\"text-wrapper\">{this.formattedValue \|\| this.value}</div>\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n </div>\n );\n }\n\n inputChange = (e: CustomEvent) => {\n e.stopPropagation();\n };\n\n inputClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n event.stopPropagation();\n mirrorEmit(this, ['input', 'tctInput'], event.detail);\n this.formattedValue = event.detail.formattedValue;\n this.innerValue = event.detail.value;\n };\n\n inputKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' \|\| e.key === 'Esc') {\n e.preventDefault();\n this.cancelClick();\n return;\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n this.saveClick();\n return;\n }\n };\n\n saveClick = (event?: CustomEvent) => {\n event && event.stopPropagation();\n const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n this.defaultValue = valueFromInputProp;\n mirrorEmit(this, ['change', 'tctChange'], {\n editing: false,\n name: 'save',\n value: this.innerValue \|\| valueFromInputProp,\n formattedValue: this.formattedValue \|\| valueFromInputProp,\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div>\n {this.generateEditStateDOM()}\n {this.generateReadStateDOM()}\n </div>\n );\n }\n\n // #endregion\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAqB;;MCadC,IAAe;EAD5B,WAAAC,CAAAC;;;;;;IAUIC,KAAoBC,uBAAmB;sDA+BvCD,KAAOE,UAAY;;;;;eAsCnBF,KAAKG,QAAW;8HA4BhBH,KAAKI,QAAW;IA+MhBJ,KAAAK,cAAeC;MACXA,MAAK,QAALA,WAAK,aAALA,EAAOC;MACPC,EAAWR,MAAM,EAAC,UAAU,eAAc;QAAEE,SAAS;QAAOO,MAAM;;MAClET,KAAKU,aAAaC,SAASX,KAAKY;AAAa;IAGjDZ,KAAAa,YAAaP;MACTA,MAAK,QAALA,WAAK,aAALA,EAAOC;MACPC,EAAWR,MAAM,EAAC,UAAU,eAAc;QAAEE,SAAS;QAAMO,MAAM;;AAAS;IAuG9ET,KAAAc,cAAeC;MACXA,EAAER;AAAiB;IAGvBP,KAAAgB,aAAcV;MACVA,EAAMC;AAAiB;IAG3BP,KAAAiB,aAAcX;MACVA,EAAMC;MACNC,EAAWR,MAAM,EAAC,SAAS,cAAaM,EAAMY;MAC9ClB,KAAKmB,iBAAiBb,EAAMY,OAAOC;MACnCnB,KAAKoB,aAAad,EAAMY,OAAOd;AAAK;IAGxCJ,KAAAqB,eAAgBN;MACZ,IAAIA,EAAEO,QAAQ,YAAYP,EAAEO,QAAQ,OAAO;QACvCP,EAAEQ;QACFvB,KAAKK;QACL;;MAGJ,IAAIU,EAAEO,QAAQ,SAAS;QACnBP,EAAEQ;QACFvB,KAAKwB;QACL;;;IAIRxB,KAAAwB,YAAalB;MACTA,KAASA,EAAMC;MACf,MAAMkB,IAAqBzB,KAAK0B,YAAYC,WAAWC,cAAc,YAAYxB;MACjFJ,KAAKY,eAAea;MACpBjB,EAAWR,MAAM,EAAC,UAAU,eAAc;QACtCE,SAAS;QACTO,MAAM;QACNL,OAAOJ,KAAKoB,cAAcK;QAC1BN,gBAAgBnB,KAAKmB,kBAAkBM;;AACzC;AAgBT;;;EA/TG,iBAAAI;IACIC,EAAgB9B;IAEhBA,KAAKY,eAAeZ,KAAKI;;EAG7B,gBAAA2B;IACIC,EAAchC,KAAK0B;;EAGvB,kBAAAO;IACIjC,KAAKC,qBAAqBiC,SAAQC,KAAMA;IACxCnC,KAAKC,uBAAuB;;;;EAOhC,mBAAAmC,CAAoB9B;IAChB,KAAK+B,EAAmB/B,GAAON,KAAK0B,gBAAgB1B,KAAK0B,YAAYY,UAAU;IAC/EC,gBAAe;MACX,QAAQjC,EAAMY,OAAOT;OACjB,KAAK;QACD,IAAIT,KAAKwC,WAAW;UAChBxC,KAAKU,aAAa+B;UAClB;;QAEJzC,KAAKI,QAAQE,EAAMY,OAAOd;QAC1BJ,KAAKE,UAAUI,EAAMY,OAAOhB;QAC5B;;OAEJ,KAAK;QACDF,KAAKU,aAAaN,QAAQJ,KAAKI;QAC/BJ,KAAKE,UAAUI,EAAMY,OAAOhB;QAC5B;;OAEJ,KAAK;QACDF,KAAKE,UAAUI,EAAMY,OAAOhB;QAC5B;;;;EAMhB,aAAAwC,CAAcpC;IACV,KAAK+B,EAAmB/B,GAAON,KAAK0B,cAAc;IAClD1B,KAAK0B,YAAYC,WAAWC,cAA2B5B,KAAKE,UAAU,aAAa,qBAAqBuC;;EAI5G,cAAAE,CAAerC;IACXN,KAAKmB,iBAAiBb,EAAMY,OAAOC;;;;;;;;;EAYvC,WAAAyB;;IACI,KAAK5C,KAAKE,SAAS;KACnB2C,IAAA7C,KAAK8C,sBAAkB,QAAAD,WAAA,aAAAA,EAAAE;;;;;;SAS3B,SAAAC;;IACI,IAAIhD,KAAKE,SAAS;KAClB2C,IAAA7C,KAAKiD,oBAAgB,QAAAJ,WAAA,aAAAA,EAAAE;;;;;;SASzB,SAAAG;;IACI,KAAKlD,KAAKE,SAAS;KACnB2C,IAAA7C,KAAKmD,oBAAgB,QAAAN,WAAA,aAAAA,EAAAE;;;;;;;;;SAYzB,cAAMpC,CAASP,GAAegD,IAAmC;IAAEF,WAAW;;UACpElD,KAAKgD;UACLK;UAEArD,KAAKU,aAAaC,SAASP;IAEjC,IAAIgD,EAAQF,WAAW;YACblD,KAAKkD;YACLG;;;;;EAQd,iBAAAC;IACIxB,EAAgB9B;;EAIpB,eAAAuD,CAAgBC,GAAmBC;IAC/B,IAAID,MAAaC,GAAU;IAC3BzD,KAAKC,qBAAqByD,KAAK1D,KAAK0B,YAAYe;;EAIpD,cAAAkB;IACI,OAAMzD,SAAEA,GAAOsC,WAAEA,KAAcxC;IAC/B,MAAM4D,IAAiB5D,KAAK0B,YAAYC,WAAWkC;IACnD,MAAMC,KAAiBF,MAAA,QAAAA,WAAA,aAAAA,EAAgBG,aAAY;IACnD,IAAID,MAAmBF,MAAmB1D,MAAYsC,GAAW;IACjExC,KAAKU,aAAa+B;;;;EAMtB,aAAID;IACA,OAAOwB,MAAMC,QAAQjE,KAAKkE,aAAalE,KAAKkE,OAAOC;;EAGvD,YAAIC;IACA,OAAOJ,MAAMC,QAAQjE,KAAKqE,YAAYrE,KAAKqE,MAAMF;;EAGrD,YAAIG;IACA,OAAQtE,KAAKG,SAASoE,EAAIvE,KAAKG,UAAW;;EAG9C,gBAAIqE;IACA,OAAO,6BAA6BxE,KAAKE,UAAU,YAAY;;EAcnE,oBAAAuE;IACI,OACIC,EAAA;MACIC,OAAO3E,KAAKwE;MACZI,SAAS5E,KAAKE;OAEdwE,EAAA;MACIG,KAAKC,KAAO9E,KAAKU,eAAeoE;MAChC3E,OAAOH,KAAKsE;MACZS,WAAW/E,KAAK+E;MAChB3E,OAAOJ,KAAKI;MACZiE,OAAOrE,KAAKoE,WAAWpE,KAAKqE,QAAQW;MACpCd,QAAQlE,KAAKwC,YAAYxC,KAAKkE,SAASc;MACvCC,MAAMjF,KAAKiF;MACXC,UAAUlF,KAAKkF;MACfC,gBAAgBnF,KAAKmF;MACrBC,WAAWpF,KAAKoF;MAAS,WACjB;MACRC,SAAStE,KAAKA,EAAEuE;MAChBC,YAAYvF,KAAKiB;MACjBuE,aAAaxF,KAAKc;MAClB2E,WAAWzF,KAAKqB;MAChBqE,SAAS1F,KAAKgB;QAElB0D,EACI;MAAAG,KAAKC,KAAO9E,KAAK8C,mBAAmBgC;MACpCH,OAAM;MACNxE,OAAO,GAAGoE,EAAI,0CAA0CvE,KAAKsE;MAAU;MAAA,WAE/D;MACRoB,SAAS3E,KAAKA,EAAEuE;MAChBK,YAAY3F,KAAKK;OAEjBqE,EAAA;MAASO,MAAK;SAElBP,EACI;MAAAG,KAAKC,KAAO9E,KAAKmD,iBAAiB2B;MAClCH,OAAM;MACNxE,OAAO,GAAGoE,EAAI,wCAAwCvE,KAAKsE;MAAU;MAAA,WAE7D;MACRoB,SAAS3E,KAAKA,EAAEuE;MAChBK,YAAY3F,KAAKwB;OAEjBkD,EAAA;MAASO,MAAK;;;EAM9B,oBAAAW;IACI,IAAI5F,KAAK6F,mBAAmB7F,KAAKsE,UAAU;MACvC,OACII,EAAA;QACIC,OAAO3E,KAAKwE;QACZI,QAAQ5E,KAAKE;SAEbwE,EAAA,YACIA,EAAA;QAAIC,OAAM;SAAoB3E,KAAKsE,WACnCI,EAAA,YACIA,EAAM;QAAAC,OAAM;SAAgB3E,KAAKmB,kBAAkBnB,KAAKI,QACxDsE,EACI;QAAAG,KAAKC,KAAO9E,KAAKiD,iBAAiB6B;QAClCH,OAAM;QACNxE,OAAO,GAAGoE,EAAI,wCAAwCvE,KAAKsE;QAE3D;QAAAY,UAAUlF,KAAKkF;QAAQ,WACf;QACRQ,SAAS3E,KAAKA,EAAEuE;QAChBK,YAAY3F,KAAKa;SAEjB6D,EAAS;QAAAO,MAAK;;;IAOtC,OACIP,EAAA;MACIC,OAAO3E,KAAKwE;MACZI,QAAQ5E,KAAKE;OAEbwE,EAAK;MAAAC,OAAM;OAAgB3E,KAAKmB,kBAAkBnB,KAAKI,QACvDsE,EACI;MAAAG,KAAKC,KAAO9E,KAAKiD,iBAAiB6B;MAClCH,OAAM;MACNxE,OAAO,GAAGoE,EAAI,wCAAwCvE,KAAKsE;MAE3D;MAAAY,UAAUlF,KAAKkF;MAAQ,WACf;MACRQ,SAAS3E,KAAKA,EAAEuE;MAChBK,YAAY3F,KAAKa;OAEjB6D,EAAA;MAASO,MAAK;;;;;EAkD9B,MAAAa;IACI,OACIpB,EAAA;MAAApD,KAAA;OACKtB,KAAKyE,wBACLzE,KAAK4F","ignoreList":[]}
1	+ {"version":3,"names":["q2EditableFieldCss","Q2EditableField","constructor","hostRef","this","scheduledAfterRender","editing","label","value","cancelClick","event","stopPropagation","mirrorEmit","name","inputElement","setValue","defaultValue","editClick","inputChange","e","inputClick","inputInput","detail","formattedValue","innerValue","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","loc","wrapperClass","generateEditStateDOM","h","class","hidden","ref","el","hideLabel","undefined","type","disabled","formatModifier","maxlength","onChange","stopImmediatePropagation","onInput","onTctInput","onTctChange","onKeyDown","onClick","onTctClick","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@import '../../styles/functions';\n\n:host {\n display: inline-block;\n max-width: 100%;\n}\n\n.q2-editable-field-wrapper {\n .begin-edit,\n .save-edit,\n .cancel-edit {\n flex: 0 0 44px;\n --tct-btn-icon-hover-background: #{var-list(\n --tct-editable-field-btn-hover-background,\n --app-gray-l3,\n #f2f2f2\n )};\n --tct-icon-stroke-primary: #{var-list(--tct-editable-field-btn-icon-stroke-primary, --app-gray, #747474)};\n --tct-icon-stroke-secondary: #{var-list(--tct-editable-field-btn-icon-stroke-secondary, --app-gray, #747474)};\n }\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n align-items: flex-end;\n}\n\n:host([block]) {\n display: block;\n width: 100%;\n .q2-editable-field-wrapper:not([hidden]) {\n display: grid;\n grid-template-columns: 1fr auto auto;\n }\n}\n\nq2-input,\n.text-wrapper {\n margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n flex: 1 1 auto;\n min-width: 170px;\n}\n\n.text-wrapper {\n flex: 0 auto;\n align-self: center;\n display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\ndl {\n margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n font-weight: 600;\n}\n\ndd {\n margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n display: flex;\n align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\n\n/*\n @name Editable Field\n * @category Forms\n * @summary Use for inline editing of data that is normally displayed as read-only.\n /\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n // #region Own Properties\n\n cancelBtnElement: HTMLQ2BtnElement;\n defaultValue: string;\n editBtnElement: HTMLQ2BtnElement;\n innerValue: string;\n inputElement: HTMLQ2InputElement;\n saveBtnElement: HTMLQ2BtnElement;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* If `true`, component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /* Disables the edit button and field. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* Controls the edit state of the element. /\n @Prop({ reflect: true, mutable: true })\n editing: boolean = false;\n\n /\n Determines the `errors` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop()\n errors: string[];\n\n /\n Determines the `formatModifier` applied to the `q2-input` element.\n * @info\n * Only applicable when `type=\"currency\"`.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /* Hide's the field's `<label>` element from view. /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Determines the `hints` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop()\n hints: string[];\n\n /\n The visible descriptor for the element.\n * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string = '';\n\n /\n Determines the `maxLength` applied to the `q2-input`.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n /\n @Prop({ reflect: true })\n maxlength: number;\n\n /* Displays the provided label in the read state. /\n @Prop({ reflect: true })\n persistentLabel: boolean;\n\n /* Shortens long values with ellipses instead of splitting into multiple lines. /\n @Prop({ reflect: true })\n truncated: boolean;\n\n /\n Determines the `type` applied to the `q2-input` element.\n \n See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.\n /\n @Prop({ reflect: true })\n type: Q2Input['type'];\n\n /* Serves as the visible text while in the read state, and the default value of the input while in the edit state. /\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n \n The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n @info\n If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n editing: boolean;\n name: 'edit' \| 'cancel' \| 'save';\n value?: string;\n formattedValue?: string;\n }>;\n\n /\n Emitted when the user updates the `q2-input` element in the editing state.\n * @deprecated Use 'tctInput' instead\n /\n @Event()\n input: EventEmitter<{ formattedValue: string; value: string }>;\n\n /\n Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n \n The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n \n @info\n * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n /\n @Event()\n tctChange: EventEmitter<{\n editing: boolean;\n name: 'edit' \| 'cancel' \| 'save';\n value?: string;\n formattedValue?: string;\n }>;\n\n /\n Emitted when the user updates the `q2-input` element in the editing state.\n /\n @Event()\n tctInput: EventEmitter<{ formattedValue: string; value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n\n this.defaultValue = this.value;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (!isEventFromElement(event, this.hostElement) \|\| this.hostElement.onchange) return;\n queueMicrotask(() => {\n switch (event.detail.name) {\n case 'save':\n if (this.hasErrors) {\n this.inputElement.focus();\n break;\n }\n this.value = event.detail.value;\n this.editing = event.detail.editing;\n break;\n\n case 'cancel':\n this.inputElement.value = this.value;\n this.editing = event.detail.editing;\n break;\n\n case 'edit':\n this.editing = event.detail.editing;\n break;\n }\n });\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n }\n\n @Listen('tctFormatted')\n inputFormatted(event: CustomEvent<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?: CustomEvent) => {\n event?.stopPropagation();\n mirrorEmit(this, ['change', 'tctChange'], { editing: false, name: 'cancel' });\n this.inputElement.setValue(this.defaultValue);\n };\n\n editClick = (event: CustomEvent) => {\n event?.stopPropagation();\n mirrorEmit(this, ['change', 'tctChange'], { editing: true, name: 'edit' });\n };\n\n generateEditStateDOM() {\n return (\n <div\n class={this.wrapperClass}\n hidden={!this.editing}\n >\n <q2-input\n ref={el => (this.inputElement = el)}\n label={this.locLabel}\n hideLabel={this.hideLabel}\n value={this.value}\n hints={this.hasHints ? this.hints : undefined}\n errors={this.hasErrors ? this.errors : undefined}\n type={this.type}\n disabled={this.disabled}\n formatModifier={this.formatModifier}\n maxlength={this.maxlength}\n test-id=\"editableInput\"\n onChange={e => e.stopImmediatePropagation()}\n onInput={e => e.stopImmediatePropagation()}\n onTctInput={this.inputInput}\n onTctChange={this.inputChange}\n onKeyDown={this.inputKeyDown}\n onClick={this.inputClick}\n />\n <q2-btn\n ref={el => (this.cancelBtnElement = el)}\n class=\"cancel-edit\"\n label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n hide-label\n test-id=\"cancelButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.cancelClick}\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n <q2-btn\n ref={el => (this.saveBtnElement = el)}\n class=\"save-edit\"\n label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n hide-label\n test-id=\"saveButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.saveClick}\n >\n <q2-icon type=\"checkmark\" />\n </q2-btn>\n </div>\n );\n }\n\n generateReadStateDOM() {\n if (this.persistentLabel && this.locLabel) {\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <dl>\n <dt class=\"read-state-label\">{this.locLabel}</dt>\n <dd>\n <span class=\"text-wrapper\">{this.formattedValue \|\| this.value}</span>\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n </dd>\n </dl>\n </div>\n );\n }\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <div class=\"text-wrapper\">{this.formattedValue \|\| this.value}</div>\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={e => e.stopImmediatePropagation()}\n onTctClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n </div>\n );\n }\n\n inputChange = (e: CustomEvent) => {\n e.stopPropagation();\n };\n\n inputClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n event.stopPropagation();\n mirrorEmit(this, ['input', 'tctInput'], event.detail);\n this.formattedValue = event.detail.formattedValue;\n this.innerValue = event.detail.value;\n };\n\n inputKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' \|\| e.key === 'Esc') {\n e.preventDefault();\n this.cancelClick();\n return;\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n this.saveClick();\n return;\n }\n };\n\n saveClick = (event?: CustomEvent) => {\n event && event.stopPropagation();\n const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n this.defaultValue = valueFromInputProp;\n mirrorEmit(this, ['change', 'tctChange'], {\n editing: false,\n name: 'save',\n value: this.innerValue \|\| valueFromInputProp,\n formattedValue: this.formattedValue \|\| valueFromInputProp,\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div>\n {this.generateEditStateDOM()}\n {this.generateReadStateDOM()}\n </div>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}