@felleslosninger/minid-elements 0.0.109 → 0.0.111

package/dist/components/checkbox.component.d.ts

@@ -39,20 +39,6 @@ export declare class MinidCheckbox extends MinidCheckbox_base {
      * Removes focus from the checkbox.
      */
     blur(): void;
-    /** Gets the validity state object */
-    /**
-     *  Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-     */
-    checkValidity(): boolean;
-    /**
-     *  Checks for validity and shows the browser's validation message if the control is invalid.
-     */
-    reportValidity(): boolean;
-    /**
-     * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
-     * the custom validation message, call this method with an empty string.
-     */
-    setCustomValidity(message: string): void;
     handleStateChange(): void;
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/components/checkbox.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,0BAA0B,CAAC;AAMlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAED;;GAEG;AAEH,qBACa,aAAc,SAAQ,kBAAoC;IAErE,OAAO,CAAC,KAAK,CAAoB;IAEjC;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAQ;IAGb,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAE/B;IAED,qBAAqB,IAAI,OAAO;IAIhC,IAAI,gBAAgB,qBAEnB;IAED,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,KAAK;IAIL;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B;;OAEG;IACH,IAAI;IAIJ,qCAAqC;IAErC;;OAEG;IACH,aAAa;IAIb;;OAEG;IACH,cAAc;IAId;;;OAGG;IACH,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAKjC,iBAAiB;IAKR,MAAM;CA8ChB"}
+{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,0BAA0B,CAAC;AAMlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAED;;GAEG;AAEH,qBACa,aAAc,SAAQ,kBAAoC;IAErE,OAAO,CAAC,KAAK,CAAoB;IAEjC;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAQ;IAGb,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAE/B;IAED,qBAAqB,IAAI,OAAO;IAIhC,IAAI,gBAAgB,qBAEnB;IAED,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,KAAK;IAIL;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B;;OAEG;IACH,IAAI;IAKJ,iBAAiB;IAKR,MAAM;CA8ChB"}

package/dist/components/checkbox.js

@@ -60,26 +60,6 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
   blur() {
     this.input.blur();
   }
-  /** Gets the validity state object */
-  /**
-   *  Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   */
-  checkValidity() {
-    return this.input.checkValidity();
-  }
-  /**
-   *  Checks for validity and shows the browser's validation message if the control is invalid.
-   */
-  reportValidity() {
-    return this.input.reportValidity();
-  }
-  /**
-   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
-   * the custom validation message, call this method with an empty string.
-   */
-  setCustomValidity(message) {
-    this.input.setCustomValidity(message);
-  }
   handleStateChange() {
     this.setValue(this.value);
   }
@@ -110,7 +90,7 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
             ?disabled=${this.disabled}
             ?checked=${this.checked}
             ?readonly=${this.readonly}
-            .required=${this.required}
+            ?required=${this.required}
             @click=${this.handleClick}
           />
           ${this.checked ? html`<mid-icon

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from '../mixins/validators.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n/**\n *\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Gets the validity state object */\n\n  /**\n   *  Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n   */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /**\n   *  Checks for validity and shows the browser's validation message if the control is invalid.\n   */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n   * the custom validation message, call this method with an empty string.\n   */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n    return html`\n      <label\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'cursor-not-allowed': this.disabled,\n        })} grid grid-cols-[auto_1fr] gap-2\"\n      >\n        <span\n          class=\"${classMap({\n            'bg-accent-base': !this.readonly && this.checked && !this.invalid,\n            'bg-danger-base': !this.readonly && this.checked && this.invalid,\n            'border-accent-base':\n              !this.readonly && this.checked && !this.invalid,\n            'border-neutral': !this.readonly && !this.checked && !this.invalid,\n            'border-danger-base': !this.readonly && this.invalid,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n          })} focus-within:focus-ring inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-2\"\n        >\n          <input\n            class=\"pointer-events-none appearance-none\"\n            type=\"checkbox\"\n            value=${ifDefined(this.value)}\n            .checked=${live(this.checked)}\n            ?disabled=${this.disabled}\n            ?checked=${this.checked}\n            ?readonly=${this.readonly}\n            .required=${this.required}\n            @click=${this.handleClick}\n          />\n          ${this.checked\n            ? html`<mid-icon\n                class=\"${classMap({\n                  'text-accent-base-contrast': this.checked && !this.readonly,\n                })} size-6 shrink-0 scale-125\"\n                name=\"checkmark\"\n              ></mid-icon>`\n            : ''}\n        </span>\n        <div part=\"label\">\n          <slot></slot>\n        </div>\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from '../mixins/validators.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n/**\n *\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n    return html`\n      <label\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'cursor-not-allowed': this.disabled,\n        })} grid grid-cols-[auto_1fr] gap-2\"\n      >\n        <span\n          class=\"${classMap({\n            'bg-accent-base': !this.readonly && this.checked && !this.invalid,\n            'bg-danger-base': !this.readonly && this.checked && this.invalid,\n            'border-accent-base':\n              !this.readonly && this.checked && !this.invalid,\n            'border-neutral': !this.readonly && !this.checked && !this.invalid,\n            'border-danger-base': !this.readonly && this.invalid,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n          })} focus-within:focus-ring inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-2\"\n        >\n          <input\n            class=\"pointer-events-none appearance-none\"\n            type=\"checkbox\"\n            value=${ifDefined(this.value)}\n            .checked=${live(this.checked)}\n            ?disabled=${this.disabled}\n            ?checked=${this.checked}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            @click=${this.handleClick}\n          />\n          ${this.checked\n            ? html`<mid-icon\n                class=\"${classMap({\n                  'text-accent-base-contrast': this.checked && !this.readonly,\n                })} size-6 shrink-0 scale-125\"\n                name=\"checkmark\"\n              ></mid-icon>`\n            : ''}\n        </span>\n        <div part=\"label\">\n          <slot></slot>\n        </div>\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBO,IAAM,gBAAN,cAA4B,iBAAiB,OAAO,UAAU,CAAC,EAAE;AAAA,EAAjE,cAAA;AAAA,UAAA,GAAA,SAAA;AAQE,SAAA,OAAA;AAMC,SAAA,QAAA;AAGE,SAAA,UAAA;AAGC,SAAA,WAAA;AAGA,SAAA,WAAA;AAGD,SAAA,UAAA;AAGC,SAAA,WAAA;AAAA,EAAA;AAAA,EAEX,WAAW,wBAAwB;AACjC,WAAO,CAAC,iBAAiB;AAAA,EAAA;AAAA,EAG3B,wBAAiC;AAC/B,WAAO,KAAK;AAAA,EAAA;AAAA,EAGd,IAAI,mBAAmB;AACrB,WAAO,KAAK;AAAA,EAAA;AAAA,EAGN,cAAc;AACf,SAAA,UAAU,CAAC,KAAK;AAErB,SAAK,cAAc,IAAI,MAAM,YAAY,CAAC;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAM5C,QAAQ;AACN,SAAK,MAAM,MAAM;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAMnB,MAAM,SAAwB;AACvB,SAAA,MAAM,MAAM,OAAO;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAM1B,OAAO;AACL,SAAK,MAAM,KAAK;AAAA,EAAA;AAAA,EAIlB,oBAAoB;AAEb,SAAA,SAAS,KAAK,KAAK;AAAA,EAAA;AAAA,EAGjB,SAAS;AACT,WAAA;AAAA;AAAA,iBAEM,SAAS;AAAA,MAChB,oBAAoB,KAAK;AAAA,MACzB,sBAAsB,KAAK;AAAA,IAAA,CAC5B,CAAC;AAAA;AAAA;AAAA,mBAGS,SAAS;AAAA,MAChB,kBAAkB,CAAC,KAAK,YAAY,KAAK,WAAW,CAAC,KAAK;AAAA,MAC1D,kBAAkB,CAAC,KAAK,YAAY,KAAK,WAAW,KAAK;AAAA,MACzD,sBACE,CAAC,KAAK,YAAY,KAAK,WAAW,CAAC,KAAK;AAAA,MAC1C,kBAAkB,CAAC,KAAK,YAAY,CAAC,KAAK,WAAW,CAAC,KAAK;AAAA,MAC3D,sBAAsB,CAAC,KAAK,YAAY,KAAK;AAAA,MAC7C,yBAAyB,KAAK;AAAA,MAC9B,6BAA6B,KAAK;AAAA,IAAA,CACnC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKQ,UAAU,KAAK,KAAK,CAAC;AAAA,uBAClB,KAAK,KAAK,OAAO,CAAC;AAAA,wBACjB,KAAK,QAAQ;AAAA,uBACd,KAAK,OAAO;AAAA,wBACX,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,qBAChB,KAAK,WAAW;AAAA;AAAA,YAEzB,KAAK,UACH;AAAA,yBACW,SAAS;AAAA,MAChB,6BAA6B,KAAK,WAAW,CAAC,KAAK;AAAA,IAAA,CACpD,CAAC;AAAA;AAAA,8BAGJ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQhB;AAxHU,gBAAA;AAAA,EADP,MAAM,wBAAwB;AAAA,GADpB,cAEH,WAAA,SAAA,CAAA;AAMR,gBAAA;AAAA,EADC,SAAS;AAAA,GAPC,cAQX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAbC,cAcX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAhBhB,cAiBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAnBhB,cAoBX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAtBhB,cAuBX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAzBhB,cA0BX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAM,CAAA;AAAA,GA5B/B,cA6BX,WAAA,YAAA,CAAA;AA0CA,gBAAA;AAAA,EADC,MAAM,CAAC,WAAW,OAAO,CAAC;AAAA,GAtEhB,cAuEX,WAAA,qBAAA,CAAA;AAvEW,gBAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,aAAA;"}

