aeico-components 0.1.4 → 0.1.6

package/src/menu/menu-item.ts

@@ -0,0 +1,315 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import { html, prop } from 'aeico';
+import style from '../styles/components/menu-item.css?inline';
+import variables from '../styles/variables.css?inline';
+import type {
+  MenuMode,
+  MenuOrientation,
+  MenuTrigger,
+  ParentMenuLike,
+  MenuIconPlacement,
+} from './defines';
+
+/**
+ * Menu item — used as a direct child of `<ae-menu>` or nested inside another
+ * `<ae-menu-item>` to create a two-level submenu.
+ *
+ * - **Leaf item**: omit `label`; slot contains the item text.
+ * - **Parent item**: set `label` to the trigger text; slot children are
+ *   `<ae-menu-item>` elements that appear in the submenu panel/section.
+ *
+ * **Slots (parent items only)**
+ * - `expand`  — icon shown when the submenu is closed (default: CSS triangle).
+ * - `collapse` — icon shown when the submenu is open (default: rotated CSS triangle).
+ *
+ * @example
+ * ```html
+ * <ae-menu-item label="Settings" icon-placement="start">
+ *   <ae-icon name="chevron-right" slot="expand"></ae-icon>
+ *   <ae-icon name="chevron-down" slot="collapse"></ae-icon>
+ *   <ae-menu-item key="profile">Profile</ae-menu-item>
+ * </ae-menu-item>
+ * ```
+ */
+class MenuItem extends AeicoComponent {
+  static tagName = 'menu-item';
+
+  protected static styles = [variables, style];
+
+  @prop({ type: String })
+  accessor key: string | undefined;
+
+  @prop({ type: String })
+  accessor label: string | undefined;
+
+  @prop({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  @prop({ type: String })
+  accessor href: string | undefined;
+
+  @prop({ type: Boolean })
+  accessor selected: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor open: boolean = false;
+
+  @prop({ type: String })
+  accessor iconPlacement: MenuIconPlacement = 'end';
+
+  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;
+  private _closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // data-depth lets CSS apply depth-specific styles without JS
+    const depth = this.parentElement?.closest('ae-menu-item') ? 1 : 0;
+    this.dataset.depth = String(depth);
+
+    // Hover listeners — check mode/trigger at runtime
+    this.listen('mouseenter', this._handleMouseEnter);
+    this.listen('mouseleave', this._handleMouseLeave);
+
+    // Outside-click to close flyout panel (not applicable in inline mode)
+    this._outsideClickHandler = (e: MouseEvent) => {
+      if (!this.open) return;
+      if (this._mode === 'inline') return;
+      if (!e.composedPath().includes(this)) this.open = false;
+    };
+
+    document.addEventListener('click', this._outsideClickHandler);
+
+    // Close own submenu when a leaf inside it is selected (flyout)
+    this.listen('_menu-item-select', this._handleChildSelect as EventListener);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._outsideClickHandler) {
+      document.removeEventListener('click', this._outsideClickHandler);
+      this._outsideClickHandler = null;
+    }
+    if (this._closeTimer !== null) {
+      clearTimeout(this._closeTimer);
+      this._closeTimer = null;
+    }
+  }
+
+  private get _parentMenu(): ParentMenuLike | null {
+    return this.closest<ParentMenuLike>('ae-menu');
+  }
+
+  private get _mode(): MenuMode {
+    return this._parentMenu?.mode ?? 'flyout';
+  }
+
+  private get _orientation(): MenuOrientation {
+    return this._parentMenu?.orientation ?? 'horizontal';
+  }
+
+  private get _trigger(): MenuTrigger {
+    return this._parentMenu?.trigger ?? 'click';
+  }
+
+  private get _isParent(): boolean {
+    return this.label != null && this.label !== '';
+  }
+
+  /** Compute flyout panel placement based on depth and parent orientation. */
+  private get _panelPlacement(): 'bottom' | 'right' {
+    const isNested = !!this.parentElement?.closest('ae-menu-item');
+    if (!isNested && this._orientation === 'horizontal') return 'bottom';
+    return 'right';
+  }
+
+  private _isHoverTrigger(): boolean {
+    return this._isParent && this._mode === 'flyout' && this._trigger === 'hover';
+  }
+
+  private _handleMouseEnter = (): void => {
+    if (!this._isHoverTrigger()) return;
+    if (this._closeTimer !== null) {
+      clearTimeout(this._closeTimer);
+      this._closeTimer = null;
+    }
+    this.open = true;
+  };
+
+  private _handleMouseLeave = (): void => {
+    if (!this._isHoverTrigger()) return;
+    this._closeTimer = setTimeout(() => {
+      this.open = false;
+      this._closeTimer = null;
+    }, 150);
+  };
+
+  private _handleParentClick = (): void => {
+    if (this.disabled) return;
+    const mode = this._mode;
+    const trigger = this._trigger;
+    // In hover mode, click should still toggle (accessibility)
+    if (mode === 'flyout' && trigger === 'hover') {
+      this.open = !this.open;
+      return;
+    }
+    this.open = !this.open;
+  };
+
+  private _handleLeafClick = (e: Event): void => {
+    if (this.disabled) {
+      e.preventDefault();
+      return;
+    }
+    const path = this._buildKeyPath();
+    const label = this.textContent?.trim() ?? '';
+    this.dispatchEvent(
+      new CustomEvent('_menu-item-select', {
+        bubbles: true,
+        composed: true,
+        detail: { key: this.key ?? '', label, keyPath: path },
+      }),
+    );
+  };
+
+  private _handleChildSelect = (): void => {
+    // Close flyout panel after a child leaf is selected
+    if (this._mode === 'flyout') {
+      this.open = false;
+    }
+  };
+
+  private _handleKeydown = (e: KeyboardEvent): void => {
+    if (e.key === 'Escape' && this.open) {
+      e.stopPropagation();
+      this.open = false;
+    }
+  };
+
+  private _buildKeyPath(): string[] {
+    const path: string[] = [];
+    if (this.key) path.unshift(this.key);
+    let el: Element | null = this.parentElement;
+    while (el) {
+      const tag = el.tagName.toLowerCase();
+      if (tag === 'ae-menu-item') {
+        const k = (el as MenuItem).key;
+        if (k) path.unshift(k);
+      } else if (tag === 'ae-menu') {
+        break;
+      }
+      el = el.parentElement;
+    }
+    return path;
+  }
+
+  protected render() {
+    const mode = this._mode;
+    const panelPlacement = this._panelPlacement;
+    const isParent = this._isParent;
+    const isInline = mode === 'inline';
+    // Arrow direction: inline always shows ► (rotates to ▼ on open)
+    // flyout-bottom shows ▼; flyout-right shows ►
+    const arrowDir = !isInline && panelPlacement === 'bottom' ? 'bottom' : 'right';
+    // Leaf items inside a submenu panel (depth > 0) need different padding
+    const isNested = !!this.parentElement?.closest('ae-menu-item');
+
+    return html(({ div, button, a, span, slot }) => {
+      if (isParent) {
+        div({ className: 'item-wrapper' }, () => {
+          button(
+            {
+              type: 'button',
+              className: { item: true, 'item--parent': true, 'item--open': this.open },
+              disabled: this.disabled,
+              'aria-haspopup': 'menu',
+              'aria-expanded': String(this.open),
+              '@click': this._handleParentClick,
+              '@keydown': this._handleKeydown,
+            },
+            () => {
+              span({ text: this.label });
+              slot({ name: 'expand' }, () => {
+                span({ className: `item-arrow item-arrow--${arrowDir}`, 'aria-hidden': 'true' });
+              });
+              slot({ name: 'collapse' }, () => {
+                span({ className: `item-arrow item-arrow--${arrowDir}`, 'aria-hidden': 'true' });
+              });
+            },
+          );
+
+          if (isInline) {
+            div(
+              {
+                className: { 'submenu-inline': true, open: this.open },
+                role: 'menu',
+              },
+              () => {
+                slot();
+              },
+            );
+          } else {
+            div(
+              {
+                className: {
+                  'submenu-panel': true,
+                  [`placement-${panelPlacement}`]: true,
+                  open: this.open,
+                },
+                role: 'menu',
+              },
+              () => {
+                slot();
+              },
+            );
+          }
+        });
+      } else {
+        // Leaf item
+        const sharedProps = {
+          className: { item: true, 'item--leaf-in-panel': isNested },
+          role: 'menuitem',
+          '@click': this._handleLeafClick,
+          '@keydown': this._handleKeydown,
+        };
+
+        if (this.href) {
+          a(
+            {
+              ...sharedProps,
+              href: this.disabled ? undefined : this.href,
+              'aria-disabled': this.disabled ? 'true' : undefined,
+            },
+            () => {
+              slot();
+            },
+          );
+        } else {
+          button(
+            {
+              ...sharedProps,
+              type: 'button',
+              disabled: this.disabled,
+            },
+            () => {
+              slot();
+            },
+          );
+        }
+      }
+    });
+  }
+}
+
+MenuItem.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-menu-item': MenuItem;
+  }
+}
+
+export default MenuItem;
+export type MenuItemProps = InferProps<typeof MenuItem>;
+export type { MenuIconPlacement };

