aeico-components 0.1.4 → 0.1.6

package/src/tree/tree.ts

@@ -0,0 +1,237 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import { html, prop } from 'aeico';
+import style from '../styles/components/tree.css?inline';
+import variables from '../styles/variables.css?inline';
+import type { TreeSelectDetail, TreeExpandDetail, TreeCheckDetail } from './defines';
+import './tree-item';
+import type TreeItem from './tree-item';
+
+/**
+ * Tree component. Renders a hierarchical tree of `<ae-tree-item>` elements.
+ *
+ * @prop {boolean} checkable       - Enable checkbox selection mode with parent-child sync.
+ * @prop {boolean} multiple        - Allow multi-select (click to toggle). Ignored when checkable.
+ * @prop {boolean} showLine        - Show dashed connecting lines between items.
+ * @prop {boolean} defaultExpandAll - Expand all items on initial connect.
+ * @prop {string}  selectedKey     - Currently selected key (single-select convenience prop).
+ *
+ * @property {string[]} selectedKeys - Currently selected keys (multi-select).
+ * @property {string[]} checkedKeys  - Currently checked keys (checkable mode).
+ * @property {string[]} expandedKeys - Currently expanded keys.
+ *
+ * @event {CustomEvent<TreeSelectDetail>} select - Fires when an item is selected/deselected.
+ * @event {CustomEvent<TreeExpandDetail>} expand - Fires when an item is expanded/collapsed.
+ * @event {CustomEvent<TreeCheckDetail>}  check  - Fires when an item checkbox changes.
+ *
+ * @example
+ * ```html
+ * <ae-tree>
+ *   <ae-tree-item key="1" label="Parent">
+ *     <ae-tree-item key="1-1" label="Child A"></ae-tree-item>
+ *     <ae-tree-item key="1-2" label="Child B"></ae-tree-item>
+ *   </ae-tree-item>
+ * </ae-tree>
+ * ```
+ */
+class Tree extends AeicoComponent {
+  static tagName = 'tree';
+
+  protected static styles = [variables, style];
+
+  @prop({ type: Boolean })
+  accessor checkable: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor multiple: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor showLine: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor defaultExpandAll: boolean = false;
+
+  @prop({ type: String })
+  accessor selectedKey: string | undefined;
+
+  /** Icon name used for the expand/collapse toggle on all items (overridable per item). */
+  @prop({ type: String })
+  accessor icon: string | undefined;
+
+  /** Currently selected keys (multi-select). Set programmatically. */
+  selectedKeys: string[] = [];
+
+  /** Currently checked keys (checkable mode). Set programmatically. */
+  checkedKeys: string[] = [];
+
+  /** Currently expanded keys. Set programmatically. */
+  expandedKeys: string[] = [];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen('_tree-item-toggle-expand', this._handleItemToggleExpand as EventListener);
+    this.listen('_tree-item-select', this._handleItemSelect as EventListener);
+    this.listen('_tree-item-check', this._handleItemCheck as EventListener);
+  }
+
+  private _getAllItems(): TreeItem[] {
+    return Array.from(this.querySelectorAll<TreeItem>('ae-tree-item'));
+  }
+
+  private _getDirectChildren(node: Element): TreeItem[] {
+    return Array.from(node.querySelectorAll<TreeItem>(':scope > ae-tree-item'));
+  }
+
+  private _computeCheckedKeys(): string[] {
+    const keys: string[] = [];
+    for (const item of this._getAllItems()) {
+      if (item.checked && !item.indeterminate) {
+        keys.push(item.key ?? '');
+      }
+    }
+    return keys.filter(Boolean);
+  }
+
+  private _handleItemToggleExpand = (e: CustomEvent<{ key: string }>): void => {
+    const node = e.target as TreeItem;
+    const newExpanded = !node.expanded;
+    node.expanded = newExpanded;
+
+    const key = node.key ?? '';
+    if (newExpanded) {
+      if (!this.expandedKeys.includes(key)) {
+        this.expandedKeys = [...this.expandedKeys, key];
+      }
+    } else {
+      this.expandedKeys = this.expandedKeys.filter((k) => k !== key);
+    }
+
+    this.emit('expand', {
+      detail: {
+        key,
+        expanded: newExpanded,
+        expandedKeys: [...this.expandedKeys],
+      } satisfies TreeExpandDetail,
+    });
+  };
+
+  private _handleItemSelect = (e: CustomEvent<{ key: string }>): void => {
+    const { key } = e.detail;
+
+    if (this.multiple) {
+      // Toggle selection
+      const alreadySelected = this.selectedKeys.includes(key);
+      if (alreadySelected) {
+        this.selectedKeys = this.selectedKeys.filter((k) => k !== key);
+      } else {
+        this.selectedKeys = [...this.selectedKeys, key];
+      }
+      this.selectedKey = this.selectedKeys[this.selectedKeys.length - 1];
+
+      // Sync visual state
+      this._getAllItems().forEach((item) => {
+        item.selected = this.selectedKeys.includes(item.key ?? '');
+      });
+
+      this.emit('select', {
+        detail: {
+          key,
+          selected: !alreadySelected,
+          selectedKeys: [...this.selectedKeys],
+        } satisfies TreeSelectDetail,
+      });
+    } else {
+      // Single select — deselect all, select target
+      const alreadySelected = this.selectedKey === key;
+      this._getAllItems().forEach((item) => {
+        item.selected = !alreadySelected && item.key === key;
+      });
+      this.selectedKey = alreadySelected ? undefined : key;
+      this.selectedKeys = this.selectedKey ? [this.selectedKey] : [];
+
+      this.emit('select', {
+        detail: {
+          key,
+          selected: !alreadySelected,
+          selectedKeys: [...this.selectedKeys],
+        } satisfies TreeSelectDetail,
+      });
+    }
+  };
+
+  private _handleItemCheck = (e: CustomEvent<{ key: string; checked: boolean }>): void => {
+    const { key, checked } = e.detail;
+    const sourceNode = e.target as TreeItem;
+
+    this._setCheckedRecursive(sourceNode, checked);
+    this._syncAncestors(sourceNode);
+    this.checkedKeys = this._computeCheckedKeys();
+
+    this.emit('check', {
+      detail: { key, checked, checkedKeys: [...this.checkedKeys] } satisfies TreeCheckDetail,
+    });
+  };
+
+  private _setCheckedRecursive(node: TreeItem, checked: boolean): void {
+    if (node.disabled) return;
+    node.checked = checked;
+    node.indeterminate = false;
+    for (const child of this._getDirectChildren(node)) {
+      this._setCheckedRecursive(child, checked);
+    }
+  }
+
+  private _syncAncestors(sourceNode: TreeItem): void {
+    let el: Element | null = sourceNode.parentElement;
+    while (el) {
+      const tag = el.tagName.toLowerCase();
+      if (tag === 'ae-tree-item') {
+        const parent = el as TreeItem;
+        const children = this._getDirectChildren(parent).filter((c) => !c.disabled);
+        if (children.length === 0) break;
+        const checkedCount = children.filter((c) => c.checked && !c.indeterminate).length;
+        const indeterminateCount = children.filter((c) => c.indeterminate).length;
+
+        if (checkedCount === children.length) {
+          parent.checked = true;
+          parent.indeterminate = false;
+        } else if (checkedCount > 0 || indeterminateCount > 0) {
+          parent.checked = false;
+          parent.indeterminate = true;
+        } else {
+          parent.checked = false;
+          parent.indeterminate = false;
+        }
+      } else if (tag === 'ae-tree') {
+        break;
+      }
+      el = el.parentElement;
+    }
+  }
+
+  protected render() {
+    return html(({ div, slot }) => {
+      div(
+        {
+          className: 'tree',
+          role: 'tree',
+          'aria-multiselectable': this.multiple ? 'true' : 'false',
+        },
+        () => {
+          slot();
+        },
+      );
+    });
+  }
+}
+
+Tree.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-tree': Tree;
+  }
+}
+
+export default Tree;
+export type TreeProps = InferProps<typeof Tree>;

