@yoozsoft/yoozsoft-ng 5.3.5 → 7.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-loading.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.component.html","../../../../projects/yoozsoft/yoozsoft-ng/loading/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/yoozsoft-yoozsoft-ng-loading.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'ys-loading-mask',\r\n  imports: [NgClass],\r\n  templateUrl: './ys-loading-mask.component.html',\r\n  styleUrl: './ys-loading-mask.component.scss'\r\n})\r\nexport class YsLoadingMaskComponent {\r\n\r\n  @Input() loading: boolean = false;\r\n  @Input() message: string | null = 'Loading ...';\r\n  @Input() backgroundStyleclass: string | null = null;\r\n  @Input() spinnerStyleclass: string | null = null;\r\n  @Input() messageStyleclass: string | null = null;\r\n\r\n}\r\n","@if (loading) {\r\n  <div\r\n    class=\"loading-wrapper d-flex flex-column align-items-center justify-content-center h-100 w-100 position-absolute\">\r\n    <div class=\"loading-mask bg-secondary position-absolute h-100 w-100\" [ngClass]=\"backgroundStyleclass\">\r\n    </div>\r\n    <div class=\"loading-content d-flex flex-column align-items-center justify-content-center\">\r\n      <div class=\"loading-spinner spinner-border text-primary\" [ngClass]=\"spinnerStyleclass\" role=\"status\"></div>\r\n      @if (message) {\r\n        <strong class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n          {{message}}\r\n        </strong>\r\n      }\r\n    </div>\r\n  </div>\r\n}","/*\r\n * Public API Surface of ys-loading-mask\r\n */\r\n\r\nexport * from './src/ys-loading-mask/ys-loading-mask.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MASa,sBAAsB,CAAA;IAExB,OAAO,GAAY,KAAK;IACxB,OAAO,GAAkB,aAAa;IACtC,oBAAoB,GAAkB,IAAI;IAC1C,iBAAiB,GAAkB,IAAI;IACvC,iBAAiB,GAAkB,IAAI;uGANrC,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTnC,gsBAcC,EAAA,MAAA,EAAA,CAAA,+MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDTW,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIN,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBANlC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,OAAO,CAAC,EAAA,QAAA,EAAA,gsBAAA,EAAA,MAAA,EAAA,CAAA,+MAAA,CAAA,EAAA;8BAMT,OAAO,EAAA,CAAA;sBAAf;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,oBAAoB,EAAA,CAAA;sBAA5B;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;;;AEfH;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-loading.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.html","../../../../projects/yoozsoft/yoozsoft-ng/loading/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/yoozsoft-yoozsoft-ng-loading.ts"],"sourcesContent":["import { Component, input, ChangeDetectionStrategy } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'ys-loading-mask',\r\n  imports: [],\r\n  templateUrl: './ys-loading-mask.html',\r\n  changeDetection: ChangeDetectionStrategy.Eager,\r\n  styleUrl: './ys-loading-mask.scss',\r\n})\r\nexport class YsLoadingMask {\r\n  loading = input<boolean>(false);\r\n  message = input<string>('Loading ...');\r\n  backgroundStyleClass = input<string>();\r\n  spinnerStyleClass = input<string>();\r\n  messageStyleClass = input<string>();\r\n  fullScreen = input(false);\r\n}\r\n","@if (loading()) {\n<div class=\"ys-loading-wrapper d-flex flex-column align-items-center justify-content-center\"\n    [class.position-fixed]=\"fullScreen()\" [class.position-absolute]=\"!fullScreen()\">\n    <div class=\"ys-loading-mask bg-secondary position-absolute\" [class]=\"backgroundStyleClass()\">\n    </div>\n    <div class=\"ys-loading-content d-flex flex-column align-items-center justify-content-center\">\n        <div class=\"loading-spinner spinner-border text-primary\" [class]=\"spinnerStyleClass()\" role=\"status\"></div>\n\n        @if (message()) {\n        <strong class=\"badge text-primary mt-4 p-3\" [class]=\"messageStyleClass()\">\n            {{message()}}\n        </strong>\n        }\n\n    </div>\n</div>\n}","/*\r\n * Public API Surface of ys-loading-mask\r\n */\r\n\r\nexport * from './src/ys-loading-mask/ys-loading-mask';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MASa,aAAa,CAAA;IACxB,OAAO,GAAG,KAAK,CAAU,KAAK;gFAAC;IAC/B,OAAO,GAAG,KAAK,CAAS,aAAa;gFAAC;AACtC,IAAA,oBAAoB,GAAG,KAAK;wGAAU;AACtC,IAAA,iBAAiB,GAAG,KAAK;qGAAU;AACnC,IAAA,iBAAiB,GAAG,KAAK;qGAAU;IACnC,UAAU,GAAG,KAAK,CAAC,KAAK;mFAAC;uGANd,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,u7BCT1B,uuBAgBC,EAAA,MAAA,EAAA,CAAA,+PAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,KAAA,EAAA,CAAA;;2FDPY,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,OAAA,EAClB,EAAE,EAAA,eAAA,EAEM,uBAAuB,CAAC,KAAK,EAAA,QAAA,EAAA,uuBAAA,EAAA,MAAA,EAAA,CAAA,+PAAA,CAAA,EAAA;;;AENhD;;AAEG;;ACFH;;AAEG;;;;"}

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

