overview-components 1.0.91 → 1.0.93

package/dist/shared/lit-text-field.js

@@ -0,0 +1,222 @@
+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-element';
+import { customElement, property } from 'lit/decorators.js';
+import './lit-icon.js';
+import './lit-label.js';
+let TextInput = class TextInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.value = '';
+        this.disabled = false;
+        this.readonly = false;
+        this.error = false;
+        this.helperText = '';
+        this.placeholder = '';
+        this.size = 'medium';
+        this.focused = false;
+        this.required = false;
+        this.type = 'text';
+    }
+    onInput(e) {
+        const val = e.target.value;
+        this.dispatchEvent(new CustomEvent('onChange', { detail: val }));
+    }
+    onFocus() {
+        this.focused = true;
+    }
+    onBlur(e) {
+        ;
+        this.focused = false;
+        const val = e.target.value;
+        this.dispatchEvent(new CustomEvent('onBlur', { detail: val }));
+    }
+    render() {
+        const inputClass = [this.size, this.error ? 'error' : ''].join(' ');
+        const helperClass = ['helper-text', this.error ? 'error' : ''].join(' ');
+        return html `
+            <div class="container">
+                ${this.label
+            ? html `
+                          <lit-label
+                              .label=${this.label}
+                              .tooltip=${this.tooltip}
+                              ?disabled=${this.disabled}
+                              ?error=${this.error}
+                              ?required=${this.required}
+                          >
+                          </lit-label>
+                      `
+            : ''}
+                <div class="input-wrap">
+                    <input
+                        ?required=${this.required}
+                        class="${inputClass}"
+                        .value=${this.value}
+                        ?disabled=${this.disabled}
+                        ?readonly=${this.readonly}
+                        placeholder=${this.placeholder}
+                        @input=${this.onInput}
+                        @focus=${this.onFocus}
+                        @blur=${this.onBlur}
+                        type="${this.type}"
+                        step="0.1"
+                        aria-required="${this.required ? 'true' : 'false'}"
+                        aria-invalid="${this.error ? 'true' : 'false'}"
+                        aria-label="${this.label || 'text input'}"
+                    />
+                </div>
+                ${this.helperText && this.error
+            ? html `
+                          <div
+                              class="${helperClass}"
+                              style="display:flex;align-items:center;gap:0.375rem;"
+                          >
+                              <lit-icon
+                                  icon="dangerFilled"
+                                  size="1.125rem"
+                                  style="padding-top: 2px"
+                              ></lit-icon>
+
+                              <span>${this.helperText}</span>
+                          </div>
+                      `
+            : this.helperText
+                ? html ` <div class="${helperClass}">${this.helperText}</div> `
+                : html `<div class="helper-text">&nbsp;</div>`}
+            </div>
+        `;
+    }
+};
+TextInput.styles = css `
+        :host {
+            display: block;
+            font-family: inherit;
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+        }
+        .input-wrap {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+        input {
+            width: 100%;
+            border: 1px solid var(--border-color, #d0d3db);
+            border-radius: var(--border-radius-small, 0.25rem);
+            background: var(--background-paper, #fff);
+            color: var(--text-primary, #111);
+            padding: 0.625rem 0.875rem;
+            font-size: 0.875rem;
+            outline: none;
+            transition:
+                border-color 0.2s,
+                box-shadow 0.2s,
+                background 0.2s,
+                color 0.2s;
+        }
+        input.small {
+            font-size: 0.875rem;
+            padding: 8px 12px;
+        }
+        input.large {
+            font-size: 1.125rem;
+            padding: 12px 16px;
+        }
+        input:focus:not(:disabled):not([readonly]) {
+            border-color: var(--text-primary, #111827);
+            // box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
+        }
+        .input-wrap:hover input:not(:disabled):not([readonly]) {
+            border-color: var(--text-primary, #d0d3db);
+            cursor: pointer;
+        }
+        input:disabled {
+            background: var(--background-paper, #fff);
+            border: 1px dashed var(--border-color, #d0d3db);
+            color: var(--border-color, #d0d3db);
+            cursor: not-allowed;
+        }
+        input[readonly]:not(:disabled) {
+            background: var(--background-paper, #fff);
+            border-color: transparent;
+            color: var(--text-primary, #d0d3db);
+            cursor: default;
+        }
+        input.error {
+            border-color: var(--color-error-main, #d32f2f);
+        }
+        input.error:focus {
+            // box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
+        }
+        .helper-text {
+            margin-left: 0.875rem;
+            color: var(--text-secondary, #777);
+            min-height: 1em;
+            font-weight: 400;
+            font-size: 0.75rem;
+            line-height: 185%;
+            letter-spacing: 0px;
+            vertical-align: middle;
+        }
+        .helper-text.error {
+            color: var(--color-error-main, #d32f2f);
+        }
+        .label.error {
+            color: var(--color-error-main, #d32f2f);
+        }
+        .label.disabled {
+            color: var(--text-disabled, #777);
+        }
+        .label.focused {
+            color: var(--text-secondary, #111);
+        }
+    `;
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "error", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "helperText", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "focused", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: String })
+], TextInput.prototype, "type", void 0);
+TextInput = __decorate([
+    customElement('lit-text-field')
+], TextInput);
+export { TextInput };
+//# sourceMappingURL=lit-text-field.js.map

