@nutin/cli 1.3.1 → 2.0.0

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

@@ -1,131 +0,0 @@
-import { AttributesHelper, IAttributesConfig } from "../helpers/attributes.helper.js";
-
-export interface BaseButton extends IAttributesConfig {
-  callback: () => void;
-  label?: string;
-}
-
-export interface ButtonContainerOptions {
-  containerClassName?: string;
-  containerStyles?: string;
-}
-
-/**
- * ```typescript
- interface IAttributesConfig {
-  {{#if i18n}}
-  i18nKey?: string;
-  {{/if}}
-  textContent?: string;
-  className?: string;
-  style?: string;
-// use regular pipe syntax for arguments / chaining
-  pipes?: string;
-}
-
-interface ButtonContainerOptions {
-  containerClassName?: string;
-  containerStyles?: string;
-}
-  ```
-*/
-export class ButtonManager {
-  private component: any;
-  private buttons: BaseButton[];
-  private containerOptions: ButtonContainerOptions;
-
-  constructor(
-    component: any, 
-    buttons: BaseButton[] = [], 
-    containerOptions: ButtonContainerOptions = {}
-  ) {
-    this.component = component;
-    this.buttons = buttons;
-    this.containerOptions = {
-      containerClassName: 'dynamic-buttons',
-      containerStyles: '',
-      ...containerOptions
-    };
-  }
-
-  public createButtonContainer(): HTMLElement | null {
-    if (!Array.isArray(this.buttons) || this.buttons.length === 0) {
-      return null;
-    }
-
-    const container = document.createElement('div');
-    container.className = this.containerOptions.containerClassName || 'dynamic-buttons';
-    container.style = this.containerOptions.containerStyles || '';
-
-    this.buttons.forEach((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;
-  }
-
-  public appendTo(target: HTMLElement): void {
-    const container = this.createButtonContainer();
-    if (container) {
-      target.appendChild(container);
-    }
-  }
-
-  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');
-    
-    AttributesHelper.setAttributes(button, config);
-
-    this.setDataEvent(button, index);
-
-    return button;
-  }
-
-  private setDataEvent(button: HTMLButtonElement, index: number): void {
-    button.setAttribute('data-event', `click:onButtonClick_${index}`);
-  }
-
-  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;
-        }
-      }
-    };
-  }
-
-/** Note : doesn't track container
-*/
-  public updateButtons(newButtons: BaseButton[]): void {
-    this.buttons = newButtons;
-  }
-}

package/templates/base/src/core/utils/helpers/attributes.helper.ts.hbs

