overview-components 1.0.96 → 1.0.98

package/dist/shared/lit-data-grid-action-buttons-popover.js

@@ -0,0 +1,258 @@
+import { customElement as k } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as g } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as h } from "../node_modules/@lit/reactive-element/decorators/state.js";
+import { query as d } from "../node_modules/@lit/reactive-element/decorators/query.js";
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as l } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as A } from "../node_modules/lit-element/lit-element.js";
+import { msg as p } from "../node_modules/@lit/localize/init/install.js";
+import "../node_modules/@lit/localize/init/runtime.js";
+import { computePosition as x, offset as y, flip as $, shift as O } from "../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { css as P } from "../node_modules/@lit/reactive-element/css-tag.js";
+var E = Object.defineProperty, w = Object.getOwnPropertyDescriptor, r = (e, i, t, o) => {
+  for (var s = o > 1 ? void 0 : o ? w(i, t) : i, u = e.length - 1, a; u >= 0; u--)
+    (a = e[u]) && (s = (o ? a(i, t, s) : a(s)) || s);
+  return o && s && E(i, t, s), s;
+};
+let n = class extends A {
+  constructor() {
+    super(...arguments), this.pin = () => {
+    }, this.group = () => {
+    }, this.header = null, this.table = null, this.isOpen = !1, this.isSubmenuOpen = !1, this.currentAggregation = "", this._handleOutsideClick = (e) => {
+      e.composedPath().includes(this) || (this.isOpen = !1, this.isSubmenuOpen = !1);
+    };
+  }
+  connectedCallback() {
+    var e, i, t;
+    super.connectedCallback(), (t = (i = (e = this.header) == null ? void 0 : e.column) == null ? void 0 : i.columnDef) != null && t.aggregationFn && (this.currentAggregation = this.header.column.columnDef.aggregationFn), document.addEventListener("click", this._handleOutsideClick, { capture: !0 });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick, { capture: !0 });
+  }
+  toggleCustomPopover() {
+    this.isOpen = !this.isOpen, this.isOpen || (this.isSubmenuOpen = !1);
+  }
+  closePopover() {
+    this.isOpen = !1, this.isSubmenuOpen = !1;
+  }
+  handleAction(e) {
+    e(), this.closePopover();
+  }
+  openSubmenu(e) {
+    this.isSubmenuOpen = e;
+  }
+  setAggregation(e) {
+    this.currentAggregation = e;
+    const i = this.table.getState().grouping;
+    this.header.column.columnDef.aggregationFn = e;
+    const t = i.map((o) => (o === this.header.column.id && (this.header.column.columnDef.aggregationFn = e), o));
+    this.table.setGrouping(t), this.closePopover();
+  }
+  updated(e) {
+    super.updated(e), this.isOpen && this.mainTrigger && this.mainMenuEl && x(this.mainTrigger, this.mainMenuEl, {
+      placement: "bottom-end",
+      middleware: [y(0), $(), O({ padding: 5 })]
+    }).then(({ x: i, y: t }) => {
+      Object.assign(this.mainMenuEl.style, {
+        left: `${i}px`,
+        top: `${t}px`
+      });
+    }), this.isSubmenuOpen && this.submenuTriggerEl && this.submenuEl && x(this.submenuTriggerEl, this.submenuEl, {
+      placement: "right-start",
+      middleware: [y(0), $(), O({ padding: 5 })]
+    }).then(({ x: i, y: t }) => {
+      Object.assign(this.submenuEl.style, {
+        left: `${i}px`,
+        top: `${t}px`
+      });
+    });
+  }
+  render() {
+    var s, u, a, f, m, b, c, v;
+    if (!this.header)
+      return l``;
+    const e = ((u = (s = this.header.column) == null ? void 0 : s.getCanPin) == null ? void 0 : u.call(s)) || !1, i = ((f = (a = this.header.column) == null ? void 0 : a.getIsPinned) == null ? void 0 : f.call(a)) || !1, t = ((b = (m = this.header.column) == null ? void 0 : m.getCanGroup) == null ? void 0 : b.call(m)) || !1, o = ((v = (c = this.header.column) == null ? void 0 : c.getIsGrouped) == null ? void 0 : v.call(c)) || !1;
+    return l`
+            <lit-icon-button
+                class="main-menu-trigger"
+                size="small"
+                variant="text"
+                icon="more"
+                @click="${this.toggleCustomPopover}"
+            ></lit-icon-button>
+
+            <div class="menu ${this.isOpen ? "open" : ""}">
+                ${t ? l`
+                          <div
+                              class="menu-item ${o ? "active" : ""}"
+                              @click="${() => this.handleAction(this.group)}"
+                          >
+                              <lit-icon icon="agregation" size="1rem"></lit-icon>
+                              ${p("Seskupit sloupec")}
+                          </div>
+                      ` : null}
+                ${e ? l`
+                          <div
+                              class="menu-item ${i ? "active" : ""}"
+                              @click="${() => this.handleAction(this.pin)}"
+                          >
+                              <lit-icon icon="pin" size="1rem"></lit-icon>
+                              ${p("Připnout sloupec vlevo")}
+                          </div>
+                      ` : null}
+
+                <div
+                    class="menu-item submenu-trigger"
+                    @mouseenter="${() => this.openSubmenu(!0)}"
+                    @mouseleave="${() => this.openSubmenu(!1)}"
+                >
+                    ${p("Agregace")}
+                    <lit-icon icon="arrowRight" size="1rem"></lit-icon>
+                    <div class="submenu ${this.isSubmenuOpen ? "open" : ""}">
+                        <div
+                            class="menu-item ${this.currentAggregation === "sum" ? "selected" : ""}"
+                            @click="${() => this.setAggregation("sum")}"
+                        >
+                            sum
+                        </div>
+                        <div
+                            class="menu-item ${this.currentAggregation === "median" ? "selected" : ""}"
+                            @click="${() => this.setAggregation("median")}"
+                        >
+                            median
+                        </div>
+                        <div
+                            class="menu-item ${this.currentAggregation === "min" ? "selected" : ""}"
+                            @click="${() => this.setAggregation("min")}"
+                        >
+                            min
+                        </div>
+                        <div
+                            class="menu-item ${this.currentAggregation === "max" ? "selected" : ""}"
+                            @click="${() => this.setAggregation("max")}"
+                        >
+                            max
+                        </div>
+                        ${this.currentAggregation ? l`<div class="menu-item" @click="${() => this.setAggregation("")}">
+                                  ${p("zrušit")}
+                              </div>` : null}
+                    </div>
+                </div>
+            </div>
+        `;
+  }
+};
+n.styles = [
+  P`
+            :host {
+                position: relative;
+                display: inline-block;
+            }
+
+            .menu {
+                display: none;
+                flex-direction: column;
+                background-color: var(--background-paper, #fff);
+                border-radius: 0.5rem;
+                padding: 0.375rem;
+                box-shadow: var(--box-shadow, 0px 4px 6px rgba(0, 0, 0, 0.1));
+                overflow-y: visible;
+                min-width: max-content;
+                z-index: 9999;
+                position: absolute;
+            }
+            .menu.open {
+                display: flex;
+            }
+
+            .menu-item {
+                padding: 0.375rem 0.625rem;
+                margin: 0 0 0.25rem;
+                font-size: 0.8125rem;
+                font-weight: 500;
+                text-align: left;
+                cursor: pointer;
+                color: var(--text-primary, #111827);
+                transition: background-color 0.2s;
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+
+            .menu-item:hover {
+                background: var(--color-primary-light, #f0fadf);
+                border-radius: 4px;
+            }
+
+            .menu-item.selected {
+                background: var(--color-primary-light, #f0fadf);
+                font-weight: 600;
+                border-radius: 4px;
+            }
+
+            .active {
+                background: var(--color-primary-light, #f0fadf);
+                border-radius: 4px;
+            }
+
+            /* Submenu */
+            .submenu-trigger {
+                position: relative;
+            }
+
+            .submenu {
+                display: none;
+                flex-direction: column;
+                background-color: var(--background-paper, #fff);
+                border-radius: 0.5rem;
+                padding: 0.375rem;
+                box-shadow: var(--box-shadow, 0px 4px 6px rgba(0, 0, 0, 0.1));
+                overflow-y: visible;
+                z-index: 9999;
+                position: absolute;
+            }
+
+            .submenu.open {
+                display: flex;
+            }
+        `
+];
+r([
+  g({ type: Function })
+], n.prototype, "pin", 2);
+r([
+  g({ type: Function })
+], n.prototype, "group", 2);
+r([
+  g({ type: Object })
+], n.prototype, "header", 2);
+r([
+  g({ type: Object })
+], n.prototype, "table", 2);
+r([
+  h()
+], n.prototype, "isOpen", 2);
+r([
+  h()
+], n.prototype, "isSubmenuOpen", 2);
+r([
+  h()
+], n.prototype, "currentAggregation", 2);
+r([
+  d(".main-menu-trigger")
+], n.prototype, "mainTrigger", 2);
+r([
+  d(".menu")
+], n.prototype, "mainMenuEl", 2);
+r([
+  d(".submenu-trigger")
+], n.prototype, "submenuTriggerEl", 2);
+r([
+  d(".submenu")
+], n.prototype, "submenuEl", 2);
+n = r([
+  k("lit-data-grid-action-buttons-popover")
+], n);
+export {
+  n as LitDataGridActionButtonsPopover
+};

