overview-components 0.6.0

package/dist/shared/lit-select.js

@@ -0,0 +1,177 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import './lit-custom-popper.ts';
+import './lit-icon.ts';
+import './lit-icon-button.ts';
+let LitSelect = class LitSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = ''; // Aktuálne vybraná hodnota
+        this.options = []; // Možnosti
+        this.onChange = () => { }; // Callback funkcia
+        this.isOpen = false; // Stav poppera
+    }
+    toggleCustomPopover() {
+        this.isOpen = !this.isOpen;
+    }
+    closePopover() {
+        this.isOpen = false;
+    }
+    selectOption(optionValue) {
+        this.value = optionValue === 'All' ? '' : optionValue;
+        this.onChange(this.value); // Zavolaj callback s hodnotou (alebo prázdnou hodnotou pre All)
+        this.closePopover();
+    }
+    clearValue(e) {
+        e.stopPropagation(); // Zabrániť spusteniu togglePopover
+        this.value = '';
+        this.onChange(''); // Nastav prázdnu hodnotu a zavolaj callback
+    }
+    render() {
+        const optionsWithAll = [...this.options];
+        const displayValue = this.value === '' ? '' : optionsWithAll.find((o) => o.value === this.value)?.label;
+        return html `
+            <lit-custom-popper
+                .open="${this.isOpen}"
+                placement="bottom-start"
+                @close="${this.closePopover}"
+            >
+                <div class="custom-icon-wrapper" slot="reference">
+                    <input
+                        type="text"
+                        readonly
+                        .value="${displayValue || ''}"
+                        @click="${this.toggleCustomPopover}"
+                    />
+                    <div class="dropdown-icon">
+                        <lit-icon icon="chevronDownFilled" rotated="true"></lit-icon>
+                    </div>
+                    ${this.value
+            ? html `
+                              <div class="custom-icon" @click="${this.clearValue}">
+                                  <lit-icon-button
+                                      icon="close"
+                                      size="small"
+                                      variant="text"
+                                  ></lit-icon-button>
+                              </div>
+                          `
+            : ''}
+                </div>
+                <div slot="content">
+                    <div class="menu">
+                        ${optionsWithAll.map((option) => html `
+                                <div
+                                    class="menu-item ${this.value === option.value ||
+            (option.value === 'All' && this.value === '')
+            ? 'selected'
+            : ''}"
+                                    @click="${() => this.selectOption(option.value)}"
+                                >
+                                    ${option.label}
+                                </div>
+                            `)}
+                    </div>
+                </div>
+            </lit-custom-popper>
+        `;
+    }
+};
+LitSelect.styles = css `
+        .custom-icon-wrapper {
+            position: relative;
+            width: 100%;
+            display: inline-block;
+        }
+
+        input {
+            padding: 0.5rem 0.75rem;
+            border: 0.0625rem solid var(--color-divider, #d0d3db);
+            border-radius: 0.25rem;
+            min-width: 70px;
+            width: -webkit-fill-available;
+        }
+
+        input:hover {
+            border: 0.0625rem solid var(--color-secondary-main, #111827);
+            cursor: pointer;
+        }
+
+        input:focus {
+            outline: none;
+            border: 0.0625rem solid var(--color-secondary-dark, #010204);
+        }
+
+        .custom-icon-wrapper .custom-icon {
+            position: absolute;
+            right: 30px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+        }
+
+        .custom-icon-wrapper .dropdown-icon {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            pointer-events: none;
+        }
+
+        .menu {
+            display: flex;
+            flex-direction: column;
+            background: var(--background-paper, #fff);
+            border-radius: 4px;
+
+            max-height: 200px;
+            overflow-y: auto;
+            z-index: 1;
+        }
+
+        .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;
+        }
+
+        .menu-item:hover {
+            background: var(--color-primary-light, #f0fadf);
+            border-radius: 4px;
+        }
+
+        .menu-item.selected {
+            background: var(--color-primary-light, #f0fadf); /* Rovnaký background ako hover */
+            font-weight: 600; /* Zvýraznenie písma */
+            border-radius: 4px;
+        }
+    `;
+__decorate([
+    property({ type: String })
+], LitSelect.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], LitSelect.prototype, "options", void 0);
+__decorate([
+    property({ type: Function })
+], LitSelect.prototype, "onChange", void 0);
+__decorate([
+    state()
+], LitSelect.prototype, "isOpen", void 0);
+LitSelect = __decorate([
+    customElement('lit-select')
+], LitSelect);
+export { LitSelect };
+//# sourceMappingURL=lit-select.js.map

