@felleslosninger/minid-elements 0.0.138 → 0.0.140

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

@@ -25,6 +25,7 @@ declare const MinidCodeInput_base: import('../types/mixin-constructor.ts').Const
 export declare class MinidCodeInput extends MinidCodeInput_base {
     private readonly hasSlotControler;
     private readonly labelId;
+    private readonly validationId;
     private inputElement;
     value: string;
     label: string;

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;;AAyFD;;;;;;;;;;;;;;;;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,iBAAiB;IAQzB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IAiBrB,KAAK;IAML,gBAAgB;IAKhB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAKnC,kBAAkB;IAOT,MAAM;CA+FhB"}
+{"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;AAS5D,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAyFD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiD;IAG9E,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,iBAAiB;IAQzB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IAiBrB,KAAK;IAML,gBAAgB;IAKhB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAKnC,kBAAkB;IAOT,MAAM;CA2GhB"}

package/dist/components/code-input.js

@@ -1,6 +1,7 @@
 import { css, LitElement, html } from "lit";
 import { query, property, state, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 import { watch } from "../internal/watch.js";
 import { FormControlMixin } from "../mixins/form-control.mixin.js";
@@ -111,6 +112,7 @@ let MinidCodeInput = class extends FormControlMixin(
     super(...arguments);
     this.hasSlotControler = new HasSlotController(this, "label");
     this.labelId = `mid-code-input-label-${nextUniqueId++}`;
+    this.validationId = `mid-code-input-validation-${nextUniqueId++}`;
     this.value = "";
     this.label = "";
     this.type = "number";
@@ -215,12 +217,14 @@ let MinidCodeInput = class extends FormControlMixin(
   render() {
     const hasLabelSlot = this.hasSlotControler.test("label");
     const hasLabel = !!this.label || !!hasLabelSlot;
+    const describedBy = this.invalidmessage ? this.validationId : void 0;
     const chars = this.value.split("");
     const displayValues = Array.from(
       { length: this.length },
       (_, i) => chars[i] || ""
     );
-    const caretIndex = this.disabled ? -1 : this.value.length;
+    const isComplete = this.value.length >= this.length;
+    const caretIndex = this.disabled || this.length === 0 ? -1 : Math.min(this.value.length, this.length - 1);
     return html`
       <label
         id="${this.labelId}"
@@ -241,9 +245,10 @@ let MinidCodeInput = class extends FormControlMixin(
     })}"
         @click=${() => this.focus()}
       >
-        <div part="character-boxes" class="character-boxes">
+        <div part="character-boxes" class="character-boxes" aria-hidden="true">
           ${displayValues.map((char, index) => {
-      const hasCaret = this.isFocused && index === caretIndex;
+      const isFocusTarget = this.isFocused && index === caretIndex;
+      const hasCaret = isFocusTarget && !isComplete;
       return html`
               <div
                 part="character-box"
@@ -258,7 +263,7 @@ let MinidCodeInput = class extends FormControlMixin(
         "text-danger-surface-active": !char && this.invalidmessage,
         "character-box--caret": hasCaret,
         "character-box--empty": !char,
-        "focus-ring-sm": hasCaret
+        "focus-ring-sm": isFocusTarget
       })} size-9 rounded-md text-center font-mono"
                 @click=${(e) => {
         e.stopPropagation();
@@ -276,6 +281,11 @@ let MinidCodeInput = class extends FormControlMixin(
           id="mid-code-input-hidden"
           type="${this.type}"
           aria-labelledby="${this.labelId}"
+          aria-describedby=${ifDefined(describedBy)}
+          aria-invalid=${this.invalidmessage ? "true" : "false"}
+          aria-errormessage=${ifDefined(
+      this.invalidmessage ? this.validationId : void 0
+    )}
           maxlength="${this.length}"
           ?autofocus="${this.autofocus}"
           ?disabled="${this.disabled}"
@@ -293,6 +303,7 @@ let MinidCodeInput = class extends FormControlMixin(
       </div>
       <div
         class="text-danger-subtle mt-2 flex gap-1"
+        id="${this.validationId}"
         aria-live="polite"
         ?hidden=${!this.invalidmessage}
       >

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          font-size: 16px; /* Must be at least 16px to prevent ios from zooming in */\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 handleBeforeInput(e: InputEvent) {\n    if (e.inputType === 'insertText' && e.data) {\n      if(this.type == \"number\" && e.data.replace(/\\D/g, '') == ''){\n        e.preventDefault();\n      }\n    }\n  }\n\n  private handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    let value = input.value;\n\n    value = value.substring(0, this.length);\n\n    if (input.value !== value) {\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.inputElement.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.inputElement.dispatchEvent(\n        new Event('mid-complete', { bubbles: true, composed: true }),\n      );\n    }\n\n  }\n\n  private handleChange() {\n    this.inputElement.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    this.invalidmessage = '';\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          @beforeinput=\"${this.handleBeforeInput}\"\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 { ifDefined } from 'lit/directives/if-defined.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          font-size: 16px; /* Must be at least 16px to prevent ios from zooming in */\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  private readonly validationId = `mid-code-input-validation-${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 handleBeforeInput(e: InputEvent) {\n    if (e.inputType === 'insertText' && e.data) {\n      if(this.type == \"number\" && e.data.replace(/\\D/g, '') == ''){\n        e.preventDefault();\n      }\n    }\n  }\n\n  private handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    let value = input.value;\n\n    value = value.substring(0, this.length);\n\n    if (input.value !== value) {\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.inputElement.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.inputElement.dispatchEvent(\n        new Event('mid-complete', { bubbles: true, composed: true }),\n      );\n    }\n\n  }\n\n  private handleChange() {\n    this.inputElement.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    this.invalidmessage = '';\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    const describedBy = this.invalidmessage ? this.validationId : undefined;\n\n    const chars = this.value.split('');\n    const displayValues = Array.from(\n      { length: this.length },\n      (_, i) => chars[i] || '',\n    );\n    const isComplete = this.value.length >= this.length;\n    const caretIndex =\n      this.disabled || this.length === 0\n        ? -1\n        : Math.min(this.value.length, this.length - 1);\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\" aria-hidden=\"true\">\n          ${displayValues.map((char, index) => {\n      const isFocusTarget = this.isFocused && index === caretIndex;\n      const hasCaret = isFocusTarget && !isComplete;\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': isFocusTarget,\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          aria-describedby=${ifDefined(describedBy)}\n          aria-invalid=${this.invalidmessage ? 'true' : 'false'}\n          aria-errormessage=${ifDefined(\n            this.invalidmessage ? this.validationId : undefined\n          )}\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          @beforeinput=\"${this.handleBeforeInput}\"\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        id=\"${this.validationId}\"\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/dist/components/icon/icon.component.d.ts

@@ -37,6 +37,7 @@ export declare class MinidIcon extends MinidIcon_base {
      */
     library: 'system' | 'country' | 'nav-aksel';
     private hasRendered;
+    private updateAccessibilityAttributes;
     /**
      * Given a URL, this function returns the resulting SVG element or an appropriate error symbol.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"icon.component.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAI/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,SAAS,CAAC;KACvB;CACF;;AA8BD;;;;;;GAMG;AACH,qBACa,SAAU,SAAQ,cAA0B;IAEvD,OAAO,CAAC,GAAG,CAAgD;IAE3D;;;;OAIG;IAEH,IAAI,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAEnC;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAe;IAE1D,OAAO,CAAC,WAAW,CAAS;IAE5B;;OAEG;YACW,WAAW;IA8CzB,YAAY;IAMZ,iBAAiB;IAaX,OAAO;IAsEb,SAAS,CAAC,MAAM;CAGjB"}
+{"version":3,"file":"icon.component.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAI/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,SAAS,CAAC;KACvB;CACF;;AA8BD;;;;;;GAMG;AACH,qBACa,SAAU,SAAQ,cAA0B;IAEvD,OAAO,CAAC,GAAG,CAAgD;IAE3D;;;;OAIG;IAEH,IAAI,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAEnC;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAe;IAE1D,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,6BAA6B;IAYrC;;OAEG;YACW,WAAW;IA8CzB,YAAY;IAOZ,iBAAiB;IAKX,OAAO;IAsEb,SAAS,CAAC,MAAM;CAGjB"}

package/dist/components/icon/icon.js

@@ -103,6 +103,17 @@ let MinidIcon = class extends styled(LitElement, styles) {
     this.library = "nav-aksel";
     this.hasRendered = false;
   }
+  updateAccessibilityAttributes() {
+    if (typeof this.alt === "string" && this.alt.length > 0) {
+      this.setAttribute("role", "img");
+      this.setAttribute("aria-label", this.alt);
+      this.removeAttribute("aria-hidden");
+    } else {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+      this.setAttribute("aria-hidden", "true");
+    }
+  }
   /**
    * Given a URL, this function returns the resulting SVG element or an appropriate error symbol.
    */
@@ -145,18 +156,11 @@ let MinidIcon = class extends styled(LitElement, styles) {
   }
   firstUpdated() {
     this.hasRendered = true;
+    this.updateAccessibilityAttributes();
     this.setIcon();
   }
   handleLabelChange() {
-    if (typeof this.alt === "string" && this.alt.length > 0) {
-      this.setAttribute("role", "img");
-      this.setAttribute("aria-label", this.alt);
-      this.removeAttribute("aria-hidden");
-    } else {
-      this.removeAttribute("role");
-      this.removeAttribute("aria-label");
-      this.setAttribute("aria-hidden", "true");
-    }
+    this.updateAccessibilityAttributes();
   }
   async setIcon() {
     if (!this.library && !this.name && !this.src) {

package/dist/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../src/components/icon/system.icon-library.ts","../../../src/components/icon/icon.component.ts"],"sourcesContent":["//\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All MinID components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Nav Aksel Icons.\n//\nexport const systemIcons = {\n  'circle-broken': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 15.5909 6.04464 18.6478 9.24993 19.7808C10.1091 20.0844 11.0344 20.25 12 20.25C12.4142 20.25 12.75 20.5858 12.75 21C12.75 21.4142 12.4142 21.75 12 21.75C10.8618 21.75 9.76756 21.5546 8.75007 21.195C4.9642 19.8569 2.25 16.2464 2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C16.2464 2.25 19.8569 4.9642 21.195 8.75007C21.5546 9.76756 21.75 10.8618 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75C20.5858 12.75 20.25 12.4142 20.25 12C20.25 11.0344 20.0844 10.1091 19.7808 9.24993C18.6478 6.04464 15.5909 3.75 12 3.75Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'magnifying-glass': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.5 3.25C6.49594 3.25 3.25 6.49594 3.25 10.5C3.25 14.5041 6.49594 17.75 10.5 17.75C12.2319 17.75 13.8219 17.1427 15.0689 16.1295L20.4801 21.5407C20.773 21.8336 21.2478 21.8336 21.5407 21.5407C21.8336 21.2478 21.8336 20.773 21.5407 20.4801L16.1295 15.0689C17.1427 13.8219 17.75 12.2319 17.75 10.5C17.75 6.49594 14.5041 3.25 10.5 3.25ZM4.75 10.5C4.75 7.32436 7.32436 4.75 10.5 4.75C13.6756 4.75 16.25 7.32436 16.25 10.5C16.25 13.6756 13.6756 16.25 10.5 16.25C7.32436 16.25 4.75 13.6756 4.75 10.5Z\" fill=\"currentColor\"/>\n    </svg>\n\n  `,\n  'questionmark-circle-fill': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 16a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z\" clip-rule=\"evenodd\"/>\n    </svg>\n  `,\n  'questionmark-circle': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 14a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z\" clip-rule=\"evenodd\"/>\n    </svg>\n  `,\n  'xmark-octagon-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.74175 2.46967C7.8824 2.32902 8.07317 2.25 8.27208 2.25L15.7279 2.25C15.9268 2.25 16.1176 2.32902 16.2583 2.46967L21.5303 7.74175C21.671 7.8824 21.75 8.07317 21.75 8.27208V15.7279C21.75 15.9268 21.671 16.1176 21.5303 16.2583L16.2583 21.5303C16.1176 21.671 15.9268 21.75 15.7279 21.75H8.27208C8.07316 21.75 7.8824 21.671 7.74175 21.5303L2.46967 16.2583C2.32902 16.1176 2.25 15.9268 2.25 15.7279L2.25 8.27208C2.25 8.07317 2.32902 7.8824 2.46967 7.74175L7.74175 2.46967ZM9.03033 7.96967C8.73744 7.67678 8.26256 7.67678 7.96967 7.96967C7.67678 8.26256 7.67678 8.73744 7.96967 9.03033L10.9393 12L7.96967 14.9697C7.67678 15.2626 7.67678 15.7374 7.96967 16.0303C8.26256 16.3232 8.73744 16.3232 9.03033 16.0303L12 13.0607L14.9697 16.0303C15.2626 16.3232 15.7374 16.3232 16.0303 16.0303C16.3232 15.7374 16.3232 15.2626 16.0303 14.9697L13.0607 12L16.0303 9.03033C16.3232 8.73744 16.3232 8.26256 16.0303 7.96967C15.7374 7.67678 15.2626 7.67678 14.9697 7.96967L12 10.9393L9.03033 7.96967Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'exclamationmark-triangle-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.9999 2.25C12.273 2.25 12.5244 2.3984 12.6565 2.63743L22.1827 19.8874C22.311 20.1198 22.307 20.4026 22.1721 20.6312C22.0372 20.8597 21.7916 21 21.5262 21H2.47363C2.20823 21 1.96259 20.8597 1.82771 20.6312C1.69283 20.4026 1.68879 20.1198 1.8171 19.8874L11.3434 2.63743C11.4754 2.3984 11.7269 2.25 11.9999 2.25ZM12.001 8.75C12.4152 8.75 12.751 9.08579 12.751 9.5V13.5C12.751 13.9142 12.4152 14.25 12.001 14.25C11.5868 14.25 11.251 13.9142 11.251 13.5V9.5C11.251 9.08579 11.5868 8.75 12.001 8.75ZM11.001 16.5C11.001 15.9477 11.4487 15.5 12.001 15.5C12.5533 15.5 13.001 15.9477 13.001 16.5C13.001 17.0523 12.5533 17.5 12.001 17.5C11.4487 17.5 11.001 17.0523 11.001 16.5Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'checkmark-circle-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75ZM16.9536 9.27485C17.2434 8.93229 17.2007 8.41962 16.8582 8.12977C16.5156 7.83991 16.0029 7.88263 15.7131 8.22519L10.3251 14.5928L7.69952 11.9672C7.38222 11.6499 6.86778 11.6499 6.55048 11.9672C6.23317 12.2845 6.23317 12.7989 6.55048 13.1162L9.80048 16.3662C9.96114 16.5269 10.1817 16.6129 10.4088 16.6035C10.6358 16.594 10.8485 16.49 10.9953 16.3165L16.9536 9.27485Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'eye-slash': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M21.0303 5.03033C21.3232 4.73744 21.3232 4.26256 21.0303 3.96967C20.7374 3.67678 20.2626 3.67678 19.9697 3.96967L16.659 7.28033C15.3593 6.67264 13.8043 6.25 12 6.25C8.77743 6.25 6.36338 7.59591 4.76986 8.92384C3.97354 9.58744 3.37644 10.2507 2.97685 10.7502C2.77672 11.0004 2.62518 11.2107 2.52208 11.361C2.4705 11.4362 2.43096 11.4966 2.40345 11.5396C2.38969 11.5611 2.37894 11.5782 2.37118 11.5908L2.36178 11.606L2.35877 11.611L2.35768 11.6128C2.35768 11.6128 2.35688 11.6141 3 12L2.35688 11.6141C2.21437 11.8517 2.21437 12.1484 2.35688 12.3859L2.35826 12.3882L2.36033 12.3916L2.36653 12.4017L2.38715 12.4348C2.40456 12.4624 2.42932 12.5009 2.46141 12.5492C2.52559 12.6457 2.61927 12.7814 2.74252 12.9466C2.98876 13.2768 3.35458 13.7273 3.84068 14.2208C4.64096 15.0333 5.77932 15.9744 7.25858 16.6808L3.96967 19.9697C3.67678 20.2626 3.67678 20.7374 3.96967 21.0303C4.26256 21.3232 4.73744 21.3232 5.03033 21.0303L10.5954 15.4653C10.6007 15.4601 10.6061 15.4549 10.6113 15.4495L10.6165 15.4441L15.4441 10.6165C15.4514 10.6096 15.4584 10.6025 15.4653 10.5954L21.0303 5.03033ZM13.914 10.0254L10.0254 13.914C9.91032 13.7953 9.80586 13.6661 9.71346 13.5278C9.47911 13.1771 9.32859 12.7772 9.27353 12.3589C9.21847 11.9407 9.26035 11.5155 9.39594 11.116C9.53153 10.7166 9.75719 10.3537 10.0555 10.0555C10.3537 9.75719 10.7166 9.53153 11.116 9.39594C11.5155 9.26035 11.9407 9.21847 12.3589 9.27353C12.7772 9.32859 13.1771 9.47911 13.5278 9.71346C13.6661 9.80586 13.7953 9.91033 13.914 10.0254ZM14.3612 8.46626C14.5814 8.61342 14.7867 8.78038 14.9747 8.96462L15.5189 8.42045C14.5061 8.01586 13.3343 7.75 12 7.75C9.22257 7.75 7.13662 8.9041 5.73014 10.0762C5.02646 10.6626 4.49856 11.2493 4.14815 11.6873C4.05539 11.8032 3.97534 11.9084 3.90802 12L3.94498 12.0499C4.15707 12.3343 4.47875 12.7311 4.90932 13.1682C5.71064 13.9817 6.8738 14.9197 8.39477 15.5446L8.96462 14.9747C8.78038 14.7867 8.61342 14.5814 8.46625 14.3612C8.10408 13.8191 7.87145 13.2011 7.78636 12.5547C7.70127 11.9084 7.766 11.2512 7.97555 10.6339C8.18509 10.0166 8.53384 9.45576 8.9948 8.9948C9.45576 8.53384 10.0166 8.18509 10.6339 7.97555C11.2512 7.766 11.9084 7.70127 12.5547 7.78636C13.2011 7.87145 13.8191 8.10408 14.3612 8.46626ZM19.5988 9.24339C19.2909 8.96625 18.8167 8.99114 18.5396 9.29898C18.2624 9.60682 18.2873 10.081 18.5952 10.3582C18.7178 10.4686 18.8341 10.5782 18.9442 10.6859C19.4237 11.1555 19.7822 11.589 20.0189 11.9022C20.0448 11.9364 20.0691 11.9691 20.092 12.0002C20.0247 12.0918 19.9446 12.197 19.8518 12.3129C19.5014 12.7509 18.9735 13.3376 18.2699 13.924C16.8634 15.0961 14.7774 16.2502 12 16.2502C11.5858 16.2502 11.25 16.586 11.25 17.0002C11.25 17.4144 11.5858 17.7502 12 17.7502C15.2226 17.7502 17.6366 16.4043 19.2301 15.0764C20.0265 14.4128 20.6236 13.7495 21.0232 13.25C21.2233 12.9998 21.3748 12.7895 21.4779 12.6392C21.5295 12.564 21.569 12.5036 21.5965 12.4606C21.6023 12.4516 21.6076 12.4433 21.6123 12.4359C21.6188 12.4255 21.6243 12.4167 21.6288 12.4094L21.6382 12.3942L21.6412 12.3892L21.6428 12.3867C21.7853 12.1492 21.7856 11.8518 21.6431 11.6143L21 12.0002C21.6431 11.6143 21.6425 11.6134 21.6425 11.6133L21.6416 11.6119L21.6394 11.6082L21.6326 11.5971L21.6099 11.5607C21.5907 11.5303 21.5633 11.4878 21.5277 11.4346C21.4565 11.3283 21.3525 11.1789 21.2155 10.9977C20.9419 10.6357 20.5349 10.1442 19.9937 9.61422C19.8692 9.49235 19.7376 9.36837 19.5988 9.24339ZM21 12.0002L21.6428 12.3867C21.6429 12.3864 21.6431 12.3861 21 12.0002Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  eye: `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.14838 12.3172C4.0542 12.1994 3.97317 12.0926 3.90533 12C3.97317 11.9074 4.0542 11.8006 4.14838 11.6828C4.49853 11.2446 5.02627 10.6584 5.72985 10.0727C7.13607 8.90197 9.22211 7.75 12 7.75C9.65279 7.75 7.75 9.65279 7.75 12C7.75 14.3472 9.65279 16.25 12 16.25C9.22211 16.25 7.13607 15.098 5.72985 13.9273C5.02627 13.3416 4.49853 12.7554 4.14838 12.3172ZM12 16.25C14.3472 16.25 16.25 14.3472 16.25 12C16.25 9.65279 14.3472 7.75 12 7.75C14.7779 7.75 16.8639 8.90197 18.2701 10.0727C18.9737 10.6584 19.5015 11.2446 19.8516 11.6828C19.9458 11.8006 20.0268 11.9074 20.0947 12C20.0268 12.0926 19.9458 12.1994 19.8516 12.3172C19.5015 12.7554 18.9737 13.3416 18.2701 13.9273C16.8639 15.098 14.7779 16.25 12 16.25ZM12 6.25C8.77789 6.25 6.36393 7.59303 4.77014 8.91985C3.97373 9.58286 3.37647 10.246 2.97662 10.7463C2.77639 10.9968 2.6246 11.2079 2.52109 11.3596C2.46936 11.4354 2.42935 11.4969 2.4011 11.5416C2.38707 11.5638 2.37537 11.5828 2.36621 11.598C2.36186 11.6052 2.35682 11.6137 2.35187 11.6223C2.34981 11.6259 2.34523 11.6339 2.33994 11.6438C2.33787 11.6476 2.33154 11.6594 2.32419 11.6747C2.32003 11.6835 2.30949 11.7072 2.30329 11.7223C2.29144 11.7541 2.2578 11.8921 2.25 12C2.2578 12.1079 2.29144 12.2459 2.30329 12.2777C2.30949 12.2928 2.32003 12.3165 2.32419 12.3253C2.33154 12.3406 2.33787 12.3524 2.33994 12.3562C2.34523 12.3661 2.34981 12.3741 2.35187 12.3777C2.35682 12.3863 2.36186 12.3948 2.36621 12.402C2.37537 12.4172 2.38707 12.4362 2.4011 12.4584C2.42935 12.5031 2.46936 12.5646 2.52109 12.6404C2.6246 12.7921 2.77639 13.0032 2.97662 13.2537C3.37647 13.754 3.97373 14.4171 4.77015 15.0802C6.36393 16.407 8.77789 17.75 12 17.75C15.2221 17.75 17.6361 16.407 19.2299 15.0802C20.0263 14.4171 20.6235 13.754 21.0234 13.2537C21.2236 13.0032 21.3754 12.7921 21.4789 12.6404C21.5306 12.5646 21.5706 12.5031 21.5989 12.4584C21.6129 12.4362 21.6246 12.4172 21.6338 12.402L21.6391 12.3931L21.6481 12.3777C21.6502 12.3741 21.6548 12.3661 21.6601 12.3562C21.6621 12.3524 21.6685 12.3406 21.6758 12.3253C21.68 12.3165 21.6905 12.2928 21.6967 12.2777C21.7086 12.2459 21.7422 12.1079 21.75 12C21.7422 11.8921 21.7086 11.7541 21.6967 11.7223C21.6905 11.7072 21.68 11.6835 21.6758 11.6747C21.6685 11.6594 21.6621 11.6476 21.6601 11.6438C21.6548 11.6339 21.6502 11.6259 21.6481 11.6223C21.6457 11.6181 21.6433 11.614 21.6409 11.61C21.6384 11.6058 21.636 11.6017 21.6338 11.598C21.6246 11.5828 21.6129 11.5638 21.5989 11.5416C21.5706 11.4969 21.5306 11.4354 21.4789 11.3596C21.3754 11.2079 21.2236 10.9968 21.0234 10.7463C20.6235 10.246 20.0263 9.58286 19.2299 8.91985C17.6361 7.59303 15.2221 6.25 12 6.25ZM9.25 12C9.25 10.4812 10.4812 9.25 12 9.25C13.5188 9.25 14.75 10.4812 14.75 12C14.75 13.5188 13.5188 14.75 12 14.75C10.4812 14.75 9.25 13.5188 9.25 12Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'information-square-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H20C20.4142 3.25 20.75 3.58579 20.75 4V20C20.75 20.4142 20.4142 20.75 20 20.75H4C3.58579 20.75 3.25 20.4142 3.25 20V4ZM11 7.75C11 7.19772 11.4477 6.75 12 6.75C12.5523 6.75 13 7.19772 13 7.75C13 8.30228 12.5523 8.75 12 8.75C11.4477 8.75 11 8.30228 11 7.75ZM9.75 10.75C9.75 10.3358 10.0858 10 10.5 10H12C12.4142 10 12.75 10.3358 12.75 10.75V15.5H13.5C13.9142 15.5 14.25 15.8358 14.25 16.25C14.25 16.6642 13.9142 17 13.5 17H12H10.5C10.0858 17 9.75 16.6642 9.75 16.25C9.75 15.8358 10.0858 15.5 10.5 15.5H11.25V11.5H10.5C10.0858 11.5 9.75 11.1642 9.75 10.75Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'padlock-locked-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 2.25C9.37665 2.25 7.25 4.37665 7.25 7V9.25H7C6.0335 9.25 5.25 10.0335 5.25 11V20C5.25 20.4142 5.58579 20.75 6 20.75H18C18.4142 20.75 18.75 20.4142 18.75 20V11C18.75 10.0335 17.9665 9.25 17 9.25H16.75V7C16.75 4.37665 14.6234 2.25 12 2.25ZM15.25 9.25V7C15.25 5.20507 13.7949 3.75 12 3.75C10.2051 3.75 8.75 5.20507 8.75 7V9.25H15.25ZM12 13C11.1716 13 10.5 13.6716 10.5 14.5C10.5 15.0552 10.8016 15.54 11.25 15.7993V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V15.7993C13.1984 15.54 13.5 15.0552 13.5 14.5C13.5 13.6716 12.8284 13 12 13Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  xmark: `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0607L17.4697 18.5303C17.7626 18.8232 18.2374 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53033C18.8232 6.23744 18.8232 5.76256 18.5303 5.46967C18.2374 5.17678 17.7626 5.17678 17.4697 5.46967L12 10.9393L6.53033 5.46967Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n};\n","import { customElement, property, state } from 'lit/decorators.js';\nimport { css, type HTMLTemplateResult, LitElement } from 'lit';\nimport { styled } from '../../mixins/tailwind.mixin';\nimport { watch } from '../../internal/watch.ts';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport type { MidIconName } from '../../types/icon-name';\nimport { systemIcons } from './system.icon-library.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-icon': MinidIcon;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n      width: 1em;\n      height: 1em;\n      box-sizing: content-box !important;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `,\n];\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult =\n  | HTMLTemplateResult\n  | SVGSVGElement\n  | typeof RETRYABLE_ERROR\n  | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\n/**\n *\n * Size and color can be adjusted with `font-size` and `color` css properties\n *\n * @event mid-load - Emitted when the icon has loaded\n * @event mid-error - Emitted when the icon fails to load\n */\n@customElement('mid-icon')\nexport class MinidIcon extends styled(LitElement, styles) {\n  @state()\n  private svg: SVGElement | HTMLTemplateResult | null = null;\n\n  /**\n   * The name of the icon to draw. Available names depend on the icon library being used.\n   * Preview default icons [here](https://aksel.nav.no/ikoner)\n   * @type string\n   */\n  @property({ reflect: true })\n  name?: MidIconName | (string & {}); // weird typing makes sure we have both intellisense and ability to input any string\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property()\n  src?: string;\n\n  /**\n   * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\n   * ignored by assistive devices.\n   */\n  @property()\n  alt?: string;\n\n  /**\n   * The name of a registered custom icon library.\n   *  @default nav-aksel\n   */\n  @property()\n  library: 'system' | 'country' | 'nav-aksel' = 'nav-aksel';\n\n  private hasRendered = false;\n\n  /**\n   * Given a URL, this function returns the resulting SVG element or an appropriate error symbol.\n   */\n  private async resolveIcon(url: string): Promise<SVGResult> {\n    let svgString = '';\n\n    if (url.startsWith('data:image/svg+xml')) {\n      svgString = decodeURIComponent(url);\n    } else {\n      let fileData: Response;\n      try {\n        fileData = await fetch(url, { mode: 'cors' });\n\n        if (!fileData.ok) {\n          return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;\n        }\n      } catch {\n        return RETRYABLE_ERROR;\n      }\n      svgString = await fileData.text();\n    }\n\n    try {\n      const div = document.createElement('div');\n      div.innerHTML = svgString;\n\n      const svg = div.firstElementChild;\n      if (svg?.tagName?.toLowerCase() !== 'svg') {\n        return CACHEABLE_ERROR;\n      }\n\n      if (!parser) {\n        parser = new DOMParser();\n      }\n      const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n      const svgEl = doc.body.querySelector('svg');\n      if (!svgEl) {\n        return CACHEABLE_ERROR;\n      }\n\n      svgEl.part.add('svg');\n\n      return document.adoptNode(svgEl);\n    } catch {\n      return CACHEABLE_ERROR;\n    }\n  }\n\n  firstUpdated() {\n    this.hasRendered = true;\n    this.setIcon();\n  }\n\n  @watch('alt')\n  handleLabelChange() {\n    if (typeof this.alt === 'string' && this.alt.length > 0) {\n      this.setAttribute('role', 'img');\n      this.setAttribute('aria-label', this.alt);\n      this.removeAttribute('aria-hidden');\n    } else {\n      this.removeAttribute('role');\n      this.removeAttribute('aria-label');\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  @watch(['name', 'src', 'library'])\n  async setIcon() {\n    if (!this.library && !this.name && !this.src) {\n      this.svg = null;\n      return;\n    }\n\n    let iconResolver = iconCache.get(`${this.library}-${this.name}`);\n    const iconKey = `${this.library}-${this.name}`;\n    if (!iconResolver) {\n      let svgUrl: string;\n      if (this.src) {\n        iconResolver = this.resolveIcon(this.src);\n        iconCache.set(iconKey, iconResolver);\n      } else if (this.library === 'nav-aksel') {\n        svgUrl = `/icons/${this.name}.svg`;\n        iconResolver = this.resolveIcon(svgUrl);\n        iconCache.set(iconKey, iconResolver);\n      } else if (this.library === 'country') {\n        svgUrl = `/flags/${this.name}.svg`;\n        iconResolver = this.resolveIcon(svgUrl);\n        iconCache.set(iconKey, iconResolver);\n      } else if (this.library === 'system') {\n        svgUrl = `data:image/svg+xml,${encodeURIComponent(systemIcons[this.name as keyof typeof systemIcons])}`;\n        iconResolver = this.resolveIcon(svgUrl);\n        iconCache.set(iconKey, iconResolver);\n      }\n    }\n\n    // If we haven't rendered yet, exit early. This avoids unnecessary work due to watching multiple props.\n    if (!this.hasRendered) {\n      return;\n    }\n\n    const svg = await iconResolver;\n\n    if (!svg) {\n      return;\n    }\n\n    if (svg === RETRYABLE_ERROR) {\n      iconCache.delete(iconKey);\n    }\n\n    if (iconKey !== `${this.library}-${this.name}`) {\n      // If the url has changed while fetching the icon, ignore this request\n      return;\n    }\n\n    if (isTemplateResult(svg)) {\n      this.svg = svg;\n\n      return;\n    }\n\n    switch (svg) {\n      case RETRYABLE_ERROR:\n      case CACHEABLE_ERROR:\n        this.svg = null;\n        this.dispatchEvent(\n          new Event('mid-error', { bubbles: true, composed: true })\n        );\n        break;\n      default:\n        this.svg = svg.cloneNode(true) as SVGElement;\n        this.dispatchEvent(\n          new Event('mid-load', { bubbles: true, composed: true })\n        );\n    }\n  }\n\n  protected render() {\n    return this.svg;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"icon.js","sources":["../../../src/components/icon/system.icon-library.ts","../../../src/components/icon/icon.component.ts"],"sourcesContent":["//\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All MinID components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Nav Aksel Icons.\n//\nexport const systemIcons = {\n  'circle-broken': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 15.5909 6.04464 18.6478 9.24993 19.7808C10.1091 20.0844 11.0344 20.25 12 20.25C12.4142 20.25 12.75 20.5858 12.75 21C12.75 21.4142 12.4142 21.75 12 21.75C10.8618 21.75 9.76756 21.5546 8.75007 21.195C4.9642 19.8569 2.25 16.2464 2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C16.2464 2.25 19.8569 4.9642 21.195 8.75007C21.5546 9.76756 21.75 10.8618 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75C20.5858 12.75 20.25 12.4142 20.25 12C20.25 11.0344 20.0844 10.1091 19.7808 9.24993C18.6478 6.04464 15.5909 3.75 12 3.75Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'magnifying-glass': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.5 3.25C6.49594 3.25 3.25 6.49594 3.25 10.5C3.25 14.5041 6.49594 17.75 10.5 17.75C12.2319 17.75 13.8219 17.1427 15.0689 16.1295L20.4801 21.5407C20.773 21.8336 21.2478 21.8336 21.5407 21.5407C21.8336 21.2478 21.8336 20.773 21.5407 20.4801L16.1295 15.0689C17.1427 13.8219 17.75 12.2319 17.75 10.5C17.75 6.49594 14.5041 3.25 10.5 3.25ZM4.75 10.5C4.75 7.32436 7.32436 4.75 10.5 4.75C13.6756 4.75 16.25 7.32436 16.25 10.5C16.25 13.6756 13.6756 16.25 10.5 16.25C7.32436 16.25 4.75 13.6756 4.75 10.5Z\" fill=\"currentColor\"/>\n    </svg>\n\n  `,\n  'questionmark-circle-fill': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 16a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z\" clip-rule=\"evenodd\"/>\n    </svg>\n  `,\n  'questionmark-circle': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 14a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z\" clip-rule=\"evenodd\"/>\n    </svg>\n  `,\n  'xmark-octagon-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.74175 2.46967C7.8824 2.32902 8.07317 2.25 8.27208 2.25L15.7279 2.25C15.9268 2.25 16.1176 2.32902 16.2583 2.46967L21.5303 7.74175C21.671 7.8824 21.75 8.07317 21.75 8.27208V15.7279C21.75 15.9268 21.671 16.1176 21.5303 16.2583L16.2583 21.5303C16.1176 21.671 15.9268 21.75 15.7279 21.75H8.27208C8.07316 21.75 7.8824 21.671 7.74175 21.5303L2.46967 16.2583C2.32902 16.1176 2.25 15.9268 2.25 15.7279L2.25 8.27208C2.25 8.07317 2.32902 7.8824 2.46967 7.74175L7.74175 2.46967ZM9.03033 7.96967C8.73744 7.67678 8.26256 7.67678 7.96967 7.96967C7.67678 8.26256 7.67678 8.73744 7.96967 9.03033L10.9393 12L7.96967 14.9697C7.67678 15.2626 7.67678 15.7374 7.96967 16.0303C8.26256 16.3232 8.73744 16.3232 9.03033 16.0303L12 13.0607L14.9697 16.0303C15.2626 16.3232 15.7374 16.3232 16.0303 16.0303C16.3232 15.7374 16.3232 15.2626 16.0303 14.9697L13.0607 12L16.0303 9.03033C16.3232 8.73744 16.3232 8.26256 16.0303 7.96967C15.7374 7.67678 15.2626 7.67678 14.9697 7.96967L12 10.9393L9.03033 7.96967Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'exclamationmark-triangle-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.9999 2.25C12.273 2.25 12.5244 2.3984 12.6565 2.63743L22.1827 19.8874C22.311 20.1198 22.307 20.4026 22.1721 20.6312C22.0372 20.8597 21.7916 21 21.5262 21H2.47363C2.20823 21 1.96259 20.8597 1.82771 20.6312C1.69283 20.4026 1.68879 20.1198 1.8171 19.8874L11.3434 2.63743C11.4754 2.3984 11.7269 2.25 11.9999 2.25ZM12.001 8.75C12.4152 8.75 12.751 9.08579 12.751 9.5V13.5C12.751 13.9142 12.4152 14.25 12.001 14.25C11.5868 14.25 11.251 13.9142 11.251 13.5V9.5C11.251 9.08579 11.5868 8.75 12.001 8.75ZM11.001 16.5C11.001 15.9477 11.4487 15.5 12.001 15.5C12.5533 15.5 13.001 15.9477 13.001 16.5C13.001 17.0523 12.5533 17.5 12.001 17.5C11.4487 17.5 11.001 17.0523 11.001 16.5Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'checkmark-circle-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75ZM16.9536 9.27485C17.2434 8.93229 17.2007 8.41962 16.8582 8.12977C16.5156 7.83991 16.0029 7.88263 15.7131 8.22519L10.3251 14.5928L7.69952 11.9672C7.38222 11.6499 6.86778 11.6499 6.55048 11.9672C6.23317 12.2845 6.23317 12.7989 6.55048 13.1162L9.80048 16.3662C9.96114 16.5269 10.1817 16.6129 10.4088 16.6035C10.6358 16.594 10.8485 16.49 10.9953 16.3165L16.9536 9.27485Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'eye-slash': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M21.0303 5.03033C21.3232 4.73744 21.3232 4.26256 21.0303 3.96967C20.7374 3.67678 20.2626 3.67678 19.9697 3.96967L16.659 7.28033C15.3593 6.67264 13.8043 6.25 12 6.25C8.77743 6.25 6.36338 7.59591 4.76986 8.92384C3.97354 9.58744 3.37644 10.2507 2.97685 10.7502C2.77672 11.0004 2.62518 11.2107 2.52208 11.361C2.4705 11.4362 2.43096 11.4966 2.40345 11.5396C2.38969 11.5611 2.37894 11.5782 2.37118 11.5908L2.36178 11.606L2.35877 11.611L2.35768 11.6128C2.35768 11.6128 2.35688 11.6141 3 12L2.35688 11.6141C2.21437 11.8517 2.21437 12.1484 2.35688 12.3859L2.35826 12.3882L2.36033 12.3916L2.36653 12.4017L2.38715 12.4348C2.40456 12.4624 2.42932 12.5009 2.46141 12.5492C2.52559 12.6457 2.61927 12.7814 2.74252 12.9466C2.98876 13.2768 3.35458 13.7273 3.84068 14.2208C4.64096 15.0333 5.77932 15.9744 7.25858 16.6808L3.96967 19.9697C3.67678 20.2626 3.67678 20.7374 3.96967 21.0303C4.26256 21.3232 4.73744 21.3232 5.03033 21.0303L10.5954 15.4653C10.6007 15.4601 10.6061 15.4549 10.6113 15.4495L10.6165 15.4441L15.4441 10.6165C15.4514 10.6096 15.4584 10.6025 15.4653 10.5954L21.0303 5.03033ZM13.914 10.0254L10.0254 13.914C9.91032 13.7953 9.80586 13.6661 9.71346 13.5278C9.47911 13.1771 9.32859 12.7772 9.27353 12.3589C9.21847 11.9407 9.26035 11.5155 9.39594 11.116C9.53153 10.7166 9.75719 10.3537 10.0555 10.0555C10.3537 9.75719 10.7166 9.53153 11.116 9.39594C11.5155 9.26035 11.9407 9.21847 12.3589 9.27353C12.7772 9.32859 13.1771 9.47911 13.5278 9.71346C13.6661 9.80586 13.7953 9.91033 13.914 10.0254ZM14.3612 8.46626C14.5814 8.61342 14.7867 8.78038 14.9747 8.96462L15.5189 8.42045C14.5061 8.01586 13.3343 7.75 12 7.75C9.22257 7.75 7.13662 8.9041 5.73014 10.0762C5.02646 10.6626 4.49856 11.2493 4.14815 11.6873C4.05539 11.8032 3.97534 11.9084 3.90802 12L3.94498 12.0499C4.15707 12.3343 4.47875 12.7311 4.90932 13.1682C5.71064 13.9817 6.8738 14.9197 8.39477 15.5446L8.96462 14.9747C8.78038 14.7867 8.61342 14.5814 8.46625 14.3612C8.10408 13.8191 7.87145 13.2011 7.78636 12.5547C7.70127 11.9084 7.766 11.2512 7.97555 10.6339C8.18509 10.0166 8.53384 9.45576 8.9948 8.9948C9.45576 8.53384 10.0166 8.18509 10.6339 7.97555C11.2512 7.766 11.9084 7.70127 12.5547 7.78636C13.2011 7.87145 13.8191 8.10408 14.3612 8.46626ZM19.5988 9.24339C19.2909 8.96625 18.8167 8.99114 18.5396 9.29898C18.2624 9.60682 18.2873 10.081 18.5952 10.3582C18.7178 10.4686 18.8341 10.5782 18.9442 10.6859C19.4237 11.1555 19.7822 11.589 20.0189 11.9022C20.0448 11.9364 20.0691 11.9691 20.092 12.0002C20.0247 12.0918 19.9446 12.197 19.8518 12.3129C19.5014 12.7509 18.9735 13.3376 18.2699 13.924C16.8634 15.0961 14.7774 16.2502 12 16.2502C11.5858 16.2502 11.25 16.586 11.25 17.0002C11.25 17.4144 11.5858 17.7502 12 17.7502C15.2226 17.7502 17.6366 16.4043 19.2301 15.0764C20.0265 14.4128 20.6236 13.7495 21.0232 13.25C21.2233 12.9998 21.3748 12.7895 21.4779 12.6392C21.5295 12.564 21.569 12.5036 21.5965 12.4606C21.6023 12.4516 21.6076 12.4433 21.6123 12.4359C21.6188 12.4255 21.6243 12.4167 21.6288 12.4094L21.6382 12.3942L21.6412 12.3892L21.6428 12.3867C21.7853 12.1492 21.7856 11.8518 21.6431 11.6143L21 12.0002C21.6431 11.6143 21.6425 11.6134 21.6425 11.6133L21.6416 11.6119L21.6394 11.6082L21.6326 11.5971L21.6099 11.5607C21.5907 11.5303 21.5633 11.4878 21.5277 11.4346C21.4565 11.3283 21.3525 11.1789 21.2155 10.9977C20.9419 10.6357 20.5349 10.1442 19.9937 9.61422C19.8692 9.49235 19.7376 9.36837 19.5988 9.24339ZM21 12.0002L21.6428 12.3867C21.6429 12.3864 21.6431 12.3861 21 12.0002Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  eye: `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.14838 12.3172C4.0542 12.1994 3.97317 12.0926 3.90533 12C3.97317 11.9074 4.0542 11.8006 4.14838 11.6828C4.49853 11.2446 5.02627 10.6584 5.72985 10.0727C7.13607 8.90197 9.22211 7.75 12 7.75C9.65279 7.75 7.75 9.65279 7.75 12C7.75 14.3472 9.65279 16.25 12 16.25C9.22211 16.25 7.13607 15.098 5.72985 13.9273C5.02627 13.3416 4.49853 12.7554 4.14838 12.3172ZM12 16.25C14.3472 16.25 16.25 14.3472 16.25 12C16.25 9.65279 14.3472 7.75 12 7.75C14.7779 7.75 16.8639 8.90197 18.2701 10.0727C18.9737 10.6584 19.5015 11.2446 19.8516 11.6828C19.9458 11.8006 20.0268 11.9074 20.0947 12C20.0268 12.0926 19.9458 12.1994 19.8516 12.3172C19.5015 12.7554 18.9737 13.3416 18.2701 13.9273C16.8639 15.098 14.7779 16.25 12 16.25ZM12 6.25C8.77789 6.25 6.36393 7.59303 4.77014 8.91985C3.97373 9.58286 3.37647 10.246 2.97662 10.7463C2.77639 10.9968 2.6246 11.2079 2.52109 11.3596C2.46936 11.4354 2.42935 11.4969 2.4011 11.5416C2.38707 11.5638 2.37537 11.5828 2.36621 11.598C2.36186 11.6052 2.35682 11.6137 2.35187 11.6223C2.34981 11.6259 2.34523 11.6339 2.33994 11.6438C2.33787 11.6476 2.33154 11.6594 2.32419 11.6747C2.32003 11.6835 2.30949 11.7072 2.30329 11.7223C2.29144 11.7541 2.2578 11.8921 2.25 12C2.2578 12.1079 2.29144 12.2459 2.30329 12.2777C2.30949 12.2928 2.32003 12.3165 2.32419 12.3253C2.33154 12.3406 2.33787 12.3524 2.33994 12.3562C2.34523 12.3661 2.34981 12.3741 2.35187 12.3777C2.35682 12.3863 2.36186 12.3948 2.36621 12.402C2.37537 12.4172 2.38707 12.4362 2.4011 12.4584C2.42935 12.5031 2.46936 12.5646 2.52109 12.6404C2.6246 12.7921 2.77639 13.0032 2.97662 13.2537C3.37647 13.754 3.97373 14.4171 4.77015 15.0802C6.36393 16.407 8.77789 17.75 12 17.75C15.2221 17.75 17.6361 16.407 19.2299 15.0802C20.0263 14.4171 20.6235 13.754 21.0234 13.2537C21.2236 13.0032 21.3754 12.7921 21.4789 12.6404C21.5306 12.5646 21.5706 12.5031 21.5989 12.4584C21.6129 12.4362 21.6246 12.4172 21.6338 12.402L21.6391 12.3931L21.6481 12.3777C21.6502 12.3741 21.6548 12.3661 21.6601 12.3562C21.6621 12.3524 21.6685 12.3406 21.6758 12.3253C21.68 12.3165 21.6905 12.2928 21.6967 12.2777C21.7086 12.2459 21.7422 12.1079 21.75 12C21.7422 11.8921 21.7086 11.7541 21.6967 11.7223C21.6905 11.7072 21.68 11.6835 21.6758 11.6747C21.6685 11.6594 21.6621 11.6476 21.6601 11.6438C21.6548 11.6339 21.6502 11.6259 21.6481 11.6223C21.6457 11.6181 21.6433 11.614 21.6409 11.61C21.6384 11.6058 21.636 11.6017 21.6338 11.598C21.6246 11.5828 21.6129 11.5638 21.5989 11.5416C21.5706 11.4969 21.5306 11.4354 21.4789 11.3596C21.3754 11.2079 21.2236 10.9968 21.0234 10.7463C20.6235 10.246 20.0263 9.58286 19.2299 8.91985C17.6361 7.59303 15.2221 6.25 12 6.25ZM9.25 12C9.25 10.4812 10.4812 9.25 12 9.25C13.5188 9.25 14.75 10.4812 14.75 12C14.75 13.5188 13.5188 14.75 12 14.75C10.4812 14.75 9.25 13.5188 9.25 12Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'information-square-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H20C20.4142 3.25 20.75 3.58579 20.75 4V20C20.75 20.4142 20.4142 20.75 20 20.75H4C3.58579 20.75 3.25 20.4142 3.25 20V4ZM11 7.75C11 7.19772 11.4477 6.75 12 6.75C12.5523 6.75 13 7.19772 13 7.75C13 8.30228 12.5523 8.75 12 8.75C11.4477 8.75 11 8.30228 11 7.75ZM9.75 10.75C9.75 10.3358 10.0858 10 10.5 10H12C12.4142 10 12.75 10.3358 12.75 10.75V15.5H13.5C13.9142 15.5 14.25 15.8358 14.25 16.25C14.25 16.6642 13.9142 17 13.5 17H12H10.5C10.0858 17 9.75 16.6642 9.75 16.25C9.75 15.8358 10.0858 15.5 10.5 15.5H11.25V11.5H10.5C10.0858 11.5 9.75 11.1642 9.75 10.75Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  'padlock-locked-fill': `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 2.25C9.37665 2.25 7.25 4.37665 7.25 7V9.25H7C6.0335 9.25 5.25 10.0335 5.25 11V20C5.25 20.4142 5.58579 20.75 6 20.75H18C18.4142 20.75 18.75 20.4142 18.75 20V11C18.75 10.0335 17.9665 9.25 17 9.25H16.75V7C16.75 4.37665 14.6234 2.25 12 2.25ZM15.25 9.25V7C15.25 5.20507 13.7949 3.75 12 3.75C10.2051 3.75 8.75 5.20507 8.75 7V9.25H15.25ZM12 13C11.1716 13 10.5 13.6716 10.5 14.5C10.5 15.0552 10.8016 15.54 11.25 15.7993V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V15.7993C13.1984 15.54 13.5 15.0552 13.5 14.5C13.5 13.6716 12.8284 13 12 13Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n  xmark: `\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0607L17.4697 18.5303C17.7626 18.8232 18.2374 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53033C18.8232 6.23744 18.8232 5.76256 18.5303 5.46967C18.2374 5.17678 17.7626 5.17678 17.4697 5.46967L12 10.9393L6.53033 5.46967Z\" fill=\"currentColor\"/>\n    </svg>\n  `,\n};\n","import { customElement, property, state } from 'lit/decorators.js';\nimport { css, type HTMLTemplateResult, LitElement } from 'lit';\nimport { styled } from '../../mixins/tailwind.mixin';\nimport { watch } from '../../internal/watch.ts';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport type { MidIconName } from '../../types/icon-name';\nimport { systemIcons } from './system.icon-library.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-icon': MinidIcon;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n      width: 1em;\n      height: 1em;\n      box-sizing: content-box !important;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `,\n];\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult =\n  | HTMLTemplateResult\n  | SVGSVGElement\n  | typeof RETRYABLE_ERROR\n  | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\n/**\n *\n * Size and color can be adjusted with `font-size` and `color` css properties\n *\n * @event mid-load - Emitted when the icon has loaded\n * @event mid-error - Emitted when the icon fails to load\n */\n@customElement('mid-icon')\nexport class MinidIcon extends styled(LitElement, styles) {\n  @state()\n  private svg: SVGElement | HTMLTemplateResult | null = null;\n\n  /**\n   * The name of the icon to draw. Available names depend on the icon library being used.\n   * Preview default icons [here](https://aksel.nav.no/ikoner)\n   * @type string\n   */\n  @property({ reflect: true })\n  name?: MidIconName | (string & {}); // weird typing makes sure we have both intellisense and ability to input any string\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property()\n  src?: string;\n\n  /**\n   * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\n   * ignored by assistive devices.\n   */\n  @property()\n  alt?: string;\n\n  /**\n   * The name of a registered custom icon library.\n   *  @default nav-aksel\n   */\n  @property()\n  library: 'system' | 'country' | 'nav-aksel' = 'nav-aksel';\n\n  private hasRendered = false;\n\n  private updateAccessibilityAttributes() {\n    if (typeof this.alt === 'string' && this.alt.length > 0) {\n      this.setAttribute('role', 'img');\n      this.setAttribute('aria-label', this.alt);\n      this.removeAttribute('aria-hidden');\n    } else {\n      this.removeAttribute('role');\n      this.removeAttribute('aria-label');\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  /**\n   * Given a URL, this function returns the resulting SVG element or an appropriate error symbol.\n   */\n  private async resolveIcon(url: string): Promise<SVGResult> {\n    let svgString = '';\n\n    if (url.startsWith('data:image/svg+xml')) {\n      svgString = decodeURIComponent(url);\n    } else {\n      let fileData: Response;\n      try {\n        fileData = await fetch(url, { mode: 'cors' });\n\n        if (!fileData.ok) {\n          return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;\n        }\n      } catch {\n        return RETRYABLE_ERROR;\n      }\n      svgString = await fileData.text();\n    }\n\n    try {\n      const div = document.createElement('div');\n      div.innerHTML = svgString;\n\n      const svg = div.firstElementChild;\n      if (svg?.tagName?.toLowerCase() !== 'svg') {\n        return CACHEABLE_ERROR;\n      }\n\n      if (!parser) {\n        parser = new DOMParser();\n      }\n      const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n      const svgEl = doc.body.querySelector('svg');\n      if (!svgEl) {\n        return CACHEABLE_ERROR;\n      }\n\n      svgEl.part.add('svg');\n\n      return document.adoptNode(svgEl);\n    } catch {\n      return CACHEABLE_ERROR;\n    }\n  }\n\n  firstUpdated() {\n    this.hasRendered = true;\n    this.updateAccessibilityAttributes();\n    this.setIcon();\n  }\n\n  @watch('alt')\n  handleLabelChange() {\n    this.updateAccessibilityAttributes();\n  }\n\n  @watch(['name', 'src', 'library'])\n  async setIcon() {\n    if (!this.library && !this.name && !this.src) {\n      this.svg = null;\n      return;\n    }\n\n    let iconResolver = iconCache.get(`${this.library}-${this.name}`);\n    const iconKey = `${this.library}-${this.name}`;\n    if (!iconResolver) {\n      let svgUrl: string;\n      if (this.src) {\n        iconResolver = this.resolveIcon(this.src);\n        iconCache.set(iconKey, iconResolver);\n      } else if (this.library === 'nav-aksel') {\n        svgUrl = `/icons/${this.name}.svg`;\n        iconResolver = this.resolveIcon(svgUrl);\n        iconCache.set(iconKey, iconResolver);\n      } else if (this.library === 'country') {\n        svgUrl = `/flags/${this.name}.svg`;\n        iconResolver = this.resolveIcon(svgUrl);\n        iconCache.set(iconKey, iconResolver);\n      } else if (this.library === 'system') {\n        svgUrl = `data:image/svg+xml,${encodeURIComponent(systemIcons[this.name as keyof typeof systemIcons])}`;\n        iconResolver = this.resolveIcon(svgUrl);\n        iconCache.set(iconKey, iconResolver);\n      }\n    }\n\n    // If we haven't rendered yet, exit early. This avoids unnecessary work due to watching multiple props.\n    if (!this.hasRendered) {\n      return;\n    }\n\n    const svg = await iconResolver;\n\n    if (!svg) {\n      return;\n    }\n\n    if (svg === RETRYABLE_ERROR) {\n      iconCache.delete(iconKey);\n    }\n\n    if (iconKey !== `${this.library}-${this.name}`) {\n      // If the url has changed while fetching the icon, ignore this request\n      return;\n    }\n\n    if (isTemplateResult(svg)) {\n      this.svg = svg;\n\n      return;\n    }\n\n    switch (svg) {\n      case RETRYABLE_ERROR:\n      case CACHEABLE_ERROR:\n        this.svg = null;\n        this.dispatchEvent(\n          new Event('mid-error', { bubbles: true, composed: true })\n        );\n        break;\n      default:\n        this.svg = svg.cloneNode(true) as SVGElement;\n        this.dispatchEvent(\n          new Event('mid-load', { bubbles: true, composed: true })\n        );\n    }\n  }\n\n  protected render() {\n    return this.svg;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -20,6 +20,9 @@ declare const MinidPhoneInput_base: import('../types/mixin-constructor').Constru
  * @part input - Select the phone number input
  */
 export declare class MinidPhoneInput extends MinidPhoneInput_base {
+    private readonly inputId;
+    private readonly validationId;
+    private readonly labelId;
     private formatter;
     private skipCountryUpdate;
     private currentEvent;
@@ -56,6 +59,10 @@ export declare class MinidPhoneInput extends MinidPhoneInput_base {
      * Activates invalid styling
      */
     invalid: boolean;
+    /**
+     * Error message to display when the input is invalid, also activates invalid styling
+     */
+    invalidmessage: string;
     /**
      * Makes the input required
      */
@@ -66,6 +73,10 @@ export declare class MinidPhoneInput extends MinidPhoneInput_base {
     readonly: boolean;
     hasFocus: boolean;
     static get formControlValidators(): import('../types/validator.type').Validator[];
+    constructor();
+    get validationTarget(): HTMLInputElement;
+    validationMessageCallback(message: string): void;
+    resetFormControl(): void;
     handleCountryClick(): void;
     handleCountryKeyDown(event: KeyboardEvent): void;
     connectedCallback(): void;
@@ -79,7 +90,7 @@ export declare class MinidPhoneInput extends MinidPhoneInput_base {
     private valueChangeCallback;
     private handleFocus;
     private removePhonePrefix;
-    focus(): void;
+    focus(options?: FocusOptions): void;
     handleCountryChange(): void;
     render(): import('lit-html').TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"phone-input.component.d.ts","sourceRoot":"","sources":["../../src/components/phone-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,OAAO,EAIL,KAAK,WAAW,EAEjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAY/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF;;AAUD;;;;;;;;;;;;GAYG;AACH,qBACa,eAAgB,SAAQ,oBAEpC;IACC,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,YAAY,CAAiB;IACrC,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,gBAAgB,CAAwC;IAGhE,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,kDAE/B;IAED,kBAAkB;IAMlB,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAQzC,iBAAiB,IAAI,IAAI;IAmBzB,IAAI,aAAa,yCAEhB;IAED,IAAI,cAAc,0CAEjB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAiCrB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,mBAAmB,CAqBzB;IAEF,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAUzB,KAAK;IAWL,mBAAmB;IAmBV,MAAM;CAwFhB"}
+{"version":3,"file":"phone-input.component.d.ts","sourceRoot":"","sources":["../../src/components/phone-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAKrD,OAAO,EAIL,KAAK,WAAW,EAEjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAY/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF;;AAYD;;;;;;;;;;;;GAYG;AACH,qBACa,eAAgB,SAAQ,oBAEpC;IACC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAS;IACtC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IACpE,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,YAAY,CAAiB;IACrC,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,gBAAgB,CAAwC;IAGhE,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,kDAE/B;;IASD,IAAI,gBAAgB,qBAEnB;IAED,yBAAyB,CAAC,OAAO,EAAE,MAAM;IAIzC,gBAAgB;IAIhB,kBAAkB;IAMlB,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAQzC,iBAAiB,IAAI,IAAI;IAmBzB,IAAI,aAAa,yCAEhB;IAED,IAAI,cAAc,0CAEjB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAiCrB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,mBAAmB,CAqBzB;IAEF,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAUzB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAKnC,mBAAmB;IAmBV,MAAM;CAiHhB"}

package/dist/components/phone-input.js

@@ -1,6 +1,7 @@
 import { css, LitElement, nothing, html } from "lit";
 import { query, property, state, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import { AsYouType, getCountryCallingCode, formatIncompletePhoneNumber, parsePhoneNumberCharacter } from "libphonenumber-js";
 import "./icon/icon.js";
@@ -26,11 +27,13 @@ const styles = [
     }
   `
 ];
+let nextUniqueId = 0;
 let MinidPhoneInput = class extends FormControlMixin(
   styled(LitElement, styles)
 ) {
   constructor() {
-    super(...arguments);
+    super();
+    this.labelId = `mid-code-input-label-${nextUniqueId++}`;
     this.formatter = new AsYouType();
     this.skipCountryUpdate = false;
     this.currentEvent = new Event("");
@@ -42,6 +45,7 @@ let MinidPhoneInput = class extends FormControlMixin(
     this.label = "";
     this.hidelabel = false;
     this.invalid = false;
+    this.invalidmessage = "";
     this.required = false;
     this.readonly = false;
     this.hasFocus = false;
@@ -59,10 +63,22 @@ let MinidPhoneInput = class extends FormControlMixin(
       }
       this.dispatchEvent(this.currentEvent);
     };
+    nextUniqueId++;
+    this.inputId = `mid-phone-input-input-${nextUniqueId}`;
+    this.validationId = `mid-phone-input-validation-${nextUniqueId}`;
   }
   static get formControlValidators() {
     return [requiredValidator];
   }
+  get validationTarget() {
+    return this.input;
+  }
+  validationMessageCallback(message) {
+    this.invalidmessage = message;
+  }
+  resetFormControl() {
+    this.invalidmessage = "";
+  }
   handleCountryClick() {
     this.dispatchEvent(
       new CustomEvent("mid-country-click", { composed: true, bubbles: true })
@@ -166,14 +182,8 @@ let MinidPhoneInput = class extends FormControlMixin(
     }
     return value;
   }
-  focus() {
-    this.input.focus();
-    setTimeout(() => {
-      this.input.setSelectionRange(
-        (this.countrycode?.length ?? 0) + 1,
-        this.input.value.length
-      );
-    }, 0);
+  focus(options) {
+    this.input.focus(options);
   }
   handleCountryChange() {
     if (this.skipCountryUpdate) {
@@ -195,7 +205,15 @@ let MinidPhoneInput = class extends FormControlMixin(
     const sm = false;
     const hasLabelSlot = this.hasSlotControler.test("label");
     const hasLabel = !!this.label || !!hasLabelSlot;
+    const hasError = this.invalid || !!this.invalidmessage;
+    const describedBy = this.invalidmessage ? this.validationId : void 0;
     return html`
+      <label
+        id="${this.labelId}"
+        class="${classMap({
+      "sr-only": this.hidelabel || !hasLabel
+    })} mb-2 block items-center gap-1 font-medium"
+      > 
       <div
         part="field"
         class="${classMap({
@@ -205,7 +223,7 @@ let MinidPhoneInput = class extends FormControlMixin(
     })}"
       >
         <label
-          for="input"
+          for="${this.inputId}"
           class="${classMap({
       "sr-only": this.hidelabel || !hasLabel
     })} mb-2 inline-flex items-center gap-1 font-medium"
@@ -246,21 +264,26 @@ let MinidPhoneInput = class extends FormControlMixin(
           </button>
 
           <input
-            id="input"
+            id="${this.inputId}"
             class="${classMap({
-      "border-neutral": !this.invalid && !this.readonly,
-      "border-danger": this.invalid && !this.readonly,
+      "border-neutral": !hasError && !this.readonly,
+      "border-danger": hasError && !this.readonly,
       "border-neutral-subtle": this.readonly,
       "bg-neutral-surface-tinted": this.readonly,
       "bg-neutral-surface": !this.readonly,
-      "border-2": this.invalid,
-      border: !this.invalid
+      "border-2": hasError,
+      border: !hasError
     })} focus-visible:focus-ring grow rounded-r px-3"
             part="phone-number"
             type="tel"
             autocomplete="tel"
             ?readonly=${this.readonly}
             value=${this.value}
+            aria-describedby=${ifDefined(describedBy)}
+            aria-invalid=${hasError ? "true" : "false"}
+            aria-errormessage=${ifDefined(
+      this.invalidmessage ? this.validationId : void 0
+    )}
             @input=${this.handleInput}
             @focus=${this.handleFocus}
             @blur=${this.handleBlur}
@@ -268,12 +291,24 @@ let MinidPhoneInput = class extends FormControlMixin(
             @change=${this.handleChange}
           />
         </div>
+        <div
+          class="text-danger-subtle mt-2 flex gap-1"
+          id="${this.validationId}"
+          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>
       </div>
     `;
   }
 };
 __decorateClass([
-  query("#input")
+  query("input")
 ], MinidPhoneInput.prototype, "input", 2);
 __decorateClass([
   property({ reflect: true })
@@ -296,6 +331,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], MinidPhoneInput.prototype, "invalid", 2);
+__decorateClass([
+  property()
+], MinidPhoneInput.prototype, "invalidmessage", 2);
 __decorateClass([
   property({ type: Boolean })
 ], MinidPhoneInput.prototype, "required", 2);

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

@@ -1 +1 @@
-{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n  AsYouType,\n  formatIncompletePhoneNumber,\n  getCountryCallingCode,\n  type CountryCode,\n  parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n  onChange,\n  onKeyDown,\n  templateFormatter,\n  templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport { requiredValidator } from '../mixins/validators';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-phone-input': MinidPhoneInput;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part field - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private formatter = new AsYouType();\n  private skipCountryUpdate = false; // avoids unwanted update loop\n  private currentEvent = new Event(''); // the event to be emitted after value is set\n  private currentTemplate = '';\n  private hasSlotControler = new HasSlotController(this, 'label');\n\n  @query('#input')\n  input!: HTMLInputElement;\n\n  /**\n   * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n   *\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * The phone number without the country code prefix. Example: `\"99999999\"`\n   */\n  @property({ reflect: true })\n  nationalnumber = '';\n\n  /**\n   * The country code of the current phone number value. Example: `\"+47\"`\n   */\n  @property({ reflect: true })\n  countrycode = '';\n\n  /**\n   * Label for the phone input.\n   * Passed label will be encapsulated by a label element.\n   */\n  @property()\n  label = '';\n\n  /**\n   * Hide label visually. Still available for screen readers\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * The country selected. A two letter ISO country code like: `\"NO\"`\n   */\n  @property({ reflect: true })\n  country?: CountryCode;\n\n  /**\n   * Activates invalid styling\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Makes the input read-only, meaning the user cannot change the value.\n   */\n  @property({ type: Boolean })\n  readonly = false;\n\n  @state()\n  hasFocus = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  handleCountryClick() {\n    this.dispatchEvent(\n      new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n    );\n  }\n\n  handleCountryKeyDown(event: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(event.key)) {\n      this.dispatchEvent(\n        new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.formatter.input(this.value);\n    this.country = this.formatter.getCountry() ?? this.country;\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n\n    this.value = formatIncompletePhoneNumber(this.value);\n    this.value ||= this.countrycode;\n    this.nationalnumber = this.removePhonePrefix(this.value);\n    this.setValue(this.value.replaceAll(' ', ''));\n\n    setTimeout(() => {\n      this.input.value = `${this.countrycode} ${this.nationalnumber}`;\n    });\n  }\n\n  get parseTemplate() {\n    return templateParser(this.currentTemplate, parsePhoneNumberCharacter);\n  }\n\n  get formatTemplate() {\n    return templateFormatter(this.currentTemplate);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange(event: Event) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-change', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.handleNewValue(event);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n      // don't remove '+' symbol which is the first character\n      event.preventDefault();\n      return;\n    }\n\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.form.requestSubmit();\n        }\n      });\n      return;\n    }\n\n    onKeyDown(\n      event as any,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private handleInput(event: InputEvent) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-input', {\n      composed: true,\n      bubbles: true,\n    });\n    this.handleNewValue(event);\n  }\n\n  private handleNewValue(event: Event) {\n    this.formatter.reset();\n\n    if (!this.input.value.startsWith('+')) {\n      this.input.value = `+${this.input.value}`;\n    }\n    this.formatter.input(this.input.value);\n    this.currentTemplate = this.formatter.getTemplate();\n\n    onChange(\n      event as any,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private valueChangeCallback = (value: string) => {\n    const country =\n      value.length < 2\n        ? undefined\n        : (this.formatter.getCountry() ?? this.country);\n\n    if (country !== this.country) {\n      this.country = country;\n      this.countrycode = this.country\n        ? `+${getCountryCallingCode(this.country)}`\n        : '+';\n      this.skipCountryUpdate = true;\n    }\n\n    if (value !== this.value) {\n      this.value = value;\n      this.setValue(this.value.replaceAll(' ', ''));\n      this.nationalnumber = this.removePhonePrefix(value);\n    }\n\n    this.dispatchEvent(this.currentEvent);\n  };\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private removePhonePrefix(value: string) {\n    if (this.countrycode) {\n      value = value.slice(this.countrycode.length);\n      if (value[0] === ' ') {\n        value = value.slice(1);\n      }\n    }\n    return value;\n  }\n\n  focus() {\n    this.input.focus();\n    setTimeout(() => {\n      this.input.setSelectionRange(\n        (this.countrycode?.length ?? 0) + 1,\n        this.input.value.length\n      );\n    }, 0);\n  }\n\n  @watch('country', { waitUntilFirstUpdate: true })\n  handleCountryChange() {\n    if (this.skipCountryUpdate) {\n      this.skipCountryUpdate = false;\n      return;\n    }\n\n    this.formatter = new AsYouType(this.country);\n    this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n    this.input.value = formatIncompletePhoneNumber(\n      `${this.countrycode}${this.nationalnumber}`\n    );\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override render() {\n    const lg = false;\n    const md = true;\n    const sm = false;\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n\n    return html`\n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })}\"\n      >\n        <label\n          for=\"input\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          ${this.readonly\n            ? html`<mid-icon\n                class=\"size-5\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`\n            : nothing}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        <div part=\"base\" class=\"flex h-12\">\n          <button\n            part=\"country-button\"\n            aria-label=\"Open country selector\"\n            class=\"${classMap({\n              'border-neutral': !this.readonly,\n              'border-neutral-subtle': this.readonly,\n              'bg-neutral-surface-tinted': this.readonly,\n              'bg-neutral-surface': !this.readonly,\n            })} focus-visible:focus-ring flex h-full items-center rounded-l border border-r-0 pl-3\"\n            iconstyled\n            variant=\"tertiary\"\n            ?disabled=${this.readonly}\n            @click=${this.handleCountryClick}\n            @keydown=${this.handleCountryKeyDown}\n          >\n            ${this.country\n              ? html`\n                  <mid-icon\n                    class=\"h-4 w-6 overflow-hidden rounded\"\n                    library=\"country\"\n                    name=\"${this.country}\"\n                  ></mid-icon>\n                `\n              : html`<div\n                  class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n                ></div>`}\n            <mid-icon name=\"chevron-down\"></mid-icon>\n          </button>\n\n          <input\n            id=\"input\"\n            class=\"${classMap({\n              'border-neutral': !this.invalid && !this.readonly,\n              'border-danger': this.invalid && !this.readonly,\n              'border-neutral-subtle': this.readonly,\n              'bg-neutral-surface-tinted': this.readonly,\n              'bg-neutral-surface': !this.readonly,\n              'border-2': this.invalid,\n              border: !this.invalid,\n            })} focus-visible:focus-ring grow rounded-r px-3\"\n            part=\"phone-number\"\n            type=\"tel\"\n            autocomplete=\"tel\"\n            ?readonly=${this.readonly}\n            value=${this.value}\n            @input=${this.handleInput}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n            @change=${this.handleChange}\n          />\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAKF;AAgBO,IAAM,kBAAN,cAA8B;AAAA,EACnC,OAAO,YAAY,MAAM;AAC3B,EAAE;AAAA,EAFK,cAAA;AAAA,UAAA,GAAA,SAAA;AAGL,SAAQ,YAAY,IAAI,UAAA;AACxB,SAAQ,oBAAoB;AAC5B,SAAQ,eAAe,IAAI,MAAM,EAAE;AACnC,SAAQ,kBAAkB;AAC1B,SAAQ,mBAAmB,IAAI,kBAAkB,MAAM,OAAO;AAU9D,SAAA,QAAQ;AAMR,SAAA,iBAAiB;AAMjB,SAAA,cAAc;AAOd,SAAA,QAAQ;AAMR,SAAA,YAAY;AAYZ,SAAA,UAAU;AAMV,SAAA,WAAW;AAMX,SAAA,WAAW;AAGX,SAAA,WAAW;AA4HX,SAAQ,sBAAsB,CAAC,UAAkB;AAC/C,YAAM,UACJ,MAAM,SAAS,IACX,SACC,KAAK,UAAU,gBAAgB,KAAK;AAE3C,UAAI,YAAY,KAAK,SAAS;AAC5B,aAAK,UAAU;AACf,aAAK,cAAc,KAAK,UACpB,IAAI,sBAAsB,KAAK,OAAO,CAAC,KACvC;AACJ,aAAK,oBAAoB;AAAA,MAC3B;AAEA,UAAI,UAAU,KAAK,OAAO;AACxB,aAAK,QAAQ;AACb,aAAK,SAAS,KAAK,MAAM,WAAW,KAAK,EAAE,CAAC;AAC5C,aAAK,iBAAiB,KAAK,kBAAkB,KAAK;AAAA,MACpD;AAEA,WAAK,cAAc,KAAK,YAAY;AAAA,IACtC;AAAA,EAAA;AAAA,EA/IA,WAAW,wBAAwB;AACjC,WAAO,CAAC,iBAAiB;AAAA,EAC3B;AAAA,EAEA,qBAAqB;AACnB,SAAK;AAAA,MACH,IAAI,YAAY,qBAAqB,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAE1E;AAAA,EAEA,qBAAqB,OAAsB;AACzC,QAAI,CAAC,KAAK,OAAO,EAAE,SAAS,MAAM,GAAG,GAAG;AACtC,WAAK;AAAA,QACH,IAAI,YAAY,qBAAqB,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,MAAA;AAAA,IAE1E;AAAA,EACF;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA;AAEN,SAAK,UAAU,MAAM,KAAK,KAAK;AAC/B,SAAK,UAAU,KAAK,UAAU,WAAA,KAAgB,KAAK;AACnD,SAAK,cAAc,KAAK,UACpB,IAAI,sBAAsB,KAAK,OAAO,CAAC,KACvC;AAEJ,SAAK,QAAQ,4BAA4B,KAAK,KAAK;AACnD,SAAK,UAAU,KAAK;AACpB,SAAK,iBAAiB,KAAK,kBAAkB,KAAK,KAAK;AACvD,SAAK,SAAS,KAAK,MAAM,WAAW,KAAK,EAAE,CAAC;AAE5C,eAAW,MAAM;AACf,WAAK,MAAM,QAAQ,GAAG,KAAK,WAAW,IAAI,KAAK,cAAc;AAAA,IAC/D,CAAC;AAAA,EACH;AAAA,EAEA,IAAI,gBAAgB;AAClB,WAAO,eAAe,KAAK,iBAAiB,yBAAyB;AAAA,EACvE;AAAA,EAEA,IAAI,iBAAiB;AACnB,WAAO,kBAAkB,KAAK,eAAe;AAAA,EAC/C;AAAA,EAEQ,aAAa;AACnB,SAAK,WAAW;AAChB,SAAK;AAAA,MACH,IAAI,MAAM,YAAY,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,IAAA;AAAA,EAE3D;AAAA,EAEQ,aAAa,OAAc;AAEjC,SAAK,eAAe,IAAI,MAAM,cAAc;AAAA,MAC1C,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX;AAED,SAAK,eAAe,KAAK;AAAA,EAC3B;AAAA,EAEQ,cAAc,OAAsB;AAC1C,QAAI,MAAM,QAAQ,eAAe,KAAK,MAAM,mBAAmB,GAAG;AAEhE,YAAM,eAAA;AACN;AAAA,IACF;AAEA,UAAM,cACJ,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM;AAI5D,QAAI,MAAM,QAAQ,WAAW,CAAC,aAAa;AACzC,iBAAW,MAAM;AAIf,YAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,aAAa;AACjD,eAAK,KAAK,cAAA;AAAA,QACZ;AAAA,MACF,CAAC;AACD;AAAA,IACF;AAEA;AAAA,MACE;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,EAET;AAAA,EAEQ,YAAY,OAAmB;AAErC,SAAK,eAAe,IAAI,MAAM,aAAa;AAAA,MACzC,UAAU;AAAA,MACV,SAAS;AAAA,IAAA,CACV;AACD,SAAK,eAAe,KAAK;AAAA,EAC3B;AAAA,EAEQ,eAAe,OAAc;AACnC,SAAK,UAAU,MAAA;AAEf,QAAI,CAAC,KAAK,MAAM,MAAM,WAAW,GAAG,GAAG;AACrC,WAAK,MAAM,QAAQ,IAAI,KAAK,MAAM,KAAK;AAAA,IACzC;AACA,SAAK,UAAU,MAAM,KAAK,MAAM,KAAK;AACrC,SAAK,kBAAkB,KAAK,UAAU,YAAA;AAEtC;AAAA,MACE;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,EAET;AAAA,EAyBQ,cAAc;AACpB,SAAK,WAAW;AAChB,SAAK;AAAA,MACH,IAAI,MAAM,aAAa,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAE5D;AAAA,EAEQ,kBAAkB,OAAe;AACvC,QAAI,KAAK,aAAa;AACpB,cAAQ,MAAM,MAAM,KAAK,YAAY,MAAM;AAC3C,UAAI,MAAM,CAAC,MAAM,KAAK;AACpB,gBAAQ,MAAM,MAAM,CAAC;AAAA,MACvB;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA,EAEA,QAAQ;AACN,SAAK,MAAM,MAAA;AACX,eAAW,MAAM;AACf,WAAK,MAAM;AAAA,SACR,KAAK,aAAa,UAAU,KAAK;AAAA,QAClC,KAAK,MAAM,MAAM;AAAA,MAAA;AAAA,IAErB,GAAG,CAAC;AAAA,EACN;AAAA,EAGA,sBAAsB;AACpB,QAAI,KAAK,mBAAmB;AAC1B,WAAK,oBAAoB;AACzB;AAAA,IACF;AAEA,SAAK,YAAY,IAAI,UAAU,KAAK,OAAO;AAC3C,SAAK,iBAAiB,KAAK,kBAAkB,KAAK,MAAM,KAAK;AAE7D,SAAK,cAAc,KAAK,UACpB,IAAI,sBAAsB,KAAK,OAAO,CAAC,KACvC;AACJ,SAAK,MAAM,QAAQ;AAAA,MACjB,GAAG,KAAK,WAAW,GAAG,KAAK,cAAc;AAAA,IAAA;AAE3C,SAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAA,CAAM,CAAC;AAC9D,SAAK,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAA,CAAM,CAAC;AAAA,EACjE;AAAA,EAES,SAAS;AAChB,UAAM,KAAK;AACX,UAAM,KAAK;AACX,UAAM,KAAK;AAEX,UAAM,eAAe,KAAK,iBAAiB,KAAK,OAAO;AACvD,UAAM,WAAW,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;AAEnC,WAAO;AAAA;AAAA;AAAA,iBAGM,SAAS;AAAA,MAChB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAAA,CACjB,CAAC;AAAA;AAAA;AAAA;AAAA,mBAIS,SAAS;AAAA,MAChB,WAAW,KAAK,aAAa,CAAC;AAAA,IAAA,CAC/B,CAAC;AAAA;AAAA,YAEA,KAAK,WACH;AAAA;AAAA;AAAA;AAAA,8BAKA,OAAO;AAAA,gCACW,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMrB,SAAS;AAAA,MAChB,kBAAkB,CAAC,KAAK;AAAA,MACxB,yBAAyB,KAAK;AAAA,MAC9B,6BAA6B,KAAK;AAAA,MAClC,sBAAsB,CAAC,KAAK;AAAA,IAAA,CAC7B,CAAC;AAAA;AAAA;AAAA,wBAGU,KAAK,QAAQ;AAAA,qBAChB,KAAK,kBAAkB;AAAA,uBACrB,KAAK,oBAAoB;AAAA;AAAA,cAElC,KAAK,UACH;AAAA;AAAA;AAAA;AAAA,4BAIY,KAAK,OAAO;AAAA;AAAA,oBAGxB;AAAA;AAAA,wBAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMH,SAAS;AAAA,MAChB,kBAAkB,CAAC,KAAK,WAAW,CAAC,KAAK;AAAA,MACzC,iBAAiB,KAAK,WAAW,CAAC,KAAK;AAAA,MACvC,yBAAyB,KAAK;AAAA,MAC9B,6BAA6B,KAAK;AAAA,MAClC,sBAAsB,CAAC,KAAK;AAAA,MAC5B,YAAY,KAAK;AAAA,MACjB,QAAQ,CAAC,KAAK;AAAA,IAAA,CACf,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIU,KAAK,QAAQ;AAAA,oBACjB,KAAK,KAAK;AAAA,qBACT,KAAK,WAAW;AAAA,qBAChB,KAAK,WAAW;AAAA,oBACjB,KAAK,UAAU;AAAA,uBACZ,KAAK,aAAa;AAAA,sBACnB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrC;AACF;AArVE,gBAAA;AAAA,EADC,MAAM,QAAQ;AAAA,GATJ,gBAUX,WAAA,SAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAhBhB,gBAiBX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAtBhB,gBAuBX,WAAA,kBAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GA5BhB,gBA6BX,WAAA,eAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAA;AAAS,GAnCC,gBAoCX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzChB,gBA0CX,WAAA,aAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GA/ChB,gBAgDX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GArDhB,gBAsDX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA3DhB,gBA4DX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjEhB,gBAkEX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,MAAA;AAAM,GApEI,gBAqEX,WAAA,YAAA,CAAA;AA+KA,gBAAA;AAAA,EADC,MAAM,WAAW,EAAE,sBAAsB,MAAM;AAAA,GAnPrC,gBAoPX,WAAA,uBAAA,CAAA;AApPW,kBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,eAAA;"}
+{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n  AsYouType,\n  formatIncompletePhoneNumber,\n  getCountryCallingCode,\n  type CountryCode,\n  parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n  onChange,\n  onKeyDown,\n  templateFormatter,\n  templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport { requiredValidator } from '../mixins/validators';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-phone-input': MinidPhoneInput;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part field - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly inputId: string;\n  private readonly validationId: string;\n  private readonly labelId = `mid-code-input-label-${nextUniqueId++}`;\n  private formatter = new AsYouType();\n  private skipCountryUpdate = false; // avoids unwanted update loop\n  private currentEvent = new Event(''); // the event to be emitted after value is set\n  private currentTemplate = '';\n  private hasSlotControler = new HasSlotController(this, 'label');\n\n  @query('input')\n  input!: HTMLInputElement;\n\n  /**\n   * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n   *\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * The phone number without the country code prefix. Example: `\"99999999\"`\n   */\n  @property({ reflect: true })\n  nationalnumber = '';\n\n  /**\n   * The country code of the current phone number value. Example: `\"+47\"`\n   */\n  @property({ reflect: true })\n  countrycode = '';\n\n  /**\n   * Label for the phone input.\n   * Passed label will be encapsulated by a label element.\n   */\n  @property()\n  label = '';\n\n  /**\n   * Hide label visually. Still available for screen readers\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * The country selected. A two letter ISO country code like: `\"NO\"`\n   */\n  @property({ reflect: true })\n  country?: CountryCode;\n\n  /**\n   * Activates invalid styling\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Makes the input read-only, meaning the user cannot change the value.\n   */\n  @property({ type: Boolean })\n  readonly = false;\n\n  @state()\n  hasFocus = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  constructor() {\n    super();\n    nextUniqueId++;\n    this.inputId = `mid-phone-input-input-${nextUniqueId}`;\n    this.validationId = `mid-phone-input-validation-${nextUniqueId}`;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  validationMessageCallback(message: string) {\n    this.invalidmessage = message;\n  }\n\n  resetFormControl() {\n    this.invalidmessage = '';\n  }\n\n  handleCountryClick() {\n    this.dispatchEvent(\n      new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n    );\n  }\n\n  handleCountryKeyDown(event: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(event.key)) {\n      this.dispatchEvent(\n        new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.formatter.input(this.value);\n    this.country = this.formatter.getCountry() ?? this.country;\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n\n    this.value = formatIncompletePhoneNumber(this.value);\n    this.value ||= this.countrycode;\n    this.nationalnumber = this.removePhonePrefix(this.value);\n    this.setValue(this.value.replaceAll(' ', ''));\n\n    setTimeout(() => {\n      this.input.value = `${this.countrycode} ${this.nationalnumber}`;\n    });\n  }\n\n  get parseTemplate() {\n    return templateParser(this.currentTemplate, parsePhoneNumberCharacter);\n  }\n\n  get formatTemplate() {\n    return templateFormatter(this.currentTemplate);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange(event: Event) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-change', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.handleNewValue(event);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n      // don't remove '+' symbol which is the first character\n      event.preventDefault();\n      return;\n    }\n\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.form.requestSubmit();\n        }\n      });\n      return;\n    }\n\n    onKeyDown(\n      event as any,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private handleInput(event: InputEvent) {\n    // Event is dispatched after value is set\n    this.currentEvent = new Event('mid-input', {\n      composed: true,\n      bubbles: true,\n    });\n    this.handleNewValue(event);\n  }\n\n  private handleNewValue(event: Event) {\n    this.formatter.reset();\n\n    if (!this.input.value.startsWith('+')) {\n      this.input.value = `+${this.input.value}`;\n    }\n    this.formatter.input(this.input.value);\n    this.currentTemplate = this.formatter.getTemplate();\n\n    onChange(\n      event as any,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private valueChangeCallback = (value: string) => {\n    const country =\n      value.length < 2\n        ? undefined\n        : (this.formatter.getCountry() ?? this.country);\n\n    if (country !== this.country) {\n      this.country = country;\n      this.countrycode = this.country\n        ? `+${getCountryCallingCode(this.country)}`\n        : '+';\n      this.skipCountryUpdate = true;\n    }\n\n    if (value !== this.value) {\n      this.value = value;\n      this.setValue(this.value.replaceAll(' ', ''));\n      this.nationalnumber = this.removePhonePrefix(value);\n    }\n\n    this.dispatchEvent(this.currentEvent);\n  };\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private removePhonePrefix(value: string) {\n    if (this.countrycode) {\n      value = value.slice(this.countrycode.length);\n      if (value[0] === ' ') {\n        value = value.slice(1);\n      }\n    }\n    return value;\n  }\n\n  focus(options?: FocusOptions): void {\n    this.input.focus(options);\n  }\n\n  @watch('country', { waitUntilFirstUpdate: true })\n  handleCountryChange() {\n    if (this.skipCountryUpdate) {\n      this.skipCountryUpdate = false;\n      return;\n    }\n\n    this.formatter = new AsYouType(this.country);\n    this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n    this.input.value = formatIncompletePhoneNumber(\n      `${this.countrycode}${this.nationalnumber}`\n    );\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override render() {\n    const lg = false;\n    const md = true;\n    const sm = false;\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const hasError = this.invalid || !!this.invalidmessage;\n    const describedBy = this.invalidmessage ? this.validationId : undefined;\n\n    return html`\n      <label\n        id=\"${this.labelId}\"\n        class=\"${classMap({\n          'sr-only': this.hidelabel || !hasLabel,\n        })} mb-2 block items-center gap-1 font-medium\"\n      > \n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })}\"\n      >\n        <label\n          for=\"${this.inputId}\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          ${this.readonly\n            ? html`<mid-icon\n                class=\"size-5\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`\n            : nothing}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        <div part=\"base\" class=\"flex h-12\">\n          <button\n            part=\"country-button\"\n            aria-label=\"Open country selector\"\n            class=\"${classMap({\n              'border-neutral': !this.readonly,\n              'border-neutral-subtle': this.readonly,\n              'bg-neutral-surface-tinted': this.readonly,\n              'bg-neutral-surface': !this.readonly,\n            })} focus-visible:focus-ring flex h-full items-center rounded-l border border-r-0 pl-3\"\n            iconstyled\n            variant=\"tertiary\"\n            ?disabled=${this.readonly}\n            @click=${this.handleCountryClick}\n            @keydown=${this.handleCountryKeyDown}\n          >\n            ${this.country\n              ? html`\n                  <mid-icon\n                    class=\"h-4 w-6 overflow-hidden rounded\"\n                    library=\"country\"\n                    name=\"${this.country}\"\n                  ></mid-icon>\n                `\n              : html`<div\n                  class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n                ></div>`}\n            <mid-icon name=\"chevron-down\"></mid-icon>\n          </button>\n\n          <input\n            id=\"${this.inputId}\"\n            class=\"${classMap({\n              'border-neutral': !hasError && !this.readonly,\n              'border-danger': hasError && !this.readonly,\n              'border-neutral-subtle': this.readonly,\n              'bg-neutral-surface-tinted': this.readonly,\n              'bg-neutral-surface': !this.readonly,\n              'border-2': hasError,\n              border: !hasError,\n            })} focus-visible:focus-ring grow rounded-r px-3\"\n            part=\"phone-number\"\n            type=\"tel\"\n            autocomplete=\"tel\"\n            ?readonly=${this.readonly}\n            value=${this.value}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-invalid=${hasError ? 'true' : 'false'}\n            aria-errormessage=${ifDefined(\n              this.invalidmessage ? this.validationId : undefined\n            )}\n            @input=${this.handleInput}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n            @change=${this.handleChange}\n          />\n        </div>\n        <div\n          class=\"text-danger-subtle mt-2 flex gap-1\"\n          id=\"${this.validationId}\"\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      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"textfield.component.d.ts","sourceRoot":"","sources":["../../src/components/textfield.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAgBrD,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF;;AAqBD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAU;IAClC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAU;IACxC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAU;IACvC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IACzE,OAAO,CAAC,SAAS,CAAC,CAAY;IAC9B,OAAO,CAAC,YAAY,CAAM;IAG1B,KAAK,EAAG,gBAAgB,CAAC;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAGX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,YAAY,CAAC,EAAE,QAAQ,CAAC;IAExB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,cAAc,SAAM;IAGpB,IAAI,EACF,MAAM,GACJ,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,CAAU;IAEpB;;OAEG;IAEH,SAAS,EACP,MAAM,GACJ,MAAM,GACN,KAAK,GACL,KAAK,GACL,OAAO,GACP,SAAS,GACT,SAAS,CAAU;IAEvB;;SAEK;IAEL,SAAS,UAAS;IAElB;;;OAGG;IAEH,cAAc,UAAS;IAEvB;;;OAGG;IAEH,eAAe,UAAS;IAGxB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;;;;OAMG;IAEH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAGhB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAO/B;;IAWQ,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,gBAAgB;IAmBxB,KAAK;IAKL,gBAAgB;IAKhB,UAAU,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;IAKlC,iBAAiB;IAKX,gBAAgB;IAUb,MAAM;CAiKhB"}
+{"version":3,"file":"textfield.component.d.ts","sourceRoot":"","sources":["../../src/components/textfield.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAgBrD,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF;;AAqBD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAU;IAClC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAU;IACxC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAU;IACvC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IACzE,OAAO,CAAC,SAAS,CAAC,CAAY;IAC9B,OAAO,CAAC,YAAY,CAAM;IAG1B,KAAK,EAAG,gBAAgB,CAAC;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAGX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,YAAY,CAAC,EAAE,QAAQ,CAAC;IAExB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtB;;OAEG;IAEH,cAAc,SAAM;IAGpB,IAAI,EACF,MAAM,GACJ,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,CAAU;IAEpB;;OAEG;IAEH,SAAS,EACP,MAAM,GACJ,MAAM,GACN,KAAK,GACL,KAAK,GACL,OAAO,GACP,SAAS,GACT,SAAS,CAAU;IAEvB;;SAEK;IAEL,SAAS,UAAS;IAElB;;;OAGG;IAEH,cAAc,UAAS;IAEvB;;;OAGG;IAEH,eAAe,UAAS;IAGxB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;;;;OAMG;IAEH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAGhB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAO/B;;IAWQ,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,gBAAgB;IAmBxB,KAAK;IAKL,gBAAgB;IAKhB,UAAU,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;IAKlC,iBAAiB;IAKX,gBAAgB;IAUb,MAAM;CAwKhB"}

package/dist/components/textfield.js

@@ -171,6 +171,10 @@ let MinidTextfield = class extends FormControlMixin(
     const hasLabel = !!this.label || !!hasLabelSlot;
     const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
     const isClearIconVisible = hasClearIcon && (typeof this.value === "number" || this.value.length > 0);
+    const describedBy = [
+      this.description ? this.descriptionId : void 0,
+      this.invalidmessage ? this.validationId : void 0
+    ].filter(Boolean).join(" ");
     return html`
       <div
         part="field"
@@ -234,10 +238,11 @@ let MinidTextfield = class extends FormControlMixin(
             ?autofocus=${this.autofocus}
             autocomplete=${ifDefined(this.autocomplete)}
             type=${this.type === "password" && this.passwordvisible ? "text" : this.type}
-            aria-describedby="${ifDefined(
-      this.description && this.descriptionId || void 0
-    )}"
-            aria-errormessage="${this.validationId}"
+            aria-describedby=${ifDefined(describedBy || void 0)}
+            aria-invalid=${this.invalidmessage ? "true" : "false"}
+            aria-errormessage=${ifDefined(
+      this.invalidmessage ? this.validationId : void 0
+    )}
             placeholder=${ifDefined(this.placeholder)}
             minlength=${ifDefined(this.minlength)}
             maxlength=${ifDefined(this.maxlength)}

package/dist/components/textfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"textfield.js","sources":["../../src/components/textfield.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { stringConverter } from '../internal/string-converter';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators';\nimport { watch } from '../internal/watch';\nimport './icon/icon.component.ts';\nimport { MaskInput, type MaskType } from 'maska';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-textfield': MinidTextfield;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\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\nlet nextUniqueId = 0;\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-clear - Emitted when the input value is cleared\n * @event mid-focus - Emitted when input element is focused\n * @event mid-blur - Emitted when focus moves away from input element\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 prefix - Used for decoration to the left of the input\n * @slot suffix - Used for decoration to the right of the input\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n *\n * @csspart base - The input's wrapper that has the input field styling.\n * @csspart input - The internal `<input>` element.\n * @csspart field - The element that wraps the label, input, and help text.\n * @csspart clear-button - The clear button\n * @csspart password-toggle-button - The button for toggling password visibility\n */\n@customElement('mid-textfield')\nexport class MinidTextfield extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly inputId!: string;\n  private readonly descriptionId!: string;\n  private readonly validationId!: string;\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  private inputMask?: MaskInput;\n  private initialValue = '';\n\n  @query('.input')\n  input!: HTMLInputElement;\n\n  @property()\n  label = '';\n\n  @property()\n  description = '';\n\n  @property()\n  value = '';\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ converter: stringConverter })\n  placeholder?: string;\n\n  /**\n   * Autofocus the input field on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * User agent autocomplete hint\n   */\n  @property()\n  autocomplete?: AutoFill;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   *  The maximum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  maxlength?: number;\n\n  /**\n   * The input's minimum value. Only applies to date and number input types.\n   */\n  @property()\n  min?: number | string;\n\n  /**\n   * The input's maximum value. Only applies to date and number input types.\n   */\n  @property()\n  max?: number | string;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  @property()\n  type:\n    'date'\n    | 'datetime-local'\n    | 'email'\n    | 'file'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'\n    | 'week' = 'text';\n\n  /**\n   * For displaying appropriate virtual keyboard\n   */\n  @property()\n  inputmode:\n    'none'\n    | 'text'\n    | 'tel'\n    | 'url'\n    | 'email'\n    | 'numeric'\n    | 'decimal' = 'text';\n\n  /**\n   * Adds a clear button when the input is not empty.\n   * */\n  @property({ type: Boolean })\n  clearable = false;\n\n  /**\n   * Adds a button to toggle the password's visibility.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordtoggle = false;\n\n  /**\n   * Determines wether the password is currently visible.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordvisible = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Visually hides `label` and `description` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * Modify input value based on mask e.g:  `\"##:##\"` = 12:34.\n   * `#`: /[0-9]/\n   * `@`: /[a-zA-Z]/\n   * `*`: /[a-zA-Z0-9]/\n   * For more information go to https://beholdr.github.io/maska\n   */\n  @property()\n  mask?: MaskType;\n\n  @state()\n  hasFocus = false;\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  constructor() {\n    super();\n    nextUniqueId++;\n    this.inputId = `mid-textfield-input-${nextUniqueId}`;\n    this.descriptionId = `mid-textfield-description-${nextUniqueId}`;\n    this.validationId = `mid-textfield-validation-${nextUniqueId}`;\n    this.setValue(this.value);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.initialValue = this.value;\n  }\n\n  disconnectedCallback(): void {\n    this.inputMask?.destroy();\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.form.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange() {\n    this.value = this.input.value;\n    this.dispatchEvent(\n      new Event('mid-change', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleInput() {\n    let tmp_value = this.input.value;\n\n    if (this.type === 'number') {\n      tmp_value = tmp_value.replace(/[^0-9]/g, '');\n    }\n\n    this.value = tmp_value;\n    this.setValue(this.value);\n    this.dispatchEvent(\n      new Event('mid-input', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private handlePasswordToggle() {\n    this.passwordvisible = !this.passwordvisible;\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.preventDefault();\n\n    if (this.value !== '') {\n      this.value = '';\n      this.dispatchEvent(\n        new Event('mid-clear', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-input', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-change', { composed: true, bubbles: true })\n      );\n    }\n\n    this.input.focus();\n  }\n\n  focus() {\n    this.hasFocus = true;\n    this.input.focus();\n  }\n\n  resetFormControl() {\n    this.invalidmessage = '';\n    this.value = this.initialValue;\n  }\n\n  forceError(message?: string): void {\n    super.forceError(message);\n  }\n\n  @watch('value')\n  handleValueUpdate() {\n    this.setValue(this.value);\n  }\n\n  @watch('mask')\n  async handleMaskUpdate() {\n    if (!this.mask) return;\n    await this.updateComplete;\n    this.inputMask?.destroy();\n    this.inputMask = new MaskInput(this.input, {\n      mask: this.mask,\n      eager: true,\n    });\n  }\n\n  override render() {\n    const lg = this.size === 'lg';\n    const md = this.size === 'md';\n    const sm = this.size === 'sm';\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;\n    const isClearIconVisible =\n      hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);\n\n    return html`\n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })} max-w-full\"\n      >\n        <label\n          for=\"${this.inputId}\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          ${this.readonly\n            ? html`<mid-icon\n                class=\"size-5\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`\n            : nothing}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        ${this.description\n          ? html`\n              <div\n                id=\"${this.descriptionId}\"\n                part=\"description\"\n                class=\"${classMap({\n                  'sr-only': this.hidelabel,\n                })} text-neutral-subtle mb-2\"\n              >\n                ${this.description}\n              </div>\n            `\n          : nothing}\n        <div\n          part=\"base\"\n          class=\"${classMap({\n            'border-neutral': !this.invalidmessage && !this.readonly,\n            'border-danger': this.invalidmessage && !this.readonly,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n            'bg-neutral-surface': !this.readonly,\n            border: !this.invalidmessage,\n            'border-2': this.invalidmessage,\n          })} focus-within:focus-ring flex h-12 items-center rounded-md px-3\"\n        >\n          <span class=\"slotted:!mr-2 slotted:rounded flex items-center\">\n            <slot name=\"prefix\"></slot>\n          </span>\n          <input\n            id=\"${this.inputId}\"\n            class=\"${classMap({\n              'w-full': !isClearIconVisible,\n              'w-[calc(100%-var(--spacing)*7)]': isClearIconVisible,\n              '[&::-webkit-search-cancel-button]:appearance-none':\n                this.type === 'search',\n            })} input grow overflow-clip focus-visible:outline-0\"\n            part=\"input\"\n            .value=${live(this.value)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?autofocus=${this.autofocus}\n            autocomplete=${ifDefined(this.autocomplete as any)}\n            type=${this.type === 'password' && this.passwordvisible\n              ? 'text'\n              : this.type}\n            aria-describedby=\"${ifDefined(\n              (this.description && this.descriptionId) || undefined\n            )}\"\n            aria-errormessage=\"${this.validationId}\"\n            placeholder=${ifDefined(this.placeholder)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            pattern=${ifDefined(this.pattern)}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n          />\n          ${isClearIconVisible\n            ? html`\n                <button\n                  part=\"clear-button\"\n                  type=\"button\"\n                  class=\"focus-visible:focus-ring ml-2 flex items-center justify-center rounded-sm\"\n                  aria-label=\"Tøm\"\n                  @click=${this.handleClearClick}\n                >\n                  <mid-icon\n                    class=\"size-7\"\n                    library=\"system\"\n                    name=\"xmark\"\n                  ></mid-icon>\n                </button>\n              `\n            : ''}\n          ${this.passwordtoggle && !this.disabled\n            ? html`\n                <button\n                  part=\"password-toggle-button\"\n                  type=\"button\"\n                  class=\"ml-2 flex items-center justify-center rounded-sm\"\n                  aria-label=${this.passwordvisible\n                    ? 'skjul passord'\n                    : 'vis passord'}\n                  @click=${this.handlePasswordToggle}\n                  tabindex=\"-1\"\n                >\n                  ${this.passwordvisible\n                    ? html` <mid-icon\n                        class=\"size-7\"\n                        library=\"system\"\n                        name=\"eye-slash\"\n                      ></mid-icon>`\n                    : html`\n                        <mid-icon\n                          class=\"size-7\"\n                          library=\"system\"\n                          name=\"eye\"\n                        ></mid-icon>\n                      `}\n                </button>\n              `\n            : ''}\n          <span part=\"suffix\" class=\"slotted:!ml-2 slotted:rounded\">\n            <slot name=\"suffix\"></slot>\n          </span>\n        </div>\n        <div\n          class=\"text-danger-subtle mt-2 flex gap-1\"\n          id=\"${this.validationId}\"\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      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"textfield.js","sources":["../../src/components/textfield.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { stringConverter } from '../internal/string-converter';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators';\nimport { watch } from '../internal/watch';\nimport './icon/icon.component.ts';\nimport { MaskInput, type MaskType } from 'maska';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-textfield': MinidTextfield;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\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\nlet nextUniqueId = 0;\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-clear - Emitted when the input value is cleared\n * @event mid-focus - Emitted when input element is focused\n * @event mid-blur - Emitted when focus moves away from input element\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 prefix - Used for decoration to the left of the input\n * @slot suffix - Used for decoration to the right of the input\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n *\n * @csspart base - The input's wrapper that has the input field styling.\n * @csspart input - The internal `<input>` element.\n * @csspart field - The element that wraps the label, input, and help text.\n * @csspart clear-button - The clear button\n * @csspart password-toggle-button - The button for toggling password visibility\n */\n@customElement('mid-textfield')\nexport class MinidTextfield extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly inputId!: string;\n  private readonly descriptionId!: string;\n  private readonly validationId!: string;\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  private inputMask?: MaskInput;\n  private initialValue = '';\n\n  @query('.input')\n  input!: HTMLInputElement;\n\n  @property()\n  label = '';\n\n  @property()\n  description = '';\n\n  @property()\n  value = '';\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ converter: stringConverter })\n  placeholder?: string;\n\n  /**\n   * Autofocus the input field on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * User agent autocomplete hint\n   */\n  @property()\n  autocomplete?: AutoFill;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   *  The maximum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  maxlength?: number;\n\n  /**\n   * The input's minimum value. Only applies to date and number input types.\n   */\n  @property()\n  min?: number | string;\n\n  /**\n   * The input's maximum value. Only applies to date and number input types.\n   */\n  @property()\n  max?: number | string;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  @property()\n  type:\n    'date'\n    | 'datetime-local'\n    | 'email'\n    | 'file'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'\n    | 'week' = 'text';\n\n  /**\n   * For displaying appropriate virtual keyboard\n   */\n  @property()\n  inputmode:\n    'none'\n    | 'text'\n    | 'tel'\n    | 'url'\n    | 'email'\n    | 'numeric'\n    | 'decimal' = 'text';\n\n  /**\n   * Adds a clear button when the input is not empty.\n   * */\n  @property({ type: Boolean })\n  clearable = false;\n\n  /**\n   * Adds a button to toggle the password's visibility.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordtoggle = false;\n\n  /**\n   * Determines wether the password is currently visible.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordvisible = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Visually hides `label` and `description` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * Modify input value based on mask e.g:  `\"##:##\"` = 12:34.\n   * `#`: /[0-9]/\n   * `@`: /[a-zA-Z]/\n   * `*`: /[a-zA-Z0-9]/\n   * For more information go to https://beholdr.github.io/maska\n   */\n  @property()\n  mask?: MaskType;\n\n  @state()\n  hasFocus = false;\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  constructor() {\n    super();\n    nextUniqueId++;\n    this.inputId = `mid-textfield-input-${nextUniqueId}`;\n    this.descriptionId = `mid-textfield-description-${nextUniqueId}`;\n    this.validationId = `mid-textfield-validation-${nextUniqueId}`;\n    this.setValue(this.value);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.initialValue = this.value;\n  }\n\n  disconnectedCallback(): void {\n    this.inputMask?.destroy();\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.form.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange() {\n    this.value = this.input.value;\n    this.dispatchEvent(\n      new Event('mid-change', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleInput() {\n    let tmp_value = this.input.value;\n\n    if (this.type === 'number') {\n      tmp_value = tmp_value.replace(/[^0-9]/g, '');\n    }\n\n    this.value = tmp_value;\n    this.setValue(this.value);\n    this.dispatchEvent(\n      new Event('mid-input', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private handlePasswordToggle() {\n    this.passwordvisible = !this.passwordvisible;\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.preventDefault();\n\n    if (this.value !== '') {\n      this.value = '';\n      this.dispatchEvent(\n        new Event('mid-clear', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-input', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-change', { composed: true, bubbles: true })\n      );\n    }\n\n    this.input.focus();\n  }\n\n  focus() {\n    this.hasFocus = true;\n    this.input.focus();\n  }\n\n  resetFormControl() {\n    this.invalidmessage = '';\n    this.value = this.initialValue;\n  }\n\n  forceError(message?: string): void {\n    super.forceError(message);\n  }\n\n  @watch('value')\n  handleValueUpdate() {\n    this.setValue(this.value);\n  }\n\n  @watch('mask')\n  async handleMaskUpdate() {\n    if (!this.mask) return;\n    await this.updateComplete;\n    this.inputMask?.destroy();\n    this.inputMask = new MaskInput(this.input, {\n      mask: this.mask,\n      eager: true,\n    });\n  }\n\n  override render() {\n    const lg = this.size === 'lg';\n    const md = this.size === 'md';\n    const sm = this.size === 'sm';\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;\n    const isClearIconVisible =\n      hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);\n    const describedBy = [\n      this.description ? this.descriptionId : undefined,\n      this.invalidmessage ? this.validationId : undefined,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`\n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })} max-w-full\"\n      >\n        <label\n          for=\"${this.inputId}\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          ${this.readonly\n            ? html`<mid-icon\n                class=\"size-5\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`\n            : nothing}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        ${this.description\n          ? html`\n              <div\n                id=\"${this.descriptionId}\"\n                part=\"description\"\n                class=\"${classMap({\n                  'sr-only': this.hidelabel,\n                })} text-neutral-subtle mb-2\"\n              >\n                ${this.description}\n              </div>\n            `\n          : nothing}\n        <div\n          part=\"base\"\n          class=\"${classMap({\n            'border-neutral': !this.invalidmessage && !this.readonly,\n            'border-danger': this.invalidmessage && !this.readonly,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n            'bg-neutral-surface': !this.readonly,\n            border: !this.invalidmessage,\n            'border-2': this.invalidmessage,\n          })} focus-within:focus-ring flex h-12 items-center rounded-md px-3\"\n        >\n          <span class=\"slotted:!mr-2 slotted:rounded flex items-center\">\n            <slot name=\"prefix\"></slot>\n          </span>\n          <input\n            id=\"${this.inputId}\"\n            class=\"${classMap({\n              'w-full': !isClearIconVisible,\n              'w-[calc(100%-var(--spacing)*7)]': isClearIconVisible,\n              '[&::-webkit-search-cancel-button]:appearance-none':\n                this.type === 'search',\n            })} input grow overflow-clip focus-visible:outline-0\"\n            part=\"input\"\n            .value=${live(this.value)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?autofocus=${this.autofocus}\n            autocomplete=${ifDefined(this.autocomplete as any)}\n            type=${this.type === 'password' && this.passwordvisible\n              ? 'text'\n              : this.type}\n            aria-describedby=${ifDefined(describedBy || undefined)}\n            aria-invalid=${this.invalidmessage ? 'true' : 'false'}\n            aria-errormessage=${ifDefined(\n              this.invalidmessage ? this.validationId : undefined\n            )}\n            placeholder=${ifDefined(this.placeholder)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            pattern=${ifDefined(this.pattern)}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n          />\n          ${isClearIconVisible\n            ? html`\n                <button\n                  part=\"clear-button\"\n                  type=\"button\"\n                  class=\"focus-visible:focus-ring ml-2 flex items-center justify-center rounded-sm\"\n                  aria-label=\"Tøm\"\n                  @click=${this.handleClearClick}\n                >\n                  <mid-icon\n                    class=\"size-7\"\n                    library=\"system\"\n                    name=\"xmark\"\n                  ></mid-icon>\n                </button>\n              `\n            : ''}\n          ${this.passwordtoggle && !this.disabled\n            ? html`\n                <button\n                  part=\"password-toggle-button\"\n                  type=\"button\"\n                  class=\"ml-2 flex items-center justify-center rounded-sm\"\n                  aria-label=${this.passwordvisible\n                    ? 'skjul passord'\n                    : 'vis passord'}\n                  @click=${this.handlePasswordToggle}\n                  tabindex=\"-1\"\n                >\n                  ${this.passwordvisible\n                    ? html` <mid-icon\n                        class=\"size-7\"\n                        library=\"system\"\n                        name=\"eye-slash\"\n                      ></mid-icon>`\n                    : html`\n                        <mid-icon\n                          class=\"size-7\"\n                          library=\"system\"\n                          name=\"eye\"\n                        ></mid-icon>\n                      `}\n                </button>\n              `\n            : ''}\n          <span part=\"suffix\" class=\"slotted:!ml-2 slotted:rounded\">\n            <slot name=\"suffix\"></slot>\n          </span>\n        </div>\n        <div\n          class=\"text-danger-subtle mt-2 flex gap-1\"\n          id=\"${this.validationId}\"\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      </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.138",
+  "version": "0.0.140",
   "description": "MinID Web Components",
   "author": "Digitaliseringsdirektoratet",
   "license": "MIT",