@felleslosninger/minid-elements 0.0.88

package/dist/components/menu.js

@@ -0,0 +1,276 @@
+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 { scrollIntoView } from "../internal/scroll.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 __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 _MinidMenu_instances, scrollOptionIntoView_fn;
+const styles = [
+  css`
+    :host {
+      --max-height: none;
+    }
+
+    .panel {
+      padding: 0;
+    }
+
+    ul {
+      max-height: var(--max-height);
+      overflow-y: auto;
+    }
+  `
+];
+let MinidMenu = class extends styled(LitElement, styles) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _MinidMenu_instances);
+    this.searchable = false;
+    this.variant = "dropdown";
+    this.emptyItemList = false;
+    this.filter = (filterFn) => {
+      this.getAllItems().forEach((item) => {
+        if (filterFn(item)) {
+          item.removeAttribute("hidden");
+          item.removeAttribute("inert");
+        } else {
+          item.setAttribute("inert", "true");
+          item.setAttribute("hidden", "true");
+        }
+      });
+    };
+  }
+  firstUpdated() {
+    this.getAllItems().forEach((item) => {
+      item.variant = this.variant;
+      item.addEventListener("mouseenter", () => {
+        this.setCurrentItem(item);
+      });
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+  handleClick(event) {
+    const menuItemTypes = ["menuitem", "menuitemcheckbox"];
+    const composedPath = event.composedPath();
+    const target = composedPath.find(
+      (el) => menuItemTypes.includes(el?.getAttribute?.("role") || "")
+    );
+    if (!target) return;
+    const closestMenu = composedPath.find(
+      (el) => el?.getAttribute?.("role") === "menu"
+    );
+    const clickHasSubmenu = closestMenu !== this;
+    if (clickHasSubmenu) {
+      return;
+    }
+    const item = target;
+    this.dispatchEvent(
+      new CustomEvent("mid-select", {
+        bubbles: true,
+        composed: true,
+        detail: { item }
+      })
+    );
+  }
+  handleFilterItems() {
+    this.filter(
+      (item) => item.innerText.toLowerCase().includes(this.filterInput.value.toLowerCase())
+    );
+    const items = this.getAllSelectableItems();
+    this.emptyItemList = items.length === 0;
+    this.setCurrentItem(items[0]);
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      event.stopPropagation();
+      item?.click();
+    } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      const items = this.getAllSelectableItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+      if (items.length > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.key === "ArrowDown") {
+          index++;
+        } else if (event.key === "ArrowUp") {
+          index--;
+        } else if (event.key === "Home") {
+          index = 0;
+        } else if (event.key === "End") {
+          index = items.length - 1;
+        }
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+        this.setCurrentItem(items[index]);
+        __privateMethod(this, _MinidMenu_instances, scrollOptionIntoView_fn).call(this, items[index]);
+        if (!this.searchable) {
+          items[index].focus();
+        }
+      }
+    }
+  }
+  handleMouseDown(event) {
+    const target = event.target;
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target);
+    }
+  }
+  handleSlotChange() {
+    const items = this.getAllSelectableItems();
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+    }
+  }
+  isMenuItem(item) {
+    return item.tagName.toLowerCase() === "mid-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes(
+      item.getAttribute("role") ?? ""
+    );
+  }
+  clearFilter() {
+    this.filterInput.value = "";
+    this.itemList.scrollTop = 0;
+    this.filterInput.dispatchEvent(new Event("input"));
+  }
+  /**
+   * @internal Gets all slotted menu items, ignoring dividers, headers, and other elements.
+   */
+  getAllSelectableItems() {
+    return [
+      ...this.defaultSlot.assignedElements({
+        flatten: true
+      })
+    ].filter((el) => !(el.inert || !this.isMenuItem(el)));
+  }
+  getAllItems() {
+    return [
+      ...this.defaultSlot.assignedElements({
+        flatten: true
+      })
+    ].filter((el) => this.isMenuItem(el));
+  }
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllSelectableItems().find(
+      (i) => i.getAttribute("tabindex") === "0"
+    );
+  }
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item) {
+    const items = this.getAllSelectableItems();
+    items.forEach((i) => {
+      i.setActive(i === item);
+      i.setAttribute("tabindex", i === item ? "0" : "-1");
+    });
+  }
+  focusSearchField() {
+    if (this.searchable) {
+      this.filterInput.focus();
+    }
+  }
+  render() {
+    const combobox = this.variant === "combobox";
+    const dropdown = this.variant === "dropdown";
+    return html`
+      <div
+        class="${classMap({
+      panel: true,
+      "fds-dropdownmenu": dropdown,
+      "fds-dropdownmenu--md": dropdown,
+      "fds-box--md-shadow": combobox,
+      "fds-box--default-border-color": combobox,
+      "fds-box--md-border-radius": combobox,
+      "fds-box--default-background": combobox,
+      "fds-combobox__options-wrapper": combobox,
+      "fds-combobox--md": combobox
+    })}"
+      >
+        ${!this.searchable ? nothing : html`<div
+              class="filter-search flex items-center gap-2 border-b p-2"
+            >
+              <mid-icon
+                slot="prefix"
+                class="text-2xl"
+                library="system"
+                name="magnifying-glass"
+              >
+              </mid-icon>
+              <input
+                @input=${this.handleFilterItems}
+                @keydown=${this.handleKeyDown}
+                class="filter-input h-8 w-full rounded px-2"
+                type="search"
+              />
+            </div>`}
+        <ul class="item-list p-2">
+          <slot
+            @slotchange=${this.handleSlotChange}
+            @click=${this.handleClick}
+            @keydown=${this.handleKeyDown}
+            @mousedown=${this.handleMouseDown}
+          ></slot>
+          ${this.emptyItemList ? html`<div class="p-2">Fant ingen treff</div>` : nothing}
+        </ul>
+      </div>
+    `;
+  }
+};
+_MinidMenu_instances = /* @__PURE__ */ new WeakSet();
+scrollOptionIntoView_fn = function(item) {
+  scrollIntoView(item, this.itemList, "vertical", "auto");
+};
+__decorateClass([
+  query("slot")
+], MinidMenu.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".filter-input")
+], MinidMenu.prototype, "filterInput", 2);
+__decorateClass([
+  query(".item-list")
+], MinidMenu.prototype, "itemList", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidMenu.prototype, "searchable", 2);
+__decorateClass([
+  property()
+], MinidMenu.prototype, "variant", 2);
+__decorateClass([
+  state()
+], MinidMenu.prototype, "emptyItemList", 2);
+MinidMenu = __decorateClass([
+  customElement("mid-menu")
+], MinidMenu);
+export {
+  MinidMenu
+};
+//# sourceMappingURL=menu.js.map

