@yoozsoft/yoozsoft-ng 4.0.7 → 5.0.0

package/fesm2022/yoozsoft-yoozsoft-ng-file-upload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-file-upload.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/file-upload/src/ys-file-upload/ys-file-upload.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/file-upload/src/ys-file-upload/ys-file-upload.component.html","../../../../projects/yoozsoft/yoozsoft-ng/file-upload/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/file-upload/yoozsoft-yoozsoft-ng-file-upload.ts"],"sourcesContent":["import { NgClass, NgFor, NgIf } from '@angular/common';\r\nimport { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'ys-file-upload',\r\n  imports: [NgIf, NgFor, NgClass],\r\n  templateUrl: './ys-file-upload.component.html',\r\n  styleUrl: './ys-file-upload.component.scss',\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => YsFileUploadComponent),\r\n      multi: true\r\n    }\r\n  ]\r\n})\r\nexport class YsFileUploadComponent implements ControlValueAccessor {\r\n\r\n  private fileList?: FileList;\r\n  files: File[] = [];\r\n  selectedFile: File | null = null;\r\n\r\n  @Input() styleClass?: string;\r\n  /**\r\n   * Allowing upload multiple files\r\n   * Default is false\r\n   */\r\n  @Input() multiple: boolean = false;\r\n  /**\r\n   * Acceptable type of files\r\n   * Default is all file type\r\n   */\r\n  @Input() accept: string = '*/*';\r\n  /**\r\n   * Upload button label\r\n   * Default is Choose File\r\n   */\r\n  @Input() uploadLabel?: string = 'Choose File';\r\n  /**Style class of upload button */\r\n  @Input() uploadStyleClass?: string;\r\n  /**Icon class of upload button */\r\n  @Input() uploadIconClass: string = 'fa fa-paperclip';\r\n\r\n  /**Display choosed file remove button */\r\n  @Input() isRemove: boolean = true;\r\n  /**Icon of remove item button */\r\n  @Input() removeIconClass: string = 'fa fa-times';\r\n\r\n  /**\r\n   * Files list display direction\r\n   * Default is vertical (false)\r\n   */\r\n  @Input() isHorizontal: boolean = false;\r\n\r\n  /**Message displayed before choosing file */\r\n  @Input() noFileMessage: string = \"No file chosen\";\r\n\r\n  @Input() progressStyleClass?: string;\r\n  /**Value of progress element */\r\n  @Input() progressValue?: number;\r\n  /**Max value of progress element */\r\n  @Input() progressValueMax: number = 100;\r\n  /**Display cancel upload button */\r\n  @Input() isCancel: boolean = false;\r\n\r\n  /**Event to get choosed files */\r\n  @Output() choosed: EventEmitter<File[]> = new EventEmitter();\r\n  /**Event of selected file in the list of choosed file*/\r\n  @Output() select: EventEmitter<File | null> = new EventEmitter();\r\n  /**Event of removed file in the list of choosed file*/\r\n  @Output() removed: EventEmitter<File> = new EventEmitter();\r\n  /**Event of cancel upload button */\r\n  @Output() cancel: EventEmitter<void> = new EventEmitter();\r\n\r\n  /**Disable elements */\r\n  @Input() disabled: boolean = false;\r\n  onChange: any = () => { }\r\n  onTouched: any = () => { }\r\n\r\n  constructor() { }\r\n\r\n  writeValue(obj: any): void {\r\n    if (!obj) {\r\n      this.files = [];\r\n      return;\r\n    }\r\n\r\n    if (!Array.isArray(obj)) {\r\n      this.files = [obj];\r\n      return;\r\n    }\r\n\r\n    this.files = 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  onChangeFiles(event: any) {\r\n    this.fileList = event.target.files;\r\n\r\n    if (this.fileList?.length) {\r\n\r\n      if (!this.multiple) {\r\n        this.files = [];\r\n      }\r\n\r\n      for (let i = 0; i < this.fileList.length; i++) {\r\n        const file: File = this.fileList.item(i)!;\r\n        this.files.push(file);\r\n      }\r\n\r\n      this.files.sort((a, b) => a.name > b.name ? -1 : 1);\r\n\r\n    } else {\r\n      this.files = [];\r\n    }\r\n\r\n    this.onChange(this.files);\r\n    this.onTouched(this.files);\r\n\r\n    this.choosed.emit(this.files);\r\n\r\n    event.target.value = null;\r\n\r\n  }\r\n\r\n  removeFile(file: File) {\r\n    const index = this.files.indexOf(file);\r\n    this.files.splice(index, 1);\r\n\r\n    // this.onChange(this.multiple ? this.files : this.files[0]);\r\n    this.onChange(this.files);\r\n    this.onTouched(this.files);\r\n\r\n    // this.choosed.emit(this.files);\r\n\r\n    if (this.selectedFile == file) {\r\n      this.selectedFile = null;\r\n      // this.select.emit(null);\r\n    }\r\n\r\n    this.removed.emit(file);\r\n  }\r\n\r\n  onSelectFile(file: File) {\r\n    this.selectedFile = file;\r\n    this.select.emit(this.selectedFile);\r\n  }\r\n\r\n  cancelUpload() {\r\n    this.cancel.emit();\r\n  }\r\n\r\n}\r\n","<input class=\"form-control d-none file-upload\" type=\"file\" id=\"ysFileUpload\" #ysFileUpload [multiple]=\"multiple\"\r\n    [accept]=\"accept\" [disabled]=\"disabled\" (change)=\"onChangeFiles($event)\">\r\n\r\n<div class=\"file-upload\" [ngClass]=\"styleClass\">\r\n    <div class=\"row\">\r\n        <div class=\"col\">\r\n            <button class=\"btn btn-primary btn-upload {{uploadStyleClass}}\" (click)=\"ysFileUpload.click()\"\r\n                [disabled]=\"disabled\">\r\n                <i [ngClass]=\"uploadIconClass\"></i>\r\n                <span class=\"ms-2\" *ngIf=\"uploadLabel\">{{uploadLabel}}</span>\r\n            </button>\r\n\r\n            <span class=\"ms-2\" *ngIf=\"noFileMessage\">{{files.length ? '' : noFileMessage}}</span>\r\n\r\n            <ul *ngIf=\"files.length\" class=\"file-upload-list list-group mt-2\"\r\n                [ngClass]=\"{'list-group-horizontal overflow-auto': isHorizontal}\">\r\n                <a class=\"file-upload-item list-group-item d-flex align-items-center\" role=\"button\"\r\n                    *ngFor=\"let file of files\" (click)=\"onSelectFile(file)\"\r\n                    [ngClass]=\"{'active': file == selectedFile, 'disabled': disabled}\">\r\n                    <span class=\"me-2\">{{file.name}}</span>\r\n                    <button *ngIf=\"isRemove\" class=\"btn btn-outline-danger btn-sm ms-auto\" type=\"button\"\r\n                        id=\"removeFileButton\" (click)=\"removeFile(file); $event.stopPropagation();\"\r\n                        [disabled]=\"disabled\">\r\n                        <i [ngClass]=\"removeIconClass\"></i>\r\n                    </button>\r\n                </a>\r\n            </ul>\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"progress mt-2\" [ngClass]=\"progressStyleClass\" *ngIf=\"progressValue\">\r\n    <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progressValue\" [attr.aria-valuenow]=\"progressValue\"\r\n        aria-valuemin=\"0\" [attr.aria-valuemax]=\"progressValueMax\"></div>\r\n\r\n    <button *ngIf=\"isCancel && progressValue < progressValueMax\" class=\"btn btn-danger btn-sm btn-upload-cancel d-flex\"\r\n        (click)=\"cancelUpload()\">\r\n        <i class=\"fa fa-times\"></i>\r\n    </button>\r\n</div>","/*\r\n * Public API Surface of ys-select\r\n */\r\n\r\nexport * from './src/ys-file-upload/ys-file-upload.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-file-upload.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/file-upload/src/ys-file-upload/ys-file-upload.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/file-upload/src/ys-file-upload/ys-file-upload.component.html","../../../../projects/yoozsoft/yoozsoft-ng/file-upload/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/file-upload/yoozsoft-yoozsoft-ng-file-upload.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'ys-file-upload',\r\n  imports: [NgClass],\r\n  templateUrl: './ys-file-upload.component.html',\r\n  styleUrl: './ys-file-upload.component.scss',\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => YsFileUploadComponent),\r\n      multi: true\r\n    }\r\n  ]\r\n})\r\nexport class YsFileUploadComponent implements ControlValueAccessor {\r\n\r\n  private fileList?: FileList;\r\n  files: File[] = [];\r\n  selectedFile: File | null = null;\r\n\r\n  @Input() styleClass?: string;\r\n  /**\r\n   * Allowing upload multiple files\r\n   * Default is false\r\n   */\r\n  @Input() multiple: boolean = false;\r\n  /**\r\n   * Acceptable type of files\r\n   * Default is all file type\r\n   */\r\n  @Input() accept: string = '*/*';\r\n  /**\r\n   * Upload button label\r\n   * Default is Choose File\r\n   */\r\n  @Input() uploadLabel?: string = 'Choose File';\r\n  /**Style class of upload button */\r\n  @Input() uploadStyleClass?: string;\r\n  /**Icon class of upload button */\r\n  @Input() uploadIconClass: string = 'fa fa-paperclip';\r\n\r\n  /**Display choosed file remove button */\r\n  @Input() isRemove: boolean = true;\r\n  /**Icon of remove item button */\r\n  @Input() removeIconClass: string = 'fa fa-times';\r\n\r\n  /**\r\n   * Files list display direction\r\n   * Default is vertical (false)\r\n   */\r\n  @Input() isHorizontal: boolean = false;\r\n\r\n  /**Message displayed before choosing file */\r\n  @Input() noFileMessage: string = \"No file chosen\";\r\n\r\n  @Input() progressStyleClass?: string;\r\n  /**Value of progress element */\r\n  @Input() progressValue?: number;\r\n  /**Max value of progress element */\r\n  @Input() progressValueMax: number = 100;\r\n  /**Display cancel upload button */\r\n  @Input() isCancel: boolean = false;\r\n\r\n  /**Event to get choosed files */\r\n  @Output() choosed: EventEmitter<File[]> = new EventEmitter();\r\n  /**Event of selected file in the list of choosed file*/\r\n  @Output() select: EventEmitter<File | null> = new EventEmitter();\r\n  /**Event of removed file in the list of choosed file*/\r\n  @Output() removed: EventEmitter<File> = new EventEmitter();\r\n  /**Event of cancel upload button */\r\n  @Output() cancel: EventEmitter<void> = new EventEmitter();\r\n\r\n  /**Disable elements */\r\n  @Input() disabled: boolean = false;\r\n  onChange: any = () => { }\r\n  onTouched: any = () => { }\r\n\r\n  constructor() { }\r\n\r\n  writeValue(obj: any): void {\r\n    if (!obj) {\r\n      this.files = [];\r\n      return;\r\n    }\r\n\r\n    if (!Array.isArray(obj)) {\r\n      this.files = [obj];\r\n      return;\r\n    }\r\n\r\n    this.files = 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  onChangeFiles(event: any) {\r\n    this.fileList = event.target.files;\r\n\r\n    if (this.fileList?.length) {\r\n\r\n      if (!this.multiple) {\r\n        this.files = [];\r\n      }\r\n\r\n      for (let i = 0; i < this.fileList.length; i++) {\r\n        const file: File = this.fileList.item(i)!;\r\n        this.files.push(file);\r\n      }\r\n\r\n      this.files.sort((a, b) => a.name > b.name ? -1 : 1);\r\n\r\n    } else {\r\n      this.files = [];\r\n    }\r\n\r\n    this.onChange(this.files);\r\n    this.onTouched(this.files);\r\n\r\n    this.choosed.emit(this.files);\r\n\r\n    event.target.value = null;\r\n\r\n  }\r\n\r\n  removeFile(file: File) {\r\n    const index = this.files.indexOf(file);\r\n    this.files.splice(index, 1);\r\n\r\n    // this.onChange(this.multiple ? this.files : this.files[0]);\r\n    this.onChange(this.files);\r\n    this.onTouched(this.files);\r\n\r\n    // this.choosed.emit(this.files);\r\n\r\n    if (this.selectedFile == file) {\r\n      this.selectedFile = null;\r\n      // this.select.emit(null);\r\n    }\r\n\r\n    this.removed.emit(file);\r\n  }\r\n\r\n  onSelectFile(file: File) {\r\n    this.selectedFile = file;\r\n    this.select.emit(this.selectedFile);\r\n  }\r\n\r\n  cancelUpload() {\r\n    this.cancel.emit();\r\n  }\r\n\r\n}\r\n","<input class=\"form-control d-none file-upload\" type=\"file\" id=\"ysFileUpload\" #ysFileUpload [multiple]=\"multiple\"\n  [accept]=\"accept\" [disabled]=\"disabled\" (change)=\"onChangeFiles($event)\">\n\n  <div class=\"file-upload\" [ngClass]=\"styleClass\">\n    <div class=\"row\">\n      <div class=\"col\">\n        <button class=\"btn btn-primary btn-upload {{uploadStyleClass}}\" (click)=\"ysFileUpload.click()\"\n          [disabled]=\"disabled\">\n          <i [ngClass]=\"uploadIconClass\"></i>\n          @if (uploadLabel) {\n            <span class=\"ms-2\">{{uploadLabel}}</span>\n          }\n        </button>\n\n        @if (noFileMessage) {\n          <span class=\"ms-2\">{{files.length ? '' : noFileMessage}}</span>\n        }\n\n        @if (files.length) {\n          <ul class=\"file-upload-list list-group mt-2\"\n            [ngClass]=\"{'list-group-horizontal overflow-auto': isHorizontal}\">\n            @for (file of files; track file) {\n              <a class=\"file-upload-item list-group-item d-flex align-items-center\" role=\"button\"\n                (click)=\"onSelectFile(file)\"\n                [ngClass]=\"{'active': file == selectedFile, 'disabled': disabled}\">\n                <span class=\"me-2\">{{file.name}}</span>\n                @if (isRemove) {\n                  <button class=\"btn btn-outline-danger btn-sm ms-auto\" type=\"button\"\n                    id=\"removeFileButton\" (click)=\"removeFile(file); $event.stopPropagation();\"\n                    [disabled]=\"disabled\">\n                    <i [ngClass]=\"removeIconClass\"></i>\n                  </button>\n                }\n              </a>\n            }\n          </ul>\n        }\n\n      </div>\n    </div>\n  </div>\n\n  @if (progressValue) {\n    <div class=\"progress mt-2\" [ngClass]=\"progressStyleClass\">\n      <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progressValue\" [attr.aria-valuenow]=\"progressValue\"\n      aria-valuemin=\"0\" [attr.aria-valuemax]=\"progressValueMax\"></div>\n      @if (isCancel && progressValue < progressValueMax) {\n        <button class=\"btn btn-danger btn-sm btn-upload-cancel d-flex\"\n          (click)=\"cancelUpload()\">\n          <i class=\"fa fa-times\"></i>\n        </button>\n      }\n    </div>\n  }","/*\r\n * Public API Surface of ys-select\r\n */\r\n\r\nexport * from './src/ys-file-upload/ys-file-upload.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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"}

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