package/dist/shared/lit-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-select.js","sourceRoot":"","sources":["../../src/shared/lit-select.ts"],"names":[],"mappings":"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"}

package/dist/shared/lit-tooltip.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+declare class LitTooltip extends LitElement {
+    label: string;
+    variant: 'top' | 'bottom' | 'left' | 'right';
+    private triggerElement;
+    private tooltipElement;
+    private arrowElement;
+    static styles: import("lit").CSSResult;
+    firstUpdated(): void;
+    showTooltip(): Promise<void>;
+    hideTooltip(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lit-tooltip': LitTooltip;
+    }
+}
+export {};
+//# sourceMappingURL=lit-tooltip.d.ts.map

package/dist/shared/lit-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-tooltip.d.ts","sourceRoot":"","sources":["../../src/shared/lit-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,cACM,UAAW,SAAQ,UAAU;IACH,KAAK,EAAE,MAAM,CAAkB;IAC/B,OAAO,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAS;IAEjF,OAAO,CAAC,cAAc,CAAwC;IAC9D,OAAO,CAAC,cAAc,CAAwC;IAC9D,OAAO,CAAC,YAAY,CAAwC;IAE5D,MAAM,CAAC,MAAM,0BAyCX;IAEF,YAAY;IAMN,WAAW;IAwCjB,WAAW;IAIX,MAAM;CAWT;AACD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,UAAU,CAAC;KAC7B;CACJ"}

package/dist/shared/lit-tooltip.js

@@ -0,0 +1,122 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { computePosition, offset, flip, shift, arrow } from '@floating-ui/dom';
+let LitTooltip = class LitTooltip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = 'Tooltip text';
+        this.variant = 'top';
+        this.triggerElement = null;
+        this.tooltipElement = null;
+        this.arrowElement = null;
+    }
+    firstUpdated() {
+        this.triggerElement = this.shadowRoot?.getElementById('trigger');
+        this.tooltipElement = this.shadowRoot?.getElementById('tooltip');
+        this.arrowElement = this.shadowRoot?.querySelector('#arrow');
+    }
+    async showTooltip() {
+        this.tooltipElement?.setAttribute('visible', '');
+        if (!this.triggerElement || !this.tooltipElement || !this.arrowElement)
+            return;
+        const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.tooltipElement, {
+            placement: this.variant,
+            middleware: [
+                offset(6),
+                flip(),
+                shift({ padding: 5 }),
+                arrow({ element: this.arrowElement }),
+            ],
+        });
+        Object.assign(this.tooltipElement.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+        const { x: arrowX, y: arrowY } = middlewareData.arrow;
+        const staticSide = {
+            top: 'bottom',
+            right: 'left',
+            bottom: 'top',
+            left: 'right',
+        }[placement.split('-')[0]] || 'top';
+        Object.assign(this.arrowElement.style, {
+            left: arrowX != null ? `${arrowX}px` : '',
+            top: arrowY != null ? `${arrowY}px` : '',
+            right: '',
+            bottom: '',
+            [staticSide]: '-4px',
+        });
+    }
+    hideTooltip() {
+        this.tooltipElement?.removeAttribute('visible');
+    }
+    render() {
+        return html `
+            <div id="trigger" @mouseenter=${this.showTooltip} @mouseleave=${this.hideTooltip}>
+                <slot>Hover me</slot>
+            </div>
+            <div id="tooltip">
+                ${this.label}
+                <div id="arrow"></div>
+            </div>
+        `;
+    }
+};
+LitTooltip.styles = css `
+        :host {
+            display: inline-block;
+            position: relative;
+            font-family: 'Inter', sans-serif;
+        }
+        #tooltip {
+            position: absolute;
+            background: black;
+            color: white;
+            padding: 8px;
+            border-radius: 8px;
+            font-size: 12px;
+            box-shadow: var(--box-shadow, 0px 4px 6px rgba(0, 0, 0, 0.1));
+            white-space: nowrap;
+            z-index: 1000;
+            visibility: hidden;
+            opacity: 0;
+            overflow-wrap: break-word;
+            transition: opacity 0.2s ease-in-out;
+            width: max-content;
+            white-space: normal;
+            max-width: 300px;
+            transition:
+                opacity 0.2s ease-in-out,
+                visibility 0.2s ease-in-out;
+        }
+        #tooltip[visible] {
+            visibility: visible;
+            opacity: 1;
+        }
+        #trigger {
+            cursor: pointer;
+        }
+        #arrow {
+            position: absolute;
+            background: black;
+            width: 8px;
+            height: 8px;
+            transform: rotate(45deg);
+        }
+    `;
+__decorate([
+    property({ type: String })
+], LitTooltip.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], LitTooltip.prototype, "variant", void 0);
+LitTooltip = __decorate([
+    customElement('lit-tooltip')
+], LitTooltip);
+//# sourceMappingURL=lit-tooltip.js.map

