overview-components 1.0.75 → 1.0.77

package/dist/shared/lit-button.js

@@ -1,9 +1,12 @@
-import { LitElement as d, html as r, css as u } from "lit";
-import { customElement as m } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as r } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as d } 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 e } from "../node_modules/@lit/reactive-element/decorators/property.js";
-import h from "./styles/button-shared-styles.js";
-var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (s, n, a, l) => {
-  for (var o = l > 1 ? void 0 : l ? y(n, a) : n, p = s.length - 1, c; p >= 0; p--)
+import m from "./styles/button-shared-styles.js";
+import { css as h } from "../node_modules/@lit/reactive-element/css-tag.js";
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (s, n, a, l) => {
+  for (var o = l > 1 ? void 0 : l ? f(n, a) : n, p = s.length - 1, c; p >= 0; p--)
     (c = s[p]) && (o = (l ? c(n, a, o) : c(o)) || o);
   return l && o && b(n, a, o), o;
 };
@@ -40,8 +43,8 @@ let t = class extends d {
 };
 t.styles = [
   // styles,
-  h,
-  u`
+  m,
+  h`
             /* Basic button styles */
             button {
                 line-height: 1.5rem;
@@ -132,7 +135,7 @@ i([
   e({ type: Boolean })
 ], t.prototype, "isLoading", 2);
 t = i([
-  m("lit-button")
+  u("lit-button")
 ], t);
 export {
   t as LitButton

package/dist/shared/lit-checkbox.js

@@ -0,0 +1,155 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as p } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as d } 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 o } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as b } from "../node_modules/lit-html/directives/class-map.js";
+import { css as m } from "../node_modules/@lit/reactive-element/css-tag.js";
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (e, i, c, n) => {
+  for (var r = n > 1 ? void 0 : n ? f(i, c) : i, s = e.length - 1, l; s >= 0; s--)
+    (l = e[s]) && (r = (n ? l(i, c, r) : l(r)) || r);
+  return n && r && u(i, c, r), r;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.checked = !1, this.indeterminate = !1, this.onChange = () => {
+    }, this.value = "", this.label = "";
+  }
+  // 1) Manually sync the indeterminate property on the <input>
+  updated(e) {
+    super.updated(e);
+    const i = this.renderRoot.querySelector(
+      'input[type="checkbox"]'
+    );
+    i && (i.indeterminate = this.indeterminate);
+  }
+  // 2) Intercept clicks when we're indeterminate
+  _onClick(e) {
+    this.indeterminate && (e.preventDefault(), this.indeterminate = !1, this._notifyChange(e));
+  }
+  // 3) Handle the native change event when not indeterminate
+  _onChange(e) {
+    this.checked = e.target.checked, this._notifyChange(e);
+  }
+  _notifyChange(e) {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: e.target.checked
+      })
+    ), typeof this.onChange == "function" && this.onChange(e);
+  }
+  render() {
+    return p`
+            <div class="container">
+                ${this.label ? p`
+                          <lit-label label="${this.label}" ?disabled=${this.disabled}> </lit-label>
+                      ` : ""}
+                <input
+                    class=${b({
+      indeterminate: this.indeterminate,
+      marginLeft: this.label !== ""
+    })}
+                    type="checkbox"
+                    .checked=${this.checked}
+                    ?disabled=${this.disabled}
+                    @click=${this._onClick}
+                    @change=${this._onChange}
+                    .value=${this.value}
+                    aria-label="${this.label || "checkbox"}"
+                    aria-checked="${this.indeterminate ? "mixed" : this.checked ? "true" : "false"}"
+                    aria-disabled="${this.disabled ? "true" : "false"}"
+                />
+            </div>
+        `;
+  }
+};
+t.styles = m`
+        :host {
+            display: inline-block;
+            font-family: Inter, sans-serif;
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+        }
+        /* Hide the default checkbox */
+        .marginLeft {
+            margin-left: 0.75rem;
+        }
+        input[type='checkbox'] {
+            position: relative;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border: 1px solid var(--text-primary, #111827);
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--background-paper, #fff);
+            transition: all 0.1s ease-in-out;
+            cursor: pointer;
+        }
+
+        input[type='checkbox'].indeterminate {
+            background-color: var(--color-primary-main, #76b703);
+            border-color: var(--color-primary-main, #76b703);
+        }
+
+        input[type='checkbox'].indeterminate::after {
+            content: '−';
+            color: var(--background-default, #111827);
+            font-size: 16px;
+        }
+
+        /* Custom checkmark */
+        input[type='checkbox']::after {
+            content: '✓';
+            color: var(--background-paper, #111827);
+            font-size: 16px;
+            visible: none;
+        }
+
+        /* Checked state */
+        input[type='checkbox']:checked {
+            background-color: var(--color-primary-main, #76b703);
+            border-color: var(--color-primary-main, #76b703);
+        }
+
+        input[type='checkbox']:checked::after {
+            visible: visibility;
+        }
+
+        /* Disabled state */
+        input[type='checkbox']:disabled {
+            background-color: var(--background-paper, #fff);
+            border-color: var(--color-primary-disabled, #d0d3db);
+            cursor: not-allowed;
+        }
+    `;
+a([
+  o({ type: Boolean })
+], t.prototype, "disabled", 2);
+a([
+  o({ type: Boolean })
+], t.prototype, "checked", 2);
+a([
+  o({ type: Boolean })
+], t.prototype, "indeterminate", 2);
+a([
+  o({ type: Function })
+], t.prototype, "onChange", 2);
+a([
+  o({ type: String })
+], t.prototype, "value", 2);
+a([
+  o({ type: String })
+], t.prototype, "label", 2);
+t = a([
+  h("lit-checkbox")
+], t);
+export {
+  t as LitCheckbox
+};

