overview-components 1.0.78 → 1.0.79

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

@@ -0,0 +1,376 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as n } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as c } from "../node_modules/lit-element/lit-element.js";
+import { computePosition as u, autoUpdate as m, offset as g, flip as b, shift as f } from "../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { customElement as v } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as l } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { query as p } from "../node_modules/@lit/reactive-element/decorators/query.js";
+import { css as y } from "../node_modules/@lit/reactive-element/css-tag.js";
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, r = (e, t, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? w(t, a) : t, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (s = (i ? h(t, a, s) : h(s)) || s);
+  return i && s && x(t, a, s), s;
+};
+let o = class extends c {
+  constructor() {
+    super(...arguments), this.label = "", this.value = "", this.disabled = !1, this.error = !1, this.required = !1, this.helperText = "", this.size = "medium", this.placeholder = "", this.options = [], this.open = !1, this.highlighted = -1, this.typedFilter = "", this.onDocumentClick = (e) => {
+      this.open && (this.contains(e.target) || this.closeDropdown());
+    };
+  }
+  updated(e) {
+    var t;
+    e.has("open") && (this.open ? (this.positionDropdown(), this.listenFloating()) : ((t = this.cleanupFloating) == null || t.call(this), this.cleanupFloating = void 0));
+  }
+  async positionDropdown() {
+    !this.anchorEl || !this.menuEl || await u(this.anchorEl, this.menuEl, {
+      middleware: [g(4), b(), f()],
+      placement: "bottom-start"
+    }).then(({ x: e, y: t }) => {
+      Object.assign(this.menuEl.style, {
+        left: `${e}px`,
+        top: `${t}px`
+      });
+    });
+  }
+  listenFloating() {
+    this.anchorEl && this.menuEl && (this.cleanupFloating = m(
+      this.anchorEl,
+      this.menuEl,
+      () => this.positionDropdown()
+    ));
+  }
+  toggleDropdown() {
+    this.disabled || (this.open ? this.closeDropdown() : this.openDropdown());
+  }
+  openDropdown() {
+    this.disabled || this.open || (this.open = !0, this.highlighted = this.options.findIndex((e) => e.value === this.value), setTimeout(() => {
+      var e;
+      return (e = this.menuEl) == null ? void 0 : e.focus();
+    }, 0), document.addEventListener("mousedown", this.onDocumentClick));
+  }
+  closeDropdown() {
+    this.open && (this.open = !1, this.typedFilter = "", document.removeEventListener("mousedown", this.onDocumentClick));
+  }
+  onSelect(e) {
+    var t;
+    (t = this.options[e]) != null && t.disabled || (this.value = this.options[e].value, this.dispatchEvent(new CustomEvent("onChange", { detail: this.value })), this.closeDropdown());
+  }
+  onKeyDown(e) {
+    var a, i;
+    if (!this.open) return;
+    if (e.key.length === 1 && // character keys only
+    !e.ctrlKey && !e.metaKey && !e.altKey) {
+      this.typedFilter += e.key, clearTimeout(this.typedTimer), this.typedTimer = window.setTimeout(() => this.typedFilter = "", 500);
+      const s = this.options.findIndex(
+        (d) => !d.disabled && d.label.toLowerCase().includes(this.typedFilter.toLowerCase())
+      );
+      s !== -1 && (this.highlighted = s, this.scrollIntoView());
+      return;
+    }
+    const t = this.options.length;
+    if (["ArrowDown", "ArrowUp", "Home", "End", "Enter", "Escape"].includes(e.key) && e.preventDefault(), e.key === "ArrowDown") {
+      do
+        this.highlighted = (this.highlighted + 1) % t;
+      while ((a = this.options[this.highlighted]) != null && a.disabled);
+      this.scrollOptionIntoView();
+    } else if (e.key === "ArrowUp") {
+      do
+        this.highlighted = (this.highlighted - 1 + t) % t;
+      while ((i = this.options[this.highlighted]) != null && i.disabled);
+      this.scrollOptionIntoView();
+    } else e.key === "Home" ? (this.highlighted = 0, this.scrollOptionIntoView()) : e.key === "End" ? (this.highlighted = t - 1, this.scrollOptionIntoView()) : e.key === "Enter" ? this.highlighted >= 0 && this.onSelect(this.highlighted) : e.key === "Escape" && this.closeDropdown();
+  }
+  scrollOptionIntoView() {
+    var t;
+    const e = (t = this.menuEl) == null ? void 0 : t.querySelectorAll(".option")[this.highlighted];
+    e && e.scrollIntoView({ block: "nearest" });
+  }
+  onBlur(e) {
+    const t = e.relatedTarget;
+    this.contains(t) || this.closeDropdown();
+  }
+  onClear(e) {
+    e.stopPropagation(), this.value = "", this.dispatchEvent(new CustomEvent("onChange", { detail: "" }));
+  }
+  render() {
+    const e = [
+      "select-box",
+      this.size,
+      this.error ? "error" : "",
+      this.disabled ? "disabled" : ""
+    ].join(" "), t = ["helper-text", this.error ? "error" : ""].join(" "), a = this.options.find((i) => i.value === this.value);
+    return n`
+            <div class="container">
+                ${this.label ? n`
+                          <lit-label
+                              label="${this.label}"
+                              .tooltip=${this.tooltip}
+                              ?disabled=${this.disabled}
+                              ?error=${this.error}
+                              ?required=${this.required}
+                          >
+                          </lit-label>
+                      ` : ""}
+                <div class="input-wrap">
+                    <div
+                        class="${e} dropdown-anchor"
+                        tabindex=${this.disabled ? -1 : 0}
+                        aria-disabled=${this.disabled ? "true" : "false"}
+                        aria-invalid=${this.error ? "true" : "false"}
+                        aria-expanded=${this.open ? "true" : "false"}
+                        aria-haspopup="listbox"
+                        @click=${() => this.toggleDropdown()}
+                        @keydown=${(i) => this.onKeyDown(i)}
+                    >
+                        <span class="selected">
+                            ${a ? a.label : n`<span class="placeholder"
+                                      >${this.placeholder || "Select..."}</span
+                                  >`}
+                        </span>
+                        ${this.value && !this.disabled ? n`
+                                  <lit-icon-button
+                                      tabindex="0"
+                                      icon="close"
+                                      variant="text"
+                                      size="small"
+                                      aria-label="Clear"
+                                      @click=${this.onClear}
+                                      @mousedown=${(i) => i.stopPropagation()}
+                                  >
+                                  </lit-icon-button>
+                              ` : null}
+                        <span class="chevron ${this.open ? "open" : ""}">
+                            <lit-icon icon="chevronDownFilled" size="1.2em"></lit-icon>
+                        </span>
+                    </div>
+                    ${this.open ? n`
+                              <div
+                                  class="dropdown-menu"
+                                  tabindex="0"
+                                  @keydown=${(i) => this.onKeyDown(i)}
+                                  role="listbox"
+                                  style="left:0;top:0;"
+                              >
+                                  ${this.options.length === 0 ? n`<div class="option disabled">No options</div>` : this.options.map(
+      (i, s) => n`
+                                                <div
+                                                    class="option
+                                                        ${i.value === this.value ? "selected" : ""}
+                                                        ${s === this.highlighted ? "highlighted" : ""}
+                                                        ${i.disabled ? "disabled" : ""}
+                                                    "
+                                                    role="option"
+                                                    aria-selected=${i.value === this.value}
+                                                    @mousedown=${() => !i.disabled && this.onSelect(s)}
+                                                    @mouseenter=${() => this.highlighted = s}
+                                                    tabindex="-1"
+                                                >
+                                                    ${i.label}
+                                                </div>
+                                            `
+    )}
+                              </div>
+                          ` : ""}
+                </div>
+                ${this.helperText && this.error ? n`
+                          <div class="${t}">
+                              <lit-icon
+                                  icon="dangerFilled"
+                                  size="1.125rem"
+                                  style="padding-top: 2px"
+                              ></lit-icon>
+                              <span>${this.helperText}</span>
+                          </div>
+                      ` : this.helperText ? n`<div class="${t}">${this.helperText}</div>` : n`<div class="helper-text">&nbsp;</div>`}
+            </div>
+        `;
+  }
+};
+o.styles = y`
+        :host {
+            display: block;
+            font-family: inherit;
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+        }
+        .input-wrap {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+        .select-box {
+            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,
+                background 0.2s,
+                color 0.2s;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            // min-height: 40px;
+            position: relative;
+            gap: 0.5rem;
+            user-select: none;
+        }
+        .select-box:hover:not(.disabled) {
+            border-color: var(--text-primary, #76b703);
+        }
+        .select-box.small {
+            font-size: 0.875rem;
+            padding: 8px 12px;
+            min-height: 32px;
+        }
+        .select-box.large {
+            font-size: 1.125rem;
+            padding: 12px 16px;
+            min-height: 48px;
+        }
+        .select-box.error {
+            border-color: var(--color-error-main, #d32f2f);
+        }
+        .select-box.disabled {
+            background: var(--background-paper, #fff);
+            border: 1px dashed var(--border-color, #d0d3db);
+            color: var(--border-color, #d0d3db);
+            cursor: not-allowed;
+        }
+        .select-box:focus-visible {
+            border-color: var(--text-primary, #111827);
+        }
+        .chevron {
+            margin-left: auto;
+            transition: transform 0.2s;
+            display: flex;
+        }
+        .chevron.open {
+            transform: rotate(180deg);
+        }
+        .selected {
+            flex: 1 1 0%;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+        .placeholder {
+            color: #aaa;
+        }
+
+        .dropdown-menu {
+            width: 98%;
+            background: var(--background-paper, #fff);
+            border: 1px solid var(--border-color, #d0d3db);
+            border-radius: var(--border-radius-small, 0.25rem);
+            //box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+            max-height: 240px;
+            overflow-y: auto;
+            outline: none;
+            padding: 0.375rem;
+            position: absolute;
+            z-index: 10;
+            left: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 0.125rem;
+            top: 0; /* will be set inline */
+        }
+        .option {
+            padding: 0.375rem 0.625rem;
+            font-size: 0.875rem;
+            cursor: pointer;
+            color: var(--text-primary, #111);
+            background: none;
+            border: none;
+            width: 98%;
+            text-align: left;
+            display: flex;
+            align-items: center;
+            transition: background 0.12s;
+            border-radius: var(--border-radius-small, 0.25rem);
+        }
+        .option.selected {
+            background: var(--color-primary-light, #e3e8f5);
+            color: var(--text-primary, #111);
+            font-weight: 500;
+        }
+        .option.highlighted {
+            background: var(--color-primary-light, #e3e8f5);
+        }
+        .option.disabled {
+            color: var(--text-disabled, #aaa);
+            cursor: not-allowed;
+        }
+
+        .helper-text {
+            margin-left: 0.875rem;
+            color: var(--text-secondary, #777);
+            min-height: 1em;
+            font-weight: 400;
+            font-size: 0.75rem;
+            line-height: 185%;
+            display: flex;
+            align-items: center;
+            gap: 0.375rem;
+        }
+        .helper-text.error {
+            color: var(--color-error-main, #d32f2f);
+        }
+    `;
+r([
+  l({ type: String })
+], o.prototype, "label", 2);
+r([
+  l({ type: String })
+], o.prototype, "value", 2);
+r([
+  l({ type: Boolean })
+], o.prototype, "disabled", 2);
+r([
+  l({ type: Boolean })
+], o.prototype, "error", 2);
+r([
+  l({ type: Boolean })
+], o.prototype, "required", 2);
+r([
+  l({ type: String })
+], o.prototype, "helperText", 2);
+r([
+  l({ type: String })
+], o.prototype, "size", 2);
+r([
+  l({ type: String })
+], o.prototype, "placeholder", 2);
+r([
+  l({ type: String })
+], o.prototype, "tooltip", 2);
+r([
+  l({ type: Array })
+], o.prototype, "options", 2);
+r([
+  l({ type: Boolean })
+], o.prototype, "open", 2);
+r([
+  l({ type: Number })
+], o.prototype, "highlighted", 2);
+r([
+  l({ type: String })
+], o.prototype, "typedFilter", 2);
+r([
+  p(".dropdown-anchor")
+], o.prototype, "anchorEl", 2);
+r([
+  p(".dropdown-menu")
+], o.prototype, "menuEl", 2);
+o = r([
+  v("lit-select-field")
+], o);
+export {
+  o as LitSelectField
+};

