overview-components 1.1.161 → 1.1.165

package/dist/shared/lit-settings.js

@@ -0,0 +1,76 @@
+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 { property } from 'lit/decorators.js';
+import { css, html, LitElement } from 'lit';
+// components
+import './lit-input.js';
+import './lit-checkbox.js';
+import './lit-date-picker.js';
+import './lit-select.js';
+export class LitSettings extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    render() {
+        const properties = this.schema?.properties || {};
+        return html `
+            <div class="settings-container">
+                ${Object.entries(properties).map(([key, definition]) => {
+            return html `
+                        <div class="setting-field">
+                            <div class="setting-label">${key}</div>
+                            <div class="setting-input">${this.renderField(key, definition)}</div>
+                        </div>
+                    `;
+        })}
+            </div>
+        `;
+    }
+    renderField(key, definition) {
+        const value = this.value?.[key];
+        if (definition.type === 'boolean') {
+            return html ` <lit-checkbox .checked=${!!value}></lit-checkbox> `;
+        }
+        if (definition.type === 'string') {
+            if (definition.enum) {
+                return html `
+                    <lit-select
+                        .options=${definition.enum}
+                        .value=${value}
+                        .multiple=${definition.multiple || false}
+                    ></lit-select>
+                `;
+            }
+            if (definition.format === 'date') {
+                return html ` <lit-date-picker .value=${value}></lit-date-picker> `;
+            }
+            return html ` <lit-input .value=${value ?? ''}></lit-input> `;
+        }
+        if (definition.type === 'number' || definition.type === 'integer') {
+            return html ` <lit-input type="number" .value=${value ?? ''}></lit-input> `;
+        }
+        return html `<div>Unsupported type: ${definition.type}</div>`;
+    }
+}
+LitSettings.styles = [css ``];
+__decorate([
+    property({ type: Object })
+], LitSettings.prototype, "schema", void 0);
+__decorate([
+    property({ type: Object })
+], LitSettings.prototype, "value", void 0);
+__decorate([
+    property({ type: Function })
+], LitSettings.prototype, "onSettingsChanged", void 0);
+if (!window.customElements.get('lit-settings')) {
+    window.customElements.define('lit-settings', LitSettings);
+}
+//# sourceMappingURL=lit-settings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lit-settings.js","sourceRoot":"","sources":["../../src/shared/lit-settings.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5D,aAAa;AACb,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,iBAAiB,CAAC;AAQzB,MAAM,OAAO,WAAY,SAAQ,UAAU;IAA3C;;QAEgC,UAAK,GAA4B,EAAE,CAAC;IAyDpE,CAAC;IAtDG,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAID,MAAM;QACF,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,UAAU,IAAI,EAAE,CAAC;QAEjD,OAAO,IAAI,CAAA;;kBAED,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,UAAU,CAAC,EAAE,EAAE;YACnD,OAAO,IAAI,CAAA;;yDAE0B,GAAG;yDACH,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,UAAU,CAAC;;qBAErE,CAAC;QACN,CAAC,CAAC;;SAET,CAAC;IACN,CAAC;IAEO,WAAW,CAAC,GAAW,EAAE,UAAe;QAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;QAEhC,IAAI,UAAU,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAChC,OAAO,IAAI,CAAA,2BAA2B,CAAC,CAAC,KAAK,mBAAmB,CAAC;QACrE,CAAC;QAED,IAAI,UAAU,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC/B,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC;gBAClB,OAAO,IAAI,CAAA;;mCAEQ,UAAU,CAAC,IAAI;iCACjB,KAAK;oCACF,UAAU,CAAC,QAAQ,IAAI,KAAK;;iBAE/C,CAAC;YACN,CAAC;YAED,IAAI,UAAU,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;gBAC/B,OAAO,IAAI,CAAA,4BAA4B,KAAe,sBAAsB,CAAC;YACjF,CAAC;YAED,OAAO,IAAI,CAAA,sBAAsB,KAAK,IAAI,EAAE,gBAAgB,CAAC;QACjE,CAAC;QAED,IAAI,UAAU,CAAC,IAAI,KAAK,QAAQ,IAAI,UAAU,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAChE,OAAO,IAAI,CAAA,oCAAoC,KAAK,IAAI,EAAE,gBAAgB,CAAC;QAC/E,CAAC;QAED,OAAO,IAAI,CAAA,0BAA0B,UAAU,CAAC,IAAI,QAAQ,CAAC;IACjE,CAAC;;AAjDM,kBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,CAAC,AAAV,CAAW;AARI;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAqC;AAClC;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sDAA8D;AA0D/F,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;IAC7C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AAC9D,CAAC"}

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

