@felleslosninger/minid-elements 0.0.88

package/dist/components/alert.js

@@ -0,0 +1,338 @@
+import { css, LitElement, nothing, html } from "lit";
+import { query, property, state, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styled } from "../mixins/tailwind.mixin.js";
+import "./icon/icon.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { watch } from "../internal/watch.js";
+import { getAnimation, setDefaultAnimation } from "../utilities/animation-registry.js";
+import { waitForEvent } from "../internal/event.js";
+import { stopAnimations, animateTo } from "../internal/animate.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+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;
+    }
+  `
+];
+let MinidAlert = class extends styled(LitElement, styles) {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.closable = false;
+    this.duration = Infinity;
+    this.severity = "info";
+    this.size = "md";
+    this.elevated = false;
+    this.remainingTime = this.duration;
+  }
+  firstUpdated() {
+    this.base.hidden = !this.open;
+  }
+  restartAutoHide() {
+    clearTimeout(this.autoHideTimeout);
+    clearInterval(this.remainingTimeInterval);
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(
+        () => this.hide(),
+        this.duration
+      );
+      this.remainingTime = this.duration;
+      this.remainingTimeInterval = window.setInterval(() => {
+        this.remainingTime -= 100;
+      }, 100);
+    }
+  }
+  pauseAutoHide() {
+    clearTimeout(this.autoHideTimeout);
+    clearInterval(this.remainingTimeInterval);
+  }
+  resumeAutoHide() {
+    if (this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(
+        () => this.hide(),
+        this.remainingTime
+      );
+      this.remainingTimeInterval = window.setInterval(() => {
+        this.remainingTime -= 100;
+      }, 100);
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.dispatchEvent(
+        new Event("mid-show", { composed: true, bubbles: true })
+      );
+      if (this.duration < Infinity) {
+        this.restartAutoHide();
+      }
+      await stopAnimations(this.base);
+      this.base.hidden = false;
+      const { keyframes, options } = getAnimation(this, "alert.show");
+      await animateTo(this.base, keyframes, options);
+      this.dispatchEvent(
+        new Event("mid-after-show", { composed: true, bubbles: true })
+      );
+    } else {
+      this.dispatchEvent(
+        new Event("mid-hide", { composed: true, bubbles: true })
+      );
+      clearTimeout(this.autoHideTimeout);
+      clearInterval(this.remainingTimeInterval);
+      await stopAnimations(this.base);
+      const { keyframes, options } = getAnimation(this, "alert.hide");
+      await animateTo(this.base, keyframes, options);
+      this.base.hidden = true;
+      this.dispatchEvent(
+        new Event("mid-after-hide", { composed: true, bubbles: true })
+      );
+    }
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  /**
+   * Shows the alert.
+   */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "mid-after-show");
+  }
+  /**
+   * Hides the alert
+   */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "mid-after-hide");
+  }
+  /**
+   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   */
+  async toast(content, duration, severity, closable = true) {
+    return new Promise((resolve) => {
+      if (toastStack.parentElement === null) {
+        document.body.append(toastStack);
+      }
+      if (content) {
+        this.notificationContent = content;
+      }
+      if (severity) {
+        this.severity = severity;
+      }
+      if (duration) {
+        this.duration = duration;
+      }
+      this.closable = closable;
+      this.elevated = true;
+      setTimeout(() => {
+        toastStack.appendChild(this);
+        animateTo(
+          toastStack,
+          [
+            {
+              transform: `translateY(${this.getBoundingClientRect().height}px)`
+            },
+            { transform: "translateY(0px)" }
+          ],
+          { duration: 250, easing: "ease-out" }
+        );
+      }, 0);
+      requestAnimationFrame(() => {
+        this.clientWidth;
+        this.show();
+      });
+      this.addEventListener(
+        "mid-after-hide",
+        () => {
+          toastStack.removeChild(this);
+          resolve();
+          if (toastStack.querySelector("mid-alert") === null) {
+            toastStack.remove();
+          }
+        },
+        { once: true }
+      );
+    });
+  }
+  render() {
+    const danger = this.severity === "danger";
+    const warning = this.severity === "warning";
+    const info = this.severity === "info";
+    const success = this.severity === "success";
+    const iconName = danger && "xmark-octagon-fill" || warning && "exclamationmark-triangle-fill" || success && "checkmark-circle-fill" || "information-square-fill";
+    this.iconlabel ??= danger && "Feil" || warning && "Advarsel" || success && "Suksess" || "Informasjon";
+    return html`
+      <div
+        part="base"
+        class="${classMap({
+      "fds-alert": true,
+      "fds-alert--sm": this.size === "sm",
+      "fds-alert--md": this.size === "md",
+      "fds-alert--lg": this.size === "lg",
+      "fds-alert--warning": warning,
+      "fds-alert--success": success,
+      "fds-alert--info": info,
+      "fds-alert--danger": danger,
+      "fds-alert--elevated": this.elevated
+    })}"
+        @mouseenter=${this.pauseAutoHide}
+        @mouseleave=${this.resumeAutoHide}
+      >
+        <mid-icon
+          class="fds-alert__icon"
+          name="${iconName}"
+          library="system"
+          alt=${ifDefined(this.iconlabel)}
+        ></mid-icon>
+        <div
+          aria-live="polite"
+          class=${classMap({
+      "fds-paragraph": true,
+      "fds-paragraph--sm": this.size === "sm",
+      "fds-paragraph--md": this.size === "md",
+      "fds-paragraph--lg": this.size === "lg"
+    })}
+        >
+          <slot>
+            ${!this.notificationContent?.title ? nothing : html`<h2 class="fds-heading fds-heading--xs">
+                  ${this.notificationContent?.title}
+                </h2>`}
+            ${this.notificationContent?.message}
+            ${!this.notificationContent?.details ? nothing : html`<div class="message-details">
+                  <pre>${this.notificationContent?.details}</pre>
+                </div>`}
+          </slot>
+        </div>
+        ${this.closable ? html`
+              <button class="close-button" @click="${this.hide}">
+                <mid-icon name="xmark"> </mid-icon>
+              </button>
+            ` : nothing}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  query('[part~="base"]')
+], MinidAlert.prototype, "base", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MinidAlert.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MinidAlert.prototype, "closable", 2);
+__decorateClass([
+  property({ type: Number })
+], MinidAlert.prototype, "duration", 2);
+__decorateClass([
+  property({ reflect: true })
+], MinidAlert.prototype, "severity", 2);
+__decorateClass([
+  property({ reflect: true })
+], MinidAlert.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidAlert.prototype, "elevated", 2);
+__decorateClass([
+  property({ type: String })
+], MinidAlert.prototype, "iconlabel", 2);
+__decorateClass([
+  state()
+], MinidAlert.prototype, "remainingTime", 2);
+__decorateClass([
+  state()
+], MinidAlert.prototype, "notificationContent", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], MinidAlert.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("duration")
+], MinidAlert.prototype, "handleDurationChange", 1);
+MinidAlert = __decorateClass([
+  customElement("mid-alert")
+], MinidAlert);
+setDefaultAnimation("alert.show", {
+  keyframes: [
+    { opacity: 0, transform: "translateY(100%)" },
+    { opacity: 1, transform: "translateY(0px)" }
+  ],
+  options: { duration: 400, easing: "ease-out" }
+});
+setDefaultAnimation("alert.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease-in" }
+});
+export {
+  MinidAlert
+};
+//# sourceMappingURL=alert.js.map

