ezfw-core 1.0.93 → 1.0.95

package/components/EzIcon.ts

@@ -1,7 +1,8 @@
 import { EzBaseComponent, EzBaseComponentConfig } from './EzBaseComponent.js';
+import { getIcon } from './icon/icons.js';
 
-type IconType = 'solid' | 'regular' | 'brands' | 'light' | 'thin' | 'duotone';
-type IconSize = 'xxs' | 'xs' | 'sm' | 'lg' | 'xl' | '2x' | '3x' | '4x' | '5x';
+type IconStyle = 'outline' | 'filled';
+type IconSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2x' | '3x' | '4x' | '5x';
 
 const SEMANTIC_COLORS: Record<string, string> = {
     primary: 'var(--ez-primary)',
@@ -16,32 +17,47 @@ const SEMANTIC_COLORS: Record<string, string> = {
 };
 
 const SIZE_MAP: Record<string, string> = {
-    xxs: '0.65em',
-    xs: '0.75em',
-    sm: '0.875em',
-    lg: '1.25em',
-    xl: '1.5em',
-    '2x': '2em',
-    '3x': '3em',
-    '4x': '4em',
-    '5x': '5em'
+    xxs: '12px',
+    xs: '14px',
+    sm: '16px',
+    md: '20px',
+    lg: '24px',
+    xl: '28px',
+    '2x': '32px',
+    '3x': '40px',
+    '4x': '48px',
+    '5x': '56px'
 };
 
 export interface EzIconConfig extends EzBaseComponentConfig {
-    // FontAwesome
+    /** Tabler icon name (e.g., 'user', 'settings', 'home') */
+    icon?: string;
+
+    /** @deprecated Use 'icon' instead. FontAwesome icon name for backwards compatibility */
     fa?: string;
-    type?: IconType;
 
-    // Future: Material Icons, etc.
-    // mat?: string;
+    /** Icon style: 'outline' (default) or 'filled' */
+    variant?: IconStyle;
+
+    /** @deprecated Use 'variant' instead */
+    type?: string;
 
-    // Styling
+    /** Icon size */
     size?: IconSize | string;
+
+    /** Icon color (semantic or CSS value) */
     color?: string;
 
-    // Animations
+    /** Stroke width (1-3, default 2) */
+    stroke?: number;
+
+    /** Spin animation */
     spin?: boolean;
+
+    /** Pulse animation */
     pulse?: boolean;
+
+    /** @deprecated No longer supported */
     bounce?: boolean;
 }
 
@@ -54,36 +70,61 @@ export class EzIcon extends EzBaseComponent {
     }
 
     async render(): Promise<HTMLElement> {
-        const el = document.createElement('i');
-        const classes: string[] = [];
-
-        // FontAwesome icon
-        if (this.config.fa) {
-            const type = this.config.type || 'solid';
-            classes.push(`fa-${type}`);
-            classes.push(`fa-${this.config.fa}`);
+        const el = document.createElement('span');
+        el.classList.add('ez-icon');
+
+        // Store size config for dynamic icon binding updates
+        const size = this.config.size
+            ? (SIZE_MAP[this.config.size] || this.config.size)
+            : '1em';
+        el.dataset.ezIconSize = size;
+        if (this.config.color) {
+            el.dataset.ezIconColor = SEMANTIC_COLORS[this.config.color] || this.config.color;
         }
-
-        // Animations (FA classes)
-        if (this.config.spin) classes.push('fa-spin');
-        if (this.config.pulse) classes.push('fa-pulse');
-        if (this.config.bounce) classes.push('fa-bounce');
-
-        // Apply FA classes
-        if (classes.length > 0) {
-            el.classList.add(...classes);
+        if (this.config.stroke) {
+            el.dataset.ezIconStroke = String(this.config.stroke);
         }
 
-        // Size
-        if (this.config.size) {
-            const size = SIZE_MAP[this.config.size] || this.config.size;
-            el.style.fontSize = size;
+        const iconName = this.config.icon || this.config.fa;
+
+        if (iconName) {
+            // Get SVG content (synchronous - icons are pre-imported)
+            const svgContent = getIcon(iconName);
+            el.innerHTML = svgContent;
+
+            // Get the SVG element and apply styles
+            const svg = el.querySelector('svg');
+            if (svg) {
+                // Size
+                const size = this.config.size
+                    ? (SIZE_MAP[this.config.size] || this.config.size)
+                    : '1em';
+                svg.style.width = size;
+                svg.style.height = size;
+
+                // Color
+                if (this.config.color) {
+                    const color = SEMANTIC_COLORS[this.config.color] || this.config.color;
+                    svg.style.color = color;
+                }
+
+                // Stroke width
+                if (this.config.stroke) {
+                    svg.setAttribute('stroke-width', String(this.config.stroke));
+                }
+
+                // Ensure SVG inherits color
+                svg.style.display = 'inline-block';
+                svg.style.verticalAlign = 'middle';
+            }
         }
 
-        // Color
-        if (this.config.color) {
-            const color = SEMANTIC_COLORS[this.config.color] || this.config.color;
-            el.style.color = color;
+        // Animations
+        if (this.config.spin) {
+            el.classList.add('ez-icon-spin');
+        }
+        if (this.config.pulse) {
+            el.classList.add('ez-icon-pulse');
         }
 
         this.applyCls(el);

package/components/EzOutlet.ts

@@ -82,13 +82,9 @@ export class EzOutlet extends EzBaseComponent {
             const def = ez.get(view);
             const paramsChanged = JSON.stringify(this._currentParams) !== JSON.stringify(params);
 
-            const isTemplateBased = typeof def?.template === 'function';
-
-            if (isTemplateBased) {
-                if (!paramsChanged) {
-                    return;
-                }
-            } else if (def?.controller) {
+            // Prioritize onRouteChange if available - allows controller to handle param changes
+            // without re-rendering the entire view (better for SPAs)
+            if (def?.controller) {
                 const ctrl = await ez.getController(def.controller) as EzController | null;
                 if (ctrl?.onRouteChange) {
                     this._currentParams = params;
@@ -101,11 +97,11 @@ export class EzOutlet extends EzBaseComponent {
                 }
             }
 
+            // No onRouteChange handler - only re-render if params changed
             if (!paramsChanged) {
                 return;
             }
         }
-
         if (this._currentInstance) {
             this._currentInstance.destroy?.();
             this.el.innerHTML = '';

package/components/HtmlWrapper.ts

@@ -188,7 +188,7 @@ export class HtmlWrapper extends EzBaseComponent {
 
         // Boolean properties
         const booleanProps = [
-            "checked", "disabled", "readonly", "required",
+            "checked", "disabled", "required",
             "autofocus", "multiple", "hidden", "draggable", "spellcheck"
         ] as const;
 
@@ -199,6 +199,11 @@ export class HtmlWrapper extends EzBaseComponent {
             }
         }
 
+        // readonly needs special handling - DOM property is readOnly (camelCase)
+        if (cfg.readonly !== undefined && cfg.readonly !== null) {
+            (el as unknown as { readOnly: boolean }).readOnly = !!cfg.readonly;
+        }
+
         // Numeric properties
         const numericProps = [
             "maxLength", "minLength", "rows", "cols", "tabIndex"

package/components/alert/EzAlert.test.ts

@@ -82,20 +82,21 @@ describe('EzAlert', () => {
             const alert = new EzAlert({ message: 'Test', variant: 'success' });
             const el = await alert.render();
 
-            const icon = el.querySelector('.alertIcon i');
+            // Icons are now SVGs from Tabler, not Font Awesome <i> elements
+            const icon = el.querySelector('.alertIcon svg');
             expect(icon).not.toBeNull();
-            expect(icon?.classList.contains('fa-circle-check')).toBe(true);
         });
 
         it('should render custom icon when provided', async () => {
             const alert = new EzAlert({
                 message: 'Test',
-                icon: 'fa-solid fa-bell'
+                icon: 'bell'  // Tabler icon name
             });
             const el = await alert.render();
 
-            const icon = el.querySelector('.alertIcon i');
-            expect(icon?.classList.contains('fa-bell')).toBe(true);
+            // Icons are now SVGs from Tabler
+            const icon = el.querySelector('.alertIcon svg');
+            expect(icon).not.toBeNull();
         });
 
         it('should not render icon when icon is false', async () => {

package/components/alert/EzAlert.ts

@@ -1,6 +1,7 @@
 import styles from './EzAlert.module.scss';
 import { cx } from '../../utils/cssModules.js';
 import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+import { getIcon } from '../icon/icons.js';
 import type { EzGlobal } from '../../core/EzGlobal.js';
 
 const cls = cx(styles);
@@ -10,11 +11,11 @@ declare const ez: EzGlobal;
 export type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'danger';
 
 const VARIANT_ICONS: Record<AlertVariant, string> = {
-    info: 'fa-solid fa-circle-info',
-    success: 'fa-solid fa-circle-check',
-    warning: 'fa-solid fa-triangle-exclamation',
-    error: 'fa-solid fa-circle-xmark',
-    danger: 'fa-solid fa-circle-xmark'
+    info: 'info-circle',
+    success: 'circle-check',
+    warning: 'alert-triangle',
+    error: 'circle-x',
+    danger: 'circle-x'
 };
 
 export interface EzAlertConfig extends EzBaseComponentConfig {
@@ -44,11 +45,11 @@ export class EzAlert extends EzBaseComponent {
 
         // Icon
         if (cfg.icon !== false) {
-            const iconClass = typeof cfg.icon === 'string' ? cfg.icon : VARIANT_ICONS[variant];
+            const iconName = typeof cfg.icon === 'string' ? cfg.icon : VARIANT_ICONS[variant];
             items.push({
                 eztype: 'div',
                 cls: cls('alertIcon'),
-                items: [{ eztype: 'i', cls: iconClass }]
+                html: getIcon(iconName)
             });
         }
 
@@ -91,7 +92,7 @@ export class EzAlert extends EzBaseComponent {
                 attrs: {
                     'aria-label': 'Close alert'
                 },
-                items: [{ eztype: 'i', cls: 'fa-solid fa-xmark' }]
+                html: getIcon('x')
             });
         }
 

package/components/avatar/EzAvatar.ts

@@ -24,11 +24,10 @@ export interface EzAvatarConfig extends EzBaseComponentConfig {
     color?: 'primary' | 'success' | 'warning' | 'danger';
     src?: string;
     alt?: string;
-    name?: string;
+    text?: string;
     initials?: string;
     status?: 'online' | 'offline' | 'busy' | 'away';
     onClick?: (e: MouseEvent, component: EzAvatar) => void;
-    bindName?: string;
 }
 
 export class EzAvatar extends EzBaseComponent {
@@ -48,13 +47,13 @@ export class EzAvatar extends EzBaseComponent {
                 eztype: 'img',
                 cls: cls('avatarImg'),
                 src: this.config.src,
-                alt: this.config.alt || this.config.name || ''
+                alt: this.config.alt || this.config.text || ''
             });
         } else {
             items.push({
                 eztype: 'span',
                 cls: cls('avatarInitials'),
-                text: this._getInitials()
+                text: this._calcInitials(this.config.text || '')
             });
         }
 
@@ -86,7 +85,7 @@ export class EzAvatar extends EzBaseComponent {
                     const initialsEl = await ez._createElement({
                         eztype: 'span',
                         cls: cls('avatarInitials'),
-                        text: this._getInitials()
+                        text: this._calcInitials(this.config.text || '')
                     });
                     el.insertBefore(initialsEl, el.firstChild);
                 };
@@ -94,56 +93,82 @@ export class EzAvatar extends EzBaseComponent {
         }
 
         this.applyStyles(el);
-
-        // Apply bind.name if configured
-        this._applyNameBind(el);
+        this._applyTextBinding(el);
 
         return el;
     }
 
-    private _applyNameBind(el: HTMLElement): void {
-        const bindName = this.config.bindName;
-        if (!bindName) return;
+    private _applyTextBinding(el: HTMLElement): void {
+        const bind = this.config.bind;
+        if (!bind) return;
 
-        const bindStr = bindName;
-        let controllerName: string | undefined;
-        let props: string[];
+        // Get text binding - supports both string and object format
+        let textBind: string | (() => string) | undefined;
 
-        if (bindStr.includes(':')) {
-            const [ctrl, path] = bindStr.split(':');
-            controllerName = ctrl;
-            props = path.split('.');
-        } else {
-            controllerName = (this.config.controller as string) ?? undefined;
-            props = bindStr.split('.');
+        if (typeof bind === 'string') {
+            // bind: 'Controller:path' -> binds to text
+            textBind = bind;
+        } else if (typeof bind === 'object' && 'text' in bind) {
+            // bind: { text: 'path' } or bind: { text: () => value }
+            textBind = (bind as { text: string | (() => string) }).text;
         }
 
-        if (!controllerName) return;
+        if (!textBind) return;
 
         const initialsSpan = el.querySelector(`.${cls('avatarInitials')}`) as HTMLElement;
         if (!initialsSpan) return;
 
         this._effects ??= [];
 
-        const stop = effect(() => {
-            // Try exact name first, then with "Controller" suffix
-            const ctrl = ez._controllers[controllerName!]
-                || ez._controllers[`${controllerName}Controller`];
-            const state = ctrl?.state;
-            const name = (props.length === 1
-                ? state?.[props[0]]
-                : ez.getDeepValue(state, props)) as string || '';
+        if (typeof textBind === 'function') {
+            // Function binding: bind: { text: () => value }
+            const fn = textBind;
+            const stop = effect(() => {
+                const text = fn() || '';
+                initialsSpan.textContent = this._calcInitials(text);
+            });
+            this._effects.push(stop);
+        } else {
+            // String binding: 'Controller:path' or 'path'
+            let controllerName: string | undefined;
+            let props: string[];
+
+            if (textBind.includes(':')) {
+                const [ctrl, path] = textBind.split(':');
+                controllerName = ctrl;
+                props = path.split('.');
+            } else {
+                controllerName = this.config.controller as string | undefined;
+                props = textBind.split('.');
+            }
+
+            if (!controllerName) return;
 
-            initialsSpan.textContent = this._calcInitials(name);
-        });
+            const stop = effect(() => {
+                const ctrl = ez._controllers[controllerName!]
+                    || ez._controllers[`${controllerName}Controller`];
+                const state = ctrl?.state;
+                const text = (props.length === 1
+                    ? state?.[props[0]]
+                    : ez.getDeepValue(state, props)) as string || '';
 
-        this._effects.push(stop);
+                initialsSpan.textContent = this._calcInitials(text);
+            });
+
+            this._effects.push(stop);
+        }
     }
 
-    private _calcInitials(name: string): string {
-        if (!name) return '?';
+    private _calcInitials(text: string): string {
+        if (this.config.initials) {
+            return this.config.initials.substring(0, 2).toUpperCase();
+        }
+
+        const trimmed = (text || '').trim();
+        if (!trimmed) return '?';
 
-        const parts = name.trim().split(/\s+/);
+        const parts = trimmed.split(/\s+/).filter(Boolean);
+        if (parts.length === 0) return '?';
 
         if (parts.length === 1) {
             return parts[0].substring(0, 2).toUpperCase();
@@ -196,21 +221,4 @@ export class EzAvatar extends EzBaseComponent {
 
         return Object.keys(styles).length > 0 ? styles : undefined;
     }
-
-    private _getInitials(): string {
-        if (this.config.initials) {
-            return this.config.initials.substring(0, 2);
-        }
-
-        const name = this.config.name || '';
-        if (!name) return '?';
-
-        const parts = name.trim().split(/\s+/);
-
-        if (parts.length === 1) {
-            return parts[0].substring(0, 2).toUpperCase();
-        }
-
-        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-    }
 }

package/components/badge/EzBadge.ts

@@ -1,6 +1,7 @@
 import styles from './EzBadge.module.scss';
 import { cx } from '../../utils/cssModules.js';
 import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+import { getIcon } from '../icon/icons.js';
 import type { EzSize } from '../../core/types.js';
 import type { EzGlobal } from '../../core/EzGlobal.js';
 
@@ -72,7 +73,7 @@ export class EzBadge extends EzBaseComponent {
                 eztype: 'button',
                 type: 'button',
                 cls: cls('close'),
-                items: [{ eztype: 'i', cls: 'fa-solid fa-xmark' }],
+                html: getIcon('x'),
                 onClick: (e: MouseEvent) => {
                     e.stopPropagation();
                     if (cfg.onClose) cfg.onClose(e);

package/components/base/EzBaseComponentBindings.ts

@@ -14,3 +14,6 @@ export { applyVisibleBind, applyClsBind, applyStyleBind } from './EzBindingDispl
 
 // Re-export data binding (list rendering, reconciliation)
 export { applyDataBind } from './EzBindingData.js';
+
+// Re-export icon binding (for EzButton and similar)
+export { applyIconBind } from './EzBindingIcon.js';

package/components/base/EzBaseComponentCore.ts

@@ -23,6 +23,7 @@ import {
     applyStyleBind,
     applyTextBind,
     applyHtmlBind,
+    applyIconBind,
     BindingContext
 } from './EzBaseComponentBindings.js';
 import { applyTooltip, applyShowOnHover, TooltipState } from './EzBaseComponentTooltip.js';
@@ -140,7 +141,7 @@ export class EzBaseComponent {
         let ctrl: string | undefined = this.config.controller ?? undefined;
 
         // Default text (auto-translated by i18n)
-        if (this.config.text !== undefined && !bind) {
+        if (this.config.text !== undefined && !(bind as { text?: unknown })?.text) {
             const text = String(this.config.text);
             const translated = ez.i18n?.translate(text, this.config.i18nParams as Record<string, unknown> | undefined) ?? text;
             el.textContent = translated;
@@ -156,6 +157,7 @@ export class EzBaseComponent {
 
         // Create binding context
         const ctx: BindingContext = {
+            instance: this,
             config: this.config,
             effects: this._effects,
             domListeners: this._domListeners,
@@ -218,6 +220,7 @@ export class EzBaseComponent {
             applyStyleBind(el, bind, ctrl, ctx);
             applyTextBind(el, bind, ctrl, ctx);
             applyHtmlBind(el, bind, ctrl, ctx);
+            applyIconBind(el, bind, ctrl, ctx);
 
             // Update instance state from context
             this._children = ctx.children;

package/components/base/EzBaseComponentTooltip.ts

@@ -66,45 +66,69 @@ export function applyTooltip(
         if (!tooltip) return;
         const rect = el.getBoundingClientRect();
         const tooltipRect = tooltip.getBoundingClientRect();
+        const gap = 8;
+        const padding = 8;
 
         let top: number;
         let left: number;
+        let finalPosition = position;
 
+        // Calculate initial position
         switch (position) {
             case 'top':
-                top = rect.top - tooltipRect.height - 8;
+                top = rect.top - tooltipRect.height - gap;
                 left = rect.left + (rect.width - tooltipRect.width) / 2;
+                // Flip to bottom if would overlap or go off screen
+                if (top < padding) {
+                    top = rect.bottom + gap;
+                    finalPosition = 'bottom';
+                }
                 break;
             case 'bottom':
-                top = rect.bottom + 8;
+                top = rect.bottom + gap;
                 left = rect.left + (rect.width - tooltipRect.width) / 2;
+                // Flip to top if would go off screen
+                if (top + tooltipRect.height > window.innerHeight - padding) {
+                    top = rect.top - tooltipRect.height - gap;
+                    finalPosition = 'top';
+                }
                 break;
             case 'left':
                 top = rect.top + (rect.height - tooltipRect.height) / 2;
-                left = rect.left - tooltipRect.width - 8;
+                left = rect.left - tooltipRect.width - gap;
+                // Flip to right if would go off screen
+                if (left < padding) {
+                    left = rect.right + gap;
+                    finalPosition = 'right';
+                }
                 break;
             case 'right':
                 top = rect.top + (rect.height - tooltipRect.height) / 2;
-                left = rect.right + 8;
+                left = rect.right + gap;
+                // Flip to left if would go off screen
+                if (left + tooltipRect.width > window.innerWidth - padding) {
+                    left = rect.left - tooltipRect.width - gap;
+                    finalPosition = 'left';
+                }
                 break;
             default:
-                top = rect.top - tooltipRect.height - 8;
+                top = rect.top - tooltipRect.height - gap;
                 left = rect.left + (rect.width - tooltipRect.width) / 2;
+                if (top < padding) {
+                    top = rect.bottom + gap;
+                    finalPosition = 'bottom';
+                }
         }
 
-        const padding = 8;
+        // Constrain horizontal position
         if (left < padding) left = padding;
         if (left + tooltipRect.width > window.innerWidth - padding) {
             left = window.innerWidth - tooltipRect.width - padding;
         }
-        if (top < padding) top = padding;
-        if (top + tooltipRect.height > window.innerHeight - padding) {
-            top = window.innerHeight - tooltipRect.height - padding;
-        }
 
         tooltip.style.top = `${top + window.scrollY}px`;
         tooltip.style.left = `${left + window.scrollX}px`;
-        tooltip.className = tooltipCls('tooltip', isComponentTooltip ? 'component' : variant, position);
+        tooltip.className = tooltipCls('tooltip', isComponentTooltip ? 'component' : variant, finalPosition);
     };
 
     const showTooltip = (): void => {

package/components/base/EzBaseComponentTypes.ts

@@ -38,6 +38,8 @@ export interface BindConfig {
     allowUnsafeHtml?: boolean;
     style?: Record<string, string> | (() => Record<string, string>);
     text?: string | (() => string);
+    /** Icon binding for components with setIcon() method (e.g., EzButton) */
+    icon?: string | (() => string);
     [key: string]: unknown;
 }
 
@@ -189,7 +191,7 @@ export interface EzComponentConfig {
     _isRepaint?: boolean;
 
     /** @internal */
-    attrs?: Record<string, unknown>;
+    attrs?: Record<string, string | number | boolean | null | undefined>;
 
     /** @internal */
     key?: string | number;

package/components/base/EzBindingContent.ts

@@ -80,7 +80,7 @@ export function applyTextBind(
 
     if (typeof bind.text === 'function') {
         const stop = effect(() => {
-            const next = (bind.text as () => string)();
+            const next = (bind.text as (ctx: { controller: unknown }) => string)({ controller: ctx.instance?.controller });
             const text = String(next ?? '');
             el.textContent = ez.i18n?.translate(text) ?? text;
         });
@@ -131,7 +131,7 @@ export function applyHtmlBind(
 
     if (typeof bind.html === 'function') {
         const stop = effect(() => {
-            const next = (bind.html as () => string)();
+            const next = (bind.html as (ctx: { controller: unknown }) => string)({ controller: ctx.instance?.controller });
             const content = String(next ?? '');
             el.innerHTML = shouldSanitize ? sanitizeHtml(content) : content;
         });

package/components/base/EzBindingContext.ts

@@ -10,7 +10,8 @@ import type { EzBaseComponent } from './EzBaseComponentCore.js';
  * Context object passed to all binding functions.
  * Contains references to component state and cleanup arrays.
  */
-export interface BindingContext {
+export interface BindingContext {
+    instance?: EzBaseComponent;
     config: EzComponentConfig;
     effects: EffectCleanup[];
     domListeners: DomListenerCleanup[];