overview-components 1.1.161 → 1.1.165

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

@@ -0,0 +1,494 @@
+import { css } from 'lit';
+const buttonStyles = css `
+    button {
+        font-family: inherit;
+        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 states - Generic base styles */
+    button:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+
+    /* Disabled styles by variant */
+    .button--contained:disabled {
+        background-color: var(--color-primary-disabled, #d0d3db) !important;
+        color: var(--color-text-disabled, #9ca3af) !important;
+    }
+
+    .button--outlined:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+        border-color: var(--color-primary-disabled, #d0d3db) !important;
+        background-color: transparent !important;
+    }
+
+    .button--text:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+        background-color: transparent !important;
+    }
+
+    .button--dashed:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+        background-color: transparent !important;
+    }
+
+    .button--dashed:disabled::before {
+        border-color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    /* Disabled styles by color - Primary */
+    .button--primary.button--contained:disabled {
+        background-color: var(--color-primary-disabled, #d0d3db) !important;
+        color: var(--color-text-disabled, #9ca3af) !important;
+    }
+
+    .button--primary.button--outlined:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+        border-color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--primary.button--text:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--primary.button--dashed:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--primary.button--dashed:disabled::before {
+        border-color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    /* Disabled styles by color - Secondary */
+    .button--secondary.button--contained:disabled {
+        background-color: var(--color-primary-disabled, #d0d3db) !important;
+        color: var(--color-text-disabled, #9ca3af) !important;
+    }
+
+    .button--secondary.button--outlined:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+        border-color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--secondary.button--text:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--secondary.button--dashed:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--secondary.button--dashed:disabled::before {
+        border-color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    /* Disabled styles by color - Error */
+    .button--error.button--contained:disabled {
+        background-color: var(--color-primary-disabled, #d0d3db) !important;
+        color: var(--color-text-disabled, #9ca3af) !important;
+    }
+
+    .button--error.button--outlined:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+        border-color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--error.button--text:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--error.button--dashed:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--error.button--dashed:disabled::before {
+        border-color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    /* Disabled styles by color - Warning */
+    .button--warning.button--contained:disabled {
+        background-color: var(--color-primary-disabled, #d0d3db) !important;
+        color: var(--color-text-disabled, #9ca3af) !important;
+    }
+
+    .button--warning.button--outlined:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+        border-color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--warning.button--text:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--warning.button--dashed:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--warning.button--dashed:disabled::before {
+        border-color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    /* Disabled styles by color - AI */
+    .button--ai.button--contained:disabled {
+        background: var(--color-primary-disabled, #d0d3db) !important;
+        color: var(--color-text-disabled, #9ca3af) !important;
+    }
+
+    .button--ai.button--outlined:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+        border-color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--ai.button--text:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--ai.button--dashed:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--ai.button--dashed:disabled::before {
+        border-color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    /* Special handling for legacy AI outlined variant */
+    .button--outlined-ai:disabled {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+        opacity: 0.6;
+    }
+
+    .button--outlined-ai:disabled::before {
+        background: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--outlined-ai:disabled .button-inner {
+        background: none !important;
+        color: var(--color-primary-disabled, #d0d3db) !important;
+        -webkit-text-fill-color: var(--color-primary-disabled, #d0d3db) !important;
+        -webkit-background-clip: border-box !important;
+    }
+
+    .button--outlined-ai:disabled .out-ai {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    .button--outlined-ai:disabled .start-icon {
+        color: var(--color-primary-disabled, #d0d3db) !important;
+    }
+
+    /* Remove all hover effects on disabled buttons */
+    button:disabled:hover {
+        background-color: inherit !important;
+        opacity: 0.6 !important;
+        transform: none !important;
+    }
+
+    /* Button Variants */
+    .button--outlined {
+        color: var(--text-primary);
+        border: 1px solid var(--text-primary, #111827);
+        background-color: var(--background-paper, #fff);
+    }
+    .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);
+    }
+
+    /* Color variants */
+    .button--primary.button--contained {
+        color: #fff;
+        background-color: var(--color-primary-main, #76b703);
+    }
+    .button--primary.button--contained:not(:disabled):hover {
+        background-color: var(--color-primary-dark, #5f9402);
+    }
+
+    .button--primary.button--outlined {
+        color: var(--color-primary-main, #76b703);
+        border-color: var(--color-primary-main, #76b703);
+    }
+    .button--primary.button--outlined:not(:disabled):hover {
+        background-color: var(--color-primary-light, #f0fadf);
+    }
+
+    .button--primary.button--dashed {
+        color: var(--color-primary-main, #76b703);
+    }
+    .button--primary.button--dashed::before {
+        border-color: var(--color-primary-main, #76b703);
+    }
+    .button--primary.button--dashed:not(:disabled):hover {
+        background-color: var(--color-primary-light, #f0fadf);
+    }
+
+    .button--primary.button--text {
+        color: var(--color-primary-main, #76b703);
+    }
+    .button--primary.button--text:not(:disabled):hover {
+        background-color: var(--color-primary-light, #f0fadf);
+    }
+
+    .button--secondary.button--contained {
+        color: #fff;
+        background-color: var(--color-secondary-main, #6b7280);
+    }
+    .button--secondary.button--contained:not(:disabled):hover {
+        background-color: var(--color-secondary-dark, #4b5563);
+    }
+
+    .button--secondary.button--outlined {
+        color: var(--color-secondary-main, #6b7280);
+        border-color: var(--color-secondary-main, #6b7280);
+    }
+    .button--secondary.button--outlined:not(:disabled):hover {
+        background-color: var(--color-secondary-light, #f3f4f6);
+    }
+
+    .button--secondary.button--dashed {
+        color: var(--color-secondary-main, #6b7280);
+    }
+    .button--secondary.button--dashed::before {
+        border-color: var(--color-secondary-main, #6b7280);
+    }
+    .button--secondary.button--dashed:not(:disabled):hover {
+        background-color: var(--color-primary-light, #f3f4f6);
+    }
+
+    .button--secondary.button--text {
+        color: var(--color-secondary-main, #6b7280);
+    }
+    .button--secondary.button--text:not(:disabled):hover {
+        background-color: var(--color-primary-light, #f3f4f6);
+    }
+
+    .button--error.button--contained {
+        border: none;
+        color: var(--color-error-light, #ffd6cd);
+        background-color: var(--color-error-main, #ca2d0a);
+    }
+    .button--error.button--contained:not(:disabled):hover {
+        background-color: var(--color-error-dark, #a52103);
+    }
+
+    .button--error.button--outlined {
+        color: var(--color-error-main, #ca2d0a);
+        border-color: var(--color-error-main, #ca2d0a);
+    }
+    .button--error.button--outlined:not(:disabled):hover {
+        background-color: var(--color-error-light-bg, #ffeeed);
+    }
+
+    .button--error.button--dashed {
+        color: var(--color-error-main, #ca2d0a);
+    }
+    .button--error.button--dashed::before {
+        border-color: var(--color-error-main, #ca2d0a);
+    }
+    .button--error.button--dashed:not(:disabled):hover {
+        background-color: var(--color-error-light-bg, #ffeeed);
+    }
+
+    .button--error.button--text {
+        color: var(--color-error-main, #ca2d0a);
+    }
+    .button--error.button--text:not(:disabled):hover {
+        background-color: var(--color-error-light-bg, #ffeeed);
+    }
+
+    .button--error:not(.button--contained):not(.button--outlined):not(.button--dashed):not(.button--text):not(:disabled):hover {
+        background-color: var(--color-error-dark, #a52103);
+    }
+
+    .button--ai.button--contained {
+        border: none;
+        color: #fff;
+        background: linear-gradient(to right, #573493, #e78047);
+    }
+    .button--ai.button--contained:not(:disabled):hover {
+        opacity: 80%;
+    }
+
+    .button--ai.button--outlined {
+        color: #573493;
+        border: 1px solid #573493;
+        background-color: var(--background-paper, #fff);
+    }
+    .button--ai.button--outlined:not(:disabled):hover {
+        background-color: rgba(87, 52, 147, 0.1);
+    }
+
+    .button--ai.button--dashed {
+        color: #573493;
+    }
+    .button--ai.button--dashed::before {
+        border-color: #573493;
+    }
+    .button--ai.button--dashed:not(:disabled):hover {
+        background-color: rgba(87, 52, 147, 0.1);
+    }
+
+    .button--ai.button--text {
+        color: #573493;
+    }
+    .button--ai.button--text:not(:disabled):hover {
+        background-color: rgba(87, 52, 147, 0.1);
+    }
+
+    .button--warning.button--contained {
+        border: none;
+        color: #fff;
+        background-color: var(--color-warning-main, #ff9500);
+    }
+    .button--warning.button--contained:not(:disabled):hover {
+        background-color: var(--color-warning-dark, #e68600);
+    }
+
+    .button--warning.button--outlined {
+        color: var(--color-warning-main, #ff9500);
+        border-color: var(--color-warning-main, #ff9500);
+    }
+    .button--warning.button--outlined:not(:disabled):hover {
+        background-color: var(--color-warning-light-bg, #fff5e6);
+    }
+
+    .button--warning.button--dashed {
+        color: var(--color-warning-main, #ff9500);
+    }
+    .button--warning.button--dashed::before {
+        border-color: var(--color-warning-main, #ff9500);
+    }
+    .button--warning.button--dashed:not(:disabled):hover {
+        background-color: var(--color-warning-light-bg, #fff5e6);
+    }
+
+    .button--warning.button--text {
+        color: var(--color-warning-main, #ff9500);
+    }
+    .button--warning.button--text:not(:disabled):hover {
+        background-color: var(--color-warning-light-bg, #fff5e6);
+    }
+
+    /* Legacy AI support */
+    .button--ai:not(.button--contained):not(.button--outlined):not(.button--dashed):not(.button--text) {
+        border: none;
+        color: #fff;
+        background: linear-gradient(to right, #573493, #e78047);
+    }
+    .button--ai:not(.button--contained):not(.button--outlined):not(.button--dashed):not(.button--text):not(:disabled):hover {
+        opacity: 80%;
+    }
+
+    .button--outlined-ai {
+        position: relative;
+        background-color: var(--background-paper, #fff);
+        border: none;
+        z-index: 0;
+        color: transparent;
+
+        background-image: linear-gradient(to right, #573493, #e78047);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .button--outlined-ai::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        right: -1px;
+        bottom: -1px;
+        z-index: -1;
+        background: linear-gradient(to right, #573493, #e78047);
+        border-radius: inherit;
+        padding: 1px;
+        -webkit-mask:
+            linear-gradient(#fff 0 0) content-box,
+            linear-gradient(#fff 0 0);
+        mask-composite: exclude;
+    }
+    .button--outlined-ai .button-inner {
+        background: linear-gradient(to right, #573493, #e78047);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .button--outlined-ai:not(:disabled) .out-ai {
+        color: #573493;
+    }
+
+    .button--outlined-ai:not(:disabled) .start-icon {
+        color: #573493;
+    }
+
+    .button--outlined-ai:not(:disabled):hover {
+        opacity: 80%;
+    }
+
+    .button--text {
+        border: none;
+        color: var(--text-primary, #111827);
+        background-color: inherit;
+    }
+
+    .button--text:not(:disabled):hover {
+        background-color: var(--color-primary-light, #f0fadf);
+    }
+
+    .button--dashed {
+        position: relative;
+        border: none;
+        color: var(--text-primary, #111827);
+        background-color: var(--background-paper, #fff);
+        display: flex !important;
+    }
+
+    .button--dashed::before {
+        content: '';
+        top: 1px;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        position: absolute;
+        border: 1px dashed var(--color-divider, #d0d3db);
+        border-radius: 6px; /* 2px less than main radius */
+        box-sizing: border-box;
+        z-index: 1;
+    }
+
+    .button--dashed:not(:disabled):hover {
+        background-color: var(--color-primary-light, #f0fadf);
+    }
+
+    .button--text.active {
+        background-color: var(--color-primary-light, #f0fadf);
+    }
+    .button--dashed.active {
+        background-color: var(--color-primary-light, #f0fadf);
+    }
+    .button--inherit {
+        background-color: inherit;
+        color: var(--text-primary, #111827);
+        border: none;
+    }
+`;
+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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0evB,CAAC;AAEF,eAAe,YAAY,CAAC"}

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/custom-filters.js

