@felleslosninger/minid-elements 0.0.130 → 0.0.132

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

@@ -77,9 +77,9 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
     private handleChange;
     private handleKeydown;
     clear(): void;
+    resetFormControl(): void;
     focus(options?: FocusOptions): void;
     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,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AA0FD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IAGpE,OAAO,CAAC,YAAY,CAAoB;IAGxC,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAY;IAEnC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAa;IAE1C;;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,SAAS,CAAS;IAE1B,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,qBAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIhE,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IAiBrB,KAAK;IAIL,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAKnC,kBAAkB;IAOlB,iBAAiB;IAiBR,MAAM;CA8FhB"}
+{"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;;AA0FD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IAGpE,OAAO,CAAC,YAAY,CAAoB;IAGxC,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAY;IAEnC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAa;IAE1C;;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,SAAS,CAAS;IAE1B,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,qBAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIhE,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IAiBrB,KAAK;IAKL,gBAAgB;IAKhB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAKnC,kBAAkB;IAOT,MAAM;CA8FhB"}

package/dist/components/code-input.js

@@ -160,10 +160,16 @@ let MinidCodeInput = class extends FormControlMixin(
     }
     if (this.value !== value) {
       this.value = value;
+      this.setValue(value);
     }
     this.dispatchEvent(
       new Event("mid-input", { bubbles: true, composed: true })
     );
