npm - @umbraco-ui/uui - Versions diffs - 2.0.0-alpha.1 → 2.0.0-rc.0 - Mend

@umbraco-ui/uui 2.0.0-alpha.1 → 2.0.0-rc.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 (96) hide show

package/dist/components/input/input.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.element.js","sources":["../../../src/components/input/input.element.ts"],"sourcesContent":["import {\n UUIFormControlWithBasicsMixin,\n LabelMixin,\n} from '../../internal/mixins/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { UUIInputEvent } from './UUIInputEvent.js';\n\nexport type InputType =\n \| 'text'\n \| 'tel'\n \| 'url'\n \| 'email'\n \| 'password'\n \| 'search'\n \| 'month'\n \| 'week'\n \| 'time'\n \| 'date'\n \| 'datetime-local'\n \| 'number'\n \| 'color';\n\nexport type InputMode =\n \| 'text'\n \| 'none'\n \| 'decimal'\n \| 'numeric'\n \| 'tel'\n \| 'search'\n \| 'email'\n \| 'url';\n\n/*\n Custom element wrapping the native input element.This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.\n * @element uui-input\n * @slot prepend - for components to render to the left of the input.\n * @slot append - for components to render to the right of the input.\n * @property {boolean} spellcheck - get/set native spellcheck attribute\n * @attribute spellcheck - native spellcheck attribute\n * @property {string} value - get/set the value of the input\n * @attribute value - get/set the value of the input\n * @property {string} name - get/set the name of the input\n * @attribute name - get/set the name of the input\n * @fires UUIInputEvent#change on change\n * @fires InputEvent#input on input\n * @fires KeyboardEvent#keyup on keyup\n * @cssprop --uui-input-height - Height of the element\n * @cssprop --uui-input-background-color - Background color of the element\n * @cssprop --uui-input-background-color-disabled - Background color when disabled\n * @cssprop --uui-input-background-color-readonly - Background color when readonly\n * @cssprop --uui-input-border-width - Border width\n * @cssprop --uui-input-border-radius - Border radius\n * @cssprop --uui-input-border-color - Border color\n * @cssprop --uui-input-border-color-hover - Border color on hover\n * @cssprop --uui-input-border-color-focus - Border color on focus\n * @cssprop --uui-input-border-color-disabled - Border color when disabled\n * @cssprop --uui-input-border-color-readonly - Border color when readonly\n /\nexport class UUIInputElement extends UUIFormControlWithBasicsMixin(\n LabelMixin('', LitElement),\n '',\n) {\n /\n This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n * @type {boolean}\n /\n static readonly formAssociated = true;\n\n /\n Sets the min value of the input.\n * Examples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.\n * @type {number \| string}\n * @attr\n * @default undefined\n /\n @property()\n min?: number \| string;\n\n /\n Sets the minimum length of the value of the input.\n * @type {number}\n * @attr\n * @default undefined\n /\n @property({ type: Number })\n minlength?: number;\n\n /\n Minlength validation message.\n * @attr minlength-message\n * @default\n /\n @property({ attribute: 'minlength-message' })\n minlengthMessage: string \| ((charsLeft: number) => string) = charsLeft =>\n `${charsLeft} characters left`;\n\n /\n Sets the max value of the input.\n * Examples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.\n * @type {number \| string}\n * @attr\n * @default undefined\n /\n @property()\n max?: number \| string;\n\n /\n Sets the maximum length of the value of the input.\n * @type {number}\n * @attr\n * @default undefined\n /\n @property({ type: Number })\n maxlength?: number;\n\n /\n Maxlength validation message.\n * @attr maxlength-message\n * @default\n /\n @property({ attribute: 'maxlength-message' })\n maxlengthMessage: string \| ((max: number, current: number) => string) = (\n max,\n current,\n ) => `Maximum ${max} characters, ${current - max} too many.`;\n\n /\n Specifies the interval between legal numbers of the input\n * @type {number}\n * @attr\n * @default undefined\n /\n @property({ type: Number })\n step?: number;\n\n /\n Disables the input.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /\n Defines the input placeholder.\n * @type {string}\n * @attr\n * @default ''\n /\n @property()\n placeholder = '';\n\n /\n Defines the input autocomplete.\n * @type {string}\n * @attr\n * @default undefined\n /\n @property()\n autocomplete?: string;\n\n /\n Sets the input width to fit the value or placeholder if empty\n * @type {boolean}\n * @attr auto-width\n /\n @property({ type: Boolean, reflect: true, attribute: 'auto-width' })\n autoWidth = false;\n\n /\n This property specifies the type of input that will be rendered.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\|MDN} for further information\n * @type {'text' \| 'tel' \| 'url' \| 'email' \| 'password' \| 'date' \| 'month' \| 'week' \| 'time' \| 'datetime-local' \| 'number' \| 'color'}\n * @attr\n * @default text\n /\n @property({ type: String })\n get type(): InputType {\n return this._type;\n }\n set type(value: InputType) {\n this._type = value;\n }\n\n /\n The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\|MDN} for further information\n * @type {'text' \| 'none' \| 'decimal' \| 'number' \| 'tel' \| 'search' \| 'email' \| 'url'}\n * @attr\n * @default text\n /\n @property({ attribute: 'inputmode' })\n inputMode: InputMode = 'text';\n\n /\n Validates the input based on the Regex pattern\n * @type {string}\n * @attr\n /\n @property({ type: String })\n pattern?: string;\n\n /\n Set the input tabindex, set this to `-1` to avoid tabbing into the input.\n * @type {number}\n * @attr\n /\n @property({ type: Number, reflect: false, attribute: 'tabindex' })\n tabIndex: number = 0;\n\n @query('#input')\n readonly _input!: HTMLInputElement;\n\n private _type: InputType = 'text';\n\n constructor() {\n super();\n\n this.addEventListener('keydown', this.#onKeyDown);\n\n this.addValidator(\n 'tooShort',\n () => {\n const label = this.minlengthMessage;\n if (typeof label === 'function') {\n return label(\n this.minlength ? this.minlength - String(this.value).length : 0,\n );\n }\n return label;\n },\n () => !!this.minlength && String(this.value).length < this.minlength,\n );\n this.addValidator(\n 'tooLong',\n () => {\n const label = this.maxlengthMessage;\n if (typeof label === 'function') {\n return label(this.maxlength ?? 0, String(this.value).length);\n }\n return label;\n },\n () => !!this.maxlength && String(this.value).length > this.maxlength,\n );\n\n this.updateComplete.then(() => {\n this.addFormControlElement(this._input);\n });\n }\n\n #onKeyDown(e: KeyboardEvent): void {\n if (this.type !== 'color' && e.key == 'Enter') {\n this.submit();\n }\n }\n\n /\n Removes focus from the input.\n /\n async blur() {\n await this.updateComplete;\n this._input.blur();\n }\n\n /\n This method enables <label for=\"...\"> to focus the input\n /\n async focus() {\n await this.updateComplete;\n this._input.focus();\n }\n\n /\n Selects all the text in the input.\n /\n async select() {\n await this.updateComplete;\n this._input.select();\n }\n\n protected getFormElement(): HTMLElement {\n return this.shadowRoot?.querySelector('input') as HTMLElement;\n }\n\n protected onInput(e: Event) {\n e.stopPropagation();\n this.value = (e.target as HTMLInputElement).value;\n\n this.dispatchEvent(new UUIInputEvent(UUIInputEvent.INPUT));\n }\n\n protected onChange(e: Event) {\n e.stopPropagation();\n this.pristine = false;\n\n this.dispatchEvent(new UUIInputEvent(UUIInputEvent.CHANGE));\n }\n\n protected renderPrepend() {\n return html`<slot name=\"prepend\"></slot>`;\n }\n\n protected renderAppend() {\n return html`<slot name=\"append\"></slot>`;\n }\n\n render() {\n return html`\n ${this.renderPrepend()}\n ${this.autoWidth ? this.renderInputWithAutoWidth() : this.renderInput()}\n ${this.renderAppend()}\n `;\n }\n\n private renderInputWithAutoWidth() {\n return html`<div id=\"autoWidth\">\n ${this.renderInput()}${this.renderAutoWidthBackground()}\n </div>`;\n }\n\n renderInput() {\n return html`<input\n id=\"input\"\n size=${ifDefined(this.autoWidth ? '1' : undefined)}\n .type=${this.type}\n .value=${this.value as string}\n .name=${this.name}\n pattern=${ifDefined(this.pattern)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n step=${ifDefined(this.step)}\n spellcheck=${this.spellcheck}\n autocomplete=${ifDefined(this.autocomplete as any)}\n placeholder=${ifDefined(this.placeholder)}\n aria-label=${ifDefined(this.label)}\n inputmode=${ifDefined(this.inputMode)}\n ?disabled=${this.disabled}\n ?autofocus=${this.autofocus}\n ?required=${this.required}\n ?readonly=${this.readonly}\n tabindex=${ifDefined(this.tabIndex)}\n @input=${this.onInput}\n @change=${this.onChange} />`;\n }\n\n private renderAutoWidthBackground() {\n return html` <div id=\"auto\" aria-hidden=\"true\">${this.renderText()}</div>`;\n }\n\n private renderText() {\n return html`${(this.value as string).length > 0\n ? this.value\n : this.placeholder}`;\n }\n\n static override readonly styles = [\n css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: stretch;\n height: var(--uui-input-height, var(--uui-size-11));\n text-align: left;\n color: var(--uui-color-text);\n color-scheme: var(--uui-color-scheme, normal);\n box-sizing: border-box;\n background-color: var(\n --uui-input-background-color,\n var(--uui-color-surface)\n );\n border: var(--uui-input-border-width, 1px) solid\n var(--uui-input-border-color, var(--uui-color-border));\n border-radius: var(--uui-input-border-radius, var(--uui-border-radius));\n min-width: 0;\n\n --uui-input-padding: 1px var(--uui-size-space-3);\n --uui-button-height: 100%;\n --uui-button-border-radius: var(\n --uui-input-border-radius,\n var(--uui-border-radius)\n );\n --auto-width-text-margin-right: 0;\n --auto-width-text-margin-left: 0;\n }\n\n #autoWidth {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: center;\n flex-grow: 1;\n flex-shrink: 1;\n min-width: 0;\n }\n\n #auto {\n border: 0 1px solid transparent;\n visibility: hidden;\n white-space: pre;\n z-index: -1;\n height: 0px;\n padding: 0 var(--uui-size-space-3);\n margin: 0 var(--auto-width-text-margin-right) 0\n var(--auto-width-text-margin-left);\n }\n\n :host(:hover) {\n border-color: var(\n --uui-input-border-color-hover,\n var(--uui-color-border-standalone)\n );\n }\n / TODO: Fix so we dont get double outline when there is focus on things in the slot. /\n :host(:focus-within) {\n border-color: var(\n --uui-input-border-color-focus,\n var(--uui-color-border-emphasis)\n );\n outline: 2px solid var(--uui-color-focus);\n }\n :host(:focus) {\n border-color: var(\n --uui-input-border-color-focus,\n var(--uui-color-border-emphasis)\n );\n }\n :host([disabled]) {\n background-color: var(\n --uui-input-background-color-disabled,\n var(--uui-color-disabled)\n );\n border-color: var(\n --uui-input-border-color-disabled,\n var(--uui-color-disabled)\n );\n\n color: var(--uui-color-disabled-contrast);\n }\n :host([disabled]) input {\n -webkit-text-fill-color: var(\n --uui-color-disabled-contrast\n ); / required on Safari and IOS /\n }\n :host([readonly]) {\n background-color: var(\n --uui-input-background-color-readonly,\n var(--uui-color-disabled)\n );\n border-color: var(\n --uui-input-border-color-readonly,\n var(--uui-color-disabled-standalone)\n );\n }\n\n :host(:not([pristine]):invalid),\n / polyfill support /\n :host(:not([pristine])[internals-invalid]) {\n border-color: var(--uui-color-invalid);\n }\n\n input {\n font-family: inherit;\n padding: var(--uui-input-padding);\n font-size: inherit;\n color: inherit;\n border-radius: var(--uui-border-radius);\n box-sizing: border-box;\n border: none;\n background: none;\n min-width: 0;\n flex-grow: 1;\n flex-shrink: 1;\n height: inherit;\n text-align: inherit;\n outline: none;\n text-overflow: ellipsis;\n }\n\n input[type='password']::-ms-reveal {\n display: none;\n }\n\n / TODO: make sure color looks good, or remove it as an option as we want to provide color-picker component */\n input[type='color'] {\n width: 30px;\n padding: 0;\n border: none;\n }\n\n slot[name='prepend'],\n slot[name='append'] {\n display: flex;\n align-items: center;\n line-height: 1;\n height: 100%;\n min-width: 0;\n }\n\n ::slotted(uui-input),\n ::slotted(uui-input-lock) {\n height: 100%;\n --uui-input-border-width: 0;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"input.element.js","sources":["../../../src/components/input/input.element.ts"],"sourcesContent":["import {\n UUIFormControlWithBasicsMixin,\n LabelMixin,\n} from '../../internal/mixins/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { UUIInputEvent } from './UUIInputEvent.js';\n\nexport type InputType =\n \| 'text'\n \| 'tel'\n \| 'url'\n \| 'email'\n \| 'password'\n \| 'search'\n \| 'month'\n \| 'week'\n \| 'time'\n \| 'date'\n \| 'datetime-local'\n \| 'number'\n \| 'color';\n\nexport type InputMode =\n \| 'text'\n \| 'none'\n \| 'decimal'\n \| 'numeric'\n \| 'tel'\n \| 'search'\n \| 'email'\n \| 'url';\n\n/*\n Custom element wrapping the native input element.This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.\n * @element uui-input\n * @slot prepend - for components to render to the left of the input.\n * @slot append - for components to render to the right of the input.\n * @property {boolean} spellcheck - get/set native spellcheck attribute\n * @attribute spellcheck - native spellcheck attribute\n * @property {string} value - get/set the value of the input\n * @attribute value - get/set the value of the input\n * @property {string} name - get/set the name of the input\n * @attribute name - get/set the name of the input\n * @fires UUIInputEvent#change on change\n * @fires InputEvent#input on input\n * @fires KeyboardEvent#keyup on keyup\n * @cssprop --uui-input-height - Height of the element\n * @cssprop --uui-input-background-color - Background color of the element\n * @cssprop --uui-input-background-color-disabled - Background color when disabled\n * @cssprop --uui-input-background-color-readonly - Background color when readonly\n * @cssprop --uui-input-border-width - Border width\n * @cssprop --uui-input-border-radius - Border radius\n * @cssprop --uui-input-border-color - Border color\n * @cssprop --uui-input-border-color-hover - Border color on hover\n * @cssprop --uui-input-border-color-focus - Border color on focus\n * @cssprop --uui-input-border-color-disabled - Border color when disabled\n * @cssprop --uui-input-border-color-readonly - Border color when readonly\n /\nexport class UUIInputElement extends UUIFormControlWithBasicsMixin(\n LabelMixin('', LitElement),\n '',\n) {\n /\n This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n * @type {boolean}\n /\n static readonly formAssociated = true;\n\n /\n Sets the min value of the input.\n * Examples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.\n * @type {number \| string}\n * @attr\n * @default undefined\n /\n @property()\n min?: number \| string;\n\n /\n Sets the minimum length of the value of the input.\n * @type {number}\n * @attr\n * @default undefined\n /\n @property({ type: Number })\n minlength?: number;\n\n /\n Minlength validation message.\n * @attr minlength-message\n * @default\n /\n @property({ attribute: 'minlength-message' })\n minlengthMessage: string \| ((charsLeft: number) => string) = charsLeft =>\n `${charsLeft} characters left`;\n\n /\n Sets the max value of the input.\n * Examples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.\n * @type {number \| string}\n * @attr\n * @default undefined\n /\n @property()\n max?: number \| string;\n\n /\n Sets the maximum length of the value of the input.\n * @type {number}\n * @attr\n * @default undefined\n /\n @property({ type: Number })\n maxlength?: number;\n\n /\n Maxlength validation message.\n * @attr maxlength-message\n * @default\n /\n @property({ attribute: 'maxlength-message' })\n maxlengthMessage: string \| ((max: number, current: number) => string) = (\n max,\n current,\n ) => `Maximum ${max} characters, ${current - max} too many.`;\n\n /\n Specifies the interval between legal numbers of the input\n * @type {number}\n * @attr\n * @default undefined\n /\n @property({ type: Number })\n step?: number;\n\n /\n Disables the input.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /\n Defines the input placeholder.\n * @type {string}\n * @attr\n * @default ''\n /\n @property()\n placeholder = '';\n\n /\n Defines the input autocomplete.\n * @type {string}\n * @attr\n * @default undefined\n /\n @property()\n autocomplete?: string;\n\n /\n Sets the input width to fit the value or placeholder if empty\n * @type {boolean}\n * @attr auto-width\n /\n @property({ type: Boolean, reflect: true, attribute: 'auto-width' })\n autoWidth = false;\n\n /\n This property specifies the type of input that will be rendered.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\|MDN} for further information\n * @type {'text' \| 'tel' \| 'url' \| 'email' \| 'password' \| 'date' \| 'month' \| 'week' \| 'time' \| 'datetime-local' \| 'number' \| 'color'}\n * @attr\n * @default text\n /\n @property({ type: String })\n get type(): InputType {\n return this._type;\n }\n set type(value: InputType) {\n this._type = value;\n }\n\n /\n The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\|MDN} for further information\n * @type {'text' \| 'none' \| 'decimal' \| 'number' \| 'tel' \| 'search' \| 'email' \| 'url'}\n * @attr\n * @default text\n /\n @property({ attribute: 'inputmode' })\n inputMode: InputMode = 'text';\n\n /\n Validates the input based on the Regex pattern\n * @type {string}\n * @attr\n /\n @property({ type: String })\n pattern?: string;\n\n /\n Set the input tabindex, set this to `-1` to avoid tabbing into the input.\n * @type {number}\n * @attr\n /\n @property({ type: Number, reflect: false, attribute: 'tabindex' })\n tabIndex: number = 0;\n\n @query('#input')\n readonly _input!: HTMLInputElement;\n\n private _type: InputType = 'text';\n\n constructor() {\n super();\n\n this.addEventListener('keydown', this.#onKeyDown);\n\n this.addValidator(\n 'tooShort',\n () => {\n const label = this.minlengthMessage;\n if (typeof label === 'function') {\n return label(\n this.minlength ? this.minlength - String(this.value).length : 0,\n );\n }\n return label;\n },\n () => !!this.minlength && String(this.value).length < this.minlength,\n );\n this.addValidator(\n 'tooLong',\n () => {\n const label = this.maxlengthMessage;\n if (typeof label === 'function') {\n return label(this.maxlength ?? 0, String(this.value).length);\n }\n return label;\n },\n () => !!this.maxlength && String(this.value).length > this.maxlength,\n );\n\n this.updateComplete.then(() => {\n this.addFormControlElement(this._input);\n });\n }\n\n #onKeyDown(e: KeyboardEvent): void {\n if (this.type !== 'color' && e.key == 'Enter') {\n this.submit();\n }\n }\n\n /\n Removes focus from the input.\n /\n async blur() {\n await this.updateComplete;\n this._input.blur();\n }\n\n /\n This method enables <label for=\"...\"> to focus the input\n /\n async focus() {\n await this.updateComplete;\n this._input.focus();\n }\n\n /\n Selects all the text in the input.\n /\n async select() {\n await this.updateComplete;\n this._input.select();\n }\n\n protected getFormElement(): HTMLElement {\n return this.shadowRoot?.querySelector('input') as HTMLElement;\n }\n\n protected onInput(e: Event) {\n e.stopPropagation();\n this.value = (e.target as HTMLInputElement).value;\n\n this.dispatchEvent(new UUIInputEvent(UUIInputEvent.INPUT));\n }\n\n protected onChange(e: Event) {\n e.stopPropagation();\n this.pristine = false;\n\n this.dispatchEvent(new UUIInputEvent(UUIInputEvent.CHANGE));\n }\n\n protected renderPrepend() {\n return html`<slot name=\"prepend\"></slot>`;\n }\n\n protected renderAppend() {\n return html`<slot name=\"append\"></slot>`;\n }\n\n render() {\n return html`\n ${this.renderPrepend()}\n <div id=\"inner\">\n <slot></slot>\n ${this.autoWidth ? this.renderInputWithAutoWidth() : this.renderInput()}\n </div>\n ${this.renderAppend()}\n `;\n }\n\n private renderInputWithAutoWidth() {\n return html`<div id=\"autoWidth\">\n ${this.renderInput()}${this.renderAutoWidthBackground()}\n </div>`;\n }\n\n renderInput() {\n return html`<input\n id=\"input\"\n size=${ifDefined(this.autoWidth ? '1' : undefined)}\n .type=${this.type}\n .value=${this.value as string}\n .name=${this.name}\n pattern=${ifDefined(this.pattern)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n step=${ifDefined(this.step)}\n spellcheck=${this.spellcheck}\n autocomplete=${ifDefined(this.autocomplete as any)}\n placeholder=${ifDefined(this.placeholder)}\n aria-label=${ifDefined(\n this.getAttribute('aria-label') \|\| this.label \|\| undefined,\n )}\n aria-labelledby=${ifDefined(\n this.getAttribute('aria-labelledby') \|\| undefined,\n )}\n inputmode=${ifDefined(this.inputMode)}\n ?disabled=${this.disabled}\n ?autofocus=${this.autofocus}\n ?required=${this.required}\n ?readonly=${this.readonly}\n tabindex=${ifDefined(this.tabIndex)}\n @input=${this.onInput}\n @change=${this.onChange} />`;\n }\n\n private renderAutoWidthBackground() {\n return html` <div id=\"auto\" aria-hidden=\"true\">${this.renderText()}</div>`;\n }\n\n private renderText() {\n return html`${(this.value as string).length > 0\n ? this.value\n : this.placeholder}`;\n }\n\n static override readonly styles = [\n css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: stretch;\n height: var(--uui-input-height, var(--uui-size-11));\n text-align: left;\n color: var(--uui-color-text);\n color-scheme: var(--uui-color-scheme, normal);\n box-sizing: border-box;\n background-color: var(\n --uui-input-background-color,\n var(--uui-color-surface)\n );\n border: var(--uui-input-border-width, 1px) solid\n var(--uui-input-border-color, var(--uui-color-border));\n border-radius: var(--uui-input-border-radius, var(--uui-border-radius));\n min-width: 0;\n\n --uui-input-padding: 1px var(--uui-size-space-3) 3px\n var(--uui-size-space-3);\n --uui-button-height: 100%;\n --uui-button-border-radius: var(\n --uui-input-border-radius,\n var(--uui-border-radius)\n );\n --auto-width-text-margin-right: 0;\n --auto-width-text-margin-left: 0;\n }\n\n #autoWidth {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: center;\n flex-grow: 1;\n flex-shrink: 1;\n min-width: 0;\n }\n\n #auto {\n border: 0 1px solid transparent;\n visibility: hidden;\n white-space: pre;\n z-index: -1;\n height: 0px;\n padding: 0 var(--uui-size-space-3);\n margin: 0 var(--auto-width-text-margin-right) 0\n var(--auto-width-text-margin-left);\n }\n\n :host(:hover) {\n border-color: var(\n --uui-input-border-color-hover,\n var(--uui-color-border-standalone)\n );\n }\n / TODO: Fix so we dont get double outline when there is focus on things in the slot. /\n :host(:focus-within) {\n border-color: var(\n --uui-input-border-color-focus,\n var(--uui-color-border-emphasis)\n );\n outline: 2px solid var(--uui-color-focus);\n }\n :host(:focus) {\n border-color: var(\n --uui-input-border-color-focus,\n var(--uui-color-border-emphasis)\n );\n }\n :host([disabled]) {\n background-color: var(\n --uui-input-background-color-disabled,\n var(--uui-color-disabled)\n );\n border-color: var(\n --uui-input-border-color-disabled,\n var(--uui-color-disabled)\n );\n\n color: var(--uui-color-disabled-contrast);\n }\n :host([disabled]) input {\n -webkit-text-fill-color: var(\n --uui-color-disabled-contrast\n ); / required on Safari and IOS /\n }\n :host([readonly]) {\n background-color: var(\n --uui-input-background-color-readonly,\n var(--uui-color-disabled)\n );\n border-color: var(\n --uui-input-border-color-readonly,\n var(--uui-color-disabled-standalone)\n );\n }\n\n :host(:not([pristine]):invalid),\n / polyfill support /\n :host(:not([pristine])[internals-invalid]) {\n border-color: var(--uui-color-invalid);\n }\n\n input {\n font-family: inherit;\n padding: var(--uui-input-padding);\n font-size: inherit;\n color: inherit;\n border-radius: var(--uui-border-radius);\n box-sizing: border-box;\n border: none;\n background: none;\n min-width: 0;\n flex-grow: 1;\n flex-shrink: 1;\n height: inherit;\n text-align: inherit;\n outline: none;\n text-overflow: ellipsis;\n line-height: 1;\n flex: 1 1 auto;\n min-width: 60px;\n }\n\n input[type='password']::-ms-reveal {\n display: none;\n }\n\n / TODO: make sure color looks good, or remove it as an option as we want to provide color-picker component */\n input[type='color'] {\n width: 30px;\n padding: 0;\n border: none;\n }\n\n slot[name='prepend'],\n slot[name='append'] {\n display: flex;\n align-items: center;\n line-height: 1;\n height: 100%;\n min-width: 0;\n }\n\n uui-input,\n uui-input-lock,\n ::slotted(uui-input),\n ::slotted(uui-input-lock) {\n height: 100%;\n --uui-input-border-width: 0;\n }\n\n uui-button,\n ::slotted(uui-button) {\n height: 100%;\n --uui-button-border-width: 0;\n }\n\n #inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n flex: 1 1 auto;\n min-width: 0;\n padding: 2px;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/input-file/input-file.element.js CHANGED Viewed

