aeico-components 0.1.5 → 0.1.6

package/dist/index.cjs

@@ -1,6 +1,10 @@
 "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);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const textInput = require("./chunks/text-input.cjs");
+const textarea = require("./chunks/textarea.cjs");
 const select = require("./chunks/select.cjs");
 const slider = require("./chunks/slider.cjs");
 const checkbox = require("./chunks/checkbox.cjs");
@@ -8,118 +12,190 @@ const radio = require("./chunks/radio.cjs");
 const _switch = require("./chunks/switch.cjs");
 const breadcrumbItem = require("./chunks/breadcrumb-item.cjs");
 const button = require("./chunks/button.cjs");
+const copyButton = require("./chunks/copy-button.cjs");
 const dropdownButton = require("./chunks/dropdown-button.cjs");
 const buttonGroup = require("./chunks/button-group.cjs");
 const badge = require("./chunks/badge.cjs");
 const tag = require("./chunks/tag.cjs");
 const alert = require("./chunks/alert.cjs");
 const dialog = require("./chunks/dialog.cjs");
+const drawer = require("./chunks/drawer.cjs");
 const icon = require("./chunks/icon.cjs");
 const iconButton = require("./chunks/icon-button.cjs");
 const tabPanel = require("./chunks/tab-panel.cjs");
 const divider = require("./chunks/divider.cjs");
 const card = require("./chunks/card.cjs");
 const navbar = require("./chunks/navbar.cjs");
+const spinner = require("./chunks/spinner.cjs");
 const detail = require("./chunks/detail.cjs");
-const aeico = require("aeico");
-const aeicoComponent = require("./chunks/aeico-component.cjs");
+const progressBar = require("./chunks/progress-bar.cjs");
+const menu = require("./chunks/menu.cjs");
+const tooltip = require("./chunks/tooltip.cjs");
+const pagination = require("./chunks/pagination.cjs");
+const tree = require("./chunks/tree.cjs");
 const variables = require("./chunks/variables.cjs");
