@felleslosninger/minid-elements 0.0.88

package/dist/components/countdown.js

@@ -0,0 +1,105 @@
+import { property, state, customElement } from "lit/decorators.js";
+import { LitElement, html, css } from "lit";
+import { styled } from "../mixins/tailwind.mixin.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;
+};
+let MinidCountdown = class extends styled(LitElement) {
+  constructor() {
+    super(...arguments);
+    this.expiry = Date.now() + 30 * 1e3;
+    this.size = "150";
+    this.expired = false;
+  }
+  firstUpdated() {
+    const canvas = this.shadowRoot.querySelector("canvas");
+    canvas.width = parseInt(this.size);
+    canvas.height = parseInt(this.size);
+    const ctx = canvas.getContext("2d");
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    const radius = canvas.height / 2 - 1;
+    const duration = this.expiry - Date.now();
+    let prevTimeRemaining = duration;
+    const drawCountdown = () => {
+      const timeRemaining = this.expiry - Date.now();
+      if (prevTimeRemaining - timeRemaining < 50) {
+        requestAnimationFrame(drawCountdown);
+        return;
+      }
+      prevTimeRemaining = timeRemaining;
+      if (timeRemaining > 0) {
+        const elapsedTime = duration - timeRemaining;
+        const arcLength = 2 * Math.PI * (elapsedTime / duration);
+        const startAngle = arcLength - Math.PI / 2;
+        const secondsRemaining = Math.max(Math.ceil(timeRemaining / 1e3), 0);
+        const minutes = Math.floor(secondsRemaining / 60);
+        const seconds = secondsRemaining % 60;
+        const formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.beginPath();
+        ctx.moveTo(centerX, centerY);
+        ctx.arc(centerX, centerY, radius, startAngle, -Math.PI / 2);
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = "grey";
+        ctx.fillStyle = "#edf3f9";
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+        ctx.font = "30px Arial";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillStyle = "grey";
+        const textOffset = centerY / 3;
+        ctx.fillText(formattedTime, centerX, centerY + textOffset);
+        requestAnimationFrame(drawCountdown);
+      } else {
+        this.expired = true;
+        this.dispatchEvent(
+          new CustomEvent("countdown-expired", {
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    };
+    drawCountdown();
+  }
+  render() {
+    return this.expired ? html`<slot></slot>` : html`<canvas></canvas>`;
+  }
+};
+MinidCountdown.styles = [
+  css`
+      :host {
+        display: inline-block;
+        margin: auto;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Number })
+], MinidCountdown.prototype, "expiry", 2);
+__decorateClass([
+  property({ type: String })
+], MinidCountdown.prototype, "size", 2);
+__decorateClass([
+  state()
+], MinidCountdown.prototype, "expired", 2);
+__decorateClass([
+  property({ attribute: false })
+], MinidCountdown.prototype, "callback", 2);
+MinidCountdown = __decorateClass([
+  customElement("mid-countdown")
+], MinidCountdown);
+export {
+  MinidCountdown
+};
+//# sourceMappingURL=countdown.js.map

package/dist/components/countdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown.js","sources":["../../src/components/countdown.component.ts"],"sourcesContent":["import { customElement, property, state } from 'lit/decorators.js';\nimport { css, html, LitElement } from 'lit';\nimport { styled } from '../mixins/tailwind.mixin.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-countdown': MinidCountdown;\n  }\n}\n\n@customElement('mid-countdown')\nexport class MinidCountdown extends styled(LitElement) {\n  static override styles = [\n    css`\n      :host {\n        display: inline-block;\n        margin: auto;\n      }\n    `,\n  ];\n\n  /**\n   * Timestamp in ms for when the countdown should expire\n   */\n  @property({ type: Number })\n  expiry: number = Date.now() + 30 * 1000; // future timestamp in ms\n\n  /**\n   * Diameter of circle in pixels\n   */\n  @property({ type: String })\n  size: string = '150';\n\n  @state()\n  private expired = false;\n\n  // TODO: add event emitter for countdown expired\n  @property({ attribute: false })\n  callback?: () => void;\n\n  firstUpdated() {\n    const canvas = <HTMLCanvasElement>this.shadowRoot!.querySelector('canvas');\n\n    canvas.width = parseInt(this.size);\n    canvas.height = parseInt(this.size);\n\n    const ctx = <CanvasRenderingContext2D>canvas.getContext('2d');\n    const centerX = canvas.width / 2;\n    const centerY = canvas.height / 2;\n    const radius = canvas.height / 2 - 1;\n    const duration = this.expiry - Date.now(); // total countdown time\n    let prevTimeRemaining = duration;\n\n    const drawCountdown = () => {\n      const timeRemaining = this.expiry - Date.now();\n\n      if (prevTimeRemaining - timeRemaining < 50) {\n        // Skip drawing if time difference is less than 50ms\n        requestAnimationFrame(drawCountdown); // otherwise this will update 60 times per second...\n        return;\n      }\n\n      prevTimeRemaining = timeRemaining;\n\n      if (timeRemaining > 0) {\n        const elapsedTime = duration - timeRemaining;\n\n        const arcLength = 2 * Math.PI * (elapsedTime / duration);\n        const startAngle = arcLength - Math.PI / 2;\n\n        const secondsRemaining = Math.max(Math.ceil(timeRemaining / 1000), 0); // Ensure non-negative\n        const minutes = Math.floor(secondsRemaining / 60);\n        const seconds = secondsRemaining % 60;\n        const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n\n        // draw arc\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        ctx.beginPath();\n        ctx.moveTo(centerX, centerY);\n        ctx.arc(centerX, centerY, radius, startAngle, -Math.PI / 2);\n        ctx.lineWidth = 2;\n        ctx.strokeStyle = 'grey';\n        ctx.fillStyle = '#edf3f9';\n        ctx.closePath();\n        ctx.fill();\n        ctx.stroke();\n\n        // draw text\n        ctx.font = '30px Arial';\n        ctx.textAlign = 'center';\n        ctx.textBaseline = 'middle';\n        ctx.fillStyle = 'grey';\n        const textOffset = centerY / 3;\n        ctx.fillText(formattedTime, centerX, centerY + textOffset);\n\n        requestAnimationFrame(drawCountdown);\n      } else {\n        this.expired = true;\n        this.dispatchEvent(\n          new CustomEvent('countdown-expired', {\n            bubbles: true,\n            composed: true,\n          })\n        );\n      }\n    };\n\n    drawCountdown();\n  }\n\n  override render() {\n    return this.expired ? html`<slot></slot>` : html`<canvas></canvas>`;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAWO,IAAM,iBAAN,cAA6B,OAAO,UAAU,EAAE;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAcY,SAAA,SAAA,KAAK,IAAI,IAAI,KAAK;AAMpB,SAAA,OAAA;AAGf,SAAQ,UAAU;AAAA,EAAA;AAAA,EAMlB,eAAe;AACb,UAAM,SAA4B,KAAK,WAAY,cAAc,QAAQ;AAElE,WAAA,QAAQ,SAAS,KAAK,IAAI;AAC1B,WAAA,SAAS,SAAS,KAAK,IAAI;AAE5B,UAAA,MAAgC,OAAO,WAAW,IAAI;AACtD,UAAA,UAAU,OAAO,QAAQ;AACzB,UAAA,UAAU,OAAO,SAAS;AAC1B,UAAA,SAAS,OAAO,SAAS,IAAI;AACnC,UAAM,WAAW,KAAK,SAAS,KAAK,IAAI;AACxC,QAAI,oBAAoB;AAExB,UAAM,gBAAgB,MAAM;AAC1B,YAAM,gBAAgB,KAAK,SAAS,KAAK,IAAI;AAEzC,UAAA,oBAAoB,gBAAgB,IAAI;AAE1C,8BAAsB,aAAa;AACnC;AAAA,MAAA;AAGkB,0BAAA;AAEpB,UAAI,gBAAgB,GAAG;AACrB,cAAM,cAAc,WAAW;AAE/B,cAAM,YAAY,IAAI,KAAK,MAAM,cAAc;AACzC,cAAA,aAAa,YAAY,KAAK,KAAK;AAEnC,cAAA,mBAAmB,KAAK,IAAI,KAAK,KAAK,gBAAgB,GAAI,GAAG,CAAC;AACpE,cAAM,UAAU,KAAK,MAAM,mBAAmB,EAAE;AAChD,cAAM,UAAU,mBAAmB;AACnC,cAAM,gBAAgB,GAAG,QAAQ,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,QAAQ,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC;AAGnG,YAAI,UAAU,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AAC/C,YAAI,UAAU;AACV,YAAA,OAAO,SAAS,OAAO;AACvB,YAAA,IAAI,SAAS,SAAS,QAAQ,YAAY,CAAC,KAAK,KAAK,CAAC;AAC1D,YAAI,YAAY;AAChB,YAAI,cAAc;AAClB,YAAI,YAAY;AAChB,YAAI,UAAU;AACd,YAAI,KAAK;AACT,YAAI,OAAO;AAGX,YAAI,OAAO;AACX,YAAI,YAAY;AAChB,YAAI,eAAe;AACnB,YAAI,YAAY;AAChB,cAAM,aAAa,UAAU;AAC7B,YAAI,SAAS,eAAe,SAAS,UAAU,UAAU;AAEzD,8BAAsB,aAAa;AAAA,MAAA,OAC9B;AACL,aAAK,UAAU;AACV,aAAA;AAAA,UACH,IAAI,YAAY,qBAAqB;AAAA,YACnC,SAAS;AAAA,YACT,UAAU;AAAA,UACX,CAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAEJ;AAEc,kBAAA;AAAA,EAAA;AAAA,EAGP,SAAS;AACT,WAAA,KAAK,UAAU,sBAAsB;AAAA,EAAA;AAEhD;AAtGa,eACK,SAAS;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAbf,eAcX,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAnBf,eAoBX,WAAA,QAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAM;AAAA,GAtBI,eAuBH,WAAA,WAAA,CAAA;AAIR,gBAAA;AAAA,EADC,SAAS,EAAE,WAAW,MAAO,CAAA;AAAA,GA1BnB,eA2BX,WAAA,YAAA,CAAA;AA3BW,iBAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,cAAA;"}

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

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mid-dropdown': MinidDropdown;
+    }
+}
+declare const MinidDropdown_base: typeof LitElement;
+/**
+ * @slot -- Default slot for content of the dropdown panel
+ * @slot trigger - Used for the button element that will be used to open the dropdown menu
+ * @part panel - Select the dropdown panel host element
+ */
+export declare class MinidDropdown extends MinidDropdown_base {
+    #private;
+    popupId: string;
+    open: boolean;
+    size: 'sm' | 'md' | 'lg';
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+    /**
+     * Sync the dropdown panel size with the trigger element
+     */
+    sync?: 'width' | 'height' | 'both';
+    /**
+     * Distance between trigger and dropdown panel
+     */
+    distance: number;
+    /**
+     * Nudge the dropdown panel position. Accepts a negative or positive number.
+     */
+    skidding: number;
+    arrow: boolean;
+    /**
+     * Choose if position is `fixed` or `absolute`. `absolute` is more performant,
+     * but `fixed` can solve issues with overflow clipping
+     */
+    hoist: boolean;
+    handleAnchorClick: (event: CustomEvent<{
+        id: string;
+    }>) => void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=dropdown.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.component.d.ts","sourceRoot":"","sources":["../../src/components/dropdown.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,mBAAmB,CAAC;AAE3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAuBD;;;;GAIG;AACH,qBACa,aAAc,SAAQ,kBAA0B;;IAE3D,OAAO,SAAoC;IAG3C,IAAI,UAAS;IAGb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,SAAS,EACL,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,OAAO,GACP,aAAa,GACb,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,CAAgB;IAE9B;;OAEG;IAEH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEnC;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAGb,KAAK,UAAS;IAEd;;;OAGG;IAEH,KAAK,UAAS;IAqCd,iBAAiB,UAAW,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,UAKrD;IAEO,MAAM;CA4BhB"}

package/dist/components/dropdown.js

@@ -0,0 +1,152 @@
+import { css, LitElement, html } from "lit";
+import { state, property, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styled } from "../mixins/tailwind.mixin.js";
+import "./popup.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"), 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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _handleClickOutside, _MinidDropdown_instances, toggleDropdownOpen_fn;
+let nextUniqueID = 0;
+const styles = [
+  css`
+    :host {
+      display: flex;
+    }
+
+    .popup {
+      --arrow-size: 8px;
+    }
+
+    .popup::part(arrow) {
+      z-index: 1501;
+      border: 1px solid #cbcbcb;
+      border-left: 0;
+      border-top: 0;
+    }
+  `
+];
+let MinidDropdown = class extends styled(LitElement, styles) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _MinidDropdown_instances);
+    this.popupId = `mid-dropdown-${nextUniqueID++}`;
+    this.open = false;
+    this.size = "md";
+    this.placement = "bottom-end";
+    this.distance = 4;
+    this.skidding = 0;
+    this.arrow = false;
+    this.hoist = false;
+    __privateAdd(this, _handleClickOutside, (event) => {
+      if (!event.composedPath().includes(this)) {
+        __privateMethod(this, _MinidDropdown_instances, toggleDropdownOpen_fn).call(this, event, false);
+      }
+    });
+    this.handleAnchorClick = (event) => {
+      if (event.detail.id !== this.popupId) {
+        __privateMethod(this, _MinidDropdown_instances, toggleDropdownOpen_fn).call(this, event, false);
+      }
+    };
+  }
+  render() {
+    return html`
+      <mid-popup
+        id="${this.popupId}"
+        class="popup"
+        distance=${this.distance}
+        placement="${this.placement}"
+        skidding=${this.skidding}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        flip
+        shift
+        auto-size="vertical"
+        auto-size-padding="10"
+        sync=${ifDefined(this.sync)}
+        ?active=${this.open}
+        ?arrow=${this.arrow}
+        @click=${__privateMethod(this, _MinidDropdown_instances, toggleDropdownOpen_fn)}
+      >
+        <slot slot="anchor" name="trigger"> </slot>
+        <div
+          aria-hidden=${this.open ? "false" : "true"}
+          aria-labelledby="${this.popupId}"
+        >
+          <slot part="panel"></slot>
+        </div>
+      </mid-popup>
+    `;
+  }
+};
+_handleClickOutside = /* @__PURE__ */ new WeakMap();
+_MinidDropdown_instances = /* @__PURE__ */ new WeakSet();
+toggleDropdownOpen_fn = function(event, open) {
+  event.stopPropagation();
+  if (open !== void 0) {
+    this.open = open;
+  } else {
+    this.open = !this.open;
+  }
+  if (this.open) {
+    addEventListener("click", __privateGet(this, _handleClickOutside));
+    addEventListener(
+      "mid-anchor-click",
+      this.handleAnchorClick
+    );
+  } else {
+    this.blur();
+    removeEventListener(
+      "mid-anchor-click",
+      this.handleAnchorClick
+    );
+    removeEventListener("click", __privateGet(this, _handleClickOutside));
+  }
+};
+__decorateClass([
+  state()
+], MinidDropdown.prototype, "popupId", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MinidDropdown.prototype, "open", 2);
+__decorateClass([
+  property()
+], MinidDropdown.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], MinidDropdown.prototype, "placement", 2);
+__decorateClass([
+  property({ reflect: true })
+], MinidDropdown.prototype, "sync", 2);
+__decorateClass([
+  property({ type: Number })
+], MinidDropdown.prototype, "distance", 2);
+__decorateClass([
+  property({ type: Number })
+], MinidDropdown.prototype, "skidding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidDropdown.prototype, "arrow", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidDropdown.prototype, "hoist", 2);
+MinidDropdown = __decorateClass([
+  customElement("mid-dropdown")
+], MinidDropdown);
+export {
+  MinidDropdown
+};
+//# sourceMappingURL=dropdown.js.map

package/dist/components/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sources":["../../src/components/dropdown.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './popup.component';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-dropdown': MinidDropdown;\n  }\n}\n\nlet nextUniqueID = 0;\n\nconst styles = [\n  css`\n    :host {\n      display: flex;\n    }\n\n    .popup {\n      --arrow-size: 8px;\n    }\n\n    .popup::part(arrow) {\n      z-index: 1501;\n      border: 1px solid #cbcbcb;\n      border-left: 0;\n      border-top: 0;\n    }\n  `,\n];\n\n/**\n * @slot -- Default slot for content of the dropdown panel\n * @slot trigger - Used for the button element that will be used to open the dropdown menu\n * @part panel - Select the dropdown panel host element\n */\n@customElement('mid-dropdown')\nexport class MinidDropdown extends styled(LitElement, styles) {\n  @state()\n  popupId = `mid-dropdown-${nextUniqueID++}`;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-end';\n\n  /**\n   * Sync the dropdown panel size with the trigger element\n   */\n  @property({ reflect: true })\n  sync?: 'width' | 'height' | 'both';\n\n  /**\n   * Distance between trigger and dropdown panel\n   */\n  @property({ type: Number })\n  distance = 4;\n\n  /**\n   * Nudge the dropdown panel position. Accepts a negative or positive number.\n   */\n  @property({ type: Number })\n  skidding = 0;\n\n  @property({ type: Boolean })\n  arrow = false;\n\n  /**\n   * Choose if position is `fixed` or `absolute`. `absolute` is more performant,\n   * but `fixed` can solve issues with overflow clipping\n   */\n  @property({ type: Boolean })\n  hoist = false;\n\n  /**\n   *\n   * @ignore\n   */\n  #handleClickOutside = (event: Event) => {\n    if (!event.composedPath().includes(this)) {\n      this.#toggleDropdownOpen(event, false);\n    }\n  };\n\n  #toggleDropdownOpen(event: Event, open?: boolean) {\n    event.stopPropagation();\n\n    if (open !== undefined) {\n      this.open = open;\n    } else {\n      this.open = !this.open;\n    }\n\n    if (this.open) {\n      addEventListener('click', this.#handleClickOutside);\n      addEventListener(\n        'mid-anchor-click',\n        this.handleAnchorClick as EventListener\n      );\n    } else {\n      this.blur();\n      removeEventListener(\n        'mid-anchor-click',\n        this.handleAnchorClick as EventListener\n      );\n      removeEventListener('click', this.#handleClickOutside);\n    }\n  }\n\n  handleAnchorClick = (event: CustomEvent<{ id: string }>) => {\n    // to make sure clicking another element's anchor closes current element's dropdown menu\n    if (event.detail.id !== this.popupId) {\n      this.#toggleDropdownOpen(event, false);\n    }\n  };\n\n  override render() {\n    return html`\n      <mid-popup\n        id=\"${this.popupId}\"\n        class=\"popup\"\n        distance=${this.distance}\n        placement=\"${this.placement}\"\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip\n        shift\n        auto-size=\"vertical\"\n        auto-size-padding=\"10\"\n        sync=${ifDefined(this.sync)}\n        ?active=${this.open}\n        ?arrow=${this.arrow}\n        @click=${this.#toggleDropdownOpen}\n      >\n        <slot slot=\"anchor\" name=\"trigger\"> </slot>\n        <div\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-labelledby=\"${this.popupId}\"\n        >\n          <slot part=\"panel\"></slot>\n        </div>\n      </mid-popup>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mid-heading': MinidHeading;
+    }
+}
+declare const MinidHeading_base: typeof LitElement;
+export declare class MinidHeading extends MinidHeading_base {
+    /**
+     * @default 1
+     */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * @default 'md'
+     */
+    size: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /**
+     *
+     * @default false
+     */
+    spacing: boolean;
+    render(): import('lit-html').TemplateResult;
+}
+export {};
+//# sourceMappingURL=heading.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heading.component.d.ts","sourceRoot":"","sources":["../../src/components/heading.component.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;;AAED,qBACa,YAAa,SAAQ,iBAAkB;IAClD;;OAEG;IAEH,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IAEjC;;OAEG;IAEH,IAAI,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAE9D;;;OAGG;IAEH,OAAO,UAAS;IAEP,MAAM;CA0BhB"}

package/dist/components/heading.js

@@ -0,0 +1,53 @@
+import { literal, html } from "lit/static-html.js";
+import { property, customElement } from "lit/decorators.js";
+import { styled } from "../mixins/tailwind.mixin.js";
+import { classMap } from "lit/directives/class-map.js";
+import { LitElement } from "lit";
+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;
+};
+let MinidHeading = class extends styled(LitElement) {
+  constructor() {
+    super(...arguments);
+    this.level = 1;
+    this.size = "md";
+    this.spacing = false;
+  }
+  render() {
+    const tag = this.level === 1 ? literal`h1` : this.level === 2 ? literal`h2` : this.level === 3 ? literal`h3` : this.level === 4 ? literal`h4` : this.level === 5 ? literal`h5` : literal`h6`;
+    return html`<${tag} class="${classMap({
+      "fds-heading": true,
+      "fds-heading--spacing": this.spacing,
+      "fds-heading--2xs": this.size === "2xs",
+      "fds-heading--xs": this.size === "xs",
+      "fds-heading--sm": this.size === "sm",
+      "fds-heading--md": this.size === "md",
+      "fds-heading--lg": this.size === "lg",
+      "fds-heading--xl": this.size === "xl",
+      "fds-heading--2xl": this.size === "2xl"
+    })}" ><slot></slot></${tag}>`;
+  }
+};
+__decorateClass([
+  property({ type: Number })
+], MinidHeading.prototype, "level", 2);
+__decorateClass([
+  property()
+], MinidHeading.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidHeading.prototype, "spacing", 2);
+MinidHeading = __decorateClass([
+  customElement("mid-heading")
+], MinidHeading);
+export {
+  MinidHeading
+};
+//# sourceMappingURL=heading.js.map

package/dist/components/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sources":["../../src/components/heading.component.ts"],"sourcesContent":["import { html, literal } from 'lit/static-html.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement } from 'lit';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-heading': MinidHeading;\n  }\n}\n\n@customElement('mid-heading')\nexport class MinidHeading extends styled(LitElement) {\n  /**\n   * @default 1\n   */\n  @property({ type: Number })\n  level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n  /**\n   * @default 'md'\n   */\n  @property()\n  size: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';\n\n  /**\n   *\n   * @default false\n   */\n  @property({ type: Boolean })\n  spacing = false;\n\n  override render() {\n    const tag =\n      this.level === 1\n        ? literal`h1`\n        : this.level === 2\n          ? literal`h2`\n          : this.level === 3\n            ? literal`h3`\n            : this.level === 4\n              ? literal`h4`\n              : this.level === 5\n                ? literal`h5`\n                : literal`h6`;\n\n    return html`<${tag} class=\"${classMap({\n      'fds-heading': true,\n      'fds-heading--spacing': this.spacing,\n      'fds-heading--2xs': this.size === '2xs',\n      'fds-heading--xs': this.size === 'xs',\n      'fds-heading--sm': this.size === 'sm',\n      'fds-heading--md': this.size === 'md',\n      'fds-heading--lg': this.size === 'lg',\n      'fds-heading--xl': this.size === 'xl',\n      'fds-heading--2xl': this.size === '2xl',\n    })}\" ><slot></slot></${tag}>`;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaO,IAAM,eAAN,cAA2B,OAAO,UAAU,EAAE;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AAK0B,SAAA,QAAA;AAM0B,SAAA,OAAA;AAO/C,SAAA,UAAA;AAAA,EAAA;AAAA,EAED,SAAS;AACV,UAAA,MACJ,KAAK,UAAU,IACX,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA,KAAK,UAAU,IACb,cACA;AAEP,WAAA,QAAQ,GAAG,WAAW,SAAS;AAAA,MACpC,eAAe;AAAA,MACf,wBAAwB,KAAK;AAAA,MAC7B,oBAAoB,KAAK,SAAS;AAAA,MAClC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,mBAAmB,KAAK,SAAS;AAAA,MACjC,oBAAoB,KAAK,SAAS;AAAA,IAAA,CACnC,CAAC,qBAAqB,GAAG;AAAA,EAAA;AAE9B;AAzCE,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAJf,aAKX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS;AAAA,GAVC,aAWX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAjBhB,aAkBX,WAAA,WAAA,CAAA;AAlBW,eAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,YAAA;"}

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

@@ -0,0 +1,94 @@
+import { LitElement } from 'lit';
+import { MinidPopup } from './popup.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mid-helptext': MinidHelptext;
+    }
+}
+declare const MinidHelptext_base: typeof LitElement;
+/**
+ * @event mid-show - Emitted when open is set to `true`
+ * @event mid-hide - Emitted when open is set to `false`
+ * @event mid-after-show - Emitted after the helptext has shown an all animations are complete
+ * @event mid-after-hide - Emitted after the helptext has hidden an all animations are complete
+ *
+ * @slot -- The default slot is for helptext content
+ *
+ * @cssproperty [--max-width=20rem] - Max width of the helptext content
+ */
+export declare class MinidHelptext extends MinidHelptext_base {
+    /**
+     * @ignore
+     */
+    body: HTMLElement;
+    /**
+     * @ignore
+     */
+    popup: MinidPopup;
+    /**
+     * Indicates whether or not the helptext is open. You can use this in lieu of the show/hide methods.
+     */
+    open: boolean;
+    /**
+     * Size of the icon
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Placement of the popup
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+    /**
+     * The distance in pixels from which to offset the helptext away from its target.
+     */
+    distance: number;
+    /**
+     * The distance in pixels from which to offset the helptext along its target.
+     */
+    skidding: number;
+    /**
+     * Enable this option to prevent the helptext from being clipped when the component is placed inside a container with
+     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+     * scenarios.
+     */
+    hoist: boolean;
+    filledIcon: boolean;
+    constructor();
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    /**
+     * @ignore
+     */
+    private handleBlur;
+    /**
+     * @ignore
+     */
+    private handleClick;
+    /**
+     * @ignore
+     */
+    private handleFocus;
+    /**
+     * @ignore
+     */
+    private handleDocumentKeyDown;
+    /**
+     * @ignore
+     */
+    private handleMouseOver;
+    /**
+     * @ignore
+     */
+    private handleMouseOut;
+    handleOpenChange(): Promise<void>;
+    /**
+     * Shows the helptext.
+     */
+    show(): Promise<void>;
+    /**
+     * Hides the helptext
+     */
+    hide(): Promise<void>;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=helptext.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helptext.component.d.ts","sourceRoot":"","sources":["../../src/components/helptext.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AASlD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AA0CD;;;;;;;;;GASG;AACH,qBACa,aAAc,SAAQ,kBAA0B;IAC3D;;OAEG;IAEH,IAAI,EAAG,WAAW,CAAC;IAEnB;;OAEG;IAEH,KAAK,EAAG,UAAU,CAAC;IAEnB;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IACS,SAAS,EACjB,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,OAAO,GACP,aAAa,GACb,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,CAAW;IAEzB;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;;OAIG;IAEH,KAAK,UAAS;IAGd,UAAU,UAAS;;IAUnB,oBAAoB;IAKpB,YAAY;IAWZ;;OAEG;IACH,OAAO,CAAC,UAAU,CAEhB;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAMjB;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAEjB;IAEF;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAM3B;IAEF;;OAEG;IACH,OAAO,CAAC,eAAe,CAErB;IAEF;;OAEG;IACH,OAAO,CAAC,cAAc,CAIpB;IAGI,gBAAgB;IAyCtB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASD,MAAM;CAyDhB"}