package/dist/components/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sources":["../../src/components/menu.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 { MinidMenuItem } from './menu-item.component';\nimport { scrollIntoView } from '../internal/scroll';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-menu': MinidMenu;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --max-height: none;\n    }\n\n    .panel {\n      padding: 0;\n    }\n\n    ul {\n      max-height: var(--max-height);\n      overflow-y: auto;\n    }\n  `,\n];\n\n/**\n *  @event {{ detail: { item: MidMenuItem } }} mid-select - Emitted when a menu item is selected.\n */\n@customElement('mid-menu')\nexport class MinidMenu extends styled(LitElement, styles) {\n  /**\n   * @ignore\n   */\n  @query('slot')\n  defaultSlot!: HTMLSlotElement;\n\n  /**\n   * @ignore\n   */\n  @query('.filter-input')\n  filterInput!: HTMLInputElement;\n\n  /**\n   * @ignore\n   */\n  @query('.item-list')\n  itemList!: HTMLUListElement;\n\n  /**\n   * Adds an input element that filters selectable menu items\n   */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /**\n   * Wether the menu should be styled as a dropdown or a combobox\n   */\n  @property()\n  variant: 'combobox' | 'dropdown' = 'dropdown';\n\n  @state()\n  emptyItemList = false;\n\n  protected firstUpdated(): void {\n    this.getAllItems().forEach((item) => {\n      item.variant = this.variant;\n      item.addEventListener('mouseenter', () => {\n        this.setCurrentItem(item);\n      });\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n    const composedPath = event.composedPath();\n    const target = composedPath.find((el) =>\n      menuItemTypes.includes((el as HTMLElement)?.getAttribute?.('role') || '')\n    );\n\n    if (!target) return;\n\n    const closestMenu = composedPath.find(\n      (el) => (el as HTMLElement)?.getAttribute?.('role') === 'menu'\n    );\n    const clickHasSubmenu = closestMenu !== this;\n\n    // Make sure we're the menu thats supposed to be handling the click event.\n    if (clickHasSubmenu) {\n      return;\n    }\n\n    // This isn't true. But we use it for TypeScript checks below.\n    const item = target as MinidMenuItem;\n\n    // if (item.type === 'checkbox') {\n    //   item.checked = !item.checked;\n    // }\n\n    this.dispatchEvent(\n      new CustomEvent('mid-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      })\n    );\n  }\n\n  handleFilterItems() {\n    this.filter((item) =>\n      item.innerText\n        .toLowerCase()\n        .includes(this.filterInput.value.toLowerCase())\n    );\n\n    const items = this.getAllSelectableItems();\n    this.emptyItemList = items.length === 0;\n    this.setCurrentItem(items[0]);\n  }\n\n  #scrollOptionIntoView(item: MinidMenuItem): void {\n    scrollIntoView(item, this.itemList, 'vertical', 'auto');\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter or space\n    if (event.key === 'Enter' || event.key === ' ') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Move the selection when pressing down or up\n    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllSelectableItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        this.#scrollOptionIntoView(items[index]);\n\n        if (!this.searchable) {\n          items[index].focus();\n        }\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as MinidMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllSelectableItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'mid-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n        item.getAttribute('role') ?? ''\n      )\n    );\n  }\n\n  /**\n   * Pass a filter function to enable/disable menu items in the menu\n   * @type {(item: MinidMenuItem) => boolean}\n   */\n  filter = (filterFn: (item: MinidMenuItem) => boolean) => {\n    this.getAllItems().forEach((item) => {\n      if (filterFn(item)) {\n        item.removeAttribute('hidden');\n        item.removeAttribute('inert');\n      } else {\n        item.setAttribute('inert', 'true');\n        item.setAttribute('hidden', 'true');\n      }\n    });\n  };\n\n  clearFilter() {\n    this.filterInput.value = '';\n    this.itemList.scrollTop = 0;\n    this.filterInput.dispatchEvent(new Event('input'));\n  }\n\n  /**\n   * @internal Gets all slotted menu items, ignoring dividers, headers, and other elements.\n   */\n  getAllSelectableItems() {\n    return [\n      ...(this.defaultSlot.assignedElements({\n        flatten: true,\n      }) as MinidMenuItem[]),\n    ].filter((el) => !(el.inert || !this.isMenuItem(el)));\n  }\n\n  getAllItems() {\n    return [\n      ...(this.defaultSlot.assignedElements({\n        flatten: true,\n      }) as MinidMenuItem[]),\n    ].filter((el) => this.isMenuItem(el));\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllSelectableItems().find(\n      (i) => i.getAttribute('tabindex') === '0'\n    );\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: MinidMenuItem) {\n    const items = this.getAllSelectableItems();\n\n    // Update tab indexes\n    items.forEach((i) => {\n      i.setActive(i === item);\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  focusSearchField() {\n    if (this.searchable) {\n      this.filterInput.focus();\n    }\n  }\n\n  override render() {\n    const combobox = this.variant === 'combobox';\n    const dropdown = this.variant === 'dropdown';\n    return html`\n      <div\n        class=\"${classMap({\n          panel: true,\n          'fds-dropdownmenu': dropdown,\n          'fds-dropdownmenu--md': dropdown,\n          'fds-box--md-shadow': combobox,\n          'fds-box--default-border-color': combobox,\n          'fds-box--md-border-radius': combobox,\n          'fds-box--default-background': combobox,\n          'fds-combobox__options-wrapper': combobox,\n          'fds-combobox--md': combobox,\n        })}\"\n      >\n        ${!this.searchable\n          ? nothing\n          : html`<div\n              class=\"filter-search flex items-center gap-2 border-b p-2\"\n            >\n              <mid-icon\n                slot=\"prefix\"\n                class=\"text-2xl\"\n                library=\"system\"\n                name=\"magnifying-glass\"\n              >\n              </mid-icon>\n              <input\n                @input=${this.handleFilterItems}\n                @keydown=${this.handleKeyDown}\n                class=\"filter-input h-8 w-full rounded px-2\"\n                type=\"search\"\n              />\n            </div>`}\n        <ul class=\"item-list p-2\">\n          <slot\n            @slotchange=${this.handleSlotChange}\n            @click=${this.handleClick}\n            @keydown=${this.handleKeyDown}\n            @mousedown=${this.handleMouseDown}\n          ></slot>\n          ${this.emptyItemList\n            ? html`<div class=\"p-2\">Fant ingen treff</div>`\n            : nothing}\n        </ul>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,61 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mid-modal': MinidModal;
+    }
+}
+declare const MinidModal_base: typeof LitElement;
+/**
+ *
+ * @event mid-show - Emitted when the modal opens.
+ * @event mid-after-show - Emitted after the modal opens and all animations are complete.
+ * @event mid-hide - Emitted when the modal closes.
+ * @event mid-after-hide - Emitted after the modal closes and all animations are complete.
+ * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} mid-request-close - Emitted when the user attempts to
+ *   close the modal by clicking the close button, clicking the overlay, or pressing escape. Calling
+ *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
+ *   destructive behavior such as data loss.
+ *
+ * @csspart base - Select the base `dialog` element
+ * @csspart header - Select the `header` element
+ * @csspart body - Select the `article` element
+ * @csspart footer - Select the `footer` element
+ *
+ * @slot -- The default slot for the body content of the modal
+ * @slot heading - The content inside the `h2` element
+ * @slot footer - The content inside the `footer` element
+ *
+ * @animation modal.show - The animation to use when showing the modal.
+ * @animation modal.hide - The animation to use when hiding the modal.
+ * @animation modal.denyClose - The animation to use when closing the modal is prevented.
+ *
+ */
+export declare class MinidModal extends MinidModal_base {
+    dialog: HTMLDialogElement;
+    panel: HTMLElement;
+    /**
+     * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+     * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
+     */
+    open: boolean;
+    /**
+     * The dialog's label as displayed in the header. You should always include a relevant label even when using
+     * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
+     */
+    heading: string;
+    private requestClose;
+    handleDialogCancel: (event: Event) => void;
+    private handleBackdropClick;
+    handleOpenChange(): Promise<void>;
+    /**
+     * Shows the modal.
+     */
+    show(): Promise<void>;
+    /**
+     * Hides the modal
+     */
+    hide(): Promise<void>;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=modal.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.component.d.ts","sourceRoot":"","sources":["../../src/components/modal.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,uBAAuB,CAAC;AAQ/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AA4CD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,UAAW,SAAQ,eAA0B;IAExD,MAAM,EAAG,iBAAiB,CAAC;IAG3B,KAAK,EAAG,WAAW,CAAC;IAEpB;;;OAGG;IAEH,IAAI,UAAS;IAEb;;;OAGG;IAEH,OAAO,SAAM;IAEb,OAAO,CAAC,YAAY;IAkBpB,kBAAkB,UAAW,KAAK,UAQhC;IAEF,OAAO,CAAC,mBAAmB;IAQrB,gBAAgB;IA+CtB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASD,MAAM;CA8BhB"}

package/dist/components/modal.js

@@ -0,0 +1,221 @@
+import { css, LitElement, html } from "lit";
+import { query, property, customElement } from "lit/decorators.js";
+import { waitForEvent } from "../internal/event.js";
+import { watch } from "../internal/watch.js";
+import { styled } from "../mixins/tailwind.mixin.js";
+import "./icon/icon.js";
+import { getAnimation, setDefaultAnimation } from "../utilities/animation-registry.js";
+import { animateTo, stopAnimations } from "../internal/animate.js";
+import { lockBodyScrolling, unlockBodyScrolling } from "../internal/scroll.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 styles = [
+  css`
+    :host {
+      --max-width: 40rem;
+      --footer-and-header-height: 140px;
+      display: contents;
+    }
+
+    .dialog {
+      max-width: var(--max-width);
+      max-height: unset;
+    }
+
+    .dialog[open] {
+      animation: none;
+    }
+
+    .dialog.closing::backdrop {
+      animation: fade-out 200ms ease-in forwards;
+    }
+
+    .modal-content {
+      max-height: calc(90vh - var(--footer-and-header-height));
+      overflow: auto;
+    }
+
+    .footer {
+      justify-content: flex-end;
+    }
+
+    @keyframes fade-out {
+      from {
+        opacity: 1;
+      }
+
+      to {
+        opacity: 0;
+      }
+    }
+  `
+];
+let MinidModal = class extends styled(LitElement, styles) {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.heading = "";
+    this.handleDialogCancel = (event) => {
+      event.preventDefault();
+      if (event.defaultPrevented) {
+        this.requestClose("keyboard");
+      } else {
+        this.hide();
+      }
+    };
+  }
+  requestClose(source) {
+    const requestCloseEvent = new CustomEvent("mid-request-close", {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail: { source }
+    });
+    this.dispatchEvent(requestCloseEvent);
+    if (requestCloseEvent.defaultPrevented) {
+      const { keyframes, options } = getAnimation(this, "modal.denyClose");
+      animateTo(this.panel, keyframes, options);
+      return;
+    }
+    this.hide();
+  }
+  handleBackdropClick({ target }) {
+    if (target === this.dialog) {
+      this.requestClose("overlay");
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.dispatchEvent(
+        new Event("mid-show", { composed: true, bubbles: true })
+      );
+      this.dialog.showModal();
+      lockBodyScrolling(this);
+      const panelAnimation = getAnimation(this, "modal.show");
+      await animateTo(
+        this.panel,
+        panelAnimation.keyframes,
+        panelAnimation.options
+      ), this.dispatchEvent(
+        new Event("mid-after-show", { bubbles: true, composed: true })
+      );
+    } else {
+      this.dispatchEvent(
+        new Event("mid-hide", { bubbles: true, composed: true })
+      );
+      await Promise.all([stopAnimations(this.dialog)]);
+      const panelAnimation = getAnimation(this, "modal.hide");
+      this.panel.classList.add("closing");
+      await animateTo(
+        this.panel,
+        panelAnimation.keyframes,
+        panelAnimation.options
+      );
+      this.panel.classList.remove("closing");
+      this.dialog.close();
+      this.panel.hidden = false;
+      unlockBodyScrolling(this);
+      this.dispatchEvent(
+        new Event("mid-after-hide", { composed: true, bubbles: true })
+      );
+    }
+  }
+  /**
+   * Shows the modal.
+   */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "mid-after-show");
+  }
+  /**
+   * Hides the modal
+   */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "mid-after-hide");
+  }
+  render() {
+    return html`
+      <dialog
+        part="base"
+        id="dialog"
+        class="dialog fds-modal m-auto"
+        @cancel=${this.handleDialogCancel}
+        @click=${this.handleBackdropClick}
+      >
+        <header part="header" class="fds-modal__header flex">
+          <h2 class="fds-heading fds-heading--xs">
+            <slot name="heading"></slot>
+          </h2>
+          <button
+            autofocus
+            @click="${() => this.requestClose("close-button")}"
+            class="fds-btn fds-focus fds-btn--md fds-btn--tertiary fds-btn--second fds-btn--icon-only fds-modal__header__button"
+          >
+            <mid-icon class="text-[1.75rem]" name="xmark"></mid-icon>
+          </button>
+        </header>
+        <article part="body" class="fds-modal__content modal-content">
+          <slot> </slot>
+        </article>
+        <footer part="footer" class="fds-modal__footer footer">
+          <slot name="footer"> </slot>
+        </footer>
+      </dialog>
+    `;
+  }
+};
+__decorateClass([
+  query("#dialog")
+], MinidModal.prototype, "dialog", 2);
+__decorateClass([
+  query(".dialog")
+], MinidModal.prototype, "panel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MinidModal.prototype, "open", 2);
+__decorateClass([
+  property({ reflect: true })
+], MinidModal.prototype, "heading", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], MinidModal.prototype, "handleOpenChange", 1);
+MinidModal = __decorateClass([
+  customElement("mid-modal")
+], MinidModal);
+setDefaultAnimation("modal.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("modal.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("modal.denyClose", {
+  keyframes: [{ scale: 1 }, { scale: 1.03 }, { scale: 1 }],
+  options: { duration: 100 }
+});
+export {
+  MinidModal
+};
+//# sourceMappingURL=modal.js.map

package/dist/components/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../src/components/modal.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-modal': MinidModal;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --max-width: 40rem;\n      --footer-and-header-height: 140px;\n      display: contents;\n    }\n\n    .dialog {\n      max-width: var(--max-width);\n      max-height: unset;\n    }\n\n    .dialog[open] {\n      animation: none;\n    }\n\n    .dialog.closing::backdrop {\n      animation: fade-out 200ms ease-in forwards;\n    }\n\n    .modal-content {\n      max-height: calc(90vh - var(--footer-and-header-height));\n      overflow: auto;\n    }\n\n    .footer {\n      justify-content: flex-end;\n    }\n\n    @keyframes fade-out {\n      from {\n        opacity: 1;\n      }\n\n      to {\n        opacity: 0;\n      }\n    }\n  `,\n];\n\n/**\n *\n * @event mid-show - Emitted when the modal opens.\n * @event mid-after-show - Emitted after the modal opens and all animations are complete.\n * @event mid-hide - Emitted when the modal closes.\n * @event mid-after-hide - Emitted after the modal closes and all animations are complete.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} mid-request-close - Emitted when the user attempts to\n *   close the modal by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - Select the base `dialog` element\n * @csspart header - Select the `header` element\n * @csspart body - Select the `article` element\n * @csspart footer - Select the `footer` element\n *\n * @slot -- The default slot for the body content of the modal\n * @slot heading - The content inside the `h2` element\n * @slot footer - The content inside the `footer` element\n *\n * @animation modal.show - The animation to use when showing the modal.\n * @animation modal.hide - The animation to use when hiding the modal.\n * @animation modal.denyClose - The animation to use when closing the modal is prevented.\n *\n */\n@customElement('mid-modal')\nexport class MinidModal extends styled(LitElement, styles) {\n  @query('#dialog')\n  dialog!: HTMLDialogElement;\n\n  @query('.dialog')\n  panel!: HTMLElement;\n\n  /**\n   * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ reflect: true })\n  heading = '';\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const requestCloseEvent = new CustomEvent('mid-request-close', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: { source },\n    });\n    this.dispatchEvent(requestCloseEvent);\n\n    if (requestCloseEvent.defaultPrevented) {\n      const { keyframes, options } = getAnimation(this, 'modal.denyClose');\n      animateTo(this.panel, keyframes, options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n\n    if (event.defaultPrevented) {\n      this.requestClose('keyboard');\n    } else {\n      this.hide();\n    }\n  };\n\n  private handleBackdropClick({ target }: Event) {\n    // if the target is the dialog, the backdrop was clicked\n    if (target === this.dialog) {\n      this.requestClose('overlay');\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      // this.addOpenListeners();\n      this.dialog.showModal();\n\n      lockBodyScrolling(this);\n\n      const panelAnimation = getAnimation(this, 'modal.show');\n      await animateTo(\n        this.panel,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      ),\n        this.dispatchEvent(\n          new Event('mid-after-show', { bubbles: true, composed: true })\n        );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n\n      await Promise.all([stopAnimations(this.dialog)]);\n      const panelAnimation = getAnimation(this, 'modal.hide');\n\n      // The backdrop can only be animated with css because it's a pseudo element\n      // so we add a closing class to trigger it at the same time as the modal animation\n      this.panel.classList.add('closing');\n      await animateTo(\n        this.panel,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      );\n      this.panel.classList.remove('closing');\n      this.dialog.close();\n      this.panel.hidden = false;\n      unlockBodyScrolling(this);\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  /**\n   * Shows the modal.\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 modal\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  override render() {\n    return html`\n      <dialog\n        part=\"base\"\n        id=\"dialog\"\n        class=\"dialog fds-modal m-auto\"\n        @cancel=${this.handleDialogCancel}\n        @click=${this.handleBackdropClick}\n      >\n        <header part=\"header\" class=\"fds-modal__header flex\">\n          <h2 class=\"fds-heading fds-heading--xs\">\n            <slot name=\"heading\"></slot>\n          </h2>\n          <button\n            autofocus\n            @click=\"${() => this.requestClose('close-button')}\"\n            class=\"fds-btn fds-focus fds-btn--md fds-btn--tertiary fds-btn--second fds-btn--icon-only fds-modal__header__button\"\n          >\n            <mid-icon class=\"text-[1.75rem]\" name=\"xmark\"></mid-icon>\n          </button>\n        </header>\n        <article part=\"body\" class=\"fds-modal__content modal-content\">\n          <slot> </slot>\n        </article>\n        <footer part=\"footer\" class=\"fds-modal__footer footer\">\n          <slot name=\"footer\"> </slot>\n        </footer>\n      </dialog>\n    `;\n  }\n}\n\nsetDefaultAnimation('modal.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('modal.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('modal.denyClose', {\n  keyframes: [{ scale: 1 }, { scale: 1.03 }, { scale: 1 }],\n  options: { duration: 100 },\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCF;AA4BO,IAAM,aAAN,cAAyB,OAAO,YAAY,MAAM,EAAE;AAAA,EAApD,cAAA;AAAA,UAAA,GAAA,SAAA;AAYE,SAAA,OAAA;AAOG,SAAA,UAAA;AAoBV,SAAA,qBAAqB,CAAC,UAAiB;AACrC,YAAM,eAAe;AAErB,UAAI,MAAM,kBAAkB;AAC1B,aAAK,aAAa,UAAU;AAAA,MAAA,OACvB;AACL,aAAK,KAAK;AAAA,MAAA;AAAA,IAEd;AAAA,EAAA;AAAA,EA1BQ,aAAa,QAAiD;AAC9D,UAAA,oBAAoB,IAAI,YAAY,qBAAqB;AAAA,MAC7D,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ,EAAE,OAAO;AAAA,IAAA,CAClB;AACD,SAAK,cAAc,iBAAiB;AAEpC,QAAI,kBAAkB,kBAAkB;AACtC,YAAM,EAAE,WAAW,QAAA,IAAY,aAAa,MAAM,iBAAiB;AACzD,gBAAA,KAAK,OAAO,WAAW,OAAO;AACxC;AAAA,IAAA;AAGF,SAAK,KAAK;AAAA,EAAA;AAAA,EAaJ,oBAAoB,EAAE,UAAiB;AAEzC,QAAA,WAAW,KAAK,QAAQ;AAC1B,WAAK,aAAa,SAAS;AAAA,IAAA;AAAA,EAC7B;AAAA,EAIF,MAAM,mBAAmB;AACvB,QAAI,KAAK,MAAM;AAER,WAAA;AAAA,QACH,IAAI,MAAM,YAAY,EAAE,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,MACzD;AAEA,WAAK,OAAO,UAAU;AAEtB,wBAAkB,IAAI;AAEhB,YAAA,iBAAiB,aAAa,MAAM,YAAY;AAChD,YAAA;AAAA,QACJ,KAAK;AAAA,QACL,eAAe;AAAA,QACf,eAAe;AAAA,SAEf,KAAK;AAAA,QACH,IAAI,MAAM,kBAAkB,EAAE,SAAS,MAAM,UAAU,KAAM,CAAA;AAAA,MAC/D;AAAA,IAAA,OACG;AAEA,WAAA;AAAA,QACH,IAAI,MAAM,YAAY,EAAE,SAAS,MAAM,UAAU,KAAM,CAAA;AAAA,MACzD;AAEA,YAAM,QAAQ,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,CAAC;AACzC,YAAA,iBAAiB,aAAa,MAAM,YAAY;AAIjD,WAAA,MAAM,UAAU,IAAI,SAAS;AAC5B,YAAA;AAAA,QACJ,KAAK;AAAA,QACL,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AACK,WAAA,MAAM,UAAU,OAAO,SAAS;AACrC,WAAK,OAAO,MAAM;AAClB,WAAK,MAAM,SAAS;AACpB,0BAAoB,IAAI;AACnB,WAAA;AAAA,QACH,IAAI,MAAM,kBAAkB,EAAE,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,MAC/D;AAAA,IAAA;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAMF,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,EAGnC,SAAS;AACT,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKO,KAAK,kBAAkB;AAAA,iBACxB,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQnB,MAAM,KAAK,aAAa,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAe7D;AA5JE,gBAAA;AAAA,EADC,MAAM,SAAS;AAAA,GADL,WAEX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,MAAM,SAAS;AAAA,GAJL,WAKX,WAAA,SAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAM,CAAA;AAAA,GAX/B,WAYX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAM,CAAA;AAAA,GAlBhB,WAmBX,WAAA,WAAA,CAAA;AAsCM,gBAAA;AAAA,EADL,MAAM,QAAQ,EAAE,sBAAsB,KAAM,CAAA;AAAA,GAxDlC,WAyDL,WAAA,oBAAA,CAAA;AAzDK,aAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,UAAA;AAgKb,oBAAoB,cAAc;AAAA,EAChC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,OAAO,IAAI;AAAA,IACzB,EAAE,SAAS,GAAG,OAAO,EAAE;AAAA,EACzB;AAAA,EACA,SAAS,EAAE,UAAU,KAAK,QAAQ,OAAO;AAC3C,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,OAAO;AAC3C,CAAC;AAED,oBAAoB,mBAAmB;AAAA,EACrC,WAAW,CAAC,EAAE,OAAO,KAAK,EAAE,OAAO,QAAQ,EAAE,OAAO,GAAG;AAAA,EACvD,SAAS,EAAE,UAAU,IAAI;AAC3B,CAAC;"}

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mid-paragraph': MinidParagraph;
+    }
+}
+declare const MinidParagraph_base: typeof LitElement;
+/**
+ * A paragraph
+ */
+export declare class MinidParagraph extends MinidParagraph_base {
+    /**
+     * `'xs' = 14px`
+     * `'sm' = 16px`
+     * `'md' = 18px`
+     * `'lg' = 21px`
+     * @default 'md'
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Add margin below element
+     * @default false
+     */
+    spacing: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=paragraph.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.component.d.ts","sourceRoot":"","sources":["../../src/components/paragraph.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF;;AAED;;GAEG;AACH,qBACa,cAAe,SAAQ,mBAAkB;IACpD;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC;;;OAGG;IAEH,OAAO,UAAS;IAEP,MAAM;CAchB"}