package/src/menu/menu.ts

@@ -0,0 +1,81 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import { html, prop } from 'aeico';
+import style from '../styles/components/menu.css?inline';
+import variables from '../styles/variables.css?inline';
+import type { MenuMode, MenuOrientation, MenuSelectDetail, MenuTrigger } from './defines';
+// Ensure ae-menu-item is registered when this module is used
+import './menu-item';
+
+/**
+ * Menu navigation component. Renders a horizontal or vertical menu with
+ * optional two-level flyout or inline (accordion) submenus.
+ *
+ * Two modes:
+ * - `flyout` (default) — submenus open as floating panels (like a nav bar or
+ *   context menu).
+ * - `inline` — submenus expand in-place (accordion-style sidebar).
+ *
+ * Emits:
+ * - `select` — `{ detail: { key, label, keyPath } }` when a leaf item is clicked.
+ */
+class Menu extends AeicoComponent {
+  static tagName = 'menu';
+
+  protected static styles = [variables, style];
+
+  @prop({ type: String })
+  accessor mode: MenuMode = 'flyout';
+
+  @prop({ type: String })
+  accessor orientation: MenuOrientation = 'horizontal';
+
+  @prop({ type: String })
+  accessor trigger: MenuTrigger = 'click';
+
+  @prop({ type: String })
+  accessor selectedKey: string | undefined;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen('_menu-item-select', this._handleItemSelect as EventListener);
+  }
+
+  private _handleItemSelect = (e: CustomEvent<MenuSelectDetail>): void => {
+    const { key, label, keyPath } = e.detail;
+    // Update visual selection on all leaf items
+    this.querySelectorAll('ae-menu-item').forEach((el) => {
+      const item = el;
+      item.selected = item.key === key && !item.label; // only leaf items
+    });
+    this.selectedKey = key;
+    this.emit('select', { detail: { key, label, keyPath } });
+  };
+
+  protected render() {
+    const isHorizontal = this.orientation === 'horizontal';
+    return html(({ div, slot }) => {
+      div(
+        {
+          className: { 'menu-list': true, 'menu-list--horizontal': isHorizontal },
+          role: isHorizontal ? 'menubar' : 'menu',
+          'aria-orientation': this.orientation,
+        },
+        () => {
+          slot();
+        },
+      );
+    });
+  }
+}
+
+Menu.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-menu': Menu;
+  }
+}
+
+export default Menu;
+export type MenuProps = InferProps<typeof Menu>;

