overview-components 1.0.77 → 1.0.79

package/dist/shared/lit-date-picker.js

@@ -0,0 +1,525 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as h } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as v } from "../node_modules/lit-element/lit-element.js";
+import { customElement as b } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as n } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as f } from "../node_modules/@lit/reactive-element/decorators/state.js";
+import { query as g } from "../node_modules/@lit/reactive-element/decorators/query.js";
+import { isEqual as k, isEmpty as D } from "lodash";
+import l from "../node_modules/luxon/src/datetime.js";
+import "../node_modules/luxon/src/duration.js";
+import { msg as d } from "../node_modules/@lit/localize/init/install.js";
+import "../node_modules/@lit/localize/init/runtime.js";
+/* empty css                                                */
+import $ from "../node_modules/air-datepicker/air-datepicker.js";
+import { localizedDatePicker as S } from "../utils/localization.js";
+import { classMap as y } from "../node_modules/lit-html/directives/class-map.js";
+import { debounce as O } from "../utils/utils.js";
+import { autoUpdate as P, computePosition as w, offset as C, flip as M, hide as x, shift as E } from "../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { css as T } from "../node_modules/@lit/reactive-element/css-tag.js";
+var L = Object.defineProperty, I = Object.getOwnPropertyDescriptor, o = (e, t, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? I(t, a) : t, p = e.length - 1, c; p >= 0; p--)
+    (c = e[p]) && (s = (i ? c(t, a, s) : c(s)) || s);
+  return i && s && L(t, a, s), s;
+};
+let r = class extends v {
+  constructor() {
+    super(), this.pickerVariant = "date", this.userLang = "cs", this.placeholder = "", this.disableClearButton = !1, this.range = !1, this.server = !1, this.disabled = !1, this.setOperator = (e, t) => {
+    }, this.filterOperators = [], this.displayValue = "", this.isSubmenuOpen = !1, this.submenuTriggerEl = null, this.handleOutsideClick = (e) => {
+      const t = e.composedPath(), a = t.some(
+        (i) => i instanceof HTMLElement && i.classList.contains("air-datepicker")
+      );
+      !t.includes(this) && !a && this.datePicker.visible && (this.datePicker.clear(), this.datePicker.hide());
+    }, this.debouncedHandleInput = O(this.handleDateInput, 500);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("focus", () => this.focus());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick, { capture: !0 }), this.removeEventListener("focus", () => this.focus());
+  }
+  updated(e) {
+    if (e.has("operator")) {
+      const t = e.get("operator");
+      (this.operator === "fromTo" || t === "fromTo") && this.datePicker.update(
+        {
+          range: this.operator === "fromTo"
+        },
+        { silent: !0 }
+      );
+    }
+    if (e.has("range") && this.datePicker.update(
+      {
+        range: this.range
+      },
+      { silent: !0 }
+    ), e.has("value") && !k(this.value, e.get("value"))) {
+      if (typeof this.value > "u" || this.value === "") {
+        this.datePicker.clear({ silent: !0 });
+        return;
+      }
+      this.value && this.datePicker.selectDate(this.value, { silent: !0 });
+    }
+  }
+  reinitializeDatePicker() {
+    this.datePicker && this.datePicker.destroy(), this.datePicker = new $(this.dateInputEl, {
+      timepicker: this.pickerVariant === "dateTime",
+      multipleDatesSeparator: " - ",
+      // isMobile: window.matchMedia('(max-width: 600px)').matches,
+      dateFormat: this.dateFormat || void 0,
+      locale: this.getLocale(),
+      autoClose: !0,
+      range: this.operator === "fromTo",
+      onRenderCell: ({
+        date: e,
+        cellType: t
+      }) => {
+        e.getDate();
+      },
+      onShow: () => {
+        var i, s, p;
+        const e = this.datePicker.$datepicker;
+        this.submenuTriggerEl = e == null ? void 0 : e.querySelector(".submenu-trigger"), this.submenuTriggerEl && (this.submenuTriggerEl.addEventListener("mouseenter", () => {
+          this.openSubmenu(!0);
+        }), (i = this.submenuTriggerEl) == null || i.addEventListener("mouseleave", (c) => {
+          const u = c.relatedTarget;
+          (u == null ? void 0 : u.closest("simple-popper")) || this.openSubmenu(!1);
+        }));
+        const t = (s = this.datePicker) == null ? void 0 : s.$datepicker, a = this.dateInputEl;
+        !t || !a || ((p = this.cleanupAutoUpdate) == null || p.call(this), this.cleanupAutoUpdate = P(a, t, () => {
+          w(a, t, {
+            placement: "bottom-start",
+            middleware: [C(4), M(), x(), E({ padding: 8 })]
+          }).then(({ x: c, y: u, middlewareData: m }) => {
+            m.hide && Object.assign(t.style, {
+              display: m.hide.referenceHidden ? "none" : "block"
+            }), Object.assign(t.style, {
+              position: "absolute",
+              left: `${c}px`,
+              top: `${u}px`,
+              overflow: "visible"
+            });
+          });
+        }));
+      },
+      onHide: () => {
+        var e;
+        (e = this.cleanupAutoUpdate) == null || e.call(this), this.openSubmenu(!1);
+      },
+      buttons: [
+        {
+          content: d("Dnes"),
+          // Button text
+          className: "custom-today-btn",
+          // Custom class (optional)
+          onClick: (e) => {
+            this.handleSetOperator("="), e.update({
+              range: !1,
+              selectedDates: [/* @__PURE__ */ new Date()]
+            });
+          }
+        },
+        ...this.server ? [
+          {
+            content: '<lit-icon icon="arrowLeft" size="1rem" style="margin-right: 0.5rem"></lit-icon> ' + d("Rychlé volby"),
+            className: "custom-today-btn submenu-trigger",
+            onClick: () => {
+            }
+          }
+        ] : []
+      ],
+      onSelect: ({
+        date: e,
+        formattedDate: t,
+        datepicker: a
+      }) => {
+        if (Array.isArray(e) && e.length === 2) {
+          const i = e[0].toISOString(), s = e[1].toISOString();
+          this.value = [i, s];
+        } else e instanceof Date ? this.value = e.toISOString() : (Array.isArray(e) && e.length === 0 || !e) && (this.value = void 0);
+        this.onChange && this.onChange(this.value), this.displayValue = t;
+      }
+    });
+  }
+  firstUpdated() {
+    this.reinitializeDatePicker(), document.addEventListener("click", this.handleOutsideClick, { capture: !0 });
+  }
+  openSubmenu(e) {
+    this.isSubmenuOpen = e;
+  }
+  getLocale() {
+    const e = this.userLang || localStorage.getItem("userLang") || "cs";
+    return S.get(e);
+  }
+  handleDateInput(e) {
+    const t = this._parseDate(e);
+    t && this.datePicker.selectDate(t), e === "" && this.datePicker.clear();
+  }
+  _parseDate(e) {
+    const t = [
+      { regex: /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/, format: "d.M.yyyy" },
+      // d.M.yyyy
+      { regex: /^(\d{2})\.(\d{2})\.(\d{4})$/, format: "dd.MM.yyyy" },
+      // dd.MM.yyyy
+      { regex: /^(\d{2})\/(\d{2})\/(\d{4})$/, format: "MM/dd/yyyy" },
+      // MM/dd/yyyy
+      { regex: /^(\d{2})\/(\d{2})\/(\d{4})$/, format: "dd/MM/yyyy" },
+      // dd/MM/yyyy
+      { regex: /^(\d{4})-(\d{2})-(\d{2})$/, format: "yyyy-MM-dd" },
+      // yyyy-MM-dd
+      // Ranges
+      {
+        regex: /^(\d{2})\.(\d{2})\.(\d{4})\s*-\s*(\d{2})\.(\d{2})\.(\d{4})$/,
+        format: "dd.MM.yyyy - dd.MM.yyyy"
+      },
+      {
+        regex: /^(\d{1,2})\.(\d{1,2})\.(\d{4})\s*-\s*(\d{1,2})\.(\d{1,2})\.(\d{4})$/,
+        format: "d.M.yyyy - d.M.yyyy"
+      },
+      {
+        regex: /^(\d{2})\/(\d{2})\/(\d{4})\s*-\s*(\d{2})\/(\d{2})\/(\d{4})$/,
+        format: "MM/dd/yyyy - MM/dd/yyyy"
+      },
+      {
+        regex: /^(\d{2})\/(\d{2})\/(\d{4})\s*-\s*(\d{2})\/(\d{2})\/(\d{4})$/,
+        format: "dd/MM/yyyy - dd/MM/yyyy"
+      },
+      {
+        regex: /^(\d{4})-(\d{2})-(\d{2})\s*-\s*(\d{4})-(\d{2})-(\d{2})$/,
+        format: "yyyy-MM-dd - yyyy-MM-dd"
+      }
+    ];
+    for (const { regex: a, format: i } of t) {
+      const s = e.match(a);
+      if (s)
+        if (i.includes(" - ")) {
+          const p = s[0].split(" - ")[0], c = s[0].split(" - ")[1], u = l.fromFormat(p, this.dateFormat || i.split(" - ")[0]).toJSDate();
+          console.log("startDateStr", p), console.log(i.split(" - ")[0]), console.log("startDate", u);
+          const m = l.fromFormat(c, this.dateFormat || i.split(" - ")[1]).toJSDate();
+          return [u, m];
+        } else
+          return l.fromFormat(e, this.dateFormat || i).toJSDate();
+    }
+    return null;
+  }
+  handleSetOperator(e) {
+    this.datePicker.update(
+      {
+        range: e === "fromTo",
+        selectedDates: []
+      },
+      { silent: !0 }
+    ), ["isEmpty", "isNotEmpty"].includes(e) || this.datePicker.show(), this.setOperator(e, { silent: !0 });
+  }
+  focus() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    e == null || e.focus();
+  }
+  _handleClearButtonClick() {
+    this.datePicker.clear();
+  }
+  render() {
+    return h`
+            <div class="custom-icon-wrapper">
+                <input
+                    id="dateInput"
+                    class="inputs customCell"
+                    type="text"
+                    placeholder="${d(this.placeholder)}"
+                    value="${this.displayValue || ""}"
+                    @input=${(e) => this.debouncedHandleInput(e.target.value)}
+                    .disabled="${this.disabled}"
+                />
+                <div
+                    class=${y({
+      "events-icon": !0,
+      "events-icon--no-filter": !this.server
+    })}
+                    @click=${() => {
+      this.datePicker.show();
+    }}
+                >
+                    <lit-icon-button
+                        icon="events"
+                        size="small"
+                        variant="text"
+                        .disabled="${this.disabled}"
+                    ></lit-icon-button>
+                </div>
+                ${(!D(this.value) || this.operator === "isEmpty" || this.operator === "isNotEmpty") && !this.disableClearButton ? h`
+                          <div
+                              class=${y({
+      "clear-icon": !0,
+      "clear-icon--no-filter": !this.server
+    })}
+                              @click=${() => {
+      this._handleClearButtonClick();
+    }}
+                          >
+                              <lit-icon-button
+                                  icon="close"
+                                  size="small"
+                                  variant="text"
+                              ></lit-icon-button>
+                          </div>
+                      ` : ""}
+                ${this.server ? h`<lit-data-grid-operators-popover
+                          class="filter-icon"
+                          .type="${"date"}"
+                          .setOperator="${(e) => {
+      this.handleSetOperator(e);
+    }}"
+                          .operator="${this.operator}"
+                          @mousedown=${(e) => {
+      e.preventDefault(), e.stopPropagation();
+    }}
+                          .disabled="${this.disabled}"
+                          .filterOperators="${this.filterOperators}"
+                      ></lit-data-grid-operators-popover>` : null}
+            </div>
+            ${this.server ? h`<simple-popper
+                      placement="left-end"
+                      manualOpening
+                      .offset="${0}"
+                      .target=${this.submenuTriggerEl}
+                      .showing=${this.isSubmenuOpen}
+                  >
+                      <lit-menu>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+      this.handleSetOperator("fromTo"), this.datePicker.update({
+        range: !0,
+        selectedDates: [
+          l.now().minus({ days: 7 }).toJSDate(),
+          /* @__PURE__ */ new Date()
+        ]
+      }), this.isSubmenuOpen = !1;
+    }}"
+                          >
+                              ${d("Posledních 7 dní")}
+                          </lit-menu-item>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+      this.handleSetOperator("fromTo"), this.datePicker.update({
+        range: !0,
+        selectedDates: [
+          l.now().minus({ days: 14 }).toJSDate(),
+          /* @__PURE__ */ new Date()
+        ]
+      }), this.isSubmenuOpen = !1;
+    }}"
+                          >
+                              ${d("Posledních 14 dní")}
+                          </lit-menu-item>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+      this.handleSetOperator("fromTo"), this.datePicker.update({
+        range: !0,
+        selectedDates: [
+          l.now().minus({ days: 30 }).toJSDate(),
+          /* @__PURE__ */ new Date()
+        ]
+      }), this.isSubmenuOpen = !1;
+    }}"
+                          >
+                              ${d("Posledních 30 dní")}
+                          </lit-menu-item>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+      this.handleSetOperator("fromTo"), this.datePicker.update({
+        range: !0,
+        selectedDates: [
+          l.now().minus({ months: 1 }).startOf("month").toJSDate(),
+          /* @__PURE__ */ new Date()
+        ]
+      });
+    }}"
+                          >
+                              ${d("Poslední kalendářní měsíc")}
+                          </lit-menu-item>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+      this.handleSetOperator("fromTo");
+      const e = l.now();
+      e.quarter;
+      const t = e.minus({ quarters: 1 }), a = t.startOf("quarter"), i = t.endOf("quarter");
+      this.datePicker.update({
+        range: !0,
+        selectedDates: [
+          a.toJSDate(),
+          i.toJSDate()
+        ]
+      });
+    }}"
+                          >
+                              ${d("Poslední kvartál")}
+                          </lit-menu-item>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+      this.handleSetOperator("fromTo"), this.datePicker.update({
+        range: !0,
+        selectedDates: [
+          l.now().minus({ months: 12 }).toJSDate(),
+          /* @__PURE__ */ new Date()
+        ]
+      });
+    }}"
+                          >
+                              ${d("Poslední 12 měsíců")}
+                          </lit-menu-item>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+      this.handleSetOperator("fromTo"), this.datePicker.update({
+        range: !0,
+        selectedDates: [
+          l.now().startOf("year").toJSDate(),
+          l.now().endOf("year").toJSDate()
+        ]
+      });
+    }}"
+                          >
+                              ${d("Poslední kalendářní rok")}
+                          </lit-menu-item>
+                      </lit-menu>
+                  </simple-popper>` : ""}
+        `;
+  }
+};
+r.styles = T`
+        .custom-icon-wrapper {
+            position: relative;
+            width: 100%;
+            display: inline-block;
+        }
+
+        input {
+            padding: 0.5rem;
+            border: 0.0625rem solid var(--color-divider, #d0d3db);
+            border-radius: 0.25rem;
+            min-width: 0;
+            width: -webkit-fill-available;
+            width: -moz-available;
+            width: fill-available;
+            background-color: var(--background-paper, #fff);
+            color: var(--text-primary, #111827);
+        }
+
+        input:hover:not(:disabled) {
+            border: 0.0625rem solid var(--color-secondary-main, #111827);
+        }
+        input:disabled {
+            background-color: var(--background-paper, #fff);
+            cursor: not-allowed;
+        }
+        input:focus {
+            outline: none;
+            border: 0.0625rem solid var(--color-secondary-dark, #010204);
+        }
+
+        .custom-icon-wrapper .clear-icon {
+            display: none;
+            position: absolute;
+            right: 56px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+        }
+
+        .custom-icon-wrapper .clear-icon--no-filter {
+            right: 33px;
+        }
+
+        .custom-icon-wrapper:hover .clear-icon {
+            display: inline-block;
+        }
+
+        .custom-icon-wrapper .events-icon {
+            position: absolute;
+            right: 33px;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 0;
+            cursor: pointer;
+            pointer-events: auto;
+        }
+
+        .custom-icon-wrapper .events-icon--no-filter {
+            right: 10px;
+        }
+
+        .custom-icon-wrapper .filter-icon {
+            display: block;
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+        }
+    `;
+o([
+  n({ type: String })
+], r.prototype, "dateFormat", 2);
+o([
+  n({ type: String })
+], r.prototype, "pickerVariant", 2);
+o([
+  n({ type: String })
+], r.prototype, "value", 2);
+o([
+  n({ type: String })
+], r.prototype, "userLang", 2);
+o([
+  n({ type: String })
+], r.prototype, "placeholder", 2);
+o([
+  n({ type: Function })
+], r.prototype, "onChange", 2);
+o([
+  n({ type: Boolean })
+], r.prototype, "disableClearButton", 2);
+o([
+  n({ type: Boolean })
+], r.prototype, "range", 2);
+o([
+  n({ type: Boolean })
+], r.prototype, "server", 2);
+o([
+  n({ type: String })
+], r.prototype, "operator", 2);
+o([
+  n({ type: Boolean })
+], r.prototype, "disabled", 2);
+o([
+  n({ type: Function })
+], r.prototype, "setOperator", 2);
+o([
+  n({ type: Array })
+], r.prototype, "filterOperators", 2);
+o([
+  f()
+], r.prototype, "displayValue", 2);
+o([
+  g("#dateInput")
+], r.prototype, "dateInputEl", 2);
+o([
+  f()
+], r.prototype, "isSubmenuOpen", 2);
+o([
+  g("simple-popper")
+], r.prototype, "simplePopperEl", 2);
+r = o([
+  b("lit-date-picker")
+], r);
+export {
+  r as LitDatePicker
+};