package/dist/shared/lit-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-tooltip.js","sourceRoot":"","sources":["../../src/shared/lit-tooltip.ts"],"names":[],"mappings":"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"}

package/dist/shared/styles/button-shared-styles.d.ts

@@ -0,0 +1,3 @@
+export default buttonStyles;
+declare const buttonStyles: import("lit").CSSResult;
+//# sourceMappingURL=button-shared-styles.d.ts.map

package/dist/shared/styles/button-shared-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-shared-styles.d.ts","sourceRoot":"","sources":["../../../src/shared/styles/button-shared-styles.js"],"names":[],"mappings":";AAEA,oDA8DE"}

package/dist/shared/styles/button-shared-styles.js

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+const buttonStyles = css `
+    :host {
+        button {
+            border-radius: var(--border-radius-small, 0.5rem);
+            cursor: pointer;
+            transition:
+                background-color 0.3s,
+                color 0.3s,
+                border 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        /* Disabled button state */
+        .button--contained:disabled {
+            background-color: var(--color-primary-disabled, #d0d3db);
+            cursor: not-allowed;
+        }
+
+        .button--outlined:disabled {
+            color: var(--color-primary-disabled);
+            border: 1px solid var(--color-primary-disabled, #d0d3db);
+            cursor: not-allowed;
+        }
+
+        .button--text:disabled {
+            color: var(--color-primary-disabled, #d0d3db);
+            cursor: not-allowed;
+        }
+
+        /* Button Variants */
+        .button--outlined {
+            color: var(--text-primary);
+            border: 1px solid var(--text-primary, #111827);
+            background-color: transparent;
+        }
+        .button--outlined:not(:disabled):hover {
+            background-color: var(--color-primary-light, #f0fadf);
+        }
+
+        .button--contained {
+            border: none;
+            color: #fff;
+            background-color: var(--color-primary-main, #76b703);
+        }
+        .button--contained:not(:disabled):hover {
+            background-color: var(--color-primary-dark, #5f9402);
+        }
+
+        .button--text {
+            border: none;
+            color: var(--text-primary, #111827);
+            background-color: transparent;
+        }
+        .button--text:not(:disabled):hover {
+            background-color: var(--color-primary-light, #f0fadf);
+        }
+
+        .button--text.active {
+            background-color: var(--color-primary-light, #f0fadf);
+        }
+    }
+`;
+export default buttonStyles;
+//# sourceMappingURL=button-shared-styles.js.map

package/dist/shared/styles/button-shared-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-shared-styles.js","sourceRoot":"","sources":["../../../src/shared/styles/button-shared-styles.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DvB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit-element").CSSResult;
+export default _default;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.js"],"names":[],"mappings":""}

package/dist/styles.js

