overview-components 1.0.99 → 1.0.101

package/dist/shared/lit-case-variables-tab-cell.js

@@ -0,0 +1,226 @@
+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 { styleMap } from 'lit/directives/style-map.js';
+import { customElement, property } from 'lit/decorators.js';
+// components
+import '../shared/lit-icon.js';
+import '../shared/lit-icon.js';
+import '../shared/lit-button.js';
+import '../shared/simple-tooltip.js';
+// utils
+import { formatDate } from '../utils/date.js';
+let LitCaseVariablesTabCell = class LitCaseVariablesTabCell extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'string';
+        this.buttonVariant = 'contained';
+        this.buttonFullWidth = true;
+        this.userLang = 'cs';
+        this.BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
+    }
+    getHeader() {
+        return html `
+            <div
+                style="${this.headerStyle ? styleMap(this.headerStyle) : ''}"
+                class="process-data-heading"
+            >
+                ${this.headerName ? this.headerName : ''}
+                ${this.tooltip
+            ? html `
+                          <lit-icon size="12px" icon="informative"></lit-icon>
+                          <simple-tooltip placement="right"
+                              >${this.tooltip ? this.tooltip : ''}</simple-tooltip
+                          >
+                      `
+            : ''}
+            </div>
+        `;
+    }
+    getCellButton() {
+        return html `
+            <lit-button
+                .fullWidth="${this.buttonFullWidth}"
+                variant="${this.buttonVariant}"
+                label="${this.headerName ? this.headerName : ''}"
+                @click=${this.buttonFn}
+            ></lit-button>
+        `;
+    }
+    getCellLink() {
+        return html `
+            <div>${this.getHeader()}</div>
+            <a class="link" href=${this.value ? this.value : ''} target="_blank">
+                ${this.value ? this.value : ''}
+            </a>
+        `;
+    }
+    getCellValue() {
+        return html `
+            <div>${this.getHeader()}</div>
+            <div
+                style="${this.valueStyle ? styleMap(this.valueStyle) : ''}"
+                class="process-data-value"
+            >
+                ${this.value ? this.value : ''}
+            </div>
+        `;
+    }
+    getCellDate() {
+        return html `
+            <div>${this.getHeader()}</div>
+            <div
+                style="${this.valueStyle ? styleMap(this.valueStyle) : ''}"
+                class="process-data-value"
+            >
+                ${this.value
+            ? formatDate(this.value, this.userLang || 'cs', !!this.dateFormat)
+            : ''}
+            </div>
+        `;
+    }
+    render() {
+        const breakpointIndex = this.BREAKPOINTS.indexOf(this.currentBreakpoint);
+        const spanSize = this.BREAKPOINTS.slice(0, breakpointIndex + 1)
+            .reverse()
+            .map((bp) => this.size?.[bp])
+            .find((size) => size !== undefined) ?? 2;
+        const classes = `cell--span${spanSize} cell`;
+        return html `
+            <div
+                class="${classes}"
+                style="${styleMap((this.cellStyle || {}))}"
+            >
+                ${this.type === 'button'
+            ? this.getCellButton()
+            : this.type === 'link'
+                ? this.getCellLink()
+                : this.type === 'date'
+                    ? this.getCellDate()
+                    : this.getCellValue()}
+            </div>
+        `;
+    }
+};
+LitCaseVariablesTabCell.styles = css `
+        :host {
+            font-family: 'Inter', sans-serif;
+        }
+
+        .grid-container {
+            display: grid;
+            justify-content: start;
+            align-items: start;
+            gap: 0.5rem;
+        }
+
+        .process-data-heading {
+            font-size: 0.75rem;
+            color: var(--text-secondary, #5d6371);
+            font-weight: 400 !important;
+            display: flex;
+            gap: 5px;
+            align-items: center;
+        }
+
+        .process-data-value {
+            font-size: 0.8125rem;
+            color: var(--text-primary, #111827);
+            margin: 0;
+            padding-top: 0.3125rem;
+            font-weight: 500 !important;
+        }
+
+        .status {
+            color: var(--color-primary-main, #76b703);
+        }
+
+        .link {
+            font-size: 0.8125rem;
+            text-decoration: none;
+            color: inherit;
+            border-bottom: 0.0625rem solid var(--color-primary-main, #76b703);
+        }
+
+        .cell {
+            padding: 5px;
+            border-radius: 8px;
+        }
+
+        .link:hover {
+            color: var(--color-primary-main, #76b703);
+        }
+
+        .cell--span1 {
+            grid-column: span 1 / span 1;
+        }
+
+        .cell--span2 {
+            grid-column: span 2 / span 2;
+        }
+
+        .cell--span3 {
+            grid-column: span 3 / span 3;
+        }
+
+        .cell--span4 {
+            grid-column: span 4 / span 4;
+        }
+    `;
+__decorate([
+    property({ type: String })
+], LitCaseVariablesTabCell.prototype, "field", void 0);
+__decorate([
+    property({ type: String })
+], LitCaseVariablesTabCell.prototype, "type", void 0);
+__decorate([
+    property({ type: Function })
+], LitCaseVariablesTabCell.prototype, "headerName", void 0);
+__decorate([
+    property({ type: Function })
+], LitCaseVariablesTabCell.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], LitCaseVariablesTabCell.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], LitCaseVariablesTabCell.prototype, "buttonVariant", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitCaseVariablesTabCell.prototype, "buttonFullWidth", void 0);
+__decorate([
+    property({ type: Function })
+], LitCaseVariablesTabCell.prototype, "buttonFn", void 0);
+__decorate([
+    property({ type: String })
+], LitCaseVariablesTabCell.prototype, "href", void 0);
+__decorate([
+    property({ type: Object })
+], LitCaseVariablesTabCell.prototype, "headerStyle", void 0);
+__decorate([
+    property({ type: Object })
+], LitCaseVariablesTabCell.prototype, "valueStyle", void 0);
+__decorate([
+    property({ type: Object })
+], LitCaseVariablesTabCell.prototype, "cellStyle", void 0);
+__decorate([
+    property({ type: Function })
+], LitCaseVariablesTabCell.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: String })
+], LitCaseVariablesTabCell.prototype, "dateFormat", void 0);
+__decorate([
+    property({ type: String })
+], LitCaseVariablesTabCell.prototype, "userLang", void 0);
+__decorate([
+    property({ type: String })
+], LitCaseVariablesTabCell.prototype, "currentBreakpoint", void 0);
+LitCaseVariablesTabCell = __decorate([
+    customElement('lit-case-variables-tab-cell')
+], LitCaseVariablesTabCell);
+export { LitCaseVariablesTabCell };
+//# sourceMappingURL=lit-case-variables-tab-cell.js.map

