overview-components 0.1.2 → 0.1.4

package/dist/shared/lit-select.js

@@ -36,131 +36,133 @@ let LitSelect = class LitSelect extends LitElement {
     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>
+        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>
+            ? 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" style="overflow-y: auto">
-                        ${optionsWithAll.map((option) => html `
-                                <div
+            : ''}
+                </div>
+                <div slot="content">
+                    <div class="menu" style="overflow-y: auto">
+                        ${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>
+            : ''}"
+                                    @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 {
-            display: none;
-            position: absolute;
-            right: 30px;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
-            pointer-events: auto;
-        }
-        .custom-icon-wrapper:hover .custom-icon {
-            display: inline-block;
-        }
-
-        .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;
-        }
+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 {
+            display: none;
+            position: absolute;
+            right: 30px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+            background: var(--background-paper);
+        }
+        .custom-icon-wrapper:hover .custom-icon {
+            display: inline-block;
+        }
+
+        .custom-icon-wrapper .dropdown-icon {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            pointer-events: none;
+             background: var(--background-paper);
+        }
+
+        .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 })

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

@@ -1 +1 @@
-{"version":3,"file":"lit-select.js","sourceRoot":"","sources":["../../src/shared/lit-select.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,wBAAwB,CAAC;AAChC,OAAO,eAAe,CAAC;AACvB,OAAO,sBAAsB,CAAC;AAGvB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACyB,UAAK,GAAW,EAAE,CAAC,CAAC,2BAA2B;QAChD,YAAO,GAAuC,EAAE,CAAC,CAAC,WAAW;QAC1D,aAAQ,GAA4B,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,mBAAmB;QAE9E,WAAM,GAAG,KAAK,CAAC,CAAC,eAAe;IA4JpD,CAAC;IA1EW,mBAAmB;QACvB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC/B,CAAC;IAEO,YAAY;QAChB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC;IAEO,YAAY,CAAC,WAAmB;QACpC,IAAI,CAAC,KAAK,GAAG,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;QACtD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,gEAAgE;QAC3F,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAEO,UAAU,CAAC,CAAQ;QACvB,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,mCAAmC;QACxD,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,4CAA4C;IACnE,CAAC;IAED,MAAM;QACF,MAAM,cAAc,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAEzC,MAAM,YAAY,GACd,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;QAEvF,OAAO,IAAI,CAAA;;yBAEM,IAAI,CAAC,MAAM;;0BAEV,IAAI,CAAC,YAAY;;;;;;kCAMT,YAAY,IAAI,EAAE;kCAClB,IAAI,CAAC,mBAAmB;;;;;sBAKpC,IAAI,CAAC,KAAK;YACR,CAAC,CAAC,IAAI,CAAA;iEACmC,IAAI,CAAC,UAAU;;;;;;;2BAOrD;YACH,CAAC,CAAC,EAAE;;;;0BAIF,cAAc,CAAC,GAAG,CAChB,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAA;;uDAEW,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;YAC9C,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;YACzC,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;8CACE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC;;sCAE7C,MAAM,CAAC,KAAK;;6BAErB,CACJ;;;;SAIhB,CAAC;IACN,CAAC;;AAzJM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8ElB,AA9EY,CA8EX;AApF0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAoB;AACpB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;0CAAkD;AAC9C;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;2CAA8C;AAE1D;IAAhB,KAAK,EAAE;yCAAwB;AALvB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAiKrB"}
+{"version":3,"file":"lit-select.js","sourceRoot":"","sources":["../../src/shared/lit-select.ts"],"names":[],"mappings":"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"}

package/dist/shared/lit-tooltip.js

@@ -57,59 +57,59 @@ let LitTooltip = class LitTooltip extends LitElement {
         this.tooltipElement?.removeAttribute('visible');
     }
     render() {
-        return html `
-            <div id="trigger" @mouseenter=${this.showTooltip} @mouseleave=${this.hideTooltip}>
-                <slot id="trigger" @mouseenter=${this.showTooltip} @mouseleave=${this.hideTooltip}
-                    >Hover me</slot
-                >
-            </div>
-            <div id="tooltip">
-                ${this.label}
-                <div id="arrow"></div>
-            </div>
+        return html `
+            <div id="trigger" @mouseenter=${this.showTooltip} @mouseleave=${this.hideTooltip}>
+                <slot id="trigger" @mouseenter=${this.showTooltip} @mouseleave=${this.hideTooltip}
+                    >Hover me</slot
+                >
+            </div>
+            <div id="tooltip">
+                ${this.label}
+                <div id="arrow"></div>
+            </div>
         `;
     }
 };
-LitTooltip.styles = css `
-        :host {
-            display: block;
-            max-width: 100%;
-            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;
-            width: max-content;
-            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;
-            width: 100%;
-        }
-        #arrow {
-            position: absolute;
-            background: black;
-            width: 8px;
-            height: 8px;
-            transform: rotate(45deg);
-        }
+LitTooltip.styles = css `
+        :host {
+            display: block;
+            max-width: 100%;
+            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));
+           
+            z-index: 1000;
+            visibility: hidden;
+            opacity: 0;
+            overflow-wrap: break-word;
+            width: max-content;
+            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;
+            width: 100%;
+        }
+        #arrow {
+            position: absolute;
+            background: black;
+            width: 8px;
+            height: 8px;
+            transform: rotate(45deg);
+        }
     `;
 __decorate([
     property({ type: String })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overview-components",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A reusable design Lit components for case overview section.",
   "main": "dist/index.js",
   "module": "dist/index.js",