@yoozsoft/yoozsoft-ng 6.2.0 → 7.1.1

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

@@ -0,0 +1,155 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, output, signal, effect, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class YsRating {
+    /**Current score */
+    score = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "score" }] : /* istanbul ignore next */ []));
+    /**Points cap (default 100) */
+    maxScore = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxScore" }] : /* istanbul ignore next */ []));
+    starsCount = input(5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "starsCount" }] : /* istanbul ignore next */ []));
+    /**Icon size in pixel */
+    size = input(20, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    ratingIconClass = input('fas fa-star', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ratingIconClass" }] : /* istanbul ignore next */ []));
+    /**Icons gap in pixel */
+    gap = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    wrapperSize = computed(() => this.size() + this.gap(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wrapperSize" }] : /* istanbul ignore next */ []));
+    normalizedAriaLabel = computed(() => this.ariaLabel() ??
+        `Rating ${this.normalizedScore()} of ${this.maxScore()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedAriaLabel" }] : /* istanbul ignore next */ []));
+    normalizedScore = computed(() => {
+        return Math.min(Math.max(this.score(), 0), this.maxScore());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedScore" }] : /* istanbul ignore next */ []));
+    normalizedStarsCount = computed(() => Math.max(1, Math.floor(this.starsCount())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedStarsCount" }] : /* istanbul ignore next */ []));
+    rating = computed(() => (this.normalizedScore() / this.maxScore()) * this.normalizedStarsCount(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rating" }] : /* istanbul ignore next */ []));
+    fillPercents = computed(() => {
+        const totalStars = this.normalizedStarsCount();
+        if (this.maxScore() <= 0) {
+            return Array(totalStars).fill(0);
+        }
+        const rating = this.rating();
+        return Array.from({ length: totalStars }, (_, index) => Math.max(0, Math.min(100, (rating - index) * 100)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillPercents" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsRating, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsRating, isStandalone: true, selector: "ys-rating", inputs: { score: { classPropertyName: "score", publicName: "score", isSignal: true, isRequired: false, transformFunction: null }, maxScore: { classPropertyName: "maxScore", publicName: "maxScore", isSignal: true, isRequired: false, transformFunction: null }, starsCount: { classPropertyName: "starsCount", publicName: "starsCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ratingIconClass: { classPropertyName: "ratingIconClass", publicName: "ratingIconClass", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ys-rating\" role=\"img\" [style.gap.px]=\"gap()\" [attr.aria-label]=\"normalizedAriaLabel()\">\n\n    @for (fill of fillPercents(); track $index) {\n\n    <div class=\"rating-wrapper\" [style.width.px]=\"wrapperSize()\" [style.height.px]=\"size()\">\n\n        <i class=\"rating-empty\" [class]=\"ratingIconClass()\" [style.fontSize.px]=\"size()\">\n        </i>\n\n        <div class=\"rating-fill\" [style.width.%]=\"fill\" [style.height.px]=\"size()\">\n\n            <i class=\"rating\" [class]=\"ratingIconClass()\" [style.fontSize.px]=\"size()\">\n            </i>\n\n        </div>\n\n    </div>\n\n    }\n\n</div>", styles: [":host{--ys-rating-empty: var(--bs-gray-300);--ys-rating-filled: var(--bs-yellow)}.ys-rating{display:inline-flex;align-items:center}.rating-wrapper{position:relative;display:inline-block;line-height:0;overflow:visible}.rating-fill{position:absolute;top:0;inset-inline-start:0;overflow:hidden;pointer-events:none}.rating-empty{color:var(--ys-rating-empty)}.rating-fill .rating{color:var(--ys-rating-filled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsRating, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-rating', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ys-rating\" role=\"img\" [style.gap.px]=\"gap()\" [attr.aria-label]=\"normalizedAriaLabel()\">\n\n    @for (fill of fillPercents(); track $index) {\n\n    <div class=\"rating-wrapper\" [style.width.px]=\"wrapperSize()\" [style.height.px]=\"size()\">\n\n        <i class=\"rating-empty\" [class]=\"ratingIconClass()\" [style.fontSize.px]=\"size()\">\n        </i>\n\n        <div class=\"rating-fill\" [style.width.%]=\"fill\" [style.height.px]=\"size()\">\n\n            <i class=\"rating\" [class]=\"ratingIconClass()\" [style.fontSize.px]=\"size()\">\n            </i>\n\n        </div>\n\n    </div>\n\n    }\n\n</div>", styles: [":host{--ys-rating-empty: var(--bs-gray-300);--ys-rating-filled: var(--bs-yellow)}.ys-rating{display:inline-flex;align-items:center}.rating-wrapper{position:relative;display:inline-block;line-height:0;overflow:visible}.rating-fill{position:absolute;top:0;inset-inline-start:0;overflow:hidden;pointer-events:none}.rating-empty{color:var(--ys-rating-empty)}.rating-fill .rating{color:var(--ys-rating-filled)}\n"] }]
+        }], propDecorators: { score: [{ type: i0.Input, args: [{ isSignal: true, alias: "score", required: false }] }], maxScore: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxScore", required: false }] }], starsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "starsCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ratingIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratingIconClass", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class YsRatingInput {
+    maxScore = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxScore" }] : /* istanbul ignore next */ []));
+    starsCount = input(5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "starsCount" }] : /* istanbul ignore next */ []));
+    size = input(20, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    ratingIconClass = input('fas fa-star', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ratingIconClass" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    allowClear = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowClear" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    value = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    hoverValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverValue" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => this.hoverValue() ?? this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    normalizedStarsCount = computed(() => Math.max(1, Math.floor(this.starsCount())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedStarsCount" }] : /* istanbul ignore next */ []));
+    stars = computed(() => Array.from({ length: this.normalizedStarsCount() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stars" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.readonly() || this.disabledState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    _onChange = () => { };
+    _onTouched = () => { };
+    constructor() {
+        effect(() => {
+            if (this.isDisabled()) {
+                this.hoverValue.set(null);
+            }
+        });
+    }
+    writeValue(value) {
+        this.value.set(value ?? 0);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabledState.set(disabled);
+    }
+    hover(index) {
+        if (this.isDisabled())
+            return;
+        const value = ((index + 1) / this.normalizedStarsCount()) * this.maxScore();
+        this.hoverValue.set(value);
+    }
+    leave() {
+        this.hoverValue.set(null);
+    }
+    select(index) {
+        if (this.isDisabled())
+            return;
+        const value = ((index + 1) / this.normalizedStarsCount()) * this.maxScore();
+        if (this.allowClear() && value === this.value()) {
+            this.value.set(0);
+            this._onChange(0);
+            this.valueChange.emit(0);
+            this._onTouched();
+            return;
+        }
+        this.value.set(value);
+        this._onChange(value);
+        this.valueChange.emit(value);
+        this._onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsRatingInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsRatingInput, isStandalone: true, selector: "ys-rating-input", inputs: { maxScore: { classPropertyName: "maxScore", publicName: "maxScore", isSignal: true, isRequired: false, transformFunction: null }, starsCount: { classPropertyName: "starsCount", publicName: "starsCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ratingIconClass: { classPropertyName: "ratingIconClass", publicName: "ratingIconClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => YsRatingInput),
+                multi: true
+            }], ngImport: i0, template: "<div class=\"ys-rating-input\">\n\n    <ys-rating [score]=\"displayValue()\" [maxScore]=\"maxScore()\" [starsCount]=\"starsCount()\" [size]=\"size()\"\n        [ratingIconClass]=\"ratingIconClass()\">\n    </ys-rating>\n\n    <div class=\"rating-overlay\" [class.readonly]=\"readonly()\">\n\n        @for (star of stars(); track $index) {\n\n        <button type=\"button\" class=\"rating-hit\" [disabled]=\"isDisabled()\" (focus)=\"hover($index)\" (blur)=\"leave()\"\n            (mouseenter)=\"hover($index)\" (mouseleave)=\"leave()\" (click)=\"select($index)\">\n        </button>\n\n        }\n\n    </div>\n\n</div>", styles: [".ys-rating-input{position:relative;display:inline-block}.rating-overlay{position:absolute;inset:0;display:flex;pointer-events:none}.rating-hit{flex:1;border:0;padding:0;margin:0;background:transparent;cursor:pointer;pointer-events:auto}.rating-hit:disabled{cursor:not-allowed}.rating-overlay.readonly .rating-hit{cursor:default}\n"], dependencies: [{ kind: "component", type: YsRating, selector: "ys-rating", inputs: ["score", "maxScore", "starsCount", "size", "ratingIconClass", "gap", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsRatingInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-rating-input', imports: [YsRating], providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsRatingInput),
+                            multi: true
+                        }], template: "<div class=\"ys-rating-input\">\n\n    <ys-rating [score]=\"displayValue()\" [maxScore]=\"maxScore()\" [starsCount]=\"starsCount()\" [size]=\"size()\"\n        [ratingIconClass]=\"ratingIconClass()\">\n    </ys-rating>\n\n    <div class=\"rating-overlay\" [class.readonly]=\"readonly()\">\n\n        @for (star of stars(); track $index) {\n\n        <button type=\"button\" class=\"rating-hit\" [disabled]=\"isDisabled()\" (focus)=\"hover($index)\" (blur)=\"leave()\"\n            (mouseenter)=\"hover($index)\" (mouseleave)=\"leave()\" (click)=\"select($index)\">\n        </button>\n\n        }\n\n    </div>\n\n</div>", styles: [".ys-rating-input{position:relative;display:inline-block}.rating-overlay{position:absolute;inset:0;display:flex;pointer-events:none}.rating-hit{flex:1;border:0;padding:0;margin:0;background:transparent;cursor:pointer;pointer-events:auto}.rating-hit:disabled{cursor:not-allowed}.rating-overlay.readonly .rating-hit{cursor:default}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { maxScore: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxScore", required: false }] }], starsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "starsCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ratingIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratingIconClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/*
+ * Public API Surface of ys-rating
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { YsRating, YsRatingInput };
+//# sourceMappingURL=yoozsoft-yoozsoft-ng-rating.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"yoozsoft-yoozsoft-ng-rating.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/rating/src/ys-rating/ys-rating.ts","../../../../projects/yoozsoft/yoozsoft-ng/rating/src/ys-rating/ys-rating.html","../../../../projects/yoozsoft/yoozsoft-ng/rating/src/ys-rating-input/ys-rating-input.ts","../../../../projects/yoozsoft/yoozsoft-ng/rating/src/ys-rating-input/ys-rating-input.html","../../../../projects/yoozsoft/yoozsoft-ng/rating/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/rating/yoozsoft-yoozsoft-ng-rating.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\n@Component({\n  selector: 'ys-rating',\n  imports: [],\n  templateUrl: './ys-rating.html',\n  styleUrl: './ys-rating.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class YsRating {\n\n  /**Current score */\n  readonly score = input(0);\n\n  /**Points cap (default 100) */\n  readonly maxScore = input(100);\n  readonly starsCount = input(5);\n\n  /**Icon size in pixel */\n  readonly size = input(20);\n  readonly ratingIconClass = input('fas fa-star');\n\n  /**Icons gap in pixel */\n  readonly gap = input(4);\n  readonly ariaLabel = input<string>();\n\n  readonly wrapperSize = computed(() => this.size() + this.gap());\n\n  readonly normalizedAriaLabel = computed(() =>\n    this.ariaLabel() ??\n    `Rating ${this.normalizedScore()} of ${this.maxScore()}`\n  );\n\n  readonly normalizedScore = computed(() => {\n\n    return Math.min(\n      Math.max(this.score(), 0),\n      this.maxScore()\n    );\n\n  });\n\n  readonly normalizedStarsCount = computed(() =>\n    Math.max(1, Math.floor(this.starsCount()))\n  );\n\n  readonly rating = computed(() =>\n    (this.normalizedScore() / this.maxScore()) * this.normalizedStarsCount()\n  );\n\n  readonly fillPercents = computed(() => {\n\n    const totalStars = this.normalizedStarsCount();\n\n    if (this.maxScore() <= 0) {\n      return Array(totalStars).fill(0);\n    }\n\n    const rating = this.rating();\n\n    return Array.from({ length: totalStars }, (_, index) =>\n      Math.max(\n        0,\n        Math.min(\n          100,\n          (rating - index) * 100\n        )\n      )\n    );\n\n  });\n\n}\n","<div class=\"ys-rating\" role=\"img\" [style.gap.px]=\"gap()\" [attr.aria-label]=\"normalizedAriaLabel()\">\n\n    @for (fill of fillPercents(); track $index) {\n\n    <div class=\"rating-wrapper\" [style.width.px]=\"wrapperSize()\" [style.height.px]=\"size()\">\n\n        <i class=\"rating-empty\" [class]=\"ratingIconClass()\" [style.fontSize.px]=\"size()\">\n        </i>\n\n        <div class=\"rating-fill\" [style.width.%]=\"fill\" [style.height.px]=\"size()\">\n\n            <i class=\"rating\" [class]=\"ratingIconClass()\" [style.fontSize.px]=\"size()\">\n            </i>\n\n        </div>\n\n    </div>\n\n    }\n\n</div>","import { Component, computed, effect, forwardRef, input, output, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { YsRating } from '../ys-rating/ys-rating';\n\n@Component({\n  selector: 'ys-rating-input',\n  imports: [YsRating],\n  templateUrl: './ys-rating-input.html',\n  styleUrl: './ys-rating-input.scss',\n  providers: [{\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => YsRatingInput),\n    multi: true\n  }]\n})\nexport class YsRatingInput implements ControlValueAccessor {\n\n  readonly maxScore = input(100);\n  readonly starsCount = input(5);\n  readonly size = input(20);\n  readonly ratingIconClass = input('fas fa-star');\n\n  readonly disabled = input(false);\n  readonly readonly = input(false);\n  readonly allowClear = input(true);\n\n  readonly valueChange = output<number>();\n\n  readonly value = signal(0);\n  readonly hoverValue = signal<number | null>(null);\n\n  readonly displayValue = computed(() =>\n    this.hoverValue() ?? this.value()\n  );\n\n  readonly normalizedStarsCount = computed(() =>\n    Math.max(1, Math.floor(this.starsCount()))\n  );\n\n  readonly stars = computed(() =>\n    Array.from({ length: this.normalizedStarsCount() })\n  );\n\n  private disabledState = signal(false);\n  readonly isDisabled = computed(() => this.disabled() || this.readonly() || this.disabledState());\n\n  private _onChange: (value: number) => void = () => { };\n  private _onTouched = () => { };\n\n  constructor() {\n    effect(() => {\n\n      if (this.isDisabled()) {\n        this.hoverValue.set(null);\n      }\n\n    });\n  }\n\n  writeValue(value: number | null): void {\n    this.value.set(value ?? 0);\n  }\n\n  registerOnChange(fn: any) {\n    this._onChange = fn;\n  }\n\n  registerOnTouched(fn: any) {\n    this._onTouched = fn;\n  }\n\n  setDisabledState(disabled: boolean) {\n    this.disabledState.set(disabled);\n  }\n\n  hover(index: number) {\n\n    if (this.isDisabled())\n      return;\n\n    const value = ((index + 1) / this.normalizedStarsCount()) * this.maxScore();\n\n    this.hoverValue.set(value);\n\n  }\n\n  leave() {\n    this.hoverValue.set(null);\n  }\n\n  select(index: number) {\n    if (this.isDisabled())\n      return;\n\n    const value = ((index + 1) / this.normalizedStarsCount()) * this.maxScore();\n\n    if (this.allowClear() && value === this.value()) {\n\n      this.value.set(0);\n\n      this._onChange(0);\n      this.valueChange.emit(0);\n\n      this._onTouched();\n\n      return;\n    }\n\n    this.value.set(value);\n\n    this._onChange(value);\n    this.valueChange.emit(value);\n\n    this._onTouched();\n\n  }\n\n}\n","<div class=\"ys-rating-input\">\n\n    <ys-rating [score]=\"displayValue()\" [maxScore]=\"maxScore()\" [starsCount]=\"starsCount()\" [size]=\"size()\"\n        [ratingIconClass]=\"ratingIconClass()\">\n    </ys-rating>\n\n    <div class=\"rating-overlay\" [class.readonly]=\"readonly()\">\n\n        @for (star of stars(); track $index) {\n\n        <button type=\"button\" class=\"rating-hit\" [disabled]=\"isDisabled()\" (focus)=\"hover($index)\" (blur)=\"leave()\"\n            (mouseenter)=\"hover($index)\" (mouseleave)=\"leave()\" (click)=\"select($index)\">\n        </button>\n\n        }\n\n    </div>\n\n</div>","/*\r\n * Public API Surface of ys-rating\r\n */\r\n\r\nexport * from './src/ys-rating-input/ys-rating-input';\r\nexport * from './src/ys-rating/ys-rating';\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-select.mjs

@@ -1,36 +1,54 @@
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, forwardRef, Component } from '@angular/core';
+import { input, output, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 class YsSelect {
     /**ُSelect element id */
-    id = input('ys-select', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    id = input('ys-select', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     /**Name of field to display in option title */
-    optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    invalidFeedback = input(...(ngDevMode ? [undefined, { debugName: "invalidFeedback" }] : /* istanbul ignore next */ []));
-    valid = input(false, ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
-    validFeedback = input(...(ngDevMode ? [undefined, { debugName: "validFeedback" }] : /* istanbul ignore next */ []));
+    optionLabel = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    styleClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    invalidFeedback = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "invalidFeedback" }] : /* istanbul ignore next */ []));
+    valid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
+    validFeedback = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validFeedback" }] : /* istanbul ignore next */ []));
     /**Support multiple attribute */
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     /**Size of multiple attribute */
-    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
     /**Display clear button */
-    showClear = input(false, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
-    clearIconClass = input('fa fa-times', ...(ngDevMode ? [{ debugName: "clearIconClass" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    trackBy = input(...(ngDevMode ? [undefined, { debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    showClear = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    clearIconClass = input('fa fa-times', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearIconClass" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    trackBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "trackBy" }] : /* istanbul ignore next */ []));
     selectionChange = output();
-    disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => this.disabled() || this.disabledState(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     onChange = (_) => { };
     onTouched = () => { };
-    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     writeValue(obj) {
         if (!this.multiple() && this.placeholder() && !obj) {
             this.value.set(null);
@@ -77,29 +95,25 @@ class YsSelect {
         return String(item);
     }
     trackItem(item) {
-        return this.trackBy()?.(item)
-            ?? item;
+        return this.trackBy()?.(item) ?? item;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: YsSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: YsSelect, isStandalone: true, selector: "ys-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, invalidFeedback: { classPropertyName: "invalidFeedback", publicName: "invalidFeedback", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, validFeedback: { classPropertyName: "validFeedback", publicName: "validFeedback", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, clearIconClass: { classPropertyName: "clearIconClass", publicName: "clearIconClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsSelect, isStandalone: true, selector: "ys-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, invalidFeedback: { classPropertyName: "invalidFeedback", publicName: "invalidFeedback", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, validFeedback: { classPropertyName: "validFeedback", publicName: "validFeedback", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, clearIconClass: { classPropertyName: "clearIconClass", publicName: "clearIconClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsSelect),
-                multi: true
-            }
-        ], ngImport: i0, template: "<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear(), 'is-valid': valid(), 'is-invalid': invalid()}\">\n\n    @if (!multiple()) {\n    <select [id]=\"id()\" class=\"form-select\" [class]=\"styleClass()\"\n        [ngClass]=\"{'is-valid': valid(), 'is-invalid': invalid()}\" aria-label=\"Select option\" [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled()\">\n\n        @if (placeholder()) {\n        <option disabled [ngValue]=\"null\" class=\"d-none\">\n            {{ placeholder() }}\n        </option>\n        }\n\n        @for (item of options(); track trackItem(item); let i = $index) {\n        <option [ngValue]=\"item\">\n            <!-- [selected]=\" i === 0 && !placeholder() \" -->\n            {{ getLabel(item) }}\n        </option>\n        }\n\n    </select>\n    }\n\n    @if (multiple()) {\n    <select [id]=\"id()\" class=\"form-select\" [class]=\"styleClass()\"\n        [ngClass]=\"{'is-valid': valid(), 'is-invalid': invalid()}\" aria-label=\"Select option\" [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled()\" [multiple]=\"multiple()\" [size]=\"size()\">\n\n        <!-- @if (placeholder()) {\n    <option selected disabled [ngValue]=\"null\">\n      {{placeholder()}}\n    </option>\n    } -->\n\n        @for (item of options(); track trackItem(item); let i = $index) {\n        <option [ngValue]=\"item\">\n            <!-- [selected]=\" i === 0 && !placeholder() \" -->\n            {{ getLabel(item) }}\n        </option>\n        }\n\n    </select>\n    }\n\n    @if (showClear()) {\n    <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearValue()\"\n        [disabled]=\"isDisabled()\">\n        <span [ngClass]=\"clearIconClass()\"></span>\n    </button>\n    }\n\n</div>\n\n@if(valid() && validFeedback()){\n\n<div class=\"valid-feedback\">{{validFeedback()}}</div>\n\n}\n\n@if(invalid() && invalidFeedback()){\n\n<div class=\"invalid-feedback\">{{invalidFeedback()}}</div>\n\n}", 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear(), 'is-valid': valid(), 'is-invalid': invalid()}\">\n\n    @if (!multiple()) {\n    <select [id]=\"id()\" class=\"form-select\" [class]=\"styleClass()\"\n        [ngClass]=\"{'is-valid': valid(), 'is-invalid': invalid()}\" aria-label=\"Select option\" [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled()\">\n\n        @if (placeholder()) {\n        <option disabled [ngValue]=\"null\" class=\"d-none\">\n            {{ placeholder() }}\n        </option>\n        }\n\n        @for (item of options(); track trackItem(item); let i = $index) {\n        <option [ngValue]=\"item\">\n            <!-- [selected]=\" i === 0 && !placeholder() \" -->\n            {{ getLabel(item) }}\n        </option>\n        }\n\n    </select>\n    }\n\n    @if (multiple()) {\n    <select [id]=\"id()\" class=\"form-select\" [class]=\"styleClass()\"\n        [ngClass]=\"{'is-valid': valid(), 'is-invalid': invalid()}\" aria-label=\"Select option\" [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled()\" [multiple]=\"multiple()\" [size]=\"size()\">\n\n        <!-- @if (placeholder()) {\n    <option selected disabled [ngValue]=\"null\">\n      {{placeholder()}}\n    </option>\n    } -->\n\n        @for (item of options(); track trackItem(item); let i = $index) {\n        <option [ngValue]=\"item\">\n            <!-- [selected]=\" i === 0 && !placeholder() \" -->\n            {{ getLabel(item) }}\n        </option>\n        }\n\n    </select>\n    }\n\n    @if (showClear()) {\n    <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearValue()\"\n        [disabled]=\"isDisabled()\">\n        <span [ngClass]=\"clearIconClass()\"></span>\n    </button>\n    }\n\n</div>\n\n@if(valid() && validFeedback()){\n\n<div class=\"valid-feedback\">{{validFeedback()}}</div>\n\n}\n\n@if(invalid() && invalidFeedback()){\n\n<div class=\"invalid-feedback\">{{invalidFeedback()}}</div>\n\n}", 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]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple]:not([ngNoCva])[formControlName],select[multiple]:not([ngNoCva])[formControl],select[multiple]:not([ngNoCva])[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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: YsSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-select', imports: [
-                        FormsModule,
-                        NgClass
-                    ], providers: [
+            args: [{ selector: 'ys-select', imports: [FormsModule, NgClass], changeDetection: ChangeDetectionStrategy.Eager, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => YsSelect),
-                            multi: true
-                        }
+                            multi: true,
+                        },
                     ], template: "<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear(), 'is-valid': valid(), 'is-invalid': invalid()}\">\n\n    @if (!multiple()) {\n    <select [id]=\"id()\" class=\"form-select\" [class]=\"styleClass()\"\n        [ngClass]=\"{'is-valid': valid(), 'is-invalid': invalid()}\" aria-label=\"Select option\" [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled()\">\n\n        @if (placeholder()) {\n        <option disabled [ngValue]=\"null\" class=\"d-none\">\n            {{ placeholder() }}\n        </option>\n        }\n\n        @for (item of options(); track trackItem(item); let i = $index) {\n        <option [ngValue]=\"item\">\n            <!-- [selected]=\" i === 0 && !placeholder() \" -->\n            {{ getLabel(item) }}\n        </option>\n        }\n\n    </select>\n    }\n\n    @if (multiple()) {\n    <select [id]=\"id()\" class=\"form-select\" [class]=\"styleClass()\"\n        [ngClass]=\"{'is-valid': valid(), 'is-invalid': invalid()}\" aria-label=\"Select option\" [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled()\" [multiple]=\"multiple()\" [size]=\"size()\">\n\n        <!-- @if (placeholder()) {\n    <option selected disabled [ngValue]=\"null\">\n      {{placeholder()}}\n    </option>\n    } -->\n\n        @for (item of options(); track trackItem(item); let i = $index) {\n        <option [ngValue]=\"item\">\n            <!-- [selected]=\" i === 0 && !placeholder() \" -->\n            {{ getLabel(item) }}\n        </option>\n        }\n\n    </select>\n    }\n\n    @if (showClear()) {\n    <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearValue()\"\n        [disabled]=\"isDisabled()\">\n        <span [ngClass]=\"clearIconClass()\"></span>\n    </button>\n    }\n\n</div>\n\n@if(valid() && validFeedback()){\n\n<div class=\"valid-feedback\">{{validFeedback()}}</div>\n\n}\n\n@if(invalid() && invalidFeedback()){\n\n<div class=\"invalid-feedback\">{{invalidFeedback()}}</div>\n\n}" }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], invalidFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFeedback", required: false }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }], validFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "validFeedback", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], clearIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 

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.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.html","../../../../projects/yoozsoft/yoozsoft-ng/select/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/yoozsoft-yoozsoft-ng-select.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport { Component, computed, forwardRef, input, output, signal } from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'ys-select',\n  imports: [\n    FormsModule,\n    NgClass\n  ],\n  templateUrl: './ys-select.html',\n  styleUrl: './ys-select.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => YsSelect),\n      multi: true\n    }\n  ]\n})\nexport class YsSelect<T = any> implements ControlValueAccessor {\n\n  /**ُSelect element id */\n  id = input('ys-select');\n  options = input<T[]>([]);\n  /**Name of field to display in option title */\n  optionLabel = input('label');\n  placeholder = input<string>();\n  styleClass = input<string>('');\n  invalid = input<boolean>(false);\n  invalidFeedback = input<string>();\n  valid = input(false);\n  validFeedback = input<string>();\n  /**Support multiple attribute */\n  multiple = input(false);\n  /**Size of multiple attribute */\n  size = input<number>();\n  /**Display clear button */\n  showClear = input(false);\n  clearIconClass = input('fa fa-times');\n\n  disabled = input(false);\n\n  trackBy = input<(item: any) => unknown>();\n\n  selectionChange = output<any>();\n\n  private disabledState = signal(false);\n\n  readonly isDisabled = computed(() => this.disabled() || this.disabledState());\n\n  private onChange = (_: unknown) => { };\n  private onTouched = () => { };\n\n  value = signal<T | T[] | null>(null);\n\n  writeValue(obj: any): void {\n    if (!this.multiple() && this.placeholder() && !obj) {\n      this.value.set(null);\n      return;\n    }\n\n    if (this.multiple() && !obj) {\n      this.value.set(this.multiple() ? [] : null);\n      return;\n    }\n\n    if (!this.multiple() && obj && Array.isArray(obj)) {\n      if (obj.length) {\n        this.value.set(obj[0]);\n      }\n      else {\n        this.value.set(null);\n      }\n      return;\n    }\n\n    this.value.set(obj);\n  }\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabledState.set(isDisabled);\n  }\n\n  onModelChange(value: T | T[] | null) {\n\n    this.value.set(value);\n\n    this.onChange(value);\n    this.onTouched();\n\n    this.selectionChange.emit(value);\n  }\n\n  clearValue() {\n    this.value.set(this.multiple() ? [] : null);\n    this.onModelChange(this.value());\n  }\n\n  getLabel(item: any): string {\n\n    if (item && typeof item === 'object') {\n      return item[this.optionLabel()];\n    }\n\n    return String(item);\n  }\n\n  trackItem(item: any) {\n    return this.trackBy()?.(item)\n      ?? item;\n  }\n\n}\n","<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear(), 'is-valid': valid(), 'is-invalid': invalid()}\">\n\n    @if (!multiple()) {\n    <select [id]=\"id()\" class=\"form-select\" [class]=\"styleClass()\"\n        [ngClass]=\"{'is-valid': valid(), 'is-invalid': invalid()}\" aria-label=\"Select option\" [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled()\">\n\n        @if (placeholder()) {\n        <option disabled [ngValue]=\"null\" class=\"d-none\">\n            {{ placeholder() }}\n        </option>\n        }\n\n        @for (item of options(); track trackItem(item); let i = $index) {\n        <option [ngValue]=\"item\">\n            <!-- [selected]=\" i === 0 && !placeholder() \" -->\n            {{ getLabel(item) }}\n        </option>\n        }\n\n    </select>\n    }\n\n    @if (multiple()) {\n    <select [id]=\"id()\" class=\"form-select\" [class]=\"styleClass()\"\n        [ngClass]=\"{'is-valid': valid(), 'is-invalid': invalid()}\" aria-label=\"Select option\" [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled()\" [multiple]=\"multiple()\" [size]=\"size()\">\n\n        <!-- @if (placeholder()) {\n    <option selected disabled [ngValue]=\"null\">\n      {{placeholder()}}\n    </option>\n    } -->\n\n        @for (item of options(); track trackItem(item); let i = $index) {\n        <option [ngValue]=\"item\">\n            <!-- [selected]=\" i === 0 && !placeholder() \" -->\n            {{ getLabel(item) }}\n        </option>\n        }\n\n    </select>\n    }\n\n    @if (showClear()) {\n    <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearValue()\"\n        [disabled]=\"isDisabled()\">\n        <span [ngClass]=\"clearIconClass()\"></span>\n    </button>\n    }\n\n</div>\n\n@if(valid() && validFeedback()){\n\n<div class=\"valid-feedback\">{{validFeedback()}}</div>\n\n}\n\n@if(invalid() && invalidFeedback()){\n\n<div class=\"invalid-feedback\">{{invalidFeedback()}}</div>\n\n}","/*\r\n * Public API Surface of ys-select\r\n */\r\n\r\nexport * from './src/ys-select/ys-select';\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.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.html","../../../../projects/yoozsoft/yoozsoft-ng/select/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/yoozsoft-yoozsoft-ng-select.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport {\r\n  Component,\r\n  computed,\r\n  forwardRef,\r\n  input,\r\n  output,\r\n  signal,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'ys-select',\r\n  imports: [FormsModule, NgClass],\r\n  templateUrl: './ys-select.html',\r\n  styleUrl: './ys-select.scss',\r\n  changeDetection: ChangeDetectionStrategy.Eager,\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => YsSelect),\r\n      multi: true,\r\n    },\r\n  ],\r\n})\r\nexport class YsSelect<T = any> implements ControlValueAccessor {\r\n  /**ُSelect element id */\r\n  id = input('ys-select');\r\n  options = input<T[]>([]);\r\n  /**Name of field to display in option title */\r\n  optionLabel = input('label');\r\n  placeholder = input<string>();\r\n  styleClass = input<string>('');\r\n  invalid = input<boolean>(false);\r\n  invalidFeedback = input<string>();\r\n  valid = input(false);\r\n  validFeedback = input<string>();\r\n  /**Support multiple attribute */\r\n  multiple = input(false);\r\n  /**Size of multiple attribute */\r\n  size = input<number>();\r\n  /**Display clear button */\r\n  showClear = input(false);\r\n  clearIconClass = input('fa fa-times');\r\n\r\n  disabled = input(false);\r\n\r\n  trackBy = input<(item: any) => unknown>();\r\n\r\n  selectionChange = output<any>();\r\n\r\n  private disabledState = signal(false);\r\n\r\n  readonly isDisabled = computed(() => this.disabled() || this.disabledState());\r\n\r\n  private onChange = (_: unknown) => {};\r\n  private onTouched = () => {};\r\n\r\n  value = signal<T | T[] | null>(null);\r\n\r\n  writeValue(obj: any): void {\r\n    if (!this.multiple() && this.placeholder() && !obj) {\r\n      this.value.set(null);\r\n      return;\r\n    }\r\n\r\n    if (this.multiple() && !obj) {\r\n      this.value.set(this.multiple() ? [] : null);\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.set(obj[0]);\r\n      } else {\r\n        this.value.set(null);\r\n      }\r\n      return;\r\n    }\r\n\r\n    this.value.set(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.disabledState.set(isDisabled);\r\n  }\r\n\r\n  onModelChange(value: T | T[] | null) {\r\n    this.value.set(value);\r\n\r\n    this.onChange(value);\r\n    this.onTouched();\r\n\r\n    this.selectionChange.emit(value);\r\n  }\r\n\r\n  clearValue() {\r\n    this.value.set(this.multiple() ? [] : null);\r\n    this.onModelChange(this.value());\r\n  }\r\n\r\n  getLabel(item: any): string {\r\n    if (item && typeof item === 'object') {\r\n      return item[this.optionLabel()];\r\n    }\r\n\r\n    return String(item);\r\n  }\r\n\r\n  trackItem(item: any) {\r\n    return this.trackBy()?.(item) ?? item;\r\n  }\r\n}\r\n","<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear(), 'is-valid': valid(), 'is-invalid': invalid()}\">\n\n    @if (!multiple()) {\n    <select [id]=\"id()\" class=\"form-select\" [class]=\"styleClass()\"\n        [ngClass]=\"{'is-valid': valid(), 'is-invalid': invalid()}\" aria-label=\"Select option\" [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled()\">\n\n        @if (placeholder()) {\n        <option disabled [ngValue]=\"null\" class=\"d-none\">\n            {{ placeholder() }}\n        </option>\n        }\n\n        @for (item of options(); track trackItem(item); let i = $index) {\n        <option [ngValue]=\"item\">\n            <!-- [selected]=\" i === 0 && !placeholder() \" -->\n            {{ getLabel(item) }}\n        </option>\n        }\n\n    </select>\n    }\n\n    @if (multiple()) {\n    <select [id]=\"id()\" class=\"form-select\" [class]=\"styleClass()\"\n        [ngClass]=\"{'is-valid': valid(), 'is-invalid': invalid()}\" aria-label=\"Select option\" [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled()\" [multiple]=\"multiple()\" [size]=\"size()\">\n\n        <!-- @if (placeholder()) {\n    <option selected disabled [ngValue]=\"null\">\n      {{placeholder()}}\n    </option>\n    } -->\n\n        @for (item of options(); track trackItem(item); let i = $index) {\n        <option [ngValue]=\"item\">\n            <!-- [selected]=\" i === 0 && !placeholder() \" -->\n            {{ getLabel(item) }}\n        </option>\n        }\n\n    </select>\n    }\n\n    @if (showClear()) {\n    <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearValue()\"\n        [disabled]=\"isDisabled()\">\n        <span [ngClass]=\"clearIconClass()\"></span>\n    </button>\n    }\n\n</div>\n\n@if(valid() && validFeedback()){\n\n<div class=\"valid-feedback\">{{validFeedback()}}</div>\n\n}\n\n@if(invalid() && invalidFeedback()){\n\n<div class=\"invalid-feedback\">{{invalidFeedback()}}</div>\n\n}","/*\r\n * Public API Surface of ys-select\r\n */\r\n\r\nexport * from './src/ys-select/ys-select';\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,6 +1,6 @@
 import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, signal, Injectable, input, output, computed, Component } from '@angular/core';
+import { inject, PLATFORM_ID, signal, Injectable, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
 import { filter, map } from 'rxjs';
@@ -8,8 +8,10 @@ import { filter, map } from 'rxjs';
 class SidebarService {
     platformId = inject(PLATFORM_ID);
     mediaQuery;
-    _isMobile = signal(false, ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
-    _isOpen = signal(true, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
+    _isMobile = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
+    _isOpen = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
     isMobile = this._isMobile.asReadonly();
     isOpen = this._isOpen.asReadonly();
     constructor() {
@@ -37,10 +39,10 @@ class SidebarService {
     close() {
         this._isOpen.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SidebarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SidebarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -49,21 +51,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class YsSidebar {
     router = inject(Router);
-    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    profile = input(...(ngDevMode ? [undefined, { debugName: "profile" }] : /* istanbul ignore next */ []));
-    styleClass = input('bg-body', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    showClose = input(false, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
-    closeStyleClass = input('btn-close-white', ...(ngDevMode ? [{ debugName: "closeStyleClass" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    profile = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "profile" }] : /* istanbul ignore next */ []));
+    styleClass = input('bg-body', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    showClose = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
+    closeStyleClass = input('btn-close-white', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeStyleClass" }] : /* istanbul ignore next */ []));
     close = output();
     itemSelected = output();
-    fullName = computed(() => [
-        this.profile()?.firstName,
-        this.profile()?.lastName
-    ].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "fullName" }] : /* istanbul ignore next */ []));
-    currentUrl = toSignal(this.router.events.pipe(filter(event => event instanceof NavigationEnd), map(() => this.router.url)), {
-        initialValue: this.router.url
+    fullName = computed(() => [this.profile()?.firstName, this.profile()?.lastName].filter(Boolean).join(' '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullName" }] : /* istanbul ignore next */ []));
+    currentUrl = toSignal(this.router.events.pipe(filter((event) => event instanceof NavigationEnd), map(() => this.router.url)), {
+        initialValue: this.router.url,
     });
-    expandedMenu = signal(null, ...(ngDevMode ? [{ debugName: "expandedMenu" }] : /* istanbul ignore next */ []));
+    expandedMenu = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedMenu" }] : /* istanbul ignore next */ []));
     getItemKey(item) {
         return item.id ?? item.route ?? item.label ?? null;
     }
@@ -72,16 +78,14 @@ class YsSidebar {
         if (!key) {
             return;
         }
-        this.expandedMenu.update(current => current === key ? null : key);
+        this.expandedMenu.update((current) => (current === key ? null : key));
     }
     isExpanded(item) {
         return this.expandedMenu() === this.getItemKey(item);
     }
     isParentActive(item) {
         const url = this.currentUrl();
-        return item.children?.some(child => child.route &&
-            (url === child.route ||
-                url.startsWith(child.route + '/'))) ?? false;
+        return (item.children?.some((child) => child.route && (url === child.route || url.startsWith(child.route + '/'))) ?? false);
     }
     closeSidebar() {
         this.close.emit();
@@ -107,15 +111,12 @@ class YsSidebar {
         this.onSelectItem(subItem);
         subItem.onClick?.(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: YsSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: YsSidebar, isStandalone: true, selector: "ys-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeStyleClass: { classPropertyName: "closeStyleClass", publicName: "closeStyleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", itemSelected: "itemSelected" }, ngImport: i0, template: "<aside class=\"ys-sidebar overflow-auto border-end\" [class]=\"styleClass()\">\n\n    @if(showClose()){\n    <div class=\"d-flex justify-content-end\">\n        <button type=\"button\" (click)=\"closeSidebar()\" class=\"btn-close p-2\" [class]=\"closeStyleClass()\"\n            aria-label=\"Close\"></button>\n    </div>\n    }\n\n    @if (profile()?.image || profile()?.role || fullName()) {\n    <div class=\"sidebar-profile d-flex flex-column justify-content-center border-bottom p-3\" [class.pt-0]=\"showClose()\">\n\n        @if (profile()?.image) {\n        <div class=\"image-wrapper\" [class.mb-3]=\"fullName() || profile()?.role\">\n            <div class=\"user-image rounded-circle m-auto\">\n                <img [src]=\"profile()?.image?.src\" class=\"img-fluid\" [alt]=\"profile()?.image?.alt\">\n            </div>\n        </div>\n        }\n\n        @if (fullName() || profile()?.role) {\n        <div class=\"profile-details d-flex flex-column text-center\">\n\n            @if (fullName()) {\n            <strong class=\"text-uppercase name\">{{fullName()}}</strong>\n            }\n\n            @if (profile()?.role) {\n            <small class=\"text-uppercase role\">{{profile()?.role}}</small>\n            }\n\n        </div>\n        }\n\n    </div>\n    }\n\n    <div class=\"sidebar-menu p-3\">\n        <ul class=\"menu-items nav nav-pills flex-column\">\n\n            @for (item of items(); track item.id ?? item.route ?? $index) {\n\n            @if (item.isDivider) {\n            <hr class=\"sidebar-divider my-2\" />\n            }\n            @else {\n\n            @if (item.children?.length) {\n            <li class=\"nav-item mb-2\">\n\n                <button type=\"button\" class=\"nav-link d-flex align-items-center justify-content-between w-100\"\n                    [class.active]=\"isParentActive(item)\" (click)=\"toggle(item); (item.onClick && item.onClick($event))\"\n                    [disabled]=\"item.disabled\">\n\n                    @if (item.iconClass) {\n                    <i [class]=\"item.iconClass\"></i>\n                    }\n\n                    <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n\n                    @if (item.badgeLabel) {\n                    <span class=\"badge bg-info me-1\" [class]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n                    }\n\n                    <i class=\"fa-solid fa-chevron-right transition-icon\" [class.expanded]=\"isExpanded(item)\">\n                    </i>\n\n                </button>\n\n                <ul class=\"menu-sub-items nav nav-pills flex-column ms-3 border-bottom\"\n                    [class.expanded]=\"isExpanded(item)\">\n\n                    @for (subItem of item.children; track subItem.id ?? subItem.route ?? $index) {\n\n                    @if (subItem.isDivider) {\n                    <hr class=\"sidebar-divider my-1\" />\n                    }\n                    @else {\n                    <li class=\"nav-item\">\n                        <a class=\"nav-link d-flex align-items-center\"\n                            [routerLink]=\"subItem.disabled ? null : subItem.route\" routerLinkActive=\"active\"\n                            (click)=\"onSubItemClick($event, subItem)\" [class.disabled]=\"subItem.disabled\">\n\n                            @if (subItem.iconClass) {\n                            <i [class]=\"subItem.iconClass\"></i>\n                            }\n\n                            <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\n\n                            @if (subItem.badgeLabel) {\n                            <span class=\"badge bg-info\" [class]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\n                            }\n\n                        </a>\n                    </li>\n                    }\n\n                    }\n                </ul>\n\n            </li>\n\n            }\n            @else {\n\n            <li class=\"nav-item\">\n                <a class=\"nav-link d-flex align-items-center\" [class.disabled]=\"item.disabled\"\n                    [routerLink]=\"item.disabled ? null : item.route\" routerLinkActive=\"active\"\n                    (click)=\"onItemClick($event,item)\">\n\n                    @if (item.iconClass) {\n                    <i [class]=\"item.iconClass\"></i>\n                    }\n\n                    <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\n\n                    @if (item.badgeLabel) {\n                    <span class=\"badge bg-info\" [class]=\"item.badgeStyleClass\"> {{ item.badgeLabel }} </span>\n                    }\n\n                </a>\n            </li>\n\n            }\n\n            }\n\n            }\n        </ul>\n    </div>\n</aside>", styles: [".ys-sidebar{width:280px;height:100%;position:fixed;left:0;z-index:1001;transition:transform .5s ease,width .5s ease}.ys-sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.ys-sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.ys-sidebar .sidebar-menu .menu-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.transition-icon{transition:transform .25s ease}.transition-icon.expanded{transform:rotate(90deg)}.menu-sub-items{max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .25s ease,padding .25 ease;opacity:0;margin-left:.75rem;padding:0;border-left:3px solid var(--bs-border-color);background-color:rgba(var(--bs-secondary-rgb),.07);border-radius:.5rem}.menu-sub-items.expanded{max-height:500px;opacity:1;padding:.5rem}\n"], dependencies: [{ 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: "22.0.7", ngImport: i0, type: YsSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsSidebar, isStandalone: true, selector: "ys-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeStyleClass: { classPropertyName: "closeStyleClass", publicName: "closeStyleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", itemSelected: "itemSelected" }, ngImport: i0, template: "<aside class=\"ys-sidebar overflow-auto border-end\" [class]=\"styleClass()\">\r\n  @if (showClose()) {\r\n  <div class=\"d-flex justify-content-end\">\r\n    <button type=\"button\" (click)=\"closeSidebar()\" class=\"btn-close p-2\" [class]=\"closeStyleClass()\"\r\n      aria-label=\"Close\"></button>\r\n  </div>\r\n  }\r\n\r\n  @if (profile()?.image || profile()?.role || fullName()) {\r\n  <div class=\"sidebar-profile d-flex flex-column justify-content-center border-bottom p-3\" [class.pt-0]=\"showClose()\">\r\n    @if (profile()?.image) {\r\n    <div class=\"image-wrapper\" [class.mb-3]=\"fullName() || profile()?.role\">\r\n      <div class=\"user-image rounded-circle m-auto\">\r\n        <img [src]=\"profile()?.image?.src\" class=\"img-fluid\" [alt]=\"profile()?.image?.alt\" />\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    @if (fullName() || profile()?.role) {\r\n    <div class=\"profile-details d-flex flex-column text-center\">\r\n      @if (fullName()) {\r\n      <strong class=\"text-uppercase name\">{{ fullName() }}</strong>\r\n      }\r\n\r\n      @if (profile()?.role) {\r\n      <small class=\"text-uppercase role\">{{ profile()?.role }}</small>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"sidebar-menu p-3\">\r\n    <ul class=\"menu-items nav nav-pills flex-column\">\r\n      @for (item of items(); track item.id ?? item.route ?? $index) {\r\n      @if (item.isDivider) {\r\n      <hr class=\"sidebar-divider my-2\" />\r\n      } @else {\r\n      @if (item.children?.length) {\r\n      <li class=\"nav-item mb-2\">\r\n        <button type=\"button\" class=\"nav-link d-flex align-items-center justify-content-between w-100\"\r\n          [class.active]=\"isParentActive(item)\" (click)=\"toggle(item); item.onClick && item.onClick($event)\"\r\n          [disabled]=\"item.disabled\">\r\n          @if (item.iconClass) {\r\n          <i [class]=\"item.iconClass\"></i>\r\n          }\r\n\r\n          <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\r\n\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info me-1\" [class]=\"item.badgeStyleClass\">{{\r\n            item.badgeLabel\r\n            }}</span>\r\n          }\r\n\r\n          <i class=\"fa-solid fa-chevron-right transition-icon\" [class.expanded]=\"isExpanded(item)\">\r\n          </i>\r\n        </button>\r\n\r\n        <ul class=\"menu-sub-items nav nav-pills flex-column ms-3 border-bottom\" [class.expanded]=\"isExpanded(item)\">\r\n          @for (subItem of item.children; track subItem.id ?? subItem.route ?? $index) {\r\n          @if (subItem.isDivider) {\r\n          <hr class=\"sidebar-divider my-1\" />\r\n          } @else {\r\n          <li class=\"nav-item\">\r\n            <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.disabled ? null : subItem.route\"\r\n              routerLinkActive=\"active\" (click)=\"onSubItemClick($event, subItem)\" [class.disabled]=\"subItem.disabled\">\r\n              @if (subItem.iconClass) {\r\n              <i [class]=\"subItem.iconClass\"></i>\r\n              }\r\n\r\n              <span class=\"link-label ms-3 me-auto\">{{ subItem.label }}</span>\r\n\r\n              @if (subItem.badgeLabel) {\r\n              <span class=\"badge bg-info\" [class]=\"subItem.badgeStyleClass\">{{\r\n                subItem.badgeLabel\r\n                }}</span>\r\n              }\r\n            </a>\r\n          </li>\r\n          }\r\n          }\r\n        </ul>\r\n      </li>\r\n      } @else {\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link d-flex align-items-center\" [class.disabled]=\"item.disabled\"\r\n          [routerLink]=\"item.disabled ? null : item.route\" routerLinkActive=\"active\"\r\n          (click)=\"onItemClick($event, item)\">\r\n          @if (item.iconClass) {\r\n          <i [class]=\"item.iconClass\"></i>\r\n          }\r\n\r\n          <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\r\n\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info\" [class]=\"item.badgeStyleClass\">\r\n            {{ item.badgeLabel }}\r\n          </span>\r\n          }\r\n        </a>\r\n      </li>\r\n      }\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</aside>", styles: [".ys-sidebar{width:280px;height:100%;position:fixed;left:0;z-index:1001;transition:transform .5s ease,width .5s ease}.ys-sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.ys-sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.ys-sidebar .sidebar-menu .menu-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.transition-icon{transition:transform .25s ease}.transition-icon.expanded{transform:rotate(90deg)}.menu-sub-items{max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .25s ease,padding .25 ease;opacity:0;margin-left:.75rem;padding:0;border-left:3px solid var(--bs-border-color);background-color:rgba(var(--bs-secondary-rgb),.07);border-radius:.5rem}.menu-sub-items.expanded{max-height:500px;opacity:1;padding:.5rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: YsSidebar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsSidebar, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-sidebar', imports: [
-                        RouterLink,
-                        RouterLinkActive
-                    ], template: "<aside class=\"ys-sidebar overflow-auto border-end\" [class]=\"styleClass()\">\n\n    @if(showClose()){\n    <div class=\"d-flex justify-content-end\">\n        <button type=\"button\" (click)=\"closeSidebar()\" class=\"btn-close p-2\" [class]=\"closeStyleClass()\"\n            aria-label=\"Close\"></button>\n    </div>\n    }\n\n    @if (profile()?.image || profile()?.role || fullName()) {\n    <div class=\"sidebar-profile d-flex flex-column justify-content-center border-bottom p-3\" [class.pt-0]=\"showClose()\">\n\n        @if (profile()?.image) {\n        <div class=\"image-wrapper\" [class.mb-3]=\"fullName() || profile()?.role\">\n            <div class=\"user-image rounded-circle m-auto\">\n                <img [src]=\"profile()?.image?.src\" class=\"img-fluid\" [alt]=\"profile()?.image?.alt\">\n            </div>\n        </div>\n        }\n\n        @if (fullName() || profile()?.role) {\n        <div class=\"profile-details d-flex flex-column text-center\">\n\n            @if (fullName()) {\n            <strong class=\"text-uppercase name\">{{fullName()}}</strong>\n            }\n\n            @if (profile()?.role) {\n            <small class=\"text-uppercase role\">{{profile()?.role}}</small>\n            }\n\n        </div>\n        }\n\n    </div>\n    }\n\n    <div class=\"sidebar-menu p-3\">\n        <ul class=\"menu-items nav nav-pills flex-column\">\n\n            @for (item of items(); track item.id ?? item.route ?? $index) {\n\n            @if (item.isDivider) {\n            <hr class=\"sidebar-divider my-2\" />\n            }\n            @else {\n\n            @if (item.children?.length) {\n            <li class=\"nav-item mb-2\">\n\n                <button type=\"button\" class=\"nav-link d-flex align-items-center justify-content-between w-100\"\n                    [class.active]=\"isParentActive(item)\" (click)=\"toggle(item); (item.onClick && item.onClick($event))\"\n                    [disabled]=\"item.disabled\">\n\n                    @if (item.iconClass) {\n                    <i [class]=\"item.iconClass\"></i>\n                    }\n\n                    <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n\n                    @if (item.badgeLabel) {\n                    <span class=\"badge bg-info me-1\" [class]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n                    }\n\n                    <i class=\"fa-solid fa-chevron-right transition-icon\" [class.expanded]=\"isExpanded(item)\">\n                    </i>\n\n                </button>\n\n                <ul class=\"menu-sub-items nav nav-pills flex-column ms-3 border-bottom\"\n                    [class.expanded]=\"isExpanded(item)\">\n\n                    @for (subItem of item.children; track subItem.id ?? subItem.route ?? $index) {\n\n                    @if (subItem.isDivider) {\n                    <hr class=\"sidebar-divider my-1\" />\n                    }\n                    @else {\n                    <li class=\"nav-item\">\n                        <a class=\"nav-link d-flex align-items-center\"\n                            [routerLink]=\"subItem.disabled ? null : subItem.route\" routerLinkActive=\"active\"\n                            (click)=\"onSubItemClick($event, subItem)\" [class.disabled]=\"subItem.disabled\">\n\n                            @if (subItem.iconClass) {\n                            <i [class]=\"subItem.iconClass\"></i>\n                            }\n\n                            <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\n\n                            @if (subItem.badgeLabel) {\n                            <span class=\"badge bg-info\" [class]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\n                            }\n\n                        </a>\n                    </li>\n                    }\n\n                    }\n                </ul>\n\n            </li>\n\n            }\n            @else {\n\n            <li class=\"nav-item\">\n                <a class=\"nav-link d-flex align-items-center\" [class.disabled]=\"item.disabled\"\n                    [routerLink]=\"item.disabled ? null : item.route\" routerLinkActive=\"active\"\n                    (click)=\"onItemClick($event,item)\">\n\n                    @if (item.iconClass) {\n                    <i [class]=\"item.iconClass\"></i>\n                    }\n\n                    <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\n\n                    @if (item.badgeLabel) {\n                    <span class=\"badge bg-info\" [class]=\"item.badgeStyleClass\"> {{ item.badgeLabel }} </span>\n                    }\n\n                </a>\n            </li>\n\n            }\n\n            }\n\n            }\n        </ul>\n    </div>\n</aside>", styles: [".ys-sidebar{width:280px;height:100%;position:fixed;left:0;z-index:1001;transition:transform .5s ease,width .5s ease}.ys-sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.ys-sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.ys-sidebar .sidebar-menu .menu-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.transition-icon{transition:transform .25s ease}.transition-icon.expanded{transform:rotate(90deg)}.menu-sub-items{max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .25s ease,padding .25 ease;opacity:0;margin-left:.75rem;padding:0;border-left:3px solid var(--bs-border-color);background-color:rgba(var(--bs-secondary-rgb),.07);border-radius:.5rem}.menu-sub-items.expanded{max-height:500px;opacity:1;padding:.5rem}\n"] }]
+            args: [{ selector: 'ys-sidebar', imports: [RouterLink, RouterLinkActive], changeDetection: ChangeDetectionStrategy.Eager, template: "<aside class=\"ys-sidebar overflow-auto border-end\" [class]=\"styleClass()\">\r\n  @if (showClose()) {\r\n  <div class=\"d-flex justify-content-end\">\r\n    <button type=\"button\" (click)=\"closeSidebar()\" class=\"btn-close p-2\" [class]=\"closeStyleClass()\"\r\n      aria-label=\"Close\"></button>\r\n  </div>\r\n  }\r\n\r\n  @if (profile()?.image || profile()?.role || fullName()) {\r\n  <div class=\"sidebar-profile d-flex flex-column justify-content-center border-bottom p-3\" [class.pt-0]=\"showClose()\">\r\n    @if (profile()?.image) {\r\n    <div class=\"image-wrapper\" [class.mb-3]=\"fullName() || profile()?.role\">\r\n      <div class=\"user-image rounded-circle m-auto\">\r\n        <img [src]=\"profile()?.image?.src\" class=\"img-fluid\" [alt]=\"profile()?.image?.alt\" />\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    @if (fullName() || profile()?.role) {\r\n    <div class=\"profile-details d-flex flex-column text-center\">\r\n      @if (fullName()) {\r\n      <strong class=\"text-uppercase name\">{{ fullName() }}</strong>\r\n      }\r\n\r\n      @if (profile()?.role) {\r\n      <small class=\"text-uppercase role\">{{ profile()?.role }}</small>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"sidebar-menu p-3\">\r\n    <ul class=\"menu-items nav nav-pills flex-column\">\r\n      @for (item of items(); track item.id ?? item.route ?? $index) {\r\n      @if (item.isDivider) {\r\n      <hr class=\"sidebar-divider my-2\" />\r\n      } @else {\r\n      @if (item.children?.length) {\r\n      <li class=\"nav-item mb-2\">\r\n        <button type=\"button\" class=\"nav-link d-flex align-items-center justify-content-between w-100\"\r\n          [class.active]=\"isParentActive(item)\" (click)=\"toggle(item); item.onClick && item.onClick($event)\"\r\n          [disabled]=\"item.disabled\">\r\n          @if (item.iconClass) {\r\n          <i [class]=\"item.iconClass\"></i>\r\n          }\r\n\r\n          <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\r\n\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info me-1\" [class]=\"item.badgeStyleClass\">{{\r\n            item.badgeLabel\r\n            }}</span>\r\n          }\r\n\r\n          <i class=\"fa-solid fa-chevron-right transition-icon\" [class.expanded]=\"isExpanded(item)\">\r\n          </i>\r\n        </button>\r\n\r\n        <ul class=\"menu-sub-items nav nav-pills flex-column ms-3 border-bottom\" [class.expanded]=\"isExpanded(item)\">\r\n          @for (subItem of item.children; track subItem.id ?? subItem.route ?? $index) {\r\n          @if (subItem.isDivider) {\r\n          <hr class=\"sidebar-divider my-1\" />\r\n          } @else {\r\n          <li class=\"nav-item\">\r\n            <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.disabled ? null : subItem.route\"\r\n              routerLinkActive=\"active\" (click)=\"onSubItemClick($event, subItem)\" [class.disabled]=\"subItem.disabled\">\r\n              @if (subItem.iconClass) {\r\n              <i [class]=\"subItem.iconClass\"></i>\r\n              }\r\n\r\n              <span class=\"link-label ms-3 me-auto\">{{ subItem.label }}</span>\r\n\r\n              @if (subItem.badgeLabel) {\r\n              <span class=\"badge bg-info\" [class]=\"subItem.badgeStyleClass\">{{\r\n                subItem.badgeLabel\r\n                }}</span>\r\n              }\r\n            </a>\r\n          </li>\r\n          }\r\n          }\r\n        </ul>\r\n      </li>\r\n      } @else {\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link d-flex align-items-center\" [class.disabled]=\"item.disabled\"\r\n          [routerLink]=\"item.disabled ? null : item.route\" routerLinkActive=\"active\"\r\n          (click)=\"onItemClick($event, item)\">\r\n          @if (item.iconClass) {\r\n          <i [class]=\"item.iconClass\"></i>\r\n          }\r\n\r\n          <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\r\n\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info\" [class]=\"item.badgeStyleClass\">\r\n            {{ item.badgeLabel }}\r\n          </span>\r\n          }\r\n        </a>\r\n      </li>\r\n      }\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</aside>", styles: [".ys-sidebar{width:280px;height:100%;position:fixed;left:0;z-index:1001;transition:transform .5s ease,width .5s ease}.ys-sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.ys-sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.ys-sidebar .sidebar-menu .menu-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.transition-icon{transition:transform .25s ease}.transition-icon.expanded{transform:rotate(90deg)}.menu-sub-items{max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .25s ease,padding .25 ease;opacity:0;margin-left:.75rem;padding:0;border-left:3px solid var(--bs-border-color);background-color:rgba(var(--bs-secondary-rgb),.07);border-radius:.5rem}.menu-sub-items.expanded{max-height:500px;opacity:1;padding:.5rem}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], closeStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeStyleClass", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 /*