@felleslosninger/minid-elements 0.0.99 → 0.0.100

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

@@ -22,7 +22,7 @@ declare const MinidAlert_base: typeof LitElement;
 export declare class MinidAlert extends MinidAlert_base {
     private autoHideTimeout?;
     private remainingTimeInterval?;
-    base: HTMLElement;
+    private base;
     /**
      * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
      * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.
@@ -56,11 +56,7 @@ export declare class MinidAlert extends MinidAlert_base {
      */
     iconlabel?: string;
     private remainingTime;
-    notificationContent?: {
-        title?: string;
-        message: string;
-        details?: string;
-    };
+    private notificationContent?;
     firstUpdated(): void;
     private restartAutoHide;
     private pauseAutoHide;

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

@@ -1 +1 @@
-{"version":3,"file":"alert.component.d.ts","sourceRoot":"","sources":["../../src/components/alert.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,OAAO,uBAAuB,CAAC;AAW/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AA4DD;;;;;;;;;;;;;GAaG;AACH,qBACa,UAAW,SAAQ,eAA0B;IACxD,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,qBAAqB,CAAC,CAAS;IAGvC,IAAI,EAAG,WAAW,CAAC;IAEnB;;;OAGG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,QAAQ,SAAY;IAEpB;;OAEG;IAEH,QAAQ,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAU;IAE7D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,OAAO,CAAC,aAAa,CAAiB;IAGtC,mBAAmB,CAAC,EAAE;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF,YAAY;IAIZ,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,cAAc;IAahB,gBAAgB;IAwCtB,oBAAoB;IAIpB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASV;;;;OAIG;IACG,KAAK,CACT,OAAO,EAAE,UAAU,CAAC,qBAAqB,CAAC,EAC1C,QAAQ,CAAC,EAAE,MAAM,EACjB,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,EACjC,QAAQ,UAAO;IA6DR,MAAM;CA2FhB"}
+{"version":3,"file":"alert.component.d.ts","sourceRoot":"","sources":["../../src/components/alert.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,OAAO,uBAAuB,CAAC;AAW/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AAQD;;;;;;;;;;;;;GAaG;AACH,qBACa,UAAW,SAAQ,eAA0B;IACxD,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,qBAAqB,CAAC,CAAS;IAGvC,OAAO,CAAC,IAAI,CAAe;IAE3B;;;OAGG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,QAAQ,SAAY;IAEpB;;OAEG;IAEH,QAAQ,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAU;IAE7D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,OAAO,CAAC,aAAa,CAAiB;IAGtC,OAAO,CAAC,mBAAmB,CAAC,CAI1B;IAEF,YAAY;IAIZ,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,cAAc;IAahB,gBAAgB;IAwCtB,oBAAoB;IAIpB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASV;;;;OAIG;IACG,KAAK,CACT,OAAO,EAAE,UAAU,CAAC,qBAAqB,CAAC,EAC1C,QAAQ,CAAC,EAAE,MAAM,EACjB,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,EACjC,QAAQ,UAAO;IA6DR,MAAM;CAwGhB"}

package/dist/components/alert.js

@@ -21,59 +21,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 const toastStack = Object.assign(document.createElement("div"), {
   className: "mid-toast-stack"
 });
-const styles = [
-  css`
-    [hidden] {
-      display: none !important;
-    }
-
-    .fds-alert__icon {
-      font-size: var(--fds-alert-icon-size);
-    }
-
-    /* .close-button {
-      font-size: 24px;
-      display: inline-flex;
-      align-self: center;
-      padding: 10px;
-      border-radius: 4px;
-      margin-top: -10px;
-      margin-bottom: -10px;
-      color: var(--fds-alert-icon-color);
-    } */
-
-    .close-button:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--fds-alert-icon-color) 20%,
-        var(--fds-alert-background)
-      );
-    }
-
-    .message-details {
-      margin-top: 0.5rem;
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-      padding: 0.75rem;
-      background-color: color-mix(
-        in srgb,
-        var(--fds-alert-icon-color) 20%,
-        var(--fds-alert-background)
-      );
-      border-left: solid 4px
-        color-mix(
-          in srgb,
-          var(--fds-alert-border-color),
-          var(--fds-alert-background)
-        );
-    }
-
-    .message-details pre {
-      white-space: pre-wrap;
-      word-break: break-all;
-    }
-  `
-];
+const styles = [css``];
 let MinidAlert = class extends styled(LitElement, styles) {
   constructor() {
     super(...arguments);
@@ -272,8 +220,21 @@ let MinidAlert = class extends styled(LitElement, styles) {
                   ${this.notificationContent?.title}
                 </h2>`}
             ${this.notificationContent?.message}
-            ${!this.notificationContent?.details ? nothing : html`<div class="message-details">
-                  <pre>${this.notificationContent?.details}</pre>
+            ${!this.notificationContent?.details ? nothing : html`<div
+                  class="${classMap({
+      "border-danger": danger,
+      "border-info": info,
+      "border-success": success,
+      "border-warning": warning,
+      "bg-danger-surface-hover": danger,
+      "bg-info-surface-hover": info,
+      "bg-success-surface-hover": success,
+      "bg-warning-surface-hover": warning
+    })} text-body-sm mt-0.5 border-l-4 p-3"
+                >
+                  <pre class="break-all whitespace-pre-wrap">
+${this.notificationContent?.details}</pre
+                  >
                 </div>`}
           </slot>
         </div>

package/dist/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../src/components/alert.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './icon/icon.component';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { type MidIconName } from '../types/icon-name';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-alert': MinidAlert;\n  }\n}\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'mid-toast-stack',\n});\n\nconst styles = [\n  css`\n    [hidden] {\n      display: none !important;\n    }\n\n    .fds-alert__icon {\n      font-size: var(--fds-alert-icon-size);\n    }\n\n    /* .close-button {\n      font-size: 24px;\n      display: inline-flex;\n      align-self: center;\n      padding: 10px;\n      border-radius: 4px;\n      margin-top: -10px;\n      margin-bottom: -10px;\n      color: var(--fds-alert-icon-color);\n    } */\n\n    .close-button:hover {\n      background-color: color-mix(\n        in srgb,\n        var(--fds-alert-icon-color) 20%,\n        var(--fds-alert-background)\n      );\n    }\n\n    .message-details {\n      margin-top: 0.5rem;\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      padding: 0.75rem;\n      background-color: color-mix(\n        in srgb,\n        var(--fds-alert-icon-color) 20%,\n        var(--fds-alert-background)\n      );\n      border-left: solid 4px\n        color-mix(\n          in srgb,\n          var(--fds-alert-border-color),\n          var(--fds-alert-background)\n        );\n    }\n\n    .message-details pre {\n      white-space: pre-wrap;\n      word-break: break-all;\n    }\n  `,\n];\n\n/**\n * Alerts need to have the `open` attribute to be displayed\n * @csspart base - Select the base of the alert\n *\n * @event mid-show - Emitted when the alert opens.\n * @event mid-after-show - Emitted after the alert opens and all animations are complete.\n * @event mid-hide - Emitted when the alert closes.\n * @event mid-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @slot -- The default slot for the content of the alert\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n@customElement('mid-alert')\nexport class MinidAlert extends styled(LitElement, styles) {\n  private autoHideTimeout?: number;\n  private remainingTimeInterval?: number;\n\n  @query('[part~=\"base\"]')\n  base!: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Enables a close button that allows the user to dismiss the alert.\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number })\n  duration = Infinity;\n\n  /**\n   * Sets color and icon according to severity\n   */\n  @property({ reflect: true })\n  severity: 'warning' | 'info' | 'danger' | 'success' = 'info';\n\n  /**\n   * Sets size of icon, padding and font-size.\n   */\n  @property({ reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Adds a shadow to elevate the component\n   */\n  @property({ type: Boolean })\n  elevated = false;\n\n  /**\n   * Sets the `aria-label` on the icon\n   * Use this to inform screenreaders of severity. Defaults to Norwegian.\n   */\n  @property({ type: String })\n  iconlabel?: string;\n\n  @state()\n  private remainingTime = this.duration;\n\n  @state()\n  notificationContent?: {\n    title?: string;\n    message: string;\n    details?: string;\n  };\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n      this.remainingTime = this.duration;\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  private pauseAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n  }\n\n  private resumeAutoHide() {\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.remainingTime\n      );\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { composed: true, bubbles: true })\n      );\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show');\n      await animateTo(this.base, keyframes, options);\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { composed: true, bubbles: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { composed: true, bubbles: true })\n      );\n\n      clearTimeout(this.autoHideTimeout);\n      clearInterval(this.remainingTimeInterval);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide');\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /**\n   * Shows the alert.\n   */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'mid-after-show');\n  }\n\n  /**\n   * Hides the alert\n   */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'mid-after-hide');\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast(\n    content: MinidAlert['notificationContent'],\n    duration?: number,\n    severity?: MinidAlert['severity'],\n    closable = true\n  ) {\n    return new Promise<void>((resolve) => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      if (content) {\n        this.notificationContent = content;\n      }\n\n      if (severity) {\n        this.severity = severity;\n      }\n\n      if (duration) {\n        this.duration = duration;\n      }\n\n      this.closable = closable;\n      this.elevated = true;\n\n      // We wrap this in a timeout for `getBoundingClientRect` to get the height properly\n      setTimeout(() => {\n        toastStack.appendChild(this);\n\n        animateTo(\n          toastStack,\n          [\n            {\n              transform: `translateY(${this.getBoundingClientRect().height}px)`,\n            },\n            { transform: 'translateY(0px)' },\n          ],\n          { duration: 250, easing: 'ease-out' }\n        );\n      }, 0);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // Force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'mid-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('mid-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  override render() {\n    const danger = this.severity === 'danger';\n    const warning = this.severity === 'warning';\n    const info = this.severity === 'info';\n    const success = this.severity === 'success';\n    const sm = this.size === 'sm';\n    const md = this.size === 'md';\n    const lg = this.size === 'lg';\n    const iconName: MidIconName =\n      (danger && 'xmark-octagon-fill') ||\n      (warning && 'exclamationmark-triangle-fill') ||\n      (success && 'checkmark-circle-fill') ||\n      'information-square-fill';\n    this.iconlabel ??=\n      (danger && 'Feil') ||\n      (warning && 'Advarsel') ||\n      (success && 'Suksess') ||\n      'Informasjon';\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n          'bg-danger-surface-tinted': danger,\n          'bg-info-surface-tinted': info,\n          'bg-success-surface-tinted': success,\n          'bg-warning-surface-tinted': warning,\n          'border-danger': danger,\n          'border-info': info,\n          'border-success': success,\n          'border-warning': warning,\n          'text-danger': danger,\n          'text-info': info,\n          'text-success': success,\n          'text-warning': warning,\n          'shadow-md': this.elevated,\n        })} grid grid-cols-[auto_1fr_auto] gap-2 rounded border p-6\"\n        @mouseenter=${this.pauseAutoHide}\n        @mouseleave=${this.resumeAutoHide}\n      >\n        <mid-icon\n          class=\"${classMap({\n            'text-info-subtle': info,\n            'text-danger-subtle': danger,\n            'text-success-subtle': success,\n            'text-warning-subtle': warning,\n          })} size-7\"\n          name=\"${iconName}\"\n          library=\"system\"\n          alt=${ifDefined(this.iconlabel)}\n        ></mid-icon>\n        <div aria-live=\"polite\">\n          <slot>\n            ${!this.notificationContent?.title\n              ? nothing\n              : html`<h2 class=\"text-heading-xs\">\n                  ${this.notificationContent?.title}\n                </h2>`}\n            ${this.notificationContent?.message}\n            ${!this.notificationContent?.details\n              ? nothing\n              : html`<div class=\"message-details\">\n                  <pre>${this.notificationContent?.details}</pre>\n                </div>`}\n          </slot>\n        </div>\n        ${this.closable\n          ? html`\n              <button\n                class=\"${classMap({\n                  'text-info-subtle': info,\n                  'text-danger-subtle': danger,\n                  'text-success-subtle': success,\n                  'text-warning-subtle': warning,\n                  'hover:bg-danger-surface-hover': danger,\n                  'hover:bg-info-surface-hover': info,\n                  'hover:bg-success-surface-hover': success,\n                  'hover:bg-warning-surface-hover': warning,\n                })} -my-4 flex self-center rounded p-4\"\n                @click=\"${this.hide}\"\n              >\n                <mid-icon class=\"size-6\" name=\"xmark\"> </mid-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, transform: 'translateY(100%)' },\n    { opacity: 1, transform: 'translateY(0px)' },\n  ],\n  options: { duration: 400, easing: 'ease-out' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease-in' },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"alert.js","sources":["../../src/components/alert.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './icon/icon.component';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { type MidIconName } from '../types/icon-name';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-alert': MinidAlert;\n  }\n}\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'mid-toast-stack',\n});\n\nconst styles = [css``];\n\n/**\n * Alerts need to have the `open` attribute to be displayed\n * @csspart base - Select the base of the alert\n *\n * @event mid-show - Emitted when the alert opens.\n * @event mid-after-show - Emitted after the alert opens and all animations are complete.\n * @event mid-hide - Emitted when the alert closes.\n * @event mid-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @slot -- The default slot for the content of the alert\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n@customElement('mid-alert')\nexport class MinidAlert extends styled(LitElement, styles) {\n  private autoHideTimeout?: number;\n  private remainingTimeInterval?: number;\n\n  @query('[part~=\"base\"]')\n  private base!: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Enables a close button that allows the user to dismiss the alert.\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number })\n  duration = Infinity;\n\n  /**\n   * Sets color and icon according to severity\n   */\n  @property({ reflect: true })\n  severity: 'warning' | 'info' | 'danger' | 'success' = 'info';\n\n  /**\n   * Sets size of icon, padding and font-size.\n   */\n  @property({ reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Adds a shadow to elevate the component\n   */\n  @property({ type: Boolean })\n  elevated = false;\n\n  /**\n   * Sets the `aria-label` on the icon\n   * Use this to inform screenreaders of severity. Defaults to Norwegian.\n   */\n  @property({ type: String })\n  iconlabel?: string;\n\n  @state()\n  private remainingTime = this.duration;\n\n  @state()\n  private notificationContent?: {\n    title?: string;\n    message: string;\n    details?: string;\n  };\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n      this.remainingTime = this.duration;\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  private pauseAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n  }\n\n  private resumeAutoHide() {\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.remainingTime\n      );\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { composed: true, bubbles: true })\n      );\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show');\n      await animateTo(this.base, keyframes, options);\n\n      this.dispatchEvent(\n        new Event('mid-after-show', { composed: true, bubbles: true })\n      );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { composed: true, bubbles: true })\n      );\n\n      clearTimeout(this.autoHideTimeout);\n      clearInterval(this.remainingTimeInterval);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide');\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /**\n   * Shows the alert.\n   */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'mid-after-show');\n  }\n\n  /**\n   * Hides the alert\n   */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'mid-after-hide');\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast(\n    content: MinidAlert['notificationContent'],\n    duration?: number,\n    severity?: MinidAlert['severity'],\n    closable = true\n  ) {\n    return new Promise<void>((resolve) => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      if (content) {\n        this.notificationContent = content;\n      }\n\n      if (severity) {\n        this.severity = severity;\n      }\n\n      if (duration) {\n        this.duration = duration;\n      }\n\n      this.closable = closable;\n      this.elevated = true;\n\n      // We wrap this in a timeout for `getBoundingClientRect` to get the height properly\n      setTimeout(() => {\n        toastStack.appendChild(this);\n\n        animateTo(\n          toastStack,\n          [\n            {\n              transform: `translateY(${this.getBoundingClientRect().height}px)`,\n            },\n            { transform: 'translateY(0px)' },\n          ],\n          { duration: 250, easing: 'ease-out' }\n        );\n      }, 0);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // Force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'mid-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('mid-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  override render() {\n    const danger = this.severity === 'danger';\n    const warning = this.severity === 'warning';\n    const info = this.severity === 'info';\n    const success = this.severity === 'success';\n    const sm = this.size === 'sm';\n    const md = this.size === 'md';\n    const lg = this.size === 'lg';\n    const iconName: MidIconName =\n      (danger && 'xmark-octagon-fill') ||\n      (warning && 'exclamationmark-triangle-fill') ||\n      (success && 'checkmark-circle-fill') ||\n      'information-square-fill';\n    this.iconlabel ??=\n      (danger && 'Feil') ||\n      (warning && 'Advarsel') ||\n      (success && 'Suksess') ||\n      'Informasjon';\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"${classMap({\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n          'bg-danger-surface-tinted': danger,\n          'bg-info-surface-tinted': info,\n          'bg-success-surface-tinted': success,\n          'bg-warning-surface-tinted': warning,\n          'border-danger': danger,\n          'border-info': info,\n          'border-success': success,\n          'border-warning': warning,\n          'text-danger': danger,\n          'text-info': info,\n          'text-success': success,\n          'text-warning': warning,\n          'shadow-md': this.elevated,\n        })} grid grid-cols-[auto_1fr_auto] gap-2 rounded border p-6\"\n        @mouseenter=${this.pauseAutoHide}\n        @mouseleave=${this.resumeAutoHide}\n      >\n        <mid-icon\n          class=\"${classMap({\n            'text-info-subtle': info,\n            'text-danger-subtle': danger,\n            'text-success-subtle': success,\n            'text-warning-subtle': warning,\n          })} size-7\"\n          name=\"${iconName}\"\n          library=\"system\"\n          alt=${ifDefined(this.iconlabel)}\n        ></mid-icon>\n        <div aria-live=\"polite\">\n          <slot>\n            ${!this.notificationContent?.title\n              ? nothing\n              : html`<h2 class=\"text-heading-xs\">\n                  ${this.notificationContent?.title}\n                </h2>`}\n            ${this.notificationContent?.message}\n            ${!this.notificationContent?.details\n              ? nothing\n              : html`<div\n                  class=\"${classMap({\n                    'border-danger': danger,\n                    'border-info': info,\n                    'border-success': success,\n                    'border-warning': warning,\n                    'bg-danger-surface-hover': danger,\n                    'bg-info-surface-hover': info,\n                    'bg-success-surface-hover': success,\n                    'bg-warning-surface-hover': warning,\n                  })} text-body-sm mt-0.5 border-l-4 p-3\"\n                >\n                  <pre class=\"break-all whitespace-pre-wrap\">\n${this.notificationContent?.details}</pre\n                  >\n                </div>`}\n          </slot>\n        </div>\n        ${this.closable\n          ? html`\n              <button\n                class=\"${classMap({\n                  'text-info-subtle': info,\n                  'text-danger-subtle': danger,\n                  'text-success-subtle': success,\n                  'text-warning-subtle': warning,\n                  'hover:bg-danger-surface-hover': danger,\n                  'hover:bg-info-surface-hover': info,\n                  'hover:bg-success-surface-hover': success,\n                  'hover:bg-warning-surface-hover': warning,\n                })} -my-4 flex self-center rounded p-4\"\n                @click=\"${this.hide}\"\n              >\n                <mid-icon class=\"size-6\" name=\"xmark\"> </mid-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, transform: 'translateY(100%)' },\n    { opacity: 1, transform: 'translateY(0px)' },\n  ],\n  options: { duration: 400, easing: 'ease-out' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease-in' },\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,aAAa,OAAO,OAAO,SAAS,cAAc,KAAK,GAAG;AAAA,EAC9D,WAAW;AACb,CAAC;AAED,MAAM,SAAS,CAAC,KAAK;AAiBd,IAAM,aAAN,cAAyB,OAAO,YAAY,MAAM,EAAE;AAAA,EAApD,cAAA;AAAA,UAAA,GAAA,SAAA;AAYE,SAAA,OAAA;AAMI,SAAA,WAAA;AAQA,SAAA,WAAA;AAM2C,SAAA,WAAA;AAM3B,SAAA,OAAA;AAMhB,SAAA,WAAA;AAUX,SAAQ,gBAAgB,KAAK;AAAA,EAAA;AAAA,EAS7B,eAAe;AACR,SAAA,KAAK,SAAS,CAAC,KAAK;AAAA,EAAA;AAAA,EAGnB,kBAAkB;AACxB,iBAAa,KAAK,eAAe;AACjC,kBAAc,KAAK,qBAAqB;AACxC,QAAI,KAAK,QAAQ,KAAK,WAAW,UAAU;AACzC,WAAK,kBAAkB,OAAO;AAAA,QAC5B,MAAM,KAAK,KAAK;AAAA,QAChB,KAAK;AAAA,MACP;AACA,WAAK,gBAAgB,KAAK;AACrB,WAAA,wBAAwB,OAAO,YAAY,MAAM;AACpD,aAAK,iBAAiB;AAAA,SACrB,GAAG;AAAA,IAAA;AAAA,EACR;AAAA,EAGM,gBAAgB;AACtB,iBAAa,KAAK,eAAe;AACjC,kBAAc,KAAK,qBAAqB;AAAA,EAAA;AAAA,EAGlC,iBAAiB;AACnB,QAAA,KAAK,WAAW,UAAU;AAC5B,WAAK,kBAAkB,OAAO;AAAA,QAC5B,MAAM,KAAK,KAAK;AAAA,QAChB,KAAK;AAAA,MACP;AACK,WAAA,wBAAwB,OAAO,YAAY,MAAM;AACpD,aAAK,iBAAiB;AAAA,SACrB,GAAG;AAAA,IAAA;AAAA,EACR;AAAA,EAIF,MAAM,mBAAmB;AACvB,QAAI,KAAK,MAAM;AAER,WAAA;AAAA,QACH,IAAI,MAAM,YAAY,EAAE,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,MACzD;AAEI,UAAA,KAAK,WAAW,UAAU;AAC5B,aAAK,gBAAgB;AAAA,MAAA;AAGjB,YAAA,eAAe,KAAK,IAAI;AAC9B,WAAK,KAAK,SAAS;AACnB,YAAM,EAAE,WAAW,QAAA,IAAY,aAAa,MAAM,YAAY;AAC9D,YAAM,UAAU,KAAK,MAAM,WAAW,OAAO;AAExC,WAAA;AAAA,QACH,IAAI,MAAM,kBAAkB,EAAE,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,MAC/D;AAAA,IAAA,OACK;AAEA,WAAA;AAAA,QACH,IAAI,MAAM,YAAY,EAAE,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,MACzD;AAEA,mBAAa,KAAK,eAAe;AACjC,oBAAc,KAAK,qBAAqB;AAElC,YAAA,eAAe,KAAK,IAAI;AAC9B,YAAM,EAAE,WAAW,QAAA,IAAY,aAAa,MAAM,YAAY;AAC9D,YAAM,UAAU,KAAK,MAAM,WAAW,OAAO;AAC7C,WAAK,KAAK,SAAS;AAEd,WAAA;AAAA,QACH,IAAI,MAAM,kBAAkB,EAAE,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,MAC/D;AAAA,IAAA;AAAA,EACF;AAAA,EAIF,uBAAuB;AACrB,SAAK,gBAAgB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAMvB,MAAM,OAAO;AACX,QAAI,KAAK,MAAM;AACN,aAAA;AAAA,IAAA;AAGT,SAAK,OAAO;AACL,WAAA,aAAa,MAAM,gBAAgB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAM5C,MAAM,OAAO;AACP,QAAA,CAAC,KAAK,MAAM;AACP,aAAA;AAAA,IAAA;AAGT,SAAK,OAAO;AACL,WAAA,aAAa,MAAM,gBAAgB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ5C,MAAM,MACJ,SACA,UACA,UACA,WAAW,MACX;AACO,WAAA,IAAI,QAAc,CAAC,YAAY;AAChC,UAAA,WAAW,kBAAkB,MAAM;AAC5B,iBAAA,KAAK,OAAO,UAAU;AAAA,MAAA;AAGjC,UAAI,SAAS;AACX,aAAK,sBAAsB;AAAA,MAAA;AAG7B,UAAI,UAAU;AACZ,aAAK,WAAW;AAAA,MAAA;AAGlB,UAAI,UAAU;AACZ,aAAK,WAAW;AAAA,MAAA;AAGlB,WAAK,WAAW;AAChB,WAAK,WAAW;AAGhB,iBAAW,MAAM;AACf,mBAAW,YAAY,IAAI;AAE3B;AAAA,UACE;AAAA,UACA;AAAA,YACE;AAAA,cACE,WAAW,cAAc,KAAK,wBAAwB,MAAM;AAAA,YAC9D;AAAA,YACA,EAAE,WAAW,kBAAkB;AAAA,UACjC;AAAA,UACA,EAAE,UAAU,KAAK,QAAQ,WAAW;AAAA,QACtC;AAAA,SACC,CAAC;AAGJ,4BAAsB,MAAM;AAErB,aAAA;AACL,aAAK,KAAK;AAAA,MAAA,CACX;AAEI,WAAA;AAAA,QACH;AAAA,QACA,MAAM;AACJ,qBAAW,YAAY,IAAI;AACnB,kBAAA;AAGR,cAAI,WAAW,cAAc,WAAW,MAAM,MAAM;AAClD,uBAAW,OAAO;AAAA,UAAA;AAAA,QAEtB;AAAA,QACA,EAAE,MAAM,KAAK;AAAA,MACf;AAAA,IAAA,CACD;AAAA,EAAA;AAAA,EAGM,SAAS;AACV,UAAA,SAAS,KAAK,aAAa;AAC3B,UAAA,UAAU,KAAK,aAAa;AAC5B,UAAA,OAAO,KAAK,aAAa;AACzB,UAAA,UAAU,KAAK,aAAa;AAC5B,UAAA,KAAK,KAAK,SAAS;AACnB,UAAA,KAAK,KAAK,SAAS;AACnB,UAAA,KAAK,KAAK,SAAS;AACzB,UAAM,WACH,UAAU,wBACV,WAAW,mCACX,WAAW,2BACZ;AACF,SAAK,cACF,UAAU,UACV,WAAW,cACX,WAAW,aACZ;AAEK,WAAA;AAAA;AAAA;AAAA,iBAGM,SAAS;AAAA,MAChB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,4BAA4B;AAAA,MAC5B,0BAA0B;AAAA,MAC1B,6BAA6B;AAAA,MAC7B,6BAA6B;AAAA,MAC7B,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,eAAe;AAAA,MACf,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,aAAa,KAAK;AAAA,IAAA,CACnB,CAAC;AAAA,sBACY,KAAK,aAAa;AAAA,sBAClB,KAAK,cAAc;AAAA;AAAA;AAAA,mBAGtB,SAAS;AAAA,MAChB,oBAAoB;AAAA,MACpB,sBAAsB;AAAA,MACtB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,IAAA,CACxB,CAAC;AAAA,kBACM,QAAQ;AAAA;AAAA,gBAEV,UAAU,KAAK,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA,cAI3B,CAAC,KAAK,qBAAqB,QACzB,UACA;AAAA,oBACI,KAAK,qBAAqB,KAAK;AAAA,sBAC7B;AAAA,cACR,KAAK,qBAAqB,OAAO;AAAA,cACjC,CAAC,KAAK,qBAAqB,UACzB,UACA;AAAA,2BACW,SAAS;AAAA,MAChB,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,2BAA2B;AAAA,MAC3B,yBAAyB;AAAA,MACzB,4BAA4B;AAAA,MAC5B,4BAA4B;AAAA,IAAA,CAC7B,CAAC;AAAA;AAAA;AAAA,EAGlB,KAAK,qBAAqB,OAAO;AAAA;AAAA,uBAEZ;AAAA;AAAA;AAAA,UAGb,KAAK,WACH;AAAA;AAAA,yBAEa,SAAS;AAAA,MAChB,oBAAoB;AAAA,MACpB,sBAAsB;AAAA,MACtB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,iCAAiC;AAAA,MACjC,+BAA+B;AAAA,MAC/B,kCAAkC;AAAA,MAClC,kCAAkC;AAAA,IAAA,CACnC,CAAC;AAAA,0BACQ,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,gBAKvB,OAAO;AAAA;AAAA;AAAA,EAAA;AAInB;AAjVU,gBAAA;AAAA,EADP,MAAM,gBAAgB;AAAA,GAJZ,WAKH,WAAA,QAAA,CAAA;AAOR,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAM,CAAA;AAAA,GAX/B,WAYX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAM,CAAA;AAAA,GAjB/B,WAkBX,WAAA,YAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAzBf,WA0BX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAM,CAAA;AAAA,GA/BhB,WAgCX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAM,CAAA;AAAA,GArChB,WAsCX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GA3ChB,WA4CX,WAAA,YAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAlDf,WAmDX,WAAA,aAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAM;AAAA,GArDI,WAsDH,WAAA,iBAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAM;AAAA,GAxDI,WAyDH,WAAA,uBAAA,CAAA;AA2CF,gBAAA;AAAA,EADL,MAAM,QAAQ,EAAE,sBAAsB,KAAM,CAAA;AAAA,GAnGlC,WAoGL,WAAA,oBAAA,CAAA;AAwCN,gBAAA;AAAA,EADC,MAAM,UAAU;AAAA,GA3IN,WA4IX,WAAA,wBAAA,CAAA;AA5IW,aAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,UAAA;AAwVb,oBAAoB,cAAc;AAAA,EAChC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,WAAW,mBAAmB;AAAA,IAC5C,EAAE,SAAS,GAAG,WAAW,kBAAkB;AAAA,EAC7C;AAAA,EACA,SAAS,EAAE,UAAU,KAAK,QAAQ,WAAW;AAC/C,CAAC;AAED,oBAAoB,cAAc;AAAA,EAChC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,OAAO,EAAE;AAAA,IACvB,EAAE,SAAS,GAAG,OAAO,IAAI;AAAA,EAC3B;AAAA,EACA,SAAS,EAAE,UAAU,KAAK,QAAQ,UAAU;AAC9C,CAAC;"}

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

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

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

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

package/dist/components/checkbox.js

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

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedNodes,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControllerMixin(styled(LitElement)) {\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: String })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @query('.fds-checkbox__description')\n  checkboxDescriptionElement!: HTMLDivElement;\n\n  @queryAssignedNodes({ slot: 'description', flatten: true })\n  descriptionNodes?: NodeListOf<HTMLElement>;\n\n  #handleChange(event: Event) {\n    this.checked = (event.target as HTMLInputElement).checked;\n    if (this.checked) {\n      this.setFormValue('on', 'checked');\n    } else {\n      this.setFormValue(null);\n    }\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n  }\n\n  #handleClick(event: Event) {\n    if (this.readonly) {\n      event.preventDefault();\n    }\n  }\n\n  #updateDescriptionHidden() {\n    this.checkboxDescriptionElement.style.display = !this.descriptionNodes\n      ?.length\n      ? 'none'\n      : 'block';\n  }\n\n  protected firstUpdated() {\n    this.#updateDescriptionHidden();\n  }\n\n  override render() {\n    const sm = this.size === 'sm';\n    const md = this.size === 'md';\n    const lg = this.size === 'lg';\n\n    return html`\n      <div\n        class=\"${classMap({\n          'fds-checkbox': true,\n          'fds-paragraph': true,\n          'fds-checkbox--readonly': this.readonly,\n          'fds-paragraph--sm': sm,\n          'fds-checkbox--sm': sm,\n          'fds-paragraph--md': md,\n          'fds-checkbox--md': md,\n          'fds-paragraph--lg': lg,\n          'fds-checkbox--lg': lg,\n        })}\"\n      >\n        <input\n          id=\"checkbox\"\n          class=\"fds-checkbox__input\"\n          type=\"checkbox\"\n          @change=${this.#handleChange}\n          @click=${this.#handleClick}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          ?readonly=${this.readonly}\n        />\n        <label\n          for=\"checkbox\"\n          class=${classMap({\n            'fds-label': true,\n            'fds-checkbox__label': true,\n            'fds-label--regular-weight': true,\n            'fds-label--sm': sm,\n            'fds-label--md': md,\n            'fds-label--lg': lg,\n          })}\n        >\n          <slot></slot>\n        </label>\n        <div\n          class=\"${classMap({\n            'fds-paragraph': true,\n            'fds-checkbox__description': true,\n            'fds-paragraph--sm': sm,\n            'fds-paragraph--md': md,\n            'fds-paragraph--lg': lg,\n          })}\"\n        >\n          <slot\n            name=\"description\"\n            @slotchange=${this.#updateDescriptionHidden}\n          ></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from 'src/mixins/validators.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n/**\n *\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Gets the validity state object */\n\n  /**\n   *  Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n   */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /**\n   *  Checks for validity and shows the browser's validation message if the control is invalid.\n   */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n   * the custom validation message, call this method with an empty string.\n   */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n    console.log('invalid: ', this.invalid);\n\n    return html`\n      <label\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'cursor-not-allowed': this.disabled,\n        })} grid grid-cols-[auto_1fr] gap-2\"\n      >\n        <span\n          class=\"${classMap({\n            'bg-accent-base': !this.readonly && this.checked && !this.invalid,\n            'bg-danger-base': !this.readonly && this.checked && this.invalid,\n            'border-accent-base':\n              !this.readonly && this.checked && !this.invalid,\n            'border-neutral': !this.readonly && !this.checked && !this.invalid,\n            'border-danger-base': !this.readonly && this.invalid,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n          })} focus-within:focus-ring inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-2\"\n        >\n          <input\n            class=\"pointer-events-none appearance-none\"\n            type=\"checkbox\"\n            value=${ifDefined(this.value)}\n            .checked=${live(this.checked)}\n            ?disabled=${this.disabled}\n            ?checked=${this.checked}\n            ?readonly=${this.readonly}\n            .required=${this.required}\n            @click=${this.handleClick}\n          />\n          ${this.checked\n            ? html`<mid-icon\n                class=\"${classMap({\n                  'text-accent-base-contrast': this.checked && !this.readonly,\n                })} size-6 shrink-0 scale-125\"\n                name=\"checkmark\"\n              ></mid-icon>`\n            : ''}\n        </span>\n        <div part=\"label\">\n          <slot></slot>\n        </div>\n      </label>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

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

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

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