package/dist/shared/lit-data-grid-density-popover.js

@@ -0,0 +1,79 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as c } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as d } from "../node_modules/lit-element/lit-element.js";
+import { customElement as y } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as a } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { msg as o } from "../node_modules/@lit/localize/init/install.js";
+import "../node_modules/@lit/localize/init/runtime.js";
+import { css as u } from "../node_modules/@lit/reactive-element/css-tag.js";
+var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, l = (e, n, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? h(n, r) : n, m = e.length - 1, p; m >= 0; m--)
+    (p = e[m]) && (t = (s ? p(n, r, t) : p(t)) || t);
+  return s && t && f(n, r, t), t;
+};
+let i = class extends d {
+  constructor() {
+    super(...arguments), this.setDensity = (e) => {
+    };
+  }
+  handleDensity(e) {
+    typeof this.setDensity == "function" ? this.setDensity(e) : console.error("setDensity is not a function");
+  }
+  render() {
+    return c`
+            <lit-responsive-button
+                size="medium"
+                variant="text"
+                label=${o("Zobrazení")}
+                icon="rowmedium"
+                slot="reference"
+            ></lit-responsive-button>
+
+            <simple-popper placement="top-end">
+                <lit-menu>
+                    <lit-menu-item
+                        id="${1}"
+                        icon="rowmall"
+                        .onClick="${() => this.handleDensity("compact")}"
+                        .isActive="${this.density === "compact"}"
+                        >${o("Kompaktní")}
+                    </lit-menu-item>
+                    <lit-menu-item
+                        id="${2}"
+                        icon="rowmedium"
+                        .onClick="${() => this.handleDensity("standard")}"
+                        .isActive="${this.density === "standard"}"
+                        >${o("Standardní")}
+                    </lit-menu-item>
+                    <lit-menu-item
+                        id="${3}"
+                        icon="rowlarge"
+                        .onClick="${() => this.handleDensity("comfort")}"
+                        .isActive="${this.density === "comfort"}"
+                        >${o("Komfortní")}
+                    </lit-menu-item>
+                </lit-menu>
+            </simple-popper>
+        `;
+  }
+};
+i.styles = [
+  // styles,
+  u`
+            :host {
+                font-family: 'Inter', sans-serif;
+            }
+        `
+];
+l([
+  a({ type: Function })
+], i.prototype, "setDensity", 2);
+l([
+  a({ type: String })
+], i.prototype, "density", 2);
+i = l([
+  y("lit-data-grid-density-popover")
+], i);
+export {
+  i as LitDataGridDensityPopover
+};