@@ -0,0 +1,252 @@
+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 { property } from 'lit/decorators.js';
+import './lit-icon.js';
+import './lit-label.js';
+export 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';
+        this.aiEnabled = false;
+        this.aiLoading = false;
+        this.onClickAiIcon = undefined;
+    }
+    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 }));
+    }
+    handleAiIconClick() {
+        // Get current value from the input element in the shadow DOM
+        const input = this.shadowRoot?.querySelector('input');
+        const currentValue = input?.value || this.value;
+        if (this.onClickAiIcon) {
+            this.onClickAiIcon(currentValue);
+        }
+    }
+    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 `
+                          <div style="display: flex; align-items: center; gap: 8px;">
+                              <lit-label
+                                  .label=${this.label}
+                                  .tooltip=${this.tooltip}
+                                  ?disabled=${this.disabled}
+                                  ?error=${this.error}
+                                  ?required=${this.required}
+                              >
+                              </lit-label>
+                              ${this.aiEnabled
+                ? html `<lit-icon-button
+                                        icon="sparkle"
+                                        size="small"
+                                        color="ai"
+                                        @click=${this.handleAiIconClick}
+                                        ?disabled=${this.aiLoading || this.disabled}
+                                        ?loading=${this.aiLoading}
+                                    ></lit-icon-button>`
+                : ''}
+                          </div>
+                      `
+            : ''}
+                <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>
+        `;
+    }
+}
+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);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "aiEnabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextInput.prototype, "aiLoading", void 0);
+__decorate([
+    property({ type: Function })
+], TextInput.prototype, "onClickAiIcon", void 0);
+if (!window.customElements.get('lit-text-field')) {
+    window.customElements.define('lit-text-field', 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,240 @@
+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 { property } from 'lit/decorators.js';
+import { LitElement } from 'lit';
+//components
+import './lit-label.js';
+import { css, html } from 'lit-element';
+export 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.inline = 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(' ');
+        const containerClass = this.inline ? 'container inline' : 'container';
+        const toggleElement = html `
+            <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>
+        `;
+        const labelElement = this.label
+            ? html `
+                  <lit-label
+                      .label=${this.label}
+                      ?disabled=${this.disabled}
+                      ?error=${this.error}
+                      ?required=${this.required}
+                      .tooltip=${this.tooltip}
+                  >
+                  </lit-label>
+              `
+            : '';
+        return html `
+            <div class="${containerClass}">
+                ${this.inline ? toggleElement : ''}
+                ${labelElement}
+                ${!this.inline ? toggleElement : ''}
+            </div>
+        `;
+    }
+}
+LitToggle.styles = css `
+        .container {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
+        .container.inline {
+            flex-direction: row;
+            align-items: center;
+        }
+
+        .toggle-wrap {
+            margin: 4px 0 4px 14px;
+        }
+
+        .container.inline .toggle-wrap {
+            margin: 0;
+        }
+
+        .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: Boolean })
+], LitToggle.prototype, "inline", void 0);
+__decorate([
+    property({ type: Function })
+], LitToggle.prototype, "onChange", void 0);
+if (!window.customElements.get('lit-toggle')) {
+    window.customElements.define('lit-toggle', 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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"}