package/dist/components/alert.js.map

@@ -0,0 +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 { 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 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          'fds-alert': true,\n          'fds-alert--sm': this.size === 'sm',\n          'fds-alert--md': this.size === 'md',\n          'fds-alert--lg': this.size === 'lg',\n          'fds-alert--warning': warning,\n          'fds-alert--success': success,\n          'fds-alert--info': info,\n          'fds-alert--danger': danger,\n          'fds-alert--elevated': this.elevated,\n        })}\"\n        @mouseenter=${this.pauseAutoHide}\n        @mouseleave=${this.resumeAutoHide}\n      >\n        <mid-icon\n          class=\"fds-alert__icon\"\n          name=\"${iconName}\"\n          library=\"system\"\n          alt=${ifDefined(this.iconlabel)}\n        ></mid-icon>\n        <div\n          aria-live=\"polite\"\n          class=${classMap({\n            'fds-paragraph': true,\n            'fds-paragraph--sm': this.size === 'sm',\n            'fds-paragraph--md': this.size === 'md',\n            'fds-paragraph--lg': this.size === 'lg',\n          })}\n        >\n          <slot>\n            ${!this.notificationContent?.title\n              ? nothing\n              : html`<h2 class=\"fds-heading fds-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 class=\"close-button\" @click=\"${this.hide}\">\n                <mid-icon 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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"}

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