package/src/navbar/navbar.ts

@@ -74,8 +74,6 @@ class Navbar extends AeicoComponent {
 
   connectedCallback() {
     super.connectedCallback();
-    // Close menu when a nav link is clicked on mobile
-    this.listen('click', this._handleInnerClick);
     // Close menu when clicking outside the navbar
     this._outsideClickHandler = (e: MouseEvent) => {
       // Event retargeting in shadow DOM means e.target is the host element
@@ -119,7 +117,7 @@ class Navbar extends AeicoComponent {
 
   protected render() {
     return html(({ div, nav, button, span, slot }) => {
-      div({ class: 'inner' }, () => {
+      div({ class: 'inner', '@click': this._handleInnerClick }, () => {
         div({ part: 'brand' }, () => {
           slot({ name: 'brand' });
         });

package/src/number-input/index.ts

@@ -0,0 +1,2 @@
+export { default, default as NumberInput } from './number-input';
+export type { NumberInputProps } from './number-input';

package/src/number-input/number-input.ts

@@ -0,0 +1,137 @@
+import AeicoField from '../aeico-field';
+import type { InferProps, Props } from 'aeico';
+import { html } from 'aeico';
+import variables from '../styles/variables.css?inline';
+import sizeCSS from '../styles/size.css?inline';
+import fieldLabelCSS from '../styles/components/field-label.css?inline';
+import actionButtonCSS from '../styles/components/action-button.css?inline';
+import style from '../styles/components/number-input.css?inline';
+
+class NumberInput extends AeicoField<number> {
+  protected fieldElement: HTMLInputElement | null = null;
+
+  static tagName = 'number-input';
+
+  static props: Props = {
+    placeholder: { type: String },
+    min: { type: Number },
+    max: { type: Number },
+    step: { type: Number },
+    controls: { type: Boolean },
+  };
+
+  declare placeholder?: string;
+  declare min?: number;
+  declare max?: number;
+  declare step?: number;
+  declare controls?: boolean;
+
+  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];
+
+  render() {
+    return html(({ div, input, button }) => {
+      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) : undefined,
+          max: this.max != null ? String(this.max) : undefined,
+          step: this.step != null ? String(this.step) : undefined,
+          '@input': this.boundOnChange,
+        });
+
+        if (this.controls) {
+          div({ className: 'number-controls' }, () => {
+            button({
+              className: 'number-btn number-btn-increment',
+              textContent: '+',
+              disabled: Boolean(this.disabled),
+              '@click': this.boundOnIncrement,
+            });
+            button({
+              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);
+      }
+    });
+  }
+
+  protected readonly 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' });
+  };
+
+  protected readonly 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' });
+  };
+
+  /**
+   * Get current value as number
+   */
+  protected getValue(): number {
+    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)
+   */
+  protected writeValue(value: number): void {
+    if (this.fieldElement) {
+      this.fieldElement.value = value != null ? String(value) : '';
+    }
+  }
+
+  /**
+   * Get event payload for change events
+   */
+  protected getEventPayload(
+    value: number,
+    oldValue: number,
+    action: import('../aeico-field').FieldAction,
+  ): Record<string, unknown> {
+    return { value, oldValue, action };
+  }
+}
+
+NumberInput.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-number-input': NumberInput;
+  }
+}
+
+export default NumberInput;
+export type NumberInputProps = InferProps<typeof NumberInput>;

package/src/pagination/defines.ts

@@ -0,0 +1,2 @@
+export type PaginationSize = 'xs' | 'sm' | 'md' | 'lg';
+export type PaginationVariant = 'borderless' | 'link';

package/src/pagination/index.ts

@@ -0,0 +1,3 @@
+export { default, default as Pagination } from './pagination';
+export type { PaginationProps } from './pagination';
+export type { PaginationSize, PaginationVariant } from './defines';