@smartsoft001-mobilems/angular 2.15.0 → 2.16.0

package/fesm2022/smartsoft001-mobilems-angular.mjs

@@ -8,8 +8,8 @@ import * as moment from 'moment';
 import { lastValueFrom, combineLatest, firstValueFrom, Subject, of, throwError } from 'rxjs';
 import { map, filter, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, CommonModule, DOCUMENT } from '@angular/common';
-import { Router, ActivatedRoute, NavigationEnd, RouterOutlet, RouterModule } from '@angular/router';
+import { isPlatformBrowser, CommonModule, DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
+import { Router, ActivatedRoute, NavigationEnd, RouterOutlet, RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { CrudService, CrudFacade } from '@smartsoft001/crud-shell-angular';
 import * as _ from 'lodash';
@@ -1612,6 +1612,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
             args: [{ selector: 'smart-mobilems-header', standalone: true, imports: [], template: `` }]
         }] });
 
+class MenuComponent {
+    constructor() {
+        this.configsFacade = inject(ConfigsFacade);
+        this.router = inject(Router);
+        this.platformId = inject(PLATFORM_ID);
+        this.menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+        this.searchEnabled = input(false, ...(ngDevMode ? [{ debugName: "searchEnabled" }] : []));
+        this.config = computed(() => this.configsFacade.data, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.menuConfig = computed(() => {
+            const config = this.config();
+            return config?.theme ?? {};
+        }, ...(ngDevMode ? [{ debugName: "menuConfig" }] : []));
+        this.mobileBreakpoint = computed(() => {
+            return this.menuConfig()?.menu?.mobileBreakpoint ?? 960;
+        }, ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : []));
+        this.isMobileMenu = computed(() => {
+            if (!isPlatformBrowser(this.platformId)) {
+                return false;
+            }
+            return (typeof window !== 'undefined' &&
+                window.innerWidth <= this.mobileBreakpoint());
+        }, ...(ngDevMode ? [{ debugName: "isMobileMenu" }] : []));
+        this._menuOpenState = false;
+    }
+    toggleMenu() {
+        this._menuOpenState = !this._menuOpenState;
+    }
+    closeMenu() {
+        this._menuOpenState = false;
+    }
+    isOpened() {
+        return this._menuOpenState;
+    }
+    isRouteActive(route) {
+        return this.router.isActive(route, {
+            paths: 'exact',
+            queryParams: 'exact',
+            fragment: 'ignored',
+            matrixParams: 'ignored',
+        });
+    }
+    getMenuItemTitle(item) {
+        if (item.title) {
+            return item.title;
+        }
+        return this.isRouteActive(item.route)
+            ? `${item.label} (active)`
+            : item.label;
+    }
+    getMenuItemAriaLabel(item) {
+        if (item.ariaLabel) {
+            return item.ariaLabel;
+        }
+        return this.isRouteActive(item.route)
+            ? `${item.label} - Current page`
+            : item.label;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: MenuComponent, isStandalone: true, selector: "smart-mobilems-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, searchEnabled: { classPropertyName: "searchEnabled", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!searchEnabled()) {\n  <h2 class=\"smart-sr-only\">Main Menu</h2>\n\n  @if (isMobileMenu()) {\n    <div\n      class=\"smart-w-full smart-flex smart-flex-row smart-justify-end smart-items-stretch smart-py-[1.2rem]\"\n      [ngClass]=\"isOpened() ? '' : ''\"\n      role=\"navigation\"\n      attr.aria-label=\"Main Menu\"\n    >\n      <button\n        class=\"smart-h-[3.6rem] smart-relative smart-bg-transparent smart-border-0 smart-left-0 smart-flex smart-flex-row smart-items-center smart-text-[1.8rem] smart-font-bold smart-cursor-pointer\"\n        (click)=\"toggleMenu()\"\n        attr.aria-expanded=\"{{ isOpened() }}\"\n        attr.aria-label=\"{{ isOpened() ? 'Close menu' : 'Open menu' }}\"\n      >\n        @if (!isOpened()) {\n          <span\n            class=\"smart-text-[3rem] smart-text-black smart-mr-[0.6rem] smart-material-icons\"\n            >menu</span\n          >\n        } @else {\n          <span\n            class=\"smart-text-[3rem] smart-text-black smart-mr-[0.6rem] smart-material-icons\"\n            >close</span\n          >\n        }\n      </button>\n    </div>\n  }\n\n  @if (!isMobileMenu()) {\n    <div\n      class=\"smart-w-full smart-flex smart-flex-row smart-justify-end smart-h-full smart-p-0\"\n      role=\"navigation\"\n      attr.aria-label=\"Main Menu\"\n    >\n      <div role=\"menubar\">\n        <ng-container *ngTemplateOutlet=\"menuTemplate\"></ng-container>\n      </div>\n    </div>\n  }\n\n  @if (isMobileMenu() && isOpened()) {\n    <div\n      class=\"smart-w-full smart-flex smart-flex-row smart-justify-center smart-h-full smart-p-0 smart-border smart-border-[#f3f3f3] smart-bg-[#fefefe] smart-mb-[2.4rem] smart-shadow-[0_0.6rem_1.2rem_#efefef] smart-p-[1.2rem]\"\n    >\n      <div role=\"navigation\" aria-label=\"Main\">\n        <ng-container *ngTemplateOutlet=\"menuTemplate\"></ng-container>\n      </div>\n    </div>\n  }\n}\n\n<ng-template #menuTemplate>\n  <ul\n    id=\"main-menu\"\n    role=\"menu\"\n    class=\"smart-h-full smart-w-full smart-flex smart-flex-row smart-justify-end smart-items-stretch smart-flex-nowrap smart-list-none smart-p-0 smart-m-0 smart-gap-x-[0.3rem]\"\n    [ngClass]=\"\n      isMobileMenu()\n        ? 'smart-flex-wrap smart-justify-center smart-p-[1.2rem] smart-m-0'\n        : ''\n    \"\n  >\n    @for (item of menuItems(); track item.route) {\n      <li\n        class=\"smart-inline-flex smart-relative smart-w-auto smart-m-0\"\n        [ngClass]=\"isMobileMenu() ? 'smart-w-full smart-max-w-full' : ''\"\n      >\n        <a\n          class=\"smart-flex smart-items-center smart-flex-nowrap smart-text-black smart-transition-[border] smart-ease-in-out smart-duration-500 smart-border-b-[0.6rem] smart-border-b-transparent smart-cursor-pointer smart-justify-center smart-h-full smart-w-full smart-py-[1.2rem] smart-px-[1.8rem] smart-text-[1.6rem] smart-font-medium smart-whitespace-nowrap smart-m-0 smart-no-underline hover:smart-text-black hover:smart-bg-transparent hover:smart-border-b-[0.6rem] hover:smart-border-b-black\"\n          role=\"menuitem\"\n          [routerLink]=\"[item.route]\"\n          routerLinkActive=\"smart-cursor-default smart-text-black smart-bg-transparent smart-border-b-[0.6rem] smart-border-b-black\"\n          (click)=\"closeMenu()\"\n          [attr.title]=\"getMenuItemTitle(item)\"\n          [attr.aria-label]=\"getMenuItemAriaLabel(item)\"\n        >\n          @if (item.icon) {\n            <span\n              class=\"smart-text-[2.2rem] smart-mr-[0.4rem] smart-material-icons\"\n              >{{ item.icon }}</span\n            >\n          }\n          <span class=\"smart-inline-block\">{{ item.label }}</span>\n        </a>\n      </li>\n    }\n  </ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-mobilems-menu', standalone: true, imports: [NgClass, NgTemplateOutlet, RouterLink, RouterLinkActive], template: "@if (!searchEnabled()) {\n  <h2 class=\"smart-sr-only\">Main Menu</h2>\n\n  @if (isMobileMenu()) {\n    <div\n      class=\"smart-w-full smart-flex smart-flex-row smart-justify-end smart-items-stretch smart-py-[1.2rem]\"\n      [ngClass]=\"isOpened() ? '' : ''\"\n      role=\"navigation\"\n      attr.aria-label=\"Main Menu\"\n    >\n      <button\n        class=\"smart-h-[3.6rem] smart-relative smart-bg-transparent smart-border-0 smart-left-0 smart-flex smart-flex-row smart-items-center smart-text-[1.8rem] smart-font-bold smart-cursor-pointer\"\n        (click)=\"toggleMenu()\"\n        attr.aria-expanded=\"{{ isOpened() }}\"\n        attr.aria-label=\"{{ isOpened() ? 'Close menu' : 'Open menu' }}\"\n      >\n        @if (!isOpened()) {\n          <span\n            class=\"smart-text-[3rem] smart-text-black smart-mr-[0.6rem] smart-material-icons\"\n            >menu</span\n          >\n        } @else {\n          <span\n            class=\"smart-text-[3rem] smart-text-black smart-mr-[0.6rem] smart-material-icons\"\n            >close</span\n          >\n        }\n      </button>\n    </div>\n  }\n\n  @if (!isMobileMenu()) {\n    <div\n      class=\"smart-w-full smart-flex smart-flex-row smart-justify-end smart-h-full smart-p-0\"\n      role=\"navigation\"\n      attr.aria-label=\"Main Menu\"\n    >\n      <div role=\"menubar\">\n        <ng-container *ngTemplateOutlet=\"menuTemplate\"></ng-container>\n      </div>\n    </div>\n  }\n\n  @if (isMobileMenu() && isOpened()) {\n    <div\n      class=\"smart-w-full smart-flex smart-flex-row smart-justify-center smart-h-full smart-p-0 smart-border smart-border-[#f3f3f3] smart-bg-[#fefefe] smart-mb-[2.4rem] smart-shadow-[0_0.6rem_1.2rem_#efefef] smart-p-[1.2rem]\"\n    >\n      <div role=\"navigation\" aria-label=\"Main\">\n        <ng-container *ngTemplateOutlet=\"menuTemplate\"></ng-container>\n      </div>\n    </div>\n  }\n}\n\n<ng-template #menuTemplate>\n  <ul\n    id=\"main-menu\"\n    role=\"menu\"\n    class=\"smart-h-full smart-w-full smart-flex smart-flex-row smart-justify-end smart-items-stretch smart-flex-nowrap smart-list-none smart-p-0 smart-m-0 smart-gap-x-[0.3rem]\"\n    [ngClass]=\"\n      isMobileMenu()\n        ? 'smart-flex-wrap smart-justify-center smart-p-[1.2rem] smart-m-0'\n        : ''\n    \"\n  >\n    @for (item of menuItems(); track item.route) {\n      <li\n        class=\"smart-inline-flex smart-relative smart-w-auto smart-m-0\"\n        [ngClass]=\"isMobileMenu() ? 'smart-w-full smart-max-w-full' : ''\"\n      >\n        <a\n          class=\"smart-flex smart-items-center smart-flex-nowrap smart-text-black smart-transition-[border] smart-ease-in-out smart-duration-500 smart-border-b-[0.6rem] smart-border-b-transparent smart-cursor-pointer smart-justify-center smart-h-full smart-w-full smart-py-[1.2rem] smart-px-[1.8rem] smart-text-[1.6rem] smart-font-medium smart-whitespace-nowrap smart-m-0 smart-no-underline hover:smart-text-black hover:smart-bg-transparent hover:smart-border-b-[0.6rem] hover:smart-border-b-black\"\n          role=\"menuitem\"\n          [routerLink]=\"[item.route]\"\n          routerLinkActive=\"smart-cursor-default smart-text-black smart-bg-transparent smart-border-b-[0.6rem] smart-border-b-black\"\n          (click)=\"closeMenu()\"\n          [attr.title]=\"getMenuItemTitle(item)\"\n          [attr.aria-label]=\"getMenuItemAriaLabel(item)\"\n        >\n          @if (item.icon) {\n            <span\n              class=\"smart-text-[2.2rem] smart-mr-[0.4rem] smart-material-icons\"\n              >{{ item.icon }}</span\n            >\n          }\n          <span class=\"smart-inline-block\">{{ item.label }}</span>\n        </a>\n      </li>\n    }\n  </ul>\n</ng-template>\n" }]
+        }] });
+
 const COMPONENTS = [AppComponent];
 
 /**
@@ -1861,5 +1926,5 @@ const unauthorizedGuard = () => {
  * Generated bundle index. Do not edit.
  */
 