@@ -1,5 +1,38 @@
 import { query, property, state } from "lit/decorators.js";
 import { LitElement, html, nothing, css } from "lit";
+import "../icon-registry-essential/svgs/iconAdd.js";
+import "../icon-registry-essential/svgs/iconAlert.js";
+import "../icon-registry-essential/svgs/iconAttachment.js";
+import "../icon-registry-essential/svgs/iconCalendar.js";
+import "../icon-registry-essential/svgs/iconCheck.js";
+import "../icon-registry-essential/svgs/iconClipboard.js";
+import "../icon-registry-essential/svgs/iconCode.js";
+import "../icon-registry-essential/svgs/iconColorPicker.js";
+import "../icon-registry-essential/svgs/iconCopy.js";
+import { iconDelete } from "../icon-registry-essential/svgs/iconDelete.js";
+import "../icon-registry-essential/svgs/iconDocument.js";
+import "../icon-registry-essential/svgs/iconDownload.js";
+import "../icon-registry-essential/svgs/iconDrag.js";
+import "../icon-registry-essential/svgs/iconEdit.js";
+import "../icon-registry-essential/svgs/iconFavorite.js";
+import "../icon-registry-essential/svgs/iconFolder.js";
+import "../icon-registry-essential/svgs/iconForbidden.js";
+import "../icon-registry-essential/svgs/iconInfo.js";
+import "../icon-registry-essential/svgs/iconLink.js";
+import "../icon-registry-essential/svgs/iconLock.js";
+import "../icon-registry-essential/svgs/iconPause.js";
+import "../icon-registry-essential/svgs/iconPicture.js";
+import "../icon-registry-essential/svgs/iconPlay.js";
+import "../icon-registry-essential/svgs/iconRemove.js";
+import "../icon-registry-essential/svgs/iconSearch.js";
+import "../icon-registry-essential/svgs/iconSee.js";
+import "../icon-registry-essential/svgs/iconSettings.js";
+import "../icon-registry-essential/svgs/iconSubtract.js";
+import "../icon-registry-essential/svgs/iconSync.js";
+import "../icon-registry-essential/svgs/iconUnlock.js";
+import "../icon-registry-essential/svgs/iconUnsee.js";
+import "../icon-registry-essential/svgs/iconWand.js";
+import "../icon-registry-essential/svgs/iconWrong.js";
 import { repeat } from "lit/directives/repeat.js";
 import "../file-preview/file-preview.js";
 import "../action-bar/action-bar.js";
