@yoozsoft/yoozsoft-ng 5.0.2 → 5.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/js/UTIF.js-master/LICENSE +21 -21
- package/assets/js/UTIF.js-master/README.md +72 -72
- package/assets/js/UTIF.js-master/UTIF.js +1762 -1762
- package/assets/js/UTIF.js-master/package-lock.json +13 -13
- package/fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs +12 -12
- package/fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-footer.mjs +2 -2
- package/fesm2022/yoozsoft-yoozsoft-ng-footer.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-loading.mjs +2 -2
- package/fesm2022/yoozsoft-yoozsoft-ng-loading.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-navbar.mjs +2 -2
- package/fesm2022/yoozsoft-yoozsoft-ng-navbar.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-password-strength.mjs +2 -2
- package/fesm2022/yoozsoft-yoozsoft-ng-password-strength.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-select.mjs +4 -4
- package/fesm2022/yoozsoft-yoozsoft-ng-select.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs +2 -2
- package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-toast.mjs +2 -2
- package/fesm2022/yoozsoft-yoozsoft-ng-toast.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng.mjs.map +1 -1
- package/package.json +13 -13
- package/select/index.d.ts +2 -2
|
@@ -45,7 +45,7 @@ class YsNavbarComponent {
|
|
|
45
45
|
return item.items?.length;
|
|
46
46
|
}
|
|
47
47
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsNavbarComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
-
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\">\n <div class=\"container-fluid\">\n\n @if (isSidebarToggler) {\n <button class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\"\n aria-expanded=\"false\" aria-label=\"Toggle sidebar\" [ngClass]=\"{'toggled': isSidebarToggled}\">\n <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\"></i>\n </button>\n }\n\n <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\n @if (brand?.src) {\n <img src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\n height=\"{{brand?.height}}\">\n }\n {{brand?.label}}\n </a>\n\n @if (items.length || endItems.length || search) {\n <button class=\"navbar-toggler ms-auto\" type=\"button\"\n data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\n aria-label=\"Toggle navigation\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n }\n\n <div class=\"collapse navbar-collapse\" [id]=\"id\">\n\n @if (items.length) {\n <ul class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\n @for (navItem of items; track navItem) {\n @if (!isDropdown(navItem)) {\n <li class=\"nav-item\">\n <a class=\"nav-link\" [ngClass]=\"{'disabled': navItem.disabled}\"\n (click)=\"navItem.onClick && navItem.onClick($event)\" [attr.aria-disabled]=\"navItem.disabled\"\n [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\n ngbTooltip=\"{{navItem.tooltipLabel}}\" aria-current=\"page\">\n @if (navItem.iconClass) {\n <i class=\"pe-2 {{navItem.iconClass}}\"></i>\n }\n {{navItem.label}}\n </a>\n </li>\n }\n @if (isDropdown(navItem)) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" [ngClass]=\"{'disabled': navItem.disabled}\"\n [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{navItem.tooltipLabel}}\"\n data-bs-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\n @if (navItem.iconClass) {\n <i class=\"pe-2 {{navItem.iconClass}}\"></i>\n }\n @if (navItem.label) {\n <span>{{navItem.label}}</span>\n }\n </a>\n <ul class=\"dropdown-menu px-2\">\n @for (navSubItem of navItem.items; track navSubItem) {\n <li>\n @if (!navSubItem.isDivider) {\n <a class=\"dropdown-item rounded\"\n (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\n [ngClass]=\"{'disabled': navSubItem.disabled}\"\n [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navSubItem.routerLink\"\n [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\n @if (navSubItem.iconClass) {\n <i class=\"me-2 {{navSubItem.iconClass}}\"></i>\n }\n @if (navSubItem.label) {\n <span>{{navSubItem.label}}</span>\n }\n </a>\n }\n @if (navSubItem.isDivider) {\n <hr class=\"dropdown-divider\">\n }\n </li>\n }\n </ul>\n </li>\n }\n }\n </ul>\n }\n\n @if (endItems.length > 0) {\n <ul class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\n @for (endItem of endItems; track endItem) {\n @if (!isDropdown(endItem)) {\n <li class=\"nav-item\">\n <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\n (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\"\n ngbTooltip=\"{{endItem.tooltipLabel}}\">\n @if (endItem.iconClass) {\n <i class=\"pe-2 {{endItem.iconClass}}\"></i>\n }\n @if (endItem.label) {\n <span>{{endItem.label}}</span>\n }\n </a>\n </li>\n }\n @if (isDropdown(endItem)) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{endItem.tooltipLabel}}\"\n data-bs-toggle=\"dropdown\" data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\"\n aria-haspopup=\"true\" aria-expanded=\"false\">\n @if (endItem.iconClass) {\n <i class=\"pe-2 {{endItem.iconClass}}\"></i>\n }\n @if (endItem.label) {\n <span>{{endItem.label}}</span>\n }\n </a>\n <div class=\"dropdown-menu px-2 dropdown-menu-end\">\n @for (endItemSubItem of endItem.items; track endItemSubItem) {\n @if (!endItemSubItem.isDivider) {\n <a class=\"dropdown-item text-center rounded\"\n [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\n (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\n ngbTooltip=\"{{endItemSubItem.tooltipLabel}}\">\n @if (endItemSubItem.iconClass) {\n <i class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\n }\n @if (endItemSubItem.label) {\n <span>{{endItemSubItem.label}}</span>\n }\n </a>\n }\n @if (endItemSubItem.isDivider) {\n <div class=\"dropdown-divider\"></div>\n }\n }\n </div>\n </li>\n }\n }\n </ul>\n }\n\n @if (isSearch) {\n <form class=\"search-form d-flex\" role=\"search\" [ngClass]=\"{'ms-auto': !endItems.length}\"\n [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\n <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\n placeholder=\"{{searchPlaceholder}}\" aria-label=\"Search\">\n <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\n @if (searchIconClass) {\n <i class=\"{{searchIconClass}}\"></i>\n }\n @if (searchLabel) {\n <span>{{searchLabel}}</span>\n }\n </button>\n </form>\n }\n\n <!-- <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': endItems.length <= 0}\"\n [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\n <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\n formControlName=\"searchValue\">\n <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\n <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\n <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\n </button>\n </form> -->\n </div>\n </div>\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"] }] });
|
|
48
|
+
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"] }] });
|
|
49
49
|
}
|
|
50
50
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsNavbarComponent, decorators: [{
|
|
51
51
|
type: Component,
|
|
@@ -55,7 +55,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
55
55
|
RouterLinkActive,
|
|
56
56
|
ReactiveFormsModule,
|
|
57
57
|
NgbTooltipModule
|
|
58
|
-
], template: "<nav class=\"navbar navbar-expand-lg bg-primary\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\n <div class=\"container-fluid\">\n\n @if (isSidebarToggler) {\n <button class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\"\n aria-expanded=\"false\" aria-label=\"Toggle sidebar\" [ngClass]=\"{'toggled': isSidebarToggled}\">\n <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\"></i>\n </button>\n }\n\n <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\n @if (brand?.src) {\n <img src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\n height=\"{{brand?.height}}\">\n }\n {{brand?.label}}\n </a>\n\n @if (items.length || endItems.length || search) {\n <button class=\"navbar-toggler ms-auto\" type=\"button\"\n data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\n aria-label=\"Toggle navigation\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n }\n\n <div class=\"collapse navbar-collapse\" [id]=\"id\">\n\n @if (items.length) {\n <ul class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\n @for (navItem of items; track navItem) {\n @if (!isDropdown(navItem)) {\n <li class=\"nav-item\">\n <a class=\"nav-link\" [ngClass]=\"{'disabled': navItem.disabled}\"\n (click)=\"navItem.onClick && navItem.onClick($event)\" [attr.aria-disabled]=\"navItem.disabled\"\n [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\n ngbTooltip=\"{{navItem.tooltipLabel}}\" aria-current=\"page\">\n @if (navItem.iconClass) {\n <i class=\"pe-2 {{navItem.iconClass}}\"></i>\n }\n {{navItem.label}}\n </a>\n </li>\n }\n @if (isDropdown(navItem)) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" [ngClass]=\"{'disabled': navItem.disabled}\"\n [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{navItem.tooltipLabel}}\"\n data-bs-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\n @if (navItem.iconClass) {\n <i class=\"pe-2 {{navItem.iconClass}}\"></i>\n }\n @if (navItem.label) {\n <span>{{navItem.label}}</span>\n }\n </a>\n <ul class=\"dropdown-menu px-2\">\n @for (navSubItem of navItem.items; track navSubItem) {\n <li>\n @if (!navSubItem.isDivider) {\n <a class=\"dropdown-item rounded\"\n (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\n [ngClass]=\"{'disabled': navSubItem.disabled}\"\n [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navSubItem.routerLink\"\n [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\n @if (navSubItem.iconClass) {\n <i class=\"me-2 {{navSubItem.iconClass}}\"></i>\n }\n @if (navSubItem.label) {\n <span>{{navSubItem.label}}</span>\n }\n </a>\n }\n @if (navSubItem.isDivider) {\n <hr class=\"dropdown-divider\">\n }\n </li>\n }\n </ul>\n </li>\n }\n }\n </ul>\n }\n\n @if (endItems.length > 0) {\n <ul class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\n @for (endItem of endItems; track endItem) {\n @if (!isDropdown(endItem)) {\n <li class=\"nav-item\">\n <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\n (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\"\n ngbTooltip=\"{{endItem.tooltipLabel}}\">\n @if (endItem.iconClass) {\n <i class=\"pe-2 {{endItem.iconClass}}\"></i>\n }\n @if (endItem.label) {\n <span>{{endItem.label}}</span>\n }\n </a>\n </li>\n }\n @if (isDropdown(endItem)) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{endItem.tooltipLabel}}\"\n data-bs-toggle=\"dropdown\" data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\"\n aria-haspopup=\"true\" aria-expanded=\"false\">\n @if (endItem.iconClass) {\n <i class=\"pe-2 {{endItem.iconClass}}\"></i>\n }\n @if (endItem.label) {\n <span>{{endItem.label}}</span>\n }\n </a>\n <div class=\"dropdown-menu px-2 dropdown-menu-end\">\n @for (endItemSubItem of endItem.items; track endItemSubItem) {\n @if (!endItemSubItem.isDivider) {\n <a class=\"dropdown-item text-center rounded\"\n [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\n (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\n ngbTooltip=\"{{endItemSubItem.tooltipLabel}}\">\n @if (endItemSubItem.iconClass) {\n <i class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\n }\n @if (endItemSubItem.label) {\n <span>{{endItemSubItem.label}}</span>\n }\n </a>\n }\n @if (endItemSubItem.isDivider) {\n <div class=\"dropdown-divider\"></div>\n }\n }\n </div>\n </li>\n }\n }\n </ul>\n }\n\n @if (isSearch) {\n <form class=\"search-form d-flex\" role=\"search\" [ngClass]=\"{'ms-auto': !endItems.length}\"\n [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\n <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\n placeholder=\"{{searchPlaceholder}}\" aria-label=\"Search\">\n <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\n @if (searchIconClass) {\n <i class=\"{{searchIconClass}}\"></i>\n }\n @if (searchLabel) {\n <span>{{searchLabel}}</span>\n }\n </button>\n </form>\n }\n\n <!-- <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': endItems.length <= 0}\"\n [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\n <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\n formControlName=\"searchValue\">\n <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\n <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\n <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\n </button>\n </form> -->\n </div>\n </div>\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"] }]
|
|
58
|
+
], 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"] }]
|
|
59
59
|
}], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { id: [{
|
|
60
60
|
type: Input
|
|
61
61
|
}], theme: [{
|
|
@@ -1 +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: [\n NgClass,\n RouterLink,\n RouterLinkActive,\n ReactiveFormsModule,\n NgbTooltipModule\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\">\n <div class=\"container-fluid\">\n\n @if (isSidebarToggler) {\n <button class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\"\n aria-expanded=\"false\" aria-label=\"Toggle sidebar\" [ngClass]=\"{'toggled': isSidebarToggled}\">\n <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\"></i>\n </button>\n }\n\n <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\n @if (brand?.src) {\n <img src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\n height=\"{{brand?.height}}\">\n }\n {{brand?.label}}\n </a>\n\n @if (items.length || endItems.length || search) {\n <button class=\"navbar-toggler ms-auto\" type=\"button\"\n data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\n aria-label=\"Toggle navigation\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n }\n\n <div class=\"collapse navbar-collapse\" [id]=\"id\">\n\n @if (items.length) {\n <ul class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\n @for (navItem of items; track navItem) {\n @if (!isDropdown(navItem)) {\n <li class=\"nav-item\">\n <a class=\"nav-link\" [ngClass]=\"{'disabled': navItem.disabled}\"\n (click)=\"navItem.onClick && navItem.onClick($event)\" [attr.aria-disabled]=\"navItem.disabled\"\n [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\n ngbTooltip=\"{{navItem.tooltipLabel}}\" aria-current=\"page\">\n @if (navItem.iconClass) {\n <i class=\"pe-2 {{navItem.iconClass}}\"></i>\n }\n {{navItem.label}}\n </a>\n </li>\n }\n @if (isDropdown(navItem)) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" [ngClass]=\"{'disabled': navItem.disabled}\"\n [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{navItem.tooltipLabel}}\"\n data-bs-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\n @if (navItem.iconClass) {\n <i class=\"pe-2 {{navItem.iconClass}}\"></i>\n }\n @if (navItem.label) {\n <span>{{navItem.label}}</span>\n }\n </a>\n <ul class=\"dropdown-menu px-2\">\n @for (navSubItem of navItem.items; track navSubItem) {\n <li>\n @if (!navSubItem.isDivider) {\n <a class=\"dropdown-item rounded\"\n (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\n [ngClass]=\"{'disabled': navSubItem.disabled}\"\n [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navSubItem.routerLink\"\n [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\n @if (navSubItem.iconClass) {\n <i class=\"me-2 {{navSubItem.iconClass}}\"></i>\n }\n @if (navSubItem.label) {\n <span>{{navSubItem.label}}</span>\n }\n </a>\n }\n @if (navSubItem.isDivider) {\n <hr class=\"dropdown-divider\">\n }\n </li>\n }\n </ul>\n </li>\n }\n }\n </ul>\n }\n\n @if (endItems.length > 0) {\n <ul class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\n @for (endItem of endItems; track endItem) {\n @if (!isDropdown(endItem)) {\n <li class=\"nav-item\">\n <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\n (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\"\n ngbTooltip=\"{{endItem.tooltipLabel}}\">\n @if (endItem.iconClass) {\n <i class=\"pe-2 {{endItem.iconClass}}\"></i>\n }\n @if (endItem.label) {\n <span>{{endItem.label}}</span>\n }\n </a>\n </li>\n }\n @if (isDropdown(endItem)) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{endItem.tooltipLabel}}\"\n data-bs-toggle=\"dropdown\" data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\"\n aria-haspopup=\"true\" aria-expanded=\"false\">\n @if (endItem.iconClass) {\n <i class=\"pe-2 {{endItem.iconClass}}\"></i>\n }\n @if (endItem.label) {\n <span>{{endItem.label}}</span>\n }\n </a>\n <div class=\"dropdown-menu px-2 dropdown-menu-end\">\n @for (endItemSubItem of endItem.items; track endItemSubItem) {\n @if (!endItemSubItem.isDivider) {\n <a class=\"dropdown-item text-center rounded\"\n [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\n (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\n ngbTooltip=\"{{endItemSubItem.tooltipLabel}}\">\n @if (endItemSubItem.iconClass) {\n <i class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\n }\n @if (endItemSubItem.label) {\n <span>{{endItemSubItem.label}}</span>\n }\n </a>\n }\n @if (endItemSubItem.isDivider) {\n <div class=\"dropdown-divider\"></div>\n }\n }\n </div>\n </li>\n }\n }\n </ul>\n }\n\n @if (isSearch) {\n <form class=\"search-form d-flex\" role=\"search\" [ngClass]=\"{'ms-auto': !endItems.length}\"\n [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\n <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\n placeholder=\"{{searchPlaceholder}}\" aria-label=\"Search\">\n <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\n @if (searchIconClass) {\n <i class=\"{{searchIconClass}}\"></i>\n }\n @if (searchLabel) {\n <span>{{searchLabel}}</span>\n }\n </button>\n </form>\n }\n\n <!-- <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': endItems.length <= 0}\"\n [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\n <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\n formControlName=\"searchValue\">\n <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\n <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\n <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\n </button>\n </form> -->\n </div>\n </div>\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":"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"}
|
|
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;;;;"}
|
|
@@ -92,11 +92,11 @@ class YsPasswordStrengthComponent {
|
|
|
92
92
|
'';
|
|
93
93
|
}
|
|
94
94
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsPasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
95
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsPasswordStrengthComponent, isStandalone: true, selector: "ys-password-strength", inputs: { passwordHelp: "passwordHelp", displayFeedback: "displayFeedback", feedback: "feedback", control: "control" }, ngImport: i0, template: "@if (control) {\n <div class=\"password-strength\">\n <div class=\"d-flex flex-row mt-1\">\n @if (this.requiredOptionsLength > 4) {\n <hr class=\"rounded-start rounded-end me-1\"\n [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n @if (this.requiredOptionsLength > 3) {\n <hr class=\"rounded-start rounded-end me-1\"\n [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n @if (this.requiredOptionsLength > 2) {\n <hr class=\"rounded-start rounded-end me-1\"\n [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n @if (this.requiredOptionsLength > 1) {\n <hr class=\"rounded-start rounded-end me-1\"\n [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n @if (this.requiredOptionsLength > 0) {\n <hr class=\"rounded-start rounded-end\"\n [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n </div>\n @if (passwordHelp) {\n <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\n }\n @if (displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)) {\n <div\n class=\"invalid-feedback d-grid \">\n @if (control.options?.requireUppercase) {\n <span\n [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\n }\n @if (control.options?.requireLowercase) {\n <span\n [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\n }\n @if (control.options?.requireDigit) {\n <span [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\n }\n @if (control.options?.requireNonAlphanumeric) {\n <span\n [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\n }\n @if (control.options?.requiredMinLength) {\n <span\n [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\n }\n </div>\n }\n @if (control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)) {\n <div\n class=\"invalid-feedback d-grid \">\n {{feedback?.required}}\n </div>\n }\n </div>\n }\n\n @if (!control) {\n <div>\n Password strength control is undefined.\n </div>\n }", styles: [".is-invalid ys-password-strength~.invalid-feedback{display:block}.password-strength hr{border-top:3px solid;margin:0;opacity:.75!important}.password-strength .gray{color:var(--bs-gray-300)}.password-strength .pink{color:var(--bs-pink)}.password-strength .red{color:var(--bs-red)}.password-strength .orange{color:var(--bs-orange)}.password-strength .yellow{color:var(--bs-yellow)}.password-strength .green{color:var(--bs-green)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
95
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsPasswordStrengthComponent, isStandalone: true, selector: "ys-password-strength", inputs: { passwordHelp: "passwordHelp", displayFeedback: "displayFeedback", feedback: "feedback", control: "control" }, ngImport: i0, template: "@if (control) {\r\n <div class=\"password-strength\">\r\n <div class=\"d-flex flex-row mt-1\">\r\n @if (this.requiredOptionsLength > 4) {\r\n <hr class=\"rounded-start rounded-end me-1\"\r\n [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n @if (this.requiredOptionsLength > 3) {\r\n <hr class=\"rounded-start rounded-end me-1\"\r\n [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n @if (this.requiredOptionsLength > 2) {\r\n <hr class=\"rounded-start rounded-end me-1\"\r\n [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n @if (this.requiredOptionsLength > 1) {\r\n <hr class=\"rounded-start rounded-end me-1\"\r\n [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n @if (this.requiredOptionsLength > 0) {\r\n <hr class=\"rounded-start rounded-end\"\r\n [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n </div>\r\n @if (passwordHelp) {\r\n <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\r\n }\r\n @if (displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n <div\r\n class=\"invalid-feedback d-grid \">\r\n @if (control.options?.requireUppercase) {\r\n <span\r\n [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\r\n }\r\n @if (control.options?.requireLowercase) {\r\n <span\r\n [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\r\n }\r\n @if (control.options?.requireDigit) {\r\n <span [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\r\n }\r\n @if (control.options?.requireNonAlphanumeric) {\r\n <span\r\n [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\r\n }\r\n @if (control.options?.requiredMinLength) {\r\n <span\r\n [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\r\n }\r\n </div>\r\n }\r\n @if (control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n <div\r\n class=\"invalid-feedback d-grid \">\r\n {{feedback?.required}}\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (!control) {\r\n <div>\r\n Password strength control is undefined.\r\n </div>\r\n }", styles: [".is-invalid ys-password-strength~.invalid-feedback{display:block}.password-strength hr{border-top:3px solid;margin:0;opacity:.75!important}.password-strength .gray{color:var(--bs-gray-300)}.password-strength .pink{color:var(--bs-pink)}.password-strength .red{color:var(--bs-red)}.password-strength .orange{color:var(--bs-orange)}.password-strength .yellow{color:var(--bs-yellow)}.password-strength .green{color:var(--bs-green)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
96
96
|
}
|
|
97
97
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsPasswordStrengthComponent, decorators: [{
|
|
98
98
|
type: Component,
|
|
99
|
-
args: [{ selector: 'ys-password-strength', imports: [NgClass], template: "@if (control) {\n <div class=\"password-strength\">\n <div class=\"d-flex flex-row mt-1\">\n @if (this.requiredOptionsLength > 4) {\n <hr class=\"rounded-start rounded-end me-1\"\n [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n @if (this.requiredOptionsLength > 3) {\n <hr class=\"rounded-start rounded-end me-1\"\n [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n @if (this.requiredOptionsLength > 2) {\n <hr class=\"rounded-start rounded-end me-1\"\n [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n @if (this.requiredOptionsLength > 1) {\n <hr class=\"rounded-start rounded-end me-1\"\n [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n @if (this.requiredOptionsLength > 0) {\n <hr class=\"rounded-start rounded-end\"\n [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n </div>\n @if (passwordHelp) {\n <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\n }\n @if (displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)) {\n <div\n class=\"invalid-feedback d-grid \">\n @if (control.options?.requireUppercase) {\n <span\n [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\n }\n @if (control.options?.requireLowercase) {\n <span\n [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\n }\n @if (control.options?.requireDigit) {\n <span [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\n }\n @if (control.options?.requireNonAlphanumeric) {\n <span\n [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\n }\n @if (control.options?.requiredMinLength) {\n <span\n [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\n }\n </div>\n }\n @if (control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)) {\n <div\n class=\"invalid-feedback d-grid \">\n {{feedback?.required}}\n </div>\n }\n </div>\n }\n\n @if (!control) {\n <div>\n Password strength control is undefined.\n </div>\n }", styles: [".is-invalid ys-password-strength~.invalid-feedback{display:block}.password-strength hr{border-top:3px solid;margin:0;opacity:.75!important}.password-strength .gray{color:var(--bs-gray-300)}.password-strength .pink{color:var(--bs-pink)}.password-strength .red{color:var(--bs-red)}.password-strength .orange{color:var(--bs-orange)}.password-strength .yellow{color:var(--bs-yellow)}.password-strength .green{color:var(--bs-green)}\n"] }]
|
|
99
|
+
args: [{ selector: 'ys-password-strength', imports: [NgClass], template: "@if (control) {\r\n <div class=\"password-strength\">\r\n <div class=\"d-flex flex-row mt-1\">\r\n @if (this.requiredOptionsLength > 4) {\r\n <hr class=\"rounded-start rounded-end me-1\"\r\n [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n @if (this.requiredOptionsLength > 3) {\r\n <hr class=\"rounded-start rounded-end me-1\"\r\n [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n @if (this.requiredOptionsLength > 2) {\r\n <hr class=\"rounded-start rounded-end me-1\"\r\n [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n @if (this.requiredOptionsLength > 1) {\r\n <hr class=\"rounded-start rounded-end me-1\"\r\n [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n @if (this.requiredOptionsLength > 0) {\r\n <hr class=\"rounded-start rounded-end\"\r\n [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n </div>\r\n @if (passwordHelp) {\r\n <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\r\n }\r\n @if (displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n <div\r\n class=\"invalid-feedback d-grid \">\r\n @if (control.options?.requireUppercase) {\r\n <span\r\n [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\r\n }\r\n @if (control.options?.requireLowercase) {\r\n <span\r\n [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\r\n }\r\n @if (control.options?.requireDigit) {\r\n <span [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\r\n }\r\n @if (control.options?.requireNonAlphanumeric) {\r\n <span\r\n [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\r\n }\r\n @if (control.options?.requiredMinLength) {\r\n <span\r\n [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\r\n }\r\n </div>\r\n }\r\n @if (control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n <div\r\n class=\"invalid-feedback d-grid \">\r\n {{feedback?.required}}\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (!control) {\r\n <div>\r\n Password strength control is undefined.\r\n </div>\r\n }", styles: [".is-invalid ys-password-strength~.invalid-feedback{display:block}.password-strength hr{border-top:3px solid;margin:0;opacity:.75!important}.password-strength .gray{color:var(--bs-gray-300)}.password-strength .pink{color:var(--bs-pink)}.password-strength .red{color:var(--bs-red)}.password-strength .orange{color:var(--bs-orange)}.password-strength .yellow{color:var(--bs-yellow)}.password-strength .green{color:var(--bs-green)}\n"] }]
|
|
100
100
|
}], propDecorators: { passwordHelp: [{
|
|
101
101
|
type: Input
|
|
102
102
|
}], displayFeedback: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"yoozsoft-yoozsoft-ng-password-strength.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/models/regx.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/models/strength-validation-feedback.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/models/strength-validation-option.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/ys-password-strength/ys-password-strength.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/ys-password-strength/ys-password-strength.component.html","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/directives/ys-password-strength.directive.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/yoozsoft-yoozsoft-ng-password-strength.ts"],"sourcesContent":["export const StrongPasswordRegx: RegExp = /^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=\\D*\\d)(?=.*[!@#$%^&*]).{8,}$/;\r\nexport const UppercaseRegx: RegExp = /^.*[A-Z]/;\r\nexport const LowercaseRegx: RegExp = /^.*[a-z]/;\r\nexport const DigitRegx: RegExp = /^.*[0-9].*/;\r\nexport const NonAlphanumericRegx: RegExp = /^.*[!@#$%^&*]/;\r\n// export const MinLength8Regx: RegExp = /^.{8,}/;","export class StrengthValidationFeedback {\r\n required?: string;\r\n uppercase?: string;\r\n lowercase?: string;\r\n digit?: string;\r\n nonAlphanumeric?: string;\r\n minLength?: string;\r\n\r\n constructor(\r\n options?: {\r\n required?: string,\r\n uppercase?: string,\r\n lowercase?: string,\r\n digit?: string,\r\n nonAlphanumeric?: string,\r\n minLength?: string\r\n }\r\n ) {\r\n this.required = options?.required == undefined ? 'Please enter a valid password.' : options?.required;\r\n this.uppercase = options?.uppercase == undefined ? 'At least one uppercase letter.' : options?.uppercase;\r\n this.lowercase = options?.lowercase == undefined ? 'At least one lowercase letter.' : options?.lowercase;\r\n this.digit = options?.digit == undefined ? 'At least one digit.' : options?.digit;\r\n this.nonAlphanumeric = options?.nonAlphanumeric == undefined ? 'At least one special character (e.g., !, @, #, $).' : options?.nonAlphanumeric;\r\n this.minLength = options?.minLength == undefined ? 'At least 8 characters long.' : options?.minLength;\r\n }\r\n}","export class StrengthValidationOption {\r\n requireUppercase?: boolean;\r\n requireLowercase?: boolean;\r\n requireDigit?: boolean;\r\n requireNonAlphanumeric?: boolean;\r\n requiredMinLength: number;\r\n\r\n constructor(\r\n options?: {\r\n requireUppercase?: boolean,\r\n requireLowercase?: boolean,\r\n requireDigit?: boolean,\r\n requireNonAlphanumeric?: boolean,\r\n requiredMinLength?: number\r\n }\r\n ) {\r\n this.requireUppercase = options?.requireUppercase == undefined ? true : options?.requireUppercase;\r\n this.requireLowercase = options?.requireLowercase == undefined ? true : options?.requireLowercase;\r\n this.requireDigit = options?.requireDigit == undefined ? true : options?.requireDigit;\r\n this.requireNonAlphanumeric = options?.requireNonAlphanumeric == undefined ? true : options?.requireNonAlphanumeric;\r\n this.requiredMinLength = options?.requiredMinLength == undefined ? 8 : options?.requiredMinLength;\r\n }\r\n}","import { NgClass } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { Validators } from '@angular/forms';\r\nimport { DigitRegx, LowercaseRegx, NonAlphanumericRegx, StrengthValidationControl, StrengthValidationFeedback, StrengthValidationOption, UppercaseRegx } from '../models';\r\n\r\n@Component({\r\n selector: 'ys-password-strength',\r\n imports: [NgClass],\r\n templateUrl: './ys-password-strength.component.html',\r\n styleUrl: './ys-password-strength.component.scss'\r\n})\r\nexport class YsPasswordStrengthComponent {\r\n\r\n @Input() passwordHelp: string | null = null;\r\n @Input() displayFeedback: boolean = true;\r\n @Input() feedback: StrengthValidationFeedback | null = new StrengthValidationFeedback();\r\n\r\n private minLengthRegx: RegExp = new RegExp('');\r\n\r\n private _control?: StrengthValidationControl;\r\n @Input()\r\n get control(): StrengthValidationControl | undefined { return this._control; }\r\n set control(value: StrengthValidationControl | undefined) {\r\n this._control = value;\r\n\r\n if (!this._control) { return; }\r\n\r\n if (!this._control.options) {\r\n this._control.options = new StrengthValidationOption();\r\n }\r\n\r\n const strongPasswordRegx: RegExp = new RegExp(\r\n `${this._control.options.requireUppercase ? '^(?=[^A-Z]*[A-Z])' : ''\r\n }${this._control.options.requireLowercase ? '(?=[^a-z]*[a-z])' : ''\r\n }${this._control.options.requireDigit ? '(?=\\\\D*\\\\d)' : ''\r\n }${this._control.options.requireNonAlphanumeric ? '(?=.*[!@#$%^&*])' : ''\r\n }.{${this._control.options.requiredMinLength},}$`);\r\n\r\n this.minLengthRegx = new RegExp(`.{${this._control.options.requiredMinLength},}$`);\r\n\r\n this._control.formControl?.addValidators([Validators.required, Validators.pattern(strongPasswordRegx)]);\r\n this._control.formControl?.updateValueAndValidity();\r\n\r\n }\r\n\r\n get requiredOptionsLength(): number { return Object.values(this.control?.options!).filter(x => x).length; }\r\n\r\n get hasUppercase(): boolean { return this.control?.formControl?.value && UppercaseRegx.test(this.control?.formControl?.value); }\r\n get hasLowercase(): boolean { return this.control?.formControl?.value && LowercaseRegx.test(this.control?.formControl?.value); }\r\n get hasDigit(): boolean { return this.control?.formControl?.value && DigitRegx.test(this.control?.formControl?.value); }\r\n get hasNonAlphanumeric(): boolean { return this.control?.formControl?.value && NonAlphanumericRegx.test(this.control?.formControl?.value); }\r\n get hasMinLength(): boolean { return this.control?.formControl?.value && this.minLengthRegx.test(this.control?.formControl?.value); }\r\n\r\n get strengthMeter(): number {\r\n\r\n let strength: number = -1;\r\n if (this.control?.options?.requireUppercase && this.hasUppercase)\r\n strength += 1;\r\n if (this.control?.options?.requireLowercase && this.hasLowercase)\r\n strength += 1;\r\n if (this.control?.options?.requireDigit && this.hasDigit)\r\n strength += 1;\r\n if (this.control?.options?.requireNonAlphanumeric && this.hasNonAlphanumeric)\r\n strength += 1;\r\n if (this.control?.options?.requiredMinLength && this.hasMinLength)\r\n strength += 1;\r\n\r\n return strength + (5 - this.requiredOptionsLength);\r\n }\r\n\r\n get strengthStyleClass(): string {\r\n return this.strengthMeter == 4 ? \"green\" :\r\n this.strengthMeter == 3 ? \"yellow\" :\r\n this.strengthMeter == 2 ? \"orange\" :\r\n this.strengthMeter == 1 ? \"red\" :\r\n this.strengthMeter == 0 ? \"pink\" :\r\n '';\r\n }\r\n\r\n}\r\n","@if (control) {\n <div class=\"password-strength\">\n <div class=\"d-flex flex-row mt-1\">\n @if (this.requiredOptionsLength > 4) {\n <hr class=\"rounded-start rounded-end me-1\"\n [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n @if (this.requiredOptionsLength > 3) {\n <hr class=\"rounded-start rounded-end me-1\"\n [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n @if (this.requiredOptionsLength > 2) {\n <hr class=\"rounded-start rounded-end me-1\"\n [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n @if (this.requiredOptionsLength > 1) {\n <hr class=\"rounded-start rounded-end me-1\"\n [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n @if (this.requiredOptionsLength > 0) {\n <hr class=\"rounded-start rounded-end\"\n [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\n [style.width.%]=\"[100 / requiredOptionsLength]\">\n }\n </div>\n @if (passwordHelp) {\n <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\n }\n @if (displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)) {\n <div\n class=\"invalid-feedback d-grid \">\n @if (control.options?.requireUppercase) {\n <span\n [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\n }\n @if (control.options?.requireLowercase) {\n <span\n [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\n }\n @if (control.options?.requireDigit) {\n <span [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\n }\n @if (control.options?.requireNonAlphanumeric) {\n <span\n [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\n }\n @if (control.options?.requiredMinLength) {\n <span\n [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\n }\n </div>\n }\n @if (control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)) {\n <div\n class=\"invalid-feedback d-grid \">\n {{feedback?.required}}\n </div>\n }\n </div>\n }\n\n @if (!control) {\n <div>\n Password strength control is undefined.\n </div>\n }","import { Directive, ElementRef, Injector, Input, OnInit, ViewContainerRef } from '@angular/core';\r\nimport { AbstractControl, NgControl } from '@angular/forms';\r\nimport { StrengthValidationFeedback, StrengthValidationOption } from '../models';\r\nimport { YsPasswordStrengthComponent } from '../ys-password-strength/ys-password-strength.component';\r\n\r\n@Directive({\r\n selector: '[ysPasswordStrength]'\r\n})\r\nexport class YsPasswordStrengthDirective implements OnInit {\r\n\r\n @Input() passwordHelp: string | null = null;\r\n @Input() displayFeedback: boolean = true;\r\n @Input() feedback: StrengthValidationFeedback | null = new StrengthValidationFeedback();\r\n @Input() options?: StrengthValidationOption;\r\n\r\n constructor(\r\n private el: ElementRef,\r\n private viewContainerRef: ViewContainerRef,\r\n private injector: Injector,\r\n private control: NgControl\r\n ) { }\r\n\r\n ngOnInit(): void {\r\n const element = this.el.nativeElement;\r\n const elementParent = element.parentElement;\r\n\r\n const formControl: AbstractControl<any, any> | null = this.control.control;\r\n\r\n const passwordStrengthComponent = this.viewContainerRef.createComponent(YsPasswordStrengthComponent, { injector: this.injector });\r\n elementParent.insertBefore(passwordStrengthComponent.location.nativeElement, element.nextSibling);\r\n\r\n const passwordStrength: YsPasswordStrengthComponent = passwordStrengthComponent.instance;\r\n passwordStrength.passwordHelp = this.passwordHelp;\r\n passwordStrength.displayFeedback = this.displayFeedback;\r\n passwordStrength.feedback = this.feedback;\r\n passwordStrength.control = { formControl: formControl, options: this.options };\r\n\r\n }\r\n\r\n}\r\n","/*\r\n * Public API Surface of ys-password-strength\r\n */\r\n\r\nexport * from './src/directives';\r\nexport * from './src/models';\r\nexport * from './src/ys-password-strength/ys-password-strength.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"yoozsoft-yoozsoft-ng-password-strength.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/models/regx.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/models/strength-validation-feedback.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/models/strength-validation-option.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/ys-password-strength/ys-password-strength.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/ys-password-strength/ys-password-strength.component.html","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/directives/ys-password-strength.directive.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/yoozsoft-yoozsoft-ng-password-strength.ts"],"sourcesContent":["export const StrongPasswordRegx: RegExp = /^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=\\D*\\d)(?=.*[!@#$%^&*]).{8,}$/;\r\nexport const UppercaseRegx: RegExp = /^.*[A-Z]/;\r\nexport const LowercaseRegx: RegExp = /^.*[a-z]/;\r\nexport const DigitRegx: RegExp = /^.*[0-9].*/;\r\nexport const NonAlphanumericRegx: RegExp = /^.*[!@#$%^&*]/;\r\n// export const MinLength8Regx: RegExp = /^.{8,}/;","export class StrengthValidationFeedback {\r\n required?: string;\r\n uppercase?: string;\r\n lowercase?: string;\r\n digit?: string;\r\n nonAlphanumeric?: string;\r\n minLength?: string;\r\n\r\n constructor(\r\n options?: {\r\n required?: string,\r\n uppercase?: string,\r\n lowercase?: string,\r\n digit?: string,\r\n nonAlphanumeric?: string,\r\n minLength?: string\r\n }\r\n ) {\r\n this.required = options?.required == undefined ? 'Please enter a valid password.' : options?.required;\r\n this.uppercase = options?.uppercase == undefined ? 'At least one uppercase letter.' : options?.uppercase;\r\n this.lowercase = options?.lowercase == undefined ? 'At least one lowercase letter.' : options?.lowercase;\r\n this.digit = options?.digit == undefined ? 'At least one digit.' : options?.digit;\r\n this.nonAlphanumeric = options?.nonAlphanumeric == undefined ? 'At least one special character (e.g., !, @, #, $).' : options?.nonAlphanumeric;\r\n this.minLength = options?.minLength == undefined ? 'At least 8 characters long.' : options?.minLength;\r\n }\r\n}","export class StrengthValidationOption {\r\n requireUppercase?: boolean;\r\n requireLowercase?: boolean;\r\n requireDigit?: boolean;\r\n requireNonAlphanumeric?: boolean;\r\n requiredMinLength: number;\r\n\r\n constructor(\r\n options?: {\r\n requireUppercase?: boolean,\r\n requireLowercase?: boolean,\r\n requireDigit?: boolean,\r\n requireNonAlphanumeric?: boolean,\r\n requiredMinLength?: number\r\n }\r\n ) {\r\n this.requireUppercase = options?.requireUppercase == undefined ? true : options?.requireUppercase;\r\n this.requireLowercase = options?.requireLowercase == undefined ? true : options?.requireLowercase;\r\n this.requireDigit = options?.requireDigit == undefined ? true : options?.requireDigit;\r\n this.requireNonAlphanumeric = options?.requireNonAlphanumeric == undefined ? true : options?.requireNonAlphanumeric;\r\n this.requiredMinLength = options?.requiredMinLength == undefined ? 8 : options?.requiredMinLength;\r\n }\r\n}","import { NgClass } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { Validators } from '@angular/forms';\r\nimport { DigitRegx, LowercaseRegx, NonAlphanumericRegx, StrengthValidationControl, StrengthValidationFeedback, StrengthValidationOption, UppercaseRegx } from '../models';\r\n\r\n@Component({\r\n selector: 'ys-password-strength',\r\n imports: [NgClass],\r\n templateUrl: './ys-password-strength.component.html',\r\n styleUrl: './ys-password-strength.component.scss'\r\n})\r\nexport class YsPasswordStrengthComponent {\r\n\r\n @Input() passwordHelp: string | null = null;\r\n @Input() displayFeedback: boolean = true;\r\n @Input() feedback: StrengthValidationFeedback | null = new StrengthValidationFeedback();\r\n\r\n private minLengthRegx: RegExp = new RegExp('');\r\n\r\n private _control?: StrengthValidationControl;\r\n @Input()\r\n get control(): StrengthValidationControl | undefined { return this._control; }\r\n set control(value: StrengthValidationControl | undefined) {\r\n this._control = value;\r\n\r\n if (!this._control) { return; }\r\n\r\n if (!this._control.options) {\r\n this._control.options = new StrengthValidationOption();\r\n }\r\n\r\n const strongPasswordRegx: RegExp = new RegExp(\r\n `${this._control.options.requireUppercase ? '^(?=[^A-Z]*[A-Z])' : ''\r\n }${this._control.options.requireLowercase ? '(?=[^a-z]*[a-z])' : ''\r\n }${this._control.options.requireDigit ? '(?=\\\\D*\\\\d)' : ''\r\n }${this._control.options.requireNonAlphanumeric ? '(?=.*[!@#$%^&*])' : ''\r\n }.{${this._control.options.requiredMinLength},}$`);\r\n\r\n this.minLengthRegx = new RegExp(`.{${this._control.options.requiredMinLength},}$`);\r\n\r\n this._control.formControl?.addValidators([Validators.required, Validators.pattern(strongPasswordRegx)]);\r\n this._control.formControl?.updateValueAndValidity();\r\n\r\n }\r\n\r\n get requiredOptionsLength(): number { return Object.values(this.control?.options!).filter(x => x).length; }\r\n\r\n get hasUppercase(): boolean { return this.control?.formControl?.value && UppercaseRegx.test(this.control?.formControl?.value); }\r\n get hasLowercase(): boolean { return this.control?.formControl?.value && LowercaseRegx.test(this.control?.formControl?.value); }\r\n get hasDigit(): boolean { return this.control?.formControl?.value && DigitRegx.test(this.control?.formControl?.value); }\r\n get hasNonAlphanumeric(): boolean { return this.control?.formControl?.value && NonAlphanumericRegx.test(this.control?.formControl?.value); }\r\n get hasMinLength(): boolean { return this.control?.formControl?.value && this.minLengthRegx.test(this.control?.formControl?.value); }\r\n\r\n get strengthMeter(): number {\r\n\r\n let strength: number = -1;\r\n if (this.control?.options?.requireUppercase && this.hasUppercase)\r\n strength += 1;\r\n if (this.control?.options?.requireLowercase && this.hasLowercase)\r\n strength += 1;\r\n if (this.control?.options?.requireDigit && this.hasDigit)\r\n strength += 1;\r\n if (this.control?.options?.requireNonAlphanumeric && this.hasNonAlphanumeric)\r\n strength += 1;\r\n if (this.control?.options?.requiredMinLength && this.hasMinLength)\r\n strength += 1;\r\n\r\n return strength + (5 - this.requiredOptionsLength);\r\n }\r\n\r\n get strengthStyleClass(): string {\r\n return this.strengthMeter == 4 ? \"green\" :\r\n this.strengthMeter == 3 ? \"yellow\" :\r\n this.strengthMeter == 2 ? \"orange\" :\r\n this.strengthMeter == 1 ? \"red\" :\r\n this.strengthMeter == 0 ? \"pink\" :\r\n '';\r\n }\r\n\r\n}\r\n","@if (control) {\r\n <div class=\"password-strength\">\r\n <div class=\"d-flex flex-row mt-1\">\r\n @if (this.requiredOptionsLength > 4) {\r\n <hr class=\"rounded-start rounded-end me-1\"\r\n [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n @if (this.requiredOptionsLength > 3) {\r\n <hr class=\"rounded-start rounded-end me-1\"\r\n [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n @if (this.requiredOptionsLength > 2) {\r\n <hr class=\"rounded-start rounded-end me-1\"\r\n [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n @if (this.requiredOptionsLength > 1) {\r\n <hr class=\"rounded-start rounded-end me-1\"\r\n [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n @if (this.requiredOptionsLength > 0) {\r\n <hr class=\"rounded-start rounded-end\"\r\n [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\r\n [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n }\r\n </div>\r\n @if (passwordHelp) {\r\n <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\r\n }\r\n @if (displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n <div\r\n class=\"invalid-feedback d-grid \">\r\n @if (control.options?.requireUppercase) {\r\n <span\r\n [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\r\n }\r\n @if (control.options?.requireLowercase) {\r\n <span\r\n [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\r\n }\r\n @if (control.options?.requireDigit) {\r\n <span [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\r\n }\r\n @if (control.options?.requireNonAlphanumeric) {\r\n <span\r\n [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\r\n }\r\n @if (control.options?.requiredMinLength) {\r\n <span\r\n [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\r\n }\r\n </div>\r\n }\r\n @if (control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n <div\r\n class=\"invalid-feedback d-grid \">\r\n {{feedback?.required}}\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (!control) {\r\n <div>\r\n Password strength control is undefined.\r\n </div>\r\n }","import { Directive, ElementRef, Injector, Input, OnInit, ViewContainerRef } from '@angular/core';\r\nimport { AbstractControl, NgControl } from '@angular/forms';\r\nimport { StrengthValidationFeedback, StrengthValidationOption } from '../models';\r\nimport { YsPasswordStrengthComponent } from '../ys-password-strength/ys-password-strength.component';\r\n\r\n@Directive({\r\n selector: '[ysPasswordStrength]'\r\n})\r\nexport class YsPasswordStrengthDirective implements OnInit {\r\n\r\n @Input() passwordHelp: string | null = null;\r\n @Input() displayFeedback: boolean = true;\r\n @Input() feedback: StrengthValidationFeedback | null = new StrengthValidationFeedback();\r\n @Input() options?: StrengthValidationOption;\r\n\r\n constructor(\r\n private el: ElementRef,\r\n private viewContainerRef: ViewContainerRef,\r\n private injector: Injector,\r\n private control: NgControl\r\n ) { }\r\n\r\n ngOnInit(): void {\r\n const element = this.el.nativeElement;\r\n const elementParent = element.parentElement;\r\n\r\n const formControl: AbstractControl<any, any> | null = this.control.control;\r\n\r\n const passwordStrengthComponent = this.viewContainerRef.createComponent(YsPasswordStrengthComponent, { injector: this.injector });\r\n elementParent.insertBefore(passwordStrengthComponent.location.nativeElement, element.nextSibling);\r\n\r\n const passwordStrength: YsPasswordStrengthComponent = passwordStrengthComponent.instance;\r\n passwordStrength.passwordHelp = this.passwordHelp;\r\n passwordStrength.displayFeedback = this.displayFeedback;\r\n passwordStrength.feedback = this.feedback;\r\n passwordStrength.control = { formControl: formControl, options: this.options };\r\n\r\n }\r\n\r\n}\r\n","/*\r\n * Public API Surface of ys-password-strength\r\n */\r\n\r\nexport * from './src/directives';\r\nexport * from './src/models';\r\nexport * from './src/ys-password-strength/ys-password-strength.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ class YsSelectComponent {
|
|
|
23
23
|
/**Display clear button */
|
|
24
24
|
isClear = false;
|
|
25
25
|
disabled = false;
|
|
26
|
-
|
|
26
|
+
selected = new EventEmitter();
|
|
27
27
|
onChange = () => { };
|
|
28
28
|
onTouched = () => { };
|
|
29
29
|
value;
|
|
@@ -62,7 +62,7 @@ class YsSelectComponent {
|
|
|
62
62
|
onModelChange(option) {
|
|
63
63
|
this.onChange(option);
|
|
64
64
|
this.onTouched(option);
|
|
65
|
-
this.
|
|
65
|
+
this.selected.emit(option);
|
|
66
66
|
}
|
|
67
67
|
clearValue() {
|
|
68
68
|
this.multiple ? this.value = [] : this.value = null;
|
|
@@ -72,7 +72,7 @@ class YsSelectComponent {
|
|
|
72
72
|
return typeof item == 'object';
|
|
73
73
|
}
|
|
74
74
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
75
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsSelectComponent, isStandalone: true, selector: "ys-select", inputs: { id: "id", options: "options", optionLabel: "optionLabel", placeholder: "placeholder", styleClass: "styleClass", invalid: "invalid", invalidFeedback: "invalidFeedback", valid: "valid", validFeedback: "validFeedback", multiple: "multiple", size: "size", isClear: "isClear", disabled: "disabled" }, outputs: {
|
|
75
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsSelectComponent, isStandalone: true, selector: "ys-select", inputs: { id: "id", options: "options", optionLabel: "optionLabel", placeholder: "placeholder", styleClass: "styleClass", invalid: "invalid", invalidFeedback: "invalidFeedback", valid: "valid", validFeedback: "validFeedback", multiple: "multiple", size: "size", isClear: "isClear", disabled: "disabled" }, outputs: { selected: "selected" }, providers: [
|
|
76
76
|
{
|
|
77
77
|
provide: NG_VALUE_ACCESSOR,
|
|
78
78
|
useExisting: forwardRef(() => YsSelectComponent),
|
|
@@ -115,7 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
115
115
|
type: Input
|
|
116
116
|
}], disabled: [{
|
|
117
117
|
type: Input
|
|
118
|
-
}],
|
|
118
|
+
}], selected: [{
|
|
119
119
|
type: Output
|
|
120
120
|
}] } });
|
|
121
121
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"yoozsoft-yoozsoft-ng-select.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.html","../../../../projects/yoozsoft/yoozsoft-ng/select/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/yoozsoft-yoozsoft-ng-select.ts"],"sourcesContent":["\r\nimport { NgClass } from '@angular/common';\r\nimport { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'ys-select',\r\n imports: [FormsModule, NgClass],\r\n templateUrl: './ys-select.component.html',\r\n styleUrl: './ys-select.component.scss',\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => YsSelectComponent),\r\n multi: true\r\n }\r\n ]\r\n})\r\nexport class YsSelectComponent implements ControlValueAccessor {\r\n\r\n /**ُSelect element id */\r\n @Input() id: string = 'ys-select';\r\n @Input() options: any[] = [];\r\n /**Name of field to display in option title */\r\n @Input() optionLabel: string = 'label';\r\n @Input() placeholder?: string;\r\n @Input() styleClass?: string;\r\n @Input() invalid?: boolean = false;\r\n @Input() invalidFeedback?: string;\r\n @Input() valid?: boolean = false;\r\n @Input() validFeedback?: string;\r\n /**Support multiple attribute */\r\n @Input() multiple?: boolean = false;\r\n /**Size of multiple attribute */\r\n @Input() size?: number;\r\n /**Display clear button */\r\n @Input() isClear?: boolean = false;\r\n\r\n @Input() disabled: boolean = false;\r\n @Output()
|
|
1
|
+
{"version":3,"file":"yoozsoft-yoozsoft-ng-select.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.html","../../../../projects/yoozsoft/yoozsoft-ng/select/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/yoozsoft-yoozsoft-ng-select.ts"],"sourcesContent":["\r\nimport { NgClass } from '@angular/common';\r\nimport { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'ys-select',\r\n imports: [FormsModule, NgClass],\r\n templateUrl: './ys-select.component.html',\r\n styleUrl: './ys-select.component.scss',\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => YsSelectComponent),\r\n multi: true\r\n }\r\n ]\r\n})\r\nexport class YsSelectComponent implements ControlValueAccessor {\r\n\r\n /**ُSelect element id */\r\n @Input() id: string = 'ys-select';\r\n @Input() options: any[] = [];\r\n /**Name of field to display in option title */\r\n @Input() optionLabel: string = 'label';\r\n @Input() placeholder?: string;\r\n @Input() styleClass?: string;\r\n @Input() invalid?: boolean = false;\r\n @Input() invalidFeedback?: string;\r\n @Input() valid?: boolean = false;\r\n @Input() validFeedback?: string;\r\n /**Support multiple attribute */\r\n @Input() multiple?: boolean = false;\r\n /**Size of multiple attribute */\r\n @Input() size?: number;\r\n /**Display clear button */\r\n @Input() isClear?: boolean = false;\r\n\r\n @Input() disabled: boolean = false;\r\n @Output() selected: EventEmitter<any> = new EventEmitter<any>();\r\n\r\n onChange: any = () => { }\r\n onTouched: any = () => { }\r\n\r\n value?: any;\r\n\r\n writeValue(obj: any): void {\r\n if (!this.multiple && this.placeholder && !obj) {\r\n this.value = null;\r\n this.onChange(this.value);\r\n return;\r\n }\r\n\r\n if (this.multiple && !obj) {\r\n this.multiple ? this.value = [] : this.value = null;\r\n this.onChange(this.value);\r\n return;\r\n }\r\n\r\n if (!this.multiple && obj && Array.isArray(obj)) {\r\n if (obj.length) {\r\n this.value = obj[0];\r\n }\r\n else {\r\n this.value = null;\r\n }\r\n this.onChange(this.value);\r\n return;\r\n }\r\n\r\n this.value = obj;\r\n }\r\n registerOnChange(fn: any): void {\r\n this.onChange = fn;\r\n }\r\n registerOnTouched(fn: any): void {\r\n this.onTouched = fn;\r\n }\r\n setDisabledState?(isDisabled: boolean): void {\r\n this.disabled = isDisabled;\r\n }\r\n\r\n onModelChange(option: any) {\r\n this.onChange(option);\r\n this.onTouched(option);\r\n this.selected.emit(option);\r\n }\r\n\r\n clearValue() {\r\n this.multiple ? this.value = [] : this.value = null;\r\n this.onModelChange(this.value);\r\n }\r\n\r\n isObject(item: any) {\r\n return typeof item == 'object';\r\n }\r\n\r\n}\r\n","<div class=\"ys-select\" [ngClass]=\"{'input-group': isClear, 'is-valid': valid, 'is-invalid': invalid}\">\r\n\r\n @if (!multiple) {\r\n <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\r\n @if (placeholder) {\r\n <option selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\r\n </option>\r\n }\r\n @for (item of options; track item; let i = $index) {\r\n <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n {{isObject(item) ? item[optionLabel] : item}}\r\n </option>\r\n }\r\n </select>\r\n }\r\n\r\n @if (multiple) {\r\n <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\"\r\n [multiple]=\"multiple\" [size]=\"size\">\r\n @if (placeholder) {\r\n <option selected disabled [ngValue]=\"null\"> {{placeholder}}\r\n </option>\r\n }\r\n @for (item of options; track item; let i = $index) {\r\n <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n {{isObject(item) ? item[optionLabel] : item}}\r\n </option>\r\n }\r\n </select>\r\n }\r\n\r\n @if (isClear) {\r\n <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearValue()\"\r\n [disabled]=\"disabled\">\r\n <span class=\"fa fa-times\"></span>\r\n </button>\r\n }\r\n</div>\r\n\r\n@if(valid && validFeedback){\r\n<div class=\"valid-feedback\">{{validFeedback}}</div>\r\n}\r\n@if(invalid && invalidFeedback){\r\n<div class=\"invalid-feedback\">{{invalidFeedback}}</div>\r\n}","/*\r\n * Public API Surface of ys-select\r\n */\r\n\r\nexport * from './src/ys-select/ys-select.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -104,11 +104,11 @@ class YsSidebarComponent {
|
|
|
104
104
|
// }
|
|
105
105
|
}
|
|
106
106
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsSidebarComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsSidebarComponent, isStandalone: true, selector: "ys-sidebar", inputs: { items: "items", profile: "profile", styleClass: "styleClass", itemsStyleClass: "itemsStyleClass" }, ngImport: i0, template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\n @if (profile) {\n <div>\n @if (profile.image || fullName || profile.role) {\n <div\n class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\n @if (profile.image) {\n <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\n <div class=\"user-image rounded-circle m-auto transition-ease\">\n <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\n </div>\n </div>\n }\n @if (fullName || profile.role) {\n <div class=\"profile-details d-flex flex-column text-center transition-ease\">\n @if (fullName) {\n <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\n }\n @if (profile.role) {\n <small class=\"text-uppercase role\">{{profile.role}}</small>\n }\n </div>\n }\n </div>\n }\n <hr />\n </div>\n }\n\n <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\n <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\n @for (item of items; track item) {\n @if (item.isDivider) {\n <hr class=\"sidebar-divider\" />\n }\n @if (!item.isDivider) {\n @if (!isDropdown(item)) {\n <li class=\"nav-item d-block\">\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\n [routerLinkActive]=\"['active']\" role=\"button\"\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\n @if (item.iconClass) {\n <i [ngClass]=\"item.iconClass\"></i>\n }\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n @if (item.badgeLabel) {\n <span class=\"badge bg-info\"\n [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n }\n </a>\n </li>\n }\n @if (isDropdown(item)) {\n <li class=\"nav-item d-block dropend\">\n <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\n [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\n role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\n @if (item.iconClass) {\n <i [ngClass]=\"item.iconClass\"></i>\n }\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n @if (item.badgeLabel) {\n <span class=\"badge bg-info me-1\"\n [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n }\n </a>\n <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\n [ngClass]=\"{'show': item.isOpen}\">\n @for (subItem of item.items; track subItem) {\n @if (subItem.isDivider) {\n <hr class=\"sidebar-divider my-1\" />\n }\n @if (!subItem.isDivider) {\n <li class=\"nav-item d-block\">\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\n role=\"button\" [routerLinkActive]=\"['active']\"\n (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\n (click)=\"subItem.onClick && subItem.onClick($event)\">\n @if (subItem.iconClass) {\n <i [ngClass]=\"subItem.iconClass\"></i>\n }\n <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\n @if (subItem.badgeLabel) {\n <span class=\"badge bg-info\"\n [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\n }\n </a>\n </li>\n }\n }\n </ul>\n </li>\n }\n }\n }\n </ul>\n </div>\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsSidebarComponent, isStandalone: true, selector: "ys-sidebar", inputs: { items: "items", profile: "profile", styleClass: "styleClass", itemsStyleClass: "itemsStyleClass" }, ngImport: i0, template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n @if (profile) {\r\n <div>\r\n @if (profile.image || fullName || profile.role) {\r\n <div\r\n class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n @if (profile.image) {\r\n <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\r\n </div>\r\n </div>\r\n }\r\n @if (fullName || profile.role) {\r\n <div class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n @if (fullName) {\r\n <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n }\r\n @if (profile.role) {\r\n <small class=\"text-uppercase role\">{{profile.role}}</small>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n <hr />\r\n </div>\r\n }\r\n\r\n <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n @for (item of items; track item) {\r\n @if (item.isDivider) {\r\n <hr class=\"sidebar-divider\" />\r\n }\r\n @if (!item.isDivider) {\r\n @if (!isDropdown(item)) {\r\n <li class=\"nav-item d-block\">\r\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\r\n [routerLinkActive]=\"['active']\" role=\"button\"\r\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n @if (item.iconClass) {\r\n <i [ngClass]=\"item.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n @if (item.badgeLabel) {\r\n <span class=\"badge bg-info\"\r\n [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n }\r\n </a>\r\n </li>\r\n }\r\n @if (isDropdown(item)) {\r\n <li class=\"nav-item d-block dropend\">\r\n <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\r\n role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n @if (item.iconClass) {\r\n <i [ngClass]=\"item.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n @if (item.badgeLabel) {\r\n <span class=\"badge bg-info me-1\"\r\n [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n }\r\n </a>\r\n <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n [ngClass]=\"{'show': item.isOpen}\">\r\n @for (subItem of item.items; track subItem) {\r\n @if (subItem.isDivider) {\r\n <hr class=\"sidebar-divider my-1\" />\r\n }\r\n @if (!subItem.isDivider) {\r\n <li class=\"nav-item d-block\">\r\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\r\n role=\"button\" [routerLinkActive]=\"['active']\"\r\n (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n @if (subItem.iconClass) {\r\n <i [ngClass]=\"subItem.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n @if (subItem.badgeLabel) {\r\n <span class=\"badge bg-info\"\r\n [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n }\r\n </a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
108
108
|
}
|
|
109
109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsSidebarComponent, decorators: [{
|
|
110
110
|
type: Component,
|
|
111
|
-
args: [{ selector: 'ys-sidebar', imports: [NgClass, RouterLink, RouterLinkActive], template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\n @if (profile) {\n <div>\n @if (profile.image || fullName || profile.role) {\n <div\n class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\n @if (profile.image) {\n <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\n <div class=\"user-image rounded-circle m-auto transition-ease\">\n <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\n </div>\n </div>\n }\n @if (fullName || profile.role) {\n <div class=\"profile-details d-flex flex-column text-center transition-ease\">\n @if (fullName) {\n <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\n }\n @if (profile.role) {\n <small class=\"text-uppercase role\">{{profile.role}}</small>\n }\n </div>\n }\n </div>\n }\n <hr />\n </div>\n }\n\n <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\n <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\n @for (item of items; track item) {\n @if (item.isDivider) {\n <hr class=\"sidebar-divider\" />\n }\n @if (!item.isDivider) {\n @if (!isDropdown(item)) {\n <li class=\"nav-item d-block\">\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\n [routerLinkActive]=\"['active']\" role=\"button\"\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\n @if (item.iconClass) {\n <i [ngClass]=\"item.iconClass\"></i>\n }\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n @if (item.badgeLabel) {\n <span class=\"badge bg-info\"\n [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n }\n </a>\n </li>\n }\n @if (isDropdown(item)) {\n <li class=\"nav-item d-block dropend\">\n <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\n [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\n role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\n @if (item.iconClass) {\n <i [ngClass]=\"item.iconClass\"></i>\n }\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n @if (item.badgeLabel) {\n <span class=\"badge bg-info me-1\"\n [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n }\n </a>\n <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\n [ngClass]=\"{'show': item.isOpen}\">\n @for (subItem of item.items; track subItem) {\n @if (subItem.isDivider) {\n <hr class=\"sidebar-divider my-1\" />\n }\n @if (!subItem.isDivider) {\n <li class=\"nav-item d-block\">\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\n role=\"button\" [routerLinkActive]=\"['active']\"\n (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\n (click)=\"subItem.onClick && subItem.onClick($event)\">\n @if (subItem.iconClass) {\n <i [ngClass]=\"subItem.iconClass\"></i>\n }\n <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\n @if (subItem.badgeLabel) {\n <span class=\"badge bg-info\"\n [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\n }\n </a>\n </li>\n }\n }\n </ul>\n </li>\n }\n }\n }\n </ul>\n </div>\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"] }]
|
|
111
|
+
args: [{ selector: 'ys-sidebar', imports: [NgClass, RouterLink, RouterLinkActive], template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n @if (profile) {\r\n <div>\r\n @if (profile.image || fullName || profile.role) {\r\n <div\r\n class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n @if (profile.image) {\r\n <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\r\n </div>\r\n </div>\r\n }\r\n @if (fullName || profile.role) {\r\n <div class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n @if (fullName) {\r\n <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n }\r\n @if (profile.role) {\r\n <small class=\"text-uppercase role\">{{profile.role}}</small>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n <hr />\r\n </div>\r\n }\r\n\r\n <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n @for (item of items; track item) {\r\n @if (item.isDivider) {\r\n <hr class=\"sidebar-divider\" />\r\n }\r\n @if (!item.isDivider) {\r\n @if (!isDropdown(item)) {\r\n <li class=\"nav-item d-block\">\r\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\r\n [routerLinkActive]=\"['active']\" role=\"button\"\r\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n @if (item.iconClass) {\r\n <i [ngClass]=\"item.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n @if (item.badgeLabel) {\r\n <span class=\"badge bg-info\"\r\n [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n }\r\n </a>\r\n </li>\r\n }\r\n @if (isDropdown(item)) {\r\n <li class=\"nav-item d-block dropend\">\r\n <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\r\n role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n @if (item.iconClass) {\r\n <i [ngClass]=\"item.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n @if (item.badgeLabel) {\r\n <span class=\"badge bg-info me-1\"\r\n [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n }\r\n </a>\r\n <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n [ngClass]=\"{'show': item.isOpen}\">\r\n @for (subItem of item.items; track subItem) {\r\n @if (subItem.isDivider) {\r\n <hr class=\"sidebar-divider my-1\" />\r\n }\r\n @if (!subItem.isDivider) {\r\n <li class=\"nav-item d-block\">\r\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\r\n role=\"button\" [routerLinkActive]=\"['active']\"\r\n (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n @if (subItem.iconClass) {\r\n <i [ngClass]=\"subItem.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n @if (subItem.badgeLabel) {\r\n <span class=\"badge bg-info\"\r\n [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n }\r\n </a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"] }]
|
|
112
112
|
}], ctorParameters: () => [{ type: i1.Router }], propDecorators: { items: [{
|
|
113
113
|
type: Input
|
|
114
114
|
}], profile: [{
|