-export { AppComponent, AuthStorageService, COMPONENTS, ConfigsFacade, ConfigsService, ContrastService, CrudBaseService, DIRECTIVES, DictionaryService, FileUrlService, FiltersBaseComponent, FiltersContext, FooterComponent, GameType, GlobalService, HeaderComponent, HoverDirective, ImageBox, ListMode, MetaService, ModalContainerComponent, ModalRef, ModalService, PageComponent, SERVICES, ScrollTopComponent, ScrollableDirective, SeoService, SettingsService, SharedConfig, SharedModule, StyleService, TRANSLATE_DATA_PL, TranslationService, WcagService, authenticationGuard, environment, setTranslationsAndLang, unauthorizedGuard };
+export { AppComponent, AuthStorageService, COMPONENTS, ConfigsFacade, ConfigsService, ContrastService, CrudBaseService, DIRECTIVES, DictionaryService, FileUrlService, FiltersBaseComponent, FiltersContext, FooterComponent, GameType, GlobalService, HeaderComponent, HoverDirective, ImageBox, ListMode, MenuComponent, MetaService, ModalContainerComponent, ModalRef, ModalService, PageComponent, SERVICES, ScrollTopComponent, ScrollableDirective, SeoService, SettingsService, SharedConfig, SharedModule, StyleService, TRANSLATE_DATA_PL, TranslationService, WcagService, authenticationGuard, environment, setTranslationsAndLang, unauthorizedGuard };
 //# sourceMappingURL=smartsoft001-mobilems-angular.mjs.map