package/dist/chunks/aeico-field.cjs

@@ -1,179 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-const aeico = require("aeico");
-const aeicoComponent = require("./aeico-component.cjs");
-const aeicoLocalize = require("aeico-localize");
-class AeicoField extends aeicoComponent.AeicoComponent {
-  constructor() {
-    super(...arguments);
-    /**
-     * The underlying form control element (input, select, etc.)
-     * Subclasses should set this to their specific element
-     */
-    __publicField(this, "fieldElement", null);
-    __publicField(this, "resetBtn", null);
-    __publicField(this, "clearBtn", null);
-    __publicField(this, "boundOnChange", () => this.setValue(this.getValue(), { silent: false, action: "change" }));
-    __publicField(this, "boundOnReset", () => this.onReset());
-    __publicField(this, "boundOnClear", () => this.onClear());
-  }
-  /**
-   * Lifecycle: Component connected to DOM
-   */
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  /**
-   * Lifecycle: Component disconnected from DOM
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-  }
-  /**
-   * Render action buttons (clear/reset) using this.builder.
-   * Must be called from within a build() callback.
-   */
-  renderActionButtons(force = false) {
-    this.renderClearButton(force);
-    this.renderResetButton(force);
-  }
-  renderResetButton(force = false) {
-    const { button } = aeico.tags;
-    if (force || this.resettable) {
-      this.resetBtn = button({
-        className: "reset-btn",
-        textContent: this.resetText || "↺",
-        title: aeicoLocalize.t("buttons.reset", "↺"),
-        "@click": this.boundOnReset
-      });
-    }
-  }
-  renderClearButton(force = false) {
-    const { button } = aeico.tags;
-    if (force || this.clearable) {
-      this.clearBtn = button({
-        className: "clear-btn",
-        textContent: this.clearText || "✕",
-        title: aeicoLocalize.t("buttons.clear", "✕"),
-        "@click": this.boundOnClear
-      });
-    }
-  }
-  /**
-   * Watcher for disabled property
-   */
-  onDisabledChanged(newValue) {
-    if (this.fieldElement) {
-      this.fieldElement.disabled = Boolean(newValue);
-    }
-  }
-  /**
-   * Render the field component
-   * Override in subclass to provide custom rendering
-   */
-  render() {
-  }
-  /**
-   * Get current value from the field element
-   * Default implementation returns the value property of fieldElement
-   * Override in subclasses if needed (e.g., checkbox uses checked instead of value)
-   *
-   * @returns Current field value
-   */
-  getValue() {
-    var _a;
-    return ((_a = this.fieldElement) == null ? void 0 : _a.value) || "";
-  }
-  /**
-   * Write value to the underlying UI element and sync props
-   * Subclasses must override this to update their specific UI element
-   *
-   * @param _value New value to write to the element
-   */
-  writeValue(_value) {
-  }
-  /**
-   * Get event payload for change events
-   * Override in subclasses to customize event data (e.g., { checked, oldChecked } for checkbox)
-   *
-   * @param value New value
-   * @param oldValue Previous value
-   * @param action Action type
-   * @returns Event payload object
-   */
-  getEventPayload(value, oldValue, action) {
-    return { value, oldValue, action };
-  }
-  /**
-   * Update field value programmatically (internal method)
-   * Subclasses should provide type-safe public wrappers (e.g., change() method)
-   *
-   * @param value New value
-   * @param options.silent If true, won't emit change event (default: true)
-   * @param options.action Action type for the event (default: 'change')
-   */
-  setValue(value, options) {
-    const oldValue = this.getValue();
-    this.value = value;
-    this.writeValue(value);
-    if ((options == null ? void 0 : options.silent) === false) {
-      const payload = this.getEventPayload(value, oldValue, options.action || "change");
-      this.emit("change", { detail: payload });
-    }
-  }
-  /**
-   * Reset field to specified value or default value
-   *
-   * @param value Value to reset to, defaults to defaultValue prop
-   * @param options.silent If false, will emit reset event (default: true)
-   */
-  reset(value, options) {
-    const resetValue = value !== void 0 ? value : this.defaultValue;
-    this.setValue(resetValue, { ...options, action: "reset" });
-  }
-  /**
-   * Clear the field value
-   *
-   * @param options.silent If false, will emit clear event (default: true)
-   */
-  clear(options) {
-    this.setValue("", { ...options, action: "clear" });
-  }
-  /**
-   * Handle clear button click
-   * Clears the field and dispatches event
-   */
-  onClear() {
-    this.clear({ silent: false });
-  }
-  /**
-   * Handle reset button click
-   * Resets to default value and dispatches event
-   */
-  onReset() {
-    this.reset(void 0, { silent: false });
-  }
-}
-/**
- * Define base field properties (extends AeicoElement properties)
- */
-__publicField(AeicoField, "props", {
-  value: { type: String },
-  defaultValue: { type: String },
-  resettable: { type: Boolean },
-  resetText: { type: String },
-  clearable: { type: Boolean },
-  clearText: { type: String },
-  size: { type: String },
-  disabled: { type: Boolean }
-});
-/**
- * Property watchers
- */
-__publicField(AeicoField, "watchers", {
-  disabled: "onDisabledChanged"
-});
-exports.AeicoField = AeicoField;
-//# sourceMappingURL=aeico-field.cjs.map