@@ -1,50 +0,0 @@
-export interface IAttributesConfig {
-  {{#if i18n}}
-  i18nKey?: string;
-  {{/if}}
-  textContent?: string;
-  className?: string;
-  style?: string;
-// use regular pipe syntax for arguments / chaining
-  pipes?: string;
-}
-
-export class AttributesHelper {
-  public static setAttributes(element: HTMLElement, config: IAttributesConfig): void {
-    this.setContent(element, config);
-    this.setPipes(element, config);
-    this.setStyle(element, config);
-  }
-
-  private static setContent(element: HTMLElement, config: IAttributesConfig): void {
-    element.textContent = config.textContent || '';
-    {{#if i18n}}
-    if (config.i18nKey) {
-      element.setAttribute('data-i18n', config.i18nKey);
-    }
-    {{/if}}
-  }
-
-  private static setPipes(element: HTMLElement, config: IAttributesConfig): void {
-    if (!config.pipes) return;
-    element.setAttribute('data-pipe', config.pipes);
-  }
-
-  private static setStyle(element: HTMLElement, config: IAttributesConfig): void {    
-    const classes = [
-      config.className
-    ].filter(Boolean).join(' ');
-
-    const style = [
-      config.style
-    ].filter(Boolean).join(' ');
-    
-    if (classes) {
-      element.className = classes;
-    }
-
-    if(style) {
-      element.style = style;
-    }
-  }
-}

package/templates/base/src/core/utils/index.ts.hbs

@@ -1,2 +0,0 @@
-export * from './button-manager/button-manager.utils.js';
-export * from './anchor-manager/anchor-manager.utils.js';

package/templates/base/src/libs/index.ts.hbs

@@ -1,4 +0,0 @@
-export * from './snackbar/snackbar.js';
-export * from './popover/popover.js';
-export * from './guards/guards.js';
-export * from './pipes/pipes.js';

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

@@ -1,197 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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);
-  }
-}

package/templates/base/src/libs/popover/popover.ts.hbs

@@ -1,138 +0,0 @@
-import { View, ButtonManager, BaseButton, ComponentConfig, AppPipeRegistry, CatalogConfig, AppEventBus } from '../../core/index.js';
-import { FocusTrapHelper, IFocusTrapOptions } from './helpers/focus-trap.helper.js';
-import { IPopoverDomElements, PopoverDomHelper } from './helpers/popover-dom.helper.js';
-
-export interface PopoverButton extends BaseButton {
-  // if needed for Popover-specific properties
-}
-
-export interface PopoverOptions {
-  template: string;
-  components?: ComponentConfig[];
-  catalogs?: CatalogConfig[];
-  viewName?: string;
-  onClose?: () => void;
-  buttons?: PopoverButton[];
-  focusTrapOptions?: IFocusTrapOptions;
-}
-
-export class PopoverView extends View {
-  private _onClose?: () => void;
-  private _overlay: HTMLElement | null = null;
-  private _buttonManager: ButtonManager;
-  private _prevTitle: string | undefined;
-  private _catalogs: CatalogConfig[];
-  private _focusTrap: FocusTrapHelper | null = null;
-  private _focusTrapOptions: IFocusTrapOptions;
-  private _components: ComponentConfig[];
-
-  constructor({
-    template,
-    buttons = [],
-    onClose,
-    viewName,
-    components = [],
-    catalogs = [],
-    focusTrapOptions = {}
-  }: PopoverOptions) {
-    super({ template, tagName: 'div', mountTarget: 'body' });
-    this._onClose = onClose;
-    this._components = components;
-    this._catalogs = catalogs;
-    this._buttonManager = this.createButtonManager(buttons);
-    this.setOptionalViewName(viewName);
-    this._focusTrapOptions = focusTrapOptions;
-    AppEventBus.subscribe('popover-close', () => this.destroy());
-  }
-
-  public childConfigs(): ComponentConfig[] {
-    return [
-      ...this._components,
-      ...this.catalogConfigs()
-    ];
-  }
-
-  public catalogConfigs(): ComponentConfig[] {
-    const configs: ComponentConfig[] = []
-    this._catalogs.map((catalog) => {
-      configs.push(...this.catalogConfig(catalog));
-    })
-    return configs;
-  }
-
-  public override shouldUpdateMetaContent(): boolean {
-    return false;
-  }
-
-  public override render(): HTMLElement {
-    document.documentElement.classList.add('no-scroll');
-
-    const { wrapper, overlay } = this.createPopoverDomElements();
-
-    this._focusTrap = this.createFocusTrap(wrapper, overlay);
-    this._focusTrap.activate();
-
-    AppEventBus.emit('popover-opened');
-    this._overlay = overlay;
-    return overlay;
-  }
-
-  public override destroy(): void {
-    this._focusTrap?.deactivate();
-    if (this._prevTitle) document.title = this._prevTitle;
-
-    this._overlay = PopoverDomHelper.removeDomElements(this._overlay, () => {
-      document.documentElement.classList.remove('no-scroll');
-      super.destroy();
-      if (typeof this._onClose === 'function') {
-        this._onClose();
-      }
-    });
-  }
-
-  private setOptionalViewName(viewName: string | undefined): void {
-    if (viewName) {
-      this._prevTitle = document.title;
-      document.title = AppPipeRegistry.apply('capitalize', viewName);
-    }
-  }
-
-  private createButtonManager(buttons: PopoverButton[]): ButtonManager {
-    return new ButtonManager(
-      this, 
-      buttons, 
-      { containerClassName: 'popover-buttons' }
-    );
-  }
-
-  private createPopoverDomElements(): IPopoverDomElements {
-    const content = super.render();
-    const { overlay, wrapper } = PopoverDomHelper.createDomElements(content, this._buttonManager);
-
-    this.autoBindEvents();
-    this.parseDataAttributes();
-    this.animateIn(wrapper);
-
-    return { overlay, wrapper };
-  }
-
-  private createFocusTrap(wrapper: HTMLElement, overlay: HTMLElement): FocusTrapHelper {
-    return new FocusTrapHelper({
-      container: wrapper,
-      overlay: overlay,
-      options: this._focusTrapOptions
-    });
-  }
-
-  // Handles the close button (via data-event bound in appendCloseButton)
-  private onCloseClick(): void {
-    this.destroy();
-  }
-
-  private animateIn(wrapper: HTMLElement): void {
-    requestAnimationFrame(() => {
-      this._overlay?.classList.add('show');
-      wrapper.classList.add('show');
-    });
-  }
-}

package/templates/base/src/libs/snackbar/snackbar.ts.hbs

@@ -1,75 +0,0 @@
-import {SecurityHelper} from "../../core/base-classes/base-component/helpers/security.helper.js";
-
-export type NotifyOptions = {
-  type?: 'info' | 'success' | 'error';
-  position?: 'top' | 'bottom';
-  duration?: number;
-  actionText?: string;
-  onAction?: () => void;
-};
-
-type SnackbarItem = {
-  message: string;
-  options: NotifyOptions;
-};
-
-const queue: SnackbarItem[] = [];
-let isDisplaying = false;
-
-/**
- * ```typescript
-type NotifyOptions = {
-  type?: 'info' | 'success' | 'error';
-  position?: 'top' | 'bottom';
-  duration?: number;
-  actionText?: string;
-  onAction?: () => void;
-};
-
-type SnackbarItem = {
-  message: string;
-  options: NotifyOptions;
-};
-```
-*/
-export function notify(message: string, options: NotifyOptions = {}): void {
-  queue.push({ message, options });
-  if (!isDisplaying) {
-    displayNext();
-  }
-}
-
-function displayNext(): void {
-  if (queue.length === 0) {
-    isDisplaying = false;
-    return;
-  }
-
-  isDisplaying = true;
-  let { message, options } = queue.shift()!;
-  let { type = 'info', position = 'bottom', duration = 3000, actionText, onAction } = options;
-  message = SecurityHelper.sanitizeTemplate(message);
-  actionText = SecurityHelper.sanitizeTemplate(actionText);
-  const snackbar = document.createElement('div');
-  snackbar.className = `app-snackbar app-snackbar--${type} app-snackbar--${position}`;
-  snackbar.innerHTML = `
-    <span>${message}</span>
-    ${actionText ? `<button>${actionText}</button>` : ''}
-  `;
-
-  document.body.appendChild(snackbar);
-
-  const remove = () => {
-    snackbar.remove();
-    displayNext();
-  };
-
-  if (actionText && onAction) {
-    snackbar.querySelector('button')?.addEventListener('click', () => {
-      onAction();
-      remove();
-    });
-  }
-
-  setTimeout(remove, duration);
-}

package/templates/base/src/styles/base/_functions.scss.hbs

@@ -1,9 +0,0 @@
-@function calcul_rem($size, $base) {
-	@return 1rem * $size / $base;
-}
-
-@function strip_unit($number) {
-	@if type-of($number) == 'number' and not unitless ($number) {
-		@return $number / ($number * 0 + 1);
-	}
-}

package/templates/base/src/styles/core/_anchors.scss.hbs

@@ -1,10 +0,0 @@
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-  white-space: nowrap;
-  text-decoration: none;
-  outline: none;
-}

package/templates/base/src/styles/core/_index.scss.hbs

@@ -1,6 +0,0 @@
-@forward "anchors";
-@forward "popover";
-@forward "snackbar";
-{{#if stylinNutin}}
-@forward "utilities";
-{{/if}}