@yoozsoft/yoozsoft-ng 4.0.6 → 5.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-password-strength.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/models/regx.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/models/strength-validation-feedback.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/models/strength-validation-option.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/ys-password-strength/ys-password-strength.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/ys-password-strength/ys-password-strength.component.html","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/directives/ys-password-strength.directive.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/yoozsoft-yoozsoft-ng-password-strength.ts"],"sourcesContent":["export const StrongPasswordRegx: RegExp = /^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=\\D*\\d)(?=.*[!@#$%^&*]).{8,}$/;\r\nexport const UppercaseRegx: RegExp = /^.*[A-Z]/;\r\nexport const LowercaseRegx: RegExp = /^.*[a-z]/;\r\nexport const DigitRegx: RegExp = /^.*[0-9].*/;\r\nexport const NonAlphanumericRegx: RegExp = /^.*[!@#$%^&*]/;\r\n// export const MinLength8Regx: RegExp = /^.{8,}/;","export class StrengthValidationFeedback {\r\n    required?: string;\r\n    uppercase?: string;\r\n    lowercase?: string;\r\n    digit?: string;\r\n    nonAlphanumeric?: string;\r\n    minLength?: string;\r\n\r\n    constructor(\r\n        options?: {\r\n            required?: string,\r\n            uppercase?: string,\r\n            lowercase?: string,\r\n            digit?: string,\r\n            nonAlphanumeric?: string,\r\n            minLength?: string\r\n        }\r\n    ) {\r\n        this.required = options?.required == undefined ? 'Please enter a valid password.' : options?.required;\r\n        this.uppercase = options?.uppercase == undefined ? 'At least one uppercase letter.' : options?.uppercase;\r\n        this.lowercase = options?.lowercase == undefined ? 'At least one lowercase letter.' : options?.lowercase;\r\n        this.digit = options?.digit == undefined ? 'At least one digit.' : options?.digit;\r\n        this.nonAlphanumeric = options?.nonAlphanumeric == undefined ? 'At least one special character (e.g., !, @, #, $).' : options?.nonAlphanumeric;\r\n        this.minLength = options?.minLength == undefined ? 'At least 8 characters long.' : options?.minLength;\r\n    }\r\n}","export class StrengthValidationOption {\r\n    requireUppercase?: boolean;\r\n    requireLowercase?: boolean;\r\n    requireDigit?: boolean;\r\n    requireNonAlphanumeric?: boolean;\r\n    requiredMinLength: number;\r\n\r\n    constructor(\r\n        options?: {\r\n            requireUppercase?: boolean,\r\n            requireLowercase?: boolean,\r\n            requireDigit?: boolean,\r\n            requireNonAlphanumeric?: boolean,\r\n            requiredMinLength?: number\r\n        }\r\n    ) {\r\n        this.requireUppercase = options?.requireUppercase == undefined ? true : options?.requireUppercase;\r\n        this.requireLowercase = options?.requireLowercase == undefined ? true : options?.requireLowercase;\r\n        this.requireDigit = options?.requireDigit == undefined ? true : options?.requireDigit;\r\n        this.requireNonAlphanumeric = options?.requireNonAlphanumeric == undefined ? true : options?.requireNonAlphanumeric;\r\n        this.requiredMinLength = options?.requiredMinLength == undefined ? 8 : options?.requiredMinLength;\r\n    }\r\n}","import { NgClass, NgIf } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { Validators } from '@angular/forms';\r\nimport { DigitRegx, LowercaseRegx, NonAlphanumericRegx, StrengthValidationControl, StrengthValidationFeedback, StrengthValidationOption, UppercaseRegx } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-password-strength',\r\n  imports: [NgIf, NgClass],\r\n  templateUrl: './ys-password-strength.component.html',\r\n  styleUrl: './ys-password-strength.component.scss'\r\n})\r\nexport class YsPasswordStrengthComponent {\r\n\r\n  @Input() passwordHelp: string | null = null;\r\n  @Input() displayFeedback: boolean = true;\r\n  @Input() feedback: StrengthValidationFeedback | null = new StrengthValidationFeedback();\r\n\r\n  private minLengthRegx: RegExp = new RegExp('');\r\n\r\n  private _control?: StrengthValidationControl;\r\n  @Input()\r\n  get control(): StrengthValidationControl | undefined { return this._control; }\r\n  set control(value: StrengthValidationControl | undefined) {\r\n    this._control = value;\r\n\r\n    if (!this._control) { return; }\r\n\r\n    if (!this._control.options) {\r\n      this._control.options = new StrengthValidationOption();\r\n    }\r\n\r\n    const strongPasswordRegx: RegExp = new RegExp(\r\n      `${this._control.options.requireUppercase ? '^(?=[^A-Z]*[A-Z])' : ''\r\n      }${this._control.options.requireLowercase ? '(?=[^a-z]*[a-z])' : ''\r\n      }${this._control.options.requireDigit ? '(?=\\\\D*\\\\d)' : ''\r\n      }${this._control.options.requireNonAlphanumeric ? '(?=.*[!@#$%^&*])' : ''\r\n      }.{${this._control.options.requiredMinLength},}$`);\r\n\r\n    this.minLengthRegx = new RegExp(`.{${this._control.options.requiredMinLength},}$`);\r\n\r\n    this._control.formControl?.addValidators([Validators.required, Validators.pattern(strongPasswordRegx)]);\r\n    this._control.formControl?.updateValueAndValidity();\r\n\r\n  }\r\n\r\n  get requiredOptionsLength(): number { return Object.values(this.control?.options!).filter(x => x).length; }\r\n\r\n  get hasUppercase(): boolean { return this.control?.formControl?.value && UppercaseRegx.test(this.control?.formControl?.value); }\r\n  get hasLowercase(): boolean { return this.control?.formControl?.value && LowercaseRegx.test(this.control?.formControl?.value); }\r\n  get hasDigit(): boolean { return this.control?.formControl?.value && DigitRegx.test(this.control?.formControl?.value); }\r\n  get hasNonAlphanumeric(): boolean { return this.control?.formControl?.value && NonAlphanumericRegx.test(this.control?.formControl?.value); }\r\n  get hasMinLength(): boolean { return this.control?.formControl?.value && this.minLengthRegx.test(this.control?.formControl?.value); }\r\n\r\n  get strengthMeter(): number {\r\n\r\n    let strength: number = -1;\r\n    if (this.control?.options?.requireUppercase && this.hasUppercase)\r\n      strength += 1;\r\n    if (this.control?.options?.requireLowercase && this.hasLowercase)\r\n      strength += 1;\r\n    if (this.control?.options?.requireDigit && this.hasDigit)\r\n      strength += 1;\r\n    if (this.control?.options?.requireNonAlphanumeric && this.hasNonAlphanumeric)\r\n      strength += 1;\r\n    if (this.control?.options?.requiredMinLength && this.hasMinLength)\r\n      strength += 1;\r\n\r\n    return strength + (5 - this.requiredOptionsLength);\r\n  }\r\n\r\n  get strengthStyleClass(): string {\r\n    return this.strengthMeter == 4 ? \"green\" :\r\n      this.strengthMeter == 3 ? \"yellow\" :\r\n        this.strengthMeter == 2 ? \"orange\" :\r\n          this.strengthMeter == 1 ? \"red\" :\r\n            this.strengthMeter == 0 ? \"pink\" :\r\n              '';\r\n  }\r\n\r\n}\r\n","<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>","import { Directive, ElementRef, Injector, Input, OnInit, ViewContainerRef } from '@angular/core';\r\nimport { AbstractControl, NgControl } from '@angular/forms';\r\nimport { StrengthValidationFeedback, StrengthValidationOption } from '../models';\r\nimport { YsPasswordStrengthComponent } from '../ys-password-strength/ys-password-strength.component';\r\n\r\n@Directive({\r\n  selector: '[ysPasswordStrength]'\r\n})\r\nexport class YsPasswordStrengthDirective implements OnInit {\r\n\r\n  @Input() passwordHelp: string | null = null;\r\n  @Input() displayFeedback: boolean = true;\r\n  @Input() feedback: StrengthValidationFeedback | null = new StrengthValidationFeedback();\r\n  @Input() options?: StrengthValidationOption;\r\n\r\n  constructor(\r\n    private el: ElementRef,\r\n    private viewContainerRef: ViewContainerRef,\r\n    private injector: Injector,\r\n    private control: NgControl\r\n  ) { }\r\n\r\n  ngOnInit(): void {\r\n    const element = this.el.nativeElement;\r\n    const elementParent = element.parentElement;\r\n\r\n    const formControl: AbstractControl<any, any> | null = this.control.control;\r\n\r\n    const passwordStrengthComponent = this.viewContainerRef.createComponent(YsPasswordStrengthComponent, { injector: this.injector });\r\n    elementParent.insertBefore(passwordStrengthComponent.location.nativeElement, element.nextSibling);\r\n\r\n    const passwordStrength: YsPasswordStrengthComponent = passwordStrengthComponent.instance;\r\n    passwordStrength.passwordHelp = this.passwordHelp;\r\n    passwordStrength.displayFeedback = this.displayFeedback;\r\n    passwordStrength.feedback = this.feedback;\r\n    passwordStrength.control = { formControl: formControl, options: this.options };\r\n\r\n  }\r\n\r\n}\r\n","/*\r\n * Public API Surface of ys-password-strength\r\n */\r\n\r\nexport * from './src/directives';\r\nexport * from './src/models';\r\nexport * from './src/ys-password-strength/ys-password-strength.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-password-strength.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/models/regx.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/models/strength-validation-feedback.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/models/strength-validation-option.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/ys-password-strength/ys-password-strength.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/ys-password-strength/ys-password-strength.component.html","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/src/directives/ys-password-strength.directive.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/password-strength/yoozsoft-yoozsoft-ng-password-strength.ts"],"sourcesContent":["export const StrongPasswordRegx: RegExp = /^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=\\D*\\d)(?=.*[!@#$%^&*]).{8,}$/;\r\nexport const UppercaseRegx: RegExp = /^.*[A-Z]/;\r\nexport const LowercaseRegx: RegExp = /^.*[a-z]/;\r\nexport const DigitRegx: RegExp = /^.*[0-9].*/;\r\nexport const NonAlphanumericRegx: RegExp = /^.*[!@#$%^&*]/;\r\n// export const MinLength8Regx: RegExp = /^.{8,}/;","export class StrengthValidationFeedback {\r\n    required?: string;\r\n    uppercase?: string;\r\n    lowercase?: string;\r\n    digit?: string;\r\n    nonAlphanumeric?: string;\r\n    minLength?: string;\r\n\r\n    constructor(\r\n        options?: {\r\n            required?: string,\r\n            uppercase?: string,\r\n            lowercase?: string,\r\n            digit?: string,\r\n            nonAlphanumeric?: string,\r\n            minLength?: string\r\n        }\r\n    ) {\r\n        this.required = options?.required == undefined ? 'Please enter a valid password.' : options?.required;\r\n        this.uppercase = options?.uppercase == undefined ? 'At least one uppercase letter.' : options?.uppercase;\r\n        this.lowercase = options?.lowercase == undefined ? 'At least one lowercase letter.' : options?.lowercase;\r\n        this.digit = options?.digit == undefined ? 'At least one digit.' : options?.digit;\r\n        this.nonAlphanumeric = options?.nonAlphanumeric == undefined ? 'At least one special character (e.g., !, @, #, $).' : options?.nonAlphanumeric;\r\n        this.minLength = options?.minLength == undefined ? 'At least 8 characters long.' : options?.minLength;\r\n    }\r\n}","export class StrengthValidationOption {\r\n    requireUppercase?: boolean;\r\n    requireLowercase?: boolean;\r\n    requireDigit?: boolean;\r\n    requireNonAlphanumeric?: boolean;\r\n    requiredMinLength: number;\r\n\r\n    constructor(\r\n        options?: {\r\n            requireUppercase?: boolean,\r\n            requireLowercase?: boolean,\r\n            requireDigit?: boolean,\r\n            requireNonAlphanumeric?: boolean,\r\n            requiredMinLength?: number\r\n        }\r\n    ) {\r\n        this.requireUppercase = options?.requireUppercase == undefined ? true : options?.requireUppercase;\r\n        this.requireLowercase = options?.requireLowercase == undefined ? true : options?.requireLowercase;\r\n        this.requireDigit = options?.requireDigit == undefined ? true : options?.requireDigit;\r\n        this.requireNonAlphanumeric = options?.requireNonAlphanumeric == undefined ? true : options?.requireNonAlphanumeric;\r\n        this.requiredMinLength = options?.requiredMinLength == undefined ? 8 : options?.requiredMinLength;\r\n    }\r\n}","import { NgClass } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { Validators } from '@angular/forms';\r\nimport { DigitRegx, LowercaseRegx, NonAlphanumericRegx, StrengthValidationControl, StrengthValidationFeedback, StrengthValidationOption, UppercaseRegx } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-password-strength',\r\n  imports: [NgClass],\r\n  templateUrl: './ys-password-strength.component.html',\r\n  styleUrl: './ys-password-strength.component.scss'\r\n})\r\nexport class YsPasswordStrengthComponent {\r\n\r\n  @Input() passwordHelp: string | null = null;\r\n  @Input() displayFeedback: boolean = true;\r\n  @Input() feedback: StrengthValidationFeedback | null = new StrengthValidationFeedback();\r\n\r\n  private minLengthRegx: RegExp = new RegExp('');\r\n\r\n  private _control?: StrengthValidationControl;\r\n  @Input()\r\n  get control(): StrengthValidationControl | undefined { return this._control; }\r\n  set control(value: StrengthValidationControl | undefined) {\r\n    this._control = value;\r\n\r\n    if (!this._control) { return; }\r\n\r\n    if (!this._control.options) {\r\n      this._control.options = new StrengthValidationOption();\r\n    }\r\n\r\n    const strongPasswordRegx: RegExp = new RegExp(\r\n      `${this._control.options.requireUppercase ? '^(?=[^A-Z]*[A-Z])' : ''\r\n      }${this._control.options.requireLowercase ? '(?=[^a-z]*[a-z])' : ''\r\n      }${this._control.options.requireDigit ? '(?=\\\\D*\\\\d)' : ''\r\n      }${this._control.options.requireNonAlphanumeric ? '(?=.*[!@#$%^&*])' : ''\r\n      }.{${this._control.options.requiredMinLength},}$`);\r\n\r\n    this.minLengthRegx = new RegExp(`.{${this._control.options.requiredMinLength},}$`);\r\n\r\n    this._control.formControl?.addValidators([Validators.required, Validators.pattern(strongPasswordRegx)]);\r\n    this._control.formControl?.updateValueAndValidity();\r\n\r\n  }\r\n\r\n  get requiredOptionsLength(): number { return Object.values(this.control?.options!).filter(x => x).length; }\r\n\r\n  get hasUppercase(): boolean { return this.control?.formControl?.value && UppercaseRegx.test(this.control?.formControl?.value); }\r\n  get hasLowercase(): boolean { return this.control?.formControl?.value && LowercaseRegx.test(this.control?.formControl?.value); }\r\n  get hasDigit(): boolean { return this.control?.formControl?.value && DigitRegx.test(this.control?.formControl?.value); }\r\n  get hasNonAlphanumeric(): boolean { return this.control?.formControl?.value && NonAlphanumericRegx.test(this.control?.formControl?.value); }\r\n  get hasMinLength(): boolean { return this.control?.formControl?.value && this.minLengthRegx.test(this.control?.formControl?.value); }\r\n\r\n  get strengthMeter(): number {\r\n\r\n    let strength: number = -1;\r\n    if (this.control?.options?.requireUppercase && this.hasUppercase)\r\n      strength += 1;\r\n    if (this.control?.options?.requireLowercase && this.hasLowercase)\r\n      strength += 1;\r\n    if (this.control?.options?.requireDigit && this.hasDigit)\r\n      strength += 1;\r\n    if (this.control?.options?.requireNonAlphanumeric && this.hasNonAlphanumeric)\r\n      strength += 1;\r\n    if (this.control?.options?.requiredMinLength && this.hasMinLength)\r\n      strength += 1;\r\n\r\n    return strength + (5 - this.requiredOptionsLength);\r\n  }\r\n\r\n  get strengthStyleClass(): string {\r\n    return this.strengthMeter == 4 ? \"green\" :\r\n      this.strengthMeter == 3 ? \"yellow\" :\r\n        this.strengthMeter == 2 ? \"orange\" :\r\n          this.strengthMeter == 1 ? \"red\" :\r\n            this.strengthMeter == 0 ? \"pink\" :\r\n              '';\r\n  }\r\n\r\n}\r\n","@if (control) {\n  <div class=\"password-strength\">\n    <div class=\"d-flex flex-row mt-1\">\n      @if (this.requiredOptionsLength > 4) {\n        <hr class=\"rounded-start rounded-end me-1\"\n          [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\n          [style.width.%]=\"[100 / requiredOptionsLength]\">\n        }\n        @if (this.requiredOptionsLength > 3) {\n          <hr class=\"rounded-start rounded-end me-1\"\n            [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\n          }\n          @if (this.requiredOptionsLength > 2) {\n            <hr class=\"rounded-start rounded-end me-1\"\n              [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\n              [style.width.%]=\"[100 / requiredOptionsLength]\">\n            }\n            @if (this.requiredOptionsLength > 1) {\n              <hr class=\"rounded-start rounded-end me-1\"\n                [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\n                [style.width.%]=\"[100 / requiredOptionsLength]\">\n              }\n              @if (this.requiredOptionsLength > 0) {\n                <hr class=\"rounded-start rounded-end\"\n                  [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\n                  [style.width.%]=\"[100 / requiredOptionsLength]\">\n                }\n              </div>\n              @if (passwordHelp) {\n                <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\n              }\n              @if (displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)) {\n                <div\n                  class=\"invalid-feedback d-grid \">\n                  @if (control.options?.requireUppercase) {\n                    <span\n                    [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\n                  }\n                  @if (control.options?.requireLowercase) {\n                    <span\n                    [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\n                  }\n                  @if (control.options?.requireDigit) {\n                    <span [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\n                  }\n                  @if (control.options?.requireNonAlphanumeric) {\n                    <span\n                    [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\n                  }\n                  @if (control.options?.requiredMinLength) {\n                    <span\n                    [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\n                  }\n                </div>\n              }\n              @if (control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)) {\n                <div\n                  class=\"invalid-feedback d-grid \">\n                  {{feedback?.required}}\n                </div>\n              }\n            </div>\n          }\n\n          @if (!control) {\n            <div>\n              Password strength control is undefined.\n            </div>\n          }","import { Directive, ElementRef, Injector, Input, OnInit, ViewContainerRef } from '@angular/core';\r\nimport { AbstractControl, NgControl } from '@angular/forms';\r\nimport { StrengthValidationFeedback, StrengthValidationOption } from '../models';\r\nimport { YsPasswordStrengthComponent } from '../ys-password-strength/ys-password-strength.component';\r\n\r\n@Directive({\r\n  selector: '[ysPasswordStrength]'\r\n})\r\nexport class YsPasswordStrengthDirective implements OnInit {\r\n\r\n  @Input() passwordHelp: string | null = null;\r\n  @Input() displayFeedback: boolean = true;\r\n  @Input() feedback: StrengthValidationFeedback | null = new StrengthValidationFeedback();\r\n  @Input() options?: StrengthValidationOption;\r\n\r\n  constructor(\r\n    private el: ElementRef,\r\n    private viewContainerRef: ViewContainerRef,\r\n    private injector: Injector,\r\n    private control: NgControl\r\n  ) { }\r\n\r\n  ngOnInit(): void {\r\n    const element = this.el.nativeElement;\r\n    const elementParent = element.parentElement;\r\n\r\n    const formControl: AbstractControl<any, any> | null = this.control.control;\r\n\r\n    const passwordStrengthComponent = this.viewContainerRef.createComponent(YsPasswordStrengthComponent, { injector: this.injector });\r\n    elementParent.insertBefore(passwordStrengthComponent.location.nativeElement, element.nextSibling);\r\n\r\n    const passwordStrength: YsPasswordStrengthComponent = passwordStrengthComponent.instance;\r\n    passwordStrength.passwordHelp = this.passwordHelp;\r\n    passwordStrength.displayFeedback = this.displayFeedback;\r\n    passwordStrength.feedback = this.feedback;\r\n    passwordStrength.control = { formControl: formControl, options: this.options };\r\n\r\n  }\r\n\r\n}\r\n","/*\r\n * Public API Surface of ys-password-strength\r\n */\r\n\r\nexport * from './src/directives';\r\nexport * from './src/models';\r\nexport * from './src/ys-password-strength/ys-password-strength.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input } from '@angular/core';
+import { Injectable, Input, Component } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { NgClass, AsyncPipe } from '@angular/common';
 
@@ -9,10 +9,10 @@ class ProgressService {
     setLoading(loading) {
         this._loading$.next(loading);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ProgressService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ProgressService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ProgressService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ProgressService, decorators: [{
             type: Injectable
         }] });
 
@@ -30,10 +30,10 @@ class YsProgressComponent {
         this.progressService = progressService;
         this.loading$ = progressService.loading$;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsProgressComponent, deps: [{ token: ProgressService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsProgressComponent, isStandalone: true, selector: "ys-progress", inputs: { reverse: "reverse", styleClass: "styleClass", height: "height", label: "label" }, ngImport: i0, template: "<div class=\"progress\" role=\"progressbar\" [style]=\"'height: '+ height +'px'\">\r\n    <div class=\"progress-bar {{styleClass}}\"\r\n        [ngClass]=\"{'indeterminate': (loading$ | async), 'direction-reverse': reverse}\">\r\n        {{(loading$ | async) && label ? label : ''}}\r\n    </div>\r\n</div>", styles: ["@keyframes progress-indeterminate{0%{left:-25%;width:25%}to{left:100%;width:25%}}@keyframes progress-indeterminate-rtl{0%{left:-100%;width:25%}to{left:25%;width:25%}}.progress .progress-bar.indeterminate{position:relative}.progress .direction-reverse{animation-direction:reverse!important}::ng-deep html[dir=rtl] .progress .progress-bar.indeterminate{animation:progress-indeterminate-rtl 3s linear infinite}::ng-deep html[dir=ltr] .progress .progress-bar.indeterminate,::ng-deep html :not(dir) .progress .progress-bar.indeterminate{animation:progress-indeterminate 3s linear infinite}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsProgressComponent, deps: [{ token: ProgressService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: YsProgressComponent, isStandalone: true, selector: "ys-progress", inputs: { reverse: "reverse", styleClass: "styleClass", height: "height", label: "label" }, ngImport: i0, template: "<div class=\"progress\" role=\"progressbar\" [style]=\"'height: '+ height +'px'\">\r\n    <div class=\"progress-bar {{styleClass}}\"\r\n        [ngClass]=\"{'indeterminate': (loading$ | async), 'direction-reverse': reverse}\">\r\n        {{(loading$ | async) && label ? label : ''}}\r\n    </div>\r\n</div>", styles: ["@keyframes progress-indeterminate{0%{left:-25%;width:25%}to{left:100%;width:25%}}@keyframes progress-indeterminate-rtl{0%{left:-100%;width:25%}to{left:25%;width:25%}}.progress .progress-bar.indeterminate{position:relative}.progress .direction-reverse{animation-direction:reverse!important}::ng-deep html[dir=rtl] .progress .progress-bar.indeterminate{animation:progress-indeterminate-rtl 3s linear infinite}::ng-deep html[dir=ltr] .progress .progress-bar.indeterminate,::ng-deep html :not(dir) .progress .progress-bar.indeterminate{animation:progress-indeterminate 3s linear infinite}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsProgressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-progress', imports: [NgClass, AsyncPipe], template: "<div class=\"progress\" role=\"progressbar\" [style]=\"'height: '+ height +'px'\">\r\n    <div class=\"progress-bar {{styleClass}}\"\r\n        [ngClass]=\"{'indeterminate': (loading$ | async), 'direction-reverse': reverse}\">\r\n        {{(loading$ | async) && label ? label : ''}}\r\n    </div>\r\n</div>", styles: ["@keyframes progress-indeterminate{0%{left:-25%;width:25%}to{left:100%;width:25%}}@keyframes progress-indeterminate-rtl{0%{left:-100%;width:25%}to{left:25%;width:25%}}.progress .progress-bar.indeterminate{position:relative}.progress .direction-reverse{animation-direction:reverse!important}::ng-deep html[dir=rtl] .progress .progress-bar.indeterminate{animation:progress-indeterminate-rtl 3s linear infinite}::ng-deep html[dir=ltr] .progress .progress-bar.indeterminate,::ng-deep html :not(dir) .progress .progress-bar.indeterminate{animation:progress-indeterminate 3s linear infinite}\n"] }]
         }], ctorParameters: () => [{ type: ProgressService }], propDecorators: { reverse: [{

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

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-progress.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/progress/src/services/progress.service.ts","../../../../projects/yoozsoft/yoozsoft-ng/progress/src/ys-progress/ys-progress.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/progress/src/ys-progress/ys-progress.component.html","../../../../projects/yoozsoft/yoozsoft-ng/progress/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/progress/yoozsoft-yoozsoft-ng-progress.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject } from 'rxjs';\r\n\r\n@Injectable()\r\nexport class ProgressService {\r\n\r\n  private _loading$ = new BehaviorSubject<boolean>(false);\r\n\r\n  get loading$() { return this._loading$.asObservable(); }\r\n\r\n  setLoading(loading: boolean) {\r\n    this._loading$.next(loading);\r\n  }\r\n}\r\n","import { AsyncPipe, NgClass } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { Observable } from 'rxjs';\r\nimport { ProgressService } from '../services';\r\n\r\n@Component({\r\n  selector: 'ys-progress',\r\n  imports: [NgClass, AsyncPipe],\r\n  templateUrl: './ys-progress.component.html',\r\n  styleUrl: './ys-progress.component.scss'\r\n})\r\nexport class YsProgressComponent {\r\n\r\n  loading$: Observable<boolean>;\r\n\r\n  /**\r\n   * Set reverse animation direction.\r\n   */\r\n  @Input() reverse: boolean = false;\r\n  @Input() styleClass: string | null = null;\r\n  @Input() height: number = 3;\r\n  @Input() label: string | null = null;\r\n\r\n  constructor(private progressService: ProgressService) {\r\n    this.loading$ = progressService.loading$;\r\n  }\r\n\r\n}\r\n","<div class=\"progress\" role=\"progressbar\" [style]=\"'height: '+ height +'px'\">\r\n    <div class=\"progress-bar {{styleClass}}\"\r\n        [ngClass]=\"{'indeterminate': (loading$ | async), 'direction-reverse': reverse}\">\r\n        {{(loading$ | async) && label ? label : ''}}\r\n    </div>\r\n</div>","/*\r\n * Public API Surface of ys-progress\r\n */\r\n\r\nexport * from './src/services';\r\nexport * from './src/ys-progress/ys-progress.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.ProgressService"],"mappings":";;;;;MAIa,eAAe,CAAA;AAElB,IAAA,SAAS,GAAG,IAAI,eAAe,CAAU,KAAK,CAAC;IAEvD,IAAI,QAAQ,GAAK,EAAA,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;AAEtD,IAAA,UAAU,CAAC,OAAgB,EAAA;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;uGAPnB,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;2GAAf,eAAe,EAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAD3B;;;MCQY,mBAAmB,CAAA;AAYV,IAAA,eAAA;AAVpB,IAAA,QAAQ;AAER;;AAEG;IACM,OAAO,GAAY,KAAK;IACxB,UAAU,GAAkB,IAAI;IAChC,MAAM,GAAW,CAAC;IAClB,KAAK,GAAkB,IAAI;AAEpC,IAAA,WAAA,CAAoB,eAAgC,EAAA;QAAhC,IAAe,CAAA,eAAA,GAAf,eAAe;AACjC,QAAA,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC,QAAQ;;uGAb/B,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,ECXhC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,YAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,oTAKM,EDEM,MAAA,EAAA,CAAA,4kBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,OAAO,+EAAE,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA;;2FAIjB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EACd,OAAA,EAAA,CAAC,OAAO,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,oTAAA,EAAA,MAAA,EAAA,CAAA,4kBAAA,CAAA,EAAA;iFAWpB,OAAO,EAAA,CAAA;sBAAf;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,MAAM,EAAA,CAAA;sBAAd;gBACQ,KAAK,EAAA,CAAA;sBAAb;;;AErBH;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-progress.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/progress/src/services/progress.service.ts","../../../../projects/yoozsoft/yoozsoft-ng/progress/src/ys-progress/ys-progress.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/progress/src/ys-progress/ys-progress.component.html","../../../../projects/yoozsoft/yoozsoft-ng/progress/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/progress/yoozsoft-yoozsoft-ng-progress.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject } from 'rxjs';\r\n\r\n@Injectable()\r\nexport class ProgressService {\r\n\r\n  private _loading$ = new BehaviorSubject<boolean>(false);\r\n\r\n  get loading$() { return this._loading$.asObservable(); }\r\n\r\n  setLoading(loading: boolean) {\r\n    this._loading$.next(loading);\r\n  }\r\n}\r\n","import { AsyncPipe, NgClass } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { Observable } from 'rxjs';\r\nimport { ProgressService } from '../services';\r\n\r\n@Component({\r\n  selector: 'ys-progress',\r\n  imports: [NgClass, AsyncPipe],\r\n  templateUrl: './ys-progress.component.html',\r\n  styleUrl: './ys-progress.component.scss'\r\n})\r\nexport class YsProgressComponent {\r\n\r\n  loading$: Observable<boolean>;\r\n\r\n  /**\r\n   * Set reverse animation direction.\r\n   */\r\n  @Input() reverse: boolean = false;\r\n  @Input() styleClass: string | null = null;\r\n  @Input() height: number = 3;\r\n  @Input() label: string | null = null;\r\n\r\n  constructor(private progressService: ProgressService) {\r\n    this.loading$ = progressService.loading$;\r\n  }\r\n\r\n}\r\n","<div class=\"progress\" role=\"progressbar\" [style]=\"'height: '+ height +'px'\">\r\n    <div class=\"progress-bar {{styleClass}}\"\r\n        [ngClass]=\"{'indeterminate': (loading$ | async), 'direction-reverse': reverse}\">\r\n        {{(loading$ | async) && label ? label : ''}}\r\n    </div>\r\n</div>","/*\r\n * Public API Surface of ys-progress\r\n */\r\n\r\nexport * from './src/services';\r\nexport * from './src/ys-progress/ys-progress.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.ProgressService"],"mappings":";;;;;MAIa,eAAe,CAAA;AAElB,IAAA,SAAS,GAAG,IAAI,eAAe,CAAU,KAAK,CAAC;IAEvD,IAAI,QAAQ,GAAA,EAAK,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;AAEtD,IAAA,UAAU,CAAC,OAAgB,EAAA;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;uGAPnB,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;2GAAf,eAAe,EAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAD3B;;;MCQY,mBAAmB,CAAA;AAYV,IAAA,eAAA;AAVpB,IAAA,QAAQ;AAER;;AAEG;IACM,OAAO,GAAY,KAAK;IACxB,UAAU,GAAkB,IAAI;IAChC,MAAM,GAAW,CAAC;IAClB,KAAK,GAAkB,IAAI;AAEpC,IAAA,WAAA,CAAoB,eAAgC,EAAA;QAAhC,IAAA,CAAA,eAAe,GAAf,eAAe;AACjC,QAAA,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC,QAAQ;;uGAb/B,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,YAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXhC,oTAKM,EAAA,MAAA,EAAA,CAAA,4kBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEM,OAAO,+EAAE,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA;;2FAIjB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,OAAA,EACd,CAAC,OAAO,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,oTAAA,EAAA,MAAA,EAAA,CAAA,4kBAAA,CAAA,EAAA;iFAWpB,OAAO,EAAA,CAAA;sBAAf;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,MAAM,EAAA,CAAA;sBAAd;gBACQ,KAAK,EAAA,CAAA;sBAAb;;;AErBH;;AAEG;;ACFH;;AAEG;;;;"}

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

@@ -1,8 +1,7 @@
-import { NgIf, NgFor } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, Component, Input } from '@angular/core';
+import { forwardRef, Input, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 class YsSelectComponent {
     /**ُSelect element id */
@@ -69,24 +68,24 @@ class YsSelectComponent {
     isObject(item) {
         return typeof item == 'object';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsSelectComponent, isStandalone: true, selector: "ys-select", inputs: { id: "id", options: "options", optionLabel: "optionLabel", placeholder: "placeholder", styleClass: "styleClass", invalid: "invalid", invalidStyleClass: "invalidStyleClass", valid: "valid", validStyleClass: "validStyleClass", multiple: "multiple", size: "size", isClear: "isClear", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsSelectComponent, isStandalone: true, selector: "ys-select", inputs: { id: "id", options: "options", optionLabel: "optionLabel", placeholder: "placeholder", styleClass: "styleClass", invalid: "invalid", invalidStyleClass: "invalidStyleClass", valid: "valid", validStyleClass: "validStyleClass", multiple: "multiple", size: "size", isClear: "isClear", disabled: "disabled" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsSelectComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"input-group ys-select\">\r\n\r\n    <select *ngIf=\"!multiple\" [id]=\"id\"\r\n        class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\r\n        aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\r\n        <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\r\n        </option>\r\n        <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n            {{isObject(item) ? item[optionLabel] : item}}\r\n        </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"multiple\" [id]=\"id\"\r\n        class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\r\n        aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\"\r\n        [multiple]=\"multiple\" [size]=\"size\">\r\n        <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"null\"> {{placeholder}}\r\n        </option>\r\n        <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n            {{isObject(item) ? item[optionLabel] : item}}\r\n        </option>\r\n    </select>\r\n\r\n    <button *ngIf=\"isClear\" class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\"\r\n        (click)=\"clearValue()\" [disabled]=\"disabled\">\r\n        <span class=\"fa fa-times\"></span>\r\n    </button>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], ngImport: i0, template: "<div class=\"input-group ys-select\">\n\n  @if (!multiple) {\n    <select [id]=\"id\"\n      class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\n      aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\n      @if (placeholder) {\n        <option selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\n        </option>\n      }\n      @for (item of options; track item; let i = $index) {\n        <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\n          {{isObject(item) ? item[optionLabel] : item}}\n        </option>\n      }\n    </select>\n  }\n\n  @if (multiple) {\n    <select [id]=\"id\"\n      class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\n      aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\"\n      [multiple]=\"multiple\" [size]=\"size\">\n      @if (placeholder) {\n        <option selected disabled [ngValue]=\"null\"> {{placeholder}}\n        </option>\n      }\n      @for (item of options; track item; let i = $index) {\n        <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\n          {{isObject(item) ? item[optionLabel] : item}}\n        </option>\n      }\n    </select>\n  }\n\n  @if (isClear) {\n    <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\"\n      (click)=\"clearValue()\" [disabled]=\"disabled\">\n      <span class=\"fa fa-times\"></span>\n    </button>\n  }\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-select', imports: [NgIf, NgFor, FormsModule], providers: [
+            args: [{ selector: 'ys-select', imports: [FormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => YsSelectComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"input-group ys-select\">\r\n\r\n    <select *ngIf=\"!multiple\" [id]=\"id\"\r\n        class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\r\n        aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\r\n        <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\r\n        </option>\r\n        <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n            {{isObject(item) ? item[optionLabel] : item}}\r\n        </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"multiple\" [id]=\"id\"\r\n        class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\r\n        aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\"\r\n        [multiple]=\"multiple\" [size]=\"size\">\r\n        <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"null\"> {{placeholder}}\r\n        </option>\r\n        <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n            {{isObject(item) ? item[optionLabel] : item}}\r\n        </option>\r\n    </select>\r\n\r\n    <button *ngIf=\"isClear\" class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\"\r\n        (click)=\"clearValue()\" [disabled]=\"disabled\">\r\n        <span class=\"fa fa-times\"></span>\r\n    </button>\r\n</div>" }]
+                    ], template: "<div class=\"input-group ys-select\">\n\n  @if (!multiple) {\n    <select [id]=\"id\"\n      class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\n      aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\n      @if (placeholder) {\n        <option selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\n        </option>\n      }\n      @for (item of options; track item; let i = $index) {\n        <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\n          {{isObject(item) ? item[optionLabel] : item}}\n        </option>\n      }\n    </select>\n  }\n\n  @if (multiple) {\n    <select [id]=\"id\"\n      class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\n      aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\"\n      [multiple]=\"multiple\" [size]=\"size\">\n      @if (placeholder) {\n        <option selected disabled [ngValue]=\"null\"> {{placeholder}}\n        </option>\n      }\n      @for (item of options; track item; let i = $index) {\n        <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\n          {{isObject(item) ? item[optionLabel] : item}}\n        </option>\n      }\n    </select>\n  }\n\n  @if (isClear) {\n    <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\"\n      (click)=\"clearValue()\" [disabled]=\"disabled\">\n      <span class=\"fa fa-times\"></span>\n    </button>\n  }\n</div>" }]
         }], propDecorators: { id: [{
                 type: Input
             }], options: [{

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

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-select.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.html","../../../../projects/yoozsoft/yoozsoft-ng/select/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/yoozsoft-yoozsoft-ng-select.ts"],"sourcesContent":["import { NgFor, NgIf } from '@angular/common';\r\nimport { Component, forwardRef, Input } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'ys-select',\r\n  imports: [NgIf, NgFor, FormsModule],\r\n  templateUrl: './ys-select.component.html',\r\n  styleUrl: './ys-select.component.scss',\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => YsSelectComponent),\r\n      multi: true\r\n    }\r\n  ]\r\n})\r\nexport class YsSelectComponent implements ControlValueAccessor {\r\n\r\n  /**ُSelect element id */\r\n  @Input() id: string = 'ys-select';\r\n  @Input() options: any[] = [];\r\n  /**Name of field to display in option title */\r\n  @Input() optionLabel: string = 'label';\r\n  @Input() placeholder?: string;\r\n  @Input() styleClass?: string;\r\n  @Input() invalid?: boolean = false;\r\n  @Input() invalidStyleClass?: string = 'is-invalid';\r\n  @Input() valid?: boolean = false;\r\n  @Input() validStyleClass?: string = 'is-valid';\r\n  /**Support multiple attribute */\r\n  @Input() multiple?: boolean = false;\r\n  /**Size of multiple attribute */\r\n  @Input() size?: number;\r\n  /**Display clear button */\r\n  @Input() isClear?: boolean = false;\r\n\r\n  @Input() disabled: boolean = false;\r\n  onChange: any = () => { }\r\n  onTouched: any = () => { }\r\n\r\n  value?: any;\r\n\r\n  writeValue(obj: any): void {\r\n    if (!this.multiple && this.placeholder && !obj) {\r\n      this.value = null;\r\n      this.onChange(this.value);\r\n      return;\r\n    }\r\n\r\n    if (this.multiple && !obj) {\r\n      this.multiple ? this.value = [] : this.value = null;\r\n      this.onChange(this.value);\r\n      return;\r\n    }\r\n\r\n    if (!this.multiple && obj && Array.isArray(obj)) {\r\n      if (obj.length) {\r\n        this.value = obj[0];\r\n      }\r\n      else {\r\n        this.value = null;\r\n      }\r\n      this.onChange(this.value);\r\n      return;\r\n    }\r\n\r\n    this.value = obj;\r\n  }\r\n  registerOnChange(fn: any): void {\r\n    this.onChange = fn;\r\n  }\r\n  registerOnTouched(fn: any): void {\r\n    this.onTouched = fn;\r\n  }\r\n  setDisabledState?(isDisabled: boolean): void {\r\n    this.disabled = isDisabled;\r\n  }\r\n\r\n  onModelChange(option: any) {\r\n    this.onChange(option);\r\n    this.onTouched(option);\r\n  }\r\n\r\n  clearValue() {\r\n    this.multiple ? this.value = [] : this.value = null;\r\n    this.onModelChange(this.value);\r\n  }\r\n\r\n  isObject(item: any) {\r\n    return typeof item == 'object';\r\n  }\r\n\r\n}\r\n","<div class=\"input-group ys-select\">\r\n\r\n    <select *ngIf=\"!multiple\" [id]=\"id\"\r\n        class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\r\n        aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\r\n        <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\r\n        </option>\r\n        <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n            {{isObject(item) ? item[optionLabel] : item}}\r\n        </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"multiple\" [id]=\"id\"\r\n        class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\r\n        aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\"\r\n        [multiple]=\"multiple\" [size]=\"size\">\r\n        <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"null\"> {{placeholder}}\r\n        </option>\r\n        <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n            {{isObject(item) ? item[optionLabel] : item}}\r\n        </option>\r\n    </select>\r\n\r\n    <button *ngIf=\"isClear\" class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\"\r\n        (click)=\"clearValue()\" [disabled]=\"disabled\">\r\n        <span class=\"fa fa-times\"></span>\r\n    </button>\r\n</div>","/*\r\n * Public API Surface of ys-select\r\n */\r\n\r\nexport * from './src/ys-select/ys-select.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-select.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.html","../../../../projects/yoozsoft/yoozsoft-ng/select/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/yoozsoft-yoozsoft-ng-select.ts"],"sourcesContent":["\r\nimport { Component, forwardRef, Input } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'ys-select',\r\n  imports: [FormsModule],\r\n  templateUrl: './ys-select.component.html',\r\n  styleUrl: './ys-select.component.scss',\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => YsSelectComponent),\r\n      multi: true\r\n    }\r\n  ]\r\n})\r\nexport class YsSelectComponent implements ControlValueAccessor {\r\n\r\n  /**ُSelect element id */\r\n  @Input() id: string = 'ys-select';\r\n  @Input() options: any[] = [];\r\n  /**Name of field to display in option title */\r\n  @Input() optionLabel: string = 'label';\r\n  @Input() placeholder?: string;\r\n  @Input() styleClass?: string;\r\n  @Input() invalid?: boolean = false;\r\n  @Input() invalidStyleClass?: string = 'is-invalid';\r\n  @Input() valid?: boolean = false;\r\n  @Input() validStyleClass?: string = 'is-valid';\r\n  /**Support multiple attribute */\r\n  @Input() multiple?: boolean = false;\r\n  /**Size of multiple attribute */\r\n  @Input() size?: number;\r\n  /**Display clear button */\r\n  @Input() isClear?: boolean = false;\r\n\r\n  @Input() disabled: boolean = false;\r\n  onChange: any = () => { }\r\n  onTouched: any = () => { }\r\n\r\n  value?: any;\r\n\r\n  writeValue(obj: any): void {\r\n    if (!this.multiple && this.placeholder && !obj) {\r\n      this.value = null;\r\n      this.onChange(this.value);\r\n      return;\r\n    }\r\n\r\n    if (this.multiple && !obj) {\r\n      this.multiple ? this.value = [] : this.value = null;\r\n      this.onChange(this.value);\r\n      return;\r\n    }\r\n\r\n    if (!this.multiple && obj && Array.isArray(obj)) {\r\n      if (obj.length) {\r\n        this.value = obj[0];\r\n      }\r\n      else {\r\n        this.value = null;\r\n      }\r\n      this.onChange(this.value);\r\n      return;\r\n    }\r\n\r\n    this.value = obj;\r\n  }\r\n  registerOnChange(fn: any): void {\r\n    this.onChange = fn;\r\n  }\r\n  registerOnTouched(fn: any): void {\r\n    this.onTouched = fn;\r\n  }\r\n  setDisabledState?(isDisabled: boolean): void {\r\n    this.disabled = isDisabled;\r\n  }\r\n\r\n  onModelChange(option: any) {\r\n    this.onChange(option);\r\n    this.onTouched(option);\r\n  }\r\n\r\n  clearValue() {\r\n    this.multiple ? this.value = [] : this.value = null;\r\n    this.onModelChange(this.value);\r\n  }\r\n\r\n  isObject(item: any) {\r\n    return typeof item == 'object';\r\n  }\r\n\r\n}\r\n","<div class=\"input-group ys-select\">\n\n  @if (!multiple) {\n    <select [id]=\"id\"\n      class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\n      aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\n      @if (placeholder) {\n        <option selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\n        </option>\n      }\n      @for (item of options; track item; let i = $index) {\n        <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\n          {{isObject(item) ? item[optionLabel] : item}}\n        </option>\n      }\n    </select>\n  }\n\n  @if (multiple) {\n    <select [id]=\"id\"\n      class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\n      aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\"\n      [multiple]=\"multiple\" [size]=\"size\">\n      @if (placeholder) {\n        <option selected disabled [ngValue]=\"null\"> {{placeholder}}\n        </option>\n      }\n      @for (item of options; track item; let i = $index) {\n        <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\n          {{isObject(item) ? item[optionLabel] : item}}\n        </option>\n      }\n    </select>\n  }\n\n  @if (isClear) {\n    <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\"\n      (click)=\"clearValue()\" [disabled]=\"disabled\">\n      <span class=\"fa fa-times\"></span>\n    </button>\n  }\n</div>","/*\r\n * Public API Surface of ys-select\r\n */\r\n\r\nexport * from './src/ys-select/ys-select.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input } from '@angular/core';
+import { Injectable, Input, Component } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { NgIf, NgFor, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import * as i1 from '@angular/router';
 import { NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
 
@@ -43,10 +43,10 @@ class SidebarService {
     get sidebarState() {
         return this._isSidebarToggled$.getValue();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SidebarService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SidebarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SidebarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SidebarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -103,12 +103,12 @@ class YsSidebarComponent {
         //   item.isOpen = true;
         // }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsSidebarComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsSidebarComponent, isStandalone: true, selector: "ys-sidebar", inputs: { items: "items", profile: "profile", styleClass: "styleClass", itemsStyleClass: "itemsStyleClass" }, ngImport: i0, template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"profile\">\r\n        <div *ngIf=\"profile.image || fullName || profile.role\"\r\n            class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n            <div *ngIf=\"profile.image\" class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n                <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n                    <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.src}}\">\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"fullName || profile.role\" class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n                <strong *ngIf=\"fullName\" class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n                <small *ngIf=\"profile.role\" class=\"text-uppercase role\">{{profile.role}}</small>\r\n            </div>\r\n        </div>\r\n\r\n        <hr />\r\n    </div>\r\n\r\n    <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n        <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n            <ng-container *ngFor=\"let item of items\">\r\n\r\n                <hr *ngIf=\"item.isDivider\" class=\"sidebar-divider\" />\r\n\r\n                <ng-container *ngIf=\"!item.isDivider\">\r\n                    <li *ngIf=\"!isDropdown(item)\" class=\"nav-item d-block\">\r\n                        <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\r\n                            [routerLinkActive]=\"['active']\" role=\"button\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\" class=\"badge bg-info\"\r\n                                [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n                    </li>\r\n                    <li *ngIf=\"isDropdown(item)\" class=\"nav-item d-block dropend\">\r\n                        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n                            [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\r\n                            role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\" class=\"badge bg-info me-1\"\r\n                                [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n\r\n                        <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n                            [ngClass]=\"{'show': item.isOpen}\">\r\n                            <ng-container *ngFor=\"let subItem of item.items;\">\r\n\r\n                                <hr *ngIf=\"subItem.isDivider\" class=\"sidebar-divider my-1\" />\r\n\r\n                                <li *ngIf=\"!subItem.isDivider\" class=\"nav-item d-block\">\r\n                                    <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\r\n                                        role=\"button\" [routerLinkActive]=\"['active']\"\r\n                                        (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n                                        (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n                                        <i *ngIf=\"subItem.iconClass\" [ngClass]=\"subItem.iconClass\"></i>\r\n                                        <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n                                        <span *ngIf=\"subItem.badgeLabel\" class=\"badge bg-info\"\r\n                                            [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n                                    </a>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </div>\r\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:60px;height:60px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"], dependencies: [{ kind: "directive", type: 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsSidebarComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsSidebarComponent, isStandalone: true, selector: "ys-sidebar", inputs: { items: "items", profile: "profile", styleClass: "styleClass", itemsStyleClass: "itemsStyleClass" }, ngImport: i0, template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\n  @if (profile) {\n    <div>\n      @if (profile.image || fullName || profile.role) {\n        <div\n          class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\n          @if (profile.image) {\n            <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\n              <div class=\"user-image rounded-circle m-auto transition-ease\">\n                <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\n              </div>\n            </div>\n          }\n          @if (fullName || profile.role) {\n            <div class=\"profile-details d-flex flex-column text-center transition-ease\">\n              @if (fullName) {\n                <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\n              }\n              @if (profile.role) {\n                <small class=\"text-uppercase role\">{{profile.role}}</small>\n              }\n            </div>\n          }\n        </div>\n      }\n      <hr />\n    </div>\n  }\n\n  <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\n    <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\n      @for (item of items; track item) {\n        @if (item.isDivider) {\n          <hr class=\"sidebar-divider\" />\n        }\n        @if (!item.isDivider) {\n          @if (!isDropdown(item)) {\n            <li class=\"nav-item d-block\">\n              <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\n                [routerLinkActive]=\"['active']\" role=\"button\"\n                (click)=\"openItem(item); item.onClick && item.onClick($event)\">\n                @if (item.iconClass) {\n                  <i [ngClass]=\"item.iconClass\"></i>\n                }\n                <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n                @if (item.badgeLabel) {\n                  <span class=\"badge bg-info\"\n                  [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n                }\n              </a>\n            </li>\n          }\n          @if (isDropdown(item)) {\n            <li class=\"nav-item d-block dropend\">\n              <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\n                [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\n                role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\n                (click)=\"openItem(item); item.onClick && item.onClick($event)\">\n                @if (item.iconClass) {\n                  <i [ngClass]=\"item.iconClass\"></i>\n                }\n                <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n                @if (item.badgeLabel) {\n                  <span class=\"badge bg-info me-1\"\n                  [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n                }\n              </a>\n              <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\n                [ngClass]=\"{'show': item.isOpen}\">\n                @for (subItem of item.items; track subItem) {\n                  @if (subItem.isDivider) {\n                    <hr class=\"sidebar-divider my-1\" />\n                  }\n                  @if (!subItem.isDivider) {\n                    <li class=\"nav-item d-block\">\n                      <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\n                        role=\"button\" [routerLinkActive]=\"['active']\"\n                        (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\n                        (click)=\"subItem.onClick && subItem.onClick($event)\">\n                        @if (subItem.iconClass) {\n                          <i [ngClass]=\"subItem.iconClass\"></i>\n                        }\n                        <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\n                        @if (subItem.badgeLabel) {\n                          <span class=\"badge bg-info\"\n                          [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\n                        }\n                      </a>\n                    </li>\n                  }\n                }\n              </ul>\n            </li>\n          }\n        }\n      }\n    </ul>\n  </div>\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-sidebar', imports: [NgIf, NgFor, NgClass, RouterLink, RouterLinkActive], template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"profile\">\r\n        <div *ngIf=\"profile.image || fullName || profile.role\"\r\n            class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n            <div *ngIf=\"profile.image\" class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n                <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n                    <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.src}}\">\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"fullName || profile.role\" class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n                <strong *ngIf=\"fullName\" class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n                <small *ngIf=\"profile.role\" class=\"text-uppercase role\">{{profile.role}}</small>\r\n            </div>\r\n        </div>\r\n\r\n        <hr />\r\n    </div>\r\n\r\n    <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n        <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n            <ng-container *ngFor=\"let item of items\">\r\n\r\n                <hr *ngIf=\"item.isDivider\" class=\"sidebar-divider\" />\r\n\r\n                <ng-container *ngIf=\"!item.isDivider\">\r\n                    <li *ngIf=\"!isDropdown(item)\" class=\"nav-item d-block\">\r\n                        <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\r\n                            [routerLinkActive]=\"['active']\" role=\"button\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\" class=\"badge bg-info\"\r\n                                [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n                    </li>\r\n                    <li *ngIf=\"isDropdown(item)\" class=\"nav-item d-block dropend\">\r\n                        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n                            [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\r\n                            role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\" class=\"badge bg-info me-1\"\r\n                                [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n\r\n                        <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n                            [ngClass]=\"{'show': item.isOpen}\">\r\n                            <ng-container *ngFor=\"let subItem of item.items;\">\r\n\r\n                                <hr *ngIf=\"subItem.isDivider\" class=\"sidebar-divider my-1\" />\r\n\r\n                                <li *ngIf=\"!subItem.isDivider\" class=\"nav-item d-block\">\r\n                                    <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\r\n                                        role=\"button\" [routerLinkActive]=\"['active']\"\r\n                                        (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n                                        (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n                                        <i *ngIf=\"subItem.iconClass\" [ngClass]=\"subItem.iconClass\"></i>\r\n                                        <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n                                        <span *ngIf=\"subItem.badgeLabel\" class=\"badge bg-info\"\r\n                                            [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n                                    </a>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </div>\r\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:60px;height:60px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"] }]
+            args: [{ selector: 'ys-sidebar', imports: [NgClass, RouterLink, RouterLinkActive], template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\n  @if (profile) {\n    <div>\n      @if (profile.image || fullName || profile.role) {\n        <div\n          class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\n          @if (profile.image) {\n            <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\n              <div class=\"user-image rounded-circle m-auto transition-ease\">\n                <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\n              </div>\n            </div>\n          }\n          @if (fullName || profile.role) {\n            <div class=\"profile-details d-flex flex-column text-center transition-ease\">\n              @if (fullName) {\n                <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\n              }\n              @if (profile.role) {\n                <small class=\"text-uppercase role\">{{profile.role}}</small>\n              }\n            </div>\n          }\n        </div>\n      }\n      <hr />\n    </div>\n  }\n\n  <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\n    <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\n      @for (item of items; track item) {\n        @if (item.isDivider) {\n          <hr class=\"sidebar-divider\" />\n        }\n        @if (!item.isDivider) {\n          @if (!isDropdown(item)) {\n            <li class=\"nav-item d-block\">\n              <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\n                [routerLinkActive]=\"['active']\" role=\"button\"\n                (click)=\"openItem(item); item.onClick && item.onClick($event)\">\n                @if (item.iconClass) {\n                  <i [ngClass]=\"item.iconClass\"></i>\n                }\n                <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n                @if (item.badgeLabel) {\n                  <span class=\"badge bg-info\"\n                  [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n                }\n              </a>\n            </li>\n          }\n          @if (isDropdown(item)) {\n            <li class=\"nav-item d-block dropend\">\n              <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\n                [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\n                role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\n                (click)=\"openItem(item); item.onClick && item.onClick($event)\">\n                @if (item.iconClass) {\n                  <i [ngClass]=\"item.iconClass\"></i>\n                }\n                <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n                @if (item.badgeLabel) {\n                  <span class=\"badge bg-info me-1\"\n                  [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n                }\n              </a>\n              <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\n                [ngClass]=\"{'show': item.isOpen}\">\n                @for (subItem of item.items; track subItem) {\n                  @if (subItem.isDivider) {\n                    <hr class=\"sidebar-divider my-1\" />\n                  }\n                  @if (!subItem.isDivider) {\n                    <li class=\"nav-item d-block\">\n                      <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\n                        role=\"button\" [routerLinkActive]=\"['active']\"\n                        (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\n                        (click)=\"subItem.onClick && subItem.onClick($event)\">\n                        @if (subItem.iconClass) {\n                          <i [ngClass]=\"subItem.iconClass\"></i>\n                        }\n                        <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\n                        @if (subItem.badgeLabel) {\n                          <span class=\"badge bg-info\"\n                          [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\n                        }\n                      </a>\n                    </li>\n                  }\n                }\n              </ul>\n            </li>\n          }\n        }\n      }\n    </ul>\n  </div>\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { items: [{
                 type: Input
             }], profile: [{

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

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-sidebar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/services/sidebar.service.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.html","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/yoozsoft-yoozsoft-ng-sidebar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject } from 'rxjs';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class SidebarService {\r\n\r\n  constructor() { }\r\n\r\n  private _isSidebarToggled$ = new BehaviorSubject<boolean>(true);\r\n\r\n  private _isSidebar$ = new BehaviorSubject<boolean>(false);\r\n\r\n  /**\r\n   * Sidebar toggled state. Default value is true.\r\n   */\r\n  get isSidebarToggled$() { return this._isSidebarToggled$.asObservable(); }\r\n\r\n  /**\r\n   * Sidebar display state. Default value is false.\r\n   */\r\n  get isSidebar$() { return this._isSidebar$.asObservable(); }\r\n\r\n  /**\r\n   * Change sidebar toggle state.\r\n   */\r\n  toggleSidebar() {\r\n    this._isSidebarToggled$.next(!this._isSidebarToggled$.value);\r\n  }\r\n\r\n  /**\r\n   * Set sidebar toggle state.\r\n   * @param isToggled \r\n   */\r\n  setIsSidebarToggled(isToggled: boolean) {\r\n    this._isSidebarToggled$.next(isToggled);\r\n  }\r\n\r\n  /**\r\n   * Set sidebar toggle state.\r\n   * @param isSidebar \r\n   */\r\n  setIsSidebar(isSidebar: boolean) {\r\n    this._isSidebar$.next(isSidebar);\r\n  }\r\n\r\n  /**\r\n   * Return sidebar toggle state.\r\n   */\r\n  get sidebarState() {\r\n    return this._isSidebarToggled$.getValue()\r\n  }\r\n\r\n}\r\n","import { NgClass, NgFor, NgIf } from '@angular/common';\r\nimport { Component, Input, OnDestroy } from '@angular/core';\r\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { Subscription } from 'rxjs';\r\nimport { SidebarItem, SidebarItemActive, UserProfile } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-sidebar',\r\n  imports: [NgIf, NgFor, NgClass, RouterLink, RouterLinkActive],\r\n  templateUrl: './ys-sidebar.component.html',\r\n  styleUrl: './ys-sidebar.component.scss'\r\n})\r\nexport class YsSidebarComponent implements OnDestroy {\r\n\r\n  private subscription: Subscription;\r\n  private currentItem?: SidebarItemActive;\r\n  private currentItemState: boolean[] = [];\r\n\r\n  private _items: SidebarItemActive[] = [];\r\n  @Input()\r\n  get items(): SidebarItemActive[] { return this._items };\r\n  set items(value: SidebarItem[]) { this._items = value; }\r\n\r\n  @Input() profile: UserProfile | null = null;\r\n  @Input() styleClass?: string;\r\n  @Input() itemsStyleClass?: string;\r\n\r\n  constructor(private router: Router) {\r\n    this.subscription = router.events.subscribe(e => {\r\n      if (e instanceof NavigationEnd) {\r\n        this.currentItem = undefined;\r\n        this.currentItemState = [];\r\n      }\r\n    })\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.subscription.unsubscribe();\r\n  }\r\n\r\n  get fullName(): string { return `${this.profile?.firstName} ${this.profile?.lastName}`; }\r\n\r\n  openItem(item: SidebarItemActive): void {\r\n    if (item.isOpen) {\r\n      item.isOpen = !item.isOpen;\r\n      return;\r\n    }\r\n\r\n    this.items.forEach(x => x.isOpen = false);\r\n    item.isOpen = !item.isOpen;\r\n  }\r\n\r\n  isDropdown(item: SidebarItem): boolean {\r\n    return (item.items?.length ?? 0) > 0;\r\n  }\r\n\r\n  onRouterLinkActive(isActive: boolean, item: SidebarItemActive) {\r\n    this.currentItemState.push(isActive);\r\n\r\n    if (!isActive && this.currentItem == item) {\r\n      if (this.currentItemState.length == 2 && this.currentItemState[0] && !this.currentItemState[1]) {\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.currentItem = item;\r\n    item.isActive = isActive;\r\n    // if (isActive) {\r\n    //   this.items.forEach(x => x.isOpen = false);\r\n    //   item.isOpen = true;\r\n    // }\r\n  }\r\n\r\n}\r\n","<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"profile\">\r\n        <div *ngIf=\"profile.image || fullName || profile.role\"\r\n            class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n            <div *ngIf=\"profile.image\" class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n                <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n                    <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.src}}\">\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"fullName || profile.role\" class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n                <strong *ngIf=\"fullName\" class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n                <small *ngIf=\"profile.role\" class=\"text-uppercase role\">{{profile.role}}</small>\r\n            </div>\r\n        </div>\r\n\r\n        <hr />\r\n    </div>\r\n\r\n    <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n        <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n            <ng-container *ngFor=\"let item of items\">\r\n\r\n                <hr *ngIf=\"item.isDivider\" class=\"sidebar-divider\" />\r\n\r\n                <ng-container *ngIf=\"!item.isDivider\">\r\n                    <li *ngIf=\"!isDropdown(item)\" class=\"nav-item d-block\">\r\n                        <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\r\n                            [routerLinkActive]=\"['active']\" role=\"button\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\" class=\"badge bg-info\"\r\n                                [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n                    </li>\r\n                    <li *ngIf=\"isDropdown(item)\" class=\"nav-item d-block dropend\">\r\n                        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n                            [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\r\n                            role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\" class=\"badge bg-info me-1\"\r\n                                [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n\r\n                        <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n                            [ngClass]=\"{'show': item.isOpen}\">\r\n                            <ng-container *ngFor=\"let subItem of item.items;\">\r\n\r\n                                <hr *ngIf=\"subItem.isDivider\" class=\"sidebar-divider my-1\" />\r\n\r\n                                <li *ngIf=\"!subItem.isDivider\" class=\"nav-item d-block\">\r\n                                    <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\r\n                                        role=\"button\" [routerLinkActive]=\"['active']\"\r\n                                        (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n                                        (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n                                        <i *ngIf=\"subItem.iconClass\" [ngClass]=\"subItem.iconClass\"></i>\r\n                                        <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n                                        <span *ngIf=\"subItem.badgeLabel\" class=\"badge bg-info\"\r\n                                            [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n                                    </a>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </div>\r\n</aside>","/*\r\n * Public API Surface of ys-sidebar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/services';\r\nexport * from './src/ys-sidebar/ys-sidebar.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-sidebar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/services/sidebar.service.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.html","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/yoozsoft-yoozsoft-ng-sidebar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject } from 'rxjs';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class SidebarService {\r\n\r\n  constructor() { }\r\n\r\n  private _isSidebarToggled$ = new BehaviorSubject<boolean>(true);\r\n\r\n  private _isSidebar$ = new BehaviorSubject<boolean>(false);\r\n\r\n  /**\r\n   * Sidebar toggled state. Default value is true.\r\n   */\r\n  get isSidebarToggled$() { return this._isSidebarToggled$.asObservable(); }\r\n\r\n  /**\r\n   * Sidebar display state. Default value is false.\r\n   */\r\n  get isSidebar$() { return this._isSidebar$.asObservable(); }\r\n\r\n  /**\r\n   * Change sidebar toggle state.\r\n   */\r\n  toggleSidebar() {\r\n    this._isSidebarToggled$.next(!this._isSidebarToggled$.value);\r\n  }\r\n\r\n  /**\r\n   * Set sidebar toggle state.\r\n   * @param isToggled \r\n   */\r\n  setIsSidebarToggled(isToggled: boolean) {\r\n    this._isSidebarToggled$.next(isToggled);\r\n  }\r\n\r\n  /**\r\n   * Set sidebar toggle state.\r\n   * @param isSidebar \r\n   */\r\n  setIsSidebar(isSidebar: boolean) {\r\n    this._isSidebar$.next(isSidebar);\r\n  }\r\n\r\n  /**\r\n   * Return sidebar toggle state.\r\n   */\r\n  get sidebarState() {\r\n    return this._isSidebarToggled$.getValue()\r\n  }\r\n\r\n}\r\n","import { NgClass } from '@angular/common';\r\nimport { Component, Input, OnDestroy } from '@angular/core';\r\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { Subscription } from 'rxjs';\r\nimport { SidebarItem, SidebarItemActive, UserProfile } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-sidebar',\r\n  imports: [NgClass, RouterLink, RouterLinkActive],\r\n  templateUrl: './ys-sidebar.component.html',\r\n  styleUrl: './ys-sidebar.component.scss'\r\n})\r\nexport class YsSidebarComponent implements OnDestroy {\r\n\r\n  private subscription: Subscription;\r\n  private currentItem?: SidebarItemActive;\r\n  private currentItemState: boolean[] = [];\r\n\r\n  private _items: SidebarItemActive[] = [];\r\n  @Input()\r\n  get items(): SidebarItemActive[] { return this._items };\r\n  set items(value: SidebarItem[]) { this._items = value; }\r\n\r\n  @Input() profile: UserProfile | null = null;\r\n  @Input() styleClass?: string;\r\n  @Input() itemsStyleClass?: string;\r\n\r\n  constructor(private router: Router) {\r\n    this.subscription = router.events.subscribe(e => {\r\n      if (e instanceof NavigationEnd) {\r\n        this.currentItem = undefined;\r\n        this.currentItemState = [];\r\n      }\r\n    })\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.subscription.unsubscribe();\r\n  }\r\n\r\n  get fullName(): string { return `${this.profile?.firstName} ${this.profile?.lastName}`; }\r\n\r\n  openItem(item: SidebarItemActive): void {\r\n    if (item.isOpen) {\r\n      item.isOpen = !item.isOpen;\r\n      return;\r\n    }\r\n\r\n    this.items.forEach(x => x.isOpen = false);\r\n    item.isOpen = !item.isOpen;\r\n  }\r\n\r\n  isDropdown(item: SidebarItem): boolean {\r\n    return (item.items?.length ?? 0) > 0;\r\n  }\r\n\r\n  onRouterLinkActive(isActive: boolean, item: SidebarItemActive) {\r\n    this.currentItemState.push(isActive);\r\n\r\n    if (!isActive && this.currentItem == item) {\r\n      if (this.currentItemState.length == 2 && this.currentItemState[0] && !this.currentItemState[1]) {\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.currentItem = item;\r\n    item.isActive = isActive;\r\n    // if (isActive) {\r\n    //   this.items.forEach(x => x.isOpen = false);\r\n    //   item.isOpen = true;\r\n    // }\r\n  }\r\n\r\n}\r\n","<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\n  @if (profile) {\n    <div>\n      @if (profile.image || fullName || profile.role) {\n        <div\n          class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\n          @if (profile.image) {\n            <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\n              <div class=\"user-image rounded-circle m-auto transition-ease\">\n                <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\n              </div>\n            </div>\n          }\n          @if (fullName || profile.role) {\n            <div class=\"profile-details d-flex flex-column text-center transition-ease\">\n              @if (fullName) {\n                <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\n              }\n              @if (profile.role) {\n                <small class=\"text-uppercase role\">{{profile.role}}</small>\n              }\n            </div>\n          }\n        </div>\n      }\n      <hr />\n    </div>\n  }\n\n  <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\n    <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\n      @for (item of items; track item) {\n        @if (item.isDivider) {\n          <hr class=\"sidebar-divider\" />\n        }\n        @if (!item.isDivider) {\n          @if (!isDropdown(item)) {\n            <li class=\"nav-item d-block\">\n              <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\n                [routerLinkActive]=\"['active']\" role=\"button\"\n                (click)=\"openItem(item); item.onClick && item.onClick($event)\">\n                @if (item.iconClass) {\n                  <i [ngClass]=\"item.iconClass\"></i>\n                }\n                <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n                @if (item.badgeLabel) {\n                  <span class=\"badge bg-info\"\n                  [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n                }\n              </a>\n            </li>\n          }\n          @if (isDropdown(item)) {\n            <li class=\"nav-item d-block dropend\">\n              <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\n                [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\n                role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\n                (click)=\"openItem(item); item.onClick && item.onClick($event)\">\n                @if (item.iconClass) {\n                  <i [ngClass]=\"item.iconClass\"></i>\n                }\n                <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n                @if (item.badgeLabel) {\n                  <span class=\"badge bg-info me-1\"\n                  [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n                }\n              </a>\n              <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\n                [ngClass]=\"{'show': item.isOpen}\">\n                @for (subItem of item.items; track subItem) {\n                  @if (subItem.isDivider) {\n                    <hr class=\"sidebar-divider my-1\" />\n                  }\n                  @if (!subItem.isDivider) {\n                    <li class=\"nav-item d-block\">\n                      <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\n                        role=\"button\" [routerLinkActive]=\"['active']\"\n                        (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\n                        (click)=\"subItem.onClick && subItem.onClick($event)\">\n                        @if (subItem.iconClass) {\n                          <i [ngClass]=\"subItem.iconClass\"></i>\n                        }\n                        <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\n                        @if (subItem.badgeLabel) {\n                          <span class=\"badge bg-info\"\n                          [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\n                        }\n                      </a>\n                    </li>\n                  }\n                }\n              </ul>\n            </li>\n          }\n        }\n      }\n    </ul>\n  </div>\n</aside>","/*\r\n * Public API Surface of ys-sidebar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/services';\r\nexport * from './src/ys-sidebar/ys-sidebar.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/yoozsoft-yoozsoft-ng-tiff-viewer.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 YsTiffViewerComponent {
     canvas;
@@ -45,6 +45,8 @@ class YsTiffViewerComponent {
     async convertSource(buffer) {
         this.canvas = document.getElementById("tiffCanvas");
         this.context = this.canvas.getContext("2d");
+        this.IFDs = [];
+        this.currentIFDIndex = 0;
         if (!buffer) {
             this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
             return;
@@ -57,7 +59,6 @@ class YsTiffViewerComponent {
         this.IFDs.forEach((ifd) => {
             UTIF.decodeImage(buffer, ifd);
         });
-        this.currentIFDIndex = 0;
         this.putImage(this.currentIFDIndex);
         this.isDecoding = false;
     }
@@ -114,12 +115,12 @@ class YsTiffViewerComponent {
             reader.readAsArrayBuffer(blob);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsTiffViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsTiffViewerComponent, isStandalone: true, selector: "ys-tiff-viewer", inputs: { buffer: "buffer", currentPageReportTemplate: "currentPageReportTemplate", styleClass: "styleClass", noFileMessage: "noFileMessage", firstIconClass: "firstIconClass", previousIconClass: "previousIconClass", nextIconClass: "nextIconClass", lastIconClass: "lastIconClass" }, ngImport: i0, template: "<div class=\"row\">\r\n    <div class=\"col d-flex justify-content-between align-items-center mt-2\">\r\n        <div>\r\n            <button class=\"btn btn-outline-primary mb-0 me-2\" [ngClass]=\"{'ml-auto': isIFDs}\" type=\"button\"\r\n                (click)=\"first()\" [disabled]=\"isFirstImage\">\r\n                <i [ngClass]=\"firstIconClass\"></i>\r\n            </button>\r\n            <button class=\"btn btn-outline-primary mb-0\" type=\"button\" (click)=\"previous()\" [disabled]=\"isFirstImage\">\r\n                <i [ngClass]=\"previousIconClass\"></i>\r\n            </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"isIFDs\" [innerHtml]=\"currentPageReportTemplate\">\r\n        </span>\r\n\r\n        <div>\r\n            <button class=\"btn btn-outline-primary mb-0 me-2\" type=\"button\" (click)=\"next()\" [disabled]=\"isLastImage\">\r\n                <i [ngClass]=\"nextIconClass\"></i>\r\n            </button>\r\n            <button class=\"btn btn-outline-primary mb-0\" [ngClass]=\"{'mr-auto': isIFDs}\" type=\"button\" (click)=\"last()\"\r\n                [disabled]=\"isLastImage\">\r\n                <i [ngClass]=\"lastIconClass\"></i>\r\n            </button>\r\n        </div>\r\n\r\n\r\n    </div>\r\n</div>\r\n<div class=\"row\">\r\n    <div class=\"col\">\r\n        <div class=\"canvas-container card d-flex justify-content-center align-items-center mt-1 {{styleClass}}\">\r\n            <span *ngIf=\"!isIFDs && noFileMessage\">{{noFileMessage}}</span>\r\n            <canvas #tiffCanvas id=\"tiffCanvas\" class=\"canvas-image img-fluid\" [ngClass]=\"{'d-none': !isIFDs}\"></canvas>\r\n            <div class=\"backdrop position-absolute w-100 h-100 d-flex justify-content-center align-items-center\"\r\n                [ngClass]=\"{'d-none': !isDecoding}\">\r\n\r\n            </div>\r\n            <div class=\"spinner-border text-info position-absolute\" style=\"width: 3rem; height: 3rem;\" role=\"status\"\r\n                [ngClass]=\"{'d-none': !isDecoding}\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".backdrop{background-color:rgba(var(--bs-dark-rgb),.3)}\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: YsTiffViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsTiffViewerComponent, isStandalone: true, selector: "ys-tiff-viewer", inputs: { buffer: "buffer", currentPageReportTemplate: "currentPageReportTemplate", styleClass: "styleClass", noFileMessage: "noFileMessage", firstIconClass: "firstIconClass", previousIconClass: "previousIconClass", nextIconClass: "nextIconClass", lastIconClass: "lastIconClass" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col d-flex justify-content-between align-items-center mt-2\">\n    <div>\n      <button class=\"btn btn-outline-primary mb-0 me-2\" [ngClass]=\"{'ml-auto': isIFDs}\" type=\"button\"\n        (click)=\"first()\" [disabled]=\"isFirstImage\">\n        <i [ngClass]=\"firstIconClass\"></i>\n      </button>\n      <button class=\"btn btn-outline-primary mb-0\" type=\"button\" (click)=\"previous()\" [disabled]=\"isFirstImage\">\n        <i [ngClass]=\"previousIconClass\"></i>\n      </button>\n    </div>\n\n    @if (isIFDs) {\n      <span [innerHtml]=\"currentPageReportTemplate\">\n      </span>\n    }\n\n    <div>\n      <button class=\"btn btn-outline-primary mb-0 me-2\" type=\"button\" (click)=\"next()\" [disabled]=\"isLastImage\">\n        <i [ngClass]=\"nextIconClass\"></i>\n      </button>\n      <button class=\"btn btn-outline-primary mb-0\" [ngClass]=\"{'mr-auto': isIFDs}\" type=\"button\" (click)=\"last()\"\n        [disabled]=\"isLastImage\">\n        <i [ngClass]=\"lastIconClass\"></i>\n      </button>\n    </div>\n\n\n  </div>\n</div>\n<div class=\"row\">\n  <div class=\"col\">\n    <div class=\"canvas-container card d-flex justify-content-center align-items-center mt-1 {{styleClass}}\">\n      @if (!isIFDs && noFileMessage) {\n        <span>{{noFileMessage}}</span>\n      }\n      <canvas #tiffCanvas id=\"tiffCanvas\" class=\"canvas-image img-fluid\" [ngClass]=\"{'d-none': !isIFDs}\"></canvas>\n      <div class=\"backdrop position-absolute w-100 h-100 d-flex justify-content-center align-items-center\"\n        [ngClass]=\"{'d-none': !isDecoding}\">\n\n      </div>\n      <div class=\"spinner-border text-info position-absolute\" style=\"width: 3rem; height: 3rem;\" role=\"status\"\n        [ngClass]=\"{'d-none': !isDecoding}\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".backdrop{background-color:rgba(var(--bs-dark-rgb),.3)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsTiffViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsTiffViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-tiff-viewer', imports: [NgIf, NgClass], template: "<div class=\"row\">\r\n    <div class=\"col d-flex justify-content-between align-items-center mt-2\">\r\n        <div>\r\n            <button class=\"btn btn-outline-primary mb-0 me-2\" [ngClass]=\"{'ml-auto': isIFDs}\" type=\"button\"\r\n                (click)=\"first()\" [disabled]=\"isFirstImage\">\r\n                <i [ngClass]=\"firstIconClass\"></i>\r\n            </button>\r\n            <button class=\"btn btn-outline-primary mb-0\" type=\"button\" (click)=\"previous()\" [disabled]=\"isFirstImage\">\r\n                <i [ngClass]=\"previousIconClass\"></i>\r\n            </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"isIFDs\" [innerHtml]=\"currentPageReportTemplate\">\r\n        </span>\r\n\r\n        <div>\r\n            <button class=\"btn btn-outline-primary mb-0 me-2\" type=\"button\" (click)=\"next()\" [disabled]=\"isLastImage\">\r\n                <i [ngClass]=\"nextIconClass\"></i>\r\n            </button>\r\n            <button class=\"btn btn-outline-primary mb-0\" [ngClass]=\"{'mr-auto': isIFDs}\" type=\"button\" (click)=\"last()\"\r\n                [disabled]=\"isLastImage\">\r\n                <i [ngClass]=\"lastIconClass\"></i>\r\n            </button>\r\n        </div>\r\n\r\n\r\n    </div>\r\n</div>\r\n<div class=\"row\">\r\n    <div class=\"col\">\r\n        <div class=\"canvas-container card d-flex justify-content-center align-items-center mt-1 {{styleClass}}\">\r\n            <span *ngIf=\"!isIFDs && noFileMessage\">{{noFileMessage}}</span>\r\n            <canvas #tiffCanvas id=\"tiffCanvas\" class=\"canvas-image img-fluid\" [ngClass]=\"{'d-none': !isIFDs}\"></canvas>\r\n            <div class=\"backdrop position-absolute w-100 h-100 d-flex justify-content-center align-items-center\"\r\n                [ngClass]=\"{'d-none': !isDecoding}\">\r\n\r\n            </div>\r\n            <div class=\"spinner-border text-info position-absolute\" style=\"width: 3rem; height: 3rem;\" role=\"status\"\r\n                [ngClass]=\"{'d-none': !isDecoding}\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".backdrop{background-color:rgba(var(--bs-dark-rgb),.3)}\n"] }]
+            args: [{ selector: 'ys-tiff-viewer', imports: [NgClass], template: "<div class=\"row\">\n  <div class=\"col d-flex justify-content-between align-items-center mt-2\">\n    <div>\n      <button class=\"btn btn-outline-primary mb-0 me-2\" [ngClass]=\"{'ml-auto': isIFDs}\" type=\"button\"\n        (click)=\"first()\" [disabled]=\"isFirstImage\">\n        <i [ngClass]=\"firstIconClass\"></i>\n      </button>\n      <button class=\"btn btn-outline-primary mb-0\" type=\"button\" (click)=\"previous()\" [disabled]=\"isFirstImage\">\n        <i [ngClass]=\"previousIconClass\"></i>\n      </button>\n    </div>\n\n    @if (isIFDs) {\n      <span [innerHtml]=\"currentPageReportTemplate\">\n      </span>\n    }\n\n    <div>\n      <button class=\"btn btn-outline-primary mb-0 me-2\" type=\"button\" (click)=\"next()\" [disabled]=\"isLastImage\">\n        <i [ngClass]=\"nextIconClass\"></i>\n      </button>\n      <button class=\"btn btn-outline-primary mb-0\" [ngClass]=\"{'mr-auto': isIFDs}\" type=\"button\" (click)=\"last()\"\n        [disabled]=\"isLastImage\">\n        <i [ngClass]=\"lastIconClass\"></i>\n      </button>\n    </div>\n\n\n  </div>\n</div>\n<div class=\"row\">\n  <div class=\"col\">\n    <div class=\"canvas-container card d-flex justify-content-center align-items-center mt-1 {{styleClass}}\">\n      @if (!isIFDs && noFileMessage) {\n        <span>{{noFileMessage}}</span>\n      }\n      <canvas #tiffCanvas id=\"tiffCanvas\" class=\"canvas-image img-fluid\" [ngClass]=\"{'d-none': !isIFDs}\"></canvas>\n      <div class=\"backdrop position-absolute w-100 h-100 d-flex justify-content-center align-items-center\"\n        [ngClass]=\"{'d-none': !isDecoding}\">\n\n      </div>\n      <div class=\"spinner-border text-info position-absolute\" style=\"width: 3rem; height: 3rem;\" role=\"status\"\n        [ngClass]=\"{'d-none': !isDecoding}\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".backdrop{background-color:rgba(var(--bs-dark-rgb),.3)}\n"] }]
         }], propDecorators: { buffer: [{
                 type: Input
             }], currentPageReportTemplate: [{