package/dist/chunks/aeico-field.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"aeico-field.cjs","sources":["../../src/aeico-field.ts"],"sourcesContent":["import type { InferProps, Props, Watchers } from 'aeico';\nimport { tags } from 'aeico';\nimport AeicoComponent from './aeico-component';\nimport { t } from 'aeico-localize';\n\nexport type FieldAction = 'clear' | 'reset' | 'change';\nexport type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\n/**\n * Base class for form field components\n *\n * Provides common functionality for field components including:\n * - Theme support\n * - i18n integration (via Localizable mixin)\n * - Reset button management\n * - Value management\n * - Common configuration handling\n */\nclass AeicoField<TValue = string> extends AeicoComponent {\n  /**\n   * Define base field properties (extends AeicoElement properties)\n   */\n  static props: Props = {\n    value: { type: String },\n    defaultValue: { type: String },\n    resettable: { type: Boolean },\n    resetText: { type: String },\n    clearable: { type: Boolean },\n    clearText: { type: String },\n    size: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  /**\n   * Property watchers\n   */\n  static watchers: Watchers = {\n    disabled: 'onDisabledChanged',\n  };\n\n  /**\n   * The underlying form control element (input, select, etc.)\n   * Subclasses should set this to their specific element\n   */\n  protected fieldElement: FieldElement | null = null;\n\n  protected resetBtn: HTMLButtonElement | null = null;\n  protected clearBtn: HTMLButtonElement | null = null;\n\n  protected readonly boundOnChange = () =>\n    this.setValue(this.getValue(), { silent: false, action: 'change' });\n\n  protected readonly boundOnReset = () => this.onReset();\n  protected readonly boundOnClear = () => this.onClear();\n\n  // Declare reactive properties for TypeScript\n  declare value?: TValue;\n  declare defaultValue?: TValue | string;\n  declare resettable?: boolean;\n  declare resetText?: string;\n  declare clearable?: boolean;\n  declare clearText?: string;\n  declare size?: string;\n  declare disabled?: boolean;\n\n  /**\n   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  /**\n   * Lifecycle: Component disconnected from DOM\n   */\n  disconnectedCallback() {\n    super.disconnectedCallback();\n  }\n\n  /**\n   * Render action buttons (clear/reset) using this.builder.\n   * Must be called from within a build() callback.\n   */\n  protected renderActionButtons(force: boolean = false) {\n    this.renderClearButton(force);\n    this.renderResetButton(force);\n  }\n\n  protected renderResetButton(force: boolean = false) {\n    const { button } = tags;\n\n    if (force || this.resettable) {\n      this.resetBtn = button({\n        className: 'reset-btn',\n        textContent: this.resetText || '↺',\n        title: t('buttons.reset', '↺'),\n        '@click': this.boundOnReset,\n      });\n    }\n  }\n\n  protected renderClearButton(force: boolean = false) {\n    const { button } = tags;\n\n    if (force || this.clearable) {\n      this.clearBtn = button({\n        className: 'clear-btn',\n        textContent: this.clearText || '✕',\n        title: t('buttons.clear', '✕'),\n        '@click': this.boundOnClear,\n      });\n    }\n  }\n\n  /**\n   * Watcher for disabled property\n   */\n  protected onDisabledChanged(newValue: boolean) {\n    if (this.fieldElement) {\n      (this.fieldElement as HTMLInputElement | HTMLSelectElement).disabled = Boolean(newValue);\n    }\n  }\n\n  /**\n   * Render the field component\n   * Override in subclass to provide custom rendering\n   */\n  render(): void {\n    // Default implementation - subclasses can override\n  }\n\n  /**\n   * Get current value from the field element\n   * Default implementation returns the value property of fieldElement\n   * Override in subclasses if needed (e.g., checkbox uses checked instead of value)\n   *\n   * @returns Current field value\n   */\n  protected getValue(): any {\n    return this.fieldElement?.value || '';\n  }\n\n  /**\n   * Write value to the underlying UI element and sync props\n   * Subclasses must override this to update their specific UI element\n   *\n   * @param _value New value to write to the element\n   */\n  protected writeValue(_value: any): void {\n    // Base implementation - subclasses override\n  }\n\n  /**\n   * Get event payload for change events\n   * Override in subclasses to customize event data (e.g., { checked, oldChecked } for checkbox)\n   *\n   * @param value New value\n   * @param oldValue Previous value\n   * @param action Action type\n   * @returns Event payload object\n   */\n  protected getEventPayload(value: any, oldValue: any, action: FieldAction): Record<string, any> {\n    return { value, oldValue, action };\n  }\n\n  /**\n   * Update field value programmatically (internal method)\n   * Subclasses should provide type-safe public wrappers (e.g., change() method)\n   *\n   * @param value New value\n   * @param options.silent If true, won't emit change event (default: true)\n   * @param options.action Action type for the event (default: 'change')\n   */\n  protected setValue(value: any, options?: { silent?: boolean; action?: FieldAction }): void {\n    const oldValue = this.getValue();\n\n    // Update property value\n    this.value = value;\n\n    // Write to UI element (DOM only)\n    this.writeValue(value);\n\n    // Emit event if not silent\n    if (options?.silent === false) {\n      const payload = this.getEventPayload(value, oldValue, options.action || 'change');\n      this.emit('change', { detail: payload });\n    }\n  }\n\n  /**\n   * Reset field to specified value or default value\n   *\n   * @param value Value to reset to, defaults to defaultValue prop\n   * @param options.silent If false, will emit reset event (default: true)\n   */\n  public reset(value?: any, options?: { silent?: boolean }): void {\n    const resetValue = value !== undefined ? value : this.defaultValue;\n    this.setValue(resetValue, { ...options, action: 'reset' });\n  }\n\n  /**\n   * Clear the field value\n   *\n   * @param options.silent If false, will emit clear event (default: true)\n   */\n  public clear(options?: { silent?: boolean }): void {\n    this.setValue('', { ...options, action: 'clear' });\n  }\n\n  /**\n   * Handle clear button click\n   * Clears the field and dispatches event\n   */\n  protected onClear(): void {\n    this.clear({ silent: false });\n  }\n\n  /**\n   * Handle reset button click\n   * Resets to default value and dispatches event\n   */\n  protected onReset(): void {\n    this.reset(undefined, { silent: false });\n  }\n}\n\nexport default AeicoField;\nexport type AeicoFieldProps = InferProps<typeof AeicoField>;\n"],"names":["AeicoComponent","tags","t"],"mappings":";;;;;;;AAkBA,MAAM,mBAAoCA,eAAAA,eAAe;AAAA,EAAzD;AAAA;AA0BY;AAAA;AAAA;AAAA;AAAA,wCAAoC;AAEpC,oCAAqC;AACrC,oCAAqC;AAE5B,yCAAgB,MACjC,KAAK,SAAS,KAAK,YAAY,EAAE,QAAQ,OAAO,QAAQ,SAAA,CAAU;AAEjD,wCAAe,MAAM,KAAK,QAAA;AAC1B,wCAAe,MAAM,KAAK,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAe7C,oBAAoB;AAClB,UAAM,kBAAA;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,uBAAuB;AACrB,UAAM,qBAAA;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA,EAMU,oBAAoB,QAAiB,OAAO;AACpD,SAAK,kBAAkB,KAAK;AAC5B,SAAK,kBAAkB,KAAK;AAAA,EAC9B;AAAA,EAEU,kBAAkB,QAAiB,OAAO;AAClD,UAAM,EAAE,WAAWC,MAAAA;AAEnB,QAAI,SAAS,KAAK,YAAY;AAC5B,WAAK,WAAW,OAAO;AAAA,QACrB,WAAW;AAAA,QACX,aAAa,KAAK,aAAa;AAAA,QAC/B,OAAOC,cAAAA,EAAE,iBAAiB,GAAG;AAAA,QAC7B,UAAU,KAAK;AAAA,MAAA,CAChB;AAAA,IACH;AAAA,EACF;AAAA,EAEU,kBAAkB,QAAiB,OAAO;AAClD,UAAM,EAAE,WAAWD,MAAAA;AAEnB,QAAI,SAAS,KAAK,WAAW;AAC3B,WAAK,WAAW,OAAO;AAAA,QACrB,WAAW;AAAA,QACX,aAAa,KAAK,aAAa;AAAA,QAC/B,OAAOC,cAAAA,EAAE,iBAAiB,GAAG;AAAA,QAC7B,UAAU,KAAK;AAAA,MAAA,CAChB;AAAA,IACH;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKU,kBAAkB,UAAmB;AAC7C,QAAI,KAAK,cAAc;AACpB,WAAK,aAAsD,WAAW,QAAQ,QAAQ;AAAA,IACzF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAe;AAAA,EAEf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASU,WAAgB;;AACxB,aAAO,UAAK,iBAAL,mBAAmB,UAAS;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQU,WAAW,QAAmB;AAAA,EAExC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWU,gBAAgB,OAAY,UAAe,QAA0C;AAC7F,WAAO,EAAE,OAAO,UAAU,OAAA;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUU,SAAS,OAAY,SAA4D;AACzF,UAAM,WAAW,KAAK,SAAA;AAGtB,SAAK,QAAQ;AAGb,SAAK,WAAW,KAAK;AAGrB,SAAI,mCAAS,YAAW,OAAO;AAC7B,YAAM,UAAU,KAAK,gBAAgB,OAAO,UAAU,QAAQ,UAAU,QAAQ;AAChF,WAAK,KAAK,UAAU,EAAE,QAAQ,SAAS;AAAA,IACzC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQO,MAAM,OAAa,SAAsC;AAC9D,UAAM,aAAa,UAAU,SAAY,QAAQ,KAAK;AACtD,SAAK,SAAS,YAAY,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOO,MAAM,SAAsC;AACjD,SAAK,SAAS,IAAI,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMU,UAAgB;AACxB,SAAK,MAAM,EAAE,QAAQ,MAAA,CAAO;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMU,UAAgB;AACxB,SAAK,MAAM,QAAW,EAAE,QAAQ,OAAO;AAAA,EACzC;AACF;AAAA;AAAA;AAAA;AA1ME,cAJI,YAIG,SAAe;AAAA,EACpB,OAAO,EAAE,MAAM,OAAA;AAAA,EACf,cAAc,EAAE,MAAM,OAAA;AAAA,EACtB,YAAY,EAAE,MAAM,QAAA;AAAA,EACpB,WAAW,EAAE,MAAM,OAAA;AAAA,EACnB,WAAW,EAAE,MAAM,QAAA;AAAA,EACnB,WAAW,EAAE,MAAM,OAAA;AAAA,EACnB,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,UAAU,EAAE,MAAM,QAAA;AAAQ;AAAA;AAAA;AAAA;AAM5B,cAlBI,YAkBG,YAAqB;AAAA,EAC1B,UAAU;AAAA;;"}