@@ -7,7 +40,6 @@ import "../button/button.js";
 import "../icon/icon.js";
 import "../file-dropzone/file-dropzone.js";
 import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
-import { iconDelete } from "../icon-registry-essential/svgs/iconDelete.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/components/input-file/input-file.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-file.element.js","sources":["../../../src/components/input-file/input-file.element.ts"],"sourcesContent":["import { property, query, state } from 'lit/decorators.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport type { UUIFileDropzoneElement } from '../file-dropzone/file-dropzone.js';\nimport { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport { iconDelete } from '../icon-registry-essential/svgs/index.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport '../file-preview/file-preview.js';\nimport '../action-bar/action-bar.js';\nimport '../button/button.js';\nimport '../icon/icon.js';\nimport '../file-dropzone/file-dropzone.js';\n\n// TODO: Missing change event, when files are changed.\n/*\n @element uui-input-file\n * @description - A form associated file input that supports multiple files.\n * @extends UUIFormControlMixin\n /\nexport class UUIInputFileElement extends UUIFormControlWithBasicsMixin(\n LitElement,\n) {\n @query('#dropzone')\n private readonly _dropzone!: UUIFileDropzoneElement;\n\n @query('#dropzone')\n private readonly _dropZone: UUIFileDropzoneElement \| undefined;\n\n /\n Accepted filetypes. Will allow all types if empty.\n * @type {string}\n * @attr\n * @default false\n /\n @property({ type: String })\n public accept: string = '';\n\n /\n Allows for multiple files to be selected.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean })\n public multiple: boolean = false;\n\n get value() {\n return super.value;\n }\n set value(newValue) {\n super.value = newValue;\n\n if (newValue instanceof FormData) {\n const data = (\n this.multiple ? newValue.getAll(this.name) : [newValue.get(this.name)]\n ) as Array<File>;\n this._updateFileWrappers(data);\n return;\n }\n\n if (newValue instanceof File) {\n this._updateFileWrappers([newValue]);\n }\n }\n\n @state()\n private _files: File[] = [];\n\n constructor() {\n super();\n this.addEventListener('dragenter', () => this._setShowDropzone(true));\n this.addEventListener('dragleave', () => this._setShowDropzone(false));\n this.addEventListener('drop', () => this._setShowDropzone(false));\n }\n\n protected getFormElement(): HTMLElement {\n return this._dropZone! as HTMLElement;\n }\n\n /\n Removes focus from the input.\n /\n async blur() {\n await this.updateComplete;\n this._dropzone.blur();\n }\n\n /\n This method enables <label for=\"...\"> to focus the input\n */\n async focus() {\n await this.updateComplete;\n this._dropzone.focus();\n }\n\n async click() {\n await this.updateComplete;\n this._dropzone.browse();\n }\n\n private _handleClick(e: Event) {\n e.stopImmediatePropagation();\n this._dropzone.browse();\n }\n\n private readonly _updateFileWrappers = (data: Array<File>) => {\n let newFileWrappers: Array<File> = [];\n\n for (const file of data) {\n if (this.multiple) {\n newFileWrappers.push(file);\n } else {\n newFileWrappers = [file];\n }\n }\n\n this._files = newFileWrappers;\n };\n\n private async _handleFilesChange(event: CustomEvent) {\n const entries = event.detail.files as (File \| FileSystemFileEntry)[];\n const files = entries.filter(\n entry => entry instanceof File \|\| entry.isFile,\n );\n // TODO: implement folder preview + remove folder including children\n\n if (!this.multiple) {\n const entry = files[0];\n const isFile = entry instanceof File;\n const file = isFile ? entry : await this._getFile(entry);\n\n if (this.value instanceof File) {\n this.value = file;\n return;\n }\n\n if (this.value instanceof FormData) {\n this.value.delete(this.name);\n this.value.append(this.name, file);\n this._updateFileWrappers([file]);\n return;\n }\n }\n\n let newValue = this.value;\n\n if (files.length > 0 && !(this.value instanceof FormData)) {\n newValue = new FormData();\n }\n\n if (newValue instanceof FormData) {\n for (const entry of files) {\n const isFile = entry instanceof File;\n newValue.append(this.name, isFile ? entry : await this._getFile(entry));\n }\n }\n\n this.value = newValue;\n }\n\n private async _getFile(fileEntry: FileSystemFileEntry): Promise<File> {\n return await new Promise<File>((resolve, reject) =>\n fileEntry.file(resolve, reject),\n );\n }\n\n private _removeFile(index: number) {\n const fileToRemove = this._files[index];\n\n if (this.value instanceof FormData) {\n const files = this.value.getAll(this.name) as Array<File>;\n const filteredFiles = files.filter(file => file !== fileToRemove);\n\n if (filteredFiles.length === 0) {\n this.value = '';\n } else {\n this.value.delete(this.name);\n\n for (const file of filteredFiles) {\n this.value.append(this.name, file);\n }\n }\n\n this._updateFileWrappers(filteredFiles);\n }\n\n if (this.value instanceof File) {\n this.value = '';\n this._updateFileWrappers([]);\n }\n }\n\n private _setShowDropzone(show: boolean) {\n if (show) {\n this._dropZone!.style.display = 'flex';\n } else {\n this._dropZone!.style.display = 'none';\n }\n }\n\n private _renderFileItem(file: File, index: number) {\n return html`<uui-file-preview .file=\"${file}\">\n <uui-action-bar slot=\"actions\">\n <uui-button\n @click=${() => this._removeFile(index)}\n color=\"danger\"\n label=${`Delete ${file.name}`}>\n <uui-icon name=\"delete\" .fallback=${iconDelete.strings[0]}></uui-icon>\n </uui-button>\n </uui-action-bar>\n </uui-file-preview>`;\n }\n\n private _renderFiles() {\n return html`${repeat(\n this._files,\n (file: File) => file.name + file.size,\n (file: File, index: number) => this._renderFileItem(file, index),\n )}`;\n }\n\n render() {\n return html`\n <uui-file-dropzone\n id=\"dropzone\"\n ?multiple=${this.multiple}\n .accept=${this.accept}\n @change=${this._handleFilesChange}\n label=\"Drop files here\"></uui-file-dropzone>\n <div id=\"files\">\n ${this._renderFiles()}\n ${this._files.length === 0 \|\| this.multiple\n ? html`<uui-button\n @click=${this._handleClick}\n id=\"add-button\"\n look=\"placeholder\"\n label=\"Add\"></uui-button>`\n : nothing}\n </div>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n box-sizing: border-box;\n border: 1px solid var(--uui-color-border);\n }\n\n #input {\n position: absolute;\n width: 0px;\n height: 0px;\n opacity: 0;\n display: none;\n }\n\n #files {\n display: grid;\n box-sizing: border-box;\n justify-items: center;\n width: 100%;\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n grid-auto-rows: min-content;\n gap: 16px;\n padding: 16px;\n overflow: auto;\n max-height: 100%;\n }\n\n #dropzone {\n display: none;\n position: absolute;\n inset: 0px;\n z-index: 10;\n justify-content: center;\n align-items: center;\n }\n\n #add-button {\n width: 150px;\n height: 150px;\n display: flex;\n padding: 16px;\n box-sizing: border-box;\n justify-content: center;\n align-items: stretch;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"input-file.element.js","sources":["../../../src/components/input-file/input-file.element.ts"],"sourcesContent":["import { property, query, state } from 'lit/decorators.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport type { UUIFileDropzoneElement } from '../file-dropzone/file-dropzone.js';\nimport { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport { iconDelete } from '../icon-registry-essential/svgs/index.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport '../file-preview/file-preview.js';\nimport '../action-bar/action-bar.js';\nimport '../button/button.js';\nimport '../icon/icon.js';\nimport '../file-dropzone/file-dropzone.js';\n\n// TODO: Missing change event, when files are changed.\n/*\n @element uui-input-file\n * @description - A form associated file input that supports multiple files.\n * @extends UUIFormControlMixin\n /\nexport class UUIInputFileElement extends UUIFormControlWithBasicsMixin(\n LitElement,\n) {\n @query('#dropzone')\n private readonly _dropzone!: UUIFileDropzoneElement;\n\n @query('#dropzone')\n private readonly _dropZone: UUIFileDropzoneElement \| undefined;\n\n /\n Accepted filetypes. Will allow all types if empty.\n * @type {string}\n * @attr\n * @default false\n /\n @property({ type: String })\n public accept: string = '';\n\n /\n Allows for multiple files to be selected.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean })\n public multiple: boolean = false;\n\n get value() {\n return super.value;\n }\n set value(newValue) {\n super.value = newValue;\n\n if (newValue instanceof FormData) {\n const data = (\n this.multiple ? newValue.getAll(this.name) : [newValue.get(this.name)]\n ) as Array<File>;\n this._updateFileWrappers(data);\n return;\n }\n\n if (newValue instanceof File) {\n this._updateFileWrappers([newValue]);\n }\n }\n\n @state()\n private _files: File[] = [];\n\n constructor() {\n super();\n this.addEventListener('dragenter', () => this._setShowDropzone(true));\n this.addEventListener('dragleave', () => this._setShowDropzone(false));\n this.addEventListener('drop', () => this._setShowDropzone(false));\n }\n\n protected getFormElement(): HTMLElement {\n return this._dropZone! as HTMLElement;\n }\n\n /\n Removes focus from the input.\n /\n async blur() {\n await this.updateComplete;\n this._dropzone.blur();\n }\n\n /\n This method enables <label for=\"...\"> to focus the input\n */\n async focus() {\n await this.updateComplete;\n this._dropzone.focus();\n }\n\n async click() {\n await this.updateComplete;\n this._dropzone.browse();\n }\n\n private _handleClick(e: Event) {\n e.stopImmediatePropagation();\n this._dropzone.browse();\n }\n\n private readonly _updateFileWrappers = (data: Array<File>) => {\n let newFileWrappers: Array<File> = [];\n\n for (const file of data) {\n if (this.multiple) {\n newFileWrappers.push(file);\n } else {\n newFileWrappers = [file];\n }\n }\n\n this._files = newFileWrappers;\n };\n\n private async _handleFilesChange(event: CustomEvent) {\n const entries = event.detail.files as (File \| FileSystemFileEntry)[];\n const files = entries.filter(\n entry => entry instanceof File \|\| entry.isFile,\n );\n // TODO: implement folder preview + remove folder including children\n\n if (!this.multiple) {\n const entry = files[0];\n const isFile = entry instanceof File;\n const file = isFile ? entry : await this._getFile(entry);\n\n if (this.value instanceof File) {\n this.value = file;\n return;\n }\n\n if (this.value instanceof FormData) {\n this.value.delete(this.name);\n this.value.append(this.name, file);\n this._updateFileWrappers([file]);\n return;\n }\n }\n\n let newValue = this.value;\n\n if (files.length > 0 && !(this.value instanceof FormData)) {\n newValue = new FormData();\n }\n\n if (newValue instanceof FormData) {\n for (const entry of files) {\n const isFile = entry instanceof File;\n newValue.append(this.name, isFile ? entry : await this._getFile(entry));\n }\n }\n\n this.value = newValue;\n }\n\n private async _getFile(fileEntry: FileSystemFileEntry): Promise<File> {\n return await new Promise<File>((resolve, reject) =>\n fileEntry.file(resolve, reject),\n );\n }\n\n private _removeFile(index: number) {\n const fileToRemove = this._files[index];\n\n if (this.value instanceof FormData) {\n const files = this.value.getAll(this.name) as Array<File>;\n const filteredFiles = files.filter(file => file !== fileToRemove);\n\n if (filteredFiles.length === 0) {\n this.value = '';\n } else {\n this.value.delete(this.name);\n\n for (const file of filteredFiles) {\n this.value.append(this.name, file);\n }\n }\n\n this._updateFileWrappers(filteredFiles);\n }\n\n if (this.value instanceof File) {\n this.value = '';\n this._updateFileWrappers([]);\n }\n }\n\n private _setShowDropzone(show: boolean) {\n if (show) {\n this._dropZone!.style.display = 'flex';\n } else {\n this._dropZone!.style.display = 'none';\n }\n }\n\n private _renderFileItem(file: File, index: number) {\n return html`<uui-file-preview .file=\"${file}\">\n <uui-action-bar slot=\"actions\">\n <uui-button\n @click=${() => this._removeFile(index)}\n color=\"danger\"\n label=${`Delete ${file.name}`}>\n <uui-icon name=\"delete\" .fallback=${iconDelete.strings[0]}></uui-icon>\n </uui-button>\n </uui-action-bar>\n </uui-file-preview>`;\n }\n\n private _renderFiles() {\n return html`${repeat(\n this._files,\n (file: File) => file.name + file.size,\n (file: File, index: number) => this._renderFileItem(file, index),\n )}`;\n }\n\n render() {\n return html`\n <uui-file-dropzone\n id=\"dropzone\"\n ?multiple=${this.multiple}\n .accept=${this.accept}\n @change=${this._handleFilesChange}\n label=\"Drop files here\"></uui-file-dropzone>\n <div id=\"files\">\n ${this._renderFiles()}\n ${this._files.length === 0 \|\| this.multiple\n ? html`<uui-button\n @click=${this._handleClick}\n id=\"add-button\"\n look=\"placeholder\"\n label=\"Add\"></uui-button>`\n : nothing}\n </div>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n box-sizing: border-box;\n border: 1px solid var(--uui-color-border);\n }\n\n #input {\n position: absolute;\n width: 0px;\n height: 0px;\n opacity: 0;\n display: none;\n }\n\n #files {\n display: grid;\n box-sizing: border-box;\n justify-items: center;\n width: 100%;\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n grid-auto-rows: min-content;\n gap: 16px;\n padding: 16px;\n overflow: auto;\n max-height: 100%;\n }\n\n #dropzone {\n display: none;\n position: absolute;\n inset: 0px;\n z-index: 10;\n justify-content: center;\n align-items: center;\n }\n\n #add-button {\n width: 150px;\n height: 150px;\n display: flex;\n padding: 16px;\n box-sizing: border-box;\n justify-content: center;\n align-items: stretch;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/input-lock/input-lock.element.js CHANGED Viewed

@@ -8,13 +8,44 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var _locked;
 import { html, css } from "lit";
 import "../input/input.js";
+import "../icon-registry-essential/svgs/iconAdd.js";
+import "../icon-registry-essential/svgs/iconAlert.js";
+import "../icon-registry-essential/svgs/iconAttachment.js";
+import "../icon-registry-essential/svgs/iconCalendar.js";
+import "../icon-registry-essential/svgs/iconCheck.js";
+import "../icon-registry-essential/svgs/iconClipboard.js";
+import "../icon-registry-essential/svgs/iconCode.js";
+import "../icon-registry-essential/svgs/iconColorPicker.js";
+import "../icon-registry-essential/svgs/iconCopy.js";
+import "../icon-registry-essential/svgs/iconDelete.js";
+import "../icon-registry-essential/svgs/iconDocument.js";
+import "../icon-registry-essential/svgs/iconDownload.js";
+import "../icon-registry-essential/svgs/iconDrag.js";
+import "../icon-registry-essential/svgs/iconEdit.js";
+import "../icon-registry-essential/svgs/iconFavorite.js";
+import "../icon-registry-essential/svgs/iconFolder.js";
+import "../icon-registry-essential/svgs/iconForbidden.js";
+import "../icon-registry-essential/svgs/iconInfo.js";
+import "../icon-registry-essential/svgs/iconLink.js";
+import { iconLock } from "../icon-registry-essential/svgs/iconLock.js";
+import "../icon-registry-essential/svgs/iconPause.js";
+import "../icon-registry-essential/svgs/iconPicture.js";
+import "../icon-registry-essential/svgs/iconPlay.js";
+import "../icon-registry-essential/svgs/iconRemove.js";
+import "../icon-registry-essential/svgs/iconSearch.js";
+import "../icon-registry-essential/svgs/iconSee.js";
+import "../icon-registry-essential/svgs/iconSettings.js";
+import "../icon-registry-essential/svgs/iconSubtract.js";
+import "../icon-registry-essential/svgs/iconSync.js";
+import { iconUnlock } from "../icon-registry-essential/svgs/iconUnlock.js";
+import "../icon-registry-essential/svgs/iconUnsee.js";
+import "../icon-registry-essential/svgs/iconWand.js";
+import "../icon-registry-essential/svgs/iconWrong.js";
 import { property } from "lit/decorators.js";
 import { UUIInputLockEvent } from "./UUIInputLockEvent.js";
 import "../icon/icon.js";
 import "../button/button.js";
 import { UUIInputElement } from "../input/input.element.js";
-import { iconLock } from "../icon-registry-essential/svgs/iconLock.js";
-import { iconUnlock } from "../icon-registry-essential/svgs/iconUnlock.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -72,8 +103,6 @@ _UUIInputLockElement.styles = [
   ...UUIInputElement.styles,
   css`
       #lock {
-        height: 100%;
         --uui-input-padding: 1px var(--uui-size-space-1);
         --uui-button-padding-left-factor: 0.75;
         --uui-button-padding-right-factor: 0.75;

package/dist/components/input-lock/input-lock.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-lock.element.js","sources":["../../../src/components/input-lock/input-lock.element.ts"],"sourcesContent":["import { css, html } from 'lit';\nimport { UUIInputElement } from '../input/input.js';\nimport { iconLock, iconUnlock } from '../icon-registry-essential/svgs/index.js';\nimport { property } from 'lit/decorators.js';\nimport { UUIInputLockEvent } from './UUIInputLockEvent.js';\n\nimport '../icon/icon.js';\nimport '../button/button.js';\n\n/*\n @element uui-input-lock\n * @extends uui-input\n /\nexport class UUIInputLockElement extends UUIInputElement {\n /\n Determine the inputs locked state.\n * @type {boolean}\n * @attr\n * @default true\n /\n @property({ type: Boolean, reflect: true })\n public set locked(lock: boolean) {\n this.#locked = lock;\n this.readonly = lock;\n this.tabIndex = lock ? -1 : 0;\n }\n public get locked(): boolean {\n return this.#locked;\n }\n #locked: boolean = true;\n\n /\n Define the label for the unlock button.\n * @type {string}\n * @attr\n * @default true\n /\n @property({ type: String, reflect: false, attribute: 'unlock-label' })\n public unlockLabel: string = 'Unlock input';\n\n /\n Define the label for the lock button.\n * @type {string}\n * @attr\n * @default true\n */\n @property({ type: String, reflect: false, attribute: 'lock-label' })\n public lockLabel: string = 'Lock input';\n\n constructor() {\n super();\n this.readonly = true;\n this.tabIndex = -1;\n }\n\n _onLockToggle() {\n this.locked = !this.locked;\n this.pristine = false;\n this.dispatchEvent(new UUIInputLockEvent(UUIInputLockEvent.LOCK_CHANGE));\n if (!this.locked) {\n this._input?.focus();\n }\n }\n\n renderIcon() {\n return this.locked === true\n ? html`<uui-icon name=\"lock\" .fallback=${iconLock.strings[0]}></uui-icon>`\n : html`<uui-icon\n name=\"unlock\"\n .fallback=${iconUnlock.strings[0]}></uui-icon>`;\n }\n\n renderPrepend() {\n return html`<uui-button\n .disabled=${this.disabled}\n @click=${this._onLockToggle}\n compact\n id=\"lock\"\n label=\"${this.locked ? this.unlockLabel : this.lockLabel}\">\n ${this.renderIcon()}\n </uui-button>`;\n }\n\n static override readonly styles = [\n ...UUIInputElement.styles,\n css`\n #lock {\n ~~height: 100%;\n\n~~ --uui-input-padding: 1px var(--uui-size-space-1);\n --uui-button-padding-left-factor: 0.75;\n --uui-button-padding-right-factor: 0.75;\n font-size: 12px;\n }\n\n :host([locked]) #input {\n cursor: not-allowed;\n opacity: 0.55;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAaO,MAAM,uBAAN,MAAM,6BAA4B,gBAAgB;AAAA,EAoCvD,cAAc;AACZ,UAAA;AArBF;AAAA,uBAAA,SAAmB;AASnB,SAAO,cAAsB;AAS7B,SAAO,YAAoB;AAIzB,SAAK,WAAW;AAChB,SAAK,WAAW;AAAA,EAClB;AAAA,EAhCA,IAAW,OAAO,MAAe;AAC/B,uBAAK,SAAU;AACf,SAAK,WAAW;AAChB,SAAK,WAAW,OAAO,KAAK;AAAA,EAC9B;AAAA,EACA,IAAW,SAAkB;AAC3B,WAAO,mBAAK;AAAA,EACd;AAAA,EA2BA,gBAAgB;AACd,SAAK,SAAS,CAAC,KAAK;AACpB,SAAK,WAAW;AAChB,SAAK,cAAc,IAAI,kBAAkB,kBAAkB,WAAW,CAAC;AACvE,QAAI,CAAC,KAAK,QAAQ;AAChB,WAAK,QAAQ,MAAA;AAAA,IACf;AAAA,EACF;AAAA,EAEA,aAAa;AACX,WAAO,KAAK,WAAW,OACnB,uCAAuC,SAAS,QAAQ,CAAC,CAAC,iBAC1D;AAAA;AAAA,sBAEc,WAAW,QAAQ,CAAC,CAAC;AAAA,EACzC;AAAA,EAEA,gBAAgB;AACd,WAAO;AAAA,kBACO,KAAK,QAAQ;AAAA,eAChB,KAAK,aAAa;AAAA;AAAA;AAAA,eAGlB,KAAK,SAAS,KAAK,cAAc,KAAK,SAAS;AAAA,QACtD,KAAK,YAAY;AAAA;AAAA,EAEvB;~~AAoBF~~;~~AAxEE~~;AAsDA,qBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAAA;AAAA;~~AAxEG,IAAM,sBAAN;AAQM,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAP/B,oBAQA,WAAA,UAAA,CAAA;AAiBJ,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,OAAO,WAAW,gBAAgB;AAAA,GAxB1D,oBAyBJ,WAAA,eAAA,CAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,OAAO,WAAW,cAAc;AAAA,GAjCxD,oBAkCJ,WAAA,aAAA,CAAA;"}
1	+ {"version":3,"file":"input-lock.element.js","sources":["../../../src/components/input-lock/input-lock.element.ts"],"sourcesContent":["import { css, html } from 'lit';\nimport { UUIInputElement } from '../input/input.js';\nimport { iconLock, iconUnlock } from '../icon-registry-essential/svgs/index.js';\nimport { property } from 'lit/decorators.js';\nimport { UUIInputLockEvent } from './UUIInputLockEvent.js';\n\nimport '../icon/icon.js';\nimport '../button/button.js';\n\n/*\n @element uui-input-lock\n * @extends uui-input\n /\nexport class UUIInputLockElement extends UUIInputElement {\n /\n Determine the inputs locked state.\n * @type {boolean}\n * @attr\n * @default true\n /\n @property({ type: Boolean, reflect: true })\n public set locked(lock: boolean) {\n this.#locked = lock;\n this.readonly = lock;\n this.tabIndex = lock ? -1 : 0;\n }\n public get locked(): boolean {\n return this.#locked;\n }\n #locked: boolean = true;\n\n /\n Define the label for the unlock button.\n * @type {string}\n * @attr\n * @default true\n /\n @property({ type: String, reflect: false, attribute: 'unlock-label' })\n public unlockLabel: string = 'Unlock input';\n\n /\n Define the label for the lock button.\n * @type {string}\n * @attr\n * @default true\n */\n @property({ type: String, reflect: false, attribute: 'lock-label' })\n public lockLabel: string = 'Lock input';\n\n constructor() {\n super();\n this.readonly = true;\n this.tabIndex = -1;\n }\n\n _onLockToggle() {\n this.locked = !this.locked;\n this.pristine = false;\n this.dispatchEvent(new UUIInputLockEvent(UUIInputLockEvent.LOCK_CHANGE));\n if (!this.locked) {\n this._input?.focus();\n }\n }\n\n renderIcon() {\n return this.locked === true\n ? html`<uui-icon name=\"lock\" .fallback=${iconLock.strings[0]}></uui-icon>`\n : html`<uui-icon\n name=\"unlock\"\n .fallback=${iconUnlock.strings[0]}></uui-icon>`;\n }\n\n renderPrepend() {\n return html`<uui-button\n .disabled=${this.disabled}\n @click=${this._onLockToggle}\n compact\n id=\"lock\"\n label=\"${this.locked ? this.unlockLabel : this.lockLabel}\">\n ${this.renderIcon()}\n </uui-button>`;\n }\n\n static override readonly styles = [\n ...UUIInputElement.styles,\n css`\n #lock {\n --uui-input-padding: 1px var(--uui-size-space-1);\n --uui-button-padding-left-factor: 0.75;\n --uui-button-padding-right-factor: 0.75;\n font-size: 12px;\n }\n\n :host([locked]) #input {\n cursor: not-allowed;\n opacity: 0.55;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,uBAAN,MAAM,6BAA4B,gBAAgB;AAAA,EAoCvD,cAAc;AACZ,UAAA;AArBF;AAAA,uBAAA,SAAmB;AASnB,SAAO,cAAsB;AAS7B,SAAO,YAAoB;AAIzB,SAAK,WAAW;AAChB,SAAK,WAAW;AAAA,EAClB;AAAA,EAhCA,IAAW,OAAO,MAAe;AAC/B,uBAAK,SAAU;AACf,SAAK,WAAW;AAChB,SAAK,WAAW,OAAO,KAAK;AAAA,EAC9B;AAAA,EACA,IAAW,SAAkB;AAC3B,WAAO,mBAAK;AAAA,EACd;AAAA,EA2BA,gBAAgB;AACd,SAAK,SAAS,CAAC,KAAK;AACpB,SAAK,WAAW;AAChB,SAAK,cAAc,IAAI,kBAAkB,kBAAkB,WAAW,CAAC;AACvE,QAAI,CAAC,KAAK,QAAQ;AAChB,WAAK,QAAQ,MAAA;AAAA,IACf;AAAA,EACF;AAAA,EAEA,aAAa;AACX,WAAO,KAAK,WAAW,OACnB,uCAAuC,SAAS,QAAQ,CAAC,CAAC,iBAC1D;AAAA;AAAA,sBAEc,WAAW,QAAQ,CAAC,CAAC;AAAA,EACzC;AAAA,EAEA,gBAAgB;AACd,WAAO;AAAA,kBACO,KAAK,QAAQ;AAAA,eAChB,KAAK,aAAa;AAAA;AAAA;AAAA,eAGlB,KAAK,SAAS,KAAK,cAAc,KAAK,SAAS;AAAA,QACtD,KAAK,YAAY;AAAA;AAAA,EAEvB;AAkBF;AAtEE;AAsDA,qBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAxEG,IAAM,sBAAN;AAQM,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAP/B,oBAQA,WAAA,UAAA,CAAA;AAiBJ,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,OAAO,WAAW,gBAAgB;AAAA,GAxB1D,oBAyBJ,WAAA,eAAA,CAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,OAAO,WAAW,cAAc;AAAA,GAjCxD,oBAkCJ,WAAA,aAAA,CAAA;"}

package/dist/components/input-password/input-password.element.js CHANGED Viewed

@@ -1,11 +1,42 @@
+import "../icon-registry-essential/svgs/iconAdd.js";
+import "../icon-registry-essential/svgs/iconAlert.js";
+import "../icon-registry-essential/svgs/iconAttachment.js";
+import "../icon-registry-essential/svgs/iconCalendar.js";
+import "../icon-registry-essential/svgs/iconCheck.js";
+import "../icon-registry-essential/svgs/iconClipboard.js";
+import "../icon-registry-essential/svgs/iconCode.js";
+import "../icon-registry-essential/svgs/iconColorPicker.js";
+import "../icon-registry-essential/svgs/iconCopy.js";
+import "../icon-registry-essential/svgs/iconDelete.js";
+import "../icon-registry-essential/svgs/iconDocument.js";
+import "../icon-registry-essential/svgs/iconDownload.js";
+import "../icon-registry-essential/svgs/iconDrag.js";
+import "../icon-registry-essential/svgs/iconEdit.js";
+import "../icon-registry-essential/svgs/iconFavorite.js";
+import "../icon-registry-essential/svgs/iconFolder.js";
+import "../icon-registry-essential/svgs/iconForbidden.js";
+import "../icon-registry-essential/svgs/iconInfo.js";
+import "../icon-registry-essential/svgs/iconLink.js";
+import "../icon-registry-essential/svgs/iconLock.js";
+import "../icon-registry-essential/svgs/iconPause.js";
+import "../icon-registry-essential/svgs/iconPicture.js";
+import "../icon-registry-essential/svgs/iconPlay.js";
+import "../icon-registry-essential/svgs/iconRemove.js";
+import "../icon-registry-essential/svgs/iconSearch.js";
+import { iconSee } from "../icon-registry-essential/svgs/iconSee.js";
+import "../icon-registry-essential/svgs/iconSettings.js";
+import "../icon-registry-essential/svgs/iconSubtract.js";
+import "../icon-registry-essential/svgs/iconSync.js";
+import "../icon-registry-essential/svgs/iconUnlock.js";
+import { iconUnsee } from "../icon-registry-essential/svgs/iconUnsee.js";
+import "../icon-registry-essential/svgs/iconWand.js";
+import "../icon-registry-essential/svgs/iconWrong.js";
 import "../input/input.js";
 import { html, css } from "lit";
 import { state, property } from "lit/decorators.js";
 import "../icon/icon.js";
 import "../button/button.js";
 import { UUIInputElement } from "../input/input.element.js";
-import { iconSee } from "../icon-registry-essential/svgs/iconSee.js";
-import { iconUnsee } from "../icon-registry-essential/svgs/iconUnsee.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -60,7 +91,6 @@ _UUIInputPasswordElement.styles = [
   ...UUIInputElement.styles,
   css`
       #eye {
-        height: 100%;
         margin-left: -6px;
       }

package/dist/components/input-password/input-password.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-password.element.js","sources":["../../../src/components/input-password/input-password.element.ts"],"sourcesContent":["import { iconSee, iconUnsee } from '../icon-registry-essential/svgs/index.js';\nimport type { InputType } from '../input/input.js';\nimport { UUIInputElement } from '../input/input.js';\nimport { css, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport '../icon/icon.js';\nimport '../button/button.js';\n\n/*\n @element uui-input-password\n * @extends uui-input\n */\nexport class UUIInputPasswordElement extends UUIInputElement {\n @state()\n private passwordType: InputType = 'password';\n\n // this overrides the inherited type property, and moves the input's type handling to the passwordType state.\n @property()\n get type() {\n return this.passwordType;\n }\n set type(newValue) {\n this.passwordType = newValue;\n }\n\n _onPasswordToggle() {\n if (this.passwordType === 'password') {\n this.passwordType = 'text';\n } else {\n this.passwordType = 'password';\n }\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n if (!this.hasAttribute('spellcheck')) {\n this.spellcheck = false;\n }\n }\n\n renderIcon() {\n return this.passwordType === 'password'\n ? html`<uui-icon name=\"see\" .fallback=${iconSee.strings[0]}></uui-icon>`\n : html`<uui-icon\n name=\"unsee\"\n .fallback=${iconUnsee.strings[0]}></uui-icon>`;\n }\n\n renderAppend() {\n return html`<uui-button\n .disabled=${this.disabled}\n @click=${this._onPasswordToggle}\n compact\n label=\"${this.passwordType === 'password'\n ? 'Show password'\n : 'Hide password'}\"\n id=\"eye\">\n ${this.renderIcon()}\n </uui-button>`;\n }\n\n static override readonly styles = [\n ...UUIInputElement.styles,\n css`\n #eye {\n ~~height: 100%;\n~~ margin-left: -6px;\n }\n\n #clear:hover {\n color: black;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;~~AAaO,MAAM,2BAAN,MAAM,iCAAgC,gBAAgB;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA;AAEL,SAAQ,eAA0B;AAAA,EAAA;AAAA,EAIlC,IAAI,OAAO;AACT,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,KAAK,UAAU;AACjB,SAAK,eAAe;AAAA,EACtB;AAAA,EAEA,oBAAoB;AAClB,QAAI,KAAK,iBAAiB,YAAY;AACpC,WAAK,eAAe;AAAA,IACtB,OAAO;AACL,WAAK,eAAe;AAAA,IACtB;AAAA,EACF;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA;AAEN,QAAI,CAAC,KAAK,aAAa,YAAY,GAAG;AACpC,WAAK,aAAa;AAAA,IACpB;AAAA,EACF;AAAA,EAEA,aAAa;AACX,WAAO,KAAK,iBAAiB,aACzB,sCAAsC,QAAQ,QAAQ,CAAC,CAAC,iBACxD;AAAA;AAAA,sBAEc,UAAU,QAAQ,CAAC,CAAC;AAAA,EACxC;AAAA,EAEA,eAAe;AACb,WAAO;AAAA,kBACO,KAAK,QAAQ;AAAA,eAChB,KAAK,iBAAiB;AAAA;AAAA,eAEtB,KAAK,iBAAiB,aAC3B,kBACA,eAAe;AAAA;AAAA,QAEjB,KAAK,YAAY;AAAA;AAAA,EAEvB;~~AAeF~~;~~AAbE~~,yBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAAA;~~AApDG,IAAM,0BAAN;AAEG,gBAAA;AAAA,EADP,MAAA;AAAM,GADI,wBAEH,WAAA,gBAAA,CAAA;AAIJ,gBAAA;AAAA,EADH,SAAA;AAAS,GALC,wBAMP,WAAA,QAAA,CAAA;"}
1	+ {"version":3,"file":"input-password.element.js","sources":["../../../src/components/input-password/input-password.element.ts"],"sourcesContent":["import { iconSee, iconUnsee } from '../icon-registry-essential/svgs/index.js';\nimport type { InputType } from '../input/input.js';\nimport { UUIInputElement } from '../input/input.js';\nimport { css, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport '../icon/icon.js';\nimport '../button/button.js';\n\n/*\n @element uui-input-password\n * @extends uui-input\n */\nexport class UUIInputPasswordElement extends UUIInputElement {\n @state()\n private passwordType: InputType = 'password';\n\n // this overrides the inherited type property, and moves the input's type handling to the passwordType state.\n @property()\n get type() {\n return this.passwordType;\n }\n set type(newValue) {\n this.passwordType = newValue;\n }\n\n _onPasswordToggle() {\n if (this.passwordType === 'password') {\n this.passwordType = 'text';\n } else {\n this.passwordType = 'password';\n }\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n if (!this.hasAttribute('spellcheck')) {\n this.spellcheck = false;\n }\n }\n\n renderIcon() {\n return this.passwordType === 'password'\n ? html`<uui-icon name=\"see\" .fallback=${iconSee.strings[0]}></uui-icon>`\n : html`<uui-icon\n name=\"unsee\"\n .fallback=${iconUnsee.strings[0]}></uui-icon>`;\n }\n\n renderAppend() {\n return html`<uui-button\n .disabled=${this.disabled}\n @click=${this._onPasswordToggle}\n compact\n label=\"${this.passwordType === 'password'\n ? 'Show password'\n : 'Hide password'}\"\n id=\"eye\">\n ${this.renderIcon()}\n </uui-button>`;\n }\n\n static override readonly styles = [\n ...UUIInputElement.styles,\n css`\n #eye {\n margin-left: -6px;\n }\n\n #clear:hover {\n color: black;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,2BAAN,MAAM,iCAAgC,gBAAgB;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA;AAEL,SAAQ,eAA0B;AAAA,EAAA;AAAA,EAIlC,IAAI,OAAO;AACT,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,KAAK,UAAU;AACjB,SAAK,eAAe;AAAA,EACtB;AAAA,EAEA,oBAAoB;AAClB,QAAI,KAAK,iBAAiB,YAAY;AACpC,WAAK,eAAe;AAAA,IACtB,OAAO;AACL,WAAK,eAAe;AAAA,IACtB;AAAA,EACF;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA;AAEN,QAAI,CAAC,KAAK,aAAa,YAAY,GAAG;AACpC,WAAK,aAAa;AAAA,IACpB;AAAA,EACF;AAAA,EAEA,aAAa;AACX,WAAO,KAAK,iBAAiB,aACzB,sCAAsC,QAAQ,QAAQ,CAAC,CAAC,iBACxD;AAAA;AAAA,sBAEc,UAAU,QAAQ,CAAC,CAAC;AAAA,EACxC;AAAA,EAEA,eAAe;AACb,WAAO;AAAA,kBACO,KAAK,QAAQ;AAAA,eAChB,KAAK,iBAAiB;AAAA;AAAA,eAEtB,KAAK,iBAAiB,aAC3B,kBACA,eAAe;AAAA;AAAA,QAEjB,KAAK,YAAY;AAAA;AAAA,EAEvB;AAcF;AAZE,yBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApDG,IAAM,0BAAN;AAEG,gBAAA;AAAA,EADP,MAAA;AAAM,GADI,wBAEH,WAAA,gBAAA,CAAA;AAIJ,gBAAA;AAAA,EADH,SAAA;AAAS,GALC,wBAMP,WAAA,QAAA,CAAA;"}

package/dist/components/keyboard-shortcut/key.element.js CHANGED Viewed

@@ -7,6 +7,12 @@ const _UUIKeyElement = class _UUIKeyElement extends LitElement {
 _UUIKeyElement.styles = [
   css`
       :host {
+        display: inline-flex;
+        line-height: 1;
+        justify-content: center;
+        flex-direction: column;
+        height: 2em;
         background: var(--uui-color-surface);
         border: 1px solid var(--uui-color-border);
         font-family: inherit;
@@ -14,7 +20,7 @@ _UUIKeyElement.styles = [
         color: var(--uui-color-text);
         border-radius: var(--uui-border-radius);
         margin: 0px 5px;
-        padding: 5px 7px;
+        padding: 0px 6px;
         box-sizing: border-box;
         user-select: none;
         text-transform: lowercase;

package/dist/components/keyboard-shortcut/key.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"key.element.js","sources":["../../../src/components/keyboard-shortcut/key.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/*\n A visual representation of a key on you keyboard. use inside `<uui-keyboard-shortcut></uui-keyboard-shortcut>`\n * @element uui-key\n * @slot - for the key name. Anything you put in here will be lowercase.\n */\nexport class UUIKeyElement extends LitElement {\n render() {\n return html`<slot></slot>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n background: var(--uui-color-surface);\n border: 1px solid var(--uui-color-border);\n font-family: inherit;\n font-size: var(--uui-type-small-size);\n color: var(--uui-color-text);\n border-radius: var(--uui-border-radius);\n margin: 0px 5px;\n padding: ~~5px~~ ~~7px~~;\n box-sizing: border-box;\n user-select: none;\n text-transform: lowercase;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,iBAAN,MAAM,uBAAsB,WAAW;AAAA,EAC5C,SAAS;AACP,WAAO;AAAA,EACT;~~AAmBF~~;~~AAjBE~~,eAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AANG,IAAM,gBAAN;"}
1	+ {"version":3,"file":"key.element.js","sources":["../../../src/components/keyboard-shortcut/key.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/*\n A visual representation of a key on you keyboard. use inside `<uui-keyboard-shortcut></uui-keyboard-shortcut>`\n * @element uui-key\n * @slot - for the key name. Anything you put in here will be lowercase.\n */\nexport class UUIKeyElement extends LitElement {\n render() {\n return html`<slot></slot>`;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: inline-flex;\n line-height: 1;\n justify-content: center;\n flex-direction: column;\n height: 2em;\n\n background: var(--uui-color-surface);\n border: 1px solid var(--uui-color-border);\n font-family: inherit;\n font-size: var(--uui-type-small-size);\n color: var(--uui-color-text);\n border-radius: var(--uui-border-radius);\n margin: 0px 5px;\n padding: 0px 6px;\n box-sizing: border-box;\n user-select: none;\n text-transform: lowercase;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,iBAAN,MAAM,uBAAsB,WAAW;AAAA,EAC5C,SAAS;AACP,WAAO;AAAA,EACT;AAyBF;AAvBE,eAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AANG,IAAM,gBAAN;"}

package/dist/components/loader/loader.element.js CHANGED Viewed

@@ -19,11 +19,14 @@ _UUILoaderElement.styles = [
         width: var(--uui-size-2);
         height: var(--uui-size-2);
         border: 1px solid currentColor;
+        box-shadow: 0 0 0 0.33px currentColor;
         border-radius: 100%;
+        opacity: 0;
         animation: loaderAnimation 1.2s infinite;
         transition:
-          transform 60ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
-          background-color 60ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+          transform 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
+          opacity 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
+          filter 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
       }
       div:nth-child(1n) {
@@ -42,14 +45,28 @@ _UUILoaderElement.styles = [
         0% {
           transform: scale(0.33);
           background-color: currentColor;
+          filter: blur(1.5px);
+          opacity: 0.25;
+        }
+        33% {
+          transform: scale(1);
+          background-color: transparent;
+          filter: blur(0px);
+          opacity: 1;
         }
         50% {
           transform: scale(1);
           background-color: transparent;
+          filter: blur(0px);
+          opacity: 0.9;
         }
         100% {
           transform: scale(0.33);
           background-color: currentColor;
+          filter: blur(1.5px);
+          opacity: 0.25;
         }
       }
     `

package/dist/components/loader/loader.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"loader.element.js","sources":["../../../src/components/loader/loader.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n/*\n A basic loader.\n * @element uui-loader\n */\nexport class UUILoaderElement extends LitElement {\n render() {\n return html`\n <div></div>\n <div></div>\n <div></div>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n color: var(--uui-color-default);\n }\n\n div {\n display: inline-block;\n width: var(--uui-size-2);\n height: var(--uui-size-2);\n border: 1px solid currentColor;\n border-radius: 100%;\n animation: loaderAnimation 1.2s infinite;\n transition:\n transform 60ms cubic-bezier(0.68, -0.55, 0.~~265~~, 1.55),\n ~~background-color~~ 60ms cubic-bezier(0.68, -0.55, 0.~~265~~, 1.55);\n }\n\n div:nth-child(1n) {\n animation-delay: 0s;\n }\n\n div:nth-child(2n) {\n animation-delay: 0.15s;\n }\n\n div:nth-child(3n) {\n animation-delay: 0.3s;\n }\n\n @keyframes loaderAnimation {\n 0% {\n transform: scale(0.33);\n background-color: currentColor;\n }\n 50% {\n transform: scale(1);\n background-color: transparent;\n }\n 100% {\n transform: scale(0.33);\n background-color: currentColor;\n }\n }\n `,\n ];\n}\n"],"names":[],"mappings":";AAKO,MAAM,oBAAN,MAAM,0BAAyB,WAAW;AAAA,EAC/C,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;~~AAgDF~~;~~AA9CE~~,kBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAVG,IAAM,mBAAN;"}
1	+ {"version":3,"file":"loader.element.js","sources":["../../../src/components/loader/loader.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n/*\n A basic loader.\n * @element uui-loader\n */\nexport class UUILoaderElement extends LitElement {\n render() {\n return html`\n <div></div>\n <div></div>\n <div></div>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n color: var(--uui-color-default);\n }\n\n div {\n display: inline-block;\n width: var(--uui-size-2);\n height: var(--uui-size-2);\n border: 1px solid currentColor;\n box-shadow: 0 0 0 0.33px currentColor;\n border-radius: 100%;\n opacity: 0;\n animation: loaderAnimation 1.2s infinite;\n transition:\n transform 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275),\n opacity 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275),\n filter 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n div:nth-child(1n) {\n animation-delay: 0s;\n }\n\n div:nth-child(2n) {\n animation-delay: 0.15s;\n }\n\n div:nth-child(3n) {\n animation-delay: 0.3s;\n }\n\n @keyframes loaderAnimation {\n 0% {\n transform: scale(0.33);\n background-color: currentColor;\n filter: blur(1.5px);\n opacity: 0.25;\n }\n 33% {\n transform: scale(1);\n background-color: transparent;\n filter: blur(0px);\n\n opacity: 1;\n }\n 50% {\n transform: scale(1);\n background-color: transparent;\n filter: blur(0px);\n\n opacity: 0.9;\n }\n 100% {\n transform: scale(0.33);\n background-color: currentColor;\n filter: blur(1.5px);\n opacity: 0.25;\n }\n }\n `,\n ];\n}\n"],"names":[],"mappings":";AAKO,MAAM,oBAAN,MAAM,0BAAyB,WAAW;AAAA,EAC/C,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AAiEF;AA/DE,kBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAVG,IAAM,mBAAN;"}

package/dist/components/modal/modal-container.js CHANGED Viewed

@@ -113,8 +113,8 @@ updateSidebars_fn = function() {
         );
       });
       if (nextSidebar?.hasAttribute("hide")) break;
-      const currentWidth = sidebar.shadowRoot?.querySelector("dialog")?.getBoundingClientRect().width ?? 0;
-      const nextWidth = nextSidebar?.shadowRoot?.querySelector("dialog")?.getBoundingClientRect().width ?? 0;
+      const currentWidth = sidebar.shadowRoot?.querySelector("[popover]")?.getBoundingClientRect().width ?? 0;
+      const nextWidth = nextSidebar?.shadowRoot?.querySelector("[popover]")?.getBoundingClientRect().width ?? 0;
       const distance = currentWidth + sidebarOffset + this.sidebarGap - nextWidth;
       sidebarOffset = Math.max(distance, 0);
     }
@@ -137,6 +137,10 @@ _UUIModalContainerElement.styles = css`
     :host([backdrop])::after {
       opacity: 1;
     }
+    :host([backdrop])::after {
+      opacity: 1;
+      pointer-events: auto;
+    }
   `;
 let UUIModalContainerElement = _UUIModalContainerElement;
 __decorateClass([

package/dist/components/modal/modal-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal-container.js","sources":["../../../src/components/modal/modal-container.ts"],"sourcesContent":["import type { PropertyValueMap } from 'lit';\nimport { LitElement, css, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { UUIModalSidebarElement } from './modal-sidebar.element.js';\nimport { UUIModalCloseEvent, UUIModalElement } from './modal.element.js';\nexport class UUIModalContainerElement extends LitElement {\n @query('slot')\n modalSlot?: HTMLSlotElement;\n\n @state()\n private _modals?: Array<UUIModalElement>;\n\n @state()\n private _sidebars?: Array<UUIModalSidebarElement>;\n\n @property({ type: Number })\n sidebarGap = 64;\n\n @property({ type: Number })\n transitionDurationMS = 250;\n\n constructor() {\n super();\n this.addEventListener(UUIModalCloseEvent, this.#onCloseModalClose);\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.firstUpdated(_changedProperties);\n\n this.style.setProperty(\n '--uui-modal-transition-duration',\n this.transitionDurationMS + 'ms',\n );\n }\n\n readonly #onSlotChange = () => {\n const existingModals = this._modals ?? [];\n\n this._modals =\n (this.modalSlot\n ?.assignedElements({ flatten: true })\n .filter(\n el => el instanceof UUIModalElement,\n ) as Array<UUIModalElement>) ?? [];\n\n const oldModals = existingModals.filter(\n modal => !this._modals!.includes(modal),\n );\n oldModals.forEach(modal =>\n modal.removeEventListener(UUIModalCloseEvent, this.#onCloseModalClose),\n );\n\n const newModals = this._modals.filter(\n modal => !existingModals.includes(modal),\n );\n newModals.forEach(modal =>\n modal.addEventListener(UUIModalCloseEvent, this.#onCloseModalClose),\n );\n\n this._sidebars = this._modals.filter(\n el => el instanceof UUIModalSidebarElement,\n );\n\n if (this._modals.length === 0) {\n this.removeAttribute('backdrop');\n return;\n }\n\n this.#updateModals();\n this.#updateSidebars();\n };\n\n readonly #onCloseModalClose = (event: Event) => {\n event.stopImmediatePropagation();\n\n event.target?.removeEventListener(\n UUIModalCloseEvent,\n this.#onCloseModalClose,\n );\n if (!this._modals \|\| this._modals.length <= 1) {\n this.removeAttribute('backdrop');\n return;\n }\n\n this.#updateModals();\n this.#updateSidebars();\n };\n\n #updateModals() {\n this.setAttribute('backdrop', '');\n\n const reverse =\n this._modals?.filter(modal => !modal.isClosing).reverse() ?? [];\n\n //set index to all modals, the one in front is 0\n reverse?.forEach((modal, index) => {\n modal.index = index;\n modal.transitionDuration = this.transitionDurationMS;\n });\n\n //set unique-index on all modals based on which modal of the same type it is, the one in front is 0.\n reverse?.forEach(modal => {\n const sameType = reverse?.filter(\n m => m.constructor.name === modal.constructor.name,\n );\n\n modal.uniqueIndex = sameType?.indexOf(modal) ?? 0;\n });\n }\n\n #updateSidebars() {\n requestAnimationFrame(() => {\n let sidebarOffset = 0;\n const reversed =\n this._sidebars?.filter(modal => !modal.isClosing).reverse() ?? [];\n\n for (let i = 0; i < reversed.length; i++) {\n const sidebar = reversed[i];\n const nextSidebar = reversed[i + 1];\n const tempSidebarOffset = sidebarOffset; // Cache to prevent it from being overwritten before the updateComplete.\n // The sidebar checks it's own width at sets it's --uui-modal-offset to negative that width.\n // This enables it to slide in from the right. So we need to set the new --uui-modal-offset after the updateComplete.\n sidebar.updateComplete.then(() => {\n sidebar.style.setProperty(\n '--uui-modal-offset',\n tempSidebarOffset + 'px',\n );\n });\n\n // Stop the calculations if the next sidebar is hidden\n if (nextSidebar?.hasAttribute('hide')) break;\n\n //TODO: is there a better way to get the width of the sidebar?\n const currentWidth =\n sidebar.shadowRoot?.querySelector('~~dialog~~')?.getBoundingClientRect()\n .width ?? 0;\n\n //TODO: is there a better way to get the width of the sidebar?\n const nextWidth =\n nextSidebar?.shadowRoot\n ?.querySelector('~~dialog~~')\n ?.getBoundingClientRect().width ?? 0;\n const distance =\n currentWidth + sidebarOffset + this.sidebarGap - nextWidth;\n sidebarOffset = Math.max(distance, 0);\n }\n });\n }\n\n render() {\n return html`<slot @slotchange=${this.#onSlotChange}></slot>`;\n }\n static readonly styles = css`\n :host {\n position: fixed;\n --uui-modal-color-backdrop: rgba(0, 0, 0, 0.5);\n }\n :host::after {\n content: '';\n position: fixed;\n inset: 0;\n background-color: var(--uui-modal-color-backdrop, rgba(0, 0, 0, 0.5));\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--uui-modal-transition-duration, 250ms);\n }\n :host([backdrop])::after {\n opacity: 1;\n }\n `;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,4BAAN,MAAM,kCAAiC,WAAW;AAAA,EAgBvD,cAAc;AACZ,UAAA;AAjBG;AAgCI;AAqCA;AA1DT,SAAA,aAAa;AAGb,SAAA,uBAAuB;AAkBvB,uBAAS,eAAgB,MAAM;AAC7B,YAAM,iBAAiB,KAAK,WAAW,CAAA;AAEvC,WAAK,UACF,KAAK,WACF,iBAAiB,EAAE,SAAS,KAAA,CAAM,EACnC;AAAA,QACC,QAAM,cAAc;AAAA,MAAA,KACU,CAAA;AAEpC,YAAM,YAAY,eAAe;AAAA,QAC/B,CAAA,UAAS,CAAC,KAAK,QAAS,SAAS,KAAK;AAAA,MAAA;AAExC,gBAAU;AAAA,QAAQ,CAAA,UAChB,MAAM,oBAAoB,oBAAoB,mBAAK,mBAAkB;AAAA,MAAA;AAGvE,YAAM,YAAY,KAAK,QAAQ;AAAA,QAC7B,CAAA,UAAS,CAAC,eAAe,SAAS,KAAK;AAAA,MAAA;AAEzC,gBAAU;AAAA,QAAQ,CAAA,UAChB,MAAM,iBAAiB,oBAAoB,mBAAK,mBAAkB;AAAA,MAAA;AAGpE,WAAK,YAAY,KAAK,QAAQ;AAAA,QAC5B,QAAM,cAAc;AAAA,MAAA;AAGtB,UAAI,KAAK,QAAQ,WAAW,GAAG;AAC7B,aAAK,gBAAgB,UAAU;AAC/B;AAAA,MACF;AAEA,4BAAK,sDAAL;AACA,4BAAK,wDAAL;AAAA,IACF;AAEA,uBAAS,oBAAqB,CAAC,UAAiB;AAC9C,YAAM,yBAAA;AAEN,YAAM,QAAQ;AAAA,QACZ;AAAA,QACA,mBAAK;AAAA,MAAA;AAEP,UAAI,CAAC,KAAK,WAAW,KAAK,QAAQ,UAAU,GAAG;AAC7C,aAAK,gBAAgB,UAAU;AAC/B;AAAA,MACF;AAEA,4BAAK,sDAAL;AACA,4BAAK,wDAAL;AAAA,IACF;AAjEE,SAAK,iBAAiB,oBAAoB,mBAAK,mBAAkB;AAAA,EACnE;AAAA,EAEU,aACR,oBACM;AACN,UAAM,aAAa,kBAAkB;AAErC,SAAK,MAAM;AAAA,MACT;AAAA,MACA,KAAK,uBAAuB;AAAA,IAAA;AAAA,EAEhC;AAAA,~~EAoHA~~,SAAS;AACP,WAAO,yBAAyB,mBAAK,cAAa;AAAA,EACpD;~~AAmBF~~;~~AAvIW~~;AAqCA;AArEJ;AAqFL,kBAAA,WAAgB;AACd,OAAK,aAAa,YAAY,EAAE;AAEhC,QAAM,UACJ,KAAK,SAAS,OAAO,CAAA,UAAS,CAAC,MAAM,SAAS,EAAE,QAAA,KAAa,CAAA;AAG/D,WAAS,QAAQ,CAAC,OAAO,UAAU;AACjC,UAAM,QAAQ;AACd,UAAM,qBAAqB,KAAK;AAAA,EAClC,CAAC;AAGD,WAAS,QAAQ,CAAA,UAAS;AACxB,UAAM,WAAW,SAAS;AAAA,MACxB,CAAA,MAAK,EAAE,YAAY,SAAS,MAAM,YAAY;AAAA,IAAA;AAGhD,UAAM,cAAc,UAAU,QAAQ,KAAK,KAAK;AAAA,EAClD,CAAC;AACH;AAEA,oBAAA,WAAkB;AAChB,wBAAsB,MAAM;AAC1B,QAAI,gBAAgB;AACpB,UAAM,WACJ,KAAK,WAAW,OAAO,CAAA,UAAS,CAAC,MAAM,SAAS,EAAE,QAAA,KAAa,CAAA;AAEjE,aAAS,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;AACxC,YAAM,UAAU,SAAS,CAAC;AAC1B,YAAM,cAAc,SAAS,IAAI,CAAC;AAClC,YAAM,oBAAoB;AAG1B,cAAQ,eAAe,KAAK,MAAM;AAChC,gBAAQ,MAAM;AAAA,UACZ;AAAA,UACA,oBAAoB;AAAA,QAAA;AAAA,MAExB,CAAC;AAGD,UAAI,aAAa,aAAa,MAAM,EAAG;AAGvC,YAAM,eACJ,QAAQ,~~YAAY~~,cAAc,~~QAAQ~~,~~GAAG~~,~~wBAC1C~~,SAAS;~~AAGd~~,YAAM,YACJ,aAAa,YACT,cAAc,~~QAAQ~~,~~GACtB~~,wBAAwB,SAAS;AACvC,YAAM,WACJ,eAAe,gBAAgB,KAAK,aAAa;AACnD,sBAAgB,KAAK,IAAI,UAAU,CAAC;AAAA,IACtC;AAAA,EACF,CAAC;AACH;AAKA,0BAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AArJpB~~,IAAM,2BAAN;AAEL,gBAAA;AAAA,EADC,MAAM,MAAM;AAAA,GADF,yBAEX,WAAA,WAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAJI,yBAKH,WAAA,SAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GAPI,yBAQH,WAAA,WAAA;AAGR,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVf,yBAWX,WAAA,YAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAbf,yBAcX,WAAA,sBAAA;"}
1	+ {"version":3,"file":"modal-container.js","sources":["../../../src/components/modal/modal-container.ts"],"sourcesContent":["import type { PropertyValueMap } from 'lit';\nimport { LitElement, css, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { UUIModalSidebarElement } from './modal-sidebar.element.js';\nimport { UUIModalCloseEvent, UUIModalElement } from './modal.element.js';\nexport class UUIModalContainerElement extends LitElement {\n @query('slot')\n modalSlot?: HTMLSlotElement;\n\n @state()\n private _modals?: Array<UUIModalElement>;\n\n @state()\n private _sidebars?: Array<UUIModalSidebarElement>;\n\n @property({ type: Number })\n sidebarGap = 64;\n\n @property({ type: Number })\n transitionDurationMS = 250;\n\n constructor() {\n super();\n this.addEventListener(UUIModalCloseEvent, this.#onCloseModalClose);\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.firstUpdated(_changedProperties);\n\n this.style.setProperty(\n '--uui-modal-transition-duration',\n this.transitionDurationMS + 'ms',\n );\n }\n\n readonly #onSlotChange = () => {\n const existingModals = this._modals ?? [];\n\n this._modals =\n (this.modalSlot\n ?.assignedElements({ flatten: true })\n .filter(\n el => el instanceof UUIModalElement,\n ) as Array<UUIModalElement>) ?? [];\n\n const oldModals = existingModals.filter(\n modal => !this._modals!.includes(modal),\n );\n oldModals.forEach(modal =>\n modal.removeEventListener(UUIModalCloseEvent, this.#onCloseModalClose),\n );\n\n const newModals = this._modals.filter(\n modal => !existingModals.includes(modal),\n );\n newModals.forEach(modal =>\n modal.addEventListener(UUIModalCloseEvent, this.#onCloseModalClose),\n );\n\n this._sidebars = this._modals.filter(\n el => el instanceof UUIModalSidebarElement,\n );\n\n if (this._modals.length === 0) {\n this.removeAttribute('backdrop');\n return;\n }\n\n this.#updateModals();\n this.#updateSidebars();\n };\n\n readonly #onCloseModalClose = (event: Event) => {\n event.stopImmediatePropagation();\n\n event.target?.removeEventListener(\n UUIModalCloseEvent,\n this.#onCloseModalClose,\n );\n if (!this._modals \|\| this._modals.length <= 1) {\n this.removeAttribute('backdrop');\n return;\n }\n\n this.#updateModals();\n this.#updateSidebars();\n };\n\n #updateModals() {\n this.setAttribute('backdrop', '');\n\n const reverse =\n this._modals?.filter(modal => !modal.isClosing).reverse() ?? [];\n\n //set index to all modals, the one in front is 0\n reverse?.forEach((modal, index) => {\n modal.index = index;\n modal.transitionDuration = this.transitionDurationMS;\n });\n\n //set unique-index on all modals based on which modal of the same type it is, the one in front is 0.\n reverse?.forEach(modal => {\n const sameType = reverse?.filter(\n m => m.constructor.name === modal.constructor.name,\n );\n\n modal.uniqueIndex = sameType?.indexOf(modal) ?? 0;\n });\n }\n\n #updateSidebars() {\n requestAnimationFrame(() => {\n let sidebarOffset = 0;\n const reversed =\n this._sidebars?.filter(modal => !modal.isClosing).reverse() ?? [];\n\n for (let i = 0; i < reversed.length; i++) {\n const sidebar = reversed[i];\n const nextSidebar = reversed[i + 1];\n const tempSidebarOffset = sidebarOffset; // Cache to prevent it from being overwritten before the updateComplete.\n // The sidebar checks it's own width at sets it's --uui-modal-offset to negative that width.\n // This enables it to slide in from the right. So we need to set the new --uui-modal-offset after the updateComplete.\n sidebar.updateComplete.then(() => {\n sidebar.style.setProperty(\n '--uui-modal-offset',\n tempSidebarOffset + 'px',\n );\n });\n\n // Stop the calculations if the next sidebar is hidden\n if (nextSidebar?.hasAttribute('hide')) break;\n\n //TODO: is there a better way to get the width of the sidebar?\n const currentWidth =\n sidebar.shadowRoot\n ?.querySelector('[popover]')\n ?.getBoundingClientRect().width ?? 0;\n\n //TODO: is there a better way to get the width of the sidebar?\n const nextWidth =\n nextSidebar?.shadowRoot\n ?.querySelector('[popover]')\n ?.getBoundingClientRect().width ?? 0;\n const distance =\n currentWidth + sidebarOffset + this.sidebarGap - nextWidth;\n sidebarOffset = Math.max(distance, 0);\n }\n });\n }\n\n render() {\n return html`<slot @slotchange=${this.#onSlotChange}></slot>`;\n }\n static readonly styles = css`\n :host {\n position: fixed;\n --uui-modal-color-backdrop: rgba(0, 0, 0, 0.5);\n }\n :host::after {\n content: '';\n position: fixed;\n inset: 0;\n background-color: var(--uui-modal-color-backdrop, rgba(0, 0, 0, 0.5));\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--uui-modal-transition-duration, 250ms);\n }\n :host([backdrop])::after {\n opacity: 1;\n }\n :host([backdrop])::after {\n opacity: 1;\n pointer-events: auto;\n }\n `;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/modal/modal-dialog.element.js CHANGED Viewed

@@ -3,9 +3,9 @@ import { UUIModalElement } from "./modal.element.js";
 const _UUIModalDialogElement = class _UUIModalDialogElement extends UUIModalElement {
   render() {
     return html`
-      <dialog>
+      <div popover="manual" role="dialog" aria-modal="true" aria-label="Dialog">
         <slot></slot>
-      </dialog>
+      </div>
     `;
   }
 };
@@ -16,7 +16,7 @@ _UUIModalDialogElement.styles = [
         outline: none;
         --uui-modal-dialog-background: var(--uui-color-surface);
       }
-      dialog {
+      [popover] {
         margin: auto;
         max-width: 100%;
         max-height: 100%;
@@ -29,10 +29,10 @@ _UUIModalDialogElement.styles = [
           var(--uui-color-surface)
         );
       }
-      :host([index='0']) dialog {
+      :host([index='0']) [popover] {
         box-shadow: var(--uui-shadow-depth-5);
       }
-      :host(:not([index='0'])) dialog {
+      :host(:not([index='0'])) [popover] {
         outline: 1px solid rgba(0, 0, 0, 0.1);
       }
     `

package/dist/components/modal/modal-dialog.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal-dialog.element.js","sources":["../../../src/components/modal/modal-dialog.element.ts"],"sourcesContent":["import { css, html } from 'lit';\nimport { UUIModalElement } from './modal.element.js';\nexport class UUIModalDialogElement extends UUIModalElement {\n render() {\n return html`\n <dialog>\n <slot></slot>\n </~~dialog~~>\n `;\n }\n\n static override readonly styles = [\n ...UUIModalElement.styles,\n css`\n :host {\n outline: none;\n --uui-modal-dialog-background: var(--uui-color-surface);\n }\n ~~dialog~~ {\n margin: auto;\n max-width: 100%;\n max-height: 100%;\n border-radius: var(\n --uui-modal-dialog-border-radius,\n var(--uui-border-radius-3)\n );\n background: var(\n --uui-modal-dialog-background,\n var(--uui-color-surface)\n );\n }\n :host([index='0']) ~~dialog~~ {\n box-shadow: var(--uui-shadow-depth-5);\n }\n :host(:not([index='0'])) ~~dialog~~ {\n outline: 1px solid rgba(0, 0, 0, 0.1);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;AAEO,MAAM,yBAAN,MAAM,+BAA8B,gBAAgB;AAAA,EACzD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AA8BF;AA5BE,uBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAXG,IAAM,wBAAN;"}
1	+ {"version":3,"file":"modal-dialog.element.js","sources":["../../../src/components/modal/modal-dialog.element.ts"],"sourcesContent":["import { css, html } from 'lit';\nimport { UUIModalElement } from './modal.element.js';\nexport class UUIModalDialogElement extends UUIModalElement {\n render() {\n return html`\n <div popover=\"manual\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Dialog\">\n <slot></slot>\n </div>\n `;\n }\n\n static override readonly styles = [\n ...UUIModalElement.styles,\n css`\n :host {\n outline: none;\n --uui-modal-dialog-background: var(--uui-color-surface);\n }\n [popover] {\n margin: auto;\n max-width: 100%;\n max-height: 100%;\n border-radius: var(\n --uui-modal-dialog-border-radius,\n var(--uui-border-radius-3)\n );\n background: var(\n --uui-modal-dialog-background,\n var(--uui-color-surface)\n );\n }\n :host([index='0']) [popover] {\n box-shadow: var(--uui-shadow-depth-5);\n }\n :host(:not([index='0'])) [popover] {\n outline: 1px solid rgba(0, 0, 0, 0.1);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;AAEO,MAAM,yBAAN,MAAM,+BAA8B,gBAAgB;AAAA,EACzD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AA8BF;AA5BE,uBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAXG,IAAM,wBAAN;"}