package/dist/shared/lit-data-grid-export-popover.js

@@ -0,0 +1,66 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as d } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as c } from "../node_modules/lit-element/lit-element.js";
+import { customElement as u } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as a } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { msg as m } from "../node_modules/@lit/localize/init/install.js";
+import "../node_modules/@lit/localize/init/runtime.js";
+var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, p = (o, r, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? v(r, s) : r, n = o.length - 1, l; n >= 0; n--)
+    (l = o[n]) && (t = (i ? l(r, s, t) : l(t)) || t);
+  return i && t && x(r, s, t), t;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.exportToExcel = () => {
+    }, this.exportToCsv = () => {
+    }, this.disabledButtons = !1;
+  }
+  handleExport(o) {
+    o();
+  }
+  render() {
+    return d`
+            <lit-responsive-button
+                size="medium"
+                variant="text"
+                label=${m("Export")}
+                icon="csv"
+                slot="reference"
+            ></lit-responsive-button>
+            <simple-popper placement="top-end">
+                <lit-menu>
+                    <lit-menu-item
+                        id="${1}"
+                        icon="csv"
+                        .onClick=${() => this.handleExport(this.exportToCsv)}
+                        .disabled=${this.disabledButtons}
+                        >${m("Export do CSV")}
+                    </lit-menu-item>
+                    <lit-menu-item
+                        id="${1}"
+                        icon="csv"
+                        .onClick=${() => this.handleExport(this.exportToExcel)}
+                        .disabled=${this.disabledButtons}
+                        >${m("Export do Excel")}
+                    </lit-menu-item>
+                </lit-menu>
+            </simple-popper>
+        `;
+  }
+};
+p([
+  a({ type: Function })
+], e.prototype, "exportToExcel", 2);
+p([
+  a({ type: Function })
+], e.prototype, "exportToCsv", 2);
+p([
+  a({ type: Boolean })
+], e.prototype, "disabledButtons", 2);
+e = p([
+  u("lit-data-grid-export-popover")
+], e);
+export {
+  e as LitDataGridExportPopover
+};