@@ -0,0 +1,57 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mid-button': MinidButton;
+    }
+}
+declare const MinidButton_base: typeof LitElement & import('../types/mixin-constructor.ts').Constructor<import('../mixins/form-controller.mixin.ts').FormAssociatedMixinInterface>;
+/**
+ * A regular old button
+ */
+export declare class MinidButton extends MinidButton_base {
+    #private;
+    button: HTMLButtonElement | HTMLLinkElement;
+    /**
+     * The value of the button (optional)
+     */
+    value: string;
+    /**
+     * The variant of the button
+     */
+    variant: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * The size of the button. Defaults to 'md'
+     */
+    size: 'md' | 'lg' | 'sm';
+    /**
+     * The type of the button. Defaults to normal 'button'
+     */
+    type: 'submit' | 'button' | 'reset';
+    /**
+     * The href of the button. If set, the button will be rendered as an anchor tag
+     */
+    href: string | undefined;
+    /**
+     * Whether the button should be full width
+     */
+    fullwidth: boolean;
+    /**
+     * Whether the button is disabled
+     */
+    disabled: boolean;
+    /**
+     *
+     */
+    loading: boolean;
+    loadingtext: string;
+    /**
+     * Toggle icon only styling
+     */
+    iconstyled: boolean;
+    constructor();
+    handleClick(): void;
+    focus(): void;
+    render(): import('lit-html').TemplateResult;
+}
+export {};
+//# sourceMappingURL=button.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../src/components/button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAOtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAyBD;;GAEG;AACH,qBACa,WAAY,SAAQ,gBAEhC;;IAEC,MAAM,EAAG,iBAAiB,GAAG,eAAe,CAAC;IAE7C;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAE1D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAGhB,WAAW,SAAM;IAEjB;;OAEG;IAEH,UAAU,UAAS;;IAOnB,WAAW;IAgBX,KAAK;IAII,MAAM;CAiChB"}

package/dist/components/button.js

