@nutin/cli 1.3.0 → 1.3.1

package/templates/base/src/core/base-classes/base-component/helpers/event.helper.ts.hbs

@@ -3,9 +3,9 @@ import { TokenHelper } from './token.helper.js';
 
 export class EventHelper {
   public static bindEvents(
-    component: BaseComponent, 
-    element: HTMLElement, 
-    eventListeners: Array<[string, EventListener]>
+    component: BaseComponent,
+    element: HTMLElement,
+    eventListeners: Array<[EventTarget, string, EventListener]>
   ): void {
     element.querySelectorAll('[data-event]').forEach(el => {
       const parts = el.getAttribute('data-event')!.split(':');
@@ -24,11 +24,10 @@ export class EventHelper {
   }
 
   public static destroyEvents(
-    element: HTMLElement, 
-    eventListeners: Array<[string, EventListener]>
+    eventListeners: Array<[EventTarget, string, EventListener]>
   ): void {
-    eventListeners.forEach(([event, listener]) => {
-      element.removeEventListener(event, listener);
+    eventListeners.forEach(([target, event, listener]) => {
+      target.removeEventListener(event, listener);
     });
   }
 
@@ -46,12 +45,12 @@ export class EventHelper {
   }
 
   private static addEvent(
-    target: EventTarget, 
-    event: string, 
-    listener: EventListener, 
-    eventListeners: Array<[string, EventListener]>
+    target: EventTarget,
+    event: string,
+    listener: EventListener,
+    eventListeners: Array<[EventTarget, string, EventListener]>
   ): void {
     target.addEventListener(event, listener);
-    eventListeners.push([event, listener]);
+    eventListeners.push([target, event, listener]);
   }
 }

package/templates/base/src/core/base-classes/component/component.ts.hbs

@@ -56,24 +56,14 @@ export abstract class Component<T extends HTMLElement = HTMLElement, K = any> ex
     normalizeKeys = [],
     defaults = {},
   }: ComponentOptions) {
-    let normalizedConfig = ConfigHelper.normalize(config, defaults);
-    normalizedConfig = ConfigHelper.normalizeStrings(normalizedConfig, normalizeKeys);
-
-    const template = templateFn(normalizedConfig);
-
+    const template = ConfigHelper.createNormalizedTemplate({
+      config, defaults, normalizeKeys, templateFn,
+    });
     super({template, mountTarget, tagName});
 
-    this.config = normalizeKeys && config
-      ? ConfigHelper.normalizeStrings(config, normalizeKeys)
-      : config ?? ({} as T);
-
+    this.config = ConfigHelper.setConfigValue(config, normalizeKeys);
     this.props = props;
-
-    this.buttonManager = new ButtonManager(
-      this, 
-      this.props.buttons, 
-      { containerClassName: 'component-buttons' }
-    );
+    this.buttonManager = this.createButtonManager();
   }
 
   public getValues(): Record<string, string> {
@@ -88,15 +78,21 @@ export abstract class Component<T extends HTMLElement = HTMLElement, K = any> ex
     return super.render();
   }
 
+  private createButtonManager(): ButtonManager {
+    return new ButtonManager(
+      this, 
+      this.props.buttons, 
+      { containerClassName: 'component-buttons' }
+    );
+  }
+
   private applyProps(): void {
     if (this.props.className) {
       this.element.classList.add(this.props.className);
     }
-
     if (this.props.style) {
       this.element.style = this.props.style;
     }
-
     this.applyDataBindings();
   }
 

package/templates/base/src/core/base-classes/component/helpers/config.helper.ts.hbs

@@ -23,4 +23,21 @@ export class ConfigHelper {
     
     return normalized;
   }
+  
+  public static createNormalizedTemplate<T extends Record<string, any>>({
+    config, 
+    defaults = {}, 
+    normalizeKeys = [], 
+    templateFn = () => ''
+  }: T) {
+    let normalizedConfig = ConfigHelper.normalize(config, defaults);
+    normalizedConfig = ConfigHelper.normalizeStrings(normalizedConfig, normalizeKeys);
+    return templateFn(normalizedConfig);
+  }
+
+  public static setConfigValue<T extends Record<string, any>>(config: T, normalizeKeys: (keyof T)[]): T {
+    if (normalizeKeys) return ConfigHelper.normalizeStrings(config, normalizeKeys) as T;
+    else if (config) return config as T 
+    else return ({} as T);
+  }
 }

package/templates/base/src/core/services/router/helpers/navigation-manager.helper.ts.hbs

@@ -5,7 +5,8 @@ import { {{#if i18n}}I18nService, {{/if}}View } from "../../../index.js";
  */
 export class NavigationManager {
   public static normalizePath(path: string): string {
-    const url = new URL(path, window.location.origin);
+    const collapsed = path.replace(/\/\/+/g, '/');
+    const url = new URL(collapsed, window.location.origin);
     return (url.pathname || '/').replace(/\/+$/, '') || '/';
   }
 

package/templates/base/src/core/services/router/helpers/view-render-manager.helper.ts.hbs

@@ -49,43 +49,10 @@ export class ViewRenderManager {
     view.render();
 
     {{/if}}
-
-    this.cleanupOptionalContent();
-
     this.emitEvent('view-mount', view.viewName);
     return view;
   }
 
-  public static cleanupOptionalContent(): void {
-    const isEmpty = (el: HTMLElement): boolean => {
-      const attrName = el.dataset.optional?.trim();
-
-      if (attrName && attrName !== "") {
-        const attrValue = el.getAttribute(attrName);
-        return !attrValue || attrValue.trim() === "" || attrValue === "undefined";
-      }
-
-      if (el instanceof HTMLImageElement) {
-        return !el.src || el.src.trim() === "";
-      }
-
-      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-        return !el.value?.trim();
-      }
-
-      if (el instanceof HTMLMediaElement || el instanceof HTMLSourceElement) {
-        return !el.getAttribute("src");
-      }
-
-      const content = el.textContent?.trim();
-      return !content || content === "undefined";
-    };
-
-    document.querySelectorAll<HTMLElement>("[data-optional]").forEach(el => {
-      if (isEmpty(el)) el.remove();
-    });
-  }
-
   private static emitEvent(event: EventKey, viewName: string): void {
     AppEventBus.emit(event, viewName);
   }

package/templates/base/src/core/services/router/router.ts.hbs

@@ -5,7 +5,6 @@ import { NavigationManager } from './helpers/navigation-manager.helper.js';
 
 // centralized export
 export { Routes, RouteGuard } from './helpers/route-guard-manager.helper.js';
-export { ViewRenderManager } from './helpers/view-render-manager.helper.js';
 
 /**
  * IRouter is a type alias for the instance of Router, not a true interface 

package/templates/base/src/core/utils/anchor-manager/anchor-manager.utils.ts.hbs

@@ -45,21 +45,15 @@ export class AnchorManager {
   private createAnchorContainer(): HTMLSpanElement {
     const container = document.createElement('span');
     const anchor = this.createAnchor();
-
     container.appendChild(anchor);
-
     return container;
   }
 
   private createAnchor(): HTMLElement {
     const anchor = document.createElement('a');
-
     this.setAnchorRef(anchor);
-    
     AttributesHelper.setAttributes(anchor, this.config);
-
     this.handleClick(anchor);
-
     return anchor;
   }
 
@@ -79,7 +73,41 @@ export class AnchorManager {
     anchor?.addEventListener('click', (e) => {
       e.preventDefault();
       const target = document.getElementById(id);
-      target?.scrollIntoView({ behavior: 'smooth' });
+      this.scrollToTarget(target);
+      this.accessibilityFeatures(target, id);
     });
   }
+
+  private scrollToTarget(target: HTMLElement | null): void {
+    const targetPosition = target?.offsetTop;
+    window.scrollTo({
+      top: targetPosition,
+      behavior: 'smooth'
+    })
+  }
+
+  private accessibilityFeatures(target: HTMLElement | null, id: string) {
+    this.setFocus(target);
+    this.setAriaLive(target, id);
+  }
+
+  private setFocus(target: HTMLElement | null): void {
+    setTimeout(() => {
+      target?.setAttribute('tabindex', '-1');
+      target?.focus({ preventScroll: true });
+      // Remove tabindex after focus
+      target?.addEventListener('blur', () => {
+        target?.removeAttribute('tabindex');
+      }, { once: true });
+    }, 100);
+  }
+
+  private setAriaLive(target: HTMLElement | null, id: string): void {
+    const announcement = document.createElement('div');
+    announcement.setAttribute('aria-live', 'polite');
+    announcement.className = 'sr-only';
+    announcement.textContent = `Navigated to ${ target?.textContent || id }`;
+    document.body.appendChild(announcement);
+    setTimeout(() => document.body.removeChild(announcement), 1000);
+  }
 }

package/templates/base/src/core/utils/button-manager/button-manager.utils.ts.hbs

@@ -2,6 +2,7 @@ import { AttributesHelper, IAttributesConfig } from "../helpers/attributes.helpe
 
 export interface BaseButton extends IAttributesConfig {
   callback: () => void;
+  label?: string;
 }
 
 export interface ButtonContainerOptions {
@@ -22,10 +23,6 @@ export interface ButtonContainerOptions {
   pipes?: string;
 }
 
-interface BaseButton extends IAttributesConfig {
-  callback: () => void;
-}
-
 interface ButtonContainerOptions {
   containerClassName?: string;
   containerStyles?: string;
@@ -61,9 +58,13 @@ export class ButtonManager {
     container.style = this.containerOptions.containerStyles || '';
 
     this.buttons.forEach((config, index) => {
-      const button = this.createButton(config, index);
-      container.appendChild(button);
-      this.bindButtonCallback(config, index);
+      if (config.label) {
+        return this.createButtonWithCheckbox(config, index, container);
+      } else {
+        const button = this.createButton(config, index);
+        container.appendChild(button);
+        this.bindButtonCallback(config, index);
+      }
     });
 
     return container;
@@ -76,6 +77,25 @@ export class ButtonManager {
     }
   }
 
+  private createButtonWithCheckbox(config: BaseButton, index: number, container: HTMLElement): HTMLElement {
+    if (!config.label) return container;
+    const checkbox = document.createElement('input');
+    checkbox.setAttribute('type', 'checkbox');
+    checkbox.setAttribute('id', config.label);
+    checkbox.hidden = true;
+    container.appendChild(checkbox);
+    
+    const label = document.createElement('label');
+    label.setAttribute('for', config.label);
+        
+    const button = this.createButton(config, index);
+    label.appendChild(button);
+        
+    container.appendChild(label);
+    this.bindButtonCallback(config, index, checkbox);
+    return container;
+  }
+
   private createButton(config: BaseButton, index: number): HTMLElement {
     const button = document.createElement('button');
     
@@ -90,12 +110,15 @@ export class ButtonManager {
     button.setAttribute('data-event', `click:onButtonClick_${index}`);
   }
 
-  private bindButtonCallback(config: BaseButton, index: number): void {
+  private bindButtonCallback(config: BaseButton, index: number, checkbox?: HTMLInputElement): void {
     const methodName = `onButtonClick_${index}`;
     
     this.component[methodName] = () => {
       if (typeof config.callback === 'function') {
         config.callback();
+        if (checkbox) {
+          checkbox.checked = !checkbox.checked;
+        }
       }
     };
   }

package/templates/base/src/libs/popover/helpers/focus-trap.helper.ts.hbs

@@ -0,0 +1,197 @@
+import { AppEventBus } from "../../../core/index.js";
+
+type KeyboardEventHandler = (event: KeyboardEvent) => void;
+
+export interface IFocusTrapOptions {
+  escapeDeactivates?: boolean;
+  clickOutsideDeactivates?: boolean;
+  returnFocusOnDeactivate?: boolean;
+}
+
+export interface IFocusTrapHelperParams {
+  container: HTMLElement;
+  overlay: HTMLElement;
+  options?: IFocusTrapOptions;
+}
+
+export class FocusTrapHelper {
+  private _container: HTMLElement;
+  private _overlay: HTMLElement;
+  private _previousActiveElement: HTMLElement | null | undefined = null;
+  private _focusableElements: NodeListOf<HTMLElement> | null | undefined = null;
+  private _firstFocusableElement: HTMLElement | null | undefined = null;
+  private _lastFocusableElement: HTMLElement | null | undefined = null;
+  private _boundKeyDown: KeyboardEventHandler;
+  private _options: IFocusTrapOptions;
+  private _isActive: boolean = false;
+
+  constructor({container, overlay, options = {}}: IFocusTrapHelperParams) {
+    this._container = container;
+    this._overlay = overlay;
+    this._options = {
+      escapeDeactivates: true,
+      clickOutsideDeactivates: true,
+      returnFocusOnDeactivate: true,
+      ...options
+    };
+    this._boundKeyDown = this._handleKeyDown.bind(this);
+  }
+
+  private _getFocusableElements(): NodeListOf<HTMLElement> {
+    return this._container.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    ) as NodeListOf<HTMLElement>;
+  }
+
+  public activate(): void {
+    if (this._isActive) return;
+    
+    this._previousActiveElement = document.activeElement as HTMLElement;
+    
+    this._focusableElements = this._getFocusableElements();
+    
+    if (this._focusableElements.length > 0) {
+      this._firstFocusableElement = this._focusableElements[0];
+      this._lastFocusableElement = this._focusableElements[this._focusableElements.length - 1];
+      
+      this._firstFocusableElement?.focus();
+    } else {
+      this._container.setAttribute('tabindex', '-1');
+      this._container.focus();
+      this._firstFocusableElement = this._container;
+      this._lastFocusableElement = this._container;
+    }
+    
+    this._container.addEventListener('keydown', this._boundKeyDown);
+    
+      document.addEventListener('click', this._handleOutsideClick.bind(this));
+    
+    this._disableOutsideTabIndex();
+    
+    this._isActive = true;
+  }
+
+  public deactivate(): void {
+    if (!this._isActive) return;
+    
+    this._container.removeEventListener('keydown', this._boundKeyDown);
+    document.removeEventListener('click', this._handleOutsideClick.bind(this));
+    
+    this._enableOutsideTabIndex();
+    
+    if (this._container.getAttribute('tabindex') === '-1') {
+      this._container.removeAttribute('tabindex');
+    }
+    
+    if (this._options.returnFocusOnDeactivate && 
+      this._previousActiveElement && 
+      this._previousActiveElement.focus
+    ) {
+      this._previousActiveElement.focus();
+    }
+    
+    this._focusableElements = null;
+    this._firstFocusableElement = null;
+    this._lastFocusableElement = null;
+    this._previousActiveElement = null;
+    
+    this._isActive = false;
+  }
+
+  public getIsActive(): boolean {
+    return this._isActive;
+  }
+
+  public updateFocusableElements(): void {
+    if (!this._isActive) return;
+    
+    this._focusableElements = this._getFocusableElements();
+    
+    if (this._focusableElements.length > 0) {
+      this._firstFocusableElement = this._focusableElements[0];
+      this._lastFocusableElement = this._focusableElements[this._focusableElements.length - 1];
+    }
+  }
+
+  private _disableOutsideTabIndex(): void {
+    const allElements = document.querySelectorAll('body *') as NodeListOf<HTMLElement>;
+    
+    allElements.forEach((el: HTMLElement) => {
+      if (!this._container.contains(el)) {
+        const currentTabIndex = el.getAttribute('tabindex');
+        if (currentTabIndex !== '-1') {
+          const originalTabIndex = currentTabIndex || 
+            (el.tabIndex !== -1 ? el.tabIndex.toString() : null);
+          
+          if (originalTabIndex !== null) {
+            el.setAttribute('data-original-tabindex', originalTabIndex);
+          }
+          
+          el.setAttribute('tabindex', '-1');
+        }
+      }
+    });
+  }
+
+  private _enableOutsideTabIndex(): void {
+    const allElements = document.querySelectorAll(
+      '[data-original-tabindex]'
+    ) as NodeListOf<HTMLElement>;
+    
+    allElements.forEach((el: HTMLElement) => {
+      const originalTabIndex = el.getAttribute('data-original-tabindex');
+      
+      if (originalTabIndex === null) {
+        el.removeAttribute('tabindex');
+      } else if (originalTabIndex === '0') {
+        el.removeAttribute('tabindex');
+      } else {
+        el.setAttribute('tabindex', originalTabIndex);
+      }
+      
+      el.removeAttribute('data-original-tabindex');
+    });
+  }
+
+  private _handleKeyDown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'Tab':
+        this._handleTabKey(event);
+        break;
+      case 'Escape':
+        if (this._options.escapeDeactivates) {
+          event.preventDefault();
+          AppEventBus.emit('popover-close');
+          this.deactivate();
+        }
+        break;
+    }
+  }
+
+  private _handleTabKey(event: KeyboardEvent): void {
+    if (!this._focusableElements || this._focusableElements.length === 0) return;
+    
+    if (event.shiftKey) {
+      if (document.activeElement === this._firstFocusableElement) {
+        event.preventDefault();
+        this._lastFocusableElement?.focus();
+      }
+    } else {
+      if (document.activeElement === this._lastFocusableElement) {
+        event.preventDefault();
+        this._firstFocusableElement?.focus();
+      }
+    }
+  }
+
+  private _handleOutsideClick(event: MouseEvent): void {
+    if (!this._options.clickOutsideDeactivates) return;
+    this._overlay.addEventListener('click', (e: MouseEvent) => {
+      if (e.target === this._overlay){ 
+        event.stopPropagation();
+        AppEventBus.emit('popover-close');
+        this.deactivate();;
+      }
+    });
+  }
+}

package/templates/base/src/libs/popover/helpers/popover-dom.helper.ts.hbs

@@ -0,0 +1,75 @@
+import { ButtonManager } from "src/core/index.js";
+
+export interface IPopoverDomElements {
+	wrapper: HTMLElement;
+	overlay: HTMLElement;
+}
+
+export class PopoverDomHelper {
+	public static createDomElements(
+		content: HTMLElement, 
+		buttonManager: ButtonManager
+	): IPopoverDomElements {
+    const overlay = this.createOverlay();
+    const wrapper = this.createWrapper();
+    content = this.createContent(content);
+
+    this.appendCloseButton(content);
+    this.appendFooterButtons(content, buttonManager);
+
+    wrapper.appendChild(content);
+    overlay.appendChild(wrapper);
+    document.body.appendChild(overlay);
+
+    return { wrapper, overlay };
+  }
+
+  public static removeDomElements(overlay: HTMLElement | null, onRemoved?: () => void): null {
+    if (overlay) {
+      const wrapper = overlay.querySelector('.popover-wrapper');
+      overlay.classList.remove('show');
+      wrapper?.classList.remove('show');
+
+      setTimeout(() => {
+        wrapper?.remove();
+        overlay?.remove();
+        onRemoved?.();
+      }, 300); // match transition duration
+    }
+    return null;
+  }
+
+  private static createOverlay(): HTMLElement {
+    const overlay = document.createElement('div');
+    overlay.className = 'popover-overlay';
+    return overlay;
+  }
+
+  private static createWrapper(): HTMLElement {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'popover-wrapper';
+    return wrapper;
+  }
+
+  private static createContent(content: HTMLElement): HTMLElement {
+    content.classList.add('popover-content');
+    return content;
+  }
+
+  private static appendCloseButton(content: HTMLElement): void {
+    const closeButton = document.createElement('button');
+    closeButton.className = 'popover-close-button';
+    closeButton.innerHTML = '×';
+    closeButton.setAttribute('aria-label', 'Close');
+    // bind method onCloseClick
+    closeButton.setAttribute('data-event', 'click:onCloseClick');
+    content.prepend(closeButton);
+  }
+
+  private static appendFooterButtons(
+  	content: HTMLElement, 
+  	buttonManager: ButtonManager
+  ): void {
+    buttonManager.appendTo(content);
+  }
+}