package/dist/shared/lit-case-variables-tab-cell.js.map

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

package/dist/shared/lit-checkbox.js

@@ -0,0 +1,171 @@
+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 { classMap } from 'lit/directives/class-map.js';
+import './lit-label.js';
+let LitCheckbox = class LitCheckbox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.checked = false;
+        this.indeterminate = false;
+        this.onChange = () => { };
+        this.value = '';
+        this.label = '';
+    }
+    // 1) Manually sync the indeterminate property on the <input>
+    updated(changed) {
+        super.updated(changed);
+        const input = this.renderRoot.querySelector('input[type="checkbox"]');
+        if (input) {
+            input.indeterminate = this.indeterminate;
+        }
+    }
+    // 2) Intercept clicks when we're indeterminate
+    _onClick(e) {
+        if (this.indeterminate) {
+            // prevent the browser from toggling .checked for us
+            e.preventDefault();
+            // clear the “?” state
+            this.indeterminate = false;
+            // and leave this.checked as it was (false)
+            // now fire your change callback
+            this._notifyChange(e);
+        }
+        // otherwise let the native click toggle .checked, and @change will fire
+    }
+    // 3) Handle the native change event when not indeterminate
+    _onChange(e) {
+        // update our controlled prop
+        this.checked = e.target.checked;
+        this._notifyChange(e);
+    }
+    _notifyChange(e) {
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: e.target.checked,
+        }));
+        if (typeof this.onChange === 'function') {
+            this.onChange(e);
+        }
+    }
+    render() {
+        return html `
+            <div class="container">
+                ${this.label
+            ? html `
+                          <lit-label label="${this.label}" ?disabled=${this.disabled}> </lit-label>
+                      `
+            : ''}
+                <input
+                    class=${classMap({
+            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>
+        `;
+    }
+};
+LitCheckbox.styles = css `
+        :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;
+        }
+    `;
+__decorate([
+    property({ type: Boolean })
+], LitCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Function })
+], LitCheckbox.prototype, "onChange", void 0);
+__decorate([
+    property({ type: String })
+], LitCheckbox.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], LitCheckbox.prototype, "label", void 0);
+LitCheckbox = __decorate([
+    customElement('lit-checkbox')
+], LitCheckbox);
+export { LitCheckbox };
+//# sourceMappingURL=lit-checkbox.js.map

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

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