package/dist/chunks/aeico-field.js

@@ -1,180 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { tags } from "aeico";
-import { A as AeicoComponent } from "./aeico-component.js";
-import { t } from "aeico-localize";
-class AeicoField extends AeicoComponent {
-  constructor() {
-    super(...arguments);
-    /**
-     * The underlying form control element (input, select, etc.)
-     * Subclasses should set this to their specific element
-     */
-    __publicField(this, "fieldElement", null);
-    __publicField(this, "resetBtn", null);
-    __publicField(this, "clearBtn", null);
-    __publicField(this, "boundOnChange", () => this.setValue(this.getValue(), { silent: false, action: "change" }));
-    __publicField(this, "boundOnReset", () => this.onReset());
-    __publicField(this, "boundOnClear", () => this.onClear());
-  }
-  /**
-   * Lifecycle: Component connected to DOM
-   */
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  /**
-   * Lifecycle: Component disconnected from DOM
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-  }
-  /**
-   * Render action buttons (clear/reset) using this.builder.
-   * Must be called from within a build() callback.
-   */
-  renderActionButtons(force = false) {
-    this.renderClearButton(force);
-    this.renderResetButton(force);
-  }
-  renderResetButton(force = false) {
-    const { button } = tags;
-    if (force || this.resettable) {
-      this.resetBtn = button({
-        className: "reset-btn",
-        textContent: this.resetText || "↺",
-        title: t("buttons.reset", "↺"),
-        "@click": this.boundOnReset
-      });
-    }
-  }
-  renderClearButton(force = false) {
-    const { button } = tags;
-    if (force || this.clearable) {
-      this.clearBtn = button({
-        className: "clear-btn",
-        textContent: this.clearText || "✕",
-        title: t("buttons.clear", "✕"),
-        "@click": this.boundOnClear
-      });
-    }
-  }
-  /**
-   * Watcher for disabled property
-   */
-  onDisabledChanged(newValue) {
-    if (this.fieldElement) {
-      this.fieldElement.disabled = Boolean(newValue);
-    }
-  }
-  /**
-   * Render the field component
-   * Override in subclass to provide custom rendering
-   */
-  render() {
-  }
-  /**
-   * Get current value from the field element
-   * Default implementation returns the value property of fieldElement
-   * Override in subclasses if needed (e.g., checkbox uses checked instead of value)
-   *
-   * @returns Current field value
-   */
-  getValue() {
-    var _a;
-    return ((_a = this.fieldElement) == null ? void 0 : _a.value) || "";
-  }
-  /**
-   * Write value to the underlying UI element and sync props
-   * Subclasses must override this to update their specific UI element
-   *
-   * @param _value New value to write to the element
-   */
-  writeValue(_value) {
-  }
-  /**
-   * Get event payload for change events
-   * Override in subclasses to customize event data (e.g., { checked, oldChecked } for checkbox)
-   *
-   * @param value New value
-   * @param oldValue Previous value
-   * @param action Action type
-   * @returns Event payload object
-   */
-  getEventPayload(value, oldValue, action) {
-    return { value, oldValue, action };
-  }
-  /**
-   * Update field value programmatically (internal method)
-   * Subclasses should provide type-safe public wrappers (e.g., change() method)
-   *
-   * @param value New value
-   * @param options.silent If true, won't emit change event (default: true)
-   * @param options.action Action type for the event (default: 'change')
-   */
-  setValue(value, options) {
-    const oldValue = this.getValue();
-    this.value = value;
-    this.writeValue(value);
-    if ((options == null ? void 0 : options.silent) === false) {
-      const payload = this.getEventPayload(value, oldValue, options.action || "change");
-      this.emit("change", { detail: payload });
-    }
-  }
-  /**
-   * Reset field to specified value or default value
-   *
-   * @param value Value to reset to, defaults to defaultValue prop
-   * @param options.silent If false, will emit reset event (default: true)
-   */
-  reset(value, options) {
-    const resetValue = value !== void 0 ? value : this.defaultValue;
-    this.setValue(resetValue, { ...options, action: "reset" });
-  }
-  /**
-   * Clear the field value
-   *
-   * @param options.silent If false, will emit clear event (default: true)
-   */
-  clear(options) {
-    this.setValue("", { ...options, action: "clear" });
-  }
-  /**
-   * Handle clear button click
-   * Clears the field and dispatches event
-   */
-  onClear() {
-    this.clear({ silent: false });
-  }
-  /**
-   * Handle reset button click
-   * Resets to default value and dispatches event
-   */
-  onReset() {
-    this.reset(void 0, { silent: false });
-  }
-}
-/**
- * Define base field properties (extends AeicoElement properties)
- */
-__publicField(AeicoField, "props", {
-  value: { type: String },
-  defaultValue: { type: String },
-  resettable: { type: Boolean },
-  resetText: { type: String },
-  clearable: { type: Boolean },
-  clearText: { type: String },
-  size: { type: String },
-  disabled: { type: Boolean }
-});
-/**
- * Property watchers
- */
-__publicField(AeicoField, "watchers", {
-  disabled: "onDisabledChanged"
-});
-export {
-  AeicoField as A
-};
-//# sourceMappingURL=aeico-field.js.map

