npm - q2-tecton-elements - Versions diffs - 1.37.0 → 1.38.0 - Mend

q2-tecton-elements 1.37.0 → 1.38.0

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

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

	@@ -1 +1 @@
1	- {"file":"q2-editable-field.js","mappings":"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","names":["Q2EditableField"],"sources":["./src/components/q2-editable-field/styles.scss?tag=q2-editable-field&encapsulation=shadow","./src/components/q2-editable-field/index.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';\nimport { IFormatterValueObject } from '../q2-input/types';\n\ninterface IExtendedQ2InputElement extends HTMLQ2InputElement {\n formattedValue: IFormatterValueObject['formattedValue'];\n}\n\n@Component({\n tag: 'q2-editable-field',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2EditableField {\n @Prop({ reflect: true, mutable: true }) value: string = '';\n @Prop({ reflect: true, mutable: true }) editing: boolean = false;\n @Prop({ reflect: true, mutable: true }) label: string = '';\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop({ reflect: true }) type: Q2Input['type'];\n @Prop({ reflect: true }) formatModifier: string;\n @Prop({ reflect: true }) truncated: boolean;\n @Prop({ reflect: true }) maxlength: number;\n @Prop({ reflect: true }) persistentLabel: boolean;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) block: boolean;\n @Prop() hints: string[];\n @Prop() errors: string[];\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n scheduledAfterRender: (() => void)[] = [];\n\n @Element() hostElement: HTMLElement;\n inputElement: HTMLQ2InputElement;\n editBtnElement: HTMLQ2BtnElement;\n cancelBtnElement: HTMLQ2BtnElement;\n saveBtnElement: HTMLQ2BtnElement;\n\n @State() formattedValue: string;\n innerValue: string;\n defaultValue: string = this.value;\n\n get locLabel() {\n return (this.label && loc(this.label)) \|\| '';\n }\n\n /////// LIFECYCLE HOOKS ///////\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n this.formattedValue = (this.inputElement as IExtendedQ2InputElement).formattedValue;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n //////// OBSERVERS ////////\n\n @Watch('errors')\n errorsObserver() {\n const { editing, errors = [] } = this;\n const focusedElement = this.hostElement.shadowRoot.activeElement;\n const isInputFocused = focusedElement?.tagName === 'Q2-INPUT' ?? false;\n const hasErrors = errors.length;\n if (isInputFocused \|\| !focusedElement \|\| !editing \|\| !hasErrors) return;\n this.inputElement.focus();\n }\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 get wrapperClass() {\n return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n }\n\n ///////// HOST ELEMENT EVENTS //////\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (!isEventFromElement(event, this.hostElement) \|\| this.hostElement.onchange) return;\n switch (event.detail.name) {\n case 'save':\n this.value = event.detail.value;\n break;\n\n case 'cancel':\n this.inputElement.value = this.value;\n break;\n }\n\n this.editing = event.detail.editing;\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 ///////// EVENTS /////////\n\n @Event() input: EventEmitter;\n @Event() change: EventEmitter;\n\n /// Methods ///\n @Method()\n clickEdit() {\n if (this.editing) return;\n this.editBtnElement?.click();\n }\n\n @Method()\n clickCancel() {\n if (!this.editing) return;\n this.cancelBtnElement?.click();\n }\n\n @Method()\n clickSave() {\n if (!this.editing) return;\n this.saveBtnElement?.click();\n }\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 //////// ACTIONS /////////\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 inputChange = (e: CustomEvent) => {\n e.stopPropagation();\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 inputClick = (event: MouseEvent) => {\n event.stopPropagation();\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 setTimeout(() => {\n const { errors = [] } = this;\n if (!errors.length) return;\n this.hostElement.focus();\n }, 1);\n };\n\n editClick = (event: MouseEvent) => {\n event?.stopPropagation();\n this.change.emit({ editing: true, name: 'edit' });\n };\n\n cancelClick = (event?: MouseEvent) => {\n event?.stopPropagation();\n this.change.emit({ editing: false, name: 'cancel' });\n this.hostElement.shadowRoot.querySelector('q2-input').value = this.defaultValue;\n };\n\n render() {\n return (\n <div>\n {this.generateEditStateDOM()}\n {this.generateReadStateDOM()}\n </div>\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={(Array.isArray(this.hints) && this.hints.map(str => loc(str))) \|\| undefined}\n errors={(Array.isArray(this.errors) && this.errors.map(str => loc(str))) \|\| 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 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"],"version":3}
1	+ {"file":"q2-editable-field.js","mappings":"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","names":["Q2EditableField"],"sources":["./src/components/q2-editable-field/styles.scss?tag=q2-editable-field&encapsulation=shadow","./src/components/q2-editable-field/index.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';\nimport { IFormatterValueObject } from '../q2-input/types';\n\ninterface IExtendedQ2InputElement extends HTMLQ2InputElement {\n formattedValue: IFormatterValueObject['formattedValue'];\n}\n\n@Component({\n tag: 'q2-editable-field',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2EditableField {\n @Prop({ reflect: true, mutable: true }) value: string = '';\n @Prop({ reflect: true, mutable: true }) editing: boolean = false;\n @Prop({ reflect: true, mutable: true }) label: string = '';\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop({ reflect: true }) type: Q2Input['type'];\n @Prop({ reflect: true }) formatModifier: string;\n @Prop({ reflect: true }) truncated: boolean;\n @Prop({ reflect: true }) maxlength: number;\n @Prop({ reflect: true }) persistentLabel: boolean;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) block: boolean;\n @Prop() hints: string[];\n @Prop() errors: string[];\n\n /** @deprecated /\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n scheduledAfterRender: (() => void)[] = [];\n\n @Element() hostElement: HTMLElement;\n inputElement: HTMLQ2InputElement;\n editBtnElement: HTMLQ2BtnElement;\n cancelBtnElement: HTMLQ2BtnElement;\n saveBtnElement: HTMLQ2BtnElement;\n\n @State() formattedValue: string;\n innerValue: string;\n defaultValue: string = this.value;\n\n get locLabel() {\n return (this.label && loc(this.label)) \|\| '';\n }\n\n /////// LIFECYCLE HOOKS ///////\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n this.formattedValue = (this.inputElement as IExtendedQ2InputElement).formattedValue;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n //////// OBSERVERS ////////\n\n @Watch('errors')\n errorsObserver() {\n const { editing, errors = [] } = this;\n const focusedElement = this.hostElement.shadowRoot.activeElement;\n const isInputFocused = focusedElement?.tagName === 'Q2-INPUT' ?? false;\n const hasErrors = errors.length;\n if (isInputFocused \|\| !focusedElement \|\| !editing \|\| !hasErrors) return;\n this.inputElement.focus();\n }\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 get wrapperClass() {\n return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n }\n\n ///////// HOST ELEMENT EVENTS //////\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (!isEventFromElement(event, this.hostElement) \|\| this.hostElement.onchange) return;\n switch (event.detail.name) {\n case 'save':\n this.value = event.detail.value;\n break;\n\n case 'cancel':\n this.inputElement.value = this.value;\n break;\n }\n\n this.editing = event.detail.editing;\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 ///////// EVENTS /////////\n\n @Event() input: EventEmitter;\n @Event() change: EventEmitter;\n\n /// Methods ///\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 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 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 //////// ACTIONS /////////\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 inputChange = (e: CustomEvent) => {\n e.stopPropagation();\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 inputClick = (event: MouseEvent) => {\n event.stopPropagation();\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 setTimeout(() => {\n const { errors = [] } = this;\n if (!errors.length) return;\n this.hostElement.focus();\n }, 1);\n };\n\n editClick = (event: MouseEvent) => {\n event?.stopPropagation();\n this.change.emit({ editing: true, name: 'edit' });\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 render() {\n return (\n <div>\n {this.generateEditStateDOM()}\n {this.generateReadStateDOM()}\n </div>\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={(Array.isArray(this.hints) && this.hints.map(str => loc(str))) \|\| undefined}\n errors={(Array.isArray(this.errors) && this.errors.map(str => loc(str))) \|\| 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 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"],"version":3}

