@felleslosninger/minid-elements 0.0.140 → 0.1.0

package/dist/components/search.js

@@ -1,11 +1,12 @@
-import { LitElement, html } from "lit";
+import { css, LitElement, nothing, html } from "lit";
 import { query, property, customElement } from "lit/decorators.js";
 import { styled } from "../mixins/tailwind.mixin.js";
-import "./textfield.js";
-import "./icon/icon.js";
-import "./button.js";
 import { live } from "lit/directives/live.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { debounce } from "../internal/debounce.js";
+import { getLang } from "../utilities/lang.js";
+import { getTranslations } from "../utilities/translations.js";
+import { L as LangController } from "../lang.controller-P4W-9ipy.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,54 +17,97 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let MinidSearch = class extends styled(LitElement) {
+const styles = [
+  css`
+    :host {
+      display: block;
+    }
+  `
+];
+let MinidSearch = class extends styled(LitElement, styles) {
   constructor() {
-    super(...arguments);
-    this.size = "md";
+    super();
     this.label = "";
     this.placeholder = "";
     this.value = "";
     this.debounce = 0;
     this.handleInput = () => {
-      this.value = this.textField.value;
+      this.value = this.input.value;
       this.dispatchEvent(
         new Event("mid-input", { composed: true, bubbles: true })
       );
     };
+    new LangController(this);
+  }
+  handleChange() {
+    this.value = this.input.value;
+    this.dispatchEvent(
+      new Event("mid-change", { composed: true, bubbles: true })
+    );
+  }
+  handleFocus() {
+    this.dispatchEvent(
+      new Event("mid-focus", { composed: true, bubbles: true })
+    );
+  }
+  handleBlur() {
+    this.dispatchEvent(
+      new Event("mid-blur", { composed: true, bubbles: true })
+    );
+  }
+  handleClear(event) {
+    event.preventDefault();
+    this.value = "";
+    this.input.value = "";
+    this.dispatchEvent(
+      new Event("mid-clear", { composed: true, bubbles: true })
+    );
+    this.dispatchEvent(
+      new Event("mid-input", { composed: true, bubbles: true })
+    );
+    this.input.focus();
   }
   focus() {
-    this.textField.focus();
+    this.input.focus();
   }
   render() {
+    const lang = getLang(this);
+    const t = getTranslations(lang);
     return html`
-      <mid-textfield
-        .value=${live(this.value)}
-        type="search"
-        size=${this.size}
-        label=${this.label}
-        placeholder=${this.placeholder}
-        @mid-input=${debounce(this.handleInput, this.debounce, {
+    <ds-field class="ds-field" lang=${lang}>
+      ${this.label ? html`<label class="ds-label mb-2">${this.label}</label>` : nothing}
+      <div part="base" class="ds-search">
+        <input
+          part="input"
+          class="ds-input"
+          type="search"
+          .value=${live(this.value)}
+          placeholder=${ifDefined(this.placeholder || "")}
+          aria-label=${ifDefined(this.label || void 0)}
+          @input=${debounce(this.handleInput, this.debounce, {
       stopPropagation: true
     })}
-        clearable
-      >
-        <mid-icon
-          slot="prefix"
-          class="size-6"
-          library="system"
-          name="magnifying-glass"
-        >
-        </mid-icon>
-      </mid-textfield>
+          @change=${this.handleChange}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+        <button
+          part="clear-button"
+          class="ds-button"
+          data-icon="true"
+          data-variant="tertiary"
+          type="reset"
+          aria-label=${t.clear}
+          @click=${this.handleClear}
+        ></button>
+      </div>
+    </ds-field>
     `;
   }
 };
 __decorateClass([
-  query("mid-textfield")
-], MinidSearch.prototype, "textField", 2);
-__decorateClass([
-  property()
-], MinidSearch.prototype, "size", 2);
+  query("input")
+], MinidSearch.prototype, "input", 2);
 __decorateClass([
   property()
 ], MinidSearch.prototype, "label", 2);