@@ -0,0 +1,42 @@
+export const dateRangeFilterFn = (row, columnId, filterValue) => {
+    const rowValue = row.getValue(columnId);
+    if (!rowValue)
+        return false;
+    const rowDate = new Date(rowValue);
+    if (isNaN(rowDate.getTime()))
+        return false;
+    // Helper to strip time part
+    const toDateOnly = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const rowDateOnly = toDateOnly(rowDate);
+    const startDate = filterValue.startDate
+        ? toDateOnly(new Date(filterValue.startDate))
+        : undefined;
+    const endDate = filterValue.endDate ? toDateOnly(new Date(filterValue.endDate)) : undefined;
+    if (startDate && endDate)
+        return rowDateOnly >= startDate && rowDateOnly <= endDate;
+    if (startDate)
+        return rowDateOnly >= startDate;
+    if (endDate)
+        return rowDateOnly <= endDate;
+    return true;
+};
+export function dateFilterFn(row, columnId, filterValue) {
+    if (!filterValue)
+        return true;
+    const rowValue = row.getValue(columnId);
+    if (!rowValue)
+        return false;
+    const date1 = new Date(rowValue);
+    const date2 = new Date(filterValue);
+    if (!date1 || !date2)
+        return false;
+    // Compare only the date part (ignore time)
+    return (date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate());
+}
+export const multiselectFilterFn = (row, columnId, filterValue) => {
+    const rowValue = row.getValue(columnId);
+    return !!rowValue && filterValue.includes(rowValue);
+};
+//# sourceMappingURL=custom-filters.js.map