package/dist/shared/lit-text-field.js.map

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

package/dist/shared/lit-toggle.js

@@ -0,0 +1,222 @@
+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 { customElement, property } from 'lit/decorators.js';
+import { LitElement } from 'lit';
+//components
+import './lit-label.js';
+import { css, html } from 'lit-element';
+let LitToggle = class LitToggle extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.disabled = false;
+        this.error = false;
+        this.size = 'medium';
+        this.checked = false;
+        this.required = false;
+        this.onChange = () => { };
+    }
+    _onChange(e) {
+        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() {
+        const inputClass = [this.size, this.error ? 'error' : ''].join(' ');
+        return html `
+            <div class="container">
+                ${this.label
+            ? html `
+                          <lit-label
+                              .label=${this.label}
+                              ?disabled=${this.disabled}
+                              ?error=${this.error}
+                              ?required=${this.required}
+                              .tooltip=${this.tooltip}
+                          >
+                          </lit-label>
+                      `
+            : ''}
+                <div class="toggle-wrap">
+                    <label class="switch ${inputClass}">
+                        <input
+                            type="checkbox"
+                            @change=${this._onChange}
+                            .checked=${this.checked}
+                            ?disabled=${this.disabled}
+                        />
+                        <span class="slider round"></span>
+                    </label>
+                </div>
+            </div>
+        `;
+    }
+};
+LitToggle.styles = css `
+        .container {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
+        .toggle-wrap {
+            margin: 4px 0 4px 14px;
+        }
+
+        .switch {
+            position: relative;
+            display: inline-block;
+        }
+
+        .switch.medium {
+            width: 44px;
+            height: 22px;
+        }
+
+        .switch.small {
+            width: 32px;
+            height: 18px;
+        }
+
+        /* Hide default HTML checkbox */
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        /* The slider */
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #99a0ae;
+            -webkit-transition: 0.4s;
+            transition: 0.4s;
+        }
+
+        .slider:before {
+            position: absolute;
+            content: '';
+            background-color: var(--background-paper, #ffffff);
+            -webkit-transition: 0.4s;
+            transition: 0.4s;
+        }
+
+        input:checked + .slider {
+            background-color: var(--color-primary-main, #76b703);
+        }
+
+        input:focus + .slider {
+            box-shadow: 0 0 1px var(--color-primary-main, #76b703);
+        }
+
+        .switch.medium .slider:before {
+            height: 14px;
+            width: 14px;
+            left: 4px;
+            bottom: 4px;
+        }
+
+        .switch.medium input:checked + .slider:before {
+            -webkit-transform: translateX(22px);
+            -ms-transform: translateX(22px);
+            transform: translateX(22px);
+        }
+
+        .switch.small .slider:before {
+            height: 12px;
+            width: 12px;
+            left: 3px;
+            bottom: 3px;
+        }
+
+        .switch.small input:checked + .slider:before {
+            -webkit-transform: translateX(14px);
+            -ms-transform: translateX(14px);
+            transform: translateX(14px);
+        }
+
+        /* Rounded sliders */
+        .slider.round {
+            border-radius: 34px;
+        }
+
+        .slider.round:before {
+            border-radius: 50%;
+        }
+
+        .switch.disabled,
+        .switch input:disabled + .slider {
+            cursor: not-allowed;
+        }
+
+        .switch input:disabled + .slider {
+            background-color: #5d6371;
+        }
+
+        .switch input:checked:disabled + .slider {
+            background-color: #d0d3db;
+        }
+
+        .switch input:not(:checked):not(:disabled):hover + .slider {
+            background-color: #828795;
+        }
+
+        .switch input:checked:not(:disabled):hover + .slider {
+            background-color: #5f9402;
+        }
+
+        .switch input:active + .slider {
+            background-color: #5d6371;
+        }
+
+        .switch input:checked:active + .slider {
+            background-color: #476f02;
+        }
+    `;
+__decorate([
+    property({ type: String })
+], LitToggle.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitToggle.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitToggle.prototype, "error", void 0);
+__decorate([
+    property({ type: String })
+], LitToggle.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitToggle.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitToggle.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], LitToggle.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: Function })
+], LitToggle.prototype, "onChange", void 0);
+LitToggle = __decorate([
+    customElement('lit-toggle')
+], LitToggle);
+export { LitToggle };
+//# sourceMappingURL=lit-toggle.js.map

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

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

package/dist/shared/lit-tooltip.js