package/dist/chunks/aeico-field.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"aeico-field.js","sources":["../../src/aeico-field.ts"],"sourcesContent":["import type { InferProps, Props, Watchers } from 'aeico';\nimport { tags } from 'aeico';\nimport AeicoComponent from './aeico-component';\nimport { t } from 'aeico-localize';\n\nexport type FieldAction = 'clear' | 'reset' | 'change';\nexport type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\n/**\n * Base class for form field components\n *\n * Provides common functionality for field components including:\n * - Theme support\n * - i18n integration (via Localizable mixin)\n * - Reset button management\n * - Value management\n * - Common configuration handling\n */\nclass AeicoField<TValue = string> extends AeicoComponent {\n  /**\n   * Define base field properties (extends AeicoElement properties)\n   */\n  static props: Props = {\n    value: { type: String },\n    defaultValue: { type: String },\n    resettable: { type: Boolean },\n    resetText: { type: String },\n    clearable: { type: Boolean },\n    clearText: { type: String },\n    size: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  /**\n   * Property watchers\n   */\n  static watchers: Watchers = {\n    disabled: 'onDisabledChanged',\n  };\n\n  /**\n   * The underlying form control element (input, select, etc.)\n   * Subclasses should set this to their specific element\n   */\n  protected fieldElement: FieldElement | null = null;\n\n  protected resetBtn: HTMLButtonElement | null = null;\n  protected clearBtn: HTMLButtonElement | null = null;\n\n  protected readonly boundOnChange = () =>\n    this.setValue(this.getValue(), { silent: false, action: 'change' });\n\n  protected readonly boundOnReset = () => this.onReset();\n  protected readonly boundOnClear = () => this.onClear();\n\n  // Declare reactive properties for TypeScript\n  declare value?: TValue;\n  declare defaultValue?: TValue | string;\n  declare resettable?: boolean;\n  declare resetText?: string;\n  declare clearable?: boolean;\n  declare clearText?: string;\n  declare size?: string;\n  declare disabled?: boolean;\n\n  /**\n   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  /**\n   * Lifecycle: Component disconnected from DOM\n   */\n  disconnectedCallback() {\n    super.disconnectedCallback();\n  }\n\n  /**\n   * Render action buttons (clear/reset) using this.builder.\n   * Must be called from within a build() callback.\n   */\n  protected renderActionButtons(force: boolean = false) {\n    this.renderClearButton(force);\n    this.renderResetButton(force);\n  }\n\n  protected renderResetButton(force: boolean = false) {\n    const { button } = tags;\n\n    if (force || this.resettable) {\n      this.resetBtn = button({\n        className: 'reset-btn',\n        textContent: this.resetText || '↺',\n        title: t('buttons.reset', '↺'),\n        '@click': this.boundOnReset,\n      });\n    }\n  }\n\n  protected renderClearButton(force: boolean = false) {\n    const { button } = tags;\n\n    if (force || this.clearable) {\n      this.clearBtn = button({\n        className: 'clear-btn',\n        textContent: this.clearText || '✕',\n        title: t('buttons.clear', '✕'),\n        '@click': this.boundOnClear,\n      });\n    }\n  }\n\n  /**\n   * Watcher for disabled property\n   */\n  protected onDisabledChanged(newValue: boolean) {\n    if (this.fieldElement) {\n      (this.fieldElement as HTMLInputElement | HTMLSelectElement).disabled = Boolean(newValue);\n    }\n  }\n\n  /**\n   * Render the field component\n   * Override in subclass to provide custom rendering\n   */\n  render(): void {\n    // Default implementation - subclasses can override\n  }\n\n  /**\n   * Get current value from the field element\n   * Default implementation returns the value property of fieldElement\n   * Override in subclasses if needed (e.g., checkbox uses checked instead of value)\n   *\n   * @returns Current field value\n   */\n  protected getValue(): any {\n    return this.fieldElement?.value || '';\n  }\n\n  /**\n   * Write value to the underlying UI element and sync props\n   * Subclasses must override this to update their specific UI element\n   *\n   * @param _value New value to write to the element\n   */\n  protected writeValue(_value: any): void {\n    // Base implementation - subclasses override\n  }\n\n  /**\n   * Get event payload for change events\n   * Override in subclasses to customize event data (e.g., { checked, oldChecked } for checkbox)\n   *\n   * @param value New value\n   * @param oldValue Previous value\n   * @param action Action type\n   * @returns Event payload object\n   */\n  protected getEventPayload(value: any, oldValue: any, action: FieldAction): Record<string, any> {\n    return { value, oldValue, action };\n  }\n\n  /**\n   * Update field value programmatically (internal method)\n   * Subclasses should provide type-safe public wrappers (e.g., change() method)\n   *\n   * @param value New value\n   * @param options.silent If true, won't emit change event (default: true)\n   * @param options.action Action type for the event (default: 'change')\n   */\n  protected setValue(value: any, options?: { silent?: boolean; action?: FieldAction }): void {\n    const oldValue = this.getValue();\n\n    // Update property value\n    this.value = value;\n\n    // Write to UI element (DOM only)\n    this.writeValue(value);\n\n    // Emit event if not silent\n    if (options?.silent === false) {\n      const payload = this.getEventPayload(value, oldValue, options.action || 'change');\n      this.emit('change', { detail: payload });\n    }\n  }\n\n  /**\n   * Reset field to specified value or default value\n   *\n   * @param value Value to reset to, defaults to defaultValue prop\n   * @param options.silent If false, will emit reset event (default: true)\n   */\n  public reset(value?: any, options?: { silent?: boolean }): void {\n    const resetValue = value !== undefined ? value : this.defaultValue;\n    this.setValue(resetValue, { ...options, action: 'reset' });\n  }\n\n  /**\n   * Clear the field value\n   *\n   * @param options.silent If false, will emit clear event (default: true)\n   */\n  public clear(options?: { silent?: boolean }): void {\n    this.setValue('', { ...options, action: 'clear' });\n  }\n\n  /**\n   * Handle clear button click\n   * Clears the field and dispatches event\n   */\n  protected onClear(): void {\n    this.clear({ silent: false });\n  }\n\n  /**\n   * Handle reset button click\n   * Resets to default value and dispatches event\n   */\n  protected onReset(): void {\n    this.reset(undefined, { silent: false });\n  }\n}\n\nexport default AeicoField;\nexport type AeicoFieldProps = InferProps<typeof AeicoField>;\n"],"names":[],"mappings":"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"}