package/dist/components/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","sources":["../../src/components/search.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './textfield.component';\nimport './icon/icon.component';\nimport './button.component.ts';\nimport { live } from 'lit/directives/live.js';\nimport { MinidTextfield } from './textfield.component.ts';\nimport { debounce } from '../internal/debounce.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-search': MinidSearch;\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-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 */\n@customElement('mid-search')\nexport class MinidSearch extends styled(LitElement) {\n  @query('mid-textfield')\n  textField!: MinidTextfield;\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property()\n  label = '';\n\n  @property()\n  placeholder = '';\n\n  @property()\n  value = '';\n\n  /**\n   * Debounce the `mid-input` event by a number of milliseconds\n   */\n  @property({ type: Number, reflect: true })\n  debounce = 0;\n\n  private handleInput = () => {\n    this.value = this.textField.value;\n    this.dispatchEvent(\n      new Event('mid-input', { composed: true, bubbles: true })\n    );\n  };\n\n  focus() {\n    this.textField.focus();\n  }\n\n  override render() {\n    return html`\n      <mid-textfield\n        .value=${live(this.value)}\n        type=\"search\"\n        size=${this.size}\n        label=${this.label}\n        placeholder=${this.placeholder}\n        @mid-input=${debounce(this.handleInput, this.debounce, {\n          stopPropagation: true,\n        })}\n        clearable\n      >\n        <mid-icon\n          slot=\"prefix\"\n          class=\"size-6\"\n          library=\"system\"\n          name=\"magnifying-glass\"\n        >\n        </mid-icon>\n      </mid-textfield>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAwBO,IAAM,cAAN,cAA0B,OAAO,UAAU,EAAE;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA;AAKL,SAAA,OAA2B;AAG3B,SAAA,QAAQ;AAGR,SAAA,cAAc;AAGd,SAAA,QAAQ;AAMR,SAAA,WAAW;AAEX,SAAQ,cAAc,MAAM;AAC1B,WAAK,QAAQ,KAAK,UAAU;AAC5B,WAAK;AAAA,QACH,IAAI,MAAM,aAAa,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,MAAA;AAAA,IAE5D;AAAA,EAAA;AAAA,EAEA,QAAQ;AACN,SAAK,UAAU,MAAA;AAAA,EACjB;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,iBAEM,KAAK,KAAK,KAAK,CAAC;AAAA;AAAA,eAElB,KAAK,IAAI;AAAA,gBACR,KAAK,KAAK;AAAA,sBACJ,KAAK,WAAW;AAAA,qBACjB,SAAS,KAAK,aAAa,KAAK,UAAU;AAAA,MACrD,iBAAiB;AAAA,IAAA,CAClB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYR;AACF;AAtDE,gBAAA;AAAA,EADC,MAAM,eAAe;AAAA,GADX,YAEX,WAAA,aAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAJC,YAKX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAPC,YAQX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAVC,YAWX,WAAA,eAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAbC,YAcX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAnB9B,YAoBX,WAAA,YAAA,CAAA;AApBW,cAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,WAAA;"}
+{"version":3,"file":"search.js","sources":["../../src/components/search.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { live } from 'lit/directives/live.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { debounce } from '../internal/debounce.ts';\nimport { getLang } from '../utilities/lang';\nimport { getTranslations } from '../utilities/translations';\nimport { LangController } from '../controllers/lang.controller.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-search': MinidSearch;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\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-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 *\n * @csspart base - The search wrapper element\n * @csspart input - The internal `<input>` element\n * @csspart clear-button - The clear button\n */\n@customElement('mid-search')\nexport class MinidSearch extends styled(LitElement, styles) {\n  constructor() {\n    super();\n    new LangController(this);\n  }\n\n  @query('input')\n  input!: HTMLInputElement;\n\n  @property()\n  label = '';\n\n  @property()\n  placeholder = '';\n\n  @property()\n  value = '';\n\n  /**\n   * Debounce the `mid-input` event by a number of milliseconds\n   */\n  @property({ type: Number, reflect: true })\n  debounce = 0;\n\n  private handleInput = () => {\n    this.value = this.input.value;\n    this.dispatchEvent(\n      new Event('mid-input', { composed: true, bubbles: true })\n    );\n  };\n\n  private handleChange() {\n    this.value = this.input.value;\n    this.dispatchEvent(\n      new Event('mid-change', { composed: true, bubbles: true })\n    );\n  }\n\n  private handleFocus() {\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private handleBlur() {\n    this.dispatchEvent(\n      new Event('mid-blur', { composed: true, bubbles: true })\n    );\n  }\n\n  private handleClear(event: Event) {\n    event.preventDefault();\n    this.value = '';\n    this.input.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.input.focus();\n  }\n\n  focus() {\n    this.input.focus();\n  }\n\n  override render() {\n    const lang = getLang(this);\n    const t = getTranslations(lang);\n    return html`\n    <ds-field class=\"ds-field\" lang=${lang}>\n      ${this.label\n        ? html`<label class=\"ds-label mb-2\">${this.label}</label>`\n        : nothing}\n      <div part=\"base\" class=\"ds-search\">\n        <input\n          part=\"input\"\n          class=\"ds-input\"\n          type=\"search\"\n          .value=${live(this.value)}\n          placeholder=${ifDefined(this.placeholder || '')}\n          aria-label=${ifDefined(this.label || undefined)}\n          @input=${debounce(this.handleInput, this.debounce, {\n            stopPropagation: true,\n          })}\n          @change=${this.handleChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        <button\n          part=\"clear-button\"\n          class=\"ds-button\"\n          data-icon=\"true\"\n          data-variant=\"tertiary\"\n          type=\"reset\"\n          aria-label=${t.clear}\n          @click=${this.handleClear}\n        ></button>\n      </div>\n    </ds-field>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAKF;AAcO,IAAM,cAAN,cAA0B,OAAO,YAAY,MAAM,EAAE;AAAA,EAC1D,cAAc;AACZ,UAAA;AAQF,SAAA,QAAQ;AAGR,SAAA,cAAc;AAGd,SAAA,QAAQ;AAMR,SAAA,WAAW;AAEX,SAAQ,cAAc,MAAM;AAC1B,WAAK,QAAQ,KAAK,MAAM;AACxB,WAAK;AAAA,QACH,IAAI,MAAM,aAAa,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,MAAA;AAAA,IAE5D;AA1BE,QAAI,eAAe,IAAI;AAAA,EACzB;AAAA,EA2BQ,eAAe;AACrB,SAAK,QAAQ,KAAK,MAAM;AACxB,SAAK;AAAA,MACH,IAAI,MAAM,cAAc,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAE7D;AAAA,EAEQ,cAAc;AACpB,SAAK;AAAA,MACH,IAAI,MAAM,aAAa,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAE5D;AAAA,EAEQ,aAAa;AACnB,SAAK;AAAA,MACH,IAAI,MAAM,YAAY,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAE3D;AAAA,EAEQ,YAAY,OAAc;AAChC,UAAM,eAAA;AACN,SAAK,QAAQ;AACb,SAAK,MAAM,QAAQ;AACnB,SAAK;AAAA,MACH,IAAI,MAAM,aAAa,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,IAAA;AAE1D,SAAK;AAAA,MACH,IAAI,MAAM,aAAa,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,IAAA;AAE1D,SAAK,MAAM,MAAA;AAAA,EACb;AAAA,EAEA,QAAQ;AACN,SAAK,MAAM,MAAA;AAAA,EACb;AAAA,EAES,SAAS;AAChB,UAAM,OAAO,QAAQ,IAAI;AACzB,UAAM,IAAI,gBAAgB,IAAI;AAC9B,WAAO;AAAA,sCAC2B,IAAI;AAAA,QAClC,KAAK,QACH,oCAAoC,KAAK,KAAK,aAC9C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAME,KAAK,KAAK,KAAK,CAAC;AAAA,wBACX,UAAU,KAAK,eAAe,EAAE,CAAC;AAAA,uBAClC,UAAU,KAAK,SAAS,MAAS,CAAC;AAAA,mBACtC,SAAS,KAAK,aAAa,KAAK,UAAU;AAAA,MACjD,iBAAiB;AAAA,IAAA,CAClB,CAAC;AAAA,oBACQ,KAAK,YAAY;AAAA,mBAClB,KAAK,WAAW;AAAA,kBACjB,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAQV,EAAE,KAAK;AAAA,mBACX,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjC;AACF;AAhGE,gBAAA;AAAA,EADC,MAAM,OAAO;AAAA,GANH,YAOX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GATC,YAUX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAZC,YAaX,WAAA,eAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAfC,YAgBX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GArB9B,YAsBX,WAAA,YAAA,CAAA;AAtBW,cAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,WAAA;"}

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

@@ -9,7 +9,7 @@ declare const MinidSpinner_base: typeof LitElement;
  * Size and color can be adjusted with `font-size` and `color` css properties
  */
 export declare class MinidSpinner extends MinidSpinner_base {
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=spinner.component.d.ts.map

package/dist/components/step-indicator.component.d.ts

@@ -8,7 +8,7 @@ declare const MinidStepIndicator_base: typeof LitElement;
 export declare class MinidStepIndicator extends MinidStepIndicator_base {
     steps: number;
     current: number;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=step-indicator.component.d.ts.map

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

@@ -74,7 +74,7 @@ export declare class MinidTextfield extends MinidTextfield_base {
     inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal';
     /**
      * Adds a clear button when the input is not empty.
-     * */
+     */
     clearable: boolean;
     /**
      * Adds a button to toggle the password's visibility.
@@ -125,7 +125,7 @@ export declare class MinidTextfield extends MinidTextfield_base {
     forceError(message?: string): void;
     handleValueUpdate(): void;
     handleMaskUpdate(): Promise<void>;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=textfield.component.d.ts.map

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;CAwKhB"}
+{"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;AAKjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF;;AAyBD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,cAAe,SAAQ,mBAA4C;IAC9E,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,CAA4D;IAC7F,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,EACA,MAAM,GACN,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,EACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,KAAK,GACL,OAAO,GACP,SAAS,GACT,SAAS,CAAU;IAEvB;;OAEG;IAEH,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;;IAYQ,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,aAAa;IAarB,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;CA8IhB"}

package/dist/components/textfield.js

@@ -11,6 +11,9 @@ import { requiredValidator, maxLengthValidator, minLengthValidator, patternValid
 import { watch } from "../internal/watch.js";
 import "./icon/icon.js";
 import { MaskInput } from "maska";
+import { getLang } from "../utilities/lang.js";
+import { getTranslations } from "../utilities/translations.js";
+import { L as LangController } from "../lang.controller-P4W-9ipy.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -26,7 +29,7 @@ const styles = [
     :host {
       display: block;
     }
-      
+
     /* Hide increment/decrement buttons on inputs */
     input[type='number']::-webkit-outer-spin-button,
     input[type='number']::-webkit-inner-spin-button,
@@ -35,15 +38,17 @@ const styles = [
         margin: 0;
         -moz-appearance: textfield !important;
     }
+
+    .ds-field-affixes {
+      background: var(--ds-color-neutral-background-tinted);
+    }
   `
 ];
 let nextUniqueId = 0;
-let MinidTextfield = class extends FormControlMixin(
-  styled(LitElement, styles)
-) {
+let MinidTextfield = class extends FormControlMixin(styled(LitElement, styles)) {
   constructor() {
     super();
-    this.hasSlotControler = new HasSlotController(this, "label");
+    this.hasSlotControler = new HasSlotController(this, "label", "prefix", "suffix");
     this.initialValue = "";
     this.label = "";
     this.description = "";
@@ -61,6 +66,7 @@ let MinidTextfield = class extends FormControlMixin(
     this.required = false;
     this.hidelabel = false;
     this.hasFocus = false;
+    new LangController(this);
     nextUniqueId++;
     this.inputId = `mid-textfield-input-${nextUniqueId}`;
     this.descriptionId = `mid-textfield-description-${nextUniqueId}`;
@@ -164,74 +170,55 @@ let MinidTextfield = class extends FormControlMixin(
     });
   }
   render() {
-    const lg = this.size === "lg";
-    const md = this.size === "md";
-    const sm = this.size === "sm";
+    const lang = getLang(this);
+    const t = getTranslations(lang);
     const hasLabelSlot = this.hasSlotControler.test("label");
     const hasLabel = !!this.label || !!hasLabelSlot;
+    const hasPrefix = this.hasSlotControler.test("prefix");
+    const hasSuffix = this.hasSlotControler.test("suffix");
     const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
+    const hasAffixes = hasPrefix || hasSuffix || hasClearIcon || this.passwordtoggle && !this.disabled;
     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
+      <ds-field
         part="field"
-        class="${classMap({
-      "opacity-disabled": this.disabled,
-      "text-body-sm": sm,
-      "text-body-md": md,
-      "text-body-lg": lg
-    })} max-w-full"
+        class="ds-field"
+        data-size=${this.size}
       >
         <label
           for="${this.inputId}"
           class="${classMap({
       "sr-only": this.hidelabel || !hasLabel
-    })} mb-2 inline-flex items-center gap-1 font-medium"
+    })} ds-label"
         >
-          ${this.readonly ? html`<mid-icon
-                class="size-5"
-                library="system"
-                name="padlock-locked-fill"
-              ></mid-icon>` : nothing}
           <slot name="label"> ${this.label} </slot>
         </label>
         ${this.description ? html`
               <div
                 id="${this.descriptionId}"
                 part="description"
+                data-field="description"
                 class="${classMap({
       "sr-only": this.hidelabel
-    })} text-neutral-subtle mb-2"
+    })}"
               >
                 ${this.description}
               </div>
             ` : nothing}
         <div
           part="base"
-          class="${classMap({
-      "border-neutral": !this.invalidmessage && !this.readonly,
-      "border-danger": this.invalidmessage && !this.readonly,
-      "border-neutral-subtle": this.readonly,
-      "bg-neutral-surface-tinted": this.readonly,
-      "bg-neutral-surface": !this.readonly,
-      border: !this.invalidmessage,
-      "border-2": this.invalidmessage
-    })} focus-within:focus-ring flex h-12 items-center rounded-md px-3"
+          class="${hasAffixes ? "ds-field-affixes" : ""}"
         >
-          <span class="slotted:!mr-2 slotted:rounded flex items-center">
-            <slot name="prefix"></slot>
-          </span>
+          ${hasPrefix ? html`<span class="ds-field-affix"><slot name="prefix"></slot></span>` : html`<slot name="prefix"></slot>`}
           <input
             id="${this.inputId}"
-            class="${classMap({
-      "w-full": !isClearIconVisible,
-      "w-[calc(100%-var(--spacing)*7)]": isClearIconVisible,
-      "[&::-webkit-search-cancel-button]:appearance-none": this.type === "search"
-    })} input grow overflow-clip focus-visible:outline-0"
+            class="ds-input"
             part="input"
+            lang=${lang}
             .value=${live(this.value)}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
@@ -249,6 +236,7 @@ let MinidTextfield = class extends FormControlMixin(
             min=${ifDefined(this.min)}
             max=${ifDefined(this.max)}
             pattern=${ifDefined(this.pattern)}
+            inputmode=${this.inputmode}
             @input=${this.handleInput}
             @change=${this.handleChange}
             @focus=${this.handleFocus}
@@ -256,64 +244,60 @@ let MinidTextfield = class extends FormControlMixin(
             @keydown=${this.handleKeydown}
           />
           ${isClearIconVisible ? html`