+    if (this.value.length === this.length && this.value.length > 0) {
+      this.dispatchEvent(
+        new Event("mid-complete", { bubbles: true, composed: true })
+      );
+    }
   }
   handleChange() {
     this.dispatchEvent(
@@ -185,6 +191,10 @@ let MinidCodeInput = class extends FormControlMixin(
   }
   clear() {
     this.value = "";
+    this.setValue("");
+  }
+  resetFormControl() {
+    this.clear();
   }
   focus(options) {
     this.inputElement?.focus(options);
@@ -194,20 +204,6 @@ let MinidCodeInput = class extends FormControlMixin(
       this.value = this.value.substring(0, this.length);
     }
   }
-  handleValueChange() {
-    this.setValue(this.value);
-    if (this.inputElement && this.inputElement.value !== this.value) {
-      this.inputElement.value = this.value;
-    }
-    if (this.value.length === this.length && this.value.length > 0) {
-      this.dispatchEvent(
-        new Event("mid-complete", {
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  }
   render() {
     const hasLabelSlot = this.hasSlotControler.test("label");
     const hasLabel = !!this.label || !!hasLabelSlot;
@@ -348,9 +344,6 @@ __decorateClass([
 __decorateClass([
   watch("length")
 ], MinidCodeInput.prototype, "handleLengthChange", 1);
-__decorateClass([
-  watch("value")
-], MinidCodeInput.prototype, "handleValueChange", 1);
 MinidCodeInput = __decorateClass([
   customElement("mid-code-input")
 ], MinidCodeInput);

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

@@ -1 +1 @@
-{"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { HasSlotController } from '../internal/slot.ts';\nimport './icon/icon.component.ts';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators.ts';\nimport { webOtpApiInit } from '../utilities/web-otp-api.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input': MinidCodeInput;\n  }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n  css`\n      :host {\n          display: block;\n      }\n\n      .input-wrapper {\n          position: relative;\n          cursor: text;\n      }\n\n      .character-boxes {\n          display: inline-flex;\n          gap: 0.5rem; /* Corresponds to gap-2 in tailwind */\n      }\n\n      .character-box {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          position: relative;\n      }\n\n      .hidden-input {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          padding: 0;\n          margin: 0;\n          background: transparent;\n          border: none;\n          color: transparent;\n          /* Hide the real caret */\n          caret-color: transparent;\n          /* Make font tiny to avoid visual artifacts */\n          font-size: 1px;\n          /* Allow clicks to pass through to elements underneath */\n          pointer-events: none;\n      }\n\n      .hidden-input:focus {\n          outline: none;\n      }\n\n      .hidden-input:disabled {\n          cursor: not-allowed;\n      }\n\n      /* Fake caret using a CSS animation */\n      @keyframes blink {\n          0%,\n          100% {\n              opacity: 1;\n          }\n          50% {\n              opacity: 0;\n          }\n      }\n\n      .character-box--caret::after {\n          content: '';\n          position: absolute;\n          width: 2px;\n          height: 60%;\n          background-color: var(--color-accent-base, blue);\n          animation: blink 1s step-end infinite;\n      }\n\n      /* Hide placeholder circle when the caret is present */\n      .character-box--caret.character-box--empty {\n          color: transparent;\n      }\n\n      /* Hide increment/decrement buttons on inputs */\n      input[type='number']::-webkit-outer-spin-button,\n      input[type='number']::-webkit-inner-spin-button,\n      input[type='number'] {\n          -webkit-appearance: none;\n          margin: 0;\n          -moz-appearance: textfield !important;\n      }\n  `,\n];\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-complete - Emitted when all characters have been entered.\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.\n *\n * @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.\n * @csspart character-boxes - The container for the visual character boxes.\n * @csspart character-box - An individual character box.\n *\n * @method focus - Focuses the input element\n * @method clear - Clears the input\n */\n@customElement('mid-code-input')\nexport class MinidCodeInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n\n  @query('.hidden-input')\n  private inputElement!: HTMLInputElement;\n\n  @property({ reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  @property()\n  type: 'number' | 'text' = 'number';\n\n  /**\n   * For displaying appropriate virtual keyboard\n   */\n  @property()\n  inputmode: 'numeric' | 'text' = 'numeric';\n\n  /**\n   * Adjusts the font-size of the code inputs\n   */\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /**\n   * Number of input characters or digits\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Focuses the first input element on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  @state()\n  private isFocused = false;\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  get validationTarget() {\n    return this.inputElement;\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    webOtpApiInit(this.renderRoot);\n  }\n\n  private handleBoxClick(index: number) {\n    if (this.disabled) {\n      return;\n    }\n\n    // Truncate the value to the clicked position\n    this.value = this.value.substring(0, index);\n\n    // Focus the input to move the caret\n    this.focus();\n  }\n\n  private handleFocus() {\n    this.isFocused = true;\n  }\n\n  private handleBlur() {\n    this.isFocused = false;\n  }\n\n  private handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    const value = input.value.substring(0, this.length);\n\n    // If the browser allowed a value longer than our length (e.g. on type=\"number\"),\n    // we need to truncate the underlying input's value directly to keep it in sync.\n    if (input.value.length > this.length) {\n      input.value = value;\n    }\n\n    // Update the component's public `value` property if it has changed.\n    if (this.value !== value) {\n      this.value = value;\n    }\n\n    this.dispatchEvent(\n      new Event('mid-input', { bubbles: true, composed: true }),\n    );\n  }\n\n  private handleChange() {\n    this.dispatchEvent(\n      new Event('mid-change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    if (event.key === 'Enter' && !hasModifier) {\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      setTimeout(() => {\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.form?.requestSubmit();\n        }\n      });\n    }\n  }\n\n  clear() {\n    this.value = '';\n  }\n\n  focus(options?: FocusOptions): void {\n    this.inputElement?.focus(options);\n  }\n\n  @watch('length')\n  handleLengthChange() {\n    if (this.value.length > this.length) {\n      this.value = this.value.substring(0, this.length);\n    }\n  }\n\n  @watch('value')\n  handleValueChange() {\n    this.setValue(this.value);\n\n    if (this.inputElement && this.inputElement.value !== this.value) {\n      this.inputElement.value = this.value;\n    }\n\n    if (this.value.length === this.length && this.value.length > 0) {\n      this.dispatchEvent(\n        new Event('mid-complete', {\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n\n  override render() {\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n\n    const chars = this.value.split('');\n    const displayValues = Array.from(\n      { length: this.length },\n      (_, i) => chars[i] || '',\n    );\n    const caretIndex = this.disabled ? -1 : this.value.length;\n\n    return html`\n      <label\n        id=\"${this.labelId}\"\n        class=\"${classMap({\n      'sr-only': this.hidelabel || !hasLabel,\n      'opacity-disabled': this.disabled,\n    })} mb-2 block items-center gap-1 font-medium\"\n      >\n        <slot name=\"label\"> ${this.label} </slot>\n      </label>\n      <div\n        part=\"input-container\"\n        class=\"input-wrapper ${classMap({\n      'text-heading-sm': this.size === 'sm',\n      'text-heading-md': this.size === 'md',\n      'text-heading-lg': this.size === 'lg',\n      'opacity-disabled': this.disabled,\n    })}\"\n        @click=${() => this.focus()}\n      >\n        <div part=\"character-boxes\" class=\"character-boxes\">\n          ${displayValues.map((char, index) => {\n      const hasCaret = this.isFocused && index === caretIndex;\n      return html`\n              <div\n                part=\"character-box\"\n                class=\"character-box ${classMap({\n        'border': !this.invalidmessage,\n        'border-2': this.invalidmessage,\n        'border-neutral': !this.invalidmessage,\n        'border-danger': this.invalidmessage,\n        'bg-neutral': !this.invalidmessage,\n        'bg-danger-tinted': this.invalidmessage,\n        'text-neutral-surface-active':\n          !char && !this.invalidmessage,\n        'text-danger-surface-active': !char && this.invalidmessage,\n        'character-box--caret': hasCaret,\n        'character-box--empty': !char,\n        'focus-ring-sm': hasCaret,\n      })} size-9 rounded-md text-center font-mono\"\n                @click=${(e: MouseEvent) => {\n        e.stopPropagation();\n        this.handleBoxClick(index);\n      }}\n              >\n                ${char || '○'}\n              </div>\n            `;\n    })}\n        </div>\n        <input\n          class=\"hidden-input\"\n          .value=\"${live(this.value)}\"\n          id=\"mid-code-input-hidden\"\n          type=\"${this.type}\"\n          aria-labelledby=\"${this.labelId}\"\n          maxlength=\"${this.length}\"\n          ?autofocus=\"${this.autofocus}\"\n          ?disabled=\"${this.disabled}\"\n          ?required=\"${this.required}\"\n          .pattern=\"${this.pattern}\"\n          inputmode=\"${this.inputmode}\"\n          autocomplete=\"one-time-code\"\n          @input=\"${this.handleInput}\"\n          @change=\"${this.handleChange}\"\n          @keydown=\"${this.handleKeydown}\"\n          @focus=\"${this.handleFocus}\"\n          @blur=\"${this.handleBlur}\"\n        />\n      </div>\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    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"code-input.js","sources":["../../src/components/code-input.component.ts"],"sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { HasSlotController } from '../internal/slot.ts';\nimport './icon/icon.component.ts';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators.ts';\nimport { webOtpApiInit } from '../utilities/web-otp-api.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-code-input': MinidCodeInput;\n  }\n}\n\nlet nextUniqueId = 0;\n\nconst styles = [\n  css`\n      :host {\n          display: block;\n      }\n\n      .input-wrapper {\n          position: relative;\n          cursor: text;\n      }\n\n      .character-boxes {\n          display: inline-flex;\n          gap: 0.5rem; /* Corresponds to gap-2 in tailwind */\n      }\n\n      .character-box {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          position: relative;\n      }\n\n      .hidden-input {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          padding: 0;\n          margin: 0;\n          background: transparent;\n          border: none;\n          color: transparent;\n          /* Hide the real caret */\n          caret-color: transparent;\n          /* Make font tiny to avoid visual artifacts */\n          font-size: 1px;\n          /* Allow clicks to pass through to elements underneath */\n          pointer-events: none;\n      }\n\n      .hidden-input:focus {\n          outline: none;\n      }\n\n      .hidden-input:disabled {\n          cursor: not-allowed;\n      }\n\n      /* Fake caret using a CSS animation */\n      @keyframes blink {\n          0%,\n          100% {\n              opacity: 1;\n          }\n          50% {\n              opacity: 0;\n          }\n      }\n\n      .character-box--caret::after {\n          content: '';\n          position: absolute;\n          width: 2px;\n          height: 60%;\n          background-color: var(--color-accent-base, blue);\n          animation: blink 1s step-end infinite;\n      }\n\n      /* Hide placeholder circle when the caret is present */\n      .character-box--caret.character-box--empty {\n          color: transparent;\n      }\n\n      /* Hide increment/decrement buttons on inputs */\n      input[type='number']::-webkit-outer-spin-button,\n      input[type='number']::-webkit-inner-spin-button,\n      input[type='number'] {\n          -webkit-appearance: none;\n          margin: 0;\n          -moz-appearance: textfield !important;\n      }\n  `,\n];\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-complete - Emitted when all characters have been entered.\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.\n *\n * @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.\n * @csspart character-boxes - The container for the visual character boxes.\n * @csspart character-box - An individual character box.\n *\n * @method focus - Focuses the input element\n * @method clear - Clears the input\n */\n@customElement('mid-code-input')\nexport class MinidCodeInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n\n  @query('.hidden-input')\n  private inputElement!: HTMLInputElement;\n\n  @property({ reflect: true })\n  value = '';\n\n  @property()\n  label = '';\n\n  @property()\n  type: 'number' | 'text' = 'number';\n\n  /**\n   * For displaying appropriate virtual keyboard\n   */\n  @property()\n  inputmode: 'numeric' | 'text' = 'numeric';\n\n  /**\n   * Adjusts the font-size of the code inputs\n   */\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /**\n   * Number of input characters or digits\n   */\n  @property({ type: Number })\n  length = 5;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Focuses the first input element on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * Visually hides `label` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  @state()\n  private isFocused = false;\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  get validationTarget() {\n    return this.inputElement;\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    webOtpApiInit(this.renderRoot);\n  }\n\n  private handleBoxClick(index: number) {\n    if (this.disabled) {\n      return;\n    }\n\n    // Truncate the value to the clicked position\n    this.value = this.value.substring(0, index);\n\n    // Focus the input to move the caret\n    this.focus();\n  }\n\n  private handleFocus() {\n    this.isFocused = true;\n  }\n\n  private handleBlur() {\n    this.isFocused = false;\n  }\n\n  private handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    const value = input.value.substring(0, this.length);\n\n    // If the browser allowed a value longer than our length (e.g. on type=\"number\"),\n    // we need to truncate the underlying input's value directly to keep it in sync.\n    if (input.value.length > this.length) {\n      input.value = value;\n    }\n\n    // Update the component's public `value` property if it has changed.\n    if (this.value !== value) {\n      this.value = value;\n      this.setValue(value);\n    }\n\n    this.dispatchEvent(\n      new Event('mid-input', { bubbles: true, composed: true }),\n    );\n\n      if (this.value.length === this.length && this.value.length > 0) {\n        this.dispatchEvent(\n          new Event('mid-complete', { bubbles: true, composed: true }),\n        );\n      }\n\n  }\n\n  private handleChange() {\n    this.dispatchEvent(\n      new Event('mid-change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    if (event.key === 'Enter' && !hasModifier) {\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      setTimeout(() => {\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.form?.requestSubmit();\n        }\n      });\n    }\n  }\n\n  clear() {\n    this.value = '';\n    this.setValue('');\n  }\n\n  resetFormControl() {\n    this.clear();\n  }\n\n\n  focus(options?: FocusOptions): void {\n    this.inputElement?.focus(options);\n  }\n\n  @watch('length')\n  handleLengthChange() {\n    if (this.value.length > this.length) {\n      this.value = this.value.substring(0, this.length);\n    }\n  }\n\n\n  override render() {\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n\n    const chars = this.value.split('');\n    const displayValues = Array.from(\n      { length: this.length },\n      (_, i) => chars[i] || '',\n    );\n    const caretIndex = this.disabled ? -1 : this.value.length;\n\n    return html`\n      <label\n        id=\"${this.labelId}\"\n        class=\"${classMap({\n      'sr-only': this.hidelabel || !hasLabel,\n      'opacity-disabled': this.disabled,\n    })} mb-2 block items-center gap-1 font-medium\"\n      >\n        <slot name=\"label\"> ${this.label} </slot>\n      </label>\n      <div\n        part=\"input-container\"\n        class=\"input-wrapper ${classMap({\n      'text-heading-sm': this.size === 'sm',\n      'text-heading-md': this.size === 'md',\n      'text-heading-lg': this.size === 'lg',\n      'opacity-disabled': this.disabled,\n    })}\"\n        @click=${() => this.focus()}\n      >\n        <div part=\"character-boxes\" class=\"character-boxes\">\n          ${displayValues.map((char, index) => {\n      const hasCaret = this.isFocused && index === caretIndex;\n      return html`\n              <div\n                part=\"character-box\"\n                class=\"character-box ${classMap({\n        'border': !this.invalidmessage,\n        'border-2': this.invalidmessage,\n        'border-neutral': !this.invalidmessage,\n        'border-danger': this.invalidmessage,\n        'bg-neutral': !this.invalidmessage,\n        'bg-danger-tinted': this.invalidmessage,\n        'text-neutral-surface-active':\n          !char && !this.invalidmessage,\n        'text-danger-surface-active': !char && this.invalidmessage,\n        'character-box--caret': hasCaret,\n        'character-box--empty': !char,\n        'focus-ring-sm': hasCaret,\n      })} size-9 rounded-md text-center font-mono\"\n                @click=${(e: MouseEvent) => {\n        e.stopPropagation();\n        this.handleBoxClick(index);\n      }}\n              >\n                ${char || '○'}\n              </div>\n            `;\n    })}\n        </div>\n        <input\n          class=\"hidden-input\"\n          .value=\"${live(this.value)}\"\n          id=\"mid-code-input-hidden\"\n          type=\"${this.type}\"\n          aria-labelledby=\"${this.labelId}\"\n          maxlength=\"${this.length}\"\n          ?autofocus=\"${this.autofocus}\"\n          ?disabled=\"${this.disabled}\"\n          ?required=\"${this.required}\"\n          .pattern=\"${this.pattern}\"\n          inputmode=\"${this.inputmode}\"\n          autocomplete=\"one-time-code\"\n          @input=\"${this.handleInput}\"\n          @change=\"${this.handleChange}\"\n          @keydown=\"${this.handleKeydown}\"\n          @focus=\"${this.handleFocus}\"\n          @blur=\"${this.handleBlur}\"\n        />\n      </div>\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    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@felleslosninger/minid-elements",
-  "version": "0.0.130",
+  "version": "0.0.132",
   "description": "MinID Web Components",
   "author": "Digitaliseringsdirektoratet",
   "license": "MIT",