@@ -0,0 +1,166 @@
+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, query } from 'lit/decorators.js';
+import { computePosition, offset, flip, shift, arrow, autoUpdate, } from '@floating-ui/dom';
+let PerfTooltip = class PerfTooltip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'top';
+        this.cleanup = null;
+        this.isHoveringTrigger = false;
+        this.isHoveringTooltip = false;
+        this.hideTimeout = null;
+    }
+    firstUpdated() {
+        const triggerEl = this.triggerSlot.assignedElements()[0];
+        const tooltipEl = this.tooltipSlot.assignedElements()[0];
+        if (!triggerEl || !tooltipEl)
+            return;
+        triggerEl.addEventListener('mouseenter', () => {
+            this.isHoveringTrigger = true;
+            this.clearHideTimeout();
+            this.showTooltip(triggerEl, tooltipEl);
+        });
+        triggerEl.addEventListener('mouseleave', () => {
+            this.isHoveringTrigger = false;
+            this.startHideTimeout();
+        });
+        triggerEl.addEventListener('focus', () => this.showTooltip(triggerEl, tooltipEl));
+        triggerEl.addEventListener('blur', () => this.hideTooltip(tooltipEl));
+        triggerEl.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape')
+                this.hideTooltip(tooltipEl);
+        });
+        tooltipEl.addEventListener('mouseenter', () => {
+            this.isHoveringTooltip = true;
+            this.clearHideTimeout();
+        });
+        tooltipEl.addEventListener('mouseleave', () => {
+            this.isHoveringTooltip = false;
+            this.startHideTimeout();
+        });
+    }
+    startHideTimeout() {
+        this.clearHideTimeout();
+        this.hideTimeout = window.setTimeout(() => {
+            if (!this.isHoveringTrigger && !this.isHoveringTooltip) {
+                const tooltipEl = this.tooltipSlot.assignedElements()[0];
+                if (tooltipEl)
+                    this.hideTooltip(tooltipEl);
+            }
+        }, 200);
+    }
+    clearHideTimeout() {
+        if (this.hideTimeout !== null) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+    }
+    async showTooltip(triggerEl, tooltipEl) {
+        tooltipEl.setAttribute('data-visible', '');
+        let arrowEl = tooltipEl.querySelector('.arrow');
+        if (!arrowEl) {
+            arrowEl = document.createElement('div');
+            arrowEl.classList.add('arrow');
+            tooltipEl.appendChild(arrowEl);
+        }
+        this.cleanup = autoUpdate(triggerEl, tooltipEl, async () => {
+            const position = await computePosition(triggerEl, tooltipEl, {
+                placement: this.placement,
+                middleware: [offset(8), flip(), shift({ padding: 5 }), arrow({ element: arrowEl })],
+            });
+            const { x, y, placement, middlewareData } = position;
+            const { arrow: arrowData } = middlewareData;
+            Object.assign(tooltipEl.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            if (arrowData) {
+                const { x: arrowX, y: arrowY } = arrowData;
+                Object.assign(arrowEl.style, {
+                    left: arrowX != null ? `${arrowX}px` : '',
+                    top: arrowY != null ? `${arrowY}px` : '',
+                });
+            }
+            arrowEl.setAttribute('data-placement', placement);
+        });
+    }
+    hideTooltip(tooltipEl) {
+        tooltipEl.removeAttribute('data-visible');
+        this.cleanup?.();
+        this.cleanup = null;
+    }
+    render() {
+        return html `
+            <slot name="trigger"></slot>
+            <slot name="tooltip"></slot>
+        `;
+    }
+};
+PerfTooltip.styles = css `
+        :host {
+            position: relative;
+            display: inline-block;
+        }
+
+        ::slotted([slot='tooltip']) {
+            position: absolute;
+            z-index: 9999;
+            background: #111;
+            color: #fff;
+            padding: 6px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+            pointer-events: none;
+        }
+
+        ::slotted([slot='tooltip'][data-visible]) {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .arrow {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: inherit;
+            transform: rotate(45deg);
+        }
+
+        .arrow[data-placement^='top'] {
+            bottom: -4px;
+        }
+
+        .arrow[data-placement^='bottom'] {
+            top: -4px;
+        }
+
+        .arrow[data-placement^='left'] {
+            right: -4px;
+        }
+
+        .arrow[data-placement^='right'] {
+            left: -4px;
+        }
+    `;
+__decorate([
+    property({ type: String })
+], PerfTooltip.prototype, "placement", void 0);
+__decorate([
+    query('slot[name="trigger"]')
+], PerfTooltip.prototype, "triggerSlot", void 0);
+__decorate([
+    query('slot[name="tooltip"]')
+], PerfTooltip.prototype, "tooltipSlot", void 0);
+PerfTooltip = __decorate([
+    customElement('perf-tooltip')
+], PerfTooltip);
+export { PerfTooltip };
+//# 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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"}