@@ -0,0 +1,169 @@
+import { css } from 'lit-element';
+export default css `
+    :host {
+        --breakpoint-sm: 600px;
+        --breakpoint-md: 960px;
+        --breakpoint-lg: 1280px;
+        --breakpoint-xl: 1536px;
+
+        --color-primary-main: #76b703;
+        --color-primary-light: #f0fadf;
+        --color-primary-dark: #5f9402;
+        --color-primary-disabled: #d0d3db;
+
+        --color-secondary-main: #111827;
+        --color-secondary-light: #d0d3db;
+        --color-secondary-dark: #010204;
+
+        --color-info-main: #00687e;
+        --color-info-light: #cbf6ff;
+        --color-info-dark: #004452;
+
+        --color-warning-main: #875900;
+        --color-warning-light: #ffe1a8;
+        --color-warning-dark: #684500;
+
+        --color-error-main: #ca2d0a;
+        --color-error-light: #ffd6cd;
+        --color-error-dark: #a52103;
+
+        --color-success-main: #76b703;
+        --color-success-light: #f0fadf;
+        --color-success-dark: #5f9402;
+
+        --color-divider: #d0d3db;
+
+        --text-primary: #111827;
+        --text-secondary: #5d6371;
+        --text-disabled: #d0d3db;
+
+        --background-paper: #ffffff;
+        --background-default: #eff3f4;
+
+        --border-radius-small: 0.5rem;
+        --border-radius-medium: 0.75rem;
+
+        --box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+
+        --section-padding: 0.75rem 1rem;
+
+        font-family: Inter, sans-serif;
+        box-sizing: border-box;
+
+        *,
+        *::before,
+        *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        article,
+        aside,
+        details,
+        figcaption,
+        figure,
+        footer,
+        header,
+        hgroup,
+        main,
+        menu,
+        nav,
+        section {
+            display: block;
+        }
+
+        ol,
+        ul {
+            list-style: none;
+        }
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        img,
+        video {
+            max-width: 100%;
+            height: auto;
+        }
+
+        button,
+        input,
+        optgroup,
+        select,
+        textarea {
+            font: inherit;
+            color: inherit;
+            margin: 0;
+            border: none;
+            background: none;
+            padding: 0;
+            appearance: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+        }
+
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+            width: 100%;
+        }
+
+        html {
+            font-size: 100%; /* 16px base */
+            line-height: 1.5;
+            scroll-behavior: smooth;
+            -webkit-text-size-adjust: 100%; /* Prevent font scaling in Safari */
+        }
+
+        body {
+            font-family:
+                system-ui,
+                -apple-system,
+                BlinkMacSystemFont,
+                'Segoe UI',
+                Roboto,
+                Oxygen,
+                Ubuntu,
+                Cantarell,
+                'Open Sans',
+                'Helvetica Neue',
+                sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background-color: #fff;
+        }
+
+        strong {
+            font-weight: bold;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-size: inherit;
+            font-weight: inherit;
+        }
+
+        blockquote,
+        q {
+            quotes: none;
+        }
+
+        blockquote::before,
+        blockquote::after,
+        q::before,
+        q::after {
+            content: '';
+        }
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKjB,CAAC"}

package/dist/utils/date.d.ts

@@ -0,0 +1,2 @@
+export declare const formatDate: (date: Date, locale: string) => string;
+//# sourceMappingURL=date.d.ts.map

package/dist/utils/date.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,SAAU,IAAI,UAAU,MAAM,WAgBpD,CAAC"}

package/dist/utils/date.js

@@ -0,0 +1,19 @@
+// format date by dynamic by locale props check correct format date
+export const formatDate = (date, locale) => {
+    const dateObj = new Date(date);
+    // if invalid date return Invalid Date
+    if (isNaN(dateObj.getTime())) {
+        return 'Invalid Date';
+    }
+    return new Intl.DateTimeFormat(locale, {
+        year: 'numeric',
+        month: 'numeric', // 'short' for abbreviated month names
+        day: 'numeric',
+        // weekday: 'long', // Include the full name of the day
+        // hour: '2-digit',
+        // minute: '2-digit',
+        // second: '2-digit',
+        // timeZoneName: 'short', // Include timezone
+    }).format(dateObj);
+};
+//# sourceMappingURL=date.js.map

package/dist/utils/date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.js","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,mEAAmE;AACnE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAU,EAAE,MAAc,EAAE,EAAE;IACrD,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,sCAAsC;IACtC,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;QAC3B,OAAO,cAAc,CAAC;IAC1B,CAAC;IACD,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;QACnC,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS,EAAE,sCAAsC;QACxD,GAAG,EAAE,SAAS;QACd,uDAAuD;QACvD,mBAAmB;QACnB,qBAAqB;QACrB,qBAAqB;QACrB,6CAA6C;KAChD,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AACvB,CAAC,CAAC"}

package/dist/utils/getOverviewValue.d.ts

@@ -0,0 +1,5 @@
+export declare const getIvarName: (object: any, tvarName: string) => any;
+export declare const getIvarValue: (object: any, tvarName: string, itemValue?: any) => any;
+export declare const getItemValue: (object: any, tvarName: string, column: string, itemValue: any) => any;
+export declare const getTranslation: (string: string) => any;
+//# sourceMappingURL=getOverviewValue.d.ts.map

package/dist/utils/getOverviewValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getOverviewValue.d.ts","sourceRoot":"","sources":["../../src/utils/getOverviewValue.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,WAAY,GAAG,YAAY,MAAM,QAUxD,CAAC;AAEF,eAAO,MAAM,YAAY,WAAY,GAAG,YAAY,MAAM,cAAc,GAAG,QAmE1E,CAAC;AAEF,eAAO,MAAM,YAAY,WAAY,GAAG,YAAY,MAAM,UAAU,MAAM,aAAa,GAAG,QA0BzF,CAAC;AAEF,eAAO,MAAM,cAAc,WAAY,MAAM,QAG5C,CAAC"}