@felleslosninger/minid-elements 0.0.98 → 0.0.100

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

@@ -4,16 +4,56 @@ declare global {
         'mid-checkbox': MinidCheckbox;
     }
 }
-declare const MinidCheckbox_base: typeof LitElement & import('../types/mixin-constructor.ts').Constructor<import('../mixins/form-controller.mixin.ts').FormAssociatedMixinInterface>;
+declare const MinidCheckbox_base: import('../types/mixin-constructor.ts').Constructor<import('../types/form-control.ts').FormControlInterface> & typeof LitElement;
+/**
+ *
+ */
 export declare class MinidCheckbox extends MinidCheckbox_base {
-    #private;
+    private input;
+    /**
+     * The name of the checkbox, submitted as a name/value pair with form data.
+     */
+    name: string;
+    /**
+     * The current value of the checkbox, submitted as a name/value pair with form data.
+     */
+    value: string;
     checked: boolean;
     disabled: boolean;
     readonly: boolean;
-    size: 'sm' | 'md' | 'lg';
-    checkboxDescriptionElement: HTMLDivElement;
-    descriptionNodes?: NodeListOf<HTMLElement>;
-    protected firstUpdated(): void;
+    invalid: boolean;
+    required: boolean;
+    static get formControlValidators(): import('../types/validator.type.ts').Validator[];
+    shouldFormValueUpdate(): boolean;
+    get validationTarget(): HTMLInputElement;
+    private handleClick;
+    /**
+     * Simulates a click on the checkbox.
+     */
+    click(): void;
+    /**
+     * Sets focus on the checkbox.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Removes focus from the checkbox.
+     */
+    blur(): void;
+    /** Gets the validity state object */
+    /**
+     *  Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+     */
+    checkValidity(): boolean;
+    /**
+     *  Checks for validity and shows the browser's validation message if the control is invalid.
+     */
+    reportValidity(): boolean;
+    /**
+     * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+     * the custom validation message, call this method with an empty string.
+     */
+    setCustomValidity(message: string): void;
+    handleStateChange(): void;
     render(): import('lit-html').TemplateResult<1>;
 }
 export {};

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

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

package/dist/components/checkbox.js

@@ -1,13 +1,15 @@
 import { LitElement, html } from "lit";
-import { property, query, queryAssignedNodes, customElement } from "lit/decorators.js";
+import { query, property, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { live } from "lit/directives/live.js";
 import { styled } from "../mixins/tailwind.mixin.js";
-import { FormControllerMixin } from "../mixins/form-controller.mixin.js";
+import "./icon/icon.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { FormControlMixin } from "../mixins/form-control.mixin.js";
+import { watch } from "../internal/watch.js";
+import { requiredValidator } from "../mixins/validators.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -16,99 +18,125 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _MinidCheckbox_instances, handleChange_fn, handleClick_fn, updateDescriptionHidden_fn;
-let MinidCheckbox = class extends FormControllerMixin(styled(LitElement)) {
+let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _MinidCheckbox_instances);
+    this.name = "";
+    this.value = "on";
     this.checked = false;
     this.disabled = false;
     this.readonly = false;
-    this.size = "md";
+    this.invalid = false;
+    this.required = false;
+  }
+  static get formControlValidators() {
+    return [requiredValidator];
+  }
+  shouldFormValueUpdate() {
+    return this.checked;
+  }
+  get validationTarget() {
+    return this.input;
+  }
+  handleClick() {
+    this.checked = !this.checked;
+    this.dispatchEvent(new Event("mid-change"));
+  }
+  /**
+   * Simulates a click on the checkbox.
+   */
+  click() {
+    this.input.click();
   }