package/dist/shared/lit-data-grid-row-actions.js

@@ -0,0 +1,73 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as n } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as c } from "../node_modules/lit-element/lit-element.js";
+import { customElement as m } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as d } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { tooltip as f } from "./simple-tooltip.js";
+var u = Object.defineProperty, h = Object.getOwnPropertyDescriptor, p = (l, e, t, i) => {
+  for (var o = i > 1 ? void 0 : i ? h(e, t) : e, r = l.length - 1, s; r >= 0; r--)
+    (s = l[r]) && (o = (i ? s(e, t, o) : s(o)) || o);
+  return i && o && u(e, t, o), o;
+};
+let a = class extends c {
+  constructor() {
+    super(...arguments), this.buttons = [];
+  }
+  handleOnClick(l, e) {
+    l.stopPropagation(), e();
+  }
+  render() {
+    const l = this.buttons.filter((t) => !t.showInMenu), e = this.buttons.filter((t) => t.showInMenu);
+    return n`
+            <div
+                style="display: flex; height: 100%; align-items: center; justify-content: flex-end;"
+            >
+                ${l.map(
+      (t) => n`
+                        <lit-icon-button
+                            variant="text"
+                            size="small"
+                            .icon="${t.icon}"
+                            @click="${(i) => this.handleOnClick(i, t.onClick)}"
+                            .disabled="${t.disabled}"
+                            .marked="${t.marked}"
+                            ${f(t.label, "left")}
+                        ></lit-icon-button>
+                    `
+    )}
+                ${e.length > 0 ? n` <lit-icon-button
+                              size="small"
+                              variant="text"
+                              icon="morevertical"
+                              slot="reference"
+                              @click="${(t) => t.stopPropagation()}"
+                          ></lit-icon-button>
+                          <simple-popper offset="0" placement="bottom-end">
+                              <lit-menu>
+                                  ${e.map(
+      (t) => n`
+                                          <lit-menu-item
+                                              id="${t.id}"
+                                              icon="${t.icon}"
+                                              .onClick="${(i) => this.handleOnClick(i, t.onClick)}"
+                                              .disabled="${t.disabled}"
+                                          >
+                                              ${t.label}
+                                          </lit-menu-item>
+                                      `
+    )}
+                              </lit-menu>
+                          </simple-popper>` : null}
+            </div>
+        `;
+  }
+};
+p([
+  d({ type: Array })
+], a.prototype, "buttons", 2);
+a = p([
+  m("lit-data-grid-row-actions")
+], a);
+export {
+  a as LitDataGridRowActions
+};

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
+};