@nutin/cli 1.2.3 → 1.3.1

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);
+  }
+}

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

@@ -1,4 +1,6 @@
-import { View, ButtonManager, BaseButton, ViewRenderManager } from '../../core/index.js';
+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
@@ -6,140 +8,131 @@ export interface PopoverButton extends BaseButton {
 
 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 _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 = 'popover',
+    viewName,
+    components = [],
+    catalogs = [],
+    focusTrapOptions = {}
   }: PopoverOptions) {
-    super({template, tagName: 'div', mountTarget: 'body', viewName});
-    this.onClose = onClose;
-    this.buttonManager = new ButtonManager(
-      this, 
-      this.wrapButtonCallbacks(buttons), 
-      { containerClassName: 'popover-buttons' }
-    );
+    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());
   }
 
-// Wraps button callbacks to include destroy() call
-  private wrapButtonCallbacks(buttons: PopoverButton[]): PopoverButton[] {
-    return buttons.map(btn => ({
-      ...btn,
-      callback: () => {
-        if (btn.callback) {
-          btn.callback();
-        }
-        this.destroy();
-      }
-    }));
+  public childConfigs(): ComponentConfig[] {
+    return [
+      ...this._components,
+      ...this.catalogConfigs()
+    ];
   }
 
-  private createOverlay(): HTMLElement {
-    const overlay = document.createElement('div');
-    overlay.className = 'popover-overlay';
-    return overlay;
+  public catalogConfigs(): ComponentConfig[] {
+    const configs: ComponentConfig[] = []
+    this._catalogs.map((catalog) => {
+      configs.push(...this.catalogConfig(catalog));
+    })
+    return configs;
   }
 
-  private createWrapper(): HTMLElement {
-    const wrapper = document.createElement('div');
-    wrapper.className = 'popover-wrapper';
-    return wrapper;
+  public override shouldUpdateMetaContent(): boolean {
+    return false;
   }
 
-  private createContent(): HTMLElement {
-    const content = super.render();
-    content.classList.add('popover-content');
-    ViewRenderManager.cleanupOptionalContent();
-    return content;
-  }
+  public override render(): HTMLElement {
+    document.documentElement.classList.add('no-scroll');
 
-  private 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);
-  }
+    const { wrapper, overlay } = this.createPopoverDomElements();
 
-  // Handles the close button (via data-event bound in appendCloseButton)
-  private onCloseClick(): void {
-    this.destroy();
-  }
+    this._focusTrap = this.createFocusTrap(wrapper, overlay);
+    this._focusTrap.activate();
 
-  private appendFooterButtons(content: HTMLElement): void {
-    this.buttonManager.appendTo(content);
+    AppEventBus.emit('popover-opened');
+    this._overlay = overlay;
+    return overlay;
   }
 
-  private bindOverlayClose(): void {
-    this.overlay?.addEventListener('click', (e: MouseEvent) => {
-      if (e.target === this.overlay) this.destroy();
+  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 animateIn(wrapper: HTMLElement): void {
-    requestAnimationFrame(() => {
-      this.overlay?.classList.add('show');
-      wrapper.classList.add('show');
-    });
+  private setOptionalViewName(viewName: string | undefined): void {
+    if (viewName) {
+      this._prevTitle = document.title;
+      document.title = AppPipeRegistry.apply('capitalize', viewName);
+    }
   }
 
-  public override shouldUpdateMetaContent(): boolean {
-    return false;
+  private createButtonManager(buttons: PopoverButton[]): ButtonManager {
+    return new ButtonManager(
+      this, 
+      buttons, 
+      { containerClassName: 'popover-buttons' }
+    );
   }
 
-  public override render(): HTMLElement {
-    document.body.classList.add('no-scroll');
-    this.overlay = this.createOverlay();
-
-    const wrapper = this.createWrapper();
-    const content = this.createContent();
-
-    this.appendCloseButton(content);
-    this.appendFooterButtons(content);
-
-    wrapper.appendChild(content);
-    this.overlay.appendChild(wrapper);
-    document.body.appendChild(this.overlay);
+  private createPopoverDomElements(): IPopoverDomElements {
+    const content = super.render();
+    const { overlay, wrapper } = PopoverDomHelper.createDomElements(content, this._buttonManager);
 
     this.autoBindEvents();
     this.parseDataAttributes();
     this.animateIn(wrapper);
 
-    this.bindOverlayClose();
-
-    return this.overlay;
+    return { overlay, wrapper };
   }
 
-  public override destroy(): void {
-    if (this.overlay) {
-      const wrapper = this.overlay.querySelector('.popover-wrapper');
-      this.overlay.classList.remove('show');
-      wrapper?.classList.remove('show');
-
-      setTimeout(() => {
-        wrapper?.remove()
-        this.overlay?.remove();
-        this.overlay = null;
-      }, 250); // match transition duration
-    }
+  private createFocusTrap(wrapper: HTMLElement, overlay: HTMLElement): FocusTrapHelper {
+    return new FocusTrapHelper({
+      container: wrapper,
+      overlay: overlay,
+      options: this._focusTrapOptions
+    });
+  }
 
-    document.body.classList.remove('no-scroll');
-    super.destroy();
+  // Handles the close button (via data-event bound in appendCloseButton)
+  private onCloseClick(): void {
+    this.destroy();
+  }
 
-    if (typeof this.onClose === 'function') {
-      this.onClose();
-    }
+  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,3 +1,5 @@
+import {SecurityHelper} from "../../core/base-classes/base-component/helpers/security.helper.js";
+
 export type NotifyOptions = {
   type?: 'info' | 'success' | 'error';
   position?: 'top' | 'bottom';
@@ -37,16 +39,17 @@ export function notify(message: string, options: NotifyOptions = {}): void {
   }
 }
 
-function displayNext() {
+function displayNext(): void {
   if (queue.length === 0) {
     isDisplaying = false;
     return;
   }
 
   isDisplaying = true;
-  const { message, options } = queue.shift()!;
-  const { type = 'info', position = 'bottom', duration = 3000, actionText, onAction } = options;
-
+  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 = `

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

@@ -8,6 +8,7 @@ $background-color: rgb(255 255 255); // WHITE
 $text-color: rgb(0 0 0); // BLACK
 $primary-color: rgb(0 0 0); // BLACK
 $secondary-color: rgb(0 0 0); // BLACK
+$accent-color: rgb(0 0 0); // BLACK
 
 // snackbar colours
 $snack-success: rgb(76 175 80);

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

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

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

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

@@ -0,0 +1,96 @@
+/* Prevent scroll when popover is active */
+html.no-scroll {
+  overflow: hidden;
+}
+
+.popover-overlay {  
+  z-index: 99;
+  position: fixed;
+  inset: 0;
+  backdrop-filter: blur(5px);
+  background-color: rgba(0, 0, 0, .1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  animation: hide-pop 0.3s ease forwards;
+    &.show {
+    animation: show-pop 0.3s ease forwards;
+  }
+}
+
+.popover-wrapper {
+  overflow-y: auto;
+  position: relative;
+  overscroll-behavior: none;
+  border-radius: 1rem;
+  width: 90%;
+  height: 90%;
+  transform: scale(0.95);
+  opacity: 0;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  -moz-transition: opacity 0.3s ease, -moz-transform 0.3s ease;
+  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
+  -o-transition: opacity 0.3s ease, -o-transform 0.3s ease;
+    &.show {
+    transform: scale(1);
+    -moz-transform: scale(1);
+    -webkit-transform: scale(1);
+    -o-transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.popover-content {
+  position: relative;
+  height: 100%;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.popover-close-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.75rem;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0 1rem;
+  &:focus:not(:focus-visible) {
+  }
+  &:focus-visible {
+  }
+}
+
+.popover-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.popover-buttons button {
+  background-color: inherit;
+  transition: ease-in-out 0.3s;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  cursor: pointer;
+  &:hover {
+  }
+  @media (hover: none) {
+    &:hover { 
+    }
+  }
+}
+
+@keyframes show-pop {
+  from { opacity: 0 }
+  to { opacity: 1 }
+}
+
+@keyframes hide-pop {
+  from { opacity: 1 }
+  to { opacity: 0 }
+}