@nutin/cli 1.3.0 → 1.3.1

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,29 +8,56 @@ 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());
+  }
+
+  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 {
@@ -36,89 +65,63 @@ export class PopoverView extends View {
   }
 
   public override render(): HTMLElement {
-    document.body.classList.add('no-scroll');
-    this.overlay = this.createOverlay();
-
-    const wrapper = this.createWrapper();
-    const content = this.createContent();
+    document.documentElement.classList.add('no-scroll');
 
-    this.appendCloseButton(content);
-    this.appendFooterButtons(content);
+    const { wrapper, overlay } = this.createPopoverDomElements();
 
-    wrapper.appendChild(content);
-    this.overlay.appendChild(wrapper);
-    document.body.appendChild(this.overlay);
+    this._focusTrap = this.createFocusTrap(wrapper, overlay);
+    this._focusTrap.activate();
 
-    this.autoBindEvents();
-    this.parseDataAttributes();
-    this.animateIn(wrapper);
-
-    this.bindOverlayClose();
-
-    return this.overlay;
+    AppEventBus.emit('popover-opened');
+    this._overlay = overlay;
+    return overlay;
   }
 
   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
-    }
-
-    document.body.classList.remove('no-scroll');
-    super.destroy();
-
-    if (typeof this.onClose === 'function') {
-      this.onClose();
-    }
-  }
-
-// 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();
+    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 createOverlay(): HTMLElement {
-    const overlay = document.createElement('div');
-    overlay.className = 'popover-overlay';
-    return overlay;
+  private setOptionalViewName(viewName: string | undefined): void {
+    if (viewName) {
+      this._prevTitle = document.title;
+      document.title = AppPipeRegistry.apply('capitalize', viewName);
+    }
   }
 
-  private createWrapper(): HTMLElement {
-    const wrapper = document.createElement('div');
-    wrapper.className = 'popover-wrapper';
-    return wrapper;
+  private createButtonManager(buttons: PopoverButton[]): ButtonManager {
+    return new ButtonManager(
+      this, 
+      buttons, 
+      { containerClassName: 'popover-buttons' }
+    );
   }
 
-  private createContent(): HTMLElement {
+  private createPopoverDomElements(): IPopoverDomElements {
     const content = super.render();
-    content.classList.add('popover-content');
-    ViewRenderManager.cleanupOptionalContent();
-    return content;
+    const { overlay, wrapper } = PopoverDomHelper.createDomElements(content, this._buttonManager);
+
+    this.autoBindEvents();
+    this.parseDataAttributes();
+    this.animateIn(wrapper);
+
+    return { overlay, wrapper };
   }
 
-  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);
+  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)
@@ -126,20 +129,10 @@ export class PopoverView extends View {
     this.destroy();
   }
 
-  private appendFooterButtons(content: HTMLElement): void {
-    this.buttonManager.appendTo(content);
-  }
-
-  private bindOverlayClose(): void {
-    this.overlay?.addEventListener('click', (e: MouseEvent) => {
-      if (e.target === this.overlay) this.destroy();
-    });
-  }
-
   private animateIn(wrapper: HTMLElement): void {
     requestAnimationFrame(() => {
-      this.overlay?.classList.add('show');
+      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';
@@ -44,9 +46,10 @@ function displayNext(): void {
   }
 
   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 }
+}

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

@@ -0,0 +1,50 @@
+@use "sass:map";
+@use "variables" as *;
+{{#if stylinNutin}}
+@use "mixins";
+{{/if}}
+
+.app-snackbar {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  {{#if stylinNutin}}
+  @include mixins.flex-center;
+  {{else}}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  {{/if}}
+  background: $snack-default;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+  gap: 1rem;
+  animation: fade-in 0.3s ease;
+  {{#if stylinNutin}}
+  @include mixins.respond-to(medium) {
+    min-width: 80%;
+  }
+  {{/if}}
+}
+
+.app-snackbar--bottom { bottom: 1rem; }
+.app-snackbar--top { top: 1rem; }
+
+.app-snackbar--success { background: $snack-success; }
+.app-snackbar--error { background: $snack-error; }
+.app-snackbar--info { background: $snack-info; }
+
+.app-snackbar button {
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}

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

@@ -1,5 +1,5 @@
 // Libraries styles (snackbar, popover){{#if transition}}, view transition styles{{/if}}.
-@use "libs";
+@use "core";
 
 {{#if stylinNutin}}
 // built-in classes

package/templates/features/i18n/src/core/services/i18n/i18n.ts.hbs

@@ -1,5 +1,5 @@
 import { DEFAULT_LANGUAGE, LANGUAGES, Language, Translations } from './languages.js';
-import { Service } from '../../index.js';
+import { AppEventBus, Service } from '../../index.js';
 
 export class I18n extends Service<I18n> {
   private readonly _DEFAULT_LANGUAGE: Language = DEFAULT_LANGUAGE;
@@ -7,11 +7,12 @@ export class I18n extends Service<I18n> {
   private _currentLanguage: Language = this._DEFAULT_LANGUAGE;
   private _translations: Translations = {};
   private _defaultTranslations: Translations = {};
+  private readonly _localStorageKey = 'nutin-fav-lang';
 
   constructor() {
     super();
     this.registerCleanup(this.resetTranslations);
-    this._currentLanguage = this.getBrowserLanguage();
+    this._currentLanguage = this.getPreferredLanguage();
   }
 
   public get currentLanguage(): Language {
@@ -26,6 +27,17 @@ export class I18n extends Service<I18n> {
     return this._LANGUAGES;
   }
 
+  public get localStorageKey(): string {
+    return this._localStorageKey;
+  }
+
+  public async setCurrentLanguage(lang: Language): Promise<void> {
+    this._currentLanguage = lang;
+    this.savePreferences();
+    await this.loadTranslations(lang);
+    AppEventBus.emit('language-changed');
+  }
+
   public async loadTranslations(lang: Language): Promise<void> {
     try {
       const response = await fetch(`/locales/${lang}.json`);
@@ -39,10 +51,11 @@ export class I18n extends Service<I18n> {
         await this.loadDefaultTranslations();
       }
       
-      document.documentElement.lang = lang;    
+      document.documentElement.lang = lang;   
+      this.savePreferences();
     } catch (error) {
       console.error('Translation load error:', error);
-    } 
+    }
   }
 
   public translate(key: string, textContent?: string | null): string {
@@ -60,8 +73,8 @@ export class I18n extends Service<I18n> {
   }
 
   public async initTranslations(): Promise<void> {
-    const browserLang = this.getBrowserLanguage();
-    const lang = this._LANGUAGES.includes(browserLang) ? browserLang : this._DEFAULT_LANGUAGE;
+    const preferredLang = this.getPreferredLanguage();
+    const lang = this._LANGUAGES.includes(preferredLang) ? preferredLang : this._DEFAULT_LANGUAGE;
 
     // Always load default translations first
     if (lang !== this._DEFAULT_LANGUAGE) {
@@ -71,6 +84,18 @@ export class I18n extends Service<I18n> {
     await this.loadTranslations(lang);
   }
 
+  public getTranslationObject<T = any>(key: string): T | null {
+    const keys = key.split('.');
+    
+    let value = this.getNestedValue(this._translations, keys);
+
+    if (!value && this._currentLanguage !== this._DEFAULT_LANGUAGE) {
+      value = this.getNestedValue(this._defaultTranslations, keys);
+    }
+    
+    return value || null;
+  }
+
   public resetTranslations(): void {
     this._translations = {};
     this._defaultTranslations = {};
@@ -82,8 +107,8 @@ export class I18n extends Service<I18n> {
     this.dispose();
   }
 
-  private getBrowserLanguage() {
-    return navigator.language.split('-')[0] as Language;
+  private getPreferredLanguage() {
+    return this.getPreferences() || navigator.language.split('-')[0] as Language;
   };
 
   private async loadDefaultTranslations(): Promise<void> {
@@ -106,6 +131,14 @@ export class I18n extends Service<I18n> {
     }
     return value;
   }
+
+  private savePreferences(): void {
+    localStorage.setItem(this._localStorageKey, this._currentLanguage);
+  }
+
+  private getPreferences(): string | null {
+    return localStorage.getItem(this._localStorageKey);
+  }
 }
 
 export const I18nService = I18n.getInstance();

package/templates/features/stylinNutin/src/styles/core/_utilities.scss.hbs

@@ -60,6 +60,16 @@
   }
 }
 
+.u-hide-on-small {
+  @include mixins.respond-to(medium) {
+    display: none;
+  }
+}
+
+.u-hide {
+    display: none;
+}
+
 // color
 .u-color-base {
   color: $text-color;
@@ -73,6 +83,10 @@
   color: $secondary-color;
 }
 
+.u-color-acc {
+  color: $accent-color;
+}
+
 .u-color-bg {
   color: $background-color;
 }

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

@@ -1,132 +0,0 @@
-@use "sass:map";
-@use "variables" as *;
-
-// snackbar
-.app-snackbar {
-  position: fixed;
-  left: 50%;
-  transform: translateX(-50%);
-  background: $snack-default;
-  color: white;
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  // z-index: 1000;
-  animation: fade-in 0.3s ease;
-}
-
-.app-snackbar--bottom { bottom: 1rem; }
-.app-snackbar--top { top: 1rem; }
-
-.app-snackbar--success { background: $snack-success; }
-.app-snackbar--error { background: $snack-error; }
-.app-snackbar--info { background: $snack-info; }
-
-.app-snackbar button {
-  background: transparent;
-  border: none;
-  color: #fff;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-@keyframes fade-in {
-  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
-  to { opacity: 1; transform: translateX(-50%) translateY(0); }
-}
-
-// popover
-/* Prevent scroll when popover is active */
-.no-scroll {
-  overflow: hidden;
-}
-
-.popover-overlay {
-  background: linear-gradient(to right, rgba($primary-color, .7), rgba($secondary-color, .7));
-  position: fixed;
-  inset: 0;
-  backdrop-filter: blur(5px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  // z-index: 9999;
-  opacity: 0;
-  transition: opacity 0.25s ease;
-    &.show {
-    opacity: 1;
-  }
-}
-
-.popover-wrapper {
-  position: relative;
-  background-color: $background-color;
-  border-radius: 10px transparent;
-  max-width: 600px;
-  width: 90%;
-  max-height: 90%;
-  overflow: auto;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-  transform: scale(0.95);
-  opacity: 0;
-  transition: opacity 1s ease, transform 1s ease;
-    &.show {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.popover-content {
-  position: relative;
-}
-
-.popover-close-button {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.75rem;
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-}
-
-.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 {
-    background-color: rgba($secondary-color, .7);
-    color: $background-color;
-  }
- }
-
-{{#if transition}}
-// view transition
-.app-view-transition {
-  opacity: 0;
-  transform: scale(0.95);
-  transition: all 300ms ease;
-
-  &.enter-active {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  &.exit-active {
-    opacity: 0;
-    transform: scale(0.98);
-  }
-}
-
-{{/if}}