package/dist/shared/lit-icon.js

@@ -0,0 +1,282 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as c } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as p } 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 h from "../styles.js";
+import u from "../assets/icons/iconGlyphs.js";
+import { css as v } from "../node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, F = Object.getOwnPropertyDescriptor, o = (l, t, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? F(t, s) : t, a = l.length - 1, n; a >= 0; a--)
+    (n = l[a]) && (e = (r ? n(t, s, e) : n(e)) || e);
+  return r && e && g(t, s, e), e;
+};
+const _ = [
+  "archive",
+  "requiredFilled",
+  "account",
+  "add",
+  "administration",
+  "arrowLeft",
+  "arrowRight",
+  "bell",
+  "bellNotify",
+  "cases",
+  "darkMode",
+  "documents",
+  "events",
+  "favorite",
+  "help",
+  "home",
+  "leave",
+  "lightMode",
+  "manuals",
+  "overviews",
+  "planning",
+  "reports",
+  "roles",
+  "search",
+  "settings",
+  "structure",
+  "tasks",
+  "templates",
+  "users",
+  "close",
+  "curveArrow",
+  "administrator",
+  "delegate",
+  "download",
+  "assume",
+  "calculator",
+  "check",
+  "chevronDown",
+  "handover",
+  "flag",
+  "filter",
+  "favoriteAdd",
+  "note",
+  "more",
+  "minus",
+  "success",
+  "time",
+  "trash",
+  "pen",
+  "unlike",
+  "user",
+  "puzzle",
+  "informative",
+  "save",
+  "warning",
+  "help2",
+  "accomplish",
+  "addDocument",
+  "addNote",
+  "checkboxEmpty",
+  "expand",
+  "duplicate",
+  "history",
+  "instruction",
+  "radioEmpty",
+  "print",
+  "zoomIn",
+  "view",
+  "reading",
+  "reload",
+  "logs",
+  "flow",
+  "csv",
+  "contact",
+  "columns",
+  "hamburger",
+  "beginning",
+  "signal",
+  "variable",
+  "up",
+  "upload",
+  "revision",
+  "typing",
+  "tasksFilled",
+  "overviewsFilled",
+  "homeFilled",
+  "favoriteFilled",
+  "flagFilled",
+  "darkModeFilled",
+  "bellFilled",
+  "administrationFilled",
+  "administratorFilled",
+  "casesFilled",
+  "manualsFilled",
+  "reportsFilled",
+  "structureFilled",
+  "usersFilled",
+  "userFilled",
+  "settingsFilled",
+  "lightModeFilled",
+  "leaveFilled",
+  "searchFilled",
+  "checkboxFilled",
+  "checkFilled",
+  "chevronDownFilled",
+  "chevronUpFilled",
+  "chevronRightFilled",
+  "chevronLeftFilled",
+  "logsFilled",
+  "radioFilled",
+  "historyFilled",
+  "sortFilled",
+  "variableFilled",
+  "dangerFilled",
+  "eventsFilled",
+  "helpFilled",
+  "rolesFilled",
+  "clean",
+  "dms",
+  "cog",
+  "email",
+  "files",
+  "chevron",
+  "hand",
+  "hide",
+  "hierarchy",
+  "import",
+  "index",
+  "infinity",
+  "infinity2",
+  "reset",
+  "rest",
+  "sleep",
+  "sorting",
+  "totake",
+  "totakedelegate",
+  "shredding",
+  "show",
+  "share",
+  "table",
+  "url",
+  "schema",
+  "stats",
+  "zoomout",
+  "book",
+  "authentication",
+  "apphealth",
+  "certificate",
+  "console",
+  "folder",
+  "hragenda",
+  "script",
+  "sequence",
+  "serviceoperation",
+  "archiveFilled",
+  "planningFilled",
+  "approval",
+  "certificate2",
+  "change",
+  "chevrondown",
+  "cursor",
+  "copylink",
+  "column",
+  "documentsFilled",
+  "filterFilled",
+  "filteroff",
+  "hr",
+  "image",
+  "outoftime",
+  "news",
+  "newsFilled",
+  "morevertical",
+  "spinner",
+  "userFilled2",
+  "tasksii",
+  "rowlarge",
+  "rowmedium",
+  "rowmall",
+  "touchid",
+  "acces",
+  "agenda",
+  "annoncement",
+  "email2",
+  "export",
+  "faceid",
+  "deviceregister",
+  "lock",
+  "outoftime2",
+  "qr",
+  "unlock",
+  "zastupovany",
+  "csvFilled",
+  "qrFilled",
+  "knowledgeFilled",
+  "hragendaFilled",
+  "deviceregisterFilled",
+  "agregation",
+  "code",
+  "flowii",
+  "cursor2",
+  "drag",
+  "link",
+  "lang",
+  "pinFilled",
+  "pin",
+  "play",
+  "return",
+  "sorting2",
+  "switch",
+  "test",
+  "stop",
+  "zoom",
+  "wrapitup",
+  "web"
+];
+let i = class extends p {
+  constructor() {
+    super(...arguments), this.icon = "add", this.size = "1.375rem", this.isActive = !1, this.notRotateIcon = ["arrowLeft", "arrowRight"];
+  }
+  render() {
+    const l = this.icon ? u[this.icon] : void 0;
+    return l ? c`
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 512 512"
+                style="width: ${this.size || " 1.5rem"} ; height: ${this.size || " 1.5rem"};"
+                class="rotated"
+                fill="${this.isActive ? "var(--color-primary-main, #76b703)" : "currentColor"}"
+            >
+                <g transform="translate(0,20)">
+                    <path d="${l.d}" />
+                </g>
+            </svg>
+        ` : c`<span>Icon not found</span>`;
+  }
+};
+i.styles = [
+  h,
+  v`
+            :host {
+                position: relative;
+                display: inline-block;
+            }
+            svg {
+                position: relative;
+                top: 0.0625rem;
+            }
+            svg.rotated {
+                transform: scaleY(-1);
+            }
+        `
+];
+o([
+  d({ type: String })
+], i.prototype, "icon", 2);
+o([
+  d({ type: String })
+], i.prototype, "size", 2);
+o([
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "isActive", 2);
+i = o([
+  m("lit-icon")
+], i);
+export {
+  _ as IconArray,
+  i as LitIcon
+};

package/dist/shared/lit-input.js

@@ -0,0 +1,211 @@
+import { customElement as c } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as o } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as u } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as d } from "../node_modules/lit-element/lit-element.js";
+import { classMap as h } from "../node_modules/lit-html/directives/class-map.js";
+import { css as m } from "../node_modules/@lit/reactive-element/css-tag.js";
+var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, e = (r, p, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? v(p, i) : p, n = r.length - 1, l; n >= 0; n--)
+    (l = r[n]) && (s = (a ? l(p, i, s) : l(s)) || s);
+  return a && s && y(p, i, s), s;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.type = "text", this.placeholder = "", this.value = null, this.disableClearButton = !1, this.required = !1, this.server = !1, this.disabled = !1, this.filterOperators = [], this.size = "small", this.setOperator = (r) => {
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("focus", () => this.focus());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("focus", () => this.focus());
+  }
+  reportValidity() {
+    const r = this.shadowRoot.querySelector("input");
+    return r ? r.reportValidity() : !1;
+  }
+  focus() {
+    var p;
+    const r = (p = this.shadowRoot) == null ? void 0 : p.querySelector("input");
+    r == null || r.focus();
+  }
+  render() {
+    var p;
+    const r = `${this.size}-size`;
+    return u`
+            <div class="custom-icon-wrapper">
+                <input
+                    class=${r}
+                    type="${this.type}"
+                    placeholder="${this.placeholder}"
+                    step="any"
+                    @input=${(i) => {
+      const s = i.target.value;
+      this.onInput && this.onInput(s);
+    }}
+                    @blur=${(i) => {
+      const s = i.target.value;
+      this.onBlur && this.onBlur(s);
+    }}
+                    .value="${typeof this.value == "object" ? ((p = this.value) == null ? void 0 : p.value) || "" : this.value || ""}"
+                    ?required="${this.required}"
+                    .disabled="${this.disabled}"
+                />
+                ${(this.value || this.operator === "isEmpty" || this.operator === "isNotEmpty") && !this.disableClearButton ? u`<div
+                          class=${h({
+      "custom-icon": !0,
+      "custom-icon--no-filter": !this.server
+      // Trieda ak filter nie je
+    })}
+                          @click=${() => {
+      this.value = "", this.onClear && this.onClear();
+    }}
+                          style="cursor: pointer; pointer-events: auto"
+                      >
+                          <lit-icon-button
+                              icon="close"
+                              size="small"
+                              variant="text"
+                          ></lit-icon-button>
+                      </div>` : ""}
+                ${this.server ? u`<lit-data-grid-operators-popover
+                          class="filter-icon"
+                          b
+                          .type="${this.type === "text" ? "string" : "number"}"
+                          .setOperator="${(i) => {
+      this.setOperator(i);
+    }}"
+                          .operator="${this.operator}"
+                          @mousedown=${(i) => {
+      i.preventDefault(), i.stopPropagation();
+    }}
+                          .disabled="${this.disabled}"
+                          .filterOperators="${this.filterOperators}"
+                      ></lit-data-grid-operators-popover>` : null}
+            </div>
+        `;
+  }
+};
+t.styles = [
+  m`
+            input {
+                padding: 0.5rem;
+                border: 0.0625rem solid var(--color-divider, #d0d3db);
+                border-radius: 0.25rem;
+                min-width: unset;
+                width: -webkit-fill-available;
+                width: -moz-available;
+                width: fill-available;
+                background-color: var(--background-paper, #fff);
+                color: var(--text-primary, #111827);
+            }
+
+            input[type='number']::-webkit-inner-spin-button,
+            input[type='number']::-webkit-outer-spin-button {
+                -webkit-appearance: none;
+                margin: 0;
+            }
+
+            input:hover:not(:disabled) {
+                border: 0.0625rem solid var(--color-secondary-main, #111827);
+            }
+
+            input:focus {
+                outline: none;
+                border: 0.0625rem solid var(--color-secondary-dark, #010204);
+            }
+            input:disabled {
+                background-color: var(--background-paper, #fff);
+                cursor: not-allowed;
+            }
+
+            .custom-icon-wrapper {
+                position: relative;
+                width: 100%;
+                display: inline-block;
+            }
+
+            .custom-icon-wrapper .custom-icon {
+                display: none;
+                position: absolute;
+                right: 34px;
+                top: 50%;
+                transform: translateY(-50%);
+                cursor: pointer;
+                pointer-events: auto;
+            }
+
+            .custom-icon-wrapper .custom-icon--no-filter {
+                right: 10px;
+            }
+
+            .custom-icon-wrapper:hover .custom-icon {
+                display: block;
+            }
+
+            .custom-icon-wrapper .filter-icon {
+                display: block;
+                position: absolute;
+                right: 10px;
+                top: 50%;
+                transform: translateY(-50%);
+                cursor: pointer;
+                pointer-events: auto;
+            }
+            .medium-size {
+                height: 1.43rem;
+            }
+            .small-size {
+                height: 0.94rem;
+            }
+        `
+];
+e([
+  o({ type: String })
+], t.prototype, "type", 2);
+e([
+  o({ type: String })
+], t.prototype, "placeholder", 2);
+e([
+  o({ type: String })
+], t.prototype, "value", 2);
+e([
+  o({ type: Function })
+], t.prototype, "onInput", 2);
+e([
+  o({ type: Function })
+], t.prototype, "onBlur", 2);
+e([
+  o({ type: Function })
+], t.prototype, "onClear", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "disableClearButton", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "required", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "server", 2);
+e([
+  o({ type: String })
+], t.prototype, "operator", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "disabled", 2);
+e([
+  o({ type: Array })
+], t.prototype, "filterOperators", 2);
+e([
+  o({ type: String })
+], t.prototype, "size", 2);
+e([
+  o({ type: Function })
+], t.prototype, "setOperator", 2);
+t = e([
+  c("lit-input")
+], t);
+export {
+  t as LitInput
+};