@@ -1,6 +1,6 @@
-import { NgFor, NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input } from '@angular/core';
+import { Input, Component } from '@angular/core';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 class YsFooterComponent {
@@ -8,12 +8,12 @@ class YsFooterComponent {
     brand = null;
     copyright = null;
     socialNetworks = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsFooterComponent, isStandalone: true, selector: "ys-footer", inputs: { styleClass: "styleClass", brand: "brand", copyright: "copyright", socialNetworks: "socialNetworks" }, ngImport: i0, template: "<footer class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"brand || copyright\" class=\"d-flex align-items-center\">\r\n        <a *ngIf=\"brand\" 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        <span *ngIf=\"copyright\" class=\"text-muted\">{{copyright}}</span>\r\n    </div>\r\n\r\n    <ul *ngIf=\"socialNetworks.length\" class=\"nav d-flex justify-content-end\">\r\n        <li class=\"px-2\" *ngFor=\"let item of socialNetworks\">\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    </ul>\r\n</footer>", styles: [".social-icon:hover{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity, 1))!important}.brand-logo{width:30px;height:30px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsFooterComponent, isStandalone: true, selector: "ys-footer", inputs: { styleClass: "styleClass", brand: "brand", copyright: "copyright", socialNetworks: "socialNetworks" }, ngImport: i0, template: "<!-- 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\n        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&#64;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>", styles: [".social-icon:hover{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity, 1))!important}.brand-logo{width:30px;height:30px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-footer', imports: [NgFor, NgIf, NgClass, NgbTooltip], template: "<footer class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"brand || copyright\" class=\"d-flex align-items-center\">\r\n        <a *ngIf=\"brand\" 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        <span *ngIf=\"copyright\" class=\"text-muted\">{{copyright}}</span>\r\n    </div>\r\n\r\n    <ul *ngIf=\"socialNetworks.length\" class=\"nav d-flex justify-content-end\">\r\n        <li class=\"px-2\" *ngFor=\"let item of socialNetworks\">\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    </ul>\r\n</footer>", styles: [".social-icon:hover{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity, 1))!important}.brand-logo{width:30px;height:30px}\n"] }]
+            args: [{ selector: 'ys-footer', imports: [NgClass, NgbTooltip], template: "<!-- 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\n        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&#64;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>", styles: [".social-icon:hover{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity, 1))!important}.brand-logo{width:30px;height:30px}\n"] }]
         }], propDecorators: { styleClass: [{
                 type: Input
             }], brand: [{

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

@@ -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, NgFor, NgIf } 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: [NgFor, NgIf, 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","<footer class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"brand || copyright\" class=\"d-flex align-items-center\">\r\n        <a *ngIf=\"brand\" 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        <span *ngIf=\"copyright\" class=\"text-muted\">{{copyright}}</span>\r\n    </div>\r\n\r\n    <ul *ngIf=\"socialNetworks.length\" class=\"nav d-flex justify-content-end\">\r\n        <li class=\"px-2\" *ngFor=\"let item of socialNetworks\">\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    </ul>\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;2FAAjB,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,y4BAeS,EDRG,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,KAAK,mHAAE,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,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;;2FAI/B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;+BACE,WAAW,EAAA,OAAA,EACZ,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,EAAA,QAAA,EAAA,y4BAAA,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA;8BAMlC,UAAU,EAAA,CAAA;sBAAlB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;;;AEhBH;;AAEG;;ACFH;;AAEG;;;;"}
+{"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\n        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&#64;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,2tEA6DS,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDtDG,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,2tEAAA,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;;;;"}

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

@@ -1,6 +1,6 @@
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input } from '@angular/core';
+import { Input, Component } from '@angular/core';
 
 class YsLoadingMaskComponent {
     loading = false;
@@ -8,12 +8,12 @@ class YsLoadingMaskComponent {
     backgroundStyleclass = null;
     spinnerStyleclass = null;
     messageStyleclass = null;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsLoadingMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsLoadingMaskComponent, isStandalone: true, selector: "ys-loading-mask", inputs: { loading: "loading", message: "message", backgroundStyleclass: "backgroundStyleclass", spinnerStyleclass: "spinnerStyleclass", messageStyleclass: "messageStyleclass" }, ngImport: i0, template: "<div *ngIf=\"loading\"\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        <strong *ngIf=\"message\" class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n            {{message}}\r\n        </strong>\r\n    </div>\r\n</div>", 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsLoadingMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsLoadingMaskComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsLoadingMaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-loading-mask', imports: [NgIf, NgClass], template: "<div *ngIf=\"loading\"\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        <strong *ngIf=\"message\" class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n            {{message}}\r\n        </strong>\r\n    </div>\r\n</div>", 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"] }]
+            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"] }]
         }], propDecorators: { loading: [{
                 type: Input
             }], message: [{

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

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-loading.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.component.html","../../../../projects/yoozsoft/yoozsoft-ng/loading/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/yoozsoft-yoozsoft-ng-loading.ts"],"sourcesContent":["import { NgClass, NgIf } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'ys-loading-mask',\r\n  imports: [NgIf, 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","<div *ngIf=\"loading\"\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        <strong *ngIf=\"message\" class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n            {{message}}\r\n        </strong>\r\n    </div>\r\n</div>","/*\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;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,ECTnC,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,EAAA,wqBAUM,EDLM,MAAA,EAAA,CAAA,+MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIZ,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBANlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAClB,OAAA,EAAA,CAAC,IAAI,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,wqBAAA,EAAA,MAAA,EAAA,CAAA,+MAAA,CAAA,EAAA;8BAMf,OAAO,EAAA,CAAA;sBAAf;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,oBAAoB,EAAA,CAAA;sBAA5B;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;;;AEfH;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-loading.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.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,oqBAcC,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,oqBAAA,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;;;;"}

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

@@ -1,6 +1,6 @@
-import { NgIf, NgFor, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output } from '@angular/core';
+import { EventEmitter, Output, Input, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterLink, RouterLinkActive } from '@angular/router';
@@ -44,20 +44,18 @@ class YsNavbarComponent {
     isDropdown(item) {
         return item.items?.length;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsNavbarComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", 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        <button *ngIf=\"isSidebarToggler\" 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        <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\r\n            <img *ngIf=\"brand?.src\" src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\r\n                height=\"{{brand?.height}}\">\r\n            {{brand?.label}}\r\n        </a>\r\n\r\n        <button *ngIf=\"items.length || endItems.length || search\" 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        <div class=\"collapse navbar-collapse\" [id]=\"id\">\r\n\r\n            <ul *ngIf=\"items.length\" class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\r\n                <ng-container *ngFor=\"let navItem of items\">\r\n\r\n                    <li *ngIf=\"!isDropdown(navItem)\" 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\r\n                            <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n\r\n                            {{navItem.label}}\r\n\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(navItem)\" 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\r\n                            <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n\r\n                            <span *ngIf=\"navItem.label\">{{navItem.label}}</span>\r\n\r\n                        </a>\r\n                        <ul class=\"dropdown-menu px-2\">\r\n                            <li *ngFor=\"let navSubItem of navItem.items\">\r\n\r\n                                <a *ngIf=\"!navSubItem.isDivider\" 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\r\n                                    <i *ngIf=\"navSubItem.iconClass\" class=\"me-2 {{navSubItem.iconClass}}\"></i>\r\n\r\n                                    <span *ngIf=\"navSubItem.label\">{{navSubItem.label}}</span>\r\n\r\n                                </a>\r\n\r\n                                <hr *ngIf=\"navSubItem.isDivider\" class=\"dropdown-divider\">\r\n\r\n                            </li>\r\n                        </ul>\r\n                    </li>\r\n\r\n                </ng-container>\r\n\r\n            </ul>\r\n\r\n            <ul *ngIf=\"endItems.length > 0\" class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\r\n                <ng-container *ngFor=\"let endItem of endItems\">\r\n\r\n                    <li *ngIf=\"!isDropdown(endItem)\" 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                            <i *ngIf=\"endItem.iconClass\" class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                            <span *ngIf=\"endItem.label\">{{endItem.label}}</span>\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(endItem)\" 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                            <i *ngIf=\"endItem.iconClass\" class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                            <span *ngIf=\"endItem.label\">{{endItem.label}}</span>\r\n                        </a>\r\n                        <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n                            <ng-container *ngFor=\"let endItemSubItem of endItem.items\">\r\n\r\n                                <a *ngIf=\"!endItemSubItem.isDivider\" 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                                    <i *ngIf=\"endItemSubItem.iconClass\" class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\r\n                                    <span *ngIf=\"endItemSubItem.label\">{{endItemSubItem.label}}</span>\r\n                                </a>\r\n\r\n                                <div *ngIf=\"endItemSubItem.isDivider\" class=\"dropdown-divider\"></div>\r\n\r\n                            </ng-container>\r\n                        </div>\r\n                    </li>\r\n                </ng-container>\r\n            </ul>\r\n\r\n            <form *ngIf=\"isSearch\" 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                    <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n                    <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n                </button>\r\n            </form>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsNavbarComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsNavbarComponent, isStandalone: true, selector: "ys-navbar", inputs: { id: "id", theme: "theme", styleClass: "styleClass", brand: "brand", items: "items", endItems: "endItems", isSearch: "isSearch", searchLabel: "searchLabel", searchIconClass: "searchIconClass", searchPlaceholder: "searchPlaceholder", isSidebarToggler: "isSidebarToggler", isSidebarToggled: "isSidebarToggled", sidebarTogglerIconClass: "sidebarTogglerIconClass" }, outputs: { toggleSidebar: "toggleSidebar", search: "search" }, ngImport: i0, template: "<nav class=\"navbar navbar-expand-lg bg-primary\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsNavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-navbar', imports: [
-                        NgIf,
-                        NgFor,
                         NgClass,
                         RouterLink,
                         RouterLinkActive,
                         ReactiveFormsModule,
                         NgbTooltipModule
-                    ], template: "<nav class=\"navbar navbar-expand-lg bg-primary\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\r\n    <div class=\"container-fluid\">\r\n\r\n        <button *ngIf=\"isSidebarToggler\" 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        <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\r\n            <img *ngIf=\"brand?.src\" src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\r\n                height=\"{{brand?.height}}\">\r\n            {{brand?.label}}\r\n        </a>\r\n\r\n        <button *ngIf=\"items.length || endItems.length || search\" 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        <div class=\"collapse navbar-collapse\" [id]=\"id\">\r\n\r\n            <ul *ngIf=\"items.length\" class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\r\n                <ng-container *ngFor=\"let navItem of items\">\r\n\r\n                    <li *ngIf=\"!isDropdown(navItem)\" 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\r\n                            <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n\r\n                            {{navItem.label}}\r\n\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(navItem)\" 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\r\n                            <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n\r\n                            <span *ngIf=\"navItem.label\">{{navItem.label}}</span>\r\n\r\n                        </a>\r\n                        <ul class=\"dropdown-menu px-2\">\r\n                            <li *ngFor=\"let navSubItem of navItem.items\">\r\n\r\n                                <a *ngIf=\"!navSubItem.isDivider\" 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\r\n                                    <i *ngIf=\"navSubItem.iconClass\" class=\"me-2 {{navSubItem.iconClass}}\"></i>\r\n\r\n                                    <span *ngIf=\"navSubItem.label\">{{navSubItem.label}}</span>\r\n\r\n                                </a>\r\n\r\n                                <hr *ngIf=\"navSubItem.isDivider\" class=\"dropdown-divider\">\r\n\r\n                            </li>\r\n                        </ul>\r\n                    </li>\r\n\r\n                </ng-container>\r\n\r\n            </ul>\r\n\r\n            <ul *ngIf=\"endItems.length > 0\" class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\r\n                <ng-container *ngFor=\"let endItem of endItems\">\r\n\r\n                    <li *ngIf=\"!isDropdown(endItem)\" 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                            <i *ngIf=\"endItem.iconClass\" class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                            <span *ngIf=\"endItem.label\">{{endItem.label}}</span>\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(endItem)\" 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                            <i *ngIf=\"endItem.iconClass\" class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                            <span *ngIf=\"endItem.label\">{{endItem.label}}</span>\r\n                        </a>\r\n                        <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n                            <ng-container *ngFor=\"let endItemSubItem of endItem.items\">\r\n\r\n                                <a *ngIf=\"!endItemSubItem.isDivider\" 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                                    <i *ngIf=\"endItemSubItem.iconClass\" class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\r\n                                    <span *ngIf=\"endItemSubItem.label\">{{endItemSubItem.label}}</span>\r\n                                </a>\r\n\r\n                                <div *ngIf=\"endItemSubItem.isDivider\" class=\"dropdown-divider\"></div>\r\n\r\n                            </ng-container>\r\n                        </div>\r\n                    </li>\r\n                </ng-container>\r\n            </ul>\r\n\r\n            <form *ngIf=\"isSearch\" 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                    <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n                    <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n                </button>\r\n            </form>\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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { id: [{
                 type: Input
             }], theme: [{

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

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-navbar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/navbar/src/ys-navbar/ys-navbar.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/navbar/src/ys-navbar/ys-navbar.component.html","../../../../projects/yoozsoft/yoozsoft-ng/navbar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/navbar/yoozsoft-yoozsoft-ng-navbar.ts"],"sourcesContent":["import { NgClass, NgFor, NgIf } 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    NgIf,\r\n    NgFor,\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        <button *ngIf=\"isSidebarToggler\" 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        <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\r\n            <img *ngIf=\"brand?.src\" src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\r\n                height=\"{{brand?.height}}\">\r\n            {{brand?.label}}\r\n        </a>\r\n\r\n        <button *ngIf=\"items.length || endItems.length || search\" 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        <div class=\"collapse navbar-collapse\" [id]=\"id\">\r\n\r\n            <ul *ngIf=\"items.length\" class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\r\n                <ng-container *ngFor=\"let navItem of items\">\r\n\r\n                    <li *ngIf=\"!isDropdown(navItem)\" 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\r\n                            <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n\r\n                            {{navItem.label}}\r\n\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(navItem)\" 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\r\n                            <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n\r\n                            <span *ngIf=\"navItem.label\">{{navItem.label}}</span>\r\n\r\n                        </a>\r\n                        <ul class=\"dropdown-menu px-2\">\r\n                            <li *ngFor=\"let navSubItem of navItem.items\">\r\n\r\n                                <a *ngIf=\"!navSubItem.isDivider\" 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\r\n                                    <i *ngIf=\"navSubItem.iconClass\" class=\"me-2 {{navSubItem.iconClass}}\"></i>\r\n\r\n                                    <span *ngIf=\"navSubItem.label\">{{navSubItem.label}}</span>\r\n\r\n                                </a>\r\n\r\n                                <hr *ngIf=\"navSubItem.isDivider\" class=\"dropdown-divider\">\r\n\r\n                            </li>\r\n                        </ul>\r\n                    </li>\r\n\r\n                </ng-container>\r\n\r\n            </ul>\r\n\r\n            <ul *ngIf=\"endItems.length > 0\" class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\r\n                <ng-container *ngFor=\"let endItem of endItems\">\r\n\r\n                    <li *ngIf=\"!isDropdown(endItem)\" 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                            <i *ngIf=\"endItem.iconClass\" class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                            <span *ngIf=\"endItem.label\">{{endItem.label}}</span>\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(endItem)\" 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                            <i *ngIf=\"endItem.iconClass\" class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                            <span *ngIf=\"endItem.label\">{{endItem.label}}</span>\r\n                        </a>\r\n                        <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n                            <ng-container *ngFor=\"let endItemSubItem of endItem.items\">\r\n\r\n                                <a *ngIf=\"!endItemSubItem.isDivider\" 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                                    <i *ngIf=\"endItemSubItem.iconClass\" class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\r\n                                    <span *ngIf=\"endItemSubItem.label\">{{endItemSubItem.label}}</span>\r\n                                </a>\r\n\r\n                                <div *ngIf=\"endItemSubItem.isDivider\" class=\"dropdown-divider\"></div>\r\n\r\n                            </ng-container>\r\n                        </div>\r\n                    </li>\r\n                </ng-container>\r\n            </ul>\r\n\r\n            <form *ngIf=\"isSearch\" 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                    <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n                    <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n                </button>\r\n            </form>\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":"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"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-navbar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/navbar/src/ys-navbar/ys-navbar.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/navbar/src/ys-navbar/ys-navbar.component.html","../../../../projects/yoozsoft/yoozsoft-ng/navbar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/navbar/yoozsoft-yoozsoft-ng-navbar.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\r\nimport { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';\r\nimport { RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';\r\nimport { NavbarBrand, NavbarItem } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-navbar',\r\n  imports: [\n    NgClass,\n    RouterLink,\n    RouterLinkActive,\n    ReactiveFormsModule,\n    NgbTooltipModule\n],\r\n  templateUrl: './ys-navbar.component.html',\r\n  styleUrl: './ys-navbar.component.scss'\r\n})\r\nexport class YsNavbarComponent implements OnInit {\r\n\r\n  searchForm: FormGroup;\r\n\r\n  @Input() id: string = 'mainNavbar'\r\n  @Input() theme?: string = 'dark';\r\n  @Input() styleClass?: string;\r\n\r\n  @Input() brand: NavbarBrand | null = null;\r\n\r\n  @Input() items: NavbarItem[] = [];\r\n  @Input() endItems: NavbarItem[] = [];\r\n\r\n  @Input() isSearch: boolean = false;\r\n  @Input() searchLabel: string | null = 'Search';\r\n  @Input() searchIconClass?: string;\r\n  @Input() searchPlaceholder?: string = 'Search';\r\n\r\n  @Input() isSidebarToggler: boolean = false;\r\n  @Input() isSidebarToggled: boolean = true;\r\n  @Input() sidebarTogglerIconClass: string = \"fa-solid fa-angle-right\";\r\n\r\n  @Output() toggleSidebar: EventEmitter<boolean> = new EventEmitter();\r\n  @Output() search: EventEmitter<string> = new EventEmitter();\r\n\r\n  constructor(private formBuilder: FormBuilder) {\r\n    this.searchForm = this.formBuilder.group({\r\n      searchValue: ['']\r\n    });\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    // this.toggleSidebar.emit(this.isSidebarToggled);\r\n  }\r\n\r\n  onToggleSidebar() {\r\n    this.isSidebarToggled = !this.isSidebarToggled;\r\n    this.toggleSidebar.emit(this.isSidebarToggled);\r\n  }\r\n\r\n  submitSearch() {\r\n    this.search.emit(this.searchForm.get('searchValue')?.value);\r\n  }\r\n\r\n  isDropdown(item: NavbarItem) {\r\n    return item.items?.length;\r\n  }\r\n\r\n}\r\n","<nav class=\"navbar navbar-expand-lg bg-primary\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\n  <div class=\"container-fluid\">\n\n    @if (isSidebarToggler) {\n      <button class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\"\n        aria-expanded=\"false\" aria-label=\"Toggle sidebar\" [ngClass]=\"{'toggled': isSidebarToggled}\">\n        <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\"></i>\n      </button>\n    }\n\n    <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\n      @if (brand?.src) {\n        <img src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\n          height=\"{{brand?.height}}\">\n      }\n      {{brand?.label}}\n    </a>\n\n    @if (items.length || endItems.length || search) {\n      <button class=\"navbar-toggler ms-auto\" type=\"button\"\n        data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\n        aria-label=\"Toggle navigation\">\n        <span class=\"navbar-toggler-icon\"></span>\n      </button>\n    }\n\n    <div class=\"collapse navbar-collapse\" [id]=\"id\">\n\n      @if (items.length) {\n        <ul class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\n          @for (navItem of items; track navItem) {\n            @if (!isDropdown(navItem)) {\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" [ngClass]=\"{'disabled': navItem.disabled}\"\n                  (click)=\"navItem.onClick && navItem.onClick($event)\" [attr.aria-disabled]=\"navItem.disabled\"\n                  [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\n                  ngbTooltip=\"{{navItem.tooltipLabel}}\" aria-current=\"page\">\n                  @if (navItem.iconClass) {\n                    <i class=\"pe-2 {{navItem.iconClass}}\"></i>\n                  }\n                  {{navItem.label}}\n                </a>\n              </li>\n            }\n            @if (isDropdown(navItem)) {\n              <li class=\"nav-item dropdown\">\n                <a class=\"nav-link dropdown-toggle\" [ngClass]=\"{'disabled': navItem.disabled}\"\n                  [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{navItem.tooltipLabel}}\"\n                  data-bs-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                  @if (navItem.iconClass) {\n                    <i class=\"pe-2 {{navItem.iconClass}}\"></i>\n                  }\n                  @if (navItem.label) {\n                    <span>{{navItem.label}}</span>\n                  }\n                </a>\n                <ul class=\"dropdown-menu px-2\">\n                  @for (navSubItem of navItem.items; track navSubItem) {\n                    <li>\n                      @if (!navSubItem.isDivider) {\n                        <a class=\"dropdown-item rounded\"\n                          (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\n                          [ngClass]=\"{'disabled': navSubItem.disabled}\"\n                          [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navSubItem.routerLink\"\n                          [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\n                          @if (navSubItem.iconClass) {\n                            <i class=\"me-2 {{navSubItem.iconClass}}\"></i>\n                          }\n                          @if (navSubItem.label) {\n                            <span>{{navSubItem.label}}</span>\n                          }\n                        </a>\n                      }\n                      @if (navSubItem.isDivider) {\n                        <hr class=\"dropdown-divider\">\n                      }\n                    </li>\n                  }\n                </ul>\n              </li>\n            }\n          }\n        </ul>\n      }\n\n      @if (endItems.length > 0) {\n        <ul class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\n          @for (endItem of endItems; track endItem) {\n            @if (!isDropdown(endItem)) {\n              <li class=\"nav-item\">\n                <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\n                  (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\"\n                  ngbTooltip=\"{{endItem.tooltipLabel}}\">\n                  @if (endItem.iconClass) {\n                    <i class=\"pe-2 {{endItem.iconClass}}\"></i>\n                  }\n                  @if (endItem.label) {\n                    <span>{{endItem.label}}</span>\n                  }\n                </a>\n              </li>\n            }\n            @if (isDropdown(endItem)) {\n              <li class=\"nav-item dropdown\">\n                <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{endItem.tooltipLabel}}\"\n                  data-bs-toggle=\"dropdown\" data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\"\n                  aria-haspopup=\"true\" aria-expanded=\"false\">\n                  @if (endItem.iconClass) {\n                    <i class=\"pe-2 {{endItem.iconClass}}\"></i>\n                  }\n                  @if (endItem.label) {\n                    <span>{{endItem.label}}</span>\n                  }\n                </a>\n                <div class=\"dropdown-menu px-2 dropdown-menu-end\">\n                  @for (endItemSubItem of endItem.items; track endItemSubItem) {\n                    @if (!endItemSubItem.isDivider) {\n                      <a class=\"dropdown-item text-center rounded\"\n                        [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\n                        (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\n                        ngbTooltip=\"{{endItemSubItem.tooltipLabel}}\">\n                        @if (endItemSubItem.iconClass) {\n                          <i class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\n                        }\n                        @if (endItemSubItem.label) {\n                          <span>{{endItemSubItem.label}}</span>\n                        }\n                      </a>\n                    }\n                    @if (endItemSubItem.isDivider) {\n                      <div class=\"dropdown-divider\"></div>\n                    }\n                  }\n                </div>\n              </li>\n            }\n          }\n        </ul>\n      }\n\n      @if (isSearch) {\n        <form class=\"search-form d-flex\" role=\"search\" [ngClass]=\"{'ms-auto': !endItems.length}\"\n          [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\n          <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\n            placeholder=\"{{searchPlaceholder}}\" aria-label=\"Search\">\n            <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\n              @if (searchIconClass) {\n                <i class=\"{{searchIconClass}}\"></i>\n              }\n              @if (searchLabel) {\n                <span>{{searchLabel}}</span>\n              }\n            </button>\n          </form>\n        }\n\n        <!-- <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': endItems.length <= 0}\"\n        [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\n        <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\n          formControlName=\"searchValue\">\n          <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\n            <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\n            <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\n          </button>\n        </form> -->\n      </div>\n    </div>\n  </nav>","/*\r\n * Public API Surface of ys-navbar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/ys-navbar/ys-navbar.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,14 +1,14 @@
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output } from '@angular/core';
+import { EventEmitter, Output, Input, Component } from '@angular/core';
 
 class YsOverlayComponent {
     show = false;
     onClick = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsOverlayComponent, isStandalone: true, selector: "ys-overlay", inputs: { show: "show" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div class=\"overlay bg-dark\" (click)=\"onClick.emit($event)\" [ngClass]=\"{'show': show}\"></div>", styles: ["@-webkit-keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}@keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}.overlay{position:fixed;inset:0;z-index:100;opacity:.5;display:none;-webkit-animation:fadeIn-overlay .5s;animation:fadeIn-overlay .5s}.overlay.show{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: YsOverlayComponent, isStandalone: true, selector: "ys-overlay", inputs: { show: "show" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div class=\"overlay bg-dark\" (click)=\"onClick.emit($event)\" [ngClass]=\"{'show': show}\"></div>", styles: ["@-webkit-keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}@keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}.overlay{position:fixed;inset:0;z-index:100;opacity:.5;display:none;-webkit-animation:fadeIn-overlay .5s;animation:fadeIn-overlay .5s}.overlay.show{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-overlay', imports: [NgClass], template: "<div class=\"overlay bg-dark\" (click)=\"onClick.emit($event)\" [ngClass]=\"{'show': show}\"></div>", styles: ["@-webkit-keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}@keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}.overlay{position:fixed;inset:0;z-index:100;opacity:.5;display:none;-webkit-animation:fadeIn-overlay .5s;animation:fadeIn-overlay .5s}.overlay.show{display:block}\n"] }]
         }], propDecorators: { show: [{

package/fesm2022/yoozsoft-yoozsoft-ng-password-strength.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Component, Input, Directive } from '@angular/core';
-import { NgIf, NgClass } from '@angular/common';
+import { Input, Component, Directive } from '@angular/core';
+import { NgClass } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { Validators } from '@angular/forms';
 
@@ -91,12 +91,12 @@ class YsPasswordStrengthComponent {
                         this.strengthMeter == 0 ? "pink" :
                             '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsPasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsPasswordStrengthComponent, isStandalone: true, selector: "ys-password-strength", inputs: { passwordHelp: "passwordHelp", displayFeedback: "displayFeedback", feedback: "feedback", control: "control" }, ngImport: i0, template: "<div class=\"password-strength\" *ngIf=\"control\">\r\n\r\n    <div class=\"d-flex flex-row mt-1\">\r\n        <hr *ngIf=\"this.requiredOptionsLength > 4\" class=\"rounded-start rounded-end me-1\"\r\n            [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n        <hr *ngIf=\"this.requiredOptionsLength > 3\" class=\"rounded-start rounded-end me-1\"\r\n            [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n        <hr *ngIf=\"this.requiredOptionsLength > 2\" class=\"rounded-start rounded-end me-1\"\r\n            [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n        <hr *ngIf=\"this.requiredOptionsLength > 1\" class=\"rounded-start rounded-end me-1\"\r\n            [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n        <hr *ngIf=\"this.requiredOptionsLength > 0\" class=\"rounded-start rounded-end\"\r\n            [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n    </div>\r\n\r\n    <small *ngIf=\"passwordHelp\" id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\r\n\r\n    <div *ngIf=\"displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)\"\r\n        class=\"invalid-feedback d-grid \">\r\n\r\n        <span *ngIf=\"control.options?.requireUppercase\"\r\n            [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\r\n        <span *ngIf=\"control.options?.requireLowercase\"\r\n            [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\r\n        <span *ngIf=\"control.options?.requireDigit\" [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\r\n        <span *ngIf=\"control.options?.requireNonAlphanumeric\"\r\n            [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\r\n        <span *ngIf=\"control.options?.requiredMinLength\"\r\n            [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\r\n\r\n    </div>\r\n\r\n    <div *ngIf=\"control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)\"\r\n        class=\"invalid-feedback d-grid \">\r\n        {{feedback?.required}}\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!control\">\r\n    Password strength control is undefined.\r\n</div>", 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsPasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsPasswordStrengthComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsPasswordStrengthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-password-strength', imports: [NgIf, NgClass], template: "<div class=\"password-strength\" *ngIf=\"control\">\r\n\r\n    <div class=\"d-flex flex-row mt-1\">\r\n        <hr *ngIf=\"this.requiredOptionsLength > 4\" class=\"rounded-start rounded-end me-1\"\r\n            [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n        <hr *ngIf=\"this.requiredOptionsLength > 3\" class=\"rounded-start rounded-end me-1\"\r\n            [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n        <hr *ngIf=\"this.requiredOptionsLength > 2\" class=\"rounded-start rounded-end me-1\"\r\n            [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n        <hr *ngIf=\"this.requiredOptionsLength > 1\" class=\"rounded-start rounded-end me-1\"\r\n            [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n        <hr *ngIf=\"this.requiredOptionsLength > 0\" class=\"rounded-start rounded-end\"\r\n            [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n    </div>\r\n\r\n    <small *ngIf=\"passwordHelp\" id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\r\n\r\n    <div *ngIf=\"displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)\"\r\n        class=\"invalid-feedback d-grid \">\r\n\r\n        <span *ngIf=\"control.options?.requireUppercase\"\r\n            [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\r\n        <span *ngIf=\"control.options?.requireLowercase\"\r\n            [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\r\n        <span *ngIf=\"control.options?.requireDigit\" [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\r\n        <span *ngIf=\"control.options?.requireNonAlphanumeric\"\r\n            [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\r\n        <span *ngIf=\"control.options?.requiredMinLength\"\r\n            [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\r\n\r\n    </div>\r\n\r\n    <div *ngIf=\"control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)\"\r\n        class=\"invalid-feedback d-grid \">\r\n        {{feedback?.required}}\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!control\">\r\n    Password strength control is undefined.\r\n</div>", 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"] }]
+            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"] }]
         }], propDecorators: { passwordHelp: [{
                 type: Input
             }], displayFeedback: [{
@@ -134,10 +134,10 @@ class YsPasswordStrengthDirective {
         passwordStrength.feedback = this.feedback;
         passwordStrength.control = { formControl: formControl, options: this.options };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsPasswordStrengthDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: YsPasswordStrengthDirective, isStandalone: true, selector: "[ysPasswordStrength]", inputs: { passwordHelp: "passwordHelp", displayFeedback: "displayFeedback", feedback: "feedback", options: "options" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsPasswordStrengthDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: YsPasswordStrengthDirective, isStandalone: true, selector: "[ysPasswordStrength]", inputs: { passwordHelp: "passwordHelp", displayFeedback: "displayFeedback", feedback: "feedback", options: "options" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsPasswordStrengthDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsPasswordStrengthDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ysPasswordStrength]'