-  firstUpdated() {
-    __privateMethod(this, _MinidCheckbox_instances, updateDescriptionHidden_fn).call(this);
+  /**
+   * Sets focus on the checkbox.
+   */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /**
+   * Removes focus from the checkbox.
+   */
+  blur() {
+    this.input.blur();
+  }
+  /** Gets the validity state object */
+  /**
+   *  Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /**
+   *  Checks for validity and shows the browser's validation message if the control is invalid.
+   */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+  /**
+   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+  }
+  handleStateChange() {
+    this.setValue(this.value);
   }
   render() {
-    const sm = this.size === "sm";
-    const md = this.size === "md";
-    const lg = this.size === "lg";
+    console.log("invalid: ", this.invalid);
     return html`
-      <div
+      <label
         class="${classMap({
-      "fds-checkbox": true,
-      "fds-paragraph": true,
-      "fds-checkbox--readonly": this.readonly,
-      "fds-paragraph--sm": sm,
-      "fds-checkbox--sm": sm,
-      "fds-paragraph--md": md,
-      "fds-checkbox--md": md,
-      "fds-paragraph--lg": lg,
-      "fds-checkbox--lg": lg
-    })}"
+      "opacity-disabled": this.disabled,
+      "cursor-not-allowed": this.disabled
+    })} grid grid-cols-[auto_1fr] gap-2"
       >
-        <input
-          id="checkbox"
-          class="fds-checkbox__input"
-          type="checkbox"
-          @change=${__privateMethod(this, _MinidCheckbox_instances, handleChange_fn)}
-          @click=${__privateMethod(this, _MinidCheckbox_instances, handleClick_fn)}
-          ?disabled=${this.disabled}
-          ?checked=${this.checked}
-          ?readonly=${this.readonly}
-        />
-        <label
-          for="checkbox"
-          class=${classMap({
-      "fds-label": true,
-      "fds-checkbox__label": true,
-      "fds-label--regular-weight": true,
-      "fds-label--sm": sm,
-      "fds-label--md": md,
-      "fds-label--lg": lg
-    })}
-        >
-          <slot></slot>
-        </label>
-        <div
+        <span
           class="${classMap({
-      "fds-paragraph": true,
-      "fds-checkbox__description": true,
-      "fds-paragraph--sm": sm,
-      "fds-paragraph--md": md,
-      "fds-paragraph--lg": lg
-    })}"
+      "bg-accent-base": !this.readonly && this.checked && !this.invalid,
+      "bg-danger-base": !this.readonly && this.checked && this.invalid,
+      "border-accent-base": !this.readonly && this.checked && !this.invalid,
+      "border-neutral": !this.readonly && !this.checked && !this.invalid,
+      "border-danger-base": !this.readonly && this.invalid,
+      "border-neutral-subtle": this.readonly,
+      "bg-neutral-surface-tinted": this.readonly
+    })} focus-within:focus-ring inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-2"
         >
-          <slot
-            name="description"
-            @slotchange=${__privateMethod(this, _MinidCheckbox_instances, updateDescriptionHidden_fn)}
-          ></slot>
+          <input
+            class="pointer-events-none appearance-none"
+            type="checkbox"
+            value=${ifDefined(this.value)}
+            .checked=${live(this.checked)}
+            ?disabled=${this.disabled}
+            ?checked=${this.checked}
+            ?readonly=${this.readonly}
+            .required=${this.required}
+            @click=${this.handleClick}
+          />
+          ${this.checked ? html`<mid-icon
+                class="${classMap({
+      "text-accent-base-contrast": this.checked && !this.readonly
+    })} size-6 shrink-0 scale-125"
+                name="checkmark"
+              ></mid-icon>` : ""}
+        </span>
+        <div part="label">
+          <slot></slot>
         </div>
-      </div>
+      </label>
     `;
   }
 };
-_MinidCheckbox_instances = /* @__PURE__ */ new WeakSet();
-handleChange_fn = function(event) {
-  this.checked = event.target.checked;
-  if (this.checked) {
-    this.setFormValue("on", "checked");
-  } else {
-    this.setFormValue(null);
-  }
-  this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-};
-handleClick_fn = function(event) {
-  if (this.readonly) {
-    event.preventDefault();
-  }
-};
-updateDescriptionHidden_fn = function() {
-  this.checkboxDescriptionElement.style.display = !this.descriptionNodes?.length ? "none" : "block";
-};
+__decorateClass([
+  query('input[type="checkbox"]')
+], MinidCheckbox.prototype, "input", 2);
+__decorateClass([
+  property()
+], MinidCheckbox.prototype, "name", 2);
+__decorateClass([
+  property()
+], MinidCheckbox.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean })
 ], MinidCheckbox.prototype, "checked", 2);
