amt-ui
Version:
Angular material, tailwind template
388 lines (374 loc) • 70.4 kB
JavaScript
import * as i0 from '@angular/core';
import { PLATFORM_ID, Inject, Injectable, signal, inject, RendererFactory2, input, Component, NgModule } from '@angular/core';
import { isPlatformBrowser, NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
import * as i2 from '@angular/router';
import { Router, RouterOutlet, RouterModule } from '@angular/router';
import { Subject } from 'rxjs';
import * as i1$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i1 from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu';
import * as i3 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import screenfull from 'screenfull';
class StorageService {
isBrowser;
prefix = 'amt';
constructor(platformId) {
this.isBrowser = isPlatformBrowser(platformId);
}
set(key, value) {
if (this.isBrowser) {
localStorage.setItem(this.key(key), JSON.stringify(value));
}
}
get(key) {
try {
if (this.isBrowser) {
return JSON.parse(localStorage.getItem(this.key(key)) || '');
}
else {
return null;
}
}
catch (e) {
return null;
}
}
remove(key) {
if (this.isBrowser) {
return localStorage.removeItem(this.key(key));
}
}
exists(key) {
return this.get(key) !== null;
}
key(value) {
return `${this.prefix}-${value}`;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: StorageService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: StorageService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: StorageService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: Object, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }] });
class AmtThemeService {
settings = signal({ mode: 'dark', color: 'base', direction: 'ltr' });
storage = inject(StorageService);
renderer = inject(RendererFactory2).createRenderer(null, null);
constructor() {
this.loadDefaults();
}
set title(title) {
this.settings.update((settings) => {
settings.title = title;
return settings;
});
}
get title() {
return this.settings().title || '';
}
set direction(direction) {
this.settings.update((settings) => {
settings.direction = direction;
return settings;
});
}
get direction() {
return this.settings().direction || 'ltr';
}
set mode(mode) {
if (mode == 'system') {
mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
this.storage.set('mode', mode);
this.settings().mode = mode;
this.updateHtmlClass(mode);
}
get mode() {
return this.settings().mode || '';
}
toggleMode() {
this.mode = this.mode === 'dark' ? 'light' : 'dark';
}
set color(color) {
this.storage.set('color', color);
this.settings().color = color;
this.updateHtmlAttribute('data-theme', color);
}
get color() {
return this.settings().color || '';
}
loadDefaults() {
this.mode = this.storage.get('mode') || 'system';
this.color = this.storage.get('color') || 'base';
}
updateHtmlClass(className) {
const html = document.documentElement;
this.renderer.setAttribute(html, 'class', className);
}
updateHtmlAttribute(attribute, value) {
const html = document.documentElement;
this.renderer.setAttribute(html, attribute, value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AmtThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AmtThemeService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AmtThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class AmtMenuService {
showSideBar = signal(true);
pagesMenu = signal([]);
showMobileMenu = signal(false);
user = signal(null);
profileMenu = signal([]);
languages = signal([]);
router = inject(Router);
languageChanged$ = new Subject();
toggleSidebar() {
this.showSideBar.set(!this.showSideBar());
}
toggleSubMenu(submenu) {
submenu.expanded = !submenu.expanded;
}
isActive(instruction) {
return this.router.isActive(this.router.createUrlTree([instruction]), {
paths: 'subset',
queryParams: 'subset',
fragment: 'ignored',
matrixParams: 'ignored',
});
}
toggleMenu(menu) {
this.showSideBar.set(true);
menu.expanded = !menu.expanded;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AmtMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AmtMenuService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AmtMenuService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class AuthLayoutComponent {
themeService;
logoUrl = input('https://cdn.btretail.io/assets/images/full-logo.png');
bannerUrl = input('https://cdn.btretail.io/assets/images/banner-bi.png');
constructor(themeService) {
this.themeService = themeService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AuthLayoutComponent, deps: [{ token: AmtThemeService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.5", type: AuthLayoutComponent, isStandalone: true, selector: "amt-auth-layout", inputs: { logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, bannerUrl: { classPropertyName: "bannerUrl", publicName: "bannerUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex h-screen w-screen\">\n <div class=\"auth-bg bg-primary hidden flex-1 items-center justify-center bg-cover lg:flex\">\n <div class=\"max-w-2xl space-y-4 p-8 text-center text-white\">\n <img [src]=\"bannerUrl()\" [alt]=\"themeService.title\" />\n </div>\n </div>\n <div class=\"bg-background flex flex-1 items-center justify-center\">\n <div class=\"max-w-md overflow-y-auto px-4 sm:w-[500px]\">\n <!-- logo -->\n <a href=\"/\" class=\"flex items-center justify-center p-2\">\n <img [src]=\"logoUrl()\" [alt]=\"themeService.title\" />\n </a>\n <!-- Route -->\n <router-outlet></router-outlet>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatIconModule }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AuthLayoutComponent, decorators: [{
type: Component,
args: [{ selector: 'amt-auth-layout', imports: [
RouterOutlet,
MatButtonModule,
MatMenuModule,
MatIconModule
], standalone: true, template: "<div class=\"flex h-screen w-screen\">\n <div class=\"auth-bg bg-primary hidden flex-1 items-center justify-center bg-cover lg:flex\">\n <div class=\"max-w-2xl space-y-4 p-8 text-center text-white\">\n <img [src]=\"bannerUrl()\" [alt]=\"themeService.title\" />\n </div>\n </div>\n <div class=\"bg-background flex flex-1 items-center justify-center\">\n <div class=\"max-w-md overflow-y-auto px-4 sm:w-[500px]\">\n <!-- logo -->\n <a href=\"/\" class=\"flex items-center justify-center p-2\">\n <img [src]=\"logoUrl()\" [alt]=\"themeService.title\" />\n </a>\n <!-- Route -->\n <router-outlet></router-outlet>\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ type: AmtThemeService }] });
class SidebarSubMenuComponent {
menuService;
submenu = input({});
constructor(menuService) {
this.menuService = menuService;
}
toggleMenu(menu) {
this.menuService.toggleSubMenu(menu);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SidebarSubMenuComponent, deps: [{ token: AmtMenuService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: SidebarSubMenuComponent, isStandalone: true, selector: "amt-sidebar-sub-menu", inputs: { submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"max-h-0 overflow-hidden pt-1 transition-all duration-500 ltr:pl-4 rtl:pr-4\"\n [ngClass]=\"{ hidden: !menuService.showSideBar(), 'max-h-screen': submenu().expanded }\">\n <ul class=\"border-border text-muted-foreground flex flex-col border-dashed ltr:border-l ltr:pl-2 rtl:border-r rtl:pr-2\">\n @for (sub of submenu().children; track sub) {\n <li>\n <div class=\"text-muted-foreground hover:text-primary relative flex\" (click)=\"toggleMenu(sub)\">\n <!-- Condition -->\n <ng-container\n [ngTemplateOutlet]=\"sub.children ? childMenu : parentMenu\"\n [ngTemplateOutletContext]=\"{ sub: sub }\">\n </ng-container>\n\n <!-- Parent Menu -->\n <ng-template #parentMenu let-sub=\"sub\">\n <a\n [routerLink]=\"sub.route\"\n routerLinkActive=\"text-primary\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"hover:bg-card inline-block w-full rounded-lg px-4 py-2 text-xs\">\n {{ sub.label }}\n </a>\n @if(menuService.isActive(sub.route)){\n <span\n class=\"size-1.5 bg-primary absolute flex translate-y-3.5 items-center rounded-full ltr:-translate-x-[11.5px] rtl:translate-x-[11.5px]\">\n </span>\n }\n </ng-template>\n\n <!-- Child Menu -->\n <ng-template #childMenu let-sub=\"sub\">\n <a class=\"inline-block w-full cursor-pointer px-4 py-2 text-xs\">\n {{ sub.label }}\n </a>\n <button class=\"text-foreground/50 flex cursor-pointer items-center justify-end px-2 transition-all duration-500\"\n [ngClass]=\"{ hidden: !menuService.showSideBar() }\">\n <mat-icon>{{sub.expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</mat-icon>\n </button>\n </ng-template>\n </div>\n <!-- Submenu items -->\n @if(sub.children?.length){\n <amt-sidebar-sub-menu [submenu]=\"sub\"></amt-sidebar-sub-menu>\n }\n </li>\n }\n </ul>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SidebarSubMenuComponent, selector: "amt-sidebar-sub-menu", inputs: ["submenu"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SidebarSubMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'amt-sidebar-sub-menu', imports: [
NgClass,
NgTemplateOutlet,
RouterModule,
MatIconModule
], template: "<div class=\"max-h-0 overflow-hidden pt-1 transition-all duration-500 ltr:pl-4 rtl:pr-4\"\n [ngClass]=\"{ hidden: !menuService.showSideBar(), 'max-h-screen': submenu().expanded }\">\n <ul class=\"border-border text-muted-foreground flex flex-col border-dashed ltr:border-l ltr:pl-2 rtl:border-r rtl:pr-2\">\n @for (sub of submenu().children; track sub) {\n <li>\n <div class=\"text-muted-foreground hover:text-primary relative flex\" (click)=\"toggleMenu(sub)\">\n <!-- Condition -->\n <ng-container\n [ngTemplateOutlet]=\"sub.children ? childMenu : parentMenu\"\n [ngTemplateOutletContext]=\"{ sub: sub }\">\n </ng-container>\n\n <!-- Parent Menu -->\n <ng-template #parentMenu let-sub=\"sub\">\n <a\n [routerLink]=\"sub.route\"\n routerLinkActive=\"text-primary\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"hover:bg-card inline-block w-full rounded-lg px-4 py-2 text-xs\">\n {{ sub.label }}\n </a>\n @if(menuService.isActive(sub.route)){\n <span\n class=\"size-1.5 bg-primary absolute flex translate-y-3.5 items-center rounded-full ltr:-translate-x-[11.5px] rtl:translate-x-[11.5px]\">\n </span>\n }\n </ng-template>\n\n <!-- Child Menu -->\n <ng-template #childMenu let-sub=\"sub\">\n <a class=\"inline-block w-full cursor-pointer px-4 py-2 text-xs\">\n {{ sub.label }}\n </a>\n <button class=\"text-foreground/50 flex cursor-pointer items-center justify-end px-2 transition-all duration-500\"\n [ngClass]=\"{ hidden: !menuService.showSideBar() }\">\n <mat-icon>{{sub.expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</mat-icon>\n </button>\n </ng-template>\n </div>\n <!-- Submenu items -->\n @if(sub.children?.length){\n <amt-sidebar-sub-menu [submenu]=\"sub\"></amt-sidebar-sub-menu>\n }\n </li>\n }\n </ul>\n</div>\n" }]
}], ctorParameters: () => [{ type: AmtMenuService }] });
class SidebarMenuComponent {
menuService;
constructor(menuService) {
this.menuService = menuService;
}
toggleMenu(subMenu) {
this.menuService.toggleMenu(subMenu);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SidebarMenuComponent, deps: [{ token: AmtMenuService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: SidebarMenuComponent, isStandalone: true, selector: "amt-sidebar-menu", ngImport: i0, template: "@for (menu of menuService.pagesMenu(); track menu) {\n <div>\n @if (menuService.showSideBar()) {\n <div class=\"mx-1 flex items-center justify-between py-3\">\n <small [ngClass]=\"{hidden: !menuService.showSideBar()}\" class=\"text-muted-foreground/50 text-xs font-semibold\">\n {{ menu.group }}\n </small>\n </div>\n }\n\n <ul class=\"flex flex-col\">\n <!-- List items -->\n @for (item of menu.items; track item) {\n <li>\n <!-- Menu List -->\n <div class=\"text-muted-foreground hover:text-foreground group relative flex grow items-center gap-4 rounded-lg px-2\"\n (click)=\"toggleMenu(item)\" [ngClass]=\"{\n 'hover:bg-primary/10': !menuService.showSideBar() && item.active,\n 'hover:bg-card/50': !menuService.showSideBar()\n }\">\n <!-- Icon -->\n <div [ngClass]=\"item.active && !menuService.showSideBar() ? 'text-primary' : 'text-muted-foreground/50'\">\n <mat-icon>{{ item.icon }}</mat-icon>\n </div>\n\n <!-- Condition -->\n <ng-container [ngTemplateOutlet]=\"item.children ? childMenu : parentMenu\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-container>\n\n <!-- Workaround:: Enable routerLink -->\n <ng-template #parentMenu let-item=\"item\">\n <div class=\"text-muted-foreground hover:text-primary flex h-[36px] cursor-pointer items-center justify-start rounded-sm\"\n routerLink=\"{{ item.route }}\">\n <a class=\"truncate text-xs font-semibold tracking-wide focus:outline-hidden\"\n routerLinkActive=\"text-primary\" [ngClass]=\"{hidden: !menuService.showSideBar()}\">\n {{ item.label }}\n </a>\n </div>\n </ng-template>\n\n <!-- Workaround:: Disable routerLink -->\n <ng-template #childMenu let-item=\"item\">\n <div class=\"flex h-9 grow cursor-pointer items-center justify-start rounded-sm\">\n <a class=\"text-muted-foreground group-hover:text-primary truncate text-xs font-semibold tracking-wide focus:outline-hidden\"\n [ngClass]=\"{hidden: !menuService.showSideBar()}\">\n {{ item.label }}\n </a>\n </div>\n </ng-template>\n\n <!-- Arrow Icon -->\n @if (item.children) {\n <button class=\"text-foreground/50 flex cursor-pointer items-center justify-end p-0 transition-all duration-500 ltr:right-0 rtl:left-0\"\n [ngClass]=\"{ hidden: !menuService.showSideBar() }\">\n <mat-icon>{{item.expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</mat-icon>\n </button>\n }\n\n <!-- Tooltip -->\n @if (!menuService.showSideBar()) {\n <div class=\"z-1 fixed h-[36px]\">\n <span class=\"z-1 bg-foreground text-background absolute w-auto min-w-max translate-y-[2px] scale-0 rounded-md p-2 text-xs font-bold shadow-md transition-all duration-200 group-hover:scale-100 ltr:origin-left ltr:translate-x-10 rtl:origin-right rtl:-translate-x-10\">\n {{ item.label }}\n </span>\n </div>\n }\n </div>\n\n <!-- Submenu items -->\n <amt-sidebar-sub-menu [submenu]=\"item\"></amt-sidebar-sub-menu>\n </li>\n }\n </ul>\n\n @if(menu.separator) {\n <div class=\"py-3\">\n <hr class=\"border-border border-dashed\" />\n </div>\n }\n </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SidebarSubMenuComponent, selector: "amt-sidebar-sub-menu", inputs: ["submenu"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SidebarMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'amt-sidebar-menu', imports: [
NgClass,
NgTemplateOutlet,
RouterModule,
SidebarSubMenuComponent,
MatIconModule
], template: "@for (menu of menuService.pagesMenu(); track menu) {\n <div>\n @if (menuService.showSideBar()) {\n <div class=\"mx-1 flex items-center justify-between py-3\">\n <small [ngClass]=\"{hidden: !menuService.showSideBar()}\" class=\"text-muted-foreground/50 text-xs font-semibold\">\n {{ menu.group }}\n </small>\n </div>\n }\n\n <ul class=\"flex flex-col\">\n <!-- List items -->\n @for (item of menu.items; track item) {\n <li>\n <!-- Menu List -->\n <div class=\"text-muted-foreground hover:text-foreground group relative flex grow items-center gap-4 rounded-lg px-2\"\n (click)=\"toggleMenu(item)\" [ngClass]=\"{\n 'hover:bg-primary/10': !menuService.showSideBar() && item.active,\n 'hover:bg-card/50': !menuService.showSideBar()\n }\">\n <!-- Icon -->\n <div [ngClass]=\"item.active && !menuService.showSideBar() ? 'text-primary' : 'text-muted-foreground/50'\">\n <mat-icon>{{ item.icon }}</mat-icon>\n </div>\n\n <!-- Condition -->\n <ng-container [ngTemplateOutlet]=\"item.children ? childMenu : parentMenu\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-container>\n\n <!-- Workaround:: Enable routerLink -->\n <ng-template #parentMenu let-item=\"item\">\n <div class=\"text-muted-foreground hover:text-primary flex h-[36px] cursor-pointer items-center justify-start rounded-sm\"\n routerLink=\"{{ item.route }}\">\n <a class=\"truncate text-xs font-semibold tracking-wide focus:outline-hidden\"\n routerLinkActive=\"text-primary\" [ngClass]=\"{hidden: !menuService.showSideBar()}\">\n {{ item.label }}\n </a>\n </div>\n </ng-template>\n\n <!-- Workaround:: Disable routerLink -->\n <ng-template #childMenu let-item=\"item\">\n <div class=\"flex h-9 grow cursor-pointer items-center justify-start rounded-sm\">\n <a class=\"text-muted-foreground group-hover:text-primary truncate text-xs font-semibold tracking-wide focus:outline-hidden\"\n [ngClass]=\"{hidden: !menuService.showSideBar()}\">\n {{ item.label }}\n </a>\n </div>\n </ng-template>\n\n <!-- Arrow Icon -->\n @if (item.children) {\n <button class=\"text-foreground/50 flex cursor-pointer items-center justify-end p-0 transition-all duration-500 ltr:right-0 rtl:left-0\"\n [ngClass]=\"{ hidden: !menuService.showSideBar() }\">\n <mat-icon>{{item.expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</mat-icon>\n </button>\n }\n\n <!-- Tooltip -->\n @if (!menuService.showSideBar()) {\n <div class=\"z-1 fixed h-[36px]\">\n <span class=\"z-1 bg-foreground text-background absolute w-auto min-w-max translate-y-[2px] scale-0 rounded-md p-2 text-xs font-bold shadow-md transition-all duration-200 group-hover:scale-100 ltr:origin-left ltr:translate-x-10 rtl:origin-right rtl:-translate-x-10\">\n {{ item.label }}\n </span>\n </div>\n }\n </div>\n\n <!-- Submenu items -->\n <amt-sidebar-sub-menu [submenu]=\"item\"></amt-sidebar-sub-menu>\n </li>\n }\n </ul>\n\n @if(menu.separator) {\n <div class=\"py-3\">\n <hr class=\"border-border border-dashed\" />\n </div>\n }\n </div>\n}\n" }]
}], ctorParameters: () => [{ type: AmtMenuService }] });
class SidebarComponent {
menuService = inject(AmtMenuService);
themeService = inject(AmtThemeService);
constructor() {
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: SidebarComponent, isStandalone: true, selector: "amt-sidebar", ngImport: i0, template: "<nav class=\"bg-background hidden h-full flex-col justify-between pt-3 transition-all duration-300 lg:flex\"\n [ngClass]=\"menuService.showSideBar() ? 'w-[210px] xl:w-[280px]' : 'w-[70px]'\">\n <div class=\"overflow-hidden\">\n <!-- Logo -->\n <div [ngClass]=\"menuService.showSideBar() ? 'justify-between' : 'justify-center'\"\n class=\"mx-4 mb-2 flex h-9 items-center\">\n @if (menuService.showSideBar()) {\n <div class=\"flex items-center\">\n <a class=\"bg-primary flex cursor-pointer items-center justify-center rounded-sm p-2 focus:outline-hidden focus:ring-1\"\n (click)=\"menuService.toggleSidebar()\">\n<!-- <svg-icon src=\"assets/icons/logo.svg\"> </svg-icon>-->\n </a>\n <b class=\"text-foreground ps-2 ml-1 grow text-sm font-bold\">\n {{ themeService.title }}\n </b>\n </div>\n }\n\n <button class=\"text-muted-foreground/50 hover:text-muted-foreground flex items-center justify-center rounded-md p-2 transition-all duration-200 focus:outline-hidden\"\n (click)=\"menuService.toggleSidebar()\" [ngClass]=\"{ 'rotate-180': !menuService.showSideBar() }\">\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n </div>\n\n <!-- Menu Items -->\n <div class=\"scrollbar-thumb--sm scrollbar-track-rounded scrollbar-thin scrollbar-track-transparent scrollbar-thumb-card h-full overflow-auto px-4\">\n <amt-sidebar-menu />\n </div>\n </div>\n</nav>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SidebarMenuComponent, selector: "amt-sidebar-menu" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SidebarComponent, decorators: [{
type: Component,
args: [{ selector: 'amt-sidebar', imports: [
NgClass,
MatIconModule,
SidebarMenuComponent
], template: "<nav class=\"bg-background hidden h-full flex-col justify-between pt-3 transition-all duration-300 lg:flex\"\n [ngClass]=\"menuService.showSideBar() ? 'w-[210px] xl:w-[280px]' : 'w-[70px]'\">\n <div class=\"overflow-hidden\">\n <!-- Logo -->\n <div [ngClass]=\"menuService.showSideBar() ? 'justify-between' : 'justify-center'\"\n class=\"mx-4 mb-2 flex h-9 items-center\">\n @if (menuService.showSideBar()) {\n <div class=\"flex items-center\">\n <a class=\"bg-primary flex cursor-pointer items-center justify-center rounded-sm p-2 focus:outline-hidden focus:ring-1\"\n (click)=\"menuService.toggleSidebar()\">\n<!-- <svg-icon src=\"assets/icons/logo.svg\"> </svg-icon>-->\n </a>\n <b class=\"text-foreground ps-2 ml-1 grow text-sm font-bold\">\n {{ themeService.title }}\n </b>\n </div>\n }\n\n <button class=\"text-muted-foreground/50 hover:text-muted-foreground flex items-center justify-center rounded-md p-2 transition-all duration-200 focus:outline-hidden\"\n (click)=\"menuService.toggleSidebar()\" [ngClass]=\"{ 'rotate-180': !menuService.showSideBar() }\">\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n </div>\n\n <!-- Menu Items -->\n <div class=\"scrollbar-thumb--sm scrollbar-track-rounded scrollbar-thin scrollbar-track-transparent scrollbar-thumb-card h-full overflow-auto px-4\">\n <amt-sidebar-menu />\n </div>\n </div>\n</nav>\n" }]
}], ctorParameters: () => [] });
class NavbarProfileComponent {
amtMenuService = inject(AmtMenuService);
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: NavbarProfileComponent, isStandalone: true, selector: "amt-navbar-profile", ngImport: i0, template: "<button [matMenuTriggerFor]=\"menuProfile\" class=\"relative flex rounded-full bg-card text-sm h-9 w-9\" type=\"button\">\n @if(amtMenuService.user()?.photo) {\n <img class=\"h-9 w-9 rounded-md\" [src]=\"amtMenuService.user()?.photo\" [alt]=\"amtMenuService.user()?.fullName\" />\n } @else {\n <div class=\"rounded-md inline-flex items-center justify-center w-9 h-9 bg-gray-100 dark:bg-gray-600\">\n <span class=\"font-medium text-gray-600 dark:text-gray-300\">{{amtMenuService.user()?.initials}}</span>\n </div>\n }\n</button>\n\n<mat-menu #menuProfile=\"matMenu\">\n <div class=\"flex-row flex items-center px-4 pb-4 mt-2 -m-3\">\n <div class=\"w-10 shrink-0\">\n @if(amtMenuService.user()?.photo) {\n <img class=\"h-9 w-9 rounded-md\" [src]=\"amtMenuService.user()?.photo\" [alt]=\"amtMenuService.user()?.fullName\" />\n } @else {\n <div class=\"rounded-md inline-flex items-center justify-center w-9 h-9 bg-gray-100 dark:bg-gray-600\">\n <span class=\"font-medium text-gray-600 dark:text-gray-300\">{{amtMenuService.user()?.initials}}</span>\n </div>\n }\n </div>\n <div class=\"overflow-hidden px-2 text-sm font-semibold text-foreground\">\n {{amtMenuService.user()?.fullName}}\n <p class=\"truncate text-ellipsis text-xs font-semibold text-muted-foreground\">{{amtMenuService.user()?.email}}</p>\n </div>\n </div>\n\n <div class=\"border-b border-dashed border-border my-2\"></div>\n\n @for (item of amtMenuService.profileMenu(); track item) {\n <button mat-menu-item [routerLink]=\"item.route\" (click)=\"item.click ? item.click() : null\">\n <mat-icon>{{item.icon}}</mat-icon>{{ item.label }}\n </button>\n }\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarProfileComponent, decorators: [{
type: Component,
args: [{ selector: 'amt-navbar-profile', imports: [
MatMenuModule,
RouterModule,
MatIconModule
], template: "<button [matMenuTriggerFor]=\"menuProfile\" class=\"relative flex rounded-full bg-card text-sm h-9 w-9\" type=\"button\">\n @if(amtMenuService.user()?.photo) {\n <img class=\"h-9 w-9 rounded-md\" [src]=\"amtMenuService.user()?.photo\" [alt]=\"amtMenuService.user()?.fullName\" />\n } @else {\n <div class=\"rounded-md inline-flex items-center justify-center w-9 h-9 bg-gray-100 dark:bg-gray-600\">\n <span class=\"font-medium text-gray-600 dark:text-gray-300\">{{amtMenuService.user()?.initials}}</span>\n </div>\n }\n</button>\n\n<mat-menu #menuProfile=\"matMenu\">\n <div class=\"flex-row flex items-center px-4 pb-4 mt-2 -m-3\">\n <div class=\"w-10 shrink-0\">\n @if(amtMenuService.user()?.photo) {\n <img class=\"h-9 w-9 rounded-md\" [src]=\"amtMenuService.user()?.photo\" [alt]=\"amtMenuService.user()?.fullName\" />\n } @else {\n <div class=\"rounded-md inline-flex items-center justify-center w-9 h-9 bg-gray-100 dark:bg-gray-600\">\n <span class=\"font-medium text-gray-600 dark:text-gray-300\">{{amtMenuService.user()?.initials}}</span>\n </div>\n }\n </div>\n <div class=\"overflow-hidden px-2 text-sm font-semibold text-foreground\">\n {{amtMenuService.user()?.fullName}}\n <p class=\"truncate text-ellipsis text-xs font-semibold text-muted-foreground\">{{amtMenuService.user()?.email}}</p>\n </div>\n </div>\n\n <div class=\"border-b border-dashed border-border my-2\"></div>\n\n @for (item of amtMenuService.profileMenu(); track item) {\n <button mat-menu-item [routerLink]=\"item.route\" (click)=\"item.click ? item.click() : null\">\n <mat-icon>{{item.icon}}</mat-icon>{{ item.label }}\n </button>\n }\n</mat-menu>\n" }]
}] });
class NavbarLanguagesComponent {
amtMenuService = inject(AmtMenuService);
changeLanguage(language) {
this.amtMenuService.languageChanged$.next(language);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarLanguagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: NavbarLanguagesComponent, isStandalone: true, selector: "amt-navbar-languages", ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"menuLanguage\">\n <mat-icon class=\"text-muted-foreground/50\">translate</mat-icon>\n</button>\n\n<mat-menu #menuLanguage=\"matMenu\">\n <div class=\"text-center font-semibold px-4 pb-2 text-muted-foreground\" i18n=\"@@choose_language\">\n Choose Language\n </div>\n @for (language of amtMenuService.languages(); track language) {\n <button mat-menu-item (click)=\"changeLanguage(language)\">\n <span class=\"rounded-full me-3 scale-150\" [ngClass]=\"language.flagClass\"></span>\n <span>{{language.title}}</span>\n </button>\n }\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarLanguagesComponent, decorators: [{
type: Component,
args: [{ selector: 'amt-navbar-languages', imports: [
MatButtonModule,
MatMenuModule,
MatIconModule,
NgClass
], template: "<button mat-icon-button [matMenuTriggerFor]=\"menuLanguage\">\n <mat-icon class=\"text-muted-foreground/50\">translate</mat-icon>\n</button>\n\n<mat-menu #menuLanguage=\"matMenu\">\n <div class=\"text-center font-semibold px-4 pb-2 text-muted-foreground\" i18n=\"@@choose_language\">\n Choose Language\n </div>\n @for (language of amtMenuService.languages(); track language) {\n <button mat-menu-item (click)=\"changeLanguage(language)\">\n <span class=\"rounded-full me-3 scale-150\" [ngClass]=\"language.flagClass\"></span>\n <span>{{language.title}}</span>\n </button>\n }\n</mat-menu>\n" }]
}] });
class NavbarThemeComponent {
amtThemeService = inject(AmtThemeService);
toggleThemeMode() {
this.amtThemeService.mode = this.amtThemeService.mode == 'light' ? 'dark' : 'light';
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: NavbarThemeComponent, isStandalone: true, selector: "amt-navbar-theme", ngImport: i0, template: "<button mat-icon-button (click)=\"toggleThemeMode()\">\n <mat-icon class=\"text-muted-foreground/50\">\n {{amtThemeService.mode == 'dark' ? 'light_mode' : 'dark_mode'}}\n </mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarThemeComponent, decorators: [{
type: Component,
args: [{ selector: 'amt-navbar-theme', imports: [
MatButtonModule,
MatIconModule
], template: "<button mat-icon-button (click)=\"toggleThemeMode()\">\n <mat-icon class=\"text-muted-foreground/50\">\n {{amtThemeService.mode == 'dark' ? 'light_mode' : 'dark_mode'}}\n </mat-icon>\n</button>\n" }]
}] });
class NavbarColorsComponent {
amtThemeService = inject(AmtThemeService);
themeColors = [
{ name: 'base', code: '#e11d48' },
{ name: 'yellow', code: '#f59e0b' },
{ name: 'green', code: '#22c55e' },
{ name: 'blue', code: '#3b82f6' },
{ name: 'orange', code: '#ea580c' },
{ name: 'red', code: '#cc0022' },
{ name: 'violet', code: '#6d28d9' }
];
toggleThemeColor(color) {
this.amtThemeService.color = color;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: NavbarColorsComponent, isStandalone: true, selector: "amt-navbar-colors", ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"menuPalette\">\n <mat-icon class=\"text-muted-foreground/50\">palette</mat-icon>\n</button>\n\n<mat-menu #menuPalette=\"matMenu\">\n @for (item of themeColors; track $index) {\n <button mat-menu-item (click)=\"toggleThemeColor(item.name)\">\n <div class=\"flex\">\n <span [style.background]=\"item.code\" class=\"me-1 h-5 w-5 rounded-full\"></span>{{ item.name }}\n </div>\n </button>\n }\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarColorsComponent, decorators: [{
type: Component,
args: [{ selector: 'amt-navbar-colors', imports: [
MatMenuModule,
MatButtonModule,
MatIconModule
], template: "<button mat-icon-button [matMenuTriggerFor]=\"menuPalette\">\n <mat-icon class=\"text-muted-foreground/50\">palette</mat-icon>\n</button>\n\n<mat-menu #menuPalette=\"matMenu\">\n @for (item of themeColors; track $index) {\n <button mat-menu-item (click)=\"toggleThemeColor(item.name)\">\n <div class=\"flex\">\n <span [style.background]=\"item.code\" class=\"me-1 h-5 w-5 rounded-full\"></span>{{ item.name }}\n </div>\n </button>\n }\n</mat-menu>\n" }]
}] });
class NavbarFullscreenComponent {
isFullscreen = false;
ngOnInit() {
screenfull.onchange(() => (this.isFullscreen = screenfull.isFullscreen));
}
toggleFullscreen() {
if (screenfull.isEnabled) {
screenfull.isFullscreen ? screenfull.exit().then() : screenfull.request().then();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarFullscreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: NavbarFullscreenComponent, isStandalone: true, selector: "amt-navbar-fullscreen", ngImport: i0, template: "<button mat-icon-button (click)=\"toggleFullscreen()\">\n <mat-icon class=\"text-muted-foreground/50\">{{isFullscreen ? 'fullscreen_exit' : 'fullscreen'}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarFullscreenComponent, decorators: [{
type: Component,
args: [{ selector: 'amt-navbar-fullscreen', imports: [
MatButtonModule,
MatIconModule
], template: "<button mat-icon-button (click)=\"toggleFullscreen()\">\n <mat-icon class=\"text-muted-foreground/50\">{{isFullscreen ? 'fullscreen_exit' : 'fullscreen'}}</mat-icon>\n</button>\n" }]
}] });
class NavbarResponsiveComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarResponsiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: NavbarResponsiveComponent, isStandalone: true, selector: "amt-navbar-responsive", ngImport: i0, template: "<div class=\"rounded-md bg-primary py-1 px-3 align-middle text-sm font-medium text-primary-foreground\">\n <span class=\"hidden sm:block md:hidden\">sm</span>\n <span class=\"hidden md:block lg:hidden\">md</span>\n <span class=\"hidden lg:block xl:hidden\">lg</span>\n <span class=\"hidden xl:block 2xl:hidden\">xl</span>\n <span class=\"hidden 2xl:block\">2xl</span>\n</div>\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarResponsiveComponent, decorators: [{
type: Component,
args: [{ selector: 'amt-navbar-responsive', imports: [], template: "<div class=\"rounded-md bg-primary py-1 px-3 align-middle text-sm font-medium text-primary-foreground\">\n <span class=\"hidden sm:block md:hidden\">sm</span>\n <span class=\"hidden md:block lg:hidden\">md</span>\n <span class=\"hidden lg:block xl:hidden\">lg</span>\n <span class=\"hidden xl:block 2xl:hidden\">xl</span>\n <span class=\"hidden 2xl:block\">2xl</span>\n</div>\n" }]
}] });
class NavbarNotificationsComponent {
notifications = [
{
icon: 'notifications_active',
name: 'Jese Leos',
time: 'a few moments ago',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
},
{
icon: 'alarm',
name: 'Joseph Mcfall',
time: '10 minutes ago',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
},
{
icon: 'face_5',
name: 'Bonnie Green',
time: '44 minutes ago',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
},
{
icon: 'face_5',
name: 'Leslie Livingston',
time: '1 hour ago',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
},
{
icon: 'timer_5',
name: 'Robert Brown',
time: '3 hours ago',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
},
];
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NavbarNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: NavbarNotificationsComponent, isStandalone: true, selector: "amt-navbar-notifications", ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"menuNotifications\">\n <mat-icon class=\"text-muted-foreground/50\">notifications\n </mat-icon>\n</button>\n\n<mat-menu #menuNotifications=\"matMenu\">\n <div class=\"-m-3\">\n <div class=\"block px-4 py-2 font-medium text-center text-gray-700 rounded-t-lg bg-gray-50 dark:bg-gray-800 dark:text-white\">\n Notifications\n </div>\n <div class=\"divide-y divide-gray-100 dark:divide-gray-700\">\n @for (message of notifications; track message) {\n <a href=\"#\" class=\"flex px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700\">\n <div class=\"flex-shrink-0\">\n <mat-icon class=\"text-muted-foreground/50\">{{message.icon}}</mat-icon>\n </div>\n <div class=\"w-full ps-3\">\n <div class=\"text-gray-500 text-sm mb-1.5 dark:text-gray-400\">{{message.message}}</div>\n <div class=\"text-xs