package/dist/shared/lit-icon-button.d.ts

@@ -9,7 +9,7 @@ type LitIconButtonProps = {
     icon?: Icon;
     marked?: boolean;
 };
-export declare class IconButton extends LitElement {
+export declare class LitIconButton extends LitElement {
     variant?: 'text' | 'contained' | 'outlined' | 'dashed' | 'error' | 'ai' | 'outlined-ai';
     size?: 'small' | 'medium' | 'large';
     disabled?: boolean;

package/dist/shared/lit-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lit-icon-button.d.ts","sourceRoot":"","sources":["../../src/shared/lit-icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAK1C,KAAK,kBAAkB,GAAG;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,aAAa,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AACF,qBACa,UAAW,SAAQ,UAAU;IAEV,OAAO,CAAC,EAC9B,MAAM,GACN,WAAW,GACX,UAAU,GACV,QAAQ,GACR,OAAO,GACP,IAAI,GACJ,aAAa,CAAe;IACN,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAS;IACZ,MAAM,CAAC,EAAE,OAAO,CAAS;IACzC,IAAI,CAAC,EAAE,IAAI,CAAS;IACnB,MAAM,CAAC,EAAE,OAAO,CAAS;IAGtD,MAAM,CAAC,MAAM,4BAiCX;IAGF,MAAM;CAwBT;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,kBAAkB,CAAC;KACzC;CACJ"}
+{"version":3,"file":"lit-icon-button.d.ts","sourceRoot":"","sources":["../../src/shared/lit-icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAK1C,KAAK,kBAAkB,GAAG;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,aAAa,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AACF,qBACa,aAAc,SAAQ,UAAU;IAEb,OAAO,CAAC,EAC9B,MAAM,GACN,WAAW,GACX,UAAU,GACV,QAAQ,GACR,OAAO,GACP,IAAI,GACJ,aAAa,CAAe;IACN,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAS;IACZ,MAAM,CAAC,EAAE,OAAO,CAAS;IACzC,IAAI,CAAC,EAAE,IAAI,CAAS;IACnB,MAAM,CAAC,EAAE,OAAO,CAAS;IAGtD,MAAM,CAAC,MAAM,4BAiCX;IAGF,MAAM;CAwBT;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,kBAAkB,CAAC;KACzC;CACJ"}

package/dist/shared/lit-icon-button.js

@@ -0,0 +1,91 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as m } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as c } from "../node_modules/lit-element/lit-element.js";
+import { customElement as h } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as s } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import u from "./styles/button-shared-styles.js";
+import { css as d } from "../node_modules/@lit/reactive-element/css-tag.js";
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (r, o, a, n) => {
+  for (var e = n > 1 ? void 0 : n ? f(o, a) : o, p = r.length - 1, l; p >= 0; p--)
+    (l = r[p]) && (e = (n ? l(o, a, e) : l(e)) || e);
+  return n && e && b(o, a, e), e;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.variant = "contained", this.size = "medium", this.disabled = !1, this.active = !1, this.icon = "add", this.marked = !1;
+  }
+  // Render method to define the component's template
+  render() {
+    const r = `button--${this.size} button--${this.variant} ${this.active ? "active" : ""}`, o = this.size === "large" ? "1.5rem" : this.size === "medium" || this.marked ? "1.25rem" : this.size === "small" ? "1rem" : "0.75rem";
+    return m`
+            <button ?disabled=${this.disabled} class=${r}>
+                <slot name="icon"
+                    >${this.icon && m`<lit-icon
+                        class="out-ai"
+                        .isActive="${this.marked}"
+                        size="${o}"
+                        icon=${this.icon}
+                    ></lit-icon>`}</slot
+                >
+            </button>
+        `;
+  }
+};
+t.styles = [
+  // styles,
+  u,
+  d`
+            /* Base styles for icon button */
+
+            button {
+                cursor: pointer;
+                font-size: inherit;
+            }
+
+            /* Size variations */
+
+            .button--mini {
+                width: 12px;
+                height: 12px;
+            }
+
+            .button--small {
+                width: 20px;
+                height: 20px;
+            }
+
+            .button--medium {
+                width: 48px;
+                height: 36px;
+            }
+
+            .button--large {
+                width: 48px;
+                height: 48px;
+            }
+        `
+];
+i([
+  s({ type: String })
+], t.prototype, "variant", 2);
+i([
+  s({ type: String })
+], t.prototype, "size", 2);
+i([
+  s({ type: Boolean })
+], t.prototype, "disabled", 2);
+i([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "active", 2);
+i([
+  s({ type: String })
+], t.prototype, "icon", 2);
+i([
+  s({ type: Boolean })
+], t.prototype, "marked", 2);
+t = i([
+  h("lit-icon-button")
+], t);
+export {
+  t as LitIconButton
+};