@@ -119,14 +147,14 @@ __decorateClass([
   property({ type: Boolean })
 ], MinidCheckbox.prototype, "readonly", 2);
 __decorateClass([
-  property({ type: String })
-], MinidCheckbox.prototype, "size", 2);
+  property({ type: Boolean })
+], MinidCheckbox.prototype, "invalid", 2);
 __decorateClass([
-  query(".fds-checkbox__description")
-], MinidCheckbox.prototype, "checkboxDescriptionElement", 2);
+  property({ type: Boolean, reflect: true })
+], MinidCheckbox.prototype, "required", 2);
 __decorateClass([
-  queryAssignedNodes({ slot: "description", flatten: true })
-], MinidCheckbox.prototype, "descriptionNodes", 2);
+  watch(["checked", "value"])
+], MinidCheckbox.prototype, "handleStateChange", 1);
 MinidCheckbox = __decorateClass([
   customElement("mid-checkbox")
 ], MinidCheckbox);

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedNodes,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControllerMixin(styled(LitElement)) {\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: String })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @query('.fds-checkbox__description')\n  checkboxDescriptionElement!: HTMLDivElement;\n\n  @queryAssignedNodes({ slot: 'description', flatten: true })\n  descriptionNodes?: NodeListOf<HTMLElement>;\n\n  #handleChange(event: Event) {\n    this.checked = (event.target as HTMLInputElement).checked;\n    if (this.checked) {\n      this.setFormValue('on', 'checked');\n    } else {\n      this.setFormValue(null);\n    }\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n  }\n\n  #handleClick(event: Event) {\n    if (this.readonly) {\n      event.preventDefault();\n    }\n  }\n\n  #updateDescriptionHidden() {\n    this.checkboxDescriptionElement.style.display = !this.descriptionNodes\n      ?.length\n      ? 'none'\n      : 'block';\n  }\n\n  protected firstUpdated() {\n    this.#updateDescriptionHidden();\n  }\n\n  override render() {\n    const sm = this.size === 'sm';\n    const md = this.size === 'md';\n    const lg = this.size === 'lg';\n\n    return html`\n      <div\n        class=\"${classMap({\n          'fds-checkbox': true,\n          'fds-paragraph': true,\n          'fds-checkbox--readonly': this.readonly,\n          'fds-paragraph--sm': sm,\n          'fds-checkbox--sm': sm,\n          'fds-paragraph--md': md,\n          'fds-checkbox--md': md,\n          'fds-paragraph--lg': lg,\n          'fds-checkbox--lg': lg,\n        })}\"\n      >\n        <input\n          id=\"checkbox\"\n          class=\"fds-checkbox__input\"\n          type=\"checkbox\"\n          @change=${this.#handleChange}\n          @click=${this.#handleClick}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          ?readonly=${this.readonly}\n        />\n        <label\n          for=\"checkbox\"\n          class=${classMap({\n            'fds-label': true,\n            'fds-checkbox__label': true,\n            'fds-label--regular-weight': true,\n            'fds-label--sm': sm,\n            'fds-label--md': md,\n            'fds-label--lg': lg,\n          })}\n        >\n          <slot></slot>\n        </label>\n        <div\n          class=\"${classMap({\n            'fds-paragraph': true,\n            'fds-checkbox__description': true,\n            'fds-paragraph--sm': sm,\n            'fds-paragraph--md': md,\n            'fds-paragraph--lg': lg,\n          })}\"\n        >\n          <slot\n            name=\"description\"\n            @slotchange=${this.#updateDescriptionHidden}\n          ></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,0BAAA,iBAAA,gBAAA;AAkBO,IAAM,gBAAN,cAA4B,oBAAoB,OAAO,UAAU,CAAC,EAAE;AAAA,EAApE,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA,iBAAA,MAAA,wBAAA;AAEK,SAAA,UAAA;AAGC,SAAA,WAAA;AAGA,SAAA,WAAA;AAGgB,SAAA,OAAA;AAAA,EAAA;AAAA,EA+BjB,eAAe;AACvB,oBAAA,MAAK,0BAAL,0BAAA,EAAA,KAAA,IAAA;AAAA,EAAA;AAAA,EAGO,SAAS;AACV,UAAA,KAAK,KAAK,SAAS;AACnB,UAAA,KAAK,KAAK,SAAS;AACnB,UAAA,KAAK,KAAK,SAAS;AAElB,WAAA;AAAA;AAAA,iBAEM,SAAS;AAAA,MAChB,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MACjB,0BAA0B,KAAK;AAAA,MAC/B,qBAAqB;AAAA,MACrB,oBAAoB;AAAA,MACpB,qBAAqB;AAAA,MACrB,oBAAoB;AAAA,MACpB,qBAAqB;AAAA,MACrB,oBAAoB;AAAA,IAAA,CACrB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMU,sBAAK,0BAAa,eAAA,CAAA;AAAA,mBACnB,sBAAK,0BAAY,cAAA,CAAA;AAAA,sBACd,KAAK,QAAQ;AAAA,qBACd,KAAK,OAAO;AAAA,sBACX,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,kBAIjB,SAAS;AAAA,MACf,aAAa;AAAA,MACb,uBAAuB;AAAA,MACvB,6BAA6B;AAAA,MAC7B,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IAAA,CAClB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKO,SAAS;AAAA,MAChB,iBAAiB;AAAA,MACjB,6BAA6B;AAAA,MAC7B,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,IAAA,CACtB,CAAC;AAAA;AAAA;AAAA;AAAA,0BAIc,sBAAK,0BAAwB,0BAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMvD;AAzGO,2BAAA,oBAAA,QAAA;AAmBL,kBAAa,SAAC,OAAc;AACrB,OAAA,UAAW,MAAM,OAA4B;AAClD,MAAI,KAAK,SAAS;AACX,SAAA,aAAa,MAAM,SAAS;AAAA,EAAA,OAC5B;AACL,SAAK,aAAa,IAAI;AAAA,EAAA;AAEnB,OAAA,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC,CAAC;AAC3E;AAEA,iBAAY,SAAC,OAAc;AACzB,MAAI,KAAK,UAAU;AACjB,UAAM,eAAe;AAAA,EAAA;AAEzB;AAEA,6BAAwB,WAAG;AACzB,OAAK,2BAA2B,MAAM,UAAU,CAAC,KAAK,kBAClD,SACA,SACA;AACN;AAtCA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GADhB,cAEX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAJhB,cAKX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAPhB,cAQX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAVf,cAWX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,MAAM,4BAA4B;AAAA,GAbxB,cAcX,WAAA,8BAAA,CAAA;AAGA,gBAAA;AAAA,EADC,mBAAmB,EAAE,MAAM,eAAe,SAAS,KAAM,CAAA;AAAA,GAhB/C,cAiBX,WAAA,oBAAA,CAAA;AAjBW,gBAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,aAAA;"}
+{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from 'src/mixins/validators.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n/**\n *\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Gets the validity state object */\n\n  /**\n   *  Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n   */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /**\n   *  Checks for validity and shows the browser's validation message if the control is invalid.\n   */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n   * the custom validation message, call this method with an empty string.\n   */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n    console.log('invalid: ', this.invalid);\n\n    return html`\n      <label\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'cursor-not-allowed': this.disabled,\n        })} grid grid-cols-[auto_1fr] gap-2\"\n      >\n        <span\n          class=\"${classMap({\n            'bg-accent-base': !this.readonly && this.checked && !this.invalid,\n            'bg-danger-base': !this.readonly && this.checked && this.invalid,\n            'border-accent-base':\n              !this.readonly && this.checked && !this.invalid,\n            'border-neutral': !this.readonly && !this.checked && !this.invalid,\n            'border-danger-base': !this.readonly && this.invalid,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n          })} focus-within:focus-ring inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-2\"\n        >\n          <input\n            class=\"pointer-events-none appearance-none\"\n            type=\"checkbox\"\n            value=${ifDefined(this.value)}\n            .checked=${live(this.checked)}\n            ?disabled=${this.disabled}\n            ?checked=${this.checked}\n            ?readonly=${this.readonly}\n            .required=${this.required}\n            @click=${this.handleClick}\n          />\n          ${this.checked\n            ? html`<mid-icon\n                class=\"${classMap({\n                  'text-accent-base-contrast': this.checked && !this.readonly,\n                })} size-6 shrink-0 scale-125\"\n                name=\"checkmark\"\n              ></mid-icon>`\n            : ''}\n        </span>\n        <div part=\"label\">\n          <slot></slot>\n        </div>\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -7,9 +7,9 @@ declare global {
 }
 declare const MinidCodeInput_base: typeof LitElement & import('../types/mixin-constructor').Constructor<import('../mixins/form-controller.mixin').ConstraintsValidationMixinInterface>;
 export declare class MinidCodeInput extends MinidCodeInput_base {
-    caretColor: string;
-    caretHighlightColor: string;
-    inputId: string;
+    private readonly caretColor;
+    private readonly caretHighlightColor;
+    private readonly inputId;
     inputRef: Ref<HTMLInputElement>;
     value: string;
     label: string;
@@ -23,31 +23,32 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
     /**
      * Display custom error message, and force invalid state
      */
-    _forcedErrorMessage: string;
+    invalidmessage: string;
     /**
      * The length of the code input
      */
     length: number;
-    fontSize: string;
+    fontsize: string;
     renderError: boolean;
-    _localErrorNode: Node | null;
+    localErrorNode: Node | null;
     constructor();
     connectedCallback(): void;
     _whenSettled(): Promise<void>;
     disconnectedCallback(): void;
-    calcInputStyle(): void;
-    autoFillEventHandler(e: AnimationEvent): void;
+    private calcInputStyle;
+    private autoFillEventHandler;
     get selectionEnd(): number | null | undefined;
+    private handleFocusOut;
+    private handleFocusIn;
+    private handleClick;
+    private handleKeydown;
+    private handleChange;
+    private handleSlotchange;
+    private findErrorMessageNode;
     firstUpdated(_changedProperties: PropertyValues): void;
-    focus(options?: FocusOptions): void;
-    onFocusOut(): void;
-    onFocusIn(): void;
     updated(_changedProperties: PropertyValues): void;
+    focus(options?: FocusOptions): void;
     setCustomValidity(error: string): void;
-    onClick(): void;
-    private handleKeydown;
-    handleSlotchange(e: Event): void;
-    _findErrorMessageNode(nodes: Node[]): Node | null;
     render(): import('lit-html').TemplateResult<1>;
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAkB,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAwDD,qBACa,cAAe,SAAQ,mBAEnC;IACC,UAAU,SAAyC;IACnD,mBAAmB,SAAwC;IAC3D,OAAO,SAAsC;IAEtC,QAAQ,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAe;IAGrD,KAAK,SAAM;IAGX,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,SAAS,SAAa;IAEtB;;OAEG;IAEH,mBAAmB,SAAM;IAEzB;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,SAAU;IAGlB,WAAW,UAAS;IAGpB,eAAe,EAAE,IAAI,GAAG,IAAI,CAAQ;;IAa3B,iBAAiB;IAKpB,YAAY;IAST,oBAAoB;IAQ7B,cAAc;IAkBd,oBAAoB,CAAC,CAAC,EAAE,cAAc;IAKtC,IAAI,YAAY,8BAEf;IAED,YAAY,CAAC,kBAAkB,EAAE,cAAc;IAK/C,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,UAAU;IASV,SAAS;IAQT,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAmBjD,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAI/B,OAAO;IAaP,OAAO,CAAC,aAAa;IAkBrB,gBAAgB,CAAC,CAAC,EAAE,KAAK;IAazB,qBAAqB,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,GAAG,IAAI;IAcxC,MAAM;CAoDhB"}
+{"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;AAE5D,OAAO,EAAkB,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,uBAAuB,CAAC;AAE/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAoDD,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAyC;IACpE,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAwC;IAC5E,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsC;IAEvD,QAAQ,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAe;IAGrD,KAAK,SAAM;IAGX,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,SAAS,SAAa;IAEtB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,SAAc;IAGtB,WAAW,UAAS;IAGpB,cAAc,EAAE,IAAI,GAAG,IAAI,CAAQ;;IAa1B,iBAAiB;IAKpB,YAAY;IAST,oBAAoB;IAQ7B,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,oBAAoB;IAK5B,IAAI,YAAY,8BAEf;IAED,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,aAAa,CAMnB;IAEF,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,oBAAoB;IAc5B,YAAY,CAAC,kBAAkB,EAAE,cAAc;IAK/C,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAmBjD,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAItB,MAAM;CA6ChB"}