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

q2-tecton-elements 1.55.3 → 1.55.5

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

Files changed (95) hide show

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

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

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

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

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

@@ -1,8 +1,8 @@
 import { r as o, h as a } from "./index-7a5365e2.js";
-const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.container{--tct-input-margin:var(--comp-spacing);--tct-select-margin:var(--comp-spacing);--tct-calendar-margin:var(--comp-spacing);--tct-file-picker-margin:var(--comp-spacing);--tct-textarea-margin:var(--comp-spacing);--tct-checkbox-margin:var(--comp-spacing);--tct-checkbox-group-margin:var(--comp-spacing);--tct-radio-group-margin:var(--comp-spacing)}:host([spacing=none]) .container{--comp-spacing-none:var(--app-scale-0x, 0px);--comp-spacing:var(--tct-form-spacing-none, var(--comp-spacing-none) 0)}:host([spacing=compact]) .container{--comp-spacing-compact:var(--app-scale-3x, 15px);--comp-spacing:var(--tct-form-spacing-compact, var(--comp-spacing-compact) 0)}:host(:not([spacing]),[spacing=normal]) .container{--comp-spacing-normal:var(--app-scale-5x, 25px);--comp-spacing:var(--tct-form-spacing-normal, var(--comp-spacing-normal) 0)}:host([spacing=comfortable]) .container{--comp-spacing-comfortable:var(--app-scale-7x, 35px);--comp-spacing:var(--tct-form-spacing-comfortable, var(--comp-spacing-comfortable) 0)}";
+const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.container{--tct-input-margin:var(--comp-spacing);--tct-select-margin:var(--comp-spacing);--tct-calendar-margin:var(--comp-spacing);--tct-file-picker-margin:var(--comp-spacing);--tct-textarea-margin:var(--comp-spacing);--tct-checkbox-group-margin:var(--comp-spacing);--tct-radio-group-margin:var(--comp-spacing)}:host([spacing=none]) .container{--comp-spacing-none:var(--app-scale-0x, 0px);--comp-spacing:var(--tct-form-spacing-none, var(--comp-spacing-none) 0)}:host([spacing=compact]) .container{--comp-spacing-compact:var(--app-scale-3x, 15px);--comp-spacing:var(--tct-form-spacing-compact, var(--comp-spacing-compact) 0)}:host(:not([spacing]),[spacing=normal]) .container{--comp-spacing-normal:var(--app-scale-5x, 25px);--comp-spacing:var(--tct-form-spacing-normal, var(--comp-spacing-normal) 0)}:host([spacing=comfortable]) .container{--comp-spacing-comfortable:var(--app-scale-7x, 35px);--comp-spacing:var(--tct-form-spacing-comfortable, var(--comp-spacing-comfortable) 0)}";
-const n = c;
+const c = n;
 const i = class {
   constructor(a) {
@@ -19,7 +19,7 @@ const i = class {
   }
 };
-i.style = n;
+i.style = c;
 export { i as q2_form };
 //# sourceMappingURL=q2-form.entry.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2FormCss","Q2FormStyle0","Q2Checkbox","render","h","key","class"],"sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n :host([spacing='none']) & {\n --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n --comp-spacing: #{var-list(--tct-form-spacing-none, unquote('var(--comp-spacing-none) 0'))};\n }\n :host([spacing='compact']) & {\n --comp-spacing-compact: #{var-list(--app-scale-3x, 15px)};\n --comp-spacing: #{var-list(--tct-form-spacing-compact, unquote('var(--comp-spacing-compact) 0'))};\n }\n :host(:not([spacing]), [spacing='normal']) & {\n --comp-spacing-normal: #{var-list(--app-scale-5x, 25px)};\n --comp-spacing: #{var-list(--tct-form-spacing-normal, unquote('var(--comp-spacing-normal) 0'))};\n }\n\n :host([spacing='comfortable']) & {\n --comp-spacing-comfortable: #{var-list(--app-scale-7x, 35px)};\n --comp-spacing: #{var-list(--tct-form-spacing-comfortable, unquote('var(--comp-spacing-comfortable) 0'))};\n }\n\n --tct-input-margin: var(--comp-spacing);\n --tct-select-margin: var(--comp-spacing);\n --tct-calendar-margin: var(--comp-spacing);\n --tct-file-picker-margin: var(--comp-spacing);\n --tct-textarea-margin: var(--comp-spacing);\n --tct-checkbox-~~margin: var(--comp-spacing);\n --tct-checkbox-~~group-margin: var(--comp-spacing);\n --tct-radio-group-margin: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n /** Changes the vertical spacing of the form-fields contained within the component's slot */\n @Prop({ reflect: true }) spacing: 'none' \| 'compact' \| 'normal' \| 'comfortable' = 'normal';\n\n render() {\n return (\n <div class=\"container\">\n <slot />\n </div>\n );\n }\n}\n"],"mappings":";;AAAA,MAAMA,IAAY;;AAClB,MAAAC,IAAeD;;MCEFE,IAAU;;;mBAE+D;;EAElF,MAAAC;IACI,OACIC,EAAA;MAAAC,KAAA;MAAKC,OAAM;OACPF,EAAA;MAAAC,KAAA"}
1	+ {"version":3,"names":["q2FormCss","Q2FormStyle0","Q2Checkbox","render","h","key","class"],"sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n :host([spacing='none']) & {\n --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n --comp-spacing: #{var-list(--tct-form-spacing-none, unquote('var(--comp-spacing-none) 0'))};\n }\n :host([spacing='compact']) & {\n --comp-spacing-compact: #{var-list(--app-scale-3x, 15px)};\n --comp-spacing: #{var-list(--tct-form-spacing-compact, unquote('var(--comp-spacing-compact) 0'))};\n }\n :host(:not([spacing]), [spacing='normal']) & {\n --comp-spacing-normal: #{var-list(--app-scale-5x, 25px)};\n --comp-spacing: #{var-list(--tct-form-spacing-normal, unquote('var(--comp-spacing-normal) 0'))};\n }\n\n :host([spacing='comfortable']) & {\n --comp-spacing-comfortable: #{var-list(--app-scale-7x, 35px)};\n --comp-spacing: #{var-list(--tct-form-spacing-comfortable, unquote('var(--comp-spacing-comfortable) 0'))};\n }\n\n --tct-input-margin: var(--comp-spacing);\n --tct-select-margin: var(--comp-spacing);\n --tct-calendar-margin: var(--comp-spacing);\n --tct-file-picker-margin: var(--comp-spacing);\n --tct-textarea-margin: var(--comp-spacing);\n --tct-checkbox-group-margin: var(--comp-spacing);\n --tct-radio-group-margin: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n /** Changes the vertical spacing of the form-fields contained within the component's slot */\n @Prop({ reflect: true }) spacing: 'none' \| 'compact' \| 'normal' \| 'comfortable' = 'normal';\n\n render() {\n return (\n <div class=\"container\">\n <slot />\n </div>\n );\n }\n}\n"],"mappings":";;AAAA,MAAMA,IAAY;;AAClB,MAAAC,IAAeD;;MCEFE,IAAU;;;mBAE+D;;EAElF,MAAAC;IACI,OACIC,EAAA;MAAAC,KAAA;MAAKC,OAAM;OACPF,EAAA;MAAAC,KAAA"}

