@yoozsoft/yoozsoft-ng 5.3.5 → 7.1.1

package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs

@@ -1,123 +1,123 @@
+import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { NgClass } from '@angular/common';
-import * as i1 from '@angular/router';
-import { NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
+import { inject, PLATFORM_ID, signal, Injectable, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
+import { filter, map } from 'rxjs';
 
 class SidebarService {
-    constructor() { }
-    _isSidebarToggled$ = new BehaviorSubject(true);
-    _isSidebar$ = new BehaviorSubject(false);
-    /**
-     * Sidebar toggled state. Default value is true.
-     */
-    get isSidebarToggled$() { return this._isSidebarToggled$.asObservable(); }
-    /**
-     * Sidebar display state. Default value is false.
-     */
-    get isSidebar$() { return this._isSidebar$.asObservable(); }
-    /**
-     * Change sidebar toggle state.
-     */
-    toggleSidebar() {
-        this._isSidebarToggled$.next(!this._isSidebarToggled$.value);
+    platformId = inject(PLATFORM_ID);
+    mediaQuery;
+    _isMobile = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
+    _isOpen = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
+    isMobile = this._isMobile.asReadonly();
+    isOpen = this._isOpen.asReadonly();
+    constructor() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.mediaQuery = window.matchMedia('(max-width: 992px)');
+            this._isMobile.set(this.mediaQuery.matches);
+            this._isOpen.set(!this.mediaQuery.matches);
+            this.mediaQuery.addEventListener('change', e => {
+                this._isMobile.set(e.matches);
+                if (e.matches) {
+                    this.close();
+                }
+                else {
+                    this.open();
+                }
+            });
+        }
     }
-    /**
-     * Set sidebar toggle state.
-     * @param isToggled
-     */
-    setIsSidebarToggled(isToggled) {
-        this._isSidebarToggled$.next(isToggled);
+    toggle() {
+        this._isOpen.update(v => !v);
     }
-    /**
-     * Set sidebar toggle state.
-     * @param isSidebar
-     */
-    setIsSidebar(isSidebar) {
-        this._isSidebar$.next(isSidebar);
+    open() {
+        this._isOpen.set(true);
     }
-    /**
-     * Return sidebar toggle state.
-     */
-    get sidebarState() {
-        return this._isSidebarToggled$.getValue();
+    close() {
+        this._isOpen.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SidebarService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SidebarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SidebarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SidebarService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
 
-class YsSidebarComponent {
-    router;
-    subscription;
-    currentItem;
-    currentItemState = [];
-    _items = [];
-    get items() { return this._items; }
-    ;
-    set items(value) { this._items = value; }
-    profile = null;
-    styleClass;
-    itemsStyleClass;
-    constructor(router) {
-        this.router = router;
-        this.subscription = router.events.subscribe(e => {
-            if (e instanceof NavigationEnd) {
-                this.currentItem = undefined;
-                this.currentItemState = [];
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
+class YsSidebar {
+    router = inject(Router);
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    profile = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "profile" }] : /* istanbul ignore next */ []));
+    styleClass = input('bg-body', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    showClose = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
+    closeStyleClass = input('btn-close-white', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeStyleClass" }] : /* istanbul ignore next */ []));
+    close = output();
+    itemSelected = output();
+    fullName = computed(() => [this.profile()?.firstName, this.profile()?.lastName].filter(Boolean).join(' '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullName" }] : /* istanbul ignore next */ []));
+    currentUrl = toSignal(this.router.events.pipe(filter((event) => event instanceof NavigationEnd), map(() => this.router.url)), {
+        initialValue: this.router.url,
+    });
+    expandedMenu = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedMenu" }] : /* istanbul ignore next */ []));
+    getItemKey(item) {
+        return item.id ?? item.route ?? item.label ?? null;
     }
-    get fullName() { return `${this.profile?.firstName} ${this.profile?.lastName}`; }
-    openItem(item) {
-        if (item.isOpen) {
-            item.isOpen = !item.isOpen;
+    toggle(item) {
+        const key = this.getItemKey(item);
+        if (!key) {
             return;
         }
-        this.items.forEach(x => x.isOpen = false);
-        item.isOpen = !item.isOpen;
+        this.expandedMenu.update((current) => (current === key ? null : key));
+    }
+    isExpanded(item) {
+        return this.expandedMenu() === this.getItemKey(item);
+    }
+    isParentActive(item) {
+        const url = this.currentUrl();
+        return (item.children?.some((child) => child.route && (url === child.route || url.startsWith(child.route + '/'))) ?? false);
+    }
+    closeSidebar() {
+        this.close.emit();
     }
-    isDropdown(item) {
-        return (item.items?.length ?? 0) > 0;
+    onSelectItem(item) {
+        this.itemSelected.emit(item);
     }
-    onRouterLinkActive(isActive, item) {
-        this.currentItemState.push(isActive);
-        if (!isActive && this.currentItem == item) {
-            if (this.currentItemState.length == 2 && this.currentItemState[0] && !this.currentItemState[1]) {
-                return;
-            }
+    onItemClick(event, item) {
+        // item.disabled ? $event.preventDefault() : toggle(item); onSelectItem(); (item.onClick && item.onClick($event))
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.toggle(item);
+        this.onSelectItem(item);
+        item.onClick?.(event);
+    }
+    onSubItemClick(event, subItem) {
+        if (subItem.disabled) {
+            event.preventDefault();
+            return;
         }
-        this.currentItem = item;
-        item.isActive = isActive;
-        // if (isActive) {
-        //   this.items.forEach(x => x.isOpen = false);
-        //   item.isOpen = true;
-        // }
+        this.onSelectItem(subItem);
+        subItem.onClick?.(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsSidebarComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsSidebarComponent, isStandalone: true, selector: "ys-sidebar", inputs: { items: "items", profile: "profile", styleClass: "styleClass", itemsStyleClass: "itemsStyleClass" }, ngImport: i0, template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n  @if (profile) {\r\n  <div>\r\n    @if (profile.image || fullName || profile.role) {\r\n    <div class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n      @if (profile.image) {\r\n      <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n        <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n          <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\r\n        </div>\r\n      </div>\r\n      }\r\n      @if (fullName || profile.role) {\r\n      <div class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n        @if (fullName) {\r\n        <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n        }\r\n        @if (profile.role) {\r\n        <small class=\"text-uppercase role\">{{profile.role}}</small>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n    <hr />\r\n  </div>\r\n  }\r\n\r\n  <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n    <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n      @for (item of items; track item) {\r\n      @if (item.isDivider) {\r\n      <hr class=\"sidebar-divider\" />\r\n      }\r\n      @if (!item.isDivider) {\r\n      @if (!isDropdown(item)) {\r\n      <li class=\"nav-item d-block\">\r\n        <a class=\"nav-link d-flex align-items-center\" [ngClass]=\"{'disabled': item.disabled}\"\r\n          [routerLink]=\"item.routerLink\" [routerLinkActive]=\"['active']\" role=\"button\"\r\n          (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n          @if (item.iconClass) {\r\n          <i [ngClass]=\"item.iconClass\"></i>\r\n          }\r\n          <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n          }\r\n        </a>\r\n      </li>\r\n      }\r\n      @if (isDropdown(item)) {\r\n      <li class=\"nav-item d-block dropend\">\r\n        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n          [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen, 'disabled': item.disabled}\"\r\n          data-bs-toggle=\"dropend\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n          (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n          @if (item.iconClass) {\r\n          <i [ngClass]=\"item.iconClass\"></i>\r\n          }\r\n          <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info me-1\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n          }\r\n        </a>\r\n        <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n          [ngClass]=\"{'show': item.isOpen}\">\r\n          @for (subItem of item.items; track subItem) {\r\n          @if (subItem.isDivider) {\r\n          <hr class=\"sidebar-divider my-1\" />\r\n          }\r\n          @if (!subItem.isDivider) {\r\n          <li class=\"nav-item d-block\">\r\n            <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\" role=\"button\"\r\n              [ngClass]=\"{'disabled': subItem.disabled}\" [routerLinkActive]=\"['active']\"\r\n              (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n              (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n              @if (subItem.iconClass) {\r\n              <i [ngClass]=\"subItem.iconClass\"></i>\r\n              }\r\n              <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n              @if (subItem.badgeLabel) {\r\n              <span class=\"badge bg-info\" [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n              }\r\n            </a>\r\n          </li>\r\n          }\r\n          }\r\n        </ul>\r\n      </li>\r\n      }\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsSidebar, isStandalone: true, selector: "ys-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeStyleClass: { classPropertyName: "closeStyleClass", publicName: "closeStyleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", itemSelected: "itemSelected" }, ngImport: i0, template: "<aside class=\"ys-sidebar overflow-auto border-end\" [class]=\"styleClass()\">\r\n  @if (showClose()) {\r\n  <div class=\"d-flex justify-content-end\">\r\n    <button type=\"button\" (click)=\"closeSidebar()\" class=\"btn-close p-2\" [class]=\"closeStyleClass()\"\r\n      aria-label=\"Close\"></button>\r\n  </div>\r\n  }\r\n\r\n  @if (profile()?.image || profile()?.role || fullName()) {\r\n  <div class=\"sidebar-profile d-flex flex-column justify-content-center border-bottom p-3\" [class.pt-0]=\"showClose()\">\r\n    @if (profile()?.image) {\r\n    <div class=\"image-wrapper\" [class.mb-3]=\"fullName() || profile()?.role\">\r\n      <div class=\"user-image rounded-circle m-auto\">\r\n        <img [src]=\"profile()?.image?.src\" class=\"img-fluid\" [alt]=\"profile()?.image?.alt\" />\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    @if (fullName() || profile()?.role) {\r\n    <div class=\"profile-details d-flex flex-column text-center\">\r\n      @if (fullName()) {\r\n      <strong class=\"text-uppercase name\">{{ fullName() }}</strong>\r\n      }\r\n\r\n      @if (profile()?.role) {\r\n      <small class=\"text-uppercase role\">{{ profile()?.role }}</small>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"sidebar-menu p-3\">\r\n    <ul class=\"menu-items nav nav-pills flex-column\">\r\n      @for (item of items(); track item.id ?? item.route ?? $index) {\r\n      @if (item.isDivider) {\r\n      <hr class=\"sidebar-divider my-2\" />\r\n      } @else {\r\n      @if (item.children?.length) {\r\n      <li class=\"nav-item mb-2\">\r\n        <button type=\"button\" class=\"nav-link d-flex align-items-center justify-content-between w-100\"\r\n          [class.active]=\"isParentActive(item)\" (click)=\"toggle(item); item.onClick && item.onClick($event)\"\r\n          [disabled]=\"item.disabled\">\r\n          @if (item.iconClass) {\r\n          <i [class]=\"item.iconClass\"></i>\r\n          }\r\n\r\n          <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\r\n\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info me-1\" [class]=\"item.badgeStyleClass\">{{\r\n            item.badgeLabel\r\n            }}</span>\r\n          }\r\n\r\n          <i class=\"fa-solid fa-chevron-right transition-icon\" [class.expanded]=\"isExpanded(item)\">\r\n          </i>\r\n        </button>\r\n\r\n        <ul class=\"menu-sub-items nav nav-pills flex-column ms-3 border-bottom\" [class.expanded]=\"isExpanded(item)\">\r\n          @for (subItem of item.children; track subItem.id ?? subItem.route ?? $index) {\r\n          @if (subItem.isDivider) {\r\n          <hr class=\"sidebar-divider my-1\" />\r\n          } @else {\r\n          <li class=\"nav-item\">\r\n            <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.disabled ? null : subItem.route\"\r\n              routerLinkActive=\"active\" (click)=\"onSubItemClick($event, subItem)\" [class.disabled]=\"subItem.disabled\">\r\n              @if (subItem.iconClass) {\r\n              <i [class]=\"subItem.iconClass\"></i>\r\n              }\r\n\r\n              <span class=\"link-label ms-3 me-auto\">{{ subItem.label }}</span>\r\n\r\n              @if (subItem.badgeLabel) {\r\n              <span class=\"badge bg-info\" [class]=\"subItem.badgeStyleClass\">{{\r\n                subItem.badgeLabel\r\n                }}</span>\r\n              }\r\n            </a>\r\n          </li>\r\n          }\r\n          }\r\n        </ul>\r\n      </li>\r\n      } @else {\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link d-flex align-items-center\" [class.disabled]=\"item.disabled\"\r\n          [routerLink]=\"item.disabled ? null : item.route\" routerLinkActive=\"active\"\r\n          (click)=\"onItemClick($event, item)\">\r\n          @if (item.iconClass) {\r\n          <i [class]=\"item.iconClass\"></i>\r\n          }\r\n\r\n          <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\r\n\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info\" [class]=\"item.badgeStyleClass\">\r\n            {{ item.badgeLabel }}\r\n          </span>\r\n          }\r\n        </a>\r\n      </li>\r\n      }\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</aside>", styles: [".ys-sidebar{width:280px;height:100%;position:fixed;left:0;z-index:1001;transition:transform .5s ease,width .5s ease}.ys-sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.ys-sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.ys-sidebar .sidebar-menu .menu-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.transition-icon{transition:transform .25s ease}.transition-icon.expanded{transform:rotate(90deg)}.menu-sub-items{max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .25s ease,padding .25 ease;opacity:0;margin-left:.75rem;padding:0;border-left:3px solid var(--bs-border-color);background-color:rgba(var(--bs-secondary-rgb),.07);border-radius:.5rem}.menu-sub-items.expanded{max-height:500px;opacity:1;padding:.5rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsSidebar, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-sidebar', imports: [NgClass, RouterLink, RouterLinkActive], template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n  @if (profile) {\r\n  <div>\r\n    @if (profile.image || fullName || profile.role) {\r\n    <div class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n      @if (profile.image) {\r\n      <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n        <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n          <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\r\n        </div>\r\n      </div>\r\n      }\r\n      @if (fullName || profile.role) {\r\n      <div class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n        @if (fullName) {\r\n        <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n        }\r\n        @if (profile.role) {\r\n        <small class=\"text-uppercase role\">{{profile.role}}</small>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n    <hr />\r\n  </div>\r\n  }\r\n\r\n  <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n    <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n      @for (item of items; track item) {\r\n      @if (item.isDivider) {\r\n      <hr class=\"sidebar-divider\" />\r\n      }\r\n      @if (!item.isDivider) {\r\n      @if (!isDropdown(item)) {\r\n      <li class=\"nav-item d-block\">\r\n        <a class=\"nav-link d-flex align-items-center\" [ngClass]=\"{'disabled': item.disabled}\"\r\n          [routerLink]=\"item.routerLink\" [routerLinkActive]=\"['active']\" role=\"button\"\r\n          (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n          @if (item.iconClass) {\r\n          <i [ngClass]=\"item.iconClass\"></i>\r\n          }\r\n          <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n          }\r\n        </a>\r\n      </li>\r\n      }\r\n      @if (isDropdown(item)) {\r\n      <li class=\"nav-item d-block dropend\">\r\n        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n          [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen, 'disabled': item.disabled}\"\r\n          data-bs-toggle=\"dropend\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n          (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n          @if (item.iconClass) {\r\n          <i [ngClass]=\"item.iconClass\"></i>\r\n          }\r\n          <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info me-1\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n          }\r\n        </a>\r\n        <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n          [ngClass]=\"{'show': item.isOpen}\">\r\n          @for (subItem of item.items; track subItem) {\r\n          @if (subItem.isDivider) {\r\n          <hr class=\"sidebar-divider my-1\" />\r\n          }\r\n          @if (!subItem.isDivider) {\r\n          <li class=\"nav-item d-block\">\r\n            <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\" role=\"button\"\r\n              [ngClass]=\"{'disabled': subItem.disabled}\" [routerLinkActive]=\"['active']\"\r\n              (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n              (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n              @if (subItem.iconClass) {\r\n              <i [ngClass]=\"subItem.iconClass\"></i>\r\n              }\r\n              <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n              @if (subItem.badgeLabel) {\r\n              <span class=\"badge bg-info\" [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n              }\r\n            </a>\r\n          </li>\r\n          }\r\n          }\r\n        </ul>\r\n      </li>\r\n      }\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { items: [{
-                type: Input
-            }], profile: [{
-                type: Input
-            }], styleClass: [{
-                type: Input
-            }], itemsStyleClass: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ys-sidebar', imports: [RouterLink, RouterLinkActive], changeDetection: ChangeDetectionStrategy.Eager, template: "<aside class=\"ys-sidebar overflow-auto border-end\" [class]=\"styleClass()\">\r\n  @if (showClose()) {\r\n  <div class=\"d-flex justify-content-end\">\r\n    <button type=\"button\" (click)=\"closeSidebar()\" class=\"btn-close p-2\" [class]=\"closeStyleClass()\"\r\n      aria-label=\"Close\"></button>\r\n  </div>\r\n  }\r\n\r\n  @if (profile()?.image || profile()?.role || fullName()) {\r\n  <div class=\"sidebar-profile d-flex flex-column justify-content-center border-bottom p-3\" [class.pt-0]=\"showClose()\">\r\n    @if (profile()?.image) {\r\n    <div class=\"image-wrapper\" [class.mb-3]=\"fullName() || profile()?.role\">\r\n      <div class=\"user-image rounded-circle m-auto\">\r\n        <img [src]=\"profile()?.image?.src\" class=\"img-fluid\" [alt]=\"profile()?.image?.alt\" />\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    @if (fullName() || profile()?.role) {\r\n    <div class=\"profile-details d-flex flex-column text-center\">\r\n      @if (fullName()) {\r\n      <strong class=\"text-uppercase name\">{{ fullName() }}</strong>\r\n      }\r\n\r\n      @if (profile()?.role) {\r\n      <small class=\"text-uppercase role\">{{ profile()?.role }}</small>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"sidebar-menu p-3\">\r\n    <ul class=\"menu-items nav nav-pills flex-column\">\r\n      @for (item of items(); track item.id ?? item.route ?? $index) {\r\n      @if (item.isDivider) {\r\n      <hr class=\"sidebar-divider my-2\" />\r\n      } @else {\r\n      @if (item.children?.length) {\r\n      <li class=\"nav-item mb-2\">\r\n        <button type=\"button\" class=\"nav-link d-flex align-items-center justify-content-between w-100\"\r\n          [class.active]=\"isParentActive(item)\" (click)=\"toggle(item); item.onClick && item.onClick($event)\"\r\n          [disabled]=\"item.disabled\">\r\n          @if (item.iconClass) {\r\n          <i [class]=\"item.iconClass\"></i>\r\n          }\r\n\r\n          <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\r\n\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info me-1\" [class]=\"item.badgeStyleClass\">{{\r\n            item.badgeLabel\r\n            }}</span>\r\n          }\r\n\r\n          <i class=\"fa-solid fa-chevron-right transition-icon\" [class.expanded]=\"isExpanded(item)\">\r\n          </i>\r\n        </button>\r\n\r\n        <ul class=\"menu-sub-items nav nav-pills flex-column ms-3 border-bottom\" [class.expanded]=\"isExpanded(item)\">\r\n          @for (subItem of item.children; track subItem.id ?? subItem.route ?? $index) {\r\n          @if (subItem.isDivider) {\r\n          <hr class=\"sidebar-divider my-1\" />\r\n          } @else {\r\n          <li class=\"nav-item\">\r\n            <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.disabled ? null : subItem.route\"\r\n              routerLinkActive=\"active\" (click)=\"onSubItemClick($event, subItem)\" [class.disabled]=\"subItem.disabled\">\r\n              @if (subItem.iconClass) {\r\n              <i [class]=\"subItem.iconClass\"></i>\r\n              }\r\n\r\n              <span class=\"link-label ms-3 me-auto\">{{ subItem.label }}</span>\r\n\r\n              @if (subItem.badgeLabel) {\r\n              <span class=\"badge bg-info\" [class]=\"subItem.badgeStyleClass\">{{\r\n                subItem.badgeLabel\r\n                }}</span>\r\n              }\r\n            </a>\r\n          </li>\r\n          }\r\n          }\r\n        </ul>\r\n      </li>\r\n      } @else {\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link d-flex align-items-center\" [class.disabled]=\"item.disabled\"\r\n          [routerLink]=\"item.disabled ? null : item.route\" routerLinkActive=\"active\"\r\n          (click)=\"onItemClick($event, item)\">\r\n          @if (item.iconClass) {\r\n          <i [class]=\"item.iconClass\"></i>\r\n          }\r\n\r\n          <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\r\n\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info\" [class]=\"item.badgeStyleClass\">\r\n            {{ item.badgeLabel }}\r\n          </span>\r\n          }\r\n        </a>\r\n      </li>\r\n      }\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</aside>", styles: [".ys-sidebar{width:280px;height:100%;position:fixed;left:0;z-index:1001;transition:transform .5s ease,width .5s ease}.ys-sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.ys-sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.ys-sidebar .sidebar-menu .menu-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.transition-icon{transition:transform .25s ease}.transition-icon.expanded{transform:rotate(90deg)}.menu-sub-items{max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .25s ease,padding .25 ease;opacity:0;margin-left:.75rem;padding:0;border-left:3px solid var(--bs-border-color);background-color:rgba(var(--bs-secondary-rgb),.07);border-radius:.5rem}.menu-sub-items.expanded{max-height:500px;opacity:1;padding:.5rem}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], closeStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeStyleClass", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 /*
  * Public API Surface of ys-sidebar
@@ -127,5 +127,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SidebarService, YsSidebarComponent };
+export { SidebarService, YsSidebar };
 //# sourceMappingURL=yoozsoft-yoozsoft-ng-sidebar.mjs.map

package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-sidebar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/services/sidebar.service.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.html","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/yoozsoft-yoozsoft-ng-sidebar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject } from 'rxjs';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class SidebarService {\r\n\r\n  constructor() { }\r\n\r\n  private _isSidebarToggled$ = new BehaviorSubject<boolean>(true);\r\n\r\n  private _isSidebar$ = new BehaviorSubject<boolean>(false);\r\n\r\n  /**\r\n   * Sidebar toggled state. Default value is true.\r\n   */\r\n  get isSidebarToggled$() { return this._isSidebarToggled$.asObservable(); }\r\n\r\n  /**\r\n   * Sidebar display state. Default value is false.\r\n   */\r\n  get isSidebar$() { return this._isSidebar$.asObservable(); }\r\n\r\n  /**\r\n   * Change sidebar toggle state.\r\n   */\r\n  toggleSidebar() {\r\n    this._isSidebarToggled$.next(!this._isSidebarToggled$.value);\r\n  }\r\n\r\n  /**\r\n   * Set sidebar toggle state.\r\n   * @param isToggled \r\n   */\r\n  setIsSidebarToggled(isToggled: boolean) {\r\n    this._isSidebarToggled$.next(isToggled);\r\n  }\r\n\r\n  /**\r\n   * Set sidebar toggle state.\r\n   * @param isSidebar \r\n   */\r\n  setIsSidebar(isSidebar: boolean) {\r\n    this._isSidebar$.next(isSidebar);\r\n  }\r\n\r\n  /**\r\n   * Return sidebar toggle state.\r\n   */\r\n  get sidebarState() {\r\n    return this._isSidebarToggled$.getValue()\r\n  }\r\n\r\n}\r\n","import { NgClass } from '@angular/common';\r\nimport { Component, Input, OnDestroy } from '@angular/core';\r\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { Subscription } from 'rxjs';\r\nimport { SidebarItem, SidebarItemActive, UserProfile } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-sidebar',\r\n  imports: [NgClass, RouterLink, RouterLinkActive],\r\n  templateUrl: './ys-sidebar.component.html',\r\n  styleUrl: './ys-sidebar.component.scss'\r\n})\r\nexport class YsSidebarComponent implements OnDestroy {\r\n\r\n  private subscription: Subscription;\r\n  private currentItem?: SidebarItemActive;\r\n  private currentItemState: boolean[] = [];\r\n\r\n  private _items: SidebarItemActive[] = [];\r\n  @Input()\r\n  get items(): SidebarItemActive[] { return this._items };\r\n  set items(value: SidebarItem[]) { this._items = value; }\r\n\r\n  @Input() profile: UserProfile | null = null;\r\n  @Input() styleClass?: string;\r\n  @Input() itemsStyleClass?: string;\r\n\r\n  constructor(private router: Router) {\r\n    this.subscription = router.events.subscribe(e => {\r\n      if (e instanceof NavigationEnd) {\r\n        this.currentItem = undefined;\r\n        this.currentItemState = [];\r\n      }\r\n    })\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.subscription.unsubscribe();\r\n  }\r\n\r\n  get fullName(): string { return `${this.profile?.firstName} ${this.profile?.lastName}`; }\r\n\r\n  openItem(item: SidebarItemActive): void {\r\n    if (item.isOpen) {\r\n      item.isOpen = !item.isOpen;\r\n      return;\r\n    }\r\n\r\n    this.items.forEach(x => x.isOpen = false);\r\n    item.isOpen = !item.isOpen;\r\n  }\r\n\r\n  isDropdown(item: SidebarItem): boolean {\r\n    return (item.items?.length ?? 0) > 0;\r\n  }\r\n\r\n  onRouterLinkActive(isActive: boolean, item: SidebarItemActive) {\r\n    this.currentItemState.push(isActive);\r\n\r\n    if (!isActive && this.currentItem == item) {\r\n      if (this.currentItemState.length == 2 && this.currentItemState[0] && !this.currentItemState[1]) {\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.currentItem = item;\r\n    item.isActive = isActive;\r\n    // if (isActive) {\r\n    //   this.items.forEach(x => x.isOpen = false);\r\n    //   item.isOpen = true;\r\n    // }\r\n  }\r\n\r\n}\r\n","<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n  @if (profile) {\r\n  <div>\r\n    @if (profile.image || fullName || profile.role) {\r\n    <div class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n      @if (profile.image) {\r\n      <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n        <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n          <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\r\n        </div>\r\n      </div>\r\n      }\r\n      @if (fullName || profile.role) {\r\n      <div class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n        @if (fullName) {\r\n        <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n        }\r\n        @if (profile.role) {\r\n        <small class=\"text-uppercase role\">{{profile.role}}</small>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n    <hr />\r\n  </div>\r\n  }\r\n\r\n  <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n    <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n      @for (item of items; track item) {\r\n      @if (item.isDivider) {\r\n      <hr class=\"sidebar-divider\" />\r\n      }\r\n      @if (!item.isDivider) {\r\n      @if (!isDropdown(item)) {\r\n      <li class=\"nav-item d-block\">\r\n        <a class=\"nav-link d-flex align-items-center\" [ngClass]=\"{'disabled': item.disabled}\"\r\n          [routerLink]=\"item.routerLink\" [routerLinkActive]=\"['active']\" role=\"button\"\r\n          (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n          @if (item.iconClass) {\r\n          <i [ngClass]=\"item.iconClass\"></i>\r\n          }\r\n          <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n          }\r\n        </a>\r\n      </li>\r\n      }\r\n      @if (isDropdown(item)) {\r\n      <li class=\"nav-item d-block dropend\">\r\n        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n          [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen, 'disabled': item.disabled}\"\r\n          data-bs-toggle=\"dropend\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n          (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n          @if (item.iconClass) {\r\n          <i [ngClass]=\"item.iconClass\"></i>\r\n          }\r\n          <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info me-1\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n          }\r\n        </a>\r\n        <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n          [ngClass]=\"{'show': item.isOpen}\">\r\n          @for (subItem of item.items; track subItem) {\r\n          @if (subItem.isDivider) {\r\n          <hr class=\"sidebar-divider my-1\" />\r\n          }\r\n          @if (!subItem.isDivider) {\r\n          <li class=\"nav-item d-block\">\r\n            <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\" role=\"button\"\r\n              [ngClass]=\"{'disabled': subItem.disabled}\" [routerLinkActive]=\"['active']\"\r\n              (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n              (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n              @if (subItem.iconClass) {\r\n              <i [ngClass]=\"subItem.iconClass\"></i>\r\n              }\r\n              <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n              @if (subItem.badgeLabel) {\r\n              <span class=\"badge bg-info\" [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n              }\r\n            </a>\r\n          </li>\r\n          }\r\n          }\r\n        </ul>\r\n      </li>\r\n      }\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</aside>","/*\r\n * Public API Surface of ys-sidebar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/services';\r\nexport * from './src/ys-sidebar/ys-sidebar.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-sidebar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/services/sidebar-service.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.html","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/yoozsoft-yoozsoft-ng-sidebar.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport { inject, Injectable, PLATFORM_ID, signal } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SidebarService {\n\n  private platformId = inject(PLATFORM_ID);\n\n  private mediaQuery?: MediaQueryList;\n\n  private readonly _isMobile = signal(false);\n  private readonly _isOpen = signal(true);\n\n  readonly isMobile = this._isMobile.asReadonly();\n  readonly isOpen = this._isOpen.asReadonly();\n\n  constructor() {\n\n    if (isPlatformBrowser(this.platformId)) {\n\n      this.mediaQuery = window.matchMedia('(max-width: 992px)');\n\n      this._isMobile.set(this.mediaQuery.matches);\n      this._isOpen.set(!this.mediaQuery.matches);\n\n      this.mediaQuery.addEventListener('change', e => {\n\n        this._isMobile.set(e.matches);\n\n        if (e.matches) {\n          this.close();\n        } else {\n          this.open();\n        }\n\n      });\n\n    }\n\n  }\n\n  toggle() {\n    this._isOpen.update(v => !v);\n  }\n\n  open() {\n    this._isOpen.set(true);\n  }\n\n  close() {\n    this._isOpen.set(false);\n  }\n\n}\n","import {\r\n  Component,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { filter, map } from 'rxjs';\r\nimport { SidebarItem, UserProfile } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-sidebar',\r\n  imports: [RouterLink, RouterLinkActive],\r\n  templateUrl: './ys-sidebar.html',\r\n  changeDetection: ChangeDetectionStrategy.Eager,\r\n  styleUrl: './ys-sidebar.scss',\r\n})\r\nexport class YsSidebar {\r\n  private router = inject(Router);\r\n\r\n  items = input<SidebarItem[]>([]);\r\n\r\n  profile = input<UserProfile>();\r\n  styleClass = input<string>('bg-body');\r\n\r\n  showClose = input(false);\r\n  closeStyleClass = input('btn-close-white');\r\n  close = output();\r\n  itemSelected = output<SidebarItem>();\r\n\r\n  readonly fullName = computed<string>(() =>\r\n    [this.profile()?.firstName, this.profile()?.lastName].filter(Boolean).join(' '),\r\n  );\r\n\r\n  readonly currentUrl = toSignal(\r\n    this.router.events.pipe(\r\n      filter((event) => event instanceof NavigationEnd),\r\n      map(() => this.router.url),\r\n    ),\r\n    {\r\n      initialValue: this.router.url,\r\n    },\r\n  );\r\n\r\n  readonly expandedMenu = signal<string | null>(null);\r\n\r\n  private getItemKey(item: SidebarItem): string | null {\r\n    return item.id ?? item.route ?? item.label ?? null;\r\n  }\r\n\r\n  toggle(item: SidebarItem) {\r\n    const key = this.getItemKey(item);\r\n\r\n    if (!key) {\r\n      return;\r\n    }\r\n\r\n    this.expandedMenu.update((current) => (current === key ? null : key));\r\n  }\r\n\r\n  isExpanded(item: SidebarItem) {\r\n    return this.expandedMenu() === this.getItemKey(item);\r\n  }\r\n\r\n  isParentActive(item: SidebarItem): boolean {\r\n    const url = this.currentUrl();\r\n\r\n    return (\r\n      item.children?.some(\r\n        (child) => child.route && (url === child.route || url.startsWith(child.route + '/')),\r\n      ) ?? false\r\n    );\r\n  }\r\n\r\n  closeSidebar() {\r\n    this.close.emit();\r\n  }\r\n\r\n  onSelectItem(item: SidebarItem) {\r\n    this.itemSelected.emit(item);\r\n  }\r\n\r\n  onItemClick(event: MouseEvent, item: SidebarItem) {\r\n    // item.disabled ? $event.preventDefault() : toggle(item); onSelectItem(); (item.onClick && item.onClick($event))\r\n    if (item.disabled) {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    this.toggle(item);\r\n    this.onSelectItem(item);\r\n    item.onClick?.(event);\r\n  }\r\n\r\n  onSubItemClick(event: MouseEvent, subItem: SidebarItem) {\r\n    if (subItem.disabled) {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    this.onSelectItem(subItem);\r\n    subItem.onClick?.(event);\r\n  }\r\n}\r\n","<aside class=\"ys-sidebar overflow-auto border-end\" [class]=\"styleClass()\">\r\n  @if (showClose()) {\r\n  <div class=\"d-flex justify-content-end\">\r\n    <button type=\"button\" (click)=\"closeSidebar()\" class=\"btn-close p-2\" [class]=\"closeStyleClass()\"\r\n      aria-label=\"Close\"></button>\r\n  </div>\r\n  }\r\n\r\n  @if (profile()?.image || profile()?.role || fullName()) {\r\n  <div class=\"sidebar-profile d-flex flex-column justify-content-center border-bottom p-3\" [class.pt-0]=\"showClose()\">\r\n    @if (profile()?.image) {\r\n    <div class=\"image-wrapper\" [class.mb-3]=\"fullName() || profile()?.role\">\r\n      <div class=\"user-image rounded-circle m-auto\">\r\n        <img [src]=\"profile()?.image?.src\" class=\"img-fluid\" [alt]=\"profile()?.image?.alt\" />\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    @if (fullName() || profile()?.role) {\r\n    <div class=\"profile-details d-flex flex-column text-center\">\r\n      @if (fullName()) {\r\n      <strong class=\"text-uppercase name\">{{ fullName() }}</strong>\r\n      }\r\n\r\n      @if (profile()?.role) {\r\n      <small class=\"text-uppercase role\">{{ profile()?.role }}</small>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"sidebar-menu p-3\">\r\n    <ul class=\"menu-items nav nav-pills flex-column\">\r\n      @for (item of items(); track item.id ?? item.route ?? $index) {\r\n      @if (item.isDivider) {\r\n      <hr class=\"sidebar-divider my-2\" />\r\n      } @else {\r\n      @if (item.children?.length) {\r\n      <li class=\"nav-item mb-2\">\r\n        <button type=\"button\" class=\"nav-link d-flex align-items-center justify-content-between w-100\"\r\n          [class.active]=\"isParentActive(item)\" (click)=\"toggle(item); item.onClick && item.onClick($event)\"\r\n          [disabled]=\"item.disabled\">\r\n          @if (item.iconClass) {\r\n          <i [class]=\"item.iconClass\"></i>\r\n          }\r\n\r\n          <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\r\n\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info me-1\" [class]=\"item.badgeStyleClass\">{{\r\n            item.badgeLabel\r\n            }}</span>\r\n          }\r\n\r\n          <i class=\"fa-solid fa-chevron-right transition-icon\" [class.expanded]=\"isExpanded(item)\">\r\n          </i>\r\n        </button>\r\n\r\n        <ul class=\"menu-sub-items nav nav-pills flex-column ms-3 border-bottom\" [class.expanded]=\"isExpanded(item)\">\r\n          @for (subItem of item.children; track subItem.id ?? subItem.route ?? $index) {\r\n          @if (subItem.isDivider) {\r\n          <hr class=\"sidebar-divider my-1\" />\r\n          } @else {\r\n          <li class=\"nav-item\">\r\n            <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.disabled ? null : subItem.route\"\r\n              routerLinkActive=\"active\" (click)=\"onSubItemClick($event, subItem)\" [class.disabled]=\"subItem.disabled\">\r\n              @if (subItem.iconClass) {\r\n              <i [class]=\"subItem.iconClass\"></i>\r\n              }\r\n\r\n              <span class=\"link-label ms-3 me-auto\">{{ subItem.label }}</span>\r\n\r\n              @if (subItem.badgeLabel) {\r\n              <span class=\"badge bg-info\" [class]=\"subItem.badgeStyleClass\">{{\r\n                subItem.badgeLabel\r\n                }}</span>\r\n              }\r\n            </a>\r\n          </li>\r\n          }\r\n          }\r\n        </ul>\r\n      </li>\r\n      } @else {\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link d-flex align-items-center\" [class.disabled]=\"item.disabled\"\r\n          [routerLink]=\"item.disabled ? null : item.route\" routerLinkActive=\"active\"\r\n          (click)=\"onItemClick($event, item)\">\r\n          @if (item.iconClass) {\r\n          <i [class]=\"item.iconClass\"></i>\r\n          }\r\n\r\n          <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\r\n\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info\" [class]=\"item.badgeStyleClass\">\r\n            {{ item.badgeLabel }}\r\n          </span>\r\n          }\r\n        </a>\r\n      </li>\r\n      }\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</aside>","/*\r\n * Public API Surface of ys-sidebar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/services';\r\nexport * from './src/ys-sidebar/ys-sidebar';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}