package/dist/shared/lit-custom-popper.js

@@ -0,0 +1,117 @@
+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, } from '@floating-ui/dom';
+let LitCustomPopper = class LitCustomPopper extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false; // Controls opening/closing of popper
+        this.placement = 'top-end'; // Placement of the popper
+        this.keepMounted = false; // Keeps popper in DOM when closed
+        this.referenceElement = null;
+        this.popperElement = null;
+        this.handleOutsideClick = (event) => {
+            if (!this.open)
+                return;
+            const path = event.composedPath();
+            if (!path.includes(this) &&
+                this.referenceElement &&
+                !path.includes(this.referenceElement)) {
+                this.closePopper();
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsideClick); // Add outside click listener
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleOutsideClick); // Remove listener on disconnect
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this.referenceElement = this.querySelector('[slot="reference"]');
+        this.popperElement = this.shadowRoot.querySelector('.popper');
+        if (!this.referenceElement || !this.popperElement) {
+            console.error('Reference or popper element is missing!');
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('open') && this.open) {
+            this.updatePopperPosition();
+        }
+    }
+    async updatePopperPosition() {
+        if (this.referenceElement && this.popperElement) {
+            const { x, y } = await computePosition(this.referenceElement, this.popperElement, {
+                placement: this.placement,
+                middleware: [offset(0), flip(), shift()],
+            });
+            // Adjust the width of the popper to match the reference element minus padding
+            const adjustedWidth = this.referenceElement.offsetWidth - 12;
+            Object.assign(this.popperElement.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+                width: `${adjustedWidth}px`,
+            });
+        }
+    }
+    closePopper() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('close', { detail: { closedBy: 'outside' } }));
+    }
+    render() {
+        return html `
+            <slot name="reference"></slot>
+            <div class="popper ${this.open ? 'open' : ''}">
+                <slot name="content"></slot>
+            </div>
+        `;
+    }
+};
+LitCustomPopper.styles = css `
+        :host {
+            display: block;
+            position: relative;
+        }
+
+        .popper {
+            position: absolute;
+            min-width: max-content;
+            width: 100%;
+            top: 0;
+            left: 0;
+            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));
+            z-index: 9999;
+            display: none;
+            opacity: 0;
+            transition: opacity 0.2s ease-in-out;
+        }
+
+        .popper.open {
+            display: block;
+            opacity: 1;
+        }
+    `;
+__decorate([
+    property({ type: Boolean })
+], LitCustomPopper.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], LitCustomPopper.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitCustomPopper.prototype, "keepMounted", void 0);
+LitCustomPopper = __decorate([
+    customElement('lit-custom-popper')
+], LitCustomPopper);
+export { LitCustomPopper };
+//# sourceMappingURL=lit-custom-popper.js.map

package/dist/shared/lit-custom-popper.js.map

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