@bluevolt-tech/lumen 1.5.2 → 2.0.0

package/dist/components/bv-input/bv-input.js

@@ -0,0 +1,148 @@
+// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-input/bv-input.css
+var bv_input_default = ":host {\n  display: block;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.field-label {\n  display: block;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin-bottom: 6px;\n}\n\n.required-mark {\n  color: var(--bv-color-danger);\n  margin-left: 2px;\n}\n\n/* \u2500\u2500 Input \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.field-input {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  height: 44px;\n  padding: 0 var(--bv-spacing-md);\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-800);\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  outline: none;\n  transition:\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.field-input::placeholder {\n  color: var(--bv-color-neutral-400);\n}\n\n.field-input:focus {\n  border-color: var(--bv-color-primary);\n  box-shadow:\n    0 0 0 3px var(--bv-color-primary-light),\n    0 1px 2px 0 rgba(16, 24, 40, 0.05);\n}\n\n.field-input:disabled {\n  background: var(--bv-color-neutral-100);\n  color: var(--bv-color-neutral-400);\n  cursor: not-allowed;\n}\n\n:host([error]:not([error=''])) .field-input {\n  border-color: var(--bv-color-danger);\n}\n\n:host([error]:not([error=''])) .field-input:focus {\n  border-color: var(--bv-color-danger);\n  box-shadow:\n    0 0 0 3px var(--bv-color-danger-light),\n    0 1px 2px 0 rgba(16, 24, 40, 0.05);\n}\n\n/* \u2500\u2500 Error message \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.field-error {\n  display: block;\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-danger);\n  margin-top: var(--bv-spacing-xs);\n}\n";
+
+// components/bv-input/bv-input.ts
+var _sheet = null;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync(bv_input_default);
+  }
+  return _sheet;
+}
+var BvInput = class extends HTMLElement {
+  static observedAttributes = [
+    "label",
+    "type",
+    "placeholder",
+    "value",
+    "name",
+    "error",
+    "required",
+    "disabled"
+  ];
+  _rendered = false;
+  _labelEl = null;
+  _inputEl = null;
+  _errorEl = null;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
+      shadow.adoptedStyleSheets = [getSheet()];
+    }
+  }
+  get value() {
+    var _a;
+    return ((_a = this._inputEl) == null ? void 0 : _a.value) ?? this.getAttribute("value") ?? "";
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(v) {
+    if (v) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
+  }
+  get required() {
+    return this.hasAttribute("required");
+  }
+  set required(v) {
+    if (v) this.setAttribute("required", "");
+    else this.removeAttribute("required");
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, val) {
+    if (!this._rendered) return;
+    if (name === "label") this._syncLabel();
+    if (name === "placeholder" && this._inputEl) this._inputEl.placeholder = val ?? "";
+    if (name === "value" && this._inputEl && this._inputEl.value !== (val ?? "")) {
+      this._inputEl.value = val ?? "";
+    }
+    if (name === "type" && this._inputEl) this._inputEl.type = val ?? "text";
+    if (name === "name" && this._inputEl) this._inputEl.name = val ?? "";
+    if (name === "error") this._syncError();
+    if (name === "disabled") this._syncDisabled();
+    if (name === "required") this._syncLabel();
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_input_default;
+      shadow.appendChild(s);
+    }
+    const label = document.createElement("label");
+    label.className = "field-label";
+    this._labelEl = label;
+    const inputEl = document.createElement("input");
+    inputEl.className = "field-input";
+    inputEl.type = this.getAttribute("type") ?? "text";
+    inputEl.placeholder = this.getAttribute("placeholder") ?? "";
+    inputEl.value = this.getAttribute("value") ?? "";
+    inputEl.name = this.getAttribute("name") ?? "";
+    inputEl.setAttribute("part", "input");
+    this._inputEl = inputEl;
+    inputEl.addEventListener("input", () => {
+      this.dispatchEvent(
+        new CustomEvent("bv-input", {
+          bubbles: true,
+          composed: true,
+          detail: { value: inputEl.value }
+        })
+      );
+    });
+    inputEl.addEventListener("change", () => {
+      this.dispatchEvent(
+        new CustomEvent("bv-change", {
+          bubbles: true,
+          composed: true,
+          detail: { value: inputEl.value }
+        })
+      );
+    });
+    const errorEl = document.createElement("span");
+    errorEl.className = "field-error";
+    errorEl.setAttribute("aria-live", "polite");
+    this._errorEl = errorEl;
+    shadow.append(label, inputEl, errorEl);
+    this._syncLabel();
+    this._syncError();
+    this._syncDisabled();
+  }
+  _syncLabel() {
+    if (!this._labelEl) return;
+    const labelText = this.getAttribute("label") ?? "";
+    this._labelEl.textContent = labelText;
+    if (this.hasAttribute("required")) {
+      const mark = document.createElement("span");
+      mark.className = "required-mark";
+      mark.setAttribute("aria-hidden", "true");
+      mark.textContent = "*";
+      this._labelEl.appendChild(mark);
+    }
+    this._labelEl.hidden = !labelText;
+  }
+  _syncError() {
+    if (!this._errorEl) return;
+    const msg = this.getAttribute("error") ?? "";
+    this._errorEl.textContent = msg;
+    this._errorEl.hidden = !msg;
+  }
+  _syncDisabled() {
+    if (!this._inputEl) return;
+    this._inputEl.disabled = this.hasAttribute("disabled");
+  }
+};
+if (!customElements.get("bv-input")) {
+  customElements.define("bv-input", BvInput);
+}
+export {
+  BvInput
+};

package/dist/components/bv-input-dropdown/bv-input-dropdown.d.ts

@@ -0,0 +1,46 @@
+import '../bv-searchbox/bv-searchbox.ts';
+import '../bv-checkbox/bv-checkbox.ts';
+import '../bv-toggle/bv-toggle.ts';
+export type SelectAllState = 'checked' | 'unchecked' | 'mixed';
+export interface InputDropdownSearchDetail {
+    value: string;
+}
+export interface InputDropdownSelectAllDetail {
+    checked: boolean;
+}
+export interface InputDropdownToggleDetail {
+    checked: boolean;
+}
+export declare class BvInputDropdown extends HTMLElement {
+    static readonly observedAttributes: readonly ["label", "value", "placeholder", "required", "disabled", "error", "search", "select-all", "select-all-state", "toggle-label", "toggle-checked", "open"];
+    private _rendered;
+    private _labelEl;
+    private _triggerLabelEl;
+    private _headerEl;
+    private _searchEl;
+    private _toolbarEl;
+    private _selectAllEl;
+    private _toggleEl;
+    private _errorEl;
+    private _offClick;
+    constructor();
+    get value(): string;
+    set value(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get required(): boolean;
+    set required(v: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
+    private _render;
+    private _toggle;
+    private _open;
+    private _close;
+    private _syncLabel;
+    private _syncTriggerLabel;
+    private _syncError;
+    private _syncSearch;
+    private _syncToolbar;
+    private _updateHeaderVisibility;
+}