@yoozsoft/yoozsoft-ng 5.0.2 → 5.1.0
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/autocomplete/index.d.ts +65 -0
- package/fesm2022/yoozsoft-yoozsoft-ng-autocomplete.mjs +252 -0
- package/fesm2022/yoozsoft-yoozsoft-ng-autocomplete.mjs.map +1 -0
- package/fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs +12 -12
- package/fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-file-upload.mjs +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-file-upload.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 +18 -13
- package/select/index.d.ts +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"yoozsoft-yoozsoft-ng-footer.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/footer/src/ys-footer/ys-footer.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/footer/src/ys-footer/ys-footer.component.html","../../../../projects/yoozsoft/yoozsoft-ng/footer/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/footer/yoozsoft-yoozsoft-ng-footer.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';\r\nimport { FooterBrand, SocialNetwork } from '../models';\r\n\r\n@Component({\r\n selector: 'ys-footer',\r\n imports: [NgClass, NgbTooltip],\r\n templateUrl: './ys-footer.component.html',\r\n styleUrl: './ys-footer.component.scss'\r\n})\r\nexport class YsFooterComponent {\r\n\r\n @Input() styleClass: string | null = null;\r\n @Input() brand: FooterBrand | null = null;\r\n @Input() copyright: string | null = null;\r\n @Input() socialNetworks: SocialNetwork[] = [];\r\n\r\n}\r\n","<!-- https://colorlib.com/wp/template/bootstrap-footer-19/ -->\n<footer [ngClass]=\"styleClass\">\n <!-- <div class=\"row\">\n <div class=\"col-md-6 col-lg-3 mb-md-0 mb-4\">\n <h2 class=\"footer-heading d-flex\">\n <span class=\"icon d-flex align-items-center justify-content-center\"><i class=\"ion-logo-ionic\"></i></span>\n About\n </h2>\n <div class=\"block-23 mb-3\">\n <ul>\n <li><span class=\"icon ion-ios-pin\"></span><span class=\"text\">203 Fake St. Mountain View, San\n Francisco, California, USA</span></li>\n <li><a href=\"#\"><span class=\"icon ion-ios-call\"></span><span class=\"text\">+2 392 3929 210</span></a>\n </li>\n <li><a href=\"#\"><span class=\"icon ion-ios-send\"></span><span\n class=\"text\">support@yourdomain.com</span></a></li>\n </ul>\n </div>\n\n <form action=\"#\" class=\"subscribe-form\">\n <div class=\"input-group d-flex\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Enter email address\">\n <button type=\"submit\" class=\"btn btn-info\">\n <span class=\"sr-only\">Submit</span>\n <i class=\"fa fa-paper-plane\"></i></button>\n </div>\n </form>\n </div>\n\n </div> -->\n <div class=\"row\">\n <div class=\"col\">\n <div class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\">\n @if (brand || copyright) {\n <div class=\"d-flex align-items-center\">\n @if (brand) {\n <a href=\"{{brand.href}}\" class=\"px-2 text-muted text-decoration-none\">\n <img src=\"{{brand.src}}\" alt=\"{{brand.alt}}\" class=\"brand-logo d-inline-block align-text-top\">\n </a>\n }\n @if (copyright) {\n <span class=\"text-muted\">{{copyright}}</span>\n }\n </div>\n }\n\n @if (socialNetworks.length) {\n <ul class=\"nav\">\n @for (item of socialNetworks; track item) {\n <li class=\"px-2\">\n <a class=\"text-muted social-icon\" href=\"{{item.href}}\" [ngbTooltip]=\"item.tooltip\">\n <em class=\"{{item.iconClass}}\"></em>\n </a>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n</footer>","/*\r\n * Public API Surface of ys-footer\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/ys-footer/ys-footer.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAWa,iBAAiB,CAAA;IAEnB,UAAU,GAAkB,IAAI;IAChC,KAAK,GAAuB,IAAI;IAChC,SAAS,GAAkB,IAAI;IAC/B,cAAc,GAAoB,EAAE;uGALlC,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECX9B,
|
|
1
|
+
{"version":3,"file":"yoozsoft-yoozsoft-ng-footer.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/footer/src/ys-footer/ys-footer.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/footer/src/ys-footer/ys-footer.component.html","../../../../projects/yoozsoft/yoozsoft-ng/footer/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/footer/yoozsoft-yoozsoft-ng-footer.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';\r\nimport { FooterBrand, SocialNetwork } from '../models';\r\n\r\n@Component({\r\n selector: 'ys-footer',\r\n imports: [NgClass, NgbTooltip],\r\n templateUrl: './ys-footer.component.html',\r\n styleUrl: './ys-footer.component.scss'\r\n})\r\nexport class YsFooterComponent {\r\n\r\n @Input() styleClass: string | null = null;\r\n @Input() brand: FooterBrand | null = null;\r\n @Input() copyright: string | null = null;\r\n @Input() socialNetworks: SocialNetwork[] = [];\r\n\r\n}\r\n","<!-- https://colorlib.com/wp/template/bootstrap-footer-19/ -->\r\n<footer [ngClass]=\"styleClass\">\r\n <!-- <div class=\"row\">\r\n <div class=\"col-md-6 col-lg-3 mb-md-0 mb-4\">\r\n <h2 class=\"footer-heading d-flex\">\r\n <span class=\"icon d-flex align-items-center justify-content-center\"><i class=\"ion-logo-ionic\"></i></span>\r\n About\r\n </h2>\r\n <div class=\"block-23 mb-3\">\r\n <ul>\r\n <li><span class=\"icon ion-ios-pin\"></span><span class=\"text\">203 Fake St. Mountain View, San\r\n Francisco, California, USA</span></li>\r\n <li><a href=\"#\"><span class=\"icon ion-ios-call\"></span><span class=\"text\">+2 392 3929 210</span></a>\r\n </li>\r\n <li><a href=\"#\"><span class=\"icon ion-ios-send\"></span><span\r\n class=\"text\">support@yourdomain.com</span></a></li>\r\n </ul>\r\n </div>\r\n\r\n <form action=\"#\" class=\"subscribe-form\">\r\n <div class=\"input-group d-flex\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Enter email address\">\r\n <button type=\"submit\" class=\"btn btn-info\">\r\n <span class=\"sr-only\">Submit</span>\r\n <i class=\"fa fa-paper-plane\"></i></button>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n </div> -->\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <div class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\">\r\n @if (brand || copyright) {\r\n <div class=\"d-flex align-items-center\">\r\n @if (brand) {\r\n <a href=\"{{brand.href}}\" class=\"px-2 text-muted text-decoration-none\">\r\n <img src=\"{{brand.src}}\" alt=\"{{brand.alt}}\" class=\"brand-logo d-inline-block align-text-top\">\r\n </a>\r\n }\r\n @if (copyright) {\r\n <span class=\"text-muted\">{{copyright}}</span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (socialNetworks.length) {\r\n <ul class=\"nav\">\r\n @for (item of socialNetworks; track item) {\r\n <li class=\"px-2\">\r\n <a class=\"text-muted social-icon\" href=\"{{item.href}}\" [ngbTooltip]=\"item.tooltip\">\r\n <em class=\"{{item.iconClass}}\"></em>\r\n </a>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</footer>","/*\r\n * Public API Surface of ys-footer\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/ys-footer/ys-footer.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAWa,iBAAiB,CAAA;IAEnB,UAAU,GAAkB,IAAI;IAChC,KAAK,GAAuB,IAAI;IAChC,SAAS,GAAkB,IAAI;IAC/B,cAAc,GAAoB,EAAE;uGALlC,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECX9B,+6EA4DS,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDrDG,OAAO,oFAAE,UAAU,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;;2FAIlB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,OAAA,EACZ,CAAC,OAAO,EAAE,UAAU,CAAC,EAAA,QAAA,EAAA,+6EAAA,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA;8BAMrB,UAAU,EAAA,CAAA;sBAAlB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;;;AEhBH;;AAEG;;ACFH;;AAEG;;;;"}
|
|
@@ -9,11 +9,11 @@ class YsLoadingMaskComponent {
|
|
|
9
9
|
spinnerStyleclass = null;
|
|
10
10
|
messageStyleclass = null;
|
|
11
11
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsLoadingMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsLoadingMaskComponent, isStandalone: true, selector: "ys-loading-mask", inputs: { loading: "loading", message: "message", backgroundStyleclass: "backgroundStyleclass", spinnerStyleclass: "spinnerStyleclass", messageStyleclass: "messageStyleclass" }, ngImport: i0, template: "@if (loading) {\n <div\n class=\"loading-wrapper d-flex flex-column align-items-center justify-content-center h-100 w-100 position-absolute\">\n <div class=\"loading-mask bg-secondary position-absolute h-100 w-100\" [ngClass]=\"backgroundStyleclass\">\n </div>\n <div class=\"loading-content d-flex flex-column align-items-center justify-content-center\">\n <div class=\"loading-spinner spinner-border text-primary\" [ngClass]=\"spinnerStyleclass\" role=\"status\"></div>\n @if (message) {\n <strong class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\n {{message}}\n </strong>\n }\n </div>\n </div>\n}", styles: [".loading-wrapper{top:0;left:0;z-index:1001}.loading-wrapper .loading-mask{opacity:.3}.loading-wrapper .loading-content{z-index:1}.loading-wrapper .loading-content .loading-spinner{width:3rem;height:3rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
12
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsLoadingMaskComponent, isStandalone: true, selector: "ys-loading-mask", inputs: { loading: "loading", message: "message", backgroundStyleclass: "backgroundStyleclass", spinnerStyleclass: "spinnerStyleclass", messageStyleclass: "messageStyleclass" }, ngImport: i0, template: "@if (loading) {\r\n <div\r\n class=\"loading-wrapper d-flex flex-column align-items-center justify-content-center h-100 w-100 position-absolute\">\r\n <div class=\"loading-mask bg-secondary position-absolute h-100 w-100\" [ngClass]=\"backgroundStyleclass\">\r\n </div>\r\n <div class=\"loading-content d-flex flex-column align-items-center justify-content-center\">\r\n <div class=\"loading-spinner spinner-border text-primary\" [ngClass]=\"spinnerStyleclass\" role=\"status\"></div>\r\n @if (message) {\r\n <strong class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n {{message}}\r\n </strong>\r\n }\r\n </div>\r\n </div>\r\n}", styles: [".loading-wrapper{top:0;left:0;z-index:1001}.loading-wrapper .loading-mask{opacity:.3}.loading-wrapper .loading-content{z-index:1}.loading-wrapper .loading-content .loading-spinner{width:3rem;height:3rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
13
13
|
}
|
|
14
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsLoadingMaskComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
|
-
args: [{ selector: 'ys-loading-mask', imports: [NgClass], template: "@if (loading) {\n <div\n class=\"loading-wrapper d-flex flex-column align-items-center justify-content-center h-100 w-100 position-absolute\">\n <div class=\"loading-mask bg-secondary position-absolute h-100 w-100\" [ngClass]=\"backgroundStyleclass\">\n </div>\n <div class=\"loading-content d-flex flex-column align-items-center justify-content-center\">\n <div class=\"loading-spinner spinner-border text-primary\" [ngClass]=\"spinnerStyleclass\" role=\"status\"></div>\n @if (message) {\n <strong class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\n {{message}}\n </strong>\n }\n </div>\n </div>\n}", styles: [".loading-wrapper{top:0;left:0;z-index:1001}.loading-wrapper .loading-mask{opacity:.3}.loading-wrapper .loading-content{z-index:1}.loading-wrapper .loading-content .loading-spinner{width:3rem;height:3rem}\n"] }]
|
|
16
|
+
args: [{ selector: 'ys-loading-mask', imports: [NgClass], template: "@if (loading) {\r\n <div\r\n class=\"loading-wrapper d-flex flex-column align-items-center justify-content-center h-100 w-100 position-absolute\">\r\n <div class=\"loading-mask bg-secondary position-absolute h-100 w-100\" [ngClass]=\"backgroundStyleclass\">\r\n </div>\r\n <div class=\"loading-content d-flex flex-column align-items-center justify-content-center\">\r\n <div class=\"loading-spinner spinner-border text-primary\" [ngClass]=\"spinnerStyleclass\" role=\"status\"></div>\r\n @if (message) {\r\n <strong class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n {{message}}\r\n </strong>\r\n }\r\n </div>\r\n </div>\r\n}", styles: [".loading-wrapper{top:0;left:0;z-index:1001}.loading-wrapper .loading-mask{opacity:.3}.loading-wrapper .loading-content{z-index:1}.loading-wrapper .loading-content .loading-spinner{width:3rem;height:3rem}\n"] }]
|
|
17
17
|
}], propDecorators: { loading: [{
|
|
18
18
|
type: Input
|
|
19
19
|
}], message: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"yoozsoft-yoozsoft-ng-loading.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.component.html","../../../../projects/yoozsoft/yoozsoft-ng/loading/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/yoozsoft-yoozsoft-ng-loading.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'ys-loading-mask',\r\n imports: [NgClass],\r\n templateUrl: './ys-loading-mask.component.html',\r\n styleUrl: './ys-loading-mask.component.scss'\r\n})\r\nexport class YsLoadingMaskComponent {\r\n\r\n @Input() loading: boolean = false;\r\n @Input() message: string | null = 'Loading ...';\r\n @Input() backgroundStyleclass: string | null = null;\r\n @Input() spinnerStyleclass: string | null = null;\r\n @Input() messageStyleclass: string | null = null;\r\n\r\n}\r\n","@if (loading) {\n <div\n class=\"loading-wrapper d-flex flex-column align-items-center justify-content-center h-100 w-100 position-absolute\">\n <div class=\"loading-mask bg-secondary position-absolute h-100 w-100\" [ngClass]=\"backgroundStyleclass\">\n </div>\n <div class=\"loading-content d-flex flex-column align-items-center justify-content-center\">\n <div class=\"loading-spinner spinner-border text-primary\" [ngClass]=\"spinnerStyleclass\" role=\"status\"></div>\n @if (message) {\n <strong class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\n {{message}}\n </strong>\n }\n </div>\n </div>\n}","/*\r\n * Public API Surface of ys-loading-mask\r\n */\r\n\r\nexport * from './src/ys-loading-mask/ys-loading-mask.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MASa,sBAAsB,CAAA;IAExB,OAAO,GAAY,KAAK;IACxB,OAAO,GAAkB,aAAa;IACtC,oBAAoB,GAAkB,IAAI;IAC1C,iBAAiB,GAAkB,IAAI;IACvC,iBAAiB,GAAkB,IAAI;uGANrC,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTnC,
|
|
1
|
+
{"version":3,"file":"yoozsoft-yoozsoft-ng-loading.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.component.html","../../../../projects/yoozsoft/yoozsoft-ng/loading/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/yoozsoft-yoozsoft-ng-loading.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'ys-loading-mask',\r\n imports: [NgClass],\r\n templateUrl: './ys-loading-mask.component.html',\r\n styleUrl: './ys-loading-mask.component.scss'\r\n})\r\nexport class YsLoadingMaskComponent {\r\n\r\n @Input() loading: boolean = false;\r\n @Input() message: string | null = 'Loading ...';\r\n @Input() backgroundStyleclass: string | null = null;\r\n @Input() spinnerStyleclass: string | null = null;\r\n @Input() messageStyleclass: string | null = null;\r\n\r\n}\r\n","@if (loading) {\r\n <div\r\n class=\"loading-wrapper d-flex flex-column align-items-center justify-content-center h-100 w-100 position-absolute\">\r\n <div class=\"loading-mask bg-secondary position-absolute h-100 w-100\" [ngClass]=\"backgroundStyleclass\">\r\n </div>\r\n <div class=\"loading-content d-flex flex-column align-items-center justify-content-center\">\r\n <div class=\"loading-spinner spinner-border text-primary\" [ngClass]=\"spinnerStyleclass\" role=\"status\"></div>\r\n @if (message) {\r\n <strong class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n {{message}}\r\n </strong>\r\n }\r\n </div>\r\n </div>\r\n}","/*\r\n * Public API Surface of ys-loading-mask\r\n */\r\n\r\nexport * from './src/ys-loading-mask/ys-loading-mask.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MASa,sBAAsB,CAAA;IAExB,OAAO,GAAY,KAAK;IACxB,OAAO,GAAkB,aAAa;IACtC,oBAAoB,GAAkB,IAAI;IAC1C,iBAAiB,GAAkB,IAAI;IACvC,iBAAiB,GAAkB,IAAI;uGANrC,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTnC,gsBAcC,EAAA,MAAA,EAAA,CAAA,+MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDTW,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIN,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBANlC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,OAAO,CAAC,EAAA,QAAA,EAAA,gsBAAA,EAAA,MAAA,EAAA,CAAA,+MAAA,CAAA,EAAA;8BAMT,OAAO,EAAA,CAAA;sBAAf;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,oBAAoB,EAAA,CAAA;sBAA5B;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;;;AEfH;;AAEG;;ACFH;;AAEG;;;;"}
|
|
@@ -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":";;;;;;;;;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,o1PAuKQ,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,o1PAAA,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;;;;"}
|
|
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":";;;;;;MAkBa,iBAAiB,CAAA;;IAGnB,EAAE,GAAW,WAAW;IACxB,OAAO,GAAU,EAAE;;IAEnB,WAAW,GAAW,OAAO;AAC7B,IAAA,WAAW;AACX,IAAA,UAAU;IACV,OAAO,GAAa,KAAK;AACzB,IAAA,eAAe;IACf,KAAK,GAAa,KAAK;AACvB,IAAA,aAAa;;IAEb,QAAQ,GAAa,KAAK;;AAE1B,IAAA,IAAI;;IAEJ,OAAO,GAAa,KAAK;IAEzB,QAAQ,GAAY,KAAK;AACxB,IAAA,QAAQ,GAAsB,IAAI,YAAY,EAAO;AAE/D,IAAA,QAAQ,GAAQ,MAAK,GAAI;AACzB,IAAA,SAAS,GAAQ,MAAK,GAAI;AAE1B,IAAA,KAAK;AAEL,IAAA,UAAU,CAAC,GAAQ,EAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,GAAG,EAAE;AAC9C,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YACzB;;AAGF,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,GAAG,EAAE;AACzB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI;AACnD,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YACzB;;AAGF,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,GAAG,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;AAC/C,YAAA,IAAI,GAAG,CAAC,MAAM,EAAE;AACd,gBAAA,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC;;iBAEhB;AACH,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;;AAEnB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YACzB;;AAGF,QAAA,IAAI,CAAC,KAAK,GAAG,GAAG;;AAElB,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;;AAEpB,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;AAErB,IAAA,gBAAgB,CAAE,UAAmB,EAAA;AACnC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU;;AAG5B,IAAA,aAAa,CAAC,MAAW,EAAA;AACvB,QAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;AACrB,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;AACtB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;;IAG5B,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI;AACnD,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;;AAGhC,IAAA,QAAQ,CAAC,IAAS,EAAA;AAChB,QAAA,OAAO,OAAO,IAAI,IAAI,QAAQ;;uGA5ErB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,UAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,OAAA,EAAA,aAAA,EAAA,eAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EARjB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AAChD,gBAAA,KAAK,EAAE;AACR;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChBH,41DA8CC,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDvCW,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,6GAAA,EAAA,MAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kCAAA,EAAA,QAAA,EAAA,2FAAA,EAAA,MAAA,EAAA,CAAA,aAAA,CAAA,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,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAWnB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAb7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,WACZ,CAAC,WAAW,EAAE,OAAO,CAAC,EAAA,SAAA,EAGpB;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;AAChD,4BAAA,KAAK,EAAE;AACR;AACF,qBAAA,EAAA,QAAA,EAAA,41DAAA,EAAA;8BAKQ,EAAE,EAAA,CAAA;sBAAV;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBAEQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBAEQ,QAAQ,EAAA,CAAA;sBAAhB;gBAEQ,IAAI,EAAA,CAAA;sBAAZ;gBAEQ,OAAO,EAAA,CAAA;sBAAf;gBAEQ,QAAQ,EAAA,CAAA;sBAAhB;gBACS,QAAQ,EAAA,CAAA;sBAAjB;;;AEvCH;;AAEG;;ACFH;;AAEG;;;;"}
|