@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

package/dist/components/input/input.element.js

@@ -1,119 +1,125 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _UUIInputElement_instances, onKeyDown_fn;
-import { LitElement, html, css } from "lit";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
+import { UUIFormControlMixin as UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
+import { UUIInputEvent } from "./UUIInputEvent.js";
+import { LitElement, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { UUIInputEvent } from "./UUIInputEvent.js";
-import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
-import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const _UUIInputElement = class _UUIInputElement extends UUIFormControlWithBasicsMixin(
-  LabelMixin("", LitElement),
-  ""
-) {
-  constructor() {
-    super();
-    __privateAdd(this, _UUIInputElement_instances);
-    this.minlengthMessage = (charsLeft) => `${charsLeft} characters left`;
-    this.maxlengthMessage = (max, current) => `Maximum ${max} characters, ${current - max} too many.`;
-    this.disabled = false;
-    this.readonly = false;
-    this.placeholder = "";
-    this.autoWidth = false;
-    this.inputMode = "text";
-    this.tabIndex = 0;
-    this._type = "text";
-    this.addEventListener("keydown", __privateMethod(this, _UUIInputElement_instances, onKeyDown_fn));
-    this.addValidator(
-      "tooShort",
-      () => {
-        const label = this.minlengthMessage;
-        if (typeof label === "function") {
-          return label(
-            this.minlength ? this.minlength - String(this.value).length : 0
-          );
-        }
-        return label;
-      },
-      () => !!this.minlength && String(this.value).length < this.minlength
-    );
-    this.addValidator(
-      "tooLong",
-      () => {
-        const label = this.maxlengthMessage;
-        if (typeof label === "function") {
-          return label(this.maxlength ?? 0, String(this.value).length);
-        }
-        return label;
-      },
-      () => !!this.maxlength && String(this.value).length > this.maxlength
-    );
-    this.updateComplete.then(() => {
-      this.addFormControlElement(this._input);
-    });
-  }
-  get type() {
-    return this._type;
-  }
-  set type(value) {
-    this._type = value;
-  }
-  /**
-   * Removes focus from the input.
-   */
-  async blur() {
-    await this.updateComplete;
-    this._input.blur();
-  }
-  /**
-   * This method enables <label for="..."> to focus the input
-   */
-  async focus() {
-    await this.updateComplete;
-    this._input.focus();
-  }
-  /**
-   * Selects all the text in the input.
-   */
-  async select() {
-    await this.updateComplete;
-    this._input.select();
-  }
-  getFormElement() {
-    return this.shadowRoot?.querySelector("input");
-  }
-  onInput(e) {
-    e.stopPropagation();
-    this.value = e.target.value;
-    this.dispatchEvent(new UUIInputEvent(UUIInputEvent.INPUT));
-  }
-  onChange(e) {
-    e.stopPropagation();
-    this.pristine = false;
-    this.dispatchEvent(new UUIInputEvent(UUIInputEvent.CHANGE));
-  }
-  renderPrepend() {
-    return html`<slot name="prepend"></slot>`;
-  }
-  renderAppend() {
-    return html`<slot name="append"></slot>`;
-  }
-  render() {
-    return html`
+//#region src/components/input/input.element.ts
+/**
+* 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.
+* @element uui-input
+* @slot prepend - for components to render to the left of the input.
+* @slot append - for components to render to the right of the input.
+* @property {boolean} spellcheck - get/set native spellcheck attribute
+* @attribute spellcheck - native spellcheck attribute
+* @property {string} value - get/set the value of the input
+* @attribute value - get/set the value of the input
+* @property {string} name - get/set the name of the input
+* @attribute name - get/set the name of the input
+* @fires UUIInputEvent#change on change
+* @fires InputEvent#input on input
+* @fires KeyboardEvent#keyup on keyup
+* @cssprop --uui-input-height - Height of the element
+* @cssprop --uui-input-background-color - Background color of the element
+* @cssprop --uui-input-background-color-disabled - Background color when disabled
+* @cssprop --uui-input-background-color-readonly - Background color when readonly
+* @cssprop --uui-input-border-width - Border width
+* @cssprop --uui-input-border-radius - Border radius
+* @cssprop --uui-input-border-color - Border color
+* @cssprop --uui-input-border-color-hover - Border color on hover
+* @cssprop --uui-input-border-color-focus - Border color on focus
+* @cssprop --uui-input-border-color-disabled - Border color when disabled
+* @cssprop --uui-input-border-color-readonly - Border color when readonly
+*/
+var UUIInputElement = class extends UUIFormControlWithBasicsMixin(LabelMixin("", LitElement), "") {
+	static {
+		this.formAssociated = true;
+	}
+	/**
+	* This property specifies the type of input that will be rendered.
+	* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types|MDN} for further information
+	* @type {'text' | 'tel' | 'url' | 'email' | 'password' | 'date' | 'month' | 'week' | 'time' | 'datetime-local' | 'number' | 'color'}
+	* @attr
+	* @default text
+	*/
+	get type() {
+		return this._type;
+	}
+	set type(value) {
+		this._type = value;
+	}
+	constructor() {
+		super();
+		this.minlengthMessage = (charsLeft) => `${charsLeft} characters left`;
+		this.maxlengthMessage = (max, current) => `Maximum ${max} characters, ${current - max} too many.`;
+		this.disabled = false;
+		this.readonly = false;
+		this.placeholder = "";
+		this.autoWidth = false;
+		this.inputMode = "text";
+		this.tabIndex = 0;
+		this._type = "text";
+		this.addEventListener("keydown", this.#onKeyDown);
+		this.addValidator("tooShort", () => {
+			const label = this.minlengthMessage;
+			if (typeof label === "function") return label(this.minlength ? this.minlength - String(this.value).length : 0);
+			return label;
+		}, () => !!this.minlength && String(this.value).length < this.minlength);
+		this.addValidator("tooLong", () => {
+			const label = this.maxlengthMessage;
+			if (typeof label === "function") return label(this.maxlength ?? 0, String(this.value).length);
+			return label;
+		}, () => !!this.maxlength && String(this.value).length > this.maxlength);
+		this.updateComplete.then(() => {
+			this.addFormControlElement(this._input);
+		});
+	}
+	#onKeyDown(e) {
+		if (this.type !== "color" && e.key == "Enter") this.submit();
+	}
+	/**
+	* Removes focus from the input.
+	*/
+	async blur() {
+		await this.updateComplete;
+		this._input.blur();
+	}
+	/**
+	* This method enables <label for="..."> to focus the input
+	*/
+	async focus() {
+		await this.updateComplete;
+		this._input.focus();
+	}
+	/**
+	* Selects all the text in the input.
+	*/
+	async select() {
+		await this.updateComplete;
+		this._input.select();
+	}
+	getFormElement() {
+		return this.shadowRoot?.querySelector("input");
+	}
+	onInput(e) {
+		e.stopPropagation();
+		this.value = e.target.value;
+		this.dispatchEvent(new UUIInputEvent(UUIInputEvent.INPUT));
+	}
+	onChange(e) {
+		e.stopPropagation();
+		this.pristine = false;
+		this.dispatchEvent(new UUIInputEvent(UUIInputEvent.CHANGE));
+	}
+	renderPrepend() {
+		return html`<slot name="prepend"></slot>`;
+	}
+	renderAppend() {
+		return html`<slot name="append"></slot>`;
+	}
+	render() {
+		return html`
       ${this.renderPrepend()}
       <div id="inner">
         <slot></slot>
@@ -121,14 +127,14 @@ const _UUIInputElement = class _UUIInputElement extends UUIFormControlWithBasics
       </div>
       ${this.renderAppend()}
     `;
-  }
-  renderInputWithAutoWidth() {
-    return html`<div id="autoWidth">
+	}
+	renderInputWithAutoWidth() {
+		return html`<div id="autoWidth">
       ${this.renderInput()}${this.renderAutoWidthBackground()}
     </div>`;
-  }
-  renderInput() {
-    return html`<input
+	}
+	renderInput() {
+		return html`<input
       id="input"
       size=${ifDefined(this.autoWidth ? "1" : void 0)}
       .type=${this.type}
@@ -141,12 +147,8 @@ const _UUIInputElement = class _UUIInputElement extends UUIFormControlWithBasics
       spellcheck=${this.spellcheck}
       autocomplete=${ifDefined(this.autocomplete)}
       placeholder=${ifDefined(this.placeholder)}
-      aria-label=${ifDefined(
-      this.getAttribute("aria-label") || this.label || void 0
-    )}
-      aria-labelledby=${ifDefined(
-      this.getAttribute("aria-labelledby") || void 0
-    )}
+      aria-label=${ifDefined(this.getAttribute("aria-label") || this.label || void 0)}
+      aria-labelledby=${ifDefined(this.getAttribute("aria-labelledby") || void 0)}
       inputmode=${ifDefined(this.inputMode)}
       ?disabled=${this.disabled}
       ?autofocus=${this.autofocus}
@@ -155,23 +157,15 @@ const _UUIInputElement = class _UUIInputElement extends UUIFormControlWithBasics
       tabindex=${ifDefined(this.tabIndex)}
       @input=${this.onInput}
       @change=${this.onChange} />`;
-  }
-  renderAutoWidthBackground() {
-    return html` <div id="auto" aria-hidden="true">${this.renderText()}</div>`;
-  }
-  renderText() {
-    return html`${this.value.length > 0 ? this.value : this.placeholder}`;
-  }
-};
-_UUIInputElement_instances = new WeakSet();
-onKeyDown_fn = function(e) {
-  if (this.type !== "color" && e.key == "Enter") {
-    this.submit();
-  }
-};
-_UUIInputElement.formAssociated = true;
-_UUIInputElement.styles = [
-  css`
+	}
+	renderAutoWidthBackground() {
+		return html` <div id="auto" aria-hidden="true">${this.renderText()}</div>`;
+	}
+	renderText() {
+		return html`${this.value.length > 0 ? this.value : this.placeholder}`;
+	}
+	static {
+		this.styles = [css`
       :host {
         position: relative;
         display: inline-flex;
@@ -235,7 +229,8 @@ _UUIInputElement.styles = [
           --uui-input-border-color-focus,
           var(--uui-color-border-emphasis)
         );
-        outline: 2px solid var(--uui-color-focus);
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
       }
       :host(:focus) {
         border-color: var(
@@ -341,61 +336,41 @@ _UUIInputElement.styles = [
         min-width: 0;
         padding: 2px;
       }
-    `
-];
-let UUIInputElement = _UUIInputElement;
-__decorateClass([
-  property()
-], UUIInputElement.prototype, "min", 2);
-__decorateClass([
-  property({ type: Number })
-], UUIInputElement.prototype, "minlength", 2);
-__decorateClass([
-  property({ attribute: "minlength-message" })
-], UUIInputElement.prototype, "minlengthMessage", 2);
-__decorateClass([
-  property()
-], UUIInputElement.prototype, "max", 2);
-__decorateClass([
-  property({ type: Number })
-], UUIInputElement.prototype, "maxlength", 2);
-__decorateClass([
-  property({ attribute: "maxlength-message" })
-], UUIInputElement.prototype, "maxlengthMessage", 2);
-__decorateClass([
-  property({ type: Number })
-], UUIInputElement.prototype, "step", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIInputElement.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIInputElement.prototype, "readonly", 2);
-__decorateClass([
-  property()
-], UUIInputElement.prototype, "placeholder", 2);
-__decorateClass([
-  property()
-], UUIInputElement.prototype, "autocomplete", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "auto-width" })
-], UUIInputElement.prototype, "autoWidth", 2);
-__decorateClass([
-  property({ type: String })
-], UUIInputElement.prototype, "type", 1);
-__decorateClass([
-  property({ attribute: "inputmode" })
-], UUIInputElement.prototype, "inputMode", 2);
-__decorateClass([
-  property({ type: String })
-], UUIInputElement.prototype, "pattern", 2);
-__decorateClass([
-  property({ type: Number, reflect: false, attribute: "tabindex" })
-], UUIInputElement.prototype, "tabIndex", 2);
-__decorateClass([
-  query("#input")
-], UUIInputElement.prototype, "_input", 2);
-export {
-  UUIInputElement
+    `];
+	}
 };
-//# sourceMappingURL=input.element.js.map
+__decorate([property()], UUIInputElement.prototype, "min", void 0);
+__decorate([property({ type: Number })], UUIInputElement.prototype, "minlength", void 0);
+__decorate([property({ attribute: "minlength-message" })], UUIInputElement.prototype, "minlengthMessage", void 0);
+__decorate([property()], UUIInputElement.prototype, "max", void 0);
+__decorate([property({ type: Number })], UUIInputElement.prototype, "maxlength", void 0);
+__decorate([property({ attribute: "maxlength-message" })], UUIInputElement.prototype, "maxlengthMessage", void 0);
+__decorate([property({ type: Number })], UUIInputElement.prototype, "step", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIInputElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIInputElement.prototype, "readonly", void 0);
+__decorate([property()], UUIInputElement.prototype, "placeholder", void 0);
+__decorate([property()], UUIInputElement.prototype, "autocomplete", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "auto-width"
+})], UUIInputElement.prototype, "autoWidth", void 0);
+__decorate([property({ type: String })], UUIInputElement.prototype, "type", null);
+__decorate([property({ attribute: "inputmode" })], UUIInputElement.prototype, "inputMode", void 0);
+__decorate([property({ type: String })], UUIInputElement.prototype, "pattern", void 0);
+__decorate([property({
+	type: Number,
+	reflect: false,
+	attribute: "tabindex"
+})], UUIInputElement.prototype, "tabIndex", void 0);
+__decorate([query("#input")], UUIInputElement.prototype, "_input", void 0);
+//#endregion
+export { UUIInputElement };
+
+//# sourceMappingURL=input.element.js.map

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

@@ -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      <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        overflow: hidden;\n\n        --uui-input-padding: 1px var(--uui-size-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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"}
+{"version":3,"file":"input.element.js","names":["#onKeyDown"],"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        overflow: hidden;\n\n        --uui-input-padding: 1px var(--uui-size-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: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          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"],"mappings":"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"}

package/dist/components/input/input.js

@@ -1,10 +1,9 @@
 import { defineElement } from "../../internal/registration/index.js";
-import { UUIInputElement } from "./input.element.js";
 import { UUIInputEvent } from "./UUIInputEvent.js";
+import { UUIInputElement } from "./input.element.js";
+//#region src/components/input/input.ts
 defineElement("uui-input", UUIInputElement);
-export {
-  UUIInputElement,
-  UUIInputEvent,
-  UUIInputElement as default
-};
-//# sourceMappingURL=input.js.map
+//#endregion
+export { UUIInputElement, UUIInputEvent };
+
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../src/components/input/input.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIInputElement } from './input.element.js';\n\ndefineElement('uui-input', UUIInputElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-input': UUIInputElement;\n  }\n}\n\nexport * from './input.element.js';\nexport * from './UUIInputEvent.js';\nexport { UUIInputElement as default } from './input.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,aAAa,eAAe;"}
+{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input/input.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIInputElement } from './input.element.js';\n\ndefineElement('uui-input', UUIInputElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-input': UUIInputElement;\n  }\n}\n\nexport * from './input.element.js';\nexport * from './UUIInputEvent.js';\n"],"mappings":";;;;AAGA,cAAc,aAAa,eAAe"}

package/dist/components/input-file/input-file.d.ts

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './input-file.element.js';
-export { UUIInputFileElement as default } from './input-file.element.js';