-const color = require("./chunks/color.cjs");
-const style = ":host {\n  display: block;\n  --progress-height: 8px;\n  --color-solid: var(--color-primary);\n}\n\n.progress-track {\n  width: 100%;\n  height: var(--progress-height);\n  background: var(--border-subtle);\n  border-radius: calc(var(--progress-height) / 2);\n  overflow: hidden;\n}\n\n.progress-bar {\n  display: block;\n  height: 100%;\n  border-radius: inherit;\n  background: var(--progress-bar-color, var(--color-solid));\n  width: 0%;\n  transition: width 0.35s ease;\n  position: relative;\n}\n\n/* animated: shimmer sweep on top of the solid fill */\n:host([animated]) .progress-bar::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.35) 50%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: progress-shimmer 1.4s linear infinite;\n}\n\n@keyframes progress-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
-var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
-var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
-var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
-var __runInitializers = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
-    return __privateGet(this, extra);
-  }, set [name](x) {
-    return __privateSet(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
+const aeicoComponent = require("./chunks/aeico-component.cjs");
+const aeico = require("aeico");
+const actionButton = require("./chunks/action-button.cjs");
+const size = require("./chunks/size.cjs");
+const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout variables */\n  --input-field-gap: 4px;\n  \n  /* Input element variables */\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-border-radius: 2px;\n  --input-border-color: var(--border-subtle);\n  --input-border-color-hover: var(--border-default);\n  --input-border-color-focus: var(--border-focus);\n  --input-bg: var(--surface-base);\n  --input-bg-hover: var(--surface-raised);\n  --input-bg-focus: var(--surface-raised);\n  --input-color: var(--color-text-muted);\n  --input-placeholder-color: var(--color-text-disabled);\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: var(--input-border-radius);\n  background: var(--input-bg);\n  color: var(--input-color);\n  transition: var(--input-transition);\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\n/* Hide number spinner arrows in WebKit browsers */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput::placeholder {\n  color: var(--input-placeholder-color);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--input-border-color-focus);\n  background: var(--input-bg-focus);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--input-border-color-hover);\n  background: var(--input-bg-hover);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Number stepper controls (right side, integrated, horizontal) */\n.number-controls {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  margin-left: calc(-1 * var(--input-field-gap) - 1px);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;\n  overflow: hidden;\n  flex-shrink: 0;\n  transition: var(--input-transition);\n  background: var(--input-bg);\n  position: relative;\n  z-index: 1;\n  align-self: stretch;\n}\n\n.number-btn {\n  border: none;\n  background: transparent;\n  color: var(--input-color);\n  font-size: 0.875em;\n  line-height: 1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.5em;\n  transition: background 0.12s;\n}\n\n.number-btn:hover:not(:disabled) {\n  background: var(--input-bg-hover);\n}\n\n.number-btn:active:not(:disabled) {\n  background: var(--input-bg-focus);\n}\n\n.number-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.number-btn-increment {\n  border-right: var(--input-border-width) solid var(--input-border-color);\n}\n\n.input-container:has(input:focus) .number-controls {\n  border-color: var(--input-border-color-focus);\n}\n\n.input-container:has(input:hover:not(:focus)) .number-controls {\n  border-color: var(--input-border-color-hover);\n}\n\n:host(:has(.number-controls)) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n\n:host(:has(.action-controls)) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n\n.number-controls ~ .action-controls {\n  margin-left: calc(-1 * var(--input-field-gap) - 1px);\n}\n\n.input-container:has(.number-controls):has(.action-controls) .number-controls {\n  border-right: none;\n  border-radius: 0;\n}\n\n.input-container:has(.number-controls) ~ .action-controls,\n.input-container:has(.action-controls) .number-controls {\n  border-radius: 0;\n}\n\n.input-container:has(.number-controls) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n\n.input-container:has(.action-controls) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n\n:host([error]) input {\n  border-color: var(--field-error-color, var(--red));\n}\n\n:host([error]) input:hover:not(:focus),\n:host([error]) input:focus {\n  border-color: var(--field-error-color, var(--red));\n}\n";
+class NumberInput extends actionButton.AeicoField {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "fieldElement", null);
+    __publicField(this, "boundOnIncrement", () => {
+      const current = this.getValue() || 0;
+      const step = this.step ?? 1;
+      let next = current + step;
+      if (this.max != null && next > this.max) {
+        next = this.max;
+      }
+      this.setValue(next, { silent: false, action: "change" });
+    });
+    __publicField(this, "boundOnDecrement", () => {
+      const current = this.getValue() || 0;
+      const step = this.step ?? 1;
+      let next = current - step;
+      if (this.min != null && next < this.min) {
+        next = this.min;
+      }
+      this.setValue(next, { silent: false, action: "change" });
+    });
+  }
+  render() {
+    return aeico.html(({ div, input, button: button2 }) => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: "input-container field-body" }, () => {
+        this.fieldElement = input({
+          id,
+          type: "number",
+          placeholder: this.placeholder || "",
+          required: Boolean(this.required),
+          disabled: Boolean(this.disabled),
+          min: this.min != null ? String(this.min) : void 0,
+          max: this.max != null ? String(this.max) : void 0,
+          step: this.step != null ? String(this.step) : void 0,
+          "@input": this.boundOnChange
+        });
+        if (this.controls) {
+          div({ className: "number-controls" }, () => {
+            button2({
+              className: "number-btn number-btn-increment",
+              textContent: "+",
+              disabled: Boolean(this.disabled),
+              "@click": this.boundOnIncrement
+            });
+            button2({
+              className: "number-btn number-btn-decrement",
+              textContent: "-",
+              disabled: Boolean(this.disabled),
+              "@click": this.boundOnDecrement
+            });
+          });
+        }
+        this.renderActionButtons();
+      });
+      this.renderHelperText();
+      this.renderError();
+      if (this.fieldElement && this.value != null) {
+        this.fieldElement.value = String(this.value);
+      }
+    });
+  }
+  /**
+   * Get current value as number
+   */
+  getValue() {
+    if (!this.fieldElement) return 0;
+    const val = this.fieldElement.value;
+    if (val === "") return 0;
+    const num = parseFloat(val);
+    return isNaN(num) ? 0 : num;
+  }
+  /**
+   * Write value to the input element (DOM only)
+   */
+  writeValue(value) {
+    if (this.fieldElement) {
+      this.fieldElement.value = value != null ? String(value) : "";
     }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError("Object expected");
-    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
   }