@@ -1,92 +1,76 @@
-import { NgClass } from '@angular/common';
+import { isPlatformBrowser, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component } from '@angular/core';
+import { inject, PLATFORM_ID, input, model, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import * as i2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
-class YsNavbarComponent {
-    formBuilder;
-    searchForm;
-    id = 'mainNavbar';
-    theme = 'dark';
-    styleClass;
-    brand = null;
-    items = [];
-    endItems = [];
-    isSearch = false;
-    searchLabel = 'Search';
-    searchIconClass;
-    searchPlaceholder = 'Search';
-    isSidebarToggler = false;
-    isSidebarToggled = true;
-    sidebarTogglerIconClass = "fa-solid fa-angle-right";
-    toggleSidebar = new EventEmitter();
-    search = new EventEmitter();
-    constructor(formBuilder) {
-        this.formBuilder = formBuilder;
-        this.searchForm = this.formBuilder.group({
-            searchValue: ['']
-        });
-    }
-    ngOnInit() {
-        // this.toggleSidebar.emit(this.isSidebarToggled);
-    }
+class YsNavbar {
+    platformId = inject(PLATFORM_ID);
+    formBuilder = inject(FormBuilder);
+    searchForm = this.formBuilder.nonNullable.group({
+        searchValue: '',
+    });
+    id = input('mainNavbar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    theme = input('dark', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    brand = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "brand" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    endItems = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endItems" }] : /* istanbul ignore next */ []));
+    isSearch = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSearch" }] : /* istanbul ignore next */ []));
+    searchLabel = input('Search', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchLabel" }] : /* istanbul ignore next */ []));
+    searchIconClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "searchIconClass" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Search', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    sidebarToggler = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarToggler" }] : /* istanbul ignore next */ []));
+    sidebarTogglerIconClass = input('fa-solid fa-angle-right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarTogglerIconClass" }] : /* istanbul ignore next */ []));
+    sidebarToggled = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarToggled" }] : /* istanbul ignore next */ []));
+    rtl = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rtl" }] : /* istanbul ignore next */ []));
+    toggleSidebar = output();
+    search = output();
+    isRtl = computed(() => {
+        const rtl = this.rtl();
+        if (rtl !== undefined) {
+            return rtl;
+        }
+        if (!isPlatformBrowser(this.platformId)) {
+            return false;
+        }
+        return document.documentElement.dir === 'rtl';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
     onToggleSidebar() {
-        this.isSidebarToggled = !this.isSidebarToggled;
-        this.toggleSidebar.emit(this.isSidebarToggled);
+        this.sidebarToggled.update((v) => !v);
+        this.toggleSidebar.emit(this.sidebarToggled());
     }
     submitSearch() {
-        this.search.emit(this.searchForm.get('searchValue')?.value);
+        this.search.emit(this.searchForm.controls['searchValue'].value.trim());
     }
     isDropdown(item) {
-        return item.items?.length;
+        return !!item.items?.length;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsNavbarComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsNavbarComponent, isStandalone: true, selector: "ys-navbar", inputs: { id: "id", theme: "theme", styleClass: "styleClass", brand: "brand", items: "items", endItems: "endItems", isSearch: "isSearch", searchLabel: "searchLabel", searchIconClass: "searchIconClass", searchPlaceholder: "searchPlaceholder", isSidebarToggler: "isSidebarToggler", isSidebarToggled: "isSidebarToggled", sidebarTogglerIconClass: "sidebarTogglerIconClass" }, outputs: { toggleSidebar: "toggleSidebar", search: "search" }, ngImport: i0, template: "<nav class=\"navbar navbar-expand-lg bg-primary\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\r\n  <div class=\"container-fluid\">\r\n\r\n    @if (isSidebarToggler) {\r\n      <button class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\"\r\n        aria-expanded=\"false\" aria-label=\"Toggle sidebar\" [ngClass]=\"{'toggled': isSidebarToggled}\">\r\n        <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\"></i>\r\n      </button>\r\n    }\r\n\r\n    <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\r\n      @if (brand?.src) {\r\n        <img src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\r\n          height=\"{{brand?.height}}\">\r\n      }\r\n      {{brand?.label}}\r\n    </a>\r\n\r\n    @if (items.length || endItems.length || search) {\r\n      <button class=\"navbar-toggler ms-auto\" type=\"button\"\r\n        data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\r\n        aria-label=\"Toggle navigation\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n    }\r\n\r\n    <div class=\"collapse navbar-collapse\" [id]=\"id\">\r\n\r\n      @if (items.length) {\r\n        <ul class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\r\n          @for (navItem of items; track navItem) {\r\n            @if (!isDropdown(navItem)) {\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                  (click)=\"navItem.onClick && navItem.onClick($event)\" [attr.aria-disabled]=\"navItem.disabled\"\r\n                  [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                  ngbTooltip=\"{{navItem.tooltipLabel}}\" aria-current=\"page\">\r\n                  @if (navItem.iconClass) {\r\n                    <i class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n                  }\r\n                  {{navItem.label}}\r\n                </a>\r\n              </li>\r\n            }\r\n            @if (isDropdown(navItem)) {\r\n              <li class=\"nav-item dropdown\">\r\n                <a class=\"nav-link dropdown-toggle\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                  [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{navItem.tooltipLabel}}\"\r\n                  data-bs-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                  @if (navItem.iconClass) {\r\n                    <i class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (navItem.label) {\r\n                    <span>{{navItem.label}}</span>\r\n                  }\r\n                </a>\r\n                <ul class=\"dropdown-menu px-2\">\r\n                  @for (navSubItem of navItem.items; track navSubItem) {\r\n                    <li>\r\n                      @if (!navSubItem.isDivider) {\r\n                        <a class=\"dropdown-item rounded\"\r\n                          (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\r\n                          [ngClass]=\"{'disabled': navSubItem.disabled}\"\r\n                          [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navSubItem.routerLink\"\r\n                          [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\r\n                          @if (navSubItem.iconClass) {\r\n                            <i class=\"me-2 {{navSubItem.iconClass}}\"></i>\r\n                          }\r\n                          @if (navSubItem.label) {\r\n                            <span>{{navSubItem.label}}</span>\r\n                          }\r\n                        </a>\r\n                      }\r\n                      @if (navSubItem.isDivider) {\r\n                        <hr class=\"dropdown-divider\">\r\n                      }\r\n                    </li>\r\n                  }\r\n                </ul>\r\n              </li>\r\n            }\r\n          }\r\n        </ul>\r\n      }\r\n\r\n      @if (endItems.length > 0) {\r\n        <ul class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\r\n          @for (endItem of endItems; track endItem) {\r\n            @if (!isDropdown(endItem)) {\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                  (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\"\r\n                  ngbTooltip=\"{{endItem.tooltipLabel}}\">\r\n                  @if (endItem.iconClass) {\r\n                    <i class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (endItem.label) {\r\n                    <span>{{endItem.label}}</span>\r\n                  }\r\n                </a>\r\n              </li>\r\n            }\r\n            @if (isDropdown(endItem)) {\r\n              <li class=\"nav-item dropdown\">\r\n                <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{endItem.tooltipLabel}}\"\r\n                  data-bs-toggle=\"dropdown\" data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\"\r\n                  aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                  @if (endItem.iconClass) {\r\n                    <i class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (endItem.label) {\r\n                    <span>{{endItem.label}}</span>\r\n                  }\r\n                </a>\r\n                <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n                  @for (endItemSubItem of endItem.items; track endItemSubItem) {\r\n                    @if (!endItemSubItem.isDivider) {\r\n                      <a class=\"dropdown-item text-center rounded\"\r\n                        [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                        (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\r\n                        ngbTooltip=\"{{endItemSubItem.tooltipLabel}}\">\r\n                        @if (endItemSubItem.iconClass) {\r\n                          <i class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\r\n                        }\r\n                        @if (endItemSubItem.label) {\r\n                          <span>{{endItemSubItem.label}}</span>\r\n                        }\r\n                      </a>\r\n                    }\r\n                    @if (endItemSubItem.isDivider) {\r\n                      <div class=\"dropdown-divider\"></div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </li>\r\n            }\r\n          }\r\n        </ul>\r\n      }\r\n\r\n      @if (isSearch) {\r\n        <form class=\"search-form d-flex\" role=\"search\" [ngClass]=\"{'ms-auto': !endItems.length}\"\r\n          [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n          <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\r\n            placeholder=\"{{searchPlaceholder}}\" aria-label=\"Search\">\r\n            <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\r\n              @if (searchIconClass) {\r\n                <i class=\"{{searchIconClass}}\"></i>\r\n              }\r\n              @if (searchLabel) {\r\n                <span>{{searchLabel}}</span>\r\n              }\r\n            </button>\r\n          </form>\r\n        }\r\n\r\n        <!-- <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': endItems.length <= 0}\"\r\n        [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n        <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\r\n          formControlName=\"searchValue\">\r\n          <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\r\n            <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n            <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n          </button>\r\n        </form> -->\r\n      </div>\r\n    </div>\r\n  </nav>", styles: [".sidebar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}.sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@media (prefers-reduced-motion: reduce){.sidebar-toggler{transition:none}}.sidebar-toggler:hover{text-decoration:none}.sidebar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.sidebar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}::ng-deep html[dir=rtl] .sidebar-toggler{-webkit-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep html[dir=rtl] .sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(1);transform:scaleX(1)}::ng-deep html[dir=rtl] .nav-end .nav-link{padding-left:var(--bs-navbar-nav-link-padding-x);padding-right:0!important}::ng-deep html[dir=rtl] .nav-end.nav-end-me-0{margin-left:0!important}@media (max-width: 576px){.navbar-expand-sm .search-form{margin-top:.5rem!important}.navbar-expand-sm .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 768px){.navbar-expand-md .search-form{margin-top:.5rem!important}.navbar-expand-md .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 992px){.navbar-expand-lg .search-form{margin-top:.5rem!important}.navbar-expand-lg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 1200px){.navbar-expand-xlg .search-form{margin-top:.5rem!important}.navbar-expand-xlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xlg .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 1400px){.navbar-expand-xxlg .search-form{margin-top:.5rem!important}.navbar-expand-xxlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxlg .nav-end.nav-end-me-0{margin-right:0!important}}@media (min-width: 576px){.navbar-expand-sm .navbar-nav{margin-bottom:0!important}}@media (min-width: 768px){.navbar-expand-md .navbar-nav{margin-bottom:0!important}}@media (min-width: 992px){.navbar-expand-lg .navbar-nav{margin-bottom:0!important}}@media (min-width: 1200px){.navbar-expand-xlg .navbar-nav{margin-bottom:0!important}}@media (min-width: 1400px){.navbar-expand-xxlg .navbar-nav{margin-bottom:0!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"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsNavbar, isStandalone: true, selector: "ys-navbar", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, endItems: { classPropertyName: "endItems", publicName: "endItems", isSignal: true, isRequired: false, transformFunction: null }, isSearch: { classPropertyName: "isSearch", publicName: "isSearch", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, searchIconClass: { classPropertyName: "searchIconClass", publicName: "searchIconClass", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, sidebarToggler: { classPropertyName: "sidebarToggler", publicName: "sidebarToggler", isSignal: true, isRequired: false, transformFunction: null }, sidebarTogglerIconClass: { classPropertyName: "sidebarTogglerIconClass", publicName: "sidebarTogglerIconClass", isSignal: true, isRequired: false, transformFunction: null }, sidebarToggled: { classPropertyName: "sidebarToggled", publicName: "sidebarToggled", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidebarToggled: "sidebarToggledChange", toggleSidebar: "toggleSidebar", search: "search" }, ngImport: i0, template: "<nav class=\"ys-navbar navbar navbar-expand-lg bg-primary\" [class.ys-navbar-rtl]=\"isRtl()\" [class]=\"styleClass()\"\r\n  [attr.data-bs-theme]=\"theme()\">\r\n  <div class=\"container-fluid\">\r\n    @if (sidebarToggler()) {\r\n    <button class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\" aria-expanded=\"false\"\r\n      aria-label=\"Toggle sidebar\" [class.toggled]=\"sidebarToggled()\">\r\n      <i class=\"sidebar-toggler-icon p-1\" [ngClass]=\"sidebarTogglerIconClass()\"></i>\r\n    </button>\r\n    }\r\n\r\n    <a class=\"navbar-brand\" [ngClass]=\"brand()?.styleClass\" [class.me-auto]=\"!items().length\"\r\n      [routerLink]=\"brand()?.routerLink\" [href]=\"brand()?.href\">\r\n      @if (brand()?.src) {\r\n      <img [src]=\"brand()?.src\" [alt]=\"brand()?.alt\" [width]=\"brand()?.width ?? 24\" [height]=\"brand()?.height ?? 24\"\r\n        [class.me-2]=\"brand()?.label\" />\r\n      }\r\n\r\n      {{ brand()?.label }}\r\n    </a>\r\n\r\n    @if (items().length || endItems().length || isSearch()) {\r\n    <button class=\"navbar-toggler ms-auto\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\"\r\n      [attr.aria-controls]=\"id()\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n      <span class=\"navbar-toggler-icon\"></span>\r\n    </button>\r\n    }\r\n\r\n    <div class=\"collapse navbar-collapse\" [id]=\"id()\">\r\n      @if (items().length) {\r\n      <ul class=\"navbar-nav me-auto\" [ngClass]=\"{ 'mb-2': isSearch() }\">\r\n        @for (navItem of items(); track navItem) {\r\n        @if (!isDropdown(navItem)) {\r\n        <li class=\"nav-item\">\r\n          <a class=\"nav-link\" [class.disabled]=\"navItem.disabled\" (click)=\"navItem.onClick && navItem.onClick($event)\"\r\n            [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n            [ngbTooltip]=\"navItem.tooltipLabel\" aria-current=\"page\">\r\n            @if (navItem.iconClass) {\r\n            <i class=\"pe-2\" [ngClass]=\"navItem.iconClass\"></i>\r\n            }\r\n\r\n            {{ navItem.label }}\r\n          </a>\r\n        </li>\r\n        }\r\n\r\n        @if (isDropdown(navItem)) {\r\n        <li class=\"nav-item dropdown\">\r\n          <a class=\"nav-link dropdown-toggle\" [class.disabled]=\"navItem.disabled\"\r\n            [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{ navItem.tooltipLabel }}\" data-bs-toggle=\"dropdown\"\r\n            role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            @if (navItem.iconClass) {\r\n            <i class=\"pe-2\" [ngClass]=\"navItem.iconClass\"></i>\r\n            }\r\n\r\n            @if (navItem.label) {\r\n            {{ navItem.label }}\r\n            }\r\n          </a>\r\n\r\n          <ul class=\"dropdown-menu px-2\">\r\n            @for (navSubItem of navItem.items; track navSubItem) {\r\n            <li>\r\n              @if (navSubItem.isDivider) {\r\n              <hr class=\"dropdown-divider\" />\r\n              } @else {\r\n              <a class=\"dropdown-item rounded\" (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\r\n                [class.disabled]=\"navSubItem.disabled\" [attr.aria-disabled]=\"navItem.disabled\"\r\n                [routerLink]=\"navSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                [ngbTooltip]=\"navSubItem.tooltipLabel\">\r\n                @if (navSubItem.iconClass) {\r\n                <i class=\"me-2\" [ngClass]=\"navSubItem.iconClass\"></i>\r\n                }\r\n\r\n                @if (navSubItem.label) {\r\n                {{ navSubItem.label }}\r\n                }\r\n              </a>\r\n              }\r\n            </li>\r\n            }\r\n          </ul>\r\n        </li>\r\n        }\r\n        }\r\n      </ul>\r\n      }\r\n\r\n      @if (endItems().length > 0) {\r\n      <ul class=\"navbar-nav flex-row ms-auto nav-end me-2\" [class.nav-end-me-0]=\"isSearch()\">\r\n        @for (endItem of endItems(); track endItem) {\r\n        @if (isDropdown(endItem)) {\r\n        <li class=\"nav-item dropdown\">\r\n          <a class=\"nav-link dropdown-toggle\" [ngbTooltip]=\"endItem.tooltipLabel\" data-bs-toggle=\"dropdown\"\r\n            data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            @if (endItem.iconClass) {\r\n            <i class=\"pe-2\" [ngClass]=\"endItem.iconClass\"></i>\r\n            }\r\n\r\n            @if (endItem.label) {\r\n            {{ endItem.label }}\r\n            }\r\n          </a>\r\n\r\n          <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n            @for (endItemSubItem of endItem.items; track endItemSubItem) {\r\n            @if (endItemSubItem.isDivider) {\r\n            <div class=\"dropdown-divider\"></div>\r\n            } @else {\r\n            <a class=\"dropdown-item rounded\" [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n              (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\r\n              [ngbTooltip]=\"endItemSubItem.tooltipLabel\">\r\n              @if (endItemSubItem.iconClass) {\r\n              <i class=\"me-2\" [ngClass]=\"endItemSubItem.iconClass\"></i>\r\n              }\r\n\r\n              @if (endItemSubItem.label) {\r\n              {{ endItemSubItem.label }}\r\n              }\r\n            </a>\r\n            }\r\n            }\r\n          </div>\r\n        </li>\r\n        } @else {\r\n        <li class=\"nav-item\">\r\n          <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n            (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\" [ngbTooltip]=\"endItem.tooltipLabel\">\r\n            @if (endItem.iconClass) {\r\n            <i class=\"pe-2\" [ngClass]=\"endItem.iconClass\"></i>\r\n            }\r\n\r\n            @if (endItem.label) {\r\n            {{ endItem.label }}\r\n            }\r\n          </a>\r\n        </li>\r\n        }\r\n        }\r\n      </ul>\r\n      }\r\n\r\n      @if (isSearch()) {\r\n      <form class=\"search-form d-flex\" role=\"search\" [class.ms-auto]=\"!endItems().length\" [formGroup]=\"searchForm\"\r\n        (ngSubmit)=\"submitSearch()\">\r\n        <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\r\n          [placeholder]=\"searchPlaceholder()\" aria-label=\"Search\" />\r\n\r\n        <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\r\n          @if (searchIconClass()) {\r\n          <i [ngClass]=\"searchIconClass()\"></i>\r\n          }\r\n\r\n          @if (searchLabel()) {\r\n          {{ searchLabel() }}\r\n          }\r\n        </button>\r\n      </form>\r\n      }\r\n    </div>\r\n  </div>\r\n</nav>", styles: [".sidebar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}.sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@media(prefers-reduced-motion:reduce){.sidebar-toggler{transition:none}}.sidebar-toggler:hover{text-decoration:none}.sidebar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.sidebar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;transition:all .5s ease}@media(max-width:576px){.navbar-expand-sm .search-form{margin-top:.5rem!important}.navbar-expand-sm .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .nav-end.nav-end-me-0{margin-right:0!important}}@media(min-width:576px){.navbar-expand-sm .navbar-nav{margin-bottom:0!important}}@media(max-width:768px){.navbar-expand-md .search-form{margin-top:.5rem!important}.navbar-expand-md .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .nav-end.nav-end-me-0{margin-right:0!important}}@media(min-width:768px){.navbar-expand-md .navbar-nav{margin-bottom:0!important}}@media(max-width:992px){.navbar-expand-lg .search-form{margin-top:.5rem!important}.navbar-expand-lg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .nav-end.nav-end-me-0{margin-right:0!important}}@media(min-width:992px){.navbar-expand-lg .navbar-nav{margin-bottom:0!important}}@media(max-width:1200px){.navbar-expand-xlg .search-form{margin-top:.5rem!important}.navbar-expand-xlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xlg .nav-end.nav-end-me-0{margin-right:0!important}}@media(min-width:1200px){.navbar-expand-xlg .navbar-nav{margin-bottom:0!important}}@media(max-width:1400px){.navbar-expand-xxlg .search-form{margin-top:.5rem!important}.navbar-expand-xxlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxlg .nav-end.nav-end-me-0{margin-right:0!important}}@media(min-width:1400px){.navbar-expand-xxlg .navbar-nav{margin-bottom:0!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", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsNavbar, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-navbar', imports: [
-                        NgClass,
-                        RouterLink,
-                        RouterLinkActive,
-                        ReactiveFormsModule,
-                        NgbTooltipModule
-                    ], template: "<nav class=\"navbar navbar-expand-lg bg-primary\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\r\n  <div class=\"container-fluid\">\r\n\r\n    @if (isSidebarToggler) {\r\n      <button class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\"\r\n        aria-expanded=\"false\" aria-label=\"Toggle sidebar\" [ngClass]=\"{'toggled': isSidebarToggled}\">\r\n        <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\"></i>\r\n      </button>\r\n    }\r\n\r\n    <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\r\n      @if (brand?.src) {\r\n        <img src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\r\n          height=\"{{brand?.height}}\">\r\n      }\r\n      {{brand?.label}}\r\n    </a>\r\n\r\n    @if (items.length || endItems.length || search) {\r\n      <button class=\"navbar-toggler ms-auto\" type=\"button\"\r\n        data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\r\n        aria-label=\"Toggle navigation\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n    }\r\n\r\n    <div class=\"collapse navbar-collapse\" [id]=\"id\">\r\n\r\n      @if (items.length) {\r\n        <ul class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\r\n          @for (navItem of items; track navItem) {\r\n            @if (!isDropdown(navItem)) {\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                  (click)=\"navItem.onClick && navItem.onClick($event)\" [attr.aria-disabled]=\"navItem.disabled\"\r\n                  [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                  ngbTooltip=\"{{navItem.tooltipLabel}}\" aria-current=\"page\">\r\n                  @if (navItem.iconClass) {\r\n                    <i class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n                  }\r\n                  {{navItem.label}}\r\n                </a>\r\n              </li>\r\n            }\r\n            @if (isDropdown(navItem)) {\r\n              <li class=\"nav-item dropdown\">\r\n                <a class=\"nav-link dropdown-toggle\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                  [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{navItem.tooltipLabel}}\"\r\n                  data-bs-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                  @if (navItem.iconClass) {\r\n                    <i class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (navItem.label) {\r\n                    <span>{{navItem.label}}</span>\r\n                  }\r\n                </a>\r\n                <ul class=\"dropdown-menu px-2\">\r\n                  @for (navSubItem of navItem.items; track navSubItem) {\r\n                    <li>\r\n                      @if (!navSubItem.isDivider) {\r\n                        <a class=\"dropdown-item rounded\"\r\n                          (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\r\n                          [ngClass]=\"{'disabled': navSubItem.disabled}\"\r\n                          [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navSubItem.routerLink\"\r\n                          [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\r\n                          @if (navSubItem.iconClass) {\r\n                            <i class=\"me-2 {{navSubItem.iconClass}}\"></i>\r\n                          }\r\n                          @if (navSubItem.label) {\r\n                            <span>{{navSubItem.label}}</span>\r\n                          }\r\n                        </a>\r\n                      }\r\n                      @if (navSubItem.isDivider) {\r\n                        <hr class=\"dropdown-divider\">\r\n                      }\r\n                    </li>\r\n                  }\r\n                </ul>\r\n              </li>\r\n            }\r\n          }\r\n        </ul>\r\n      }\r\n\r\n      @if (endItems.length > 0) {\r\n        <ul class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\r\n          @for (endItem of endItems; track endItem) {\r\n            @if (!isDropdown(endItem)) {\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                  (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\"\r\n                  ngbTooltip=\"{{endItem.tooltipLabel}}\">\r\n                  @if (endItem.iconClass) {\r\n                    <i class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (endItem.label) {\r\n                    <span>{{endItem.label}}</span>\r\n                  }\r\n                </a>\r\n              </li>\r\n            }\r\n            @if (isDropdown(endItem)) {\r\n              <li class=\"nav-item dropdown\">\r\n                <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{endItem.tooltipLabel}}\"\r\n                  data-bs-toggle=\"dropdown\" data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\"\r\n                  aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                  @if (endItem.iconClass) {\r\n                    <i class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (endItem.label) {\r\n                    <span>{{endItem.label}}</span>\r\n                  }\r\n                </a>\r\n                <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n                  @for (endItemSubItem of endItem.items; track endItemSubItem) {\r\n                    @if (!endItemSubItem.isDivider) {\r\n                      <a class=\"dropdown-item text-center rounded\"\r\n                        [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                        (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\r\n                        ngbTooltip=\"{{endItemSubItem.tooltipLabel}}\">\r\n                        @if (endItemSubItem.iconClass) {\r\n                          <i class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\r\n                        }\r\n                        @if (endItemSubItem.label) {\r\n                          <span>{{endItemSubItem.label}}</span>\r\n                        }\r\n                      </a>\r\n                    }\r\n                    @if (endItemSubItem.isDivider) {\r\n                      <div class=\"dropdown-divider\"></div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </li>\r\n            }\r\n          }\r\n        </ul>\r\n      }\r\n\r\n      @if (isSearch) {\r\n        <form class=\"search-form d-flex\" role=\"search\" [ngClass]=\"{'ms-auto': !endItems.length}\"\r\n          [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n          <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\r\n            placeholder=\"{{searchPlaceholder}}\" aria-label=\"Search\">\r\n            <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\r\n              @if (searchIconClass) {\r\n                <i class=\"{{searchIconClass}}\"></i>\r\n              }\r\n              @if (searchLabel) {\r\n                <span>{{searchLabel}}</span>\r\n              }\r\n            </button>\r\n          </form>\r\n        }\r\n\r\n        <!-- <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': endItems.length <= 0}\"\r\n        [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n        <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\r\n          formControlName=\"searchValue\">\r\n          <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\r\n            <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n            <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n          </button>\r\n        </form> -->\r\n      </div>\r\n    </div>\r\n  </nav>", styles: [".sidebar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}.sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@media (prefers-reduced-motion: reduce){.sidebar-toggler{transition:none}}.sidebar-toggler:hover{text-decoration:none}.sidebar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.sidebar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}::ng-deep html[dir=rtl] .sidebar-toggler{-webkit-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep html[dir=rtl] .sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(1);transform:scaleX(1)}::ng-deep html[dir=rtl] .nav-end .nav-link{padding-left:var(--bs-navbar-nav-link-padding-x);padding-right:0!important}::ng-deep html[dir=rtl] .nav-end.nav-end-me-0{margin-left:0!important}@media (max-width: 576px){.navbar-expand-sm .search-form{margin-top:.5rem!important}.navbar-expand-sm .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 768px){.navbar-expand-md .search-form{margin-top:.5rem!important}.navbar-expand-md .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 992px){.navbar-expand-lg .search-form{margin-top:.5rem!important}.navbar-expand-lg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 1200px){.navbar-expand-xlg .search-form{margin-top:.5rem!important}.navbar-expand-xlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xlg .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 1400px){.navbar-expand-xxlg .search-form{margin-top:.5rem!important}.navbar-expand-xxlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxlg .nav-end.nav-end-me-0{margin-right:0!important}}@media (min-width: 576px){.navbar-expand-sm .navbar-nav{margin-bottom:0!important}}@media (min-width: 768px){.navbar-expand-md .navbar-nav{margin-bottom:0!important}}@media (min-width: 992px){.navbar-expand-lg .navbar-nav{margin-bottom:0!important}}@media (min-width: 1200px){.navbar-expand-xlg .navbar-nav{margin-bottom:0!important}}@media (min-width: 1400px){.navbar-expand-xxlg .navbar-nav{margin-bottom:0!important}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { id: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }], styleClass: [{
-                type: Input
-            }], brand: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], endItems: [{
-                type: Input
-            }], isSearch: [{
-                type: Input
-            }], searchLabel: [{
-                type: Input
-            }], searchIconClass: [{
-                type: Input
-            }], searchPlaceholder: [{
-                type: Input
-            }], isSidebarToggler: [{
-                type: Input
-            }], isSidebarToggled: [{
-                type: Input
-            }], sidebarTogglerIconClass: [{
-                type: Input
-            }], toggleSidebar: [{
-                type: Output
-            }], search: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'ys-navbar', imports: [NgClass, RouterLink, RouterLinkActive, ReactiveFormsModule, NgbTooltipModule], changeDetection: ChangeDetectionStrategy.Eager, template: "<nav class=\"ys-navbar navbar navbar-expand-lg bg-primary\" [class.ys-navbar-rtl]=\"isRtl()\" [class]=\"styleClass()\"\r\n  [attr.data-bs-theme]=\"theme()\">\r\n  <div class=\"container-fluid\">\r\n    @if (sidebarToggler()) {\r\n    <button class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\" aria-expanded=\"false\"\r\n      aria-label=\"Toggle sidebar\" [class.toggled]=\"sidebarToggled()\">\r\n      <i class=\"sidebar-toggler-icon p-1\" [ngClass]=\"sidebarTogglerIconClass()\"></i>\r\n    </button>\r\n    }\r\n\r\n    <a class=\"navbar-brand\" [ngClass]=\"brand()?.styleClass\" [class.me-auto]=\"!items().length\"\r\n      [routerLink]=\"brand()?.routerLink\" [href]=\"brand()?.href\">\r\n      @if (brand()?.src) {\r\n      <img [src]=\"brand()?.src\" [alt]=\"brand()?.alt\" [width]=\"brand()?.width ?? 24\" [height]=\"brand()?.height ?? 24\"\r\n        [class.me-2]=\"brand()?.label\" />\r\n      }\r\n\r\n      {{ brand()?.label }}\r\n    </a>\r\n\r\n    @if (items().length || endItems().length || isSearch()) {\r\n    <button class=\"navbar-toggler ms-auto\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\"\r\n      [attr.aria-controls]=\"id()\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n      <span class=\"navbar-toggler-icon\"></span>\r\n    </button>\r\n    }\r\n\r\n    <div class=\"collapse navbar-collapse\" [id]=\"id()\">\r\n      @if (items().length) {\r\n      <ul class=\"navbar-nav me-auto\" [ngClass]=\"{ 'mb-2': isSearch() }\">\r\n        @for (navItem of items(); track navItem) {\r\n        @if (!isDropdown(navItem)) {\r\n        <li class=\"nav-item\">\r\n          <a class=\"nav-link\" [class.disabled]=\"navItem.disabled\" (click)=\"navItem.onClick && navItem.onClick($event)\"\r\n            [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n            [ngbTooltip]=\"navItem.tooltipLabel\" aria-current=\"page\">\r\n            @if (navItem.iconClass) {\r\n            <i class=\"pe-2\" [ngClass]=\"navItem.iconClass\"></i>\r\n            }\r\n\r\n            {{ navItem.label }}\r\n          </a>\r\n        </li>\r\n        }\r\n\r\n        @if (isDropdown(navItem)) {\r\n        <li class=\"nav-item dropdown\">\r\n          <a class=\"nav-link dropdown-toggle\" [class.disabled]=\"navItem.disabled\"\r\n            [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{ navItem.tooltipLabel }}\" data-bs-toggle=\"dropdown\"\r\n            role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            @if (navItem.iconClass) {\r\n            <i class=\"pe-2\" [ngClass]=\"navItem.iconClass\"></i>\r\n            }\r\n\r\n            @if (navItem.label) {\r\n            {{ navItem.label }}\r\n            }\r\n          </a>\r\n\r\n          <ul class=\"dropdown-menu px-2\">\r\n            @for (navSubItem of navItem.items; track navSubItem) {\r\n            <li>\r\n              @if (navSubItem.isDivider) {\r\n              <hr class=\"dropdown-divider\" />\r\n              } @else {\r\n              <a class=\"dropdown-item rounded\" (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\r\n                [class.disabled]=\"navSubItem.disabled\" [attr.aria-disabled]=\"navItem.disabled\"\r\n                [routerLink]=\"navSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                [ngbTooltip]=\"navSubItem.tooltipLabel\">\r\n                @if (navSubItem.iconClass) {\r\n                <i class=\"me-2\" [ngClass]=\"navSubItem.iconClass\"></i>\r\n                }\r\n\r\n                @if (navSubItem.label) {\r\n                {{ navSubItem.label }}\r\n                }\r\n              </a>\r\n              }\r\n            </li>\r\n            }\r\n          </ul>\r\n        </li>\r\n        }\r\n        }\r\n      </ul>\r\n      }\r\n\r\n      @if (endItems().length > 0) {\r\n      <ul class=\"navbar-nav flex-row ms-auto nav-end me-2\" [class.nav-end-me-0]=\"isSearch()\">\r\n        @for (endItem of endItems(); track endItem) {\r\n        @if (isDropdown(endItem)) {\r\n        <li class=\"nav-item dropdown\">\r\n          <a class=\"nav-link dropdown-toggle\" [ngbTooltip]=\"endItem.tooltipLabel\" data-bs-toggle=\"dropdown\"\r\n            data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            @if (endItem.iconClass) {\r\n            <i class=\"pe-2\" [ngClass]=\"endItem.iconClass\"></i>\r\n            }\r\n\r\n            @if (endItem.label) {\r\n            {{ endItem.label }}\r\n            }\r\n          </a>\r\n\r\n          <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n            @for (endItemSubItem of endItem.items; track endItemSubItem) {\r\n            @if (endItemSubItem.isDivider) {\r\n            <div class=\"dropdown-divider\"></div>\r\n            } @else {\r\n            <a class=\"dropdown-item rounded\" [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n              (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\r\n              [ngbTooltip]=\"endItemSubItem.tooltipLabel\">\r\n              @if (endItemSubItem.iconClass) {\r\n              <i class=\"me-2\" [ngClass]=\"endItemSubItem.iconClass\"></i>\r\n              }\r\n\r\n              @if (endItemSubItem.label) {\r\n              {{ endItemSubItem.label }}\r\n              }\r\n            </a>\r\n            }\r\n            }\r\n          </div>\r\n        </li>\r\n        } @else {\r\n        <li class=\"nav-item\">\r\n          <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n            (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\" [ngbTooltip]=\"endItem.tooltipLabel\">\r\n            @if (endItem.iconClass) {\r\n            <i class=\"pe-2\" [ngClass]=\"endItem.iconClass\"></i>\r\n            }\r\n\r\n            @if (endItem.label) {\r\n            {{ endItem.label }}\r\n            }\r\n          </a>\r\n        </li>\r\n        }\r\n        }\r\n      </ul>\r\n      }\r\n\r\n      @if (isSearch()) {\r\n      <form class=\"search-form d-flex\" role=\"search\" [class.ms-auto]=\"!endItems().length\" [formGroup]=\"searchForm\"\r\n        (ngSubmit)=\"submitSearch()\">\r\n        <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\r\n          [placeholder]=\"searchPlaceholder()\" aria-label=\"Search\" />\r\n\r\n        <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\r\n          @if (searchIconClass()) {\r\n          <i [ngClass]=\"searchIconClass()\"></i>\r\n          }\r\n\r\n          @if (searchLabel()) {\r\n          {{ searchLabel() }}\r\n          }\r\n        </button>\r\n      </form>\r\n      }\r\n    </div>\r\n  </div>\r\n</nav>", styles: [".sidebar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}.sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@media(prefers-reduced-motion:reduce){.sidebar-toggler{transition:none}}.sidebar-toggler:hover{text-decoration:none}.sidebar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.sidebar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;transition:all .5s ease}@media(max-width:576px){.navbar-expand-sm .search-form{margin-top:.5rem!important}.navbar-expand-sm .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .nav-end.nav-end-me-0{margin-right:0!important}}@media(min-width:576px){.navbar-expand-sm .navbar-nav{margin-bottom:0!important}}@media(max-width:768px){.navbar-expand-md .search-form{margin-top:.5rem!important}.navbar-expand-md .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .nav-end.nav-end-me-0{margin-right:0!important}}@media(min-width:768px){.navbar-expand-md .navbar-nav{margin-bottom:0!important}}@media(max-width:992px){.navbar-expand-lg .search-form{margin-top:.5rem!important}.navbar-expand-lg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .nav-end.nav-end-me-0{margin-right:0!important}}@media(min-width:992px){.navbar-expand-lg .navbar-nav{margin-bottom:0!important}}@media(max-width:1200px){.navbar-expand-xlg .search-form{margin-top:.5rem!important}.navbar-expand-xlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xlg .nav-end.nav-end-me-0{margin-right:0!important}}@media(min-width:1200px){.navbar-expand-xlg .navbar-nav{margin-bottom:0!important}}@media(max-width:1400px){.navbar-expand-xxlg .search-form{margin-top:.5rem!important}.navbar-expand-xxlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxlg .nav-end.nav-end-me-0{margin-right:0!important}}@media(min-width:1400px){.navbar-expand-xxlg .navbar-nav{margin-bottom:0!important}}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], endItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "endItems", required: false }] }], isSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSearch", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], searchIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIconClass", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], sidebarToggler: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarToggler", required: false }] }], sidebarTogglerIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarTogglerIconClass", required: false }] }], sidebarToggled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarToggled", required: false }] }, { type: i0.Output, args: ["sidebarToggledChange"] }], rtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtl", required: false }] }], toggleSidebar: [{ type: i0.Output, args: ["toggleSidebar"] }], search: [{ type: i0.Output, args: ["search"] }] } });
 
 /*
  * Public API Surface of ys-navbar
@@ -96,5 +80,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { YsNavbarComponent };
+export { YsNavbar };
 //# sourceMappingURL=yoozsoft-yoozsoft-ng-navbar.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-navbar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/navbar/src/ys-navbar/ys-navbar.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/navbar/src/ys-navbar/ys-navbar.component.html","../../../../projects/yoozsoft/yoozsoft-ng/navbar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/navbar/yoozsoft-yoozsoft-ng-navbar.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\r\nimport { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';\r\nimport { RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';\r\nimport { NavbarBrand, NavbarItem } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-navbar',\r\n  imports: [\r\n    NgClass,\r\n    RouterLink,\r\n    RouterLinkActive,\r\n    ReactiveFormsModule,\r\n    NgbTooltipModule\r\n],\r\n  templateUrl: './ys-navbar.component.html',\r\n  styleUrl: './ys-navbar.component.scss'\r\n})\r\nexport class YsNavbarComponent implements OnInit {\r\n\r\n  searchForm: FormGroup;\r\n\r\n  @Input() id: string = 'mainNavbar'\r\n  @Input() theme?: string = 'dark';\r\n  @Input() styleClass?: string;\r\n\r\n  @Input() brand: NavbarBrand | null = null;\r\n\r\n  @Input() items: NavbarItem[] = [];\r\n  @Input() endItems: NavbarItem[] = [];\r\n\r\n  @Input() isSearch: boolean = false;\r\n  @Input() searchLabel: string | null = 'Search';\r\n  @Input() searchIconClass?: string;\r\n  @Input() searchPlaceholder?: string = 'Search';\r\n\r\n  @Input() isSidebarToggler: boolean = false;\r\n  @Input() isSidebarToggled: boolean = true;\r\n  @Input() sidebarTogglerIconClass: string = \"fa-solid fa-angle-right\";\r\n\r\n  @Output() toggleSidebar: EventEmitter<boolean> = new EventEmitter();\r\n  @Output() search: EventEmitter<string> = new EventEmitter();\r\n\r\n  constructor(private formBuilder: FormBuilder) {\r\n    this.searchForm = this.formBuilder.group({\r\n      searchValue: ['']\r\n    });\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    // this.toggleSidebar.emit(this.isSidebarToggled);\r\n  }\r\n\r\n  onToggleSidebar() {\r\n    this.isSidebarToggled = !this.isSidebarToggled;\r\n    this.toggleSidebar.emit(this.isSidebarToggled);\r\n  }\r\n\r\n  submitSearch() {\r\n    this.search.emit(this.searchForm.get('searchValue')?.value);\r\n  }\r\n\r\n  isDropdown(item: NavbarItem) {\r\n    return item.items?.length;\r\n  }\r\n\r\n}\r\n","<nav class=\"navbar navbar-expand-lg bg-primary\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\r\n  <div class=\"container-fluid\">\r\n\r\n    @if (isSidebarToggler) {\r\n      <button class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\"\r\n        aria-expanded=\"false\" aria-label=\"Toggle sidebar\" [ngClass]=\"{'toggled': isSidebarToggled}\">\r\n        <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\"></i>\r\n      </button>\r\n    }\r\n\r\n    <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\r\n      @if (brand?.src) {\r\n        <img src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\r\n          height=\"{{brand?.height}}\">\r\n      }\r\n      {{brand?.label}}\r\n    </a>\r\n\r\n    @if (items.length || endItems.length || search) {\r\n      <button class=\"navbar-toggler ms-auto\" type=\"button\"\r\n        data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\r\n        aria-label=\"Toggle navigation\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n    }\r\n\r\n    <div class=\"collapse navbar-collapse\" [id]=\"id\">\r\n\r\n      @if (items.length) {\r\n        <ul class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\r\n          @for (navItem of items; track navItem) {\r\n            @if (!isDropdown(navItem)) {\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                  (click)=\"navItem.onClick && navItem.onClick($event)\" [attr.aria-disabled]=\"navItem.disabled\"\r\n                  [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                  ngbTooltip=\"{{navItem.tooltipLabel}}\" aria-current=\"page\">\r\n                  @if (navItem.iconClass) {\r\n                    <i class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n                  }\r\n                  {{navItem.label}}\r\n                </a>\r\n              </li>\r\n            }\r\n            @if (isDropdown(navItem)) {\r\n              <li class=\"nav-item dropdown\">\r\n                <a class=\"nav-link dropdown-toggle\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                  [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{navItem.tooltipLabel}}\"\r\n                  data-bs-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                  @if (navItem.iconClass) {\r\n                    <i class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (navItem.label) {\r\n                    <span>{{navItem.label}}</span>\r\n                  }\r\n                </a>\r\n                <ul class=\"dropdown-menu px-2\">\r\n                  @for (navSubItem of navItem.items; track navSubItem) {\r\n                    <li>\r\n                      @if (!navSubItem.isDivider) {\r\n                        <a class=\"dropdown-item rounded\"\r\n                          (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\r\n                          [ngClass]=\"{'disabled': navSubItem.disabled}\"\r\n                          [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navSubItem.routerLink\"\r\n                          [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\r\n                          @if (navSubItem.iconClass) {\r\n                            <i class=\"me-2 {{navSubItem.iconClass}}\"></i>\r\n                          }\r\n                          @if (navSubItem.label) {\r\n                            <span>{{navSubItem.label}}</span>\r\n                          }\r\n                        </a>\r\n                      }\r\n                      @if (navSubItem.isDivider) {\r\n                        <hr class=\"dropdown-divider\">\r\n                      }\r\n                    </li>\r\n                  }\r\n                </ul>\r\n              </li>\r\n            }\r\n          }\r\n        </ul>\r\n      }\r\n\r\n      @if (endItems.length > 0) {\r\n        <ul class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\r\n          @for (endItem of endItems; track endItem) {\r\n            @if (!isDropdown(endItem)) {\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                  (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\"\r\n                  ngbTooltip=\"{{endItem.tooltipLabel}}\">\r\n                  @if (endItem.iconClass) {\r\n                    <i class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (endItem.label) {\r\n                    <span>{{endItem.label}}</span>\r\n                  }\r\n                </a>\r\n              </li>\r\n            }\r\n            @if (isDropdown(endItem)) {\r\n              <li class=\"nav-item dropdown\">\r\n                <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{endItem.tooltipLabel}}\"\r\n                  data-bs-toggle=\"dropdown\" data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\"\r\n                  aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                  @if (endItem.iconClass) {\r\n                    <i class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (endItem.label) {\r\n                    <span>{{endItem.label}}</span>\r\n                  }\r\n                </a>\r\n                <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n                  @for (endItemSubItem of endItem.items; track endItemSubItem) {\r\n                    @if (!endItemSubItem.isDivider) {\r\n                      <a class=\"dropdown-item text-center rounded\"\r\n                        [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                        (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\r\n                        ngbTooltip=\"{{endItemSubItem.tooltipLabel}}\">\r\n                        @if (endItemSubItem.iconClass) {\r\n                          <i class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\r\n                        }\r\n                        @if (endItemSubItem.label) {\r\n                          <span>{{endItemSubItem.label}}</span>\r\n                        }\r\n                      </a>\r\n                    }\r\n                    @if (endItemSubItem.isDivider) {\r\n                      <div class=\"dropdown-divider\"></div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </li>\r\n            }\r\n          }\r\n        </ul>\r\n      }\r\n\r\n      @if (isSearch) {\r\n        <form class=\"search-form d-flex\" role=\"search\" [ngClass]=\"{'ms-auto': !endItems.length}\"\r\n          [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n          <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\r\n            placeholder=\"{{searchPlaceholder}}\" aria-label=\"Search\">\r\n            <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\r\n              @if (searchIconClass) {\r\n                <i class=\"{{searchIconClass}}\"></i>\r\n              }\r\n              @if (searchLabel) {\r\n                <span>{{searchLabel}}</span>\r\n              }\r\n            </button>\r\n          </form>\r\n        }\r\n\r\n        <!-- <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': endItems.length <= 0}\"\r\n        [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n        <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\r\n          formControlName=\"searchValue\">\r\n          <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\r\n            <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n            <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n          </button>\r\n        </form> -->\r\n      </div>\r\n    </div>\r\n  </nav>","/*\r\n * Public API Surface of ys-navbar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/ys-navbar/ys-navbar.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;MAmBa,iBAAiB,CAAA;AAyBR,IAAA,WAAA;AAvBpB,IAAA,UAAU;IAED,EAAE,GAAW,YAAY;IACzB,KAAK,GAAY,MAAM;AACvB,IAAA,UAAU;IAEV,KAAK,GAAuB,IAAI;IAEhC,KAAK,GAAiB,EAAE;IACxB,QAAQ,GAAiB,EAAE;IAE3B,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAkB,QAAQ;AACrC,IAAA,eAAe;IACf,iBAAiB,GAAY,QAAQ;IAErC,gBAAgB,GAAY,KAAK;IACjC,gBAAgB,GAAY,IAAI;IAChC,uBAAuB,GAAW,yBAAyB;AAE1D,IAAA,aAAa,GAA0B,IAAI,YAAY,EAAE;AACzD,IAAA,MAAM,GAAyB,IAAI,YAAY,EAAE;AAE3D,IAAA,WAAA,CAAoB,WAAwB,EAAA;QAAxB,IAAA,CAAA,WAAW,GAAX,WAAW;QAC7B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;YACvC,WAAW,EAAE,CAAC,EAAE;AACjB,SAAA,CAAC;;IAGJ,QAAQ,GAAA;;;IAIR,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB;QAC9C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC;;IAGhD,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC;;AAG7D,IAAA,UAAU,CAAC,IAAgB,EAAA;AACzB,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE,MAAM;;uGA7ChB,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,WAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,uBAAA,EAAA,yBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnB9B,kqQAuKQ,EAAA,MAAA,EAAA,CAAA,i3FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED7JJ,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACV,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAChB,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,8CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,0FAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,eAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAKP,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAZ7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,OAAA,EACZ;wBACP,OAAO;wBACP,UAAU;wBACV,gBAAgB;wBAChB,mBAAmB;wBACnB;AACH,qBAAA,EAAA,QAAA,EAAA,kqQAAA,EAAA,MAAA,EAAA,CAAA,i3FAAA,CAAA,EAAA;gFAQU,EAAE,EAAA,CAAA;sBAAV;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBAEQ,KAAK,EAAA,CAAA;sBAAb;gBAEQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBAEQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;gBAEQ,gBAAgB,EAAA,CAAA;sBAAxB;gBACQ,gBAAgB,EAAA,CAAA;sBAAxB;gBACQ,uBAAuB,EAAA,CAAA;sBAA/B;gBAES,aAAa,EAAA,CAAA;sBAAtB;gBACS,MAAM,EAAA,CAAA;sBAAf;;;AE1CH;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-navbar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/navbar/src/ys-navbar/ys-navbar.ts","../../../../projects/yoozsoft/yoozsoft-ng/navbar/src/ys-navbar/ys-navbar.html","../../../../projects/yoozsoft/yoozsoft-ng/navbar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/navbar/yoozsoft-yoozsoft-ng-navbar.ts"],"sourcesContent":["import { isPlatformBrowser, NgClass } from '@angular/common';\r\nimport {\r\n  Component,\r\n  computed,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n  PLATFORM_ID,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport { FormBuilder, ReactiveFormsModule } from '@angular/forms';\r\nimport { RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';\r\nimport { NavbarBrand, NavbarItem } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-navbar',\r\n  imports: [NgClass, RouterLink, RouterLinkActive, ReactiveFormsModule, NgbTooltipModule],\r\n  templateUrl: './ys-navbar.html',\r\n  changeDetection: ChangeDetectionStrategy.Eager,\r\n  styleUrl: './ys-navbar.scss',\r\n})\r\nexport class YsNavbar {\r\n  private platformId = inject(PLATFORM_ID);\r\n  private formBuilder = inject(FormBuilder);\r\n\r\n  searchForm = this.formBuilder.nonNullable.group({\r\n    searchValue: '',\r\n  });\r\n\r\n  id = input<string>('mainNavbar');\r\n  theme = input<string>('dark');\r\n  styleClass = input<string>();\r\n\r\n  brand = input<NavbarBrand>();\r\n\r\n  items = input<NavbarItem[]>([]);\r\n  endItems = input<NavbarItem[]>([]);\r\n\r\n  isSearch = input<boolean>(false);\r\n  searchLabel = input<string>('Search');\r\n  searchIconClass = input<string>();\r\n  searchPlaceholder = input<string>('Search');\r\n\r\n  sidebarToggler = input<boolean>(false);\r\n  sidebarTogglerIconClass = input<string>('fa-solid fa-angle-right');\r\n  sidebarToggled = model<boolean>(true);\r\n\r\n  rtl = input<boolean>();\r\n\r\n  toggleSidebar = output<boolean>();\r\n  search = output<string>();\r\n\r\n  readonly isRtl = computed(() => {\r\n    const rtl = this.rtl();\r\n\r\n    if (rtl !== undefined) {\r\n      return rtl;\r\n    }\r\n\r\n    if (!isPlatformBrowser(this.platformId)) {\r\n      return false;\r\n    }\r\n\r\n    return document.documentElement.dir === 'rtl';\r\n  });\r\n\r\n  onToggleSidebar() {\r\n    this.sidebarToggled.update((v) => !v);\r\n    this.toggleSidebar.emit(this.sidebarToggled());\r\n  }\r\n\r\n  submitSearch() {\r\n    this.search.emit(this.searchForm.controls['searchValue'].value.trim());\r\n  }\r\n\r\n  isDropdown(item: NavbarItem): boolean {\r\n    return !!item.items?.length;\r\n  }\r\n}\r\n","<nav class=\"ys-navbar navbar navbar-expand-lg bg-primary\" [class.ys-navbar-rtl]=\"isRtl()\" [class]=\"styleClass()\"\r\n  [attr.data-bs-theme]=\"theme()\">\r\n  <div class=\"container-fluid\">\r\n    @if (sidebarToggler()) {\r\n    <button class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\" aria-expanded=\"false\"\r\n      aria-label=\"Toggle sidebar\" [class.toggled]=\"sidebarToggled()\">\r\n      <i class=\"sidebar-toggler-icon p-1\" [ngClass]=\"sidebarTogglerIconClass()\"></i>\r\n    </button>\r\n    }\r\n\r\n    <a class=\"navbar-brand\" [ngClass]=\"brand()?.styleClass\" [class.me-auto]=\"!items().length\"\r\n      [routerLink]=\"brand()?.routerLink\" [href]=\"brand()?.href\">\r\n      @if (brand()?.src) {\r\n      <img [src]=\"brand()?.src\" [alt]=\"brand()?.alt\" [width]=\"brand()?.width ?? 24\" [height]=\"brand()?.height ?? 24\"\r\n        [class.me-2]=\"brand()?.label\" />\r\n      }\r\n\r\n      {{ brand()?.label }}\r\n    </a>\r\n\r\n    @if (items().length || endItems().length || isSearch()) {\r\n    <button class=\"navbar-toggler ms-auto\" type=\"button\" data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\"\r\n      [attr.aria-controls]=\"id()\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n      <span class=\"navbar-toggler-icon\"></span>\r\n    </button>\r\n    }\r\n\r\n    <div class=\"collapse navbar-collapse\" [id]=\"id()\">\r\n      @if (items().length) {\r\n      <ul class=\"navbar-nav me-auto\" [ngClass]=\"{ 'mb-2': isSearch() }\">\r\n        @for (navItem of items(); track navItem) {\r\n        @if (!isDropdown(navItem)) {\r\n        <li class=\"nav-item\">\r\n          <a class=\"nav-link\" [class.disabled]=\"navItem.disabled\" (click)=\"navItem.onClick && navItem.onClick($event)\"\r\n            [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n            [ngbTooltip]=\"navItem.tooltipLabel\" aria-current=\"page\">\r\n            @if (navItem.iconClass) {\r\n            <i class=\"pe-2\" [ngClass]=\"navItem.iconClass\"></i>\r\n            }\r\n\r\n            {{ navItem.label }}\r\n          </a>\r\n        </li>\r\n        }\r\n\r\n        @if (isDropdown(navItem)) {\r\n        <li class=\"nav-item dropdown\">\r\n          <a class=\"nav-link dropdown-toggle\" [class.disabled]=\"navItem.disabled\"\r\n            [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{ navItem.tooltipLabel }}\" data-bs-toggle=\"dropdown\"\r\n            role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            @if (navItem.iconClass) {\r\n            <i class=\"pe-2\" [ngClass]=\"navItem.iconClass\"></i>\r\n            }\r\n\r\n            @if (navItem.label) {\r\n            {{ navItem.label }}\r\n            }\r\n          </a>\r\n\r\n          <ul class=\"dropdown-menu px-2\">\r\n            @for (navSubItem of navItem.items; track navSubItem) {\r\n            <li>\r\n              @if (navSubItem.isDivider) {\r\n              <hr class=\"dropdown-divider\" />\r\n              } @else {\r\n              <a class=\"dropdown-item rounded\" (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\r\n                [class.disabled]=\"navSubItem.disabled\" [attr.aria-disabled]=\"navItem.disabled\"\r\n                [routerLink]=\"navSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                [ngbTooltip]=\"navSubItem.tooltipLabel\">\r\n                @if (navSubItem.iconClass) {\r\n                <i class=\"me-2\" [ngClass]=\"navSubItem.iconClass\"></i>\r\n                }\r\n\r\n                @if (navSubItem.label) {\r\n                {{ navSubItem.label }}\r\n                }\r\n              </a>\r\n              }\r\n            </li>\r\n            }\r\n          </ul>\r\n        </li>\r\n        }\r\n        }\r\n      </ul>\r\n      }\r\n\r\n      @if (endItems().length > 0) {\r\n      <ul class=\"navbar-nav flex-row ms-auto nav-end me-2\" [class.nav-end-me-0]=\"isSearch()\">\r\n        @for (endItem of endItems(); track endItem) {\r\n        @if (isDropdown(endItem)) {\r\n        <li class=\"nav-item dropdown\">\r\n          <a class=\"nav-link dropdown-toggle\" [ngbTooltip]=\"endItem.tooltipLabel\" data-bs-toggle=\"dropdown\"\r\n            data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            @if (endItem.iconClass) {\r\n            <i class=\"pe-2\" [ngClass]=\"endItem.iconClass\"></i>\r\n            }\r\n\r\n            @if (endItem.label) {\r\n            {{ endItem.label }}\r\n            }\r\n          </a>\r\n\r\n          <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n            @for (endItemSubItem of endItem.items; track endItemSubItem) {\r\n            @if (endItemSubItem.isDivider) {\r\n            <div class=\"dropdown-divider\"></div>\r\n            } @else {\r\n            <a class=\"dropdown-item rounded\" [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n              (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\r\n              [ngbTooltip]=\"endItemSubItem.tooltipLabel\">\r\n              @if (endItemSubItem.iconClass) {\r\n              <i class=\"me-2\" [ngClass]=\"endItemSubItem.iconClass\"></i>\r\n              }\r\n\r\n              @if (endItemSubItem.label) {\r\n              {{ endItemSubItem.label }}\r\n              }\r\n            </a>\r\n            }\r\n            }\r\n          </div>\r\n        </li>\r\n        } @else {\r\n        <li class=\"nav-item\">\r\n          <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n            (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\" [ngbTooltip]=\"endItem.tooltipLabel\">\r\n            @if (endItem.iconClass) {\r\n            <i class=\"pe-2\" [ngClass]=\"endItem.iconClass\"></i>\r\n            }\r\n\r\n            @if (endItem.label) {\r\n            {{ endItem.label }}\r\n            }\r\n          </a>\r\n        </li>\r\n        }\r\n        }\r\n      </ul>\r\n      }\r\n\r\n      @if (isSearch()) {\r\n      <form class=\"search-form d-flex\" role=\"search\" [class.ms-auto]=\"!endItems().length\" [formGroup]=\"searchForm\"\r\n        (ngSubmit)=\"submitSearch()\">\r\n        <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\r\n          [placeholder]=\"searchPlaceholder()\" aria-label=\"Search\" />\r\n\r\n        <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\r\n          @if (searchIconClass()) {\r\n          <i [ngClass]=\"searchIconClass()\"></i>\r\n          }\r\n\r\n          @if (searchLabel()) {\r\n          {{ searchLabel() }}\r\n          }\r\n        </button>\r\n      </form>\r\n      }\r\n    </div>\r\n  </div>\r\n</nav>","/*\r\n * Public API Surface of ys-navbar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/ys-navbar/ys-navbar';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,21 +1,17 @@
-import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component } from '@angular/core';
+import { input, output, ChangeDetectionStrategy, Component } from '@angular/core';
 
-class YsOverlayComponent {
-    show = false;
-    onClick = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: YsOverlayComponent, isStandalone: true, selector: "ys-overlay", inputs: { show: "show" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div class=\"overlay bg-dark\" (click)=\"onClick.emit($event)\" [ngClass]=\"{'show': show}\"></div>", styles: ["@-webkit-keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}@keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}.overlay{position:fixed;inset:0;z-index:100;opacity:.5;display:none;-webkit-animation:fadeIn-overlay .5s;animation:fadeIn-overlay .5s}.overlay.show{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+class YsOverlay {
+    show = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
+    onClick = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: YsOverlay, isStandalone: true, selector: "ys-overlay", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div class=\"overlay bg-dark\" [class.show]=\"show()\" (click)=\"onClick.emit($event)\"></div>", styles: [".overlay{position:fixed;inset:0;z-index:100;opacity:0;display:hidden;pointer-events:none;transition:opacity .5s ease}.overlay.show{opacity:.5;visibility:visible;pointer-events:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsOverlay, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-overlay', imports: [NgClass], template: "<div class=\"overlay bg-dark\" (click)=\"onClick.emit($event)\" [ngClass]=\"{'show': show}\"></div>", styles: ["@-webkit-keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}@keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}.overlay{position:fixed;inset:0;z-index:100;opacity:.5;display:none;-webkit-animation:fadeIn-overlay .5s;animation:fadeIn-overlay .5s}.overlay.show{display:block}\n"] }]
-        }], propDecorators: { show: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'ys-overlay', imports: [], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"overlay bg-dark\" [class.show]=\"show()\" (click)=\"onClick.emit($event)\"></div>", styles: [".overlay{position:fixed;inset:0;z-index:100;opacity:0;display:hidden;pointer-events:none;transition:opacity .5s ease}.overlay.show{opacity:.5;visibility:visible;pointer-events:auto}\n"] }]
+        }], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
 /*
  * Public API Surface of ys-overlay
@@ -25,5 +21,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { YsOverlayComponent };
+export { YsOverlay };
 //# sourceMappingURL=yoozsoft-yoozsoft-ng-overlay.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-overlay.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/overlay/src/ys-overlay/ys-overlay.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/overlay/src/ys-overlay/ys-overlay.component.html","../../../../projects/yoozsoft/yoozsoft-ng/overlay/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/overlay/yoozsoft-yoozsoft-ng-overlay.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'ys-overlay',\r\n  imports: [NgClass],\r\n  templateUrl: './ys-overlay.component.html',\r\n  styleUrl: './ys-overlay.component.scss'\r\n})\r\nexport class YsOverlayComponent {\r\n\r\n  @Input() show: boolean = false;\r\n  @Output() onClick: EventEmitter<MouseEvent> = new EventEmitter();\r\n\r\n}\r\n","<div class=\"overlay bg-dark\" (click)=\"onClick.emit($event)\" [ngClass]=\"{'show': show}\"></div>","/*\r\n * Public API Surface of ys-overlay\r\n */\r\n\r\nexport * from './src/ys-overlay/ys-overlay.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MASa,kBAAkB,CAAA;IAEpB,IAAI,GAAY,KAAK;AACpB,IAAA,OAAO,GAA6B,IAAI,YAAY,EAAE;uGAHrD,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECT/B,qGAA6F,EAAA,MAAA,EAAA,CAAA,0RAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDKjF,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIN,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,SAAS;+BACE,YAAY,EAAA,OAAA,EACb,CAAC,OAAO,CAAC,EAAA,QAAA,EAAA,qGAAA,EAAA,MAAA,EAAA,CAAA,0RAAA,CAAA,EAAA;8BAMT,IAAI,EAAA,CAAA;sBAAZ;gBACS,OAAO,EAAA,CAAA;sBAAhB;;;AEZH;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-overlay.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/overlay/src/ys-overlay/ys-overlay.ts","../../../../projects/yoozsoft/yoozsoft-ng/overlay/src/ys-overlay/ys-overlay.html","../../../../projects/yoozsoft/yoozsoft-ng/overlay/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/overlay/yoozsoft-yoozsoft-ng-overlay.ts"],"sourcesContent":["import { Component, input, output, ChangeDetectionStrategy } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'ys-overlay',\r\n  imports: [],\r\n  templateUrl: './ys-overlay.html',\r\n  changeDetection: ChangeDetectionStrategy.Eager,\r\n  styleUrl: './ys-overlay.scss',\r\n})\r\nexport class YsOverlay {\r\n  show = input<boolean>(false);\r\n\r\n  onClick = output<MouseEvent>();\r\n}\r\n","<div class=\"overlay bg-dark\" [class.show]=\"show()\" (click)=\"onClick.emit($event)\"></div>","/*\r\n * Public API Surface of ys-overlay\r\n */\r\n\r\nexport * from './src/ys-overlay/ys-overlay';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MASa,SAAS,CAAA;IACpB,IAAI,GAAG,KAAK,CAAU,KAAK;6EAAC;IAE5B,OAAO,GAAG,MAAM,EAAc;uGAHnB,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,wOCTtB,gGAAwF,EAAA,MAAA,EAAA,CAAA,yLAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,KAAA,EAAA,CAAA;;2FDS3E,SAAS,EAAA,UAAA,EAAA,CAAA;kBAPrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,OAAA,EACb,EAAE,EAAA,eAAA,EAEM,uBAAuB,CAAC,KAAK,EAAA,QAAA,EAAA,gGAAA,EAAA,MAAA,EAAA,CAAA,yLAAA,CAAA,EAAA;;;AENhD;;AAEG;;ACFH;;AAEG;;;;"}