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.
- package/dist/bundle-report.json +459 -458
- package/dist/cjs/q2-editable-field.cjs.entry.js +2 -2
- package/dist/cjs/q2-editable-field.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-editable-field.entry.cjs.js.map +1 -1
- package/dist/collection/components/q2-data-table/q2-data-table.js +12 -12
- package/dist/collection/components/q2-editable-field/q2-editable-field.js +2 -2
- package/dist/collection/components/q2-editable-field/q2-editable-field.js.map +1 -1
- package/dist/collection/components/q2-file-picker/q2-file-picker.js +3 -3
- package/dist/collection/components/q2-grid/q2-grid.js +30 -30
- package/dist/collection/components/q2-grid-area/q2-grid-area.js +42 -42
- package/dist/collection/components/q2-input/q2-input.js +1 -1
- package/dist/collection/components/q2-option-list/q2-option-list.js +5 -5
- package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js +4 -4
- package/dist/components/q2-editable-field.js +2 -2
- package/dist/components/q2-editable-field.js.map +1 -1
- package/dist/esm/q2-editable-field.entry.js +2 -2
- package/dist/esm/q2-editable-field.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-editable-field.entry.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-editable-field.entry.js +2 -1
- package/dist/q2-tecton-elements/q2-editable-field.entry.js.map +1 -1
- package/package.json +68 -66
- /package/dist/types/{Users/kvanhouten/Documents/Work/tecton_extra → builds/q2e/development/tecton/tecton}/packages/q2-tecton-elements/.stencil/jest.setup.d.ts +0 -0
- /package/dist/types/{Users/kvanhouten/Documents/Work/tecton_extra → builds/q2e/development/tecton/tecton}/packages/q2-tecton-elements/.stencil/scripts/docs-generator/index.d.ts +0 -0
- /package/dist/types/{Users/kvanhouten/Documents/Work/tecton_extra → builds/q2e/development/tecton/tecton}/packages/q2-tecton-elements/.stencil/scripts/docs-generator/markdown-generator.d.ts +0 -0
- /package/dist/types/{Users/kvanhouten/Documents/Work/tecton_extra → builds/q2e/development/tecton/tecton}/packages/q2-tecton-elements/.stencil/scripts/docs-generator/tag-handlers.d.ts +0 -0
- /package/dist/types/{Users/kvanhouten/Documents/Work/tecton_extra → builds/q2e/development/tecton/tecton}/packages/q2-tecton-elements/.stencil/scripts/docs-generator/types.d.ts +0 -0
|
@@ -200,7 +200,7 @@ const Q2EditableField = class {
|
|
|
200
200
|
return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
|
|
201
201
|
}
|
|
202
202
|
generateEditStateDOM() {
|
|
203
|
-
return (index.h("div", { class: this.wrapperClass, hidden: !this.editing }, index.h("q2-input", { ref: el => (this.inputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: this.hasHints ? this.hints : undefined, errors: this.hasErrors ? this.errors : undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: e => e.stopImmediatePropagation(), onTctInput: this.inputInput, onTctChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), index.h("q2-btn", { ref: el => (this.cancelBtnElement = el), class: "cancel-edit", label: `${index$1.loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: e => e.stopImmediatePropagation(), onTctClick: this.cancelClick }, index.h("q2-icon", { type: "close" })), index.h("q2-btn", { ref: el => (this.saveBtnElement = el), class: "save-edit", label: `${index$1.loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: e => e.stopImmediatePropagation(), onTctClick: this.saveClick }, index.h("q2-icon", { type: "checkmark" }))));
|
|
203
|
+
return (index.h("div", { class: this.wrapperClass, hidden: !this.editing }, index.h("q2-input", { ref: el => (this.inputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: this.hasHints ? this.hints : undefined, errors: this.hasErrors ? this.errors : undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.inputInput, onTctChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), index.h("q2-btn", { ref: el => (this.cancelBtnElement = el), class: "cancel-edit", label: `${index$1.loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: e => e.stopImmediatePropagation(), onTctClick: this.cancelClick }, index.h("q2-icon", { type: "close" })), index.h("q2-btn", { ref: el => (this.saveBtnElement = el), class: "save-edit", label: `${index$1.loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: e => e.stopImmediatePropagation(), onTctClick: this.saveClick }, index.h("q2-icon", { type: "checkmark" }))));
|
|
204
204
|
}
|
|
205
205
|
generateReadStateDOM() {
|
|
206
206
|
if (this.persistentLabel && this.locLabel) {
|
|
@@ -211,7 +211,7 @@ const Q2EditableField = class {
|
|
|
211
211
|
// #endregion
|
|
212
212
|
// #region Render Methods
|
|
213
213
|
render() {
|
|
214
|
-
return (index.h("div", { key: '
|
|
214
|
+
return (index.h("div", { key: '0083bb7919cd079285118b0b3c8b8e00025f36f0' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
|
|
215
215
|
}
|
|
216
216
|
get hostElement() { return index.getElement(this); }
|
|
217
217
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"q2-editable-field.entry.cjs.js","mappings":"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","names":["mirrorEmit","handleAriaLabel","overrideFocus","isEventFromElement","waitForNextPaint","loc","h"],"sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@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.entry.cjs.js","mappings":"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","names":["mirrorEmit","handleAriaLabel","overrideFocus","isEventFromElement","waitForNextPaint","loc","h"],"sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@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}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"q2-editable-field.entry.cjs.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":["mirrorEmit","handleAriaLabel","overrideFocus","isEventFromElement","waitForNextPaint","loc","h"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"q2-editable-field.entry.cjs.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":["mirrorEmit","handleAriaLabel","overrideFocus","isEventFromElement","waitForNextPaint","loc","h"],"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,YAAAA,qBAAU,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,YAAAA,qBAAU,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,YAAAA,qBAAU,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;YACtCA,qBAAU,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;QACbC,uBAAe,CAAC,IAAI,CAAC;AAErB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK;;IAGlC,gBAAgB,GAAA;AACZ,QAAAC,qBAAa,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,CAACC,0BAAkB,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,CAACA,0BAAkB,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,MAAMC,wBAAgB,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,MAAMA,wBAAgB,EAAE;;;;;IAQhC,iBAAiB,GAAA;QACbH,uBAAe,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,IAAII,WAAG,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,QACIC,OAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,OAAO,EAAA,EAErBA,OAAA,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,EACFA,OACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACvC,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,CAAA,EAAGD,WAAG,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,EAE5BC,OAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,OAAO,EAAA,CAAG,CACnB,EACTA,OACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,CAAG,EAAAD,WAAG,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,EAE1BC,OAAA,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,QACIA,OAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,MAAM,EAAE,IAAI,CAAC,OAAO,EAAA,EAEpBA,OAAA,CAAA,IAAA,EAAA,IAAA,EACIA,OAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,QAAQ,CAAM,EACjDA,OAAA,CAAA,IAAA,EAAA,IAAA,EACIA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAE,EAAA,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAQ,EACrEA,OACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,GAAGD,WAAG,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,EAE1BC,OAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAA,CAAG,CAClB,CACR,CACJ,CACH;;QAGd,QACIA,OAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,MAAM,EAAE,IAAI,CAAC,OAAO,EAAA,EAEpBA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAE,EAAA,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAO,EACnEA,OACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,CAAA,EAAGD,WAAG,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,EAE1BC,OAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,MAAM,GAAG,CAClB,CACP;;;;IAgDd,MAAM,GAAA;QACF,QACIA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACK,IAAI,CAAC,oBAAoB,EAAE,EAC3B,IAAI,CAAC,oBAAoB,EAAE,CAC1B;;;;;;;;;;;;;"}
|
|
@@ -644,7 +644,7 @@ export class Q2DataTable {
|
|
|
644
644
|
"references": {
|
|
645
645
|
"Q2DataTableHeader": {
|
|
646
646
|
"location": "local",
|
|
647
|
-
"path": "/
|
|
647
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
|
|
648
648
|
"id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableHeader"
|
|
649
649
|
}
|
|
650
650
|
}
|
|
@@ -731,7 +731,7 @@ export class Q2DataTable {
|
|
|
731
731
|
"references": {
|
|
732
732
|
"Q2DataTableRow": {
|
|
733
733
|
"location": "local",
|
|
734
|
-
"path": "/
|
|
734
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
|
|
735
735
|
"id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableRow"
|
|
736
736
|
}
|
|
737
737
|
}
|
|
@@ -777,7 +777,7 @@ export class Q2DataTable {
|
|
|
777
777
|
"references": {
|
|
778
778
|
"Q2DataTableRow": {
|
|
779
779
|
"location": "local",
|
|
780
|
-
"path": "/
|
|
780
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
|
|
781
781
|
"id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableRow"
|
|
782
782
|
}
|
|
783
783
|
}
|
|
@@ -908,7 +908,7 @@ export class Q2DataTable {
|
|
|
908
908
|
"references": {
|
|
909
909
|
"Q2DataTableSerializedRow": {
|
|
910
910
|
"location": "local",
|
|
911
|
-
"path": "/
|
|
911
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
|
|
912
912
|
"id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
|
|
913
913
|
}
|
|
914
914
|
}
|
|
@@ -932,7 +932,7 @@ export class Q2DataTable {
|
|
|
932
932
|
"references": {
|
|
933
933
|
"Q2DataTableSerializedRow": {
|
|
934
934
|
"location": "local",
|
|
935
|
-
"path": "/
|
|
935
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
|
|
936
936
|
"id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
|
|
937
937
|
}
|
|
938
938
|
}
|
|
@@ -974,7 +974,7 @@ export class Q2DataTable {
|
|
|
974
974
|
"references": {
|
|
975
975
|
"Q2DataTableHeader": {
|
|
976
976
|
"location": "local",
|
|
977
|
-
"path": "/
|
|
977
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
|
|
978
978
|
"id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableHeader"
|
|
979
979
|
}
|
|
980
980
|
}
|
|
@@ -995,7 +995,7 @@ export class Q2DataTable {
|
|
|
995
995
|
"references": {
|
|
996
996
|
"Q2DataTableSerializedRow": {
|
|
997
997
|
"location": "local",
|
|
998
|
-
"path": "/
|
|
998
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
|
|
999
999
|
"id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
|
|
1000
1000
|
}
|
|
1001
1001
|
}
|
|
@@ -1016,7 +1016,7 @@ export class Q2DataTable {
|
|
|
1016
1016
|
"references": {
|
|
1017
1017
|
"Q2DataTableSerializedRow": {
|
|
1018
1018
|
"location": "local",
|
|
1019
|
-
"path": "/
|
|
1019
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
|
|
1020
1020
|
"id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
|
|
1021
1021
|
}
|
|
1022
1022
|
}
|
|
@@ -1052,7 +1052,7 @@ export class Q2DataTable {
|
|
|
1052
1052
|
"references": {
|
|
1053
1053
|
"Q2DataTableHeader": {
|
|
1054
1054
|
"location": "local",
|
|
1055
|
-
"path": "/
|
|
1055
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
|
|
1056
1056
|
"id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableHeader"
|
|
1057
1057
|
}
|
|
1058
1058
|
}
|
|
@@ -1073,7 +1073,7 @@ export class Q2DataTable {
|
|
|
1073
1073
|
"references": {
|
|
1074
1074
|
"Q2DataTableSerializedRow": {
|
|
1075
1075
|
"location": "local",
|
|
1076
|
-
"path": "/
|
|
1076
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
|
|
1077
1077
|
"id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
|
|
1078
1078
|
}
|
|
1079
1079
|
}
|
|
@@ -1097,7 +1097,7 @@ export class Q2DataTable {
|
|
|
1097
1097
|
"references": {
|
|
1098
1098
|
"Q2DataTableSerializedRow": {
|
|
1099
1099
|
"location": "local",
|
|
1100
|
-
"path": "/
|
|
1100
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
|
|
1101
1101
|
"id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
|
|
1102
1102
|
}
|
|
1103
1103
|
}
|
|
@@ -1177,7 +1177,7 @@ export class Q2DataTable {
|
|
|
1177
1177
|
},
|
|
1178
1178
|
"Q2DataTableHeader": {
|
|
1179
1179
|
"location": "local",
|
|
1180
|
-
"path": "/
|
|
1180
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
|
|
1181
1181
|
"id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableHeader"
|
|
1182
1182
|
},
|
|
1183
1183
|
"HTMLQ2BtnElement": {
|
|
@@ -195,7 +195,7 @@ export class Q2EditableField {
|
|
|
195
195
|
return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
|
|
196
196
|
}
|
|
197
197
|
generateEditStateDOM() {
|
|
198
|
-
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" }))));
|
|
198
|
+
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" }))));
|
|
199
199
|
}
|
|
200
200
|
generateReadStateDOM() {
|
|
201
201
|
if (this.persistentLabel && this.locLabel) {
|
|
@@ -206,7 +206,7 @@ export class Q2EditableField {
|
|
|
206
206
|
// #endregion
|
|
207
207
|
// #region Render Methods
|
|
208
208
|
render() {
|
|
209
|
-
return (h("div", { key: '
|
|
209
|
+
return (h("div", { key: '0083bb7919cd079285118b0b3c8b8e00025f36f0' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
|
|
210
210
|
}
|
|
211
211
|
static get is() { return "q2-editable-field"; }
|
|
212
212
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"q2-editable-field.js","sourceRoot":"","sources":["../../../../src/components/q2-editable-field/q2-editable-field.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
|
|
1
|
+
{"version":3,"file":"q2-editable-field.js","sourceRoot":"","sources":["../../../../src/components/q2-editable-field/q2-editable-field.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
|
|
@@ -467,7 +467,7 @@ export class Q2FilePicker {
|
|
|
467
467
|
"references": {
|
|
468
468
|
"ValidFileStatus": {
|
|
469
469
|
"location": "local",
|
|
470
|
-
"path": "/
|
|
470
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-file-picker/q2-file-picker.tsx",
|
|
471
471
|
"id": "src/components/q2-file-picker/q2-file-picker.tsx::ValidFileStatus"
|
|
472
472
|
}
|
|
473
473
|
}
|
|
@@ -495,7 +495,7 @@ export class Q2FilePicker {
|
|
|
495
495
|
"references": {
|
|
496
496
|
"FilesObject": {
|
|
497
497
|
"location": "local",
|
|
498
|
-
"path": "/
|
|
498
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-file-picker/q2-file-picker.tsx",
|
|
499
499
|
"id": "src/components/q2-file-picker/q2-file-picker.tsx::FilesObject"
|
|
500
500
|
}
|
|
501
501
|
}
|
|
@@ -560,7 +560,7 @@ export class Q2FilePicker {
|
|
|
560
560
|
"references": {
|
|
561
561
|
"FilesObject": {
|
|
562
562
|
"location": "local",
|
|
563
|
-
"path": "/
|
|
563
|
+
"path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-file-picker/q2-file-picker.tsx",
|
|
564
564
|
"id": "src/components/q2-file-picker/q2-file-picker.tsx::FilesObject"
|
|
565
565
|
}
|
|
566
566
|
}
|