-  return desc && __defProp(target, name, desc), target;
-};
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _animated_dec, _color_dec, _label_dec, _value_dec, _a, _init, _value, _label, _color, _animated;
-class ProgressBar extends (_a = aeicoComponent.AeicoComponent, _value_dec = [aeico.prop({ type: Number })], _label_dec = [aeico.prop({ type: String })], _color_dec = [aeico.prop({ type: String })], _animated_dec = [aeico.prop({ type: Boolean })], _a) {
+  /**
+   * Get event payload for change events
+   */
+  getEventPayload(value, oldValue, action) {
+    return { value, oldValue, action };
+  }
+}
+__publicField(NumberInput, "tagName", "number-input");
+__publicField(NumberInput, "props", {
+  placeholder: { type: String },
+  min: { type: Number },
+  max: { type: Number },
+  step: { type: Number },
+  controls: { type: Boolean }
+});
+__publicField(NumberInput, "styles", [variables.variables, size.sizeCSS, actionButton.fieldLabelCSS, actionButton.actionButtonCSS, style]);
+NumberInput.register();
+const detailGroupStyle = ":host {\n  display: block;\n}\n\n/* Raise hovered/focused item so its border shows above neighbours */\n::slotted(ae-detail:hover),\n::slotted(ae-detail:focus-within) {\n  position: relative;\n  z-index: 1;\n}\n";
+class DetailGroup extends aeicoComponent.AeicoComponent {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _value, __runInitializers(_init, 8, this, 0)), __runInitializers(_init, 11, this);
-    __privateAdd(this, _label, __runInitializers(_init, 12, this, "")), __runInitializers(_init, 15, this);
-    __privateAdd(this, _color, __runInitializers(_init, 16, this, "primary")), __runInitializers(_init, 19, this);
-    __privateAdd(this, _animated, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __publicField(this, "slotEl", null);
+    __publicField(this, "DETAIL_RADIUS", 6);
+    __publicField(this, "_handleOpen", (event) => {
+      if (this.multiple) return;
+      const opened = event.target;
+      this._getDetails().forEach((detail2) => {
+        if (detail2 !== opened) detail2.close();
+      });
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen("open", this._handleOpen);
+  }
+  _getDetails() {
+    if (!this.slotEl) return [];
+    return this.slotEl.assignedElements({ flatten: true }).filter(
+      (el) => el.tagName.toLowerCase() === "ae-detail"
+    );
+  }
+  _syncChildren() {
+    const details = this._getDetails();
+    const r = this.DETAIL_RADIUS;
+    details.forEach((detail2, i) => {
+      const isFirst = i === 0;
+      const isLast = i === details.length - 1;
+      detail2.style.marginTop = isFirst ? "" : "-1px";
+      detail2.style.setProperty("--detail-r-tl", isFirst ? `${r}px` : "0");
+      detail2.style.setProperty("--detail-r-tr", isFirst ? `${r}px` : "0");
+      detail2.style.setProperty("--detail-r-br", isLast ? `${r}px` : "0");
+      detail2.style.setProperty("--detail-r-bl", isLast ? `${r}px` : "0");
+      if (this.variant !== void 0) detail2.variant = this.variant;
+      if (this.color !== void 0) detail2.color = this.color;
+    });
   }
   render() {
-    const clamped = Math.min(100, Math.max(0, this.value));
-    return aeico.html(({ div, span }) => {
-      div({ part: "base" }, () => {
-        div(
-          {
-            part: "track",
-            className: "progress-track",
-            role: "progressbar",
-            "aria-valuenow": String(clamped),
-            "aria-valuemin": "0",
-            "aria-valuemax": "100",
-            ...this.label ? { "aria-label": this.label } : {}
-          },
-          () => {
-            span({
-              part: "bar",
-              className: "progress-bar",
-              style: { width: `${clamped}%` }
-            });
-          }
-        );
+    return aeico.html(({ slot }) => {
+      this.slotEl = slot({
+        "@slotchange": () => this._syncChildren()
       });
+      this._syncChildren();
     });
   }
 }
-_init = __decoratorStart(_a);
-_value = /* @__PURE__ */ new WeakMap();
-_label = /* @__PURE__ */ new WeakMap();
-_color = /* @__PURE__ */ new WeakMap();
-_animated = /* @__PURE__ */ new WeakMap();
-__decorateElement(_init, 4, "value", _value_dec, ProgressBar, _value);
-__decorateElement(_init, 4, "label", _label_dec, ProgressBar, _label);
-__decorateElement(_init, 4, "color", _color_dec, ProgressBar, _color);
-__decorateElement(_init, 4, "animated", _animated_dec, ProgressBar, _animated);
-__decoratorMetadata(_init, ProgressBar);
-__publicField(ProgressBar, "tagName", "progress-bar");
-__publicField(ProgressBar, "styles", [variables.styleVariables, color.colorCSS, style]);
-ProgressBar.register();
+__publicField(DetailGroup, "tagName", "detail-group");
+__publicField(DetailGroup, "props", {
+  multiple: { type: Boolean },
+  variant: { type: String },
+  color: { type: String }
+});
+__publicField(DetailGroup, "styles", [variables.variables, detailGroupStyle]);
+DetailGroup.register();
 exports.TextInput = textInput.TextInput;
+exports.Textarea = textarea.Textarea;
 exports.Select = select.Select;
 exports.Slider = slider.Slider;
 exports.Checkbox = checkbox.Checkbox;
@@ -129,6 +205,7 @@ exports.Switch = _switch.Switch;
 exports.Breadcrumb = breadcrumbItem.Breadcrumb;
 exports.BreadcrumbItem = breadcrumbItem.BreadcrumbItem;
 exports.Button = button.Button;
+exports.CopyButton = copyButton.CopyButton;
 exports.Dropdown = dropdownButton.Dropdown;
 exports.DropdownButton = dropdownButton.DropdownButton;
 exports.DropdownItem = dropdownButton.DropdownItem;
@@ -137,6 +214,7 @@ exports.Badge = badge.Badge;
 exports.Tag = tag.Tag;
 exports.Alert = alert.Alert;
 exports.Dialog = dialog.Dialog;
+exports.Drawer = drawer.Drawer;
 exports.Icon = icon.Icon;
 exports.IconRegistry = icon.IconRegistry;
 exports.IconButton = iconButton.IconButton;
@@ -146,6 +224,15 @@ exports.Tabs = tabPanel.Tabs;
 exports.Divider = divider.Divider;
 exports.Card = card.Card;
 exports.Navbar = navbar.Navbar;
+exports.Spinner = spinner.Spinner;
 exports.Detail = detail.Detail;
-exports.ProgressBar = ProgressBar;
+exports.ProgressBar = progressBar.ProgressBar;
+exports.Menu = menu.Menu;
+exports.MenuItem = menu.MenuItem;
+exports.Tooltip = tooltip.Tooltip;
+exports.Pagination = pagination.Pagination;
+exports.Tree = tree.Tree;
+exports.TreeItem = tree.TreeItem;
+exports.DetailGroup = DetailGroup;
+exports.NumberInput = NumberInput;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/progress-bar/progress-bar.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport AeicoComponent from '../aeico-component';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/progress-bar.css?inline';\nimport type { ProgressBarColor } from './defines';\n\n/**\n * Progress bars show how far along an ongoing operation is as a horizontal fill.\n * Use them for file uploads, multi-step flows, or any task with measurable progress.\n *\n * @prop {number} value - Completion percentage, automatically clamped to 0–100.\n * @prop {string} label - Accessible label applied as `aria-label` on the track.\n * @prop {'default'|'primary'|'secondary'|'success'|'danger'|'warning'|'info'} color\n *   - Preset color variant driven by the shared color system.\n * @prop {boolean} animated - When set, overlays a shimmer sweep animation on the bar.\n *\n * @csspart base - The outermost wrapper `<div>`.\n * @csspart track - The background track `<div>`.\n * @csspart bar - The filled progress `<span>`.\n *\n * @cssproperty [--progress-height=8px] - Height of both the track and the bar.\n * @cssproperty [--progress-bar-color=var(--color-solid)] - Fill color of the bar.\n *   When set, takes precedence over the `color` prop entirely.\n */\nclass ProgressBar extends AeicoComponent {\n  static tagName = 'progress-bar';\n  protected static styles = [styleVariables, colorCSS, style];\n\n  @prop({ type: Number })\n  accessor value: number = 0;\n\n  @prop({ type: String })\n  accessor label: string = '';\n\n  @prop({ type: String })\n  accessor color: ProgressBarColor = 'primary';\n\n  @prop({ type: Boolean })\n  accessor animated: boolean = false;\n\n  protected render() {\n    const clamped = Math.min(100, Math.max(0, this.value));\n\n    return html(({ div, span }) => {\n      div({ part: 'base' }, () => {\n        div(\n          {\n            part: 'track',\n            className: 'progress-track',\n            role: 'progressbar',\n            'aria-valuenow': String(clamped),\n            'aria-valuemin': '0',\n            'aria-valuemax': '100',\n            ...(this.label ? { 'aria-label': this.label } : {}),\n          },\n          () => {\n            span({\n              part: 'bar',\n              className: 'progress-bar',\n              style: { width: `${clamped}%` },\n            });\n          },\n        );\n      });\n    });\n  }\n}\n\nProgressBar.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-progress-bar': ProgressBar;\n  }\n}\n\nexport default ProgressBar;\nexport type ProgressBarProps = InferProps<typeof ProgressBar>;\n"],"names":["AeicoComponent","prop","html","styleVariables","colorCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,eAAA,YAAA,YAAA,YAAA,IAAA,OAAA,QAAA,QAAA,QAAA;AA0BA,MAAM,qBAAoB,KAAAA,eAAAA,gBAIxB,aAAA,CAACC,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,gBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,IAbC,IAAe;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAKE,iBAAA,MAAS,QAAgB,kBAAzB,OAAA,GAAA,MAAyB,CAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAgB,kBAAzB,OAAA,IAAA,MAAyB,EAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAA0B,kBAAnC,OAAA,IAAA,MAAmC,SAAA,CAAA,GAAnC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,UAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AAErD,WAAOC,WAAK,CAAC,EAAE,KAAK,WAAW;AAC7B,UAAI,EAAE,MAAM,OAAA,GAAU,MAAM;AAC1B;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,WAAW;AAAA,YACX,MAAM;AAAA,YACN,iBAAiB,OAAO,OAAO;AAAA,YAC/B,iBAAiB;AAAA,YACjB,iBAAiB;AAAA,YACjB,GAAI,KAAK,QAAQ,EAAE,cAAc,KAAK,MAAA,IAAU,CAAA;AAAA,UAAC;AAAA,UAEnD,MAAM;AACJ,iBAAK;AAAA,cACH,MAAM;AAAA,cACN,WAAW;AAAA,cACX,OAAO,EAAE,OAAO,GAAG,OAAO,IAAA;AAAA,YAAI,CAC/B;AAAA,UACH;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA1CA,QAAA,iBAAA,EAAA;AAKW,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AATT,kBAAA,OAAA,GAAS,SADT,YAJI,aAKK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YAPI,aAQK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YAVI,aAWK,MAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAbI,aAcK,SAAA;AAdX,oBAAA,OAAM,WAAA;AACJ,cADI,aACG,WAAU,cAAA;AACjB,cAFI,aAEa,UAAS,CAACC,UAAAA,gBAAgBC,MAAAA,UAAU,KAAK,CAAA;AA0C5D,YAAY,SAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/number-input/number-input.ts","../src/detail-group/detail-group.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport style from '../styles/components/number-input.css?inline';\n\nclass NumberInput extends AeicoField<number> {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'number-input';\n\n  static props: Props = {\n    placeholder: { type: String },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    controls: { type: Boolean },\n  };\n\n  declare placeholder?: string;\n  declare min?: number;\n  declare max?: number;\n  declare step?: number;\n  declare controls?: boolean;\n\n  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];\n\n  render() {\n    return html(({ div, input, button }) => {\n      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ className: 'input-container field-body' }, () => {\n        this.fieldElement = input({\n          id,\n          type: 'number',\n          placeholder: this.placeholder || '',\n          required: Boolean(this.required),\n          disabled: Boolean(this.disabled),\n          min: this.min != null ? String(this.min) : undefined,\n          max: this.max != null ? String(this.max) : undefined,\n          step: this.step != null ? String(this.step) : undefined,\n          '@input': this.boundOnChange,\n        });\n\n        if (this.controls) {\n          div({ className: 'number-controls' }, () => {\n            button({\n              className: 'number-btn number-btn-increment',\n              textContent: '+',\n              disabled: Boolean(this.disabled),\n              '@click': this.boundOnIncrement,\n            });\n            button({\n              className: 'number-btn number-btn-decrement',\n              textContent: '-',\n              disabled: Boolean(this.disabled),\n              '@click': this.boundOnDecrement,\n            });\n          });\n        }\n\n        this.renderActionButtons();\n      });\n      this.renderHelperText();\n      this.renderError();\n\n      if (this.fieldElement && this.value != null) {\n        this.fieldElement.value = String(this.value);\n      }\n    });\n  }\n\n  protected readonly boundOnIncrement = () => {\n    const current = this.getValue() || 0;\n    const step = this.step ?? 1;\n    let next = current + step;\n    if (this.max != null && next > this.max) {\n      next = this.max;\n    }\n    this.setValue(next, { silent: false, action: 'change' });\n  };\n\n  protected readonly boundOnDecrement = () => {\n    const current = this.getValue() || 0;\n    const step = this.step ?? 1;\n    let next = current - step;\n    if (this.min != null && next < this.min) {\n      next = this.min;\n    }\n    this.setValue(next, { silent: false, action: 'change' });\n  };\n\n  /**\n   * Get current value as number\n   */\n  protected getValue(): number {\n    if (!this.fieldElement) return 0;\n    const val = this.fieldElement.value;\n    if (val === '') return 0;\n    const num = parseFloat(val);\n    return isNaN(num) ? 0 : num;\n  }\n\n  /**\n   * Write value to the input element (DOM only)\n   */\n  protected writeValue(value: number): void {\n    if (this.fieldElement) {\n      this.fieldElement.value = value != null ? String(value) : '';\n    }\n  }\n\n  /**\n   * Get event payload for change events\n   */\n  protected getEventPayload(\n    value: number,\n    oldValue: number,\n    action: import('../aeico-field').FieldAction,\n  ): Record<string, unknown> {\n    return { value, oldValue, action };\n  }\n}\n\nNumberInput.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-number-input': NumberInput;\n  }\n}\n\nexport default NumberInput;\nexport type NumberInputProps = InferProps<typeof NumberInput>;\n","import type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport detailGroupStyle from '../styles/components/detail-group.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Detail from '../detail/detail';\nimport type { DetailColor, DetailVariant } from '../detail/defines';\n\n/**\n * DetailGroup component — wraps multiple `ae-detail` elements into an\n * accordion-style group. By default only one item can be open at a time;\n * set `multiple` to allow several items open simultaneously.\n *\n * @example\n * ```html\n * <ae-detail-group>\n *   <ae-detail summary=\"Section 1\">Content 1</ae-detail>\n *   <ae-detail summary=\"Section 2\">Content 2</ae-detail>\n *   <ae-detail summary=\"Section 3\">Content 3</ae-detail>\n * </ae-detail-group>\n * ```\n */\nclass DetailGroup extends AeicoComponent {\n  static tagName = 'detail-group';\n\n  static props: Props = {\n    multiple: { type: Boolean },\n    variant: { type: String },\n    color: { type: String },\n  };\n\n  protected static styles = [styleVariables, detailGroupStyle];\n\n  declare multiple?: boolean;\n  declare variant?: DetailVariant;\n  declare color?: DetailColor;\n\n  private slotEl: HTMLSlotElement | null = null;\n\n  private readonly DETAIL_RADIUS = 6;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('open', this._handleOpen);\n  }\n\n  private _getDetails(): Detail[] {\n    if (!this.slotEl) return [];\n    return (this.slotEl.assignedElements({ flatten: true }) as Detail[]).filter(\n      (el) => el.tagName.toLowerCase() === 'ae-detail',\n    );\n  }\n\n  private _syncChildren(): void {\n    const details = this._getDetails();\n    const r = this.DETAIL_RADIUS;\n\n    details.forEach((detail, i) => {\n      const isFirst = i === 0;\n      const isLast = i === details.length - 1;\n\n      // Collapse borders between adjacent items\n      detail.style.marginTop = isFirst ? '' : '-1px';\n\n      // Adjust per-corner radius so only the outer edges of the group keep it\n      detail.style.setProperty('--detail-r-tl', isFirst ? `${r}px` : '0');\n      detail.style.setProperty('--detail-r-tr', isFirst ? `${r}px` : '0');\n      detail.style.setProperty('--detail-r-br', isLast ? `${r}px` : '0');\n      detail.style.setProperty('--detail-r-bl', isLast ? `${r}px` : '0');\n\n      // Propagate variant / color only when explicitly set on the group\n      if (this.variant !== undefined) detail.variant = this.variant;\n      if (this.color !== undefined) detail.color = this.color;\n    });\n  }\n\n  private _handleOpen = (event: Event): void => {\n    if (this.multiple) return;\n    const opened = event.target as Element;\n    this._getDetails().forEach((detail) => {\n      if (detail !== opened) detail.close();\n    });\n  };\n\n  protected render() {\n    return html(({ slot }) => {\n      this.slotEl = slot({\n        '@slotchange': () => this._syncChildren(),\n      });\n      this._syncChildren();\n    });\n  }\n}\n\nDetailGroup.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-detail-group': DetailGroup;\n  }\n}\n\nexport default DetailGroup;\nexport type DetailGroupProps = InferProps<typeof DetailGroup>;\n"],"names":["AeicoField","html","button","variables","sizeCSS","fieldLabelCSS","actionButtonCSS","AeicoComponent","detail","styleVariables"],"mappings":"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"}