package/dist/q2-tecton-elements/q2-option-list_2.entry.js CHANGED Viewed

@@ -681,6 +681,10 @@ const w = class {
   // #region Component Lifecycle Events
   disconnectedCallback() {
     this.removeViewportListeners();
+    this.containerElement = null;
+    this.contentElement = null;
+    this.controlElement = null;
+    this.rootElementRect = null;
   }
   componentDidLoad() {
     this.handleMinHeight();
@@ -754,7 +758,7 @@ const w = class {
       passive: true,
       capture: true
     });
-    (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.addEventListener("change", this.viewPortOrientationChanged);
+    (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.addEventListener("orientationchange", this.viewPortOrientationChanged);
     window.addEventListener("orientationchange", this.viewPortOrientationChanged);
     // #endregion
     }
@@ -825,7 +829,9 @@ const w = class {
     var t;
     window.removeEventListener("resize", this.viewPortOrientationChanged);
     // #region remove when Popover API is supported in iOS
-        window.removeEventListener("scroll", this.viewPortChanged);
+        window.removeEventListener("scroll", this.viewPortChanged, {
+      capture: true
+    });
     (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.removeEventListener("orientationchange", this.viewPortOrientationChanged);
     window.removeEventListener("orientationchange", this.viewPortOrientationChanged);
     // #endregion
@@ -878,17 +884,17 @@ const w = class {
     if (this.show) t.push("show");
     if (this.mode === "legacy") t.push("legacy");
     return i("div", {
-      key: "dec077f6a9efa7573210773db9eca95d48fb527b",
+      key: "d32d4929d567609b450603228c6747cfaf60f42f",
       ref: t => this.containerElement = t,
       class: t.join(" "),
       "test-id": "outerContainer",
       tabIndex: -1
     }, i("div", {
-      key: "4e7ad06454bddbc6443922b4dac5d27f50a8b2c8",
+      key: "bab899e8951dd534c21a09fbac84bae890bc932e",
       ref: t => this.contentElement = t,
       class: "content"
     }, i("slot", {
-      key: "9128e4469499778c779b32561547358e1f6bd747"
+      key: "6b222ff386edeaf985dee48074ba30e68a95964c"
     })));
   }
   get hostElement() {