package/dist/shared/lit-settings.js

@@ -0,0 +1,60 @@
+import { customElement as o } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as u } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as s } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as m } from "../node_modules/lit-element/lit-element.js";
+import { css as v } from "../node_modules/@lit/reactive-element/css-tag.js";
+var d = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (p, e, t, r) => {
+  for (var l = r > 1 ? void 0 : r ? y(e, t) : e, a = p.length - 1, c; a >= 0; a--)
+    (c = p[a]) && (l = (r ? c(e, t, l) : c(l)) || l);
+  return r && l && d(e, t, l), l;
+};
+let i = class extends m {
+  constructor() {
+    super(...arguments), this.value = {};
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  render() {
+    var e;
+    const p = ((e = this.schema) == null ? void 0 : e.properties) || {};
+    return s`
+            <div class="settings-container">
+                ${Object.entries(p).map(([t, r]) => s`
+                        <div class="setting-field">
+                            <div class="setting-label">${t}</div>
+                            <div class="setting-input">${this.renderField(t, r)}</div>
+                        </div>
+                    `)}
+            </div>
+        `;
+  }
+  renderField(p, e) {
+    var r;
+    const t = (r = this.value) == null ? void 0 : r[p];
+    return e.type === "boolean" ? s` <lit-checkbox .checked=${!!t}></lit-checkbox> ` : e.type === "string" ? e.enum ? s`
+                    <lit-select
+                        .options=${e.enum}
+                        .value=${t}
+                        .multiple=${e.multiple || !1}
+                    ></lit-select>
+                ` : e.format === "date" ? s` <lit-date-picker .value=${t}></lit-date-picker> ` : s` <lit-input .value=${t ?? ""}></lit-input> ` : e.type === "number" || e.type === "integer" ? s` <lit-input type="number" .value=${t ?? ""}></lit-input> ` : s`<div>Unsupported type: ${e.type}</div>`;
+  }
+};
+i.styles = [v``];
+n([
+  u({ type: Object })
+], i.prototype, "schema", 2);
+n([
+  u({ type: Object })
+], i.prototype, "value", 2);
+n([
+  u({ type: Function })
+], i.prototype, "onSettingsChanged", 2);
+i = n([
+  o("lit-settings")
+], i);
+export {
+  i as LitSettings
+};

package/dist/shared/lit-text-field.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit-element';
 import './lit-icon.js';
 import './lit-label.js';
-export declare class TextInput extends LitElement {
+export declare class LitTextField extends LitElement {
     label: string;
     value: string;
     disabled: boolean;

package/dist/shared/lit-text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lit-text-field.d.ts","sourceRoot":"","sources":["../../src/shared/lit-text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,aAAa,CAAC;AAEpD,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,qBACa,SAAU,SAAQ,UAAU;IACT,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACf,UAAU,SAAM;IAChB,WAAW,SAAM;IACjB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC7C,OAAO,UAAS;IAChB,QAAQ,UAAS;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAU;IAE9D,MAAM,CAAC,MAAM,kCAqFX;IAEF,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,MAAM;IAMd,MAAM;CAyDT"}
+{"version":3,"file":"lit-text-field.d.ts","sourceRoot":"","sources":["../../src/shared/lit-text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,aAAa,CAAC;AAEpD,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,qBACa,YAAa,SAAQ,UAAU;IACZ,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACf,UAAU,SAAM;IAChB,WAAW,SAAM;IACjB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC7C,OAAO,UAAS;IAChB,QAAQ,UAAS;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAU;IAE9D,MAAM,CAAC,MAAM,kCAqFX;IAEF,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,MAAM;IAMd,MAAM;CAyDT"}

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

@@ -0,0 +1,205 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as a } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as c } from "../node_modules/lit-element/lit-element.js";
+import { customElement as h } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as t } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { css as u } from "../node_modules/@lit/reactive-element/css-tag.js";
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (i, o, p, s) => {
+  for (var l = s > 1 ? void 0 : s ? f(o, p) : o, d = i.length - 1, n; d >= 0; d--)
+    (n = i[d]) && (l = (s ? n(o, p, l) : n(l)) || l);
+  return s && l && b(o, p, l), l;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.label = "", this.value = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this.placeholder = "", this.size = "medium", this.focused = !1, this.required = !1, this.type = "text";
+  }
+  onInput(i) {
+    const o = i.target.value;
+    this.dispatchEvent(new CustomEvent("onChange", { detail: o }));
+  }
+  onFocus() {
+    this.focused = !0;
+  }
+  onBlur(i) {
+    this.focused = !1;
+    const o = i.target.value;
+    this.dispatchEvent(new CustomEvent("onBlur", { detail: o }));
+  }
+  render() {
+    const i = [this.size, this.error ? "error" : ""].join(" "), o = ["helper-text", this.error ? "error" : ""].join(" ");
+    return a`
+            <div class="container">
+                ${this.label ? a`
+                          <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="${i}"
+                        .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 ? a`
+                          <div
+                              class="${o}"
+                              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 ? a` <div class="${o}">${this.helperText}</div> ` : a`<div class="helper-text">&nbsp;</div>`}
+            </div>
+        `;
+  }
+};
+e.styles = u`
+        :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);
+        }
+    `;
+r([
+  t({ type: String })
+], e.prototype, "label", 2);
+r([
+  t({ type: String })
+], e.prototype, "value", 2);
+r([
+  t({ type: Boolean })
+], e.prototype, "disabled", 2);
+r([
+  t({ type: Boolean })
+], e.prototype, "readonly", 2);
+r([
+  t({ type: Boolean })
+], e.prototype, "error", 2);
+r([
+  t({ type: String })
+], e.prototype, "helperText", 2);
+r([
+  t({ type: String })
+], e.prototype, "placeholder", 2);
+r([
+  t({ type: String })
+], e.prototype, "size", 2);
+r([
+  t({ type: Boolean })
+], e.prototype, "focused", 2);
+r([
+  t({ type: Boolean })
+], e.prototype, "required", 2);
+r([
+  t({ type: String })
+], e.prototype, "tooltip", 2);
+r([
+  t({ type: String })
+], e.prototype, "type", 2);
+e = r([
+  h("lit-text-field")
+], e);
+export {
+  e as LitTextField
+};