package/dist/components/code-input-old.component.d.ts

@@ -0,0 +1,55 @@
+import { LitElement, PropertyValues } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mid-code-input-old': MinidCodeInputOld;
+    }
+}
+declare const MinidCodeInputOld_base: typeof LitElement & import('../types/mixin-constructor').Constructor<import('../mixins/form-controller.mixin').ConstraintsValidationMixinInterface>;
+export declare class MinidCodeInputOld extends MinidCodeInputOld_base {
+    private readonly caretColor;
+    private readonly caretHighlightColor;
+    private readonly inputId;
+    inputRef: Ref<HTMLInputElement>;
+    value: string;
+    label: string;
+    /**
+     * Visually hides `label` (still available for screen readers)
+     */
+    hidelabel: boolean;
+    required: boolean;
+    disabled: boolean;
+    inputmode: string;
+    /**
+     * Display custom error message, and force invalid state
+     */
+    invalidmessage: string;
+    /**
+     * The length of the code input
+     */
+    length: number;
+    fontsize: string;
+    renderError: boolean;
+    localErrorNode: Node | null;
+    constructor();
+    connectedCallback(): void;
+    _whenSettled(): Promise<void>;
+    disconnectedCallback(): void;
+    private calcInputStyle;
+    private autoFillEventHandler;
+    get selectionEnd(): number | null | undefined;
+    private handleFocusOut;
+    private handleFocusIn;
+    private handleClick;
+    private handleKeydown;
+    private handleChange;
+    private handleSlotchange;
+    private findErrorMessageNode;
+    firstUpdated(_changedProperties: PropertyValues): void;
+    updated(_changedProperties: PropertyValues): void;
+    focus(options?: FocusOptions): void;
+    setCustomValidity(error: string): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=code-input-old.component.d.ts.map

package/dist/components/code-input-old.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-input-old.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input-old.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjE,OAAO,EAAkB,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAMjE,OAAO,uBAAuB,CAAC;AAE/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF;;AAoDD,qBACa,iBAAkB,SAAQ,sBAEtC;IACC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAyC;IACpE,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAwC;IAC5E,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsC;IAEvD,QAAQ,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAe;IAGrD,KAAK,SAAM;IAGX,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,SAAS,SAAa;IAEtB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,SAAc;IAGtB,WAAW,UAAS;IAGpB,cAAc,EAAE,IAAI,GAAG,IAAI,CAAQ;;IAa1B,iBAAiB;IAKpB,YAAY;IAST,oBAAoB;IAQ7B,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,oBAAoB;IAK5B,IAAI,YAAY,8BAEf;IAED,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,aAAa,CAMnB;IAEF,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,oBAAoB;IAc5B,YAAY,CAAC,kBAAkB,EAAE,cAAc;IAK/C,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAmBjD,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAItB,MAAM;CA6ChB"}

package/dist/components/code-input-old.js

@@ -0,0 +1,313 @@
+import { css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { classMap } from "lit/directives/class-map.js";
+import { live } from "lit/directives/live.js";
+import { webOtpApiClose, webOtpApiInit } from "../utilities/web-otp-api.js";
+import { styled } from "../mixins/tailwind.mixin.js";
+import { ConstraintsValidationMixin } from "../mixins/form-controller.mixin.js";
+import "./icon/icon.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 styles = [
+  css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      container: otc / inline-size;
+      text-align: left;
+      --otc-background: white;
+      --otc-error-background: white;
+      --otc-length: 5;
+      --otc-width: 11.45cqw;
+    }
+
+    input {
+      all: unset;
+      background: var(--otc-background);
+      caret-color: transparent;
+      clip-path: inset(0% 1ch 0% 0%);
+      font-family: ui-monospace, monospace;
+      font-size: var(--otc-width);
+      inline-size: calc(var(--otc-length) * 3ch);
+      letter-spacing: 2ch;
+      padding-block: 0.25ch;
+      padding-inline-start: calc(0.5ch * 1.5);
+      flex-grow: 1;
+
+      &:focus-visible:focus {
+        outline-style: none;
+      }
+
+      &:-webkit-autofill {
+        animation-name: onAutoFillStart;
+      }
+    }
+
+    @keyframes onAutoFillStart {
+      from {
+      }
+      to {
+      }
+    }
+
+    input.error {
+      background: var(--otc-error-background);
+    }
+  `
+];
+let nextUniqueId = 0;
+let MinidCodeInputOld = class extends ConstraintsValidationMixin(
+  styled(LitElement, styles)
+) {
+  constructor() {
+    super();
+    this.caretColor = "var(--color-neutral-surface-tinted)";
+    this.caretHighlightColor = "var(--color-accent-surface-active)";
+    this.inputId = `mid-code-input-${nextUniqueId++}`;
+    this.inputRef = createRef();
+    this.value = "";
+    this.label = "";
+    this.hidelabel = false;
+    this.required = false;
+    this.disabled = false;
+    this.inputmode = "numeric";
+    this.invalidmessage = "";
+    this.length = 5;
+    this.fontsize = "11.45cqw";
+    this.renderError = false;
+    this.localErrorNode = null;
+    this.handleFocusIn = () => {
+      const currentChar = this.value.length + 1;
+      this.inputRef.value?.style.setProperty(
+        `--char-${currentChar}-color`,
+        this.caretHighlightColor
+      );
+    };
+    this.handleChange = (e) => {
+      this.value = e.target.value;
+      this.dispatchEvent(
+        new Event("input", {
+          bubbles: true,
+          cancelable: true,
+          composed: true
+        })
+      );
+    };
+    this.addEventListener("invalid", (e) => {
+      this.renderError = true;
+      if (this.localErrorNode) {
+        e.preventDefault();
+        this.localErrorNode.textContent = this.validationMessage || "Error";
+      }
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._whenSettled();
+  }
+  async _whenSettled() {
+    await this.updateComplete;
+    this.inputRef.value?.addEventListener(
+      "animationstart",
+      this.autoFillEventHandler.bind(this)
+    );
+    this.calcInputStyle();
+  }
+  disconnectedCallback() {
+    webOtpApiClose();
+    this.inputRef.value?.removeEventListener(
+      "animationstart",
+      this.autoFillEventHandler.bind(this)
+    );
+  }
+  calcInputStyle() {
+    const inputStyle = this.inputRef.value?.style;
+    inputStyle?.setProperty("--otc-length", this.length.toString());
+    let gradientStyle = "linear-gradient(90deg, ";
+    for (let i = 0; i < this.length; i++) {
+      gradientStyle += `var(--char-${i + 1}-color) ${i ? i * 3 + "ch" : "0"} ${i * 3 + 2.5}ch, transparent ${i * 3 + 2.5}ch ${i * 3 + 3}ch${i + 1 < this.length ? ", " : ""}`;
+    }
+    gradientStyle += `) no-repeat 0 0 / ${this.length * 3}ch 100%`;
+    inputStyle?.setProperty("--otc-background", gradientStyle);
+    const gradientErrorStyle = `linear-gradient(90deg, var(--color-danger-surface-active) calc(${this.length}ch / 2), transparent 0) 0 0 / 3ch 100%`;
+    inputStyle?.setProperty("--otc-error-background", gradientErrorStyle);
+    inputStyle?.setProperty("--otc-width", this.fontsize);
+  }
+  autoFillEventHandler(e) {
+    e.animationName === "onAutoFillStart" && (this.value = this.inputRef.value.value);
+  }
+  get selectionEnd() {
+    return this.inputRef.value?.selectionEnd;
+  }
+  handleFocusOut() {
+    for (let i = 0; i < this.length; i++) {
+      this.inputRef.value?.style.setProperty(
+        `--char-${i + 1}-color`,
+        this.caretColor
+      );
+    }
+  }
+  handleClick() {
+    this.value = this.value.substring(0, this.selectionEnd || 0);
+    this.renderError = false;
+    this.setCustomValidity("");
+    if (this.localErrorNode) {
+      this.localErrorNode.textContent = "";
+    }
+    this.setFormValue(this.value);
+    this.setValidity({});
+  }
+  handleKeydown(event) {
+    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (event.key === "Enter" && !hasModifier) {
+      setTimeout(() => {
+        if (!event.defaultPrevented && !event.isComposing) {
+          this.internals.form?.requestSubmit();
+        }
+      });
+    }
+  }
+  handleSlotchange(e) {
+    const slot = e.target;
+    const childNodes = slot.assignedNodes({ flatten: true });
+    this.localErrorNode = this.findErrorMessageNode(childNodes);
+    if (this.localErrorNode && this.invalidmessage) {
+      this.renderError = true;
+      this.localErrorNode.textContent = this.invalidmessage;
+      this.setValidity({});
+    }
+  }
+  findErrorMessageNode(nodes) {
+    for (const node of nodes) {
+      if (node instanceof Element && node.classList.contains("error-message")) {
+        return node;
+      }
+      const childNodesArray = Array.from(node.childNodes);
+      const foundNode = this.findErrorMessageNode(childNodesArray);
+      if (foundNode) {
+        return foundNode;
+      }
+    }
+    return null;
+  }
+  firstUpdated(_changedProperties) {
+    this.focus();
+    webOtpApiInit(this.renderRoot);
+  }
+  updated(_changedProperties) {
+    for (let i = 0; i < this.length; i++) {
+      const color = i === this.value.length ? this.caretHighlightColor : this.caretColor;
+      this.inputRef.value?.style.setProperty(`--char-${i + 1}-color`, color);
+    }
+    if (_changedProperties.has("_forcedErrorMessage")) {
+      this.setCustomValidity(this.invalidmessage);
+    }
+    this.setFormValue(this.value);
+    this.setValidity(
+      this.inputRef.value.validity,
+      this.inputRef.value.validationMessage,
+      this.inputRef.value
+    );
+  }
+  focus(options) {
+    const notMobile = !window.matchMedia("only screen and (max-width: 768px)").matches;
+    notMobile && this.inputRef.value?.focus(options);
+  }
+  setCustomValidity(error) {
+    this.inputRef.value?.setCustomValidity(error);
+  }
+  render() {
+    return html`
+      <label
+        class="${classMap({
+      "sr-only": this.hidelabel,
+      "mb-2": !!this.label
+    })} font-medium"
+        for="${this.inputId}"
+        >${this.label}
+      </label>
+      <input
+        ${ref(this.inputRef)}
+        id=${this.inputId}
+        .value="${live(this.value)}"
+        class="${classMap({
+      error: this.invalidmessage
+    })}"
+        autocomplete="${"one-time-code"}"
+        inputmode="${this.inputmode}"
+        @input="${this.handleChange}"
+        @change="${this.handleChange}"
+        @focusout="${this.handleFocusOut}"
+        @focusin="${this.handleFocusIn}"
+        @keydown="${this.handleKeydown}"
+        @click="${this.handleClick}"
+        minlength="${this.length}"
+        maxlength="${this.length}"
+        ?disabled="${this.disabled}"
+        ?required="${this.required}"
+      />
+      <slot name="error-message" @slotchange=${this.handleSlotchange}>
+        <div
+          class="text-danger-subtle mt-2 flex gap-1"
+          aria-live="polite"
+          ?hidden=${!this.invalidmessage}
+        >
+          <mid-icon
+            name="xmark-octagon-fill"
+            class="mt-1 min-h-5 min-w-5"
+          ></mid-icon>
+          ${this.invalidmessage}
+        </div>
+      </slot>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: String, reflect: true })
+], MinidCodeInputOld.prototype, "value", 2);
+__decorateClass([
+  property()
+], MinidCodeInputOld.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidCodeInputOld.prototype, "hidelabel", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidCodeInputOld.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidCodeInputOld.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String })
+], MinidCodeInputOld.prototype, "inputmode", 2);
+__decorateClass([
+  property()
+], MinidCodeInputOld.prototype, "invalidmessage", 2);
+__decorateClass([
+  property({ type: Number })
+], MinidCodeInputOld.prototype, "length", 2);
+__decorateClass([
+  property()
+], MinidCodeInputOld.prototype, "fontsize", 2);
+__decorateClass([
+  state()
+], MinidCodeInputOld.prototype, "renderError", 2);
+__decorateClass([
+  state()
+], MinidCodeInputOld.prototype, "localErrorNode", 2);
+MinidCodeInputOld = __decorateClass([
+  customElement("mid-code-input-old")
+], MinidCodeInputOld);
+export {
+  MinidCodeInputOld
+};
+//# sourceMappingURL=code-input-old.js.map