package/dist/components/q2-loc.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { l as loc } from './index16.js';
-const stylesCss = "*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";
 const Q2Loc$1 = /*@__PURE__*/ proxyCustomElement(class Q2Loc extends HTMLElement {
   constructor() {

package/dist/components/q2-loc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-loc.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~mrBAAmrB~~;;~~MCQxrBA~~,OAAK;;;;;;;;EAId,MAAM;IACF,OAAO,gBAAO,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAQ,CAAC;GAC7D;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Loc"],"sources":["./src/components/q2-loc/styles.scss?tag=q2-loc&encapsulation=shadow","./src/components/q2-loc/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n display: inline\n}","import { Component, Prop, h } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({\n tag: 'q2-loc',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Loc {\n @Prop({ reflect: true }) value: string;\n @Prop() substitutions: string[];\n\n render() {\n return <span>{loc(this.value, this.substitutions)}</span>;\n }\n}\n"],"version":3}
1	+ {"file":"q2-loc.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,8qBAA8qB;;MCQnrBA,OAAK;;;;;;;;EAId,MAAM;IACF,OAAO,gBAAO,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAQ,CAAC;GAC7D;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Loc"],"sources":["./src/components/q2-loc/styles.scss?tag=q2-loc&encapsulation=shadow","./src/components/q2-loc/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n display: inline\n}","import { Component, Prop, h } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({\n tag: 'q2-loc',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Loc {\n @Prop({ reflect: true }) value: string;\n @Prop() substitutions: string[];\n\n render() {\n return <span>{loc(this.value, this.substitutions)}</span>;\n }\n}\n"],"version":3}

package/dist/components/q2-month-picker.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './index5.js';
 import { d as defineCustomElement$3 } from './index8.js';
 import { d as defineCustomElement$2 } from './index10.js';
-const q2MonthPickerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
+const q2MonthPickerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
 const Q2MonthPicker$1 = /*@__PURE__*/ proxyCustomElement(class Q2MonthPicker extends HTMLElement {
   constructor() {

package/dist/components/q2-month-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-month-picker.js","mappings":"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","names":["Q2MonthPicker"],"sources":["./src/components/q2-calendar/q2-month-picker.scss?tag=q2-month-picker&encapsulation=shadow","./src/components/q2-calendar/q2-month-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.month-container {\n --comp-month-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n --comp-month-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\n --comp-month-primary-background: #{var-list(\n --tct-btn-secondary-background,\n --tct-btn-secondary-bg,\n --t-button-default-bg,\n #cccccc\n )};\n --comp-month-secondary-font-color: #{var-list(\n var-prefixer(btn-secondary-font-color),\n --t-button-default-font-color,\n #2e2e2e\n )};\n .navigation {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n .year-btn {\n padding: 0 1rem;\n display: flex;\n align-items: center;\n .year {\n margin-right: 0.2rem;\n }\n .year-icon {\n --t-icon-stroke-width: 2px;\n width: 16px;\n height: 16px;\n transition: all 0.3s ease-in-out;\n &.on {\n transform: rotate(-180deg);\n }\n }\n }\n .month-controller {\n display: flex;\n align-items: center;\n }\n }\n .month-list {\n display: grid;\n grid-template-columns: auto auto auto;\n .month {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0.5rem 0;\n .month-button {\n border-radius: 50%;\n aspect-ratio: 1;\n width: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n &:hover {\n background: var(--comp-month-primary-background);\n color: var(--comp-month-secondary-font-color);\n cursor: pointer;\n }\n &:active,\n &.active {\n background: var(--comp-month-primary-background);\n color: var(--comp-month-primary-font-color);\n }\n }\n }\n }\n\n .today-label {\n padding: 0.5rem 0;\n color: var-list(\n var-prefixer(calendar-day-selected-outline-color),\n --tct-stoplight-info,\n --const-stoplight-info,\n #0079c1\n );\n }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Event, EventEmitter } from '@stencil/core';\nimport { loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-month-picker',\n shadow: true,\n styleUrl: 'q2-month-picker.scss',\n})\nexport class Q2MonthPicker implements ComponentInterface {\n @Prop({ reflect: true, mutable: true }) year: number = Number(\n new Date().toLocaleString('en-US', { year: 'numeric' })\n );\n @Prop({ reflect: true }) disabledMonths: string[];\n @Prop() today: string;\n @Element() hostElement: HTMLElement;\n @Event() viewChange: EventEmitter;\n @Event() toggleChange: EventEmitter;\n @State() selectedIndex: number = 0;\n @State() focusedIndex: number = 0;\n @State() showYearLayer: boolean = false;\n scheduledAfterRender: (() => void)[] = [];\n\n private monthGrid = [\n [0, 1, 2],\n [3, 4, 5],\n [6, 7, 8],\n [9, 10, 11],\n ];\n private months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ].map(mon => ({\n label: loc(`tecton.element.calendar.months.${mon}`),\n abbr: loc(`tecton.element.calendar.months.abbr.${mon}`),\n }));\n\n componentDidRender() {\n this.scheduledAfterRender?.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n onMonthSelection = (event: MouseEvent) => {\n const targetElement = (event.target as HTMLButtonElement).closest('.month-button') as HTMLElement;\n if (targetElement?.dataset?.index) {\n this.selectMonth(Number(targetElement?.dataset?.index));\n }\n };\n\n onMonthKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' \|\| event.key === 'Esc') {\n this.toggleChange.emit({ close: true });\n return;\n }\n const monthIndex = (event.target as HTMLElement).dataset.index;\n if (!monthIndex) return;\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.stopPropagation();\n this.selectMonth(Number(monthIndex));\n } else {\n const nextMonthIndex = this.moveMonth(this.monthGrid, Number(monthIndex), event);\n this.focusMonth(nextMonthIndex);\n }\n };\n\n moveMonth = (grid: number[][], index: number, event: KeyboardEvent) => {\n const rows = grid.length;\n const cols = grid[0].length;\n const row = Math.floor(index / cols);\n const col = index % cols;\n const current = [row, col];\n if (event.key === 'ArrowUp') {\n event.stopPropagation();\n event.preventDefault();\n return grid[Math.max(0, current[0] - 1)][current[1]];\n } else if (event.key === 'ArrowDown') {\n event.stopPropagation();\n event.preventDefault();\n return grid[Math.min(rows - 1, current[0] + 1)][current[1]];\n } else if (event.key === 'ArrowLeft') {\n event.stopPropagation();\n event.preventDefault();\n return Math.max(0, index - 1);\n } else if (event.key === 'ArrowRight') {\n event.stopPropagation();\n event.preventDefault();\n return Math.min(this.months.length - 1, index + 1);\n } else {\n return grid[current[0]][current[1]];\n }\n };\n\n focusMonth = (index: number) => {\n const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n `.month-button[data-index=\"${index}\"]`\n );\n if (nextMonth) {\n this.focusedIndex = index;\n nextMonth.focus();\n }\n };\n\n selectMonth = (index: number) => {\n this.selectedIndex = index;\n this.focusedIndex = index;\n const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n `.month-button[data-index=\"${index}\"]`\n );\n this.hostElement.shadowRoot\n .querySelectorAll<HTMLElement>(`.month-button`)\n ?.forEach(el => el.classList.remove('active'));\n nextMonth?.classList.add('active');\n nextMonth?.focus();\n const value = {\n view: 'day', // change to day view\n monthIndex: index,\n selectedYear: this.year,\n };\n this.hostElement.onchange?.(\n new CustomEvent('click', {\n bubbles: true,\n detail: value,\n })\n );\n this.viewChange.emit(value);\n };\n selectYear = (year: number) => {\n this.year = Math.max(1970, year);\n };\n\n render() {\n return (\n <div\n class=\"month-container\"\n onKeyDown={this.onMonthKeydown}\n >\n <div class=\"navigation\">\n <q2-btn\n class=\"year-btn\"\n onClick={() =>\n this.viewChange.emit({\n view: 'year',\n selectedYear: this.year,\n })\n }\n >\n <span class=\"year\">{this.year}</span>\n <q2-icon\n class=\"year-icon off\"\n type=\"chevron-down\"\n ></q2-icon>\n </q2-btn>\n <div class=\"month-controller\">\n <div class=\"cal-year-prev-next\">\n <q2-btn\n label={loc('tecton.element.calendar.previousYear')}\n hide-label\n class=\"cal-nav-btn prev-year\"\n test-id=\"previousYearButton\"\n onClick={() => this.selectYear(this.year - 1)}\n >\n <q2-icon type=\"arrow-left\" />\n </q2-btn>\n <q2-btn\n label={loc('tecton.element.calendar.nextYear')}\n hide-label\n class=\"cal-nav-btn next-year\"\n test-id=\"nextYearButton\"\n onClick={() => this.selectYear(this.year + 1)}\n >\n <q2-icon type=\"arrow-right\" />\n </q2-btn>\n </div>\n </div>\n </div>\n <div\n class=\"month-list\"\n onClick={this.onMonthSelection}\n >\n {this.months.map((month, index) => (\n <div class=\"month\">\n <span\n role=\"button\"\n class=\"month-button\"\n data-index={index}\n aria-label={month.label}\n tabindex={index === this.focusedIndex ? 0 : -1}\n >\n {month.abbr}\n </span>\n </div>\n ))}\n </div>\n {this.today && (\n <div class=\"today-label\">\n {loc('tecton.element.calendar.today')}: {this.today}\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-month-picker.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,4nFAA4nF;;MCQxoFA,eAAa;;;;;;;IAYtB,yBAAoB,GAAmB,EAAE,CAAC;IAElC,cAAS,GAAG;MAChB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;MACT,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;MACT,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;MACT,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC;KACd,CAAC;IACM,WAAM,GAAG;MACb,SAAS;MACT,UAAU;MACV,OAAO;MACP,OAAO;MACP,KAAK;MACL,MAAM;MACN,MAAM;MACN,QAAQ;MACR,WAAW;MACX,SAAS;MACT,UAAU;MACV,UAAU;KACb,CAAC,GAAG,CAAC,GAAG,KAAK;MACV,KAAK,EAAE,GAAG,CAAC,kCAAkC,GAAG,EAAE,CAAC;MACnD,IAAI,EAAE,GAAG,CAAC,uCAAuC,GAAG,EAAE,CAAC;KAC1D,CAAC,CAAC,CAAC;IAWJ,qBAAgB,GAAG,CAAC,KAAiB;;MACjC,MAAM,aAAa,GAAI,KAAK,CAAC,MAA4B,CAAC,OAAO,CAAC,eAAe,CAAgB,CAAC;MAClG,IAAI,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,0CAAE,KAAK,EAAE;QAC/B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,0CAAE,KAAK,CAAC,CAAC,CAAC;OAC3D;KACJ,CAAC;IAEF,mBAAc,GAAG,CAAC,KAAoB;MAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;QAC/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACxC,OAAO;OACV;MACD,MAAM,UAAU,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,KAAK,CAAC;MAC/D,IAAI,CAAC,UAAU;QAAE,OAAO;MACxB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;QAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;OACxC;WAAM;QACH,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC;QACjF,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;OACnC;KACJ,CAAC;IAEF,cAAS,GAAG,CAAC,IAAgB,EAAE,KAAa,EAAE,KAAoB;MAC9D,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC;MACzB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;MAC5B,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;MACrC,MAAM,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC;MACzB,MAAM,OAAO,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;MAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;QACzB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;OACxD;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;QAClC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;OAC/D;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;QAClC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;OACjC;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;QACnC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;OACtD;WAAM;QACH,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;OACvC;KACJ,CAAC;IAEF,eAAU,GAAG,CAAC,KAAa;MACvB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CACvD,6BAA6B,KAAK,IAAI,CACzC,CAAC;MACF,IAAI,SAAS,EAAE;QACX,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,SAAS,CAAC,KAAK,EAAE,CAAC;OACrB;KACJ,CAAC;IAEF,gBAAW,GAAG,CAAC,KAAa;;MACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;MAC3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;MAC1B,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CACvD,6BAA6B,KAAK,IAAI,CACzC,CAAC;MACF,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU;SACtB,gBAAgB,CAAc,eAAe,CAAC,0CAC7C,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;MACnD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;MACnC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EAAE,CAAC;MACnB,MAAM,KAAK,GAAG;QACV,IAAI,EAAE,KAAK;QACX,UAAU,EAAE,KAAK;QACjB,YAAY,EAAE,IAAI,CAAC,IAAI;OAC1B,CAAC;MACF,MAAA,MAAA,IAAI,CAAC,WAAW,EAAC,QAAQ,mDACrB,IAAI,WAAW,CAAC,OAAO,EAAE;QACrB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,KAAK;OAChB,CAAC,CACL,CAAC;MACF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC/B,CAAC;IACF,eAAU,GAAG,CAAC,IAAY;MACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KACpC,CAAC;gBArIqD,MAAM,CACzD,IAAI,IAAI,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAC1D;;;yBAMgC,CAAC;wBACF,CAAC;yBACC,KAAK;;EA2BvC,kBAAkB;;IACd,MAAA,IAAI,CAAC,oBAAoB,0CAAE,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;IAC/C,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;GAClC;EAED,gBAAgB;IACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACnC;EA2FD,MAAM;IACF,QACI,WACI,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAE,IAAI,CAAC,cAAc,IAE9B,WAAK,KAAK,EAAC,YAAY,IACnB,cACI,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,MACL,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjB,IAAI,EAAE,MAAM;QACZ,YAAY,EAAE,IAAI,CAAC,IAAI;OAC1B,CAAC,IAGN,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,EACrC,eACI,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,cAAc,GACZ,CACN,EACT,WAAK,KAAK,EAAC,kBAAkB,IACzB,WAAK,KAAK,EAAC,oBAAoB,IAC3B,cACI,KAAK,EAAE,GAAG,CAAC,sCAAsC,CAAC,sBAElD,KAAK,EAAC,uBAAuB,aACrB,oBAAoB,EAC5B,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,IAE7C,eAAS,IAAI,EAAC,YAAY,GAAG,CACxB,EACT,cACI,KAAK,EAAE,GAAG,CAAC,kCAAkC,CAAC,sBAE9C,KAAK,EAAC,uBAAuB,aACrB,gBAAgB,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,IAE7C,eAAS,IAAI,EAAC,aAAa,GAAG,CACzB,CACP,CACJ,CACJ,EACN,WACI,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAE7B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC1B,WAAK,KAAK,EAAC,OAAO,IACd,YACI,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,gBACR,KAAK,gBACL,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,IAE7C,KAAK,CAAC,IAAI,CACR,CACL,CACT,CAAC,CACA,EACL,IAAI,CAAC,KAAK,KACP,WAAK,KAAK,EAAC,aAAa,IACnB,GAAG,CAAC,+BAA+B,CAAC,QAAI,IAAI,CAAC,KAAK,CACjD,CACT,CACC,EACR;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2MonthPicker"],"sources":["./src/components/q2-calendar/q2-month-picker.scss?tag=q2-month-picker&encapsulation=shadow","./src/components/q2-calendar/q2-month-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.month-container {\n --comp-month-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n --comp-month-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\n --comp-month-primary-background: #{var-list(\n --tct-btn-secondary-background,\n --tct-btn-secondary-bg,\n --t-button-default-bg,\n #cccccc\n )};\n --comp-month-secondary-font-color: #{var-list(\n var-prefixer(btn-secondary-font-color),\n --t-button-default-font-color,\n #2e2e2e\n )};\n .navigation {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n .year-btn {\n padding: 0 1rem;\n display: flex;\n align-items: center;\n .year {\n margin-right: 0.2rem;\n }\n .year-icon {\n --t-icon-stroke-width: 2px;\n width: 16px;\n height: 16px;\n transition: all 0.3s ease-in-out;\n &.on {\n transform: rotate(-180deg);\n }\n }\n }\n .month-controller {\n display: flex;\n align-items: center;\n }\n }\n .month-list {\n display: grid;\n grid-template-columns: auto auto auto;\n .month {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0.5rem 0;\n .month-button {\n border-radius: 50%;\n aspect-ratio: 1;\n width: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n &:hover {\n background: var(--comp-month-primary-background);\n color: var(--comp-month-secondary-font-color);\n cursor: pointer;\n }\n &:active,\n &.active {\n background: var(--comp-month-primary-background);\n color: var(--comp-month-primary-font-color);\n }\n }\n }\n }\n\n .today-label {\n padding: 0.5rem 0;\n color: var-list(\n var-prefixer(calendar-day-selected-outline-color),\n --tct-stoplight-info,\n --const-stoplight-info,\n #0079c1\n );\n }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Event, EventEmitter } from '@stencil/core';\nimport { loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-month-picker',\n shadow: true,\n styleUrl: 'q2-month-picker.scss',\n})\nexport class Q2MonthPicker implements ComponentInterface {\n @Prop({ reflect: true, mutable: true }) year: number = Number(\n new Date().toLocaleString('en-US', { year: 'numeric' })\n );\n @Prop({ reflect: true }) disabledMonths: string[];\n @Prop() today: string;\n @Element() hostElement: HTMLElement;\n @Event() viewChange: EventEmitter;\n @Event() toggleChange: EventEmitter;\n @State() selectedIndex: number = 0;\n @State() focusedIndex: number = 0;\n @State() showYearLayer: boolean = false;\n scheduledAfterRender: (() => void)[] = [];\n\n private monthGrid = [\n [0, 1, 2],\n [3, 4, 5],\n [6, 7, 8],\n [9, 10, 11],\n ];\n private months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ].map(mon => ({\n label: loc(`tecton.element.calendar.months.${mon}`),\n abbr: loc(`tecton.element.calendar.months.abbr.${mon}`),\n }));\n\n componentDidRender() {\n this.scheduledAfterRender?.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n onMonthSelection = (event: MouseEvent) => {\n const targetElement = (event.target as HTMLButtonElement).closest('.month-button') as HTMLElement;\n if (targetElement?.dataset?.index) {\n this.selectMonth(Number(targetElement?.dataset?.index));\n }\n };\n\n onMonthKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' \|\| event.key === 'Esc') {\n this.toggleChange.emit({ close: true });\n return;\n }\n const monthIndex = (event.target as HTMLElement).dataset.index;\n if (!monthIndex) return;\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.stopPropagation();\n this.selectMonth(Number(monthIndex));\n } else {\n const nextMonthIndex = this.moveMonth(this.monthGrid, Number(monthIndex), event);\n this.focusMonth(nextMonthIndex);\n }\n };\n\n moveMonth = (grid: number[][], index: number, event: KeyboardEvent) => {\n const rows = grid.length;\n const cols = grid[0].length;\n const row = Math.floor(index / cols);\n const col = index % cols;\n const current = [row, col];\n if (event.key === 'ArrowUp') {\n event.stopPropagation();\n event.preventDefault();\n return grid[Math.max(0, current[0] - 1)][current[1]];\n } else if (event.key === 'ArrowDown') {\n event.stopPropagation();\n event.preventDefault();\n return grid[Math.min(rows - 1, current[0] + 1)][current[1]];\n } else if (event.key === 'ArrowLeft') {\n event.stopPropagation();\n event.preventDefault();\n return Math.max(0, index - 1);\n } else if (event.key === 'ArrowRight') {\n event.stopPropagation();\n event.preventDefault();\n return Math.min(this.months.length - 1, index + 1);\n } else {\n return grid[current[0]][current[1]];\n }\n };\n\n focusMonth = (index: number) => {\n const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n `.month-button[data-index=\"${index}\"]`\n );\n if (nextMonth) {\n this.focusedIndex = index;\n nextMonth.focus();\n }\n };\n\n selectMonth = (index: number) => {\n this.selectedIndex = index;\n this.focusedIndex = index;\n const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n `.month-button[data-index=\"${index}\"]`\n );\n this.hostElement.shadowRoot\n .querySelectorAll<HTMLElement>(`.month-button`)\n ?.forEach(el => el.classList.remove('active'));\n nextMonth?.classList.add('active');\n nextMonth?.focus();\n const value = {\n view: 'day', // change to day view\n monthIndex: index,\n selectedYear: this.year,\n };\n this.hostElement.onchange?.(\n new CustomEvent('click', {\n bubbles: true,\n detail: value,\n })\n );\n this.viewChange.emit(value);\n };\n selectYear = (year: number) => {\n this.year = Math.max(1970, year);\n };\n\n render() {\n return (\n <div\n class=\"month-container\"\n onKeyDown={this.onMonthKeydown}\n >\n <div class=\"navigation\">\n <q2-btn\n class=\"year-btn\"\n onClick={() =>\n this.viewChange.emit({\n view: 'year',\n selectedYear: this.year,\n })\n }\n >\n <span class=\"year\">{this.year}</span>\n <q2-icon\n class=\"year-icon off\"\n type=\"chevron-down\"\n ></q2-icon>\n </q2-btn>\n <div class=\"month-controller\">\n <div class=\"cal-year-prev-next\">\n <q2-btn\n label={loc('tecton.element.calendar.previousYear')}\n hide-label\n class=\"cal-nav-btn prev-year\"\n test-id=\"previousYearButton\"\n onClick={() => this.selectYear(this.year - 1)}\n >\n <q2-icon type=\"arrow-left\" />\n </q2-btn>\n <q2-btn\n label={loc('tecton.element.calendar.nextYear')}\n hide-label\n class=\"cal-nav-btn next-year\"\n test-id=\"nextYearButton\"\n onClick={() => this.selectYear(this.year + 1)}\n >\n <q2-icon type=\"arrow-right\" />\n </q2-btn>\n </div>\n </div>\n </div>\n <div\n class=\"month-list\"\n onClick={this.onMonthSelection}\n >\n {this.months.map((month, index) => (\n <div class=\"month\">\n <span\n role=\"button\"\n class=\"month-button\"\n data-index={index}\n aria-label={month.label}\n tabindex={index === this.focusedIndex ? 0 : -1}\n >\n {month.abbr}\n </span>\n </div>\n ))}\n </div>\n {this.today && (\n <div class=\"today-label\">\n {loc('tecton.element.calendar.today')}: {this.today}\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/q2-pagination.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './index8.js';
 import { d as defineCustomElement$3 } from './index9.js';
 import { d as defineCustomElement$2 } from './index10.js';
-const stylesCss = "*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{text-align:right;display:block;width:100%}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{text-align:right;display:block;width:100%}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}";
 const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination extends HTMLElement {
   constructor() {

package/dist/components/q2-pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-pagination.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,o/DAAo/D;;MCQz/DA,cAAY;;;;;;IAiHrB,qBAAgB,GAAG,CAAC,IAAY;MAC5B,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;MACxC,IAAI,IAAI,GAAG,CAAC,EAAE;QACV,IAAI,GAAG,CAAC,CAAC;OACZ;WAAM,IAAI,IAAI,GAAG,UAAU,EAAE;QAC1B,IAAI,GAAG,UAAU,CAAC;OACrB;MAED,IAAI,UAAU,CAAC,KAAK,KAAK,GAAG,IAAI,EAAE;QAAE,UAAU,CAAC,KAAK,GAAG,GAAG,IAAI,EAAE,CAAC;MAEjE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;QAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;OACpB;MAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;KAC9B,CAAC;IAEF,cAAS,GAAG;MACR,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;MAC/C,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,WAAW,CAAC;MACpE,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;MAC7B,IAAI,aAAa;QAAE,OAAO;MAE1B,SAAS,CAAC;QACN,MAAM,2BAA2B,GAAG,IAAI,CAAC,cAAc,KAAK,gBAAgB,CAAC,WAAW,CAAC;QACzF,IAAI,2BAA2B;UAAE,OAAO;QACxC,IAAI,CAAC,cAAc,GAAG,gBAAgB,CAAC,WAAW,CAAC;QACnD,IAAI,CAAC,SAAS,EAAE,CAAC;OACpB,CAAC,CAAC;KACN,CAAC;;;;;;;;oBAtI0D,IAAI;;;;EAchE,iBAAiB;IACb,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC/B;EAED,gBAAgB;IACZ,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;IAExD,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACnC;EAED,oBAAoB;IAChB,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC/B;;EAOD,oBAAoB;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACvD,IAAI,IAAI,CAAC,cAAc;QAAE,OAAO;MAChC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;MACjE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;MAC9C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;KACrD;SAAM;MACH,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC/B;GACJ;;EAKD,kBAAkB,CAAC,KAAK;;IACpB,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAChE,IAAI,gBAAgB,EAAE;MAClB,MAAA,gBAAgB,CAAC,aAAa,CAAc,wBAAwB,CAAC,0CAAE,KAAK,EAAE,CAAC;KAClF;SAAM;MACH,UAAU,CAAC,KAAK,EAAE,CAAC;KACtB;GACJ;;EAID,IAAI,gBAAgB;IAChB,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC;GAC7D;EAED,IAAI,eAAe;IACf,OAAO,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;GACzB;EAED,IAAI,kBAAkB;IAClB,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;GAC7B;EAED,IAAI,gBAAgB;IAChB,OAAO,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;GAC1B;EAED,IAAI,qBAAqB;IACrB,OAAO,IAAI,CAAC,UAAU,IAAI,GAAG,CAAC,6CAA6C,CAAC,CAAC;GAChF;EAED,IAAI,YAAY;IACZ,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC7F,MAAM,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,OAAO,GAAG,CAAC,CAAC;IACvC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,EAAE,KAAK,CAAC,CAAC;IAC5C,OAAO,GAAG,KAAK,MAAM,GAAG,EAAE,CAAC;GAC9B;EAED,IAAI,UAAU;IACV,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAExF,IAAI,SAAS,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;MAAE,OAAO,KAAK,CAAC;IAErE,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC;GACrC;;EAID,oBAAoB;;IAChB,IAAI,IAAI,CAAC,cAAc,EAAE;MACrB,MAAA,IAAI,CAAC,cAAc,0CAAE,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;MACjD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAC3B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;KACxD;GACJ;EAiCD,MAAM;IACF,MAAM,EACF,SAAS,EACT,gBAAgB,EAChB,qBAAqB,EAAE,UAAU,EACjC,UAAU,EACV,gBAAgB,EAAE,KAAK,EACvB,eAAe,EAAE,IAAI,EACrB,YAAY,GACf,GAAG,IAAI,CAAC;IACT,MAAM,WAAW,GAAG,IAAI,KAAK,CAAC,CAAC;IAC/B,MAAM,UAAU,GAAG,IAAI,KAAK,UAAU,CAAC;IAEvC,QACI,WACI,KAAK,EAAC,WAAW,EACjB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,gBAC3B,GAAG,CAAC,iCAAiC,CAAC,IAElD,WACI,KAAK,EAAC,aAAa,aACX,aAAa,IAEpB,SAAS;QACJ,GAAG,CAAC,iCAAiC,EAAE;QACnC,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,UAAU;OACpB,CAAC;QACF,GAAG,CAAC,uCAAuC,EAAE;QACzC,KAAK,EAAE,YAAY;QACnB,UAAU,EAAE,UAAU,CAAC,WAAW,EAAE;QACpC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE;OAChC,CAAC,CACN,EACN,WAAK,KAAK,EAAC,WAAW,IAClB,cACI,KAAK,EAAE,GAAG,CAAC,yCAAyC,CAAC,EACrD,QAAQ,EAAE,WAAW,EACrB,MAAM,EAAE,gBAAgB,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAC/B,cAAc,wBAGtB,eAAS,IAAI,EAAC,qBAAqB,GAAG,CACjC,EACT,cACI,KAAK,EAAE,GAAG,CAAC,qCAAqC,EAAE;QAC9C,IAAI,EAAE,IAAI,GAAG,CAAC;QACd,KAAK,EAAE,UAAU;OACpB,CAAC,EACF,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,CAAC,CAAC,aACtC,aAAa,wBAGrB,eAAS,IAAI,EAAC,cAAc,GAAG,CAC1B,CACP,EACN,WACI,KAAK,EAAC,UAAU,EAChB,MAAM,EAAE,gBAAgB,aAChB,UAAU,IAElB,2BAAkB,MAAM,IAAE,GAAG,CAAC,gCAAgC,CAAC,CAAQ,EACvE,WACI,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,IAErE,gBACI,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,GAAG,IAAI,EAAE,EAChB,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,SAAS,QACT,QAAQ,QACR,KAAK,EAAE,GAAG,GAAG,CAAC,gCAAgC,CAAC,KAAK,GAAG,CACnD,mCAAmC,EACnC,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC,CAChC,GAAG,EACJ,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,aACpD,WAAW,EACnB,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,GACzB,CACV,EACN,2BAAkB,MAAM,IACnB,GAAG,CAAC,mCAAmC,EAAE,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC,CAAC,CACrE,CACL,EACN,WAAK,KAAK,EAAC,WAAW,IAClB,cACI,KAAK,EAAE,GAAG,CAAC,qCAAqC,EAAE;QAC9C,IAAI,EAAE,IAAI,GAAG,CAAC;QACd,KAAK,EAAE,UAAU;OACpB,CAAC,EACF,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,CAAC,CAAC,aACtC,aAAa,wBAGrB,eAAS,IAAI,EAAC,eAAe,GAAG,CAC3B,EACT,cACI,KAAK,EAAC,wCAAwC,EAC9C,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,gBAAgB,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,aACxC,aAAa,wBAGrB,eAAS,IAAI,EAAC,sBAAsB,GAAG,CAClC,CACP,CACJ,EACR;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Pagination"],"sources":["./src/components/q2-pagination/styles.scss?tag=q2-pagination&encapsulation=shadow","./src/components/q2-pagination/index.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n text-align: right;\n display: block;\n width: 100%;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.container {\n display: inline-flex;\n column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n align-items: center;\n height: var-list(var-prefixer(pagination-height), 44px);\n}\n\n.btn-group {\n display: flex;\n gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n white-space: nowrap;\n}\n\n.controls {\n display: grid;\n grid-template-columns: auto 50px auto;\n align-items: center;\n gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n &[hidden] {\n display: none;\n }\n}\n\n.input-wrapper {\n height: var-list(var-prefixer(pagination-height), 44px);\n display: flex;\n align-items: center;\n}\n\nq2-btn {\n --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n}\n\nq2-icon {\n --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n --tct-input-margin-top: 0;\n --tct-input-margin-bottom: 0;\n --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n --tct-input-min-height: var(--tct-input-height);\n --tct-input-align: center;\n}\n","import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Event } from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-pagination',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Pagination implements ComponentInterface {\n @Prop() recordType: string;\n @Prop() perPage: number;\n @Prop({ reflect: true }) total: number;\n @Prop({ reflect: true, mutable: true }) page: number;\n @Prop({ reflect: true, mutable: true }) pages: number;\n @Prop({ reflect: true, mutable: true }) recordsOnly: boolean;\n @Prop({ reflect: true, mutable: true }) pagesOnly: boolean;\n @Prop({ reflect: true, mutable: true }) autoSize: boolean = true;\n\n @Element() hostElement: HTMLElement;\n\n @Event() change;\n\n @State() isSmall: boolean;\n\n inputField: HTMLQ2InputElement;\n containerElement: HTMLElement;\n containerWidth: number;\n resizeObserver: ResizeObserver;\n\n ////////// LIFECYCLE HOOKS ////////\n componentWillLoad(): void {\n this.manageResizeObserver();\n }\n\n componentDidLoad(): void {\n this.containerWidth = this.containerElement.clientWidth;\n\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n this.removeResizeObserver();\n }\n\n ///////// OBSERVERS /////////\n\n @Watch('recordsOnly')\n @Watch('pagesOnly')\n @Watch('autoSize')\n manageResizeObserver() {\n if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\n if (this.resizeObserver) return;\n this.resizeObserver = new ResizeObserver(() => this.checkSize());\n this.resizeObserver.observe(this.hostElement);\n window.addEventListener('resize', this.checkSize);\n } else {\n this.isSmall = false;\n this.removeResizeObserver();\n }\n }\n\n ///////// HOST ELEMENT EVENTS /////////\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const { isFullViewHidden, containerElement, inputField } = this;\n if (isFullViewHidden) {\n containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n } else {\n inputField.focus();\n }\n }\n\n ///////// GETTERS /////////\n\n get isFullViewHidden() {\n return this.isSmall \|\| this.recordsOnly \|\| this.pagesOnly;\n }\n\n get pageWithDefault() {\n return this.page \|\| 1;\n }\n\n get perPageWithDefault() {\n return this.perPage \|\| 10;\n }\n\n get totalWithDefault() {\n return this.total \|\| 0;\n }\n\n get recordTypeWithDefault() {\n return this.recordType \|\| loc('tecton.element.pagination.defaultRecordType');\n }\n\n get currentRange() {\n const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n const start = (page - 1) * perPage + 1;\n const end = Math.min(page * perPage, total);\n return `${start} - ${end}`;\n }\n\n get totalPages() {\n const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;\n\n if (pagesOnly && pages && !isNaN(parseInt(`${pages}`))) return pages;\n\n return Math.ceil(total / perPage);\n }\n\n ///////// HELPERS /////////\n\n removeResizeObserver() {\n if (this.resizeObserver) {\n this.resizeObserver?.unobserve(this.hostElement);\n this.resizeObserver = null;\n window.removeEventListener('resize', this.checkSize);\n }\n }\n\n handlePageChange = (page: number) => {\n const { totalPages, inputField } = this;\n if (page < 1) {\n page = 1;\n } else if (page > totalPages) {\n page = totalPages;\n }\n\n if (inputField.value !== `${page}`) inputField.value = `${page}`;\n\n if (!this.hostElement.onchange) {\n this.page = page;\n }\n\n this.change.emit({ page });\n };\n\n checkSize = () => {\n const { hostElement, containerElement } = this;\n const isOverflowing = this.containerWidth > hostElement.clientWidth;\n this.isSmall = isOverflowing;\n if (isOverflowing) return;\n\n nextPaint(() => {\n const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;\n if (containerWidthHasNotChanged) return;\n this.containerWidth = containerElement.clientWidth;\n this.checkSize();\n });\n };\n\n render() {\n const {\n pagesOnly,\n isFullViewHidden,\n recordTypeWithDefault: recordType,\n totalPages,\n totalWithDefault: total,\n pageWithDefault: page,\n currentRange,\n } = this;\n const onFirstPage = page === 1;\n const onLastPage = page === totalPages;\n\n return (\n <nav\n class=\"container\"\n ref={el => (this.containerElement = el)}\n aria-label={loc('tecton.element.pagination.title')}\n >\n <div\n class=\"description\"\n test-id=\"description\"\n >\n {pagesOnly\n ? loc('tecton.element.pagination.pages', {\n current: page,\n total: totalPages,\n })\n : loc('tecton.element.pagination.description', {\n range: currentRange,\n recordType: recordType.toLowerCase(),\n total: total.toLocaleString(),\n })}\n </div>\n <div class=\"btn-group\">\n <q2-btn\n label={loc('tecton.element.pagination.goToFirstPage')}\n disabled={onFirstPage}\n hidden={isFullViewHidden}\n onClick={() => this.handlePageChange(1)}\n test-id=\"firstPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-double-left\" />\n </q2-btn>\n <q2-btn\n label={loc('tecton.element.pagination.goToPages', {\n next: page - 1,\n total: totalPages,\n })}\n disabled={onFirstPage}\n onClick={() => this.handlePageChange(page - 1)}\n test-id=\"prevPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-left\" />\n </q2-btn>\n </div>\n <div\n class=\"controls\"\n hidden={isFullViewHidden}\n test-id=\"controls\"\n >\n <span aria-hidden=\"true\">{loc('tecton.element.pagination.page')}</span>\n <div\n class=\"input-wrapper\"\n onClick={() => this.inputField.dispatchEvent(new FocusEvent('focus'))}\n >\n <q2-input\n type=\"number\"\n value={`${page}`}\n min={1}\n max={this.totalPages}\n hideLabel\n optional\n label={`${loc('tecton.element.pagination.page')} (${loc(\n 'tecton.element.pagination.ofPages',\n [totalPages.toLocaleString()]\n )})`}\n onChange={event => this.handlePageChange(event.detail.value)}\n test-id=\"pageInput\"\n current=\"page\"\n ref={el => (this.inputField = el)}\n ></q2-input>\n </div>\n <span aria-hidden=\"true\">\n {loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])}\n </span>\n </div>\n <div class=\"btn-group\">\n <q2-btn\n label={loc('tecton.element.pagination.goToPages', {\n next: page + 1,\n total: totalPages,\n })}\n disabled={onLastPage}\n onClick={() => this.handlePageChange(page + 1)}\n test-id=\"nextPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-right\" />\n </q2-btn>\n <q2-btn\n label=\"tecton.element.pagination.goToLastPage\"\n disabled={onLastPage}\n hidden={isFullViewHidden}\n onClick={() => this.handlePageChange(totalPages)}\n test-id=\"lastPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-double-right\" />\n </q2-btn>\n </div>\n </nav>\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-pagination.js","mappings":"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","names":["Q2Pagination"],"sources":["./src/components/q2-pagination/styles.scss?tag=q2-pagination&encapsulation=shadow","./src/components/q2-pagination/index.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n text-align: right;\n display: block;\n width: 100%;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.container {\n display: inline-flex;\n column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n align-items: center;\n height: var-list(var-prefixer(pagination-height), 44px);\n}\n\n.btn-group {\n display: flex;\n gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n white-space: nowrap;\n}\n\n.controls {\n display: grid;\n grid-template-columns: auto 50px auto;\n align-items: center;\n gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n &[hidden] {\n display: none;\n }\n}\n\n.input-wrapper {\n height: var-list(var-prefixer(pagination-height), 44px);\n display: flex;\n align-items: center;\n}\n\nq2-btn {\n --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n}\n\nq2-icon {\n --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n --tct-input-margin-top: 0;\n --tct-input-margin-bottom: 0;\n --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n --tct-input-min-height: var(--tct-input-height);\n --tct-input-align: center;\n}\n","import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Event } from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-pagination',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Pagination implements ComponentInterface {\n @Prop() recordType: string;\n @Prop() perPage: number;\n @Prop({ reflect: true }) total: number;\n @Prop({ reflect: true, mutable: true }) page: number;\n @Prop({ reflect: true, mutable: true }) pages: number;\n @Prop({ reflect: true, mutable: true }) recordsOnly: boolean;\n @Prop({ reflect: true, mutable: true }) pagesOnly: boolean;\n @Prop({ reflect: true, mutable: true }) autoSize: boolean = true;\n\n @Element() hostElement: HTMLElement;\n\n @Event() change;\n\n @State() isSmall: boolean;\n\n inputField: HTMLQ2InputElement;\n containerElement: HTMLElement;\n containerWidth: number;\n resizeObserver: ResizeObserver;\n\n ////////// LIFECYCLE HOOKS ////////\n componentWillLoad(): void {\n this.manageResizeObserver();\n }\n\n componentDidLoad(): void {\n this.containerWidth = this.containerElement.clientWidth;\n\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n this.removeResizeObserver();\n }\n\n ///////// OBSERVERS /////////\n\n @Watch('recordsOnly')\n @Watch('pagesOnly')\n @Watch('autoSize')\n manageResizeObserver() {\n if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\n if (this.resizeObserver) return;\n this.resizeObserver = new ResizeObserver(() => this.checkSize());\n this.resizeObserver.observe(this.hostElement);\n window.addEventListener('resize', this.checkSize);\n } else {\n this.isSmall = false;\n this.removeResizeObserver();\n }\n }\n\n ///////// HOST ELEMENT EVENTS /////////\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const { isFullViewHidden, containerElement, inputField } = this;\n if (isFullViewHidden) {\n containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n } else {\n inputField.focus();\n }\n }\n\n ///////// GETTERS /////////\n\n get isFullViewHidden() {\n return this.isSmall \|\| this.recordsOnly \|\| this.pagesOnly;\n }\n\n get pageWithDefault() {\n return this.page \|\| 1;\n }\n\n get perPageWithDefault() {\n return this.perPage \|\| 10;\n }\n\n get totalWithDefault() {\n return this.total \|\| 0;\n }\n\n get recordTypeWithDefault() {\n return this.recordType \|\| loc('tecton.element.pagination.defaultRecordType');\n }\n\n get currentRange() {\n const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n const start = (page - 1) * perPage + 1;\n const end = Math.min(page * perPage, total);\n return `${start} - ${end}`;\n }\n\n get totalPages() {\n const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;\n\n if (pagesOnly && pages && !isNaN(parseInt(`${pages}`))) return pages;\n\n return Math.ceil(total / perPage);\n }\n\n ///////// HELPERS /////////\n\n removeResizeObserver() {\n if (this.resizeObserver) {\n this.resizeObserver?.unobserve(this.hostElement);\n this.resizeObserver = null;\n window.removeEventListener('resize', this.checkSize);\n }\n }\n\n handlePageChange = (page: number) => {\n const { totalPages, inputField } = this;\n if (page < 1) {\n page = 1;\n } else if (page > totalPages) {\n page = totalPages;\n }\n\n if (inputField.value !== `${page}`) inputField.value = `${page}`;\n\n if (!this.hostElement.onchange) {\n this.page = page;\n }\n\n this.change.emit({ page });\n };\n\n checkSize = () => {\n const { hostElement, containerElement } = this;\n const isOverflowing = this.containerWidth > hostElement.clientWidth;\n this.isSmall = isOverflowing;\n if (isOverflowing) return;\n\n nextPaint(() => {\n const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;\n if (containerWidthHasNotChanged) return;\n this.containerWidth = containerElement.clientWidth;\n this.checkSize();\n });\n };\n\n render() {\n const {\n pagesOnly,\n isFullViewHidden,\n recordTypeWithDefault: recordType,\n totalPages,\n totalWithDefault: total,\n pageWithDefault: page,\n currentRange,\n } = this;\n const onFirstPage = page === 1;\n const onLastPage = page === totalPages;\n\n return (\n <nav\n class=\"container\"\n ref={el => (this.containerElement = el)}\n aria-label={loc('tecton.element.pagination.title')}\n >\n <div\n class=\"description\"\n test-id=\"description\"\n >\n {pagesOnly\n ? loc('tecton.element.pagination.pages', {\n current: page,\n total: totalPages,\n })\n : loc('tecton.element.pagination.description', {\n range: currentRange,\n recordType: recordType.toLowerCase(),\n total: total.toLocaleString(),\n })}\n </div>\n <div class=\"btn-group\">\n <q2-btn\n label={loc('tecton.element.pagination.goToFirstPage')}\n disabled={onFirstPage}\n hidden={isFullViewHidden}\n onClick={() => this.handlePageChange(1)}\n test-id=\"firstPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-double-left\" />\n </q2-btn>\n <q2-btn\n label={loc('tecton.element.pagination.goToPages', {\n next: page - 1,\n total: totalPages,\n })}\n disabled={onFirstPage}\n onClick={() => this.handlePageChange(page - 1)}\n test-id=\"prevPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-left\" />\n </q2-btn>\n </div>\n <div\n class=\"controls\"\n hidden={isFullViewHidden}\n test-id=\"controls\"\n >\n <span aria-hidden=\"true\">{loc('tecton.element.pagination.page')}</span>\n <div\n class=\"input-wrapper\"\n onClick={() => this.inputField.dispatchEvent(new FocusEvent('focus'))}\n >\n <q2-input\n type=\"number\"\n value={`${page}`}\n min={1}\n max={this.totalPages}\n hideLabel\n optional\n label={`${loc('tecton.element.pagination.page')} (${loc(\n 'tecton.element.pagination.ofPages',\n [totalPages.toLocaleString()]\n )})`}\n onChange={event => this.handlePageChange(event.detail.value)}\n test-id=\"pageInput\"\n current=\"page\"\n ref={el => (this.inputField = el)}\n ></q2-input>\n </div>\n <span aria-hidden=\"true\">\n {loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])}\n </span>\n </div>\n <div class=\"btn-group\">\n <q2-btn\n label={loc('tecton.element.pagination.goToPages', {\n next: page + 1,\n total: totalPages,\n })}\n disabled={onLastPage}\n onClick={() => this.handlePageChange(page + 1)}\n test-id=\"nextPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-right\" />\n </q2-btn>\n <q2-btn\n label=\"tecton.element.pagination.goToLastPage\"\n disabled={onLastPage}\n hidden={isFullViewHidden}\n onClick={() => this.handlePageChange(totalPages)}\n test-id=\"lastPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-double-right\" />\n </q2-btn>\n </div>\n </nav>\n );\n }\n}\n"],"version":3}

package/dist/components/q2-pill.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './index8.js';
 import { d as defineCustomElement$3 } from './index14.js';
 import { d as defineCustomElement$2 } from './index15.js';
-const stylesCss = "*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary-l5, #61c4ff));--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary-l5, #61c4ff));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary-l5, #d9e1e6));--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary-l5, #d9e1e6));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary-l5, #f4fafe));--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary-l5, #f4fafe));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #61c4ff));--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #61c4ff));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #d9e1e6));--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #d9e1e6));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #f4fafe));--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #f4fafe));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";
 const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLElement {
   constructor() {

package/dist/components/q2-pill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-pill.js","mappings":"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","names":["Q2Pill"],"sources":["./src/components/q2-pill/styles.scss?tag=q2-pill&encapsulation=shadow","./src/components/q2-pill/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n --comp-close-size: 0px;\n --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n --comp-active-btn-color: var(--comp-btn-background);\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n position: relative;\n\n :host(:not(:empty)) &,\n &.has-icon {\n --comp-close-size: var(--comp-pill-btn-height);\n }\n\n :host([active]) & {\n --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n }\n\n :host([theme='primary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary-l5, #61c4ff)};\n --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary-l5, #61c4ff)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-primary-active-hover-background,\n --t-primary-l3,\n #21acff\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-primary-active-hover-border-color,\n --t-primary-l3,\n #21acff\n )};\n }\n\n :host([theme='secondary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary-l5, #d9e1e6)};\n --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary-l5, #d9e1e6)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-secondary-active-hover-background,\n --t-secondary-l3,\n #c9d5db\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-secondary-active-hover-border-color,\n --t-secondary-l3,\n #c9d5db\n )};\n }\n\n :host([theme='tertiary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary-l5, #f4fafe)};\n --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary-l5, #f4fafe)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-tertiary-active-hover-background,\n --t-tertiary-l3,\n #eff8fd\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-tertiary-active-hover-border-color,\n --t-tertiary-l3,\n #eff8fd\n )};\n }\n}\n\n.btn-height-wrapper {\n height: var(--comp-pill-min-height);\n display: flex;\n align-items: center;\n cursor: pointer;\n &:focus {\n box-shadow: none;\n }\n\n :host([disabled]) & {\n cursor: not-allowed;\n }\n}\n\n.btn-close,\n.btn-primary {\n cursor: pointer;\n height: var(--comp-pill-btn-height);\n border-style: solid;\n border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n transition-property: background, color, padding, width, opacity;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n :host([disabled]) & {\n opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n}\n\n.btn-primary {\n background: var(--comp-btn-background);\n border-width: var-list(--comp-pill-btn-border-width);\n border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n padding-inline: var(--comp-btn-padding);\n padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n color: var(--comp-btn-color);\n display: block;\n width: 100%;\n text-align: start;\n\n &:focus,\n &:hover {\n background: var(--comp-hover-btn-background);\n }\n\n :host(:not(:empty)) &,\n .has-icon & {\n padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n }\n\n .has-options & {\n @include line-clamp(1);\n max-width: var-list(var-prefixer(pill-max-width), 200px);\n }\n\n :host([active]) & {\n background: var(--comp-active-btn-background);\n border-color: var(--comp-active-btn-border-color);\n color: var(--comp-active-btn-color);\n\n &:focus,\n &:hover {\n background: var(--comp-hover-active-btn-background);\n border-color: var(--comp-hover-active-btn-border-color);\n }\n }\n}\n\n.btn-close {\n background: transparent;\n border-color: transparent;\n border-width: var(--comp-pill-btn-border-width);\n width: var(--comp-close-size);\n height: var(--comp-close-size);\n padding: 0;\n border: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n :host([active]) & {\n color: var(--comp-active-btn-color);\n }\n\n :host(:not(:empty)) &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --t-icon-stroke-primary: currentColor;\n width: var-list(var-prefixer(pill-icon-size), 14px);\n height: var-list(var-prefixer(pill-icon-size), 14px);\n transition-property: transform;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n pointer-events: none;\n\n :host([open]) & q2-icon {\n transform: rotate(180deg);\n }\n}\n\nbutton.btn-close {\n :host([active]) & {\n &:focus,\n &:hover {\n background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n }\n }\n}\n\nq2-popover {\n top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Listen,\n Watch,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list';\n\n@Component({\n tag: 'q2-pill',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Pill implements ComponentInterface {\n @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true, mutable: true }) active: boolean;\n @Prop({ reflect: true, mutable: true }) open: boolean;\n @Prop({ reflect: true }) multiple: boolean;\n @Prop({ reflect: true }) maxLength: number;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true, mutable: true }) value: string;\n @Prop({ reflect: true }) theme: 'primary' \| 'secondary' \| 'tertiary';\n @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n @Prop() popoverMinHeight: number = 150;\n @Prop() popoverDirection: 'up' \| 'down';\n @Prop({ mutable: true }) popoverAlignment: 'left' \| 'right' = 'right';\n @Prop() optionListLabel: string;\n\n @State() optionCount: number;\n @State() selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n @Element() hostElement: HTMLElement;\n @Event() change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n scheduledAfterRender: (() => void)[] = [];\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n optionList: HTMLQ2OptionListElement;\n mutationObserver: MutationObserver;\n popoverElement: HTMLQ2PopoverElement;\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n const observer = new MutationObserver(this.determineOptionCount);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n if (!optionCount \|\| selectedOptionElements.length === 0) return loc(label);\n else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength)\n return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n else return buttonContent;\n }\n\n /// Helpers ///\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\n };\n\n getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) \|\| [];\n };\n\n determineOptionCount = () => {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n };\n\n async executeActionSheet(event: MouseEvent \| KeyboardEvent) {\n const result = await showActionSheetList(this, event);\n this.handleSelectionChanges(result);\n }\n\n async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = await this.getOption(value);\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : [];\n this.value = selectedOption?.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n /// Watchers ///\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (multiple) return;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = await this.getOption(newValue);\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = value ? [{ value, display }] : [];\n }\n }\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n /// Listeners ///\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.optionList.setActiveElement(null);\n }\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n /// Event Handlers ///\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.optionCount) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.selectedOptions = values;\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.optionCount \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n\n event.preventDefault();\n if (shouldShowActionSheet(this, event)) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n this.open = false;\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n this.handleSelectionChanges(event.detail);\n };\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.click();\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n /// DOM ///\n generateIcon() {\n const { optionCount, active } = this;\n const isButton = optionCount && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !optionCount ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={isButton && this.clearSelectedOptions}\n disabled={isButton && this.disabled}\n aria-label={isButton && loc('tecton.element.pill.clearSelection')}\n type={isButton && 'button'}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n generateHiddenElement() {\n return (\n <div\n id=\"option-description\"\n class=\"sr\"\n aria-hidden=\"true\"\n >\n {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n </div>\n );\n }\n\n render() {\n const { optionCount, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (optionCount \|\| active) wrapperClassNames.push('has-icon');\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n role=\"combobox\"\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={optionCount && 'option-list'}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.maxLength && this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.generateIcon()}\n {this.generateHiddenElement()}\n </div>\n {this.optionCount > 0 && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <q2-option-list\n type=\"listbox\"\n ref={el => (this.optionList = el)}\n id=\"option-list\"\n onChange={this.handleChange}\n multiple={this.multiple}\n selectedOptions={this.selectedOptions}\n onReady={() => this.updateSelectedOptionElements()}\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-pill.js","mappings":"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","names":["Q2Pill"],"sources":["./src/components/q2-pill/styles.scss?tag=q2-pill&encapsulation=shadow","./src/components/q2-pill/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n --comp-close-size: 0px;\n --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n --comp-active-btn-color: var(--comp-btn-background);\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n position: relative;\n\n :host(:not(:empty)) &,\n &.has-icon {\n --comp-close-size: var(--comp-pill-btn-height);\n }\n\n :host([active]) & {\n --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n }\n\n :host([theme='primary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #61c4ff)};\n --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #61c4ff)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-primary-active-hover-background,\n --t-primary-l3,\n #21acff\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-primary-active-hover-border-color,\n --t-primary-l3,\n #21acff\n )};\n }\n\n :host([theme='secondary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #d9e1e6)};\n --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #d9e1e6)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-secondary-active-hover-background,\n --t-secondary-l3,\n #c9d5db\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-secondary-active-hover-border-color,\n --t-secondary-l3,\n #c9d5db\n )};\n }\n\n :host([theme='tertiary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #f4fafe)};\n --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #f4fafe)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-tertiary-active-hover-background,\n --t-tertiary-l3,\n #eff8fd\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-tertiary-active-hover-border-color,\n --t-tertiary-l3,\n #eff8fd\n )};\n }\n}\n\n.btn-height-wrapper {\n height: var(--comp-pill-min-height);\n display: flex;\n align-items: center;\n cursor: pointer;\n &:focus {\n box-shadow: none;\n }\n\n :host([disabled]) & {\n cursor: not-allowed;\n }\n}\n\n.btn-close,\n.btn-primary {\n cursor: pointer;\n height: var(--comp-pill-btn-height);\n border-style: solid;\n border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n transition-property: background, color, padding, width, opacity;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n :host([disabled]) & {\n opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n}\n\n.btn-primary {\n background: var(--comp-btn-background);\n border-width: var-list(--comp-pill-btn-border-width);\n border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n padding-inline: var(--comp-btn-padding);\n padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n color: var(--comp-btn-color);\n display: block;\n width: 100%;\n text-align: start;\n\n &:focus,\n &:hover {\n background: var(--comp-hover-btn-background);\n }\n\n :host(:not(:empty)) &,\n .has-icon & {\n padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n }\n\n .has-options & {\n @include line-clamp(1);\n max-width: var-list(var-prefixer(pill-max-width), 200px);\n }\n\n :host([active]) & {\n background: var(--comp-active-btn-background);\n border-color: var(--comp-active-btn-border-color);\n color: var(--comp-active-btn-color);\n\n &:focus,\n &:hover {\n background: var(--comp-hover-active-btn-background);\n border-color: var(--comp-hover-active-btn-border-color);\n }\n }\n}\n\n.btn-close {\n background: transparent;\n border-color: transparent;\n border-width: var(--comp-pill-btn-border-width);\n width: var(--comp-close-size);\n height: var(--comp-close-size);\n padding: 0;\n border: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n :host([active]) & {\n color: var(--comp-active-btn-color);\n }\n\n :host(:not(:empty)) &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --t-icon-stroke-primary: currentColor;\n width: var-list(var-prefixer(pill-icon-size), 14px);\n height: var-list(var-prefixer(pill-icon-size), 14px);\n transition-property: transform;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n pointer-events: none;\n\n :host([open]) & q2-icon {\n transform: rotate(180deg);\n }\n}\n\nbutton.btn-close {\n :host([active]) & {\n &:focus,\n &:hover {\n background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n }\n }\n}\n\nq2-popover {\n top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Listen,\n Watch,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list';\n\n@Component({\n tag: 'q2-pill',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Pill implements ComponentInterface {\n @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true, mutable: true }) active: boolean;\n @Prop({ reflect: true, mutable: true }) open: boolean;\n @Prop({ reflect: true }) multiple: boolean;\n @Prop({ reflect: true }) maxLength: number;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true, mutable: true }) value: string;\n @Prop({ reflect: true }) theme: 'primary' \| 'secondary' \| 'tertiary';\n @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n @Prop() popoverMinHeight: number = 150;\n @Prop() popoverDirection: 'up' \| 'down';\n @Prop({ mutable: true }) popoverAlignment: 'left' \| 'right' = 'right';\n @Prop() optionListLabel: string;\n\n @State() optionCount: number;\n @State() selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n @Element() hostElement: HTMLElement;\n @Event() change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n scheduledAfterRender: (() => void)[] = [];\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n optionList: HTMLQ2OptionListElement;\n mutationObserver: MutationObserver;\n popoverElement: HTMLQ2PopoverElement;\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n const observer = new MutationObserver(this.determineOptionCount);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n if (!optionCount \|\| selectedOptionElements.length === 0) return loc(label);\n else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength)\n return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n else return buttonContent;\n }\n\n /// Helpers ///\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\n };\n\n getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) \|\| [];\n };\n\n determineOptionCount = () => {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n };\n\n async executeActionSheet(event: MouseEvent \| KeyboardEvent) {\n const result = await showActionSheetList(this, event);\n this.handleSelectionChanges(result);\n }\n\n async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = await this.getOption(value);\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : [];\n this.value = selectedOption?.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n /// Watchers ///\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (multiple) return;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = await this.getOption(newValue);\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = value ? [{ value, display }] : [];\n }\n }\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n /// Listeners ///\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.optionList.setActiveElement(null);\n }\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n /// Event Handlers ///\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.optionCount) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.selectedOptions = values;\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.optionCount \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n\n event.preventDefault();\n if (shouldShowActionSheet(this, event)) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n this.open = false;\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n this.handleSelectionChanges(event.detail);\n };\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.click();\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n /// DOM ///\n generateIcon() {\n const { optionCount, active } = this;\n const isButton = optionCount && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !optionCount ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={isButton && this.clearSelectedOptions}\n disabled={isButton && this.disabled}\n aria-label={isButton && loc('tecton.element.pill.clearSelection')}\n type={isButton && 'button'}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n generateHiddenElement() {\n return (\n <div\n id=\"option-description\"\n class=\"sr\"\n aria-hidden=\"true\"\n >\n {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n </div>\n );\n }\n\n render() {\n const { optionCount, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (optionCount \|\| active) wrapperClassNames.push('has-icon');\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n role=\"combobox\"\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={optionCount && 'option-list'}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.maxLength && this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.generateIcon()}\n {this.generateHiddenElement()}\n </div>\n {this.optionCount > 0 && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <q2-option-list\n type=\"listbox\"\n ref={el => (this.optionList = el)}\n id=\"option-list\"\n onChange={this.handleChange}\n multiple={this.multiple}\n selectedOptions={this.selectedOptions}\n onReady={() => this.updateSelectedOptionElements()}\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n}\n"],"version":3}

package/dist/components/q2-radio-group.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@sten
 import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index16.js';
 import { d as defineCustomElement$2 } from './index8.js';
-const stylesCss = "*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:0;margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";gap:var(--app-scale-1x, 5px)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-1x, 5px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px))}:host([has-error]) .options-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:0;margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";gap:var(--app-scale-1x, 5px)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-1x, 5px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px))}:host([has-error]) .options-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}";
 const Q2RadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2RadioGroup extends HTMLElement {
   constructor() {
@@ -104,6 +104,11 @@ const Q2RadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2RadioGroup exten
     });
   }
   /// Methods ///
+  /**
+   * Emulates clicking the `<q2-radio>` option with the provided value.
+   *
+   * @testOnly
+   */
   setValue(value) {
     this.radioElements.forEach(radio => {
       if (value !== radio.value)