-                <button
-                  part="clear-button"
-                  type="button"
-                  class="focus-visible:focus-ring ml-2 flex items-center justify-center rounded-sm"
-                  aria-label="Tøm"
-                  @click=${this.handleClearClick}
-                >
-                  <mid-icon
-                    class="size-7"
-                    library="system"
-                    name="xmark"
-                  ></mid-icon>
-                </button>
+                <span class="ds-field-affix" part="clear-button">
+                  <button
+                    type="button"
+                    class="focus-visible:focus-ring flex items-center justify-center rounded-sm"
+                    aria-label=${t.clear}
+                    @click=${this.handleClearClick}
+                  >
+                    <mid-icon
+                      class="size-7"
+                      library="nav-aksel"
+                      name="trash"
+                    ></mid-icon>
+                  </button>
+                </span>
               ` : ""}
           ${this.passwordtoggle && !this.disabled ? html`
-                <button
-                  part="password-toggle-button"
-                  type="button"
-                  class="ml-2 flex items-center justify-center rounded-sm"
-                  aria-label=${this.passwordvisible ? "skjul passord" : "vis passord"}
-                  @click=${this.handlePasswordToggle}
-                  tabindex="-1"
-                >
-                  ${this.passwordvisible ? html` <mid-icon
-                        class="size-7"
-                        library="system"
-                        name="eye-slash"
-                      ></mid-icon>` : html`
-                        <mid-icon
+                <span class="ds-field-affix" part="password-toggle-button">
+                  <button
+                    type="button"
+                    class="focus-visible:focus-ring flex items-center justify-center rounded-sm"
+                    aria-label=${this.passwordvisible ? t.hidePassword : t.showPassword}
+                    @click=${this.handlePasswordToggle}
+                  >
+                    ${this.passwordvisible ? html` <mid-icon
                           class="size-7"
                           library="system"
-                          name="eye"
-                        ></mid-icon>
-                      `}
-                </button>
+                          name="eye-slash"
+                        ></mid-icon>` : html`
+                          <mid-icon
+                            class="size-7"
+                            library="system"
+                            name="eye"
+                          ></mid-icon>
+                        `}
+                  </button>
+                </span>
               ` : ""}
-          <span part="suffix" class="slotted:!ml-2 slotted:rounded">
-            <slot name="suffix"></slot>
-          </span>
+          ${hasSuffix ? html`<span part="suffix" class="ds-field-affix"><slot name="suffix"></slot></span>` : html`<slot name="suffix"></slot>`}
         </div>
-        <div
-          class="text-danger-subtle mt-2 flex gap-1"
+        <p
+          class="ds-validation-message"
+          data-field="validation"
           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>
+        </p>
+      </ds-field>
     `;
   }
 };
 __decorateClass([
-  query(".input")
+  query("input")
 ], MinidTextfield.prototype, "input", 2);
 __decorateClass([
   property()

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    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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"}
+{"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';\nimport { getLang } from '../utilities/lang';\nimport { getTranslations } from '../utilities/translations';\nimport { LangController } from '../controllers/lang.controller.js';\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    .ds-field-affixes {\n      background: var(--ds-color-neutral-background-tinted);\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(styled(LitElement, styles)) {\n  private readonly inputId!: string;\n  private readonly descriptionId!: string;\n  private readonly validationId!: string;\n  private readonly hasSlotControler = new HasSlotController(this, 'label', 'prefix', 'suffix');\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    new LangController(this);\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    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\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 lang = getLang(this);\n    const t = getTranslations(lang);\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const hasPrefix = this.hasSlotControler.test('prefix');\n    const hasSuffix = this.hasSlotControler.test('suffix');\n    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;\n    const hasAffixes = hasPrefix || hasSuffix || hasClearIcon || (this.passwordtoggle && !this.disabled);\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      <ds-field\n        part=\"field\"\n        class=\"ds-field\"\n        data-size=${this.size}\n      >\n        <label\n          for=\"${this.inputId}\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} ds-label\"\n        >\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        ${this.description\n          ? html`\n              <div\n                id=\"${this.descriptionId}\"\n                part=\"description\"\n                data-field=\"description\"\n                class=\"${classMap({\n                  'sr-only': this.hidelabel,\n                })}\"\n              >\n                ${this.description}\n              </div>\n            `\n          : nothing}\n        <div\n          part=\"base\"\n          class=\"${hasAffixes ? 'ds-field-affixes' : ''}\"\n        >\n          ${hasPrefix ? html`<span class=\"ds-field-affix\"><slot name=\"prefix\"></slot></span>` : html`<slot name=\"prefix\"></slot>`}\n          <input\n            id=\"${this.inputId}\"\n            class=\"ds-input\"\n            part=\"input\"\n            lang=${lang}\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            inputmode=${this.inputmode}\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                <span class=\"ds-field-affix\" part=\"clear-button\">\n                  <button\n                    type=\"button\"\n                    class=\"focus-visible:focus-ring flex items-center justify-center rounded-sm\"\n                    aria-label=${t.clear}\n                    @click=${this.handleClearClick}\n                  >\n                    <mid-icon\n                      class=\"size-7\"\n                      library=\"nav-aksel\"\n                      name=\"trash\"\n                    ></mid-icon>\n                  </button>\n                </span>\n              `\n            : ''}\n          ${this.passwordtoggle && !this.disabled\n            ? html`\n                <span class=\"ds-field-affix\" part=\"password-toggle-button\">\n                  <button\n                    type=\"button\"\n                    class=\"focus-visible:focus-ring flex items-center justify-center rounded-sm\"\n                    aria-label=${this.passwordvisible\n                      ? t.hidePassword\n                      : t.showPassword}\n                    @click=${this.handlePasswordToggle}\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                </span>\n              `\n            : ''}\n          ${hasSuffix ? html`<span part=\"suffix\" class=\"ds-field-affix\"><slot name=\"suffix\"></slot></span>` : html`<slot name=\"suffix\"></slot>`}\n        </div>\n        <p\n          class=\"ds-validation-message\"\n          data-field=\"validation\"\n          id=\"${this.validationId}\"\n          aria-live=\"polite\"\n          ?hidden=${!this.invalidmessage}\n        >\n          ${this.invalidmessage}\n        </p>\n      </ds-field>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -88,7 +88,7 @@ export declare class MinidTooltip extends MinidTooltip_base {
      * Hides the tooltip
      */
     hide(): Promise<void>;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=tooltip.component.d.ts.map

package/dist/components/validation-message.component.d.ts

@@ -6,7 +6,7 @@ declare global {
 }
 declare const MinidValidationMessage_base: typeof LitElement;
 export declare class MinidValidationMessage extends MinidValidationMessage_base {
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=validation-message.component.d.ts.map

package/dist/controllers/lang.controller.d.ts

@@ -0,0 +1,14 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Reactive controller that keeps a component in sync with the active language.
+ */
+export declare class LangController implements ReactiveController {
+    private readonly host;
+    private readonly observer;
+    private managed;
+    constructor(host: ReactiveControllerHost & HTMLElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private handleDocumentLangChange;
+}
+//# sourceMappingURL=lang.controller.d.ts.map

package/dist/controllers/lang.controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lang.controller.d.ts","sourceRoot":"","sources":["../../src/controllers/lang.controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAGtE;;GAEG;AACH,qBAAa,cAAe,YAAW,kBAAkB;IACvD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAuC;IAC5D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAmB;IAC5C,OAAO,CAAC,OAAO,CAAS;gBAEZ,IAAI,EAAE,sBAAsB,GAAG,WAAW;IAKtD,aAAa;IAYb,gBAAgB;IAIhB,OAAO,CAAC,wBAAwB;CAOjC"}