@felleslosninger/minid-elements 0.0.140 → 0.1.1

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

@@ -48,7 +48,7 @@ export declare class MinidRadio extends MinidRadio_base {
      * Sets focus on the radio button.
      */
     focus(options?: FocusOptions): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=radio.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.component.d.ts","sourceRoot":"","sources":["../../src/components/radio.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAO5C,OAAO,0BAA0B,CAAC;AAElC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AAcD;;;;;;;;;GASG;AACH,qBACa,UAAW,SAAQ,eAA4C;IAE1E,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;OAEG;IAEH,IAAI,SAAY;IAEhB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAEhB,qBAAqB,IAAI,OAAO;IAIhC,IAAI,gBAAgB,qBAEnB;;IASD,iBAAiB;IAQjB,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,WAAW;IAYnB,oBAAoB;IAKpB,iBAAiB;IAIjB;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAInB,MAAM;CAwBhB"}
+{"version":3,"file":"radio.component.d.ts","sourceRoot":"","sources":["../../src/components/radio.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C,OAAO,0BAA0B,CAAC;AAElC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AAcD;;;;;;;;;GASG;AACH,qBACa,UAAW,SAAQ,eAA4C;IAE1E,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;OAEG;IAEH,IAAI,SAAY;IAEhB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAEhB,qBAAqB,IAAI,OAAO;IAIhC,IAAI,gBAAgB,qBAEnB;;IASD,iBAAiB;IAQjB,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,WAAW;IAYnB,oBAAoB;IAKpB,iBAAiB;IAIjB;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAInB,MAAM;CAqBhB"}

package/dist/components/radio.js

@@ -1,7 +1,6 @@
 import { css, LitElement, html } from "lit";
 import { query, property, customElement } from "lit/decorators.js";
 import { live } from "lit/directives/live.js";
-import { classMap } from "lit/directives/class-map.js";
 import { watch } from "../internal/watch.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import { FormControlMixin } from "../mixins/form-control.mixin.js";
@@ -99,26 +98,23 @@ let MinidRadio = class extends FormControlMixin(styled(LitElement, styles)) {
   }
   render() {
     return html`
+    <ds-field class="ds-field">
+      <input
+        type="radio"
+        part="radio"
+        name="${this.name}"
+        class="ds-input"
+        ?checked=${live(this.checked)}
+        ?disabled=${this.disabled}
+        @keydown=${this.handleKeydown}
+      />
       <label
         part="label"
-        class="has-disabled:opacity-disabled grid cursor-pointer grid-cols-[auto_1fr] gap-2 has-disabled:cursor-not-allowed"
+        class="ds-label"
       >
-        <input
-          type="radio"
-          part="radio"
-          name="${this.name}"
-          class="${classMap({
-      "bg-neutral": !this.invalid,
-      "border-neutral": !this.invalid,
-      "bg-danger-tinted": this.invalid,
-      "border-danger-base": this.invalid
-    })} checked:bg-accent-base checked:before:bg-neutral focus-visible:focus-ring-sm checked:border-accent-base my-0.5 grid size-6 cursor-pointer appearance-none place-content-center rounded-full border-2 p-0.5 shadow-none before:size-2.5 before:scale-0 before:rounded-full before:transition-transform before:duration-100 checked:before:scale-100 disabled:cursor-not-allowed"
-          ?checked=${live(this.checked)}
-          ?disabled=${this.disabled}
-          @keydown=${this.handleKeydown}
-        />
         <slot></slot>
       </label>
+    </ds-field>
     `;
   }
 };

package/dist/components/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../src/components/radio.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport './icon/icon.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-radio': MinidRadio;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n      cursor: pointer;\n    }\n    :host:has(input:disabled) {\n      cursor: not-allowed;\n    }\n  `,\n];\n\n/**\n *\n * @slot -- The radio's label\n *\n * @event mid-blur - Emitted when the control loses focus.\n * @event mid-focus - Emitted when the control gains focus.\n *\n * @csspart radio - Select the radio input element\n * @csspart label - Select the label element\n */\n@customElement('mid-radio')\nexport class MinidRadio extends FormControlMixin(styled(LitElement, styles)) {\n  @query('input[type=\"radio\"]')\n  input!: HTMLInputElement;\n\n  /**\n   * The name of the radio, used to bind together multiple radios.\n   */\n  @property()\n  name = 'option';\n\n  /**\n   *  The radio button's checked state.\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * The radio's value. When selected, the radio group will receive this value.\n   */\n  @property()\n  value = '';\n\n  /**\n   * Disables the radio button.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('focus', this.handleFocus);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'presentation');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n\n    this.classList.add('rounded');\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.classList.remove('shadow-focus-visible');\n    this.dispatchEvent(\n      new Event('mid-blur', { composed: true, bubbles: true })\n    );\n  }\n\n  private handleFocus() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.focus();\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.checked = true;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('checked', { waitUntilFirstUpdate: true })\n  handleCheckChange() {\n    this.input.checked = this.checked;\n  }\n\n  /**\n   * Sets focus on the radio button.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  override render() {\n    return html`\n      <label\n        part=\"label\"\n        class=\"has-disabled:opacity-disabled grid cursor-pointer grid-cols-[auto_1fr] gap-2 has-disabled:cursor-not-allowed\"\n      >\n        <input\n          type=\"radio\"\n          part=\"radio\"\n          name=\"${this.name}\"\n          class=\"${classMap({\n            'bg-neutral': !this.invalid,\n            'border-neutral': !this.invalid,\n            'bg-danger-tinted': this.invalid,\n            'border-danger-base': this.invalid,\n          })} checked:bg-accent-base checked:before:bg-neutral focus-visible:focus-ring-sm checked:border-accent-base my-0.5 grid size-6 cursor-pointer appearance-none place-content-center rounded-full border-2 p-0.5 shadow-none before:size-2.5 before:scale-0 before:rounded-full before:transition-transform before:duration-100 checked:before:scale-100 disabled:cursor-not-allowed\"\n          ?checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          @keydown=${this.handleKeydown}\n        />\n        <slot></slot>\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"radio.js","sources":["../../src/components/radio.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport './icon/icon.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-radio': MinidRadio;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: inline-flex;\n      cursor: pointer;\n    }\n    :host:has(input:disabled) {\n      cursor: not-allowed;\n    }\n  `,\n];\n\n/**\n *\n * @slot -- The radio's label\n *\n * @event mid-blur - Emitted when the control loses focus.\n * @event mid-focus - Emitted when the control gains focus.\n *\n * @csspart radio - Select the radio input element\n * @csspart label - Select the label element\n */\n@customElement('mid-radio')\nexport class MinidRadio extends FormControlMixin(styled(LitElement, styles)) {\n  @query('input[type=\"radio\"]')\n  input!: HTMLInputElement;\n\n  /**\n   * The name of the radio, used to bind together multiple radios.\n   */\n  @property()\n  name = 'option';\n\n  /**\n   *  The radio button's checked state.\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * The radio's value. When selected, the radio group will receive this value.\n   */\n  @property()\n  value = '';\n\n  /**\n   * Disables the radio button.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('focus', this.handleFocus);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'presentation');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n\n    this.classList.add('rounded');\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.classList.remove('shadow-focus-visible');\n    this.dispatchEvent(\n      new Event('mid-blur', { composed: true, bubbles: true })\n    );\n  }\n\n  private handleFocus() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.focus();\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.checked = true;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('checked', { waitUntilFirstUpdate: true })\n  handleCheckChange() {\n    this.input.checked = this.checked;\n  }\n\n  /**\n   * Sets focus on the radio button.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  override render() {\n    return html`\n    <ds-field class=\"ds-field\">\n      <input\n        type=\"radio\"\n        part=\"radio\"\n        name=\"${this.name}\"\n        class=\"ds-input\"\n        ?checked=${live(this.checked)}\n        ?disabled=${this.disabled}\n        @keydown=${this.handleKeydown}\n      />\n      <label\n        part=\"label\"\n        class=\"ds-label\"\n      >\n        <slot></slot>\n      </label>\n    </ds-field>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-import { MinidTextfield } from './textfield.component.ts';
 declare global {
     interface HTMLElementTagNameMap {
         'mid-search': MinidSearch;
@@ -12,10 +11,14 @@ declare const MinidSearch_base: typeof LitElement;
  * @event mid-clear - Emitted when the input value is cleared
  * @event mid-focus - Emitted when input element is focused
  * @event mid-blur - Emitted when focus moves away from input element
+ *
+ * @csspart base - The search wrapper element
+ * @csspart input - The internal `<input>` element
+ * @csspart clear-button - The clear button
  */
 export declare class MinidSearch extends MinidSearch_base {
-    textField: MinidTextfield;
-    size: 'sm' | 'md' | 'lg';
+    constructor();
+    input: HTMLInputElement;
     label: string;
     placeholder: string;
     value: string;
@@ -24,8 +27,12 @@ export declare class MinidSearch extends MinidSearch_base {
      */
     debounce: number;
     private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    private handleClear;
     focus(): void;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=search.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"search.component.d.ts","sourceRoot":"","sources":["../../src/components/search.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG1D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAED;;;;;;GAMG;AACH,qBACa,WAAY,SAAQ,gBAAkB;IAEjD,SAAS,EAAG,cAAc,CAAC;IAG3B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,SAAK;IAEb,OAAO,CAAC,WAAW,CAKjB;IAEF,KAAK;IAII,MAAM;CAuBhB"}
+{"version":3,"file":"search.component.d.ts","sourceRoot":"","sources":["../../src/components/search.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAUrD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAUD;;;;;;;;;;GAUG;AACH,qBACa,WAAY,SAAQ,gBAA0B;;IAOzD,KAAK,EAAG,gBAAgB,CAAC;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,SAAK;IAEb,OAAO,CAAC,WAAW,CAKjB;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,WAAW;IAanB,KAAK;IAII,MAAM;CAoChB"}

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 import { MaskType } from 'maska';
 declare global {
     interface HTMLElementTagNameMap {
@@ -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.
@@ -112,6 +112,8 @@ export declare class MinidTextfield extends MinidTextfield_base {
     static get formControlValidators(): import('../types/validator.type.ts').Validator[];
     constructor();
     connectedCallback(): void;
+    get validationTarget(): HTMLInputElement;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
     private handleKeydown;
     private handleBlur;
@@ -125,7 +127,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,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAiB1E,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,qDAQ/B;;IAYQ,iBAAiB,IAAI,IAAI;IAKlC,IAAI,gBAAgB,qBAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKhE,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"}