package/dist/components/code-input-old.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-input-old.js","sources":["../../src/components/code-input-old.component.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { webOtpApiClose, webOtpApiInit } from '../utilities/web-otp-api';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { ConstraintsValidationMixin } from '../mixins/form-controller.mixin';\nimport './icon/icon.component';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input-old': MinidCodeInputOld;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      container: otc / inline-size;\n      text-align: left;\n      --otc-background: white;\n      --otc-error-background: white;\n      --otc-length: 5;\n      --otc-width: 11.45cqw;\n    }\n\n    input {\n      all: unset;\n      background: var(--otc-background);\n      caret-color: transparent;\n      clip-path: inset(0% 1ch 0% 0%);\n      font-family: ui-monospace, monospace;\n      font-size: var(--otc-width);\n      inline-size: calc(var(--otc-length) * 3ch);\n      letter-spacing: 2ch;\n      padding-block: 0.25ch;\n      padding-inline-start: calc(0.5ch * 1.5);\n      flex-grow: 1;\n\n      &:focus-visible:focus {\n        outline-style: none;\n      }\n\n      &:-webkit-autofill {\n        animation-name: onAutoFillStart;\n      }\n    }\n\n    @keyframes onAutoFillStart {\n      from {\n      }\n      to {\n      }\n    }\n\n    input.error {\n      background: var(--otc-error-background);\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n@customElement('mid-code-input-old')\nexport class MinidCodeInputOld extends ConstraintsValidationMixin(\n  styled(LitElement, styles)\n) {\n  private readonly caretColor = 'var(--color-neutral-surface-tinted)';\n  private readonly caretHighlightColor = 'var(--color-accent-surface-active)';\n  private readonly inputId = `mid-code-input-${nextUniqueId++}`;\n\n  public inputRef: Ref<HTMLInputElement> = createRef();\n\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  @property({ type: Boolean })\n  required = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  inputmode = 'numeric';\n\n  /**\n   * Display custom error message, and force invalid state\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * The length of the code input\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property()\n  fontsize = '11.45cqw';\n\n  @state()\n  renderError = false;\n\n  @state()\n  localErrorNode: Node | null = null;\n\n  constructor() {\n    super();\n    this.addEventListener('invalid', (e) => {\n      this.renderError = true;\n      if (this.localErrorNode) {\n        e.preventDefault();\n        this.localErrorNode.textContent = this.validationMessage || 'Error';\n      }\n    });\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._whenSettled();\n  }\n\n  async _whenSettled() {\n    await this.updateComplete;\n    this.inputRef.value?.addEventListener(\n      'animationstart',\n      this.autoFillEventHandler.bind(this)\n    );\n    this.calcInputStyle();\n  }\n\n  override disconnectedCallback() {\n    webOtpApiClose();\n    this.inputRef.value?.removeEventListener(\n      'animationstart',\n      this.autoFillEventHandler.bind(this)\n    );\n  }\n\n  private calcInputStyle() {\n    const inputStyle = this.inputRef.value?.style;\n\n    inputStyle?.setProperty('--otc-length', this.length.toString());\n\n    let gradientStyle = 'linear-gradient(90deg, ';\n    for (let i = 0; i < this.length; i++) {\n      gradientStyle += `var(--char-${i + 1}-color) ${i ? i * 3 + 'ch' : '0'} ${i * 3 + 2.5}ch, transparent ${i * 3 + 2.5}ch ${i * 3 + 3}ch${i + 1 < this.length ? ', ' : ''}`;\n    }\n    gradientStyle += `) no-repeat 0 0 / ${this.length * 3}ch 100%`;\n    inputStyle?.setProperty('--otc-background', gradientStyle);\n\n    const gradientErrorStyle = `linear-gradient(90deg, var(--color-danger-surface-active) calc(${this.length}ch / 2), transparent 0) 0 0 / 3ch 100%`;\n    inputStyle?.setProperty('--otc-error-background', gradientErrorStyle);\n\n    inputStyle?.setProperty('--otc-width', this.fontsize);\n  }\n\n  private autoFillEventHandler(e: AnimationEvent) {\n    e.animationName === 'onAutoFillStart' &&\n      (this.value = (this.inputRef.value as HTMLInputElement).value);\n  }\n\n  get selectionEnd() {\n    return this.inputRef.value?.selectionEnd;\n  }\n\n  private handleFocusOut() {\n    for (let i = 0; i < this.length; i++) {\n      this.inputRef.value?.style.setProperty(\n        `--char-${i + 1}-color`,\n        this.caretColor\n      );\n    }\n  }\n\n  private handleFocusIn = () => {\n    const currentChar = this.value.length + 1;\n    this.inputRef.value?.style.setProperty(\n      `--char-${currentChar}-color`,\n      this.caretHighlightColor\n    );\n  };\n\n  private handleClick() {\n    this.value = this.value.substring(0, this.selectionEnd || 0);\n\n    this.renderError = false;\n    this.setCustomValidity('');\n    if (this.localErrorNode) {\n      this.localErrorNode.textContent = '';\n    }\n\n    this.setFormValue(this.value);\n    this.setValidity({} as ValidityState);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.internals.form?.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleChange = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n      })\n    );\n  };\n\n  private handleSlotchange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const childNodes = slot.assignedNodes({ flatten: true });\n\n    this.localErrorNode = this.findErrorMessageNode(childNodes);\n    if (this.localErrorNode && this.invalidmessage) {\n      // display if slot set, and error override in effect\n      this.renderError = true;\n      this.localErrorNode.textContent = this.invalidmessage;\n      this.setValidity({} as ValidityState); // cancel built-in visual feedback\n    }\n  }\n\n  private findErrorMessageNode(nodes: Node[]): Node | null {\n    for (const node of nodes) {\n      if (node instanceof Element && node.classList.contains('error-message')) {\n        return node;\n      }\n      const childNodesArray = Array.from(node.childNodes);\n      const foundNode = this.findErrorMessageNode(childNodesArray);\n      if (foundNode) {\n        return foundNode;\n      }\n    }\n    return null;\n  }\n\n  firstUpdated(_changedProperties: PropertyValues) {\n    this.focus();\n    webOtpApiInit(this.renderRoot);\n  }\n\n  updated(_changedProperties: PropertyValues): void {\n    for (let i = 0; i < this.length; i++) {\n      const color =\n        i === this.value.length ? this.caretHighlightColor : this.caretColor;\n      this.inputRef.value?.style.setProperty(`--char-${i + 1}-color`, color);\n    }\n\n    if (_changedProperties.has('_forcedErrorMessage')) {\n      this.setCustomValidity(this.invalidmessage);\n    }\n\n    this.setFormValue(this.value);\n    this.setValidity(\n      this.inputRef.value!.validity,\n      this.inputRef.value!.validationMessage,\n      this.inputRef!.value\n    );\n  }\n\n  focus(options?: FocusOptions) {\n    const notMobile = !window.matchMedia('only screen and (max-width: 768px)')\n      .matches;\n    notMobile && this.inputRef.value?.focus(options);\n  }\n\n  setCustomValidity(error: string) {\n    this.inputRef!.value?.setCustomValidity(error);\n  }\n\n  override render() {\n    return html`\n      <label\n        class=\"${classMap({\n          'sr-only': this.hidelabel,\n          'mb-2': !!this.label,\n        })} font-medium\"\n        for=\"${this.inputId}\"\n        >${this.label}\n      </label>\n      <input\n        ${ref(this.inputRef)}\n        id=${this.inputId}\n        .value=\"${live(this.value)}\"\n        class=\"${classMap({\n          error: this.invalidmessage,\n        })}\"\n        autocomplete=\"${'one-time-code' as any}\"\n        inputmode=\"${this.inputmode}\"\n        @input=\"${this.handleChange}\"\n        @change=\"${this.handleChange}\"\n        @focusout=\"${this.handleFocusOut}\"\n        @focusin=\"${this.handleFocusIn}\"\n        @keydown=\"${this.handleKeydown}\"\n        @click=\"${this.handleClick}\"\n        minlength=\"${this.length}\"\n        maxlength=\"${this.length}\"\n        ?disabled=\"${this.disabled}\"\n        ?required=\"${this.required}\"\n      />\n      <slot name=\"error-message\" @slotchange=${this.handleSlotchange}>\n        <div\n          class=\"text-danger-subtle mt-2 flex gap-1\"\n          aria-live=\"polite\"\n          ?hidden=${!this.invalidmessage}\n        >\n          <mid-icon\n            name=\"xmark-octagon-fill\"\n            class=\"mt-1 min-h-5 min-w-5\"\n          ></mid-icon>\n          ${this.invalidmessage}\n        </div>\n      </slot>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/code-input.component.d.ts

@@ -1,54 +1,80 @@
 import { LitElement, PropertyValues } from 'lit';
-import { Ref } from 'lit/directives/ref.js';
 declare global {
     interface HTMLElementTagNameMap {
         'mid-code-input': MinidCodeInput;
     }
 }
-declare const MinidCodeInput_base: typeof LitElement & import('../types/mixin-constructor').Constructor<import('../mixins/form-controller.mixin').ConstraintsValidationMixinInterface>;
+declare const MinidCodeInput_base: import('../types/mixin-constructor.ts').Constructor<import('../types/form-control.ts').FormControlInterface> & typeof LitElement;
+/**
+ *
+ * @event mid-change - Emitted when a change to the input value is comitted by the user
+ * @event mid-input - Emitted when the input element recieves input
+ * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden
+ * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown
+ *
+ * @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.
+ *
+ * @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.
+ *
+ */
 export declare class MinidCodeInput extends MinidCodeInput_base {
-    private readonly caretColor;
-    private readonly caretHighlightColor;
-    private readonly inputId;
-    inputRef: Ref<HTMLInputElement>;
+    #private;
+    private readonly hasSlotControler;
+    private readonly labelId;
+    private inputElements;
     value: string;
     label: string;
+    type: 'number' | 'text';
     /**
-     * Visually hides `label` (still available for screen readers)
+     * For displaying appropriate virtual keyboard
      */
-    hidelabel: boolean;
-    required: boolean;
+    inputmode: 'numeric' | 'text';
+    /**
+     * Adjusts the font-size of the code inputs
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Number of input characters or digits
+     */
+    length: number;
     disabled: boolean;
-    inputmode: string;
     /**
-     * Display custom error message, and force invalid state
+     * Focuses the first input element on page load
+     */
+    autofocus: boolean;
+    /**
+     *  The minimum length of input that will be considered valid.
+     */
+    minlength?: number;
+    /**
+     * Error message to display when the input is invalid, also activates invalid styling
      */
     invalidmessage: string;
     /**
-     * The length of the code input
+     * Visually hides `label` (still available for screen readers)
      */
-    length: number;
-    fontsize: string;
-    renderError: boolean;
-    localErrorNode: Node | null;
-    constructor();
-    connectedCallback(): void;
-    _whenSettled(): Promise<void>;
-    disconnectedCallback(): void;
-    private calcInputStyle;
-    private autoFillEventHandler;
-    get selectionEnd(): number | null | undefined;
-    private handleFocusOut;
-    private handleFocusIn;
-    private handleClick;
+    hidelabel: boolean;
+    /**
+     * Makes the input required
+     */
+    required: boolean;
+    /**
+     * A regular expression pattern to validate input against.
+     */
+    pattern?: string;
+    private internalValues;
+    static get formControlValidators(): import('../types/validator.type.ts').Validator[];
+    get validationTarget(): HTMLInputElement | null;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    private handleFocus;
+    private handleBlur;
     private handleKeydown;
-    private handleChange;
-    private handleSlotchange;
-    private findErrorMessageNode;
-    firstUpdated(_changedProperties: PropertyValues): void;
-    updated(_changedProperties: PropertyValues): void;
-    focus(options?: FocusOptions): void;
-    setCustomValidity(error: string): void;
+    private handleInput;
+    private handlePaste;
+    private updateValueAndEmit;
+    private valueVisualUpdate;
+    handleLengthChange(): void;
+    handleValueChange(): void;
     render(): import('lit-html').TemplateResult<1>;
 }
 export {};

package/dist/components/code-input.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjE,OAAO,EAAkB,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAMjE,OAAO,uBAAuB,CAAC;AAE/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAoDD,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAyC;IACpE,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAwC;IAC5E,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsC;IAEvD,QAAQ,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAe;IAGrD,KAAK,SAAM;IAGX,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,SAAS,SAAa;IAEtB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,SAAc;IAGtB,WAAW,UAAS;IAGpB,cAAc,EAAE,IAAI,GAAG,IAAI,CAAQ;;IAa1B,iBAAiB;IAKpB,YAAY;IAST,oBAAoB;IAQ7B,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,oBAAoB;IAK5B,IAAI,YAAY,8BAEf;IAED,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,aAAa,CAMnB;IAEF,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,oBAAoB;IAc5B,YAAY,CAAC,kBAAkB,EAAE,cAAc;IAK/C,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAmBjD,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAItB,MAAM;CA6ChB"}
+{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAqBD;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,mBAEnC;;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IAEzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IAGpE,OAAO,CAAC,aAAa,CAAgC;IAGrD,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAU;IAEjC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAU;IAEvC;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,CAAC,cAAc,CAAuC;IAE7D,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,4BAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIhE,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,kBAAkB;IAuB1B,OAAO,CAAC,iBAAiB;IAQzB,kBAAkB;IAMlB,iBAAiB;IAWR,MAAM;CAiEhB"}