@@ -0,0 +1,152 @@
+import { css, LitElement } from "lit";
+import { query, property, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { literal, html } from "lit/static-html.js";
+import { styled } from "../mixins/tailwind.mixin.js";
+import { FormControllerMixin } from "../mixins/form-controller.mixin.js";
+import "./spinner.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--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+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 _MinidButton_instances, isLink_get;
+const styles = [
+  css`
+    :host {
+      width: auto;
+    }
+
+    .btn-loading {
+      cursor: wait;
+    }
+
+    .btn-spinner-only {
+      position: relative;
+      gap: 0;
+    }
+
+    .btn-spinner-only mid-spinner {
+      position: absolute;
+      top: calc(50% - 0.5em);
+      left: calc(50% - 0.5em);
+    }
+  `
+];
+let MinidButton = class extends FormControllerMixin(
+  styled(LitElement, styles)
+) {
+  constructor() {
+    super();
+    __privateAdd(this, _MinidButton_instances);
+    this.value = "";
+    this.variant = "primary";
+    this.size = "md";
+    this.type = "button";
+    this.fullwidth = false;
+    this.disabled = false;
+    this.loading = false;
+    this.loadingtext = "";
+    this.iconstyled = false;
+    this.addEventListener("click", this.handleClick);
+  }
+  handleClick() {
+    if (this.type === "submit") {
+      this.value && this.setFormValue(this.value);
+      this.internals.form.requestSubmit();
+    } else if (this.type === "reset") {
+      this.internals.form.reset();
+    }
+  }
+  focus() {
+    this.button.focus();
+  }
+  render() {
+    const tag = __privateGet(this, _MinidButton_instances, isLink_get) ? literal`a` : literal`button`;
+    return html`<${tag}
+      part="base"
+      class="${classMap({
+      button: true,
+      "fds-focus": true,
+      "fds-btn": true,
+      "fds-btn--first": true,
+      "fds-btn--full-width": this.fullwidth,
+      "fds-btn--icon-only": this.iconstyled,
+      "fds-btn--primary": this.variant === "primary",
+      "fds-btn--secondary": this.variant === "secondary",
+      "fds-btn--tertiary": this.variant === "tertiary",
+      "fds-btn--sm": this.size === "sm",
+      "fds-btn--md": this.size === "md",
+      "fds-btn--lg": this.size === "lg",
+      "btn-loading": this.loading,
+      "btn-spinner-only": this.loading && !this.loadingtext
+    })}"
+      type=${this.type}
+      ?disabled=${this.disabled}
+      href="${ifDefined(this.href)}"
+    >
+      <slot class="${classMap({
+      invisible: this.loading && !this.loadingtext,
+      hidden: this.loading && this.loadingtext
+    })}"></slot>
+      <span class="${classMap({ hidden: !this.loading })}">${this.loadingtext}</span>
+      ${this.loading ? html`<mid-spinner class="text-2xl" part="spinner"></mid-spinner>` : ""}
+    </${tag}>`;
+  }
+};
+_MinidButton_instances = /* @__PURE__ */ new WeakSet();
+isLink_get = function() {
+  return !!this.href;
+};
+__decorateClass([
+  query(".button")
+], MinidButton.prototype, "button", 2);
+__decorateClass([
+  property({ type: String })
+], MinidButton.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], MinidButton.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String })
+], MinidButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], MinidButton.prototype, "type", 2);
+__decorateClass([
+  property({ type: String })
+], MinidButton.prototype, "href", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidButton.prototype, "fullwidth", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidButton.prototype, "loading", 2);
+__decorateClass([
+  property()
+], MinidButton.prototype, "loadingtext", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidButton.prototype, "iconstyled", 2);
+MinidButton = __decorateClass([
+  customElement("mid-button")
+], MinidButton);
+export {
+  MinidButton
+};
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../src/components/button.component.ts"],"sourcesContent":["import { css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin.ts';\nimport './spinner.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-button': MinidButton;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      width: auto;\n    }\n\n    .btn-loading {\n      cursor: wait;\n    }\n\n    .btn-spinner-only {\n      position: relative;\n      gap: 0;\n    }\n\n    .btn-spinner-only mid-spinner {\n      position: absolute;\n      top: calc(50% - 0.5em);\n      left: calc(50% - 0.5em);\n    }\n  `,\n];\n\n/**\n * A regular old button\n */\n@customElement('mid-button')\nexport class MinidButton extends FormControllerMixin(\n  styled(LitElement, styles)\n) {\n  @query('.button')\n  button!: HTMLButtonElement | HTMLLinkElement;\n\n  /**\n   * The value of the button (optional)\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * The variant of the button\n   */\n  @property({ type: String })\n  variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button. Defaults to 'md'\n   */\n  @property({ type: String })\n  size: 'md' | 'lg' | 'sm' = 'md';\n\n  /**\n   * The type of the button. Defaults to normal 'button'\n   */\n  @property({ type: String })\n  type: 'submit' | 'button' | 'reset' = 'button';\n\n  /**\n   * The href of the button. If set, the button will be rendered as an anchor tag\n   */\n  @property({ type: String })\n  href: string | undefined;\n\n  /**\n   * Whether the button should be full width\n   */\n  @property({ type: Boolean })\n  fullwidth = false;\n\n  /**\n   * Whether the button is disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   *\n   */\n  @property({ type: Boolean })\n  loading = false;\n\n  @property()\n  loadingtext = '';\n\n  /**\n   * Toggle icon only styling\n   */\n  @property({ type: Boolean })\n  iconstyled = false;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.handleClick);\n  }\n\n  handleClick() {\n    if (this.type === 'submit') {\n      this.value && this.setFormValue(this.value);\n      this.internals.form!.requestSubmit();\n    } else if (this.type === 'reset') {\n      this.internals.form!.reset();\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  get #isLink() {\n    return !!this.href;\n  }\n\n  focus() {\n    this.button.focus();\n  }\n\n  override render() {\n    const tag = this.#isLink ? literal`a` : literal`button`;\n\n    return html`<${tag}\n      part=\"base\"\n      class=\"${classMap({\n        button: true,\n        'fds-focus': true,\n        'fds-btn': true,\n        'fds-btn--first': true,\n        'fds-btn--full-width': this.fullwidth,\n        'fds-btn--icon-only': this.iconstyled,\n        'fds-btn--primary': this.variant === 'primary',\n        'fds-btn--secondary': this.variant === 'secondary',\n        'fds-btn--tertiary': this.variant === 'tertiary',\n        'fds-btn--sm': this.size === 'sm',\n        'fds-btn--md': this.size === 'md',\n        'fds-btn--lg': this.size === 'lg',\n        'btn-loading': this.loading,\n        'btn-spinner-only': this.loading && !this.loadingtext,\n      })}\"\n      type=${this.type}\n      ?disabled=${this.disabled}\n      href=\"${ifDefined(this.href)}\"\n    >\n      <slot class=\"${classMap({\n        invisible: this.loading && !this.loadingtext,\n        hidden: this.loading && this.loadingtext,\n      })}\"></slot>\n      <span class=\"${classMap({ hidden: !this.loading })}\">${this.loadingtext}</span>\n      ${this.loading ? html`<mid-spinner class=\"text-2xl\" part=\"spinner\"></mid-spinner>` : ''}\n    </${tag}>`;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mid-checkbox': MinidCheckbox;
+    }
+}
+declare const MinidCheckbox_base: typeof LitElement & import('../types/mixin-constructor.ts').Constructor<import('../mixins/form-controller.mixin.ts').FormAssociatedMixinInterface>;
+export declare class MinidCheckbox extends MinidCheckbox_base {
+    #private;
+    checked: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    size: 'sm' | 'md' | 'lg';
+    checkboxDescriptionElement: HTMLDivElement;
+    descriptionNodes?: NodeListOf<HTMLElement>;
+    protected firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=checkbox.component.d.ts.map

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

@@ -0,0 +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"}