@yoozsoft/yoozsoft-ng 4.0.0 → 4.0.2

package/assets/styles/ys-preloader-9.scss

@@ -0,0 +1,254 @@
+/********************  Preloader 9 *******************/
+.loader9 {
+    width: 256px;
+    height: 256px;
+    margin: 100px auto 0;
+    position: relative;
+}
+.loader9:after {
+    content: "";
+    width: 64px;
+    height: 12px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.05);
+    position: absolute;
+    top: 205px;
+    left: 96px;
+    animation: loading-93 1.25s linear infinite;
+}
+.loader9 .box-1,
+.loader9 .box-2 {
+    border-radius: 2px;
+    position: absolute;
+}
+.loader9 .box-1 {
+    width: 64px;
+    height: 64px;
+    background: var(--bs-success);
+    top: 146px;
+    left: 96px;
+    z-index: 1;
+    animation: loading-9 1.25s linear infinite;
+}
+.loader9 .box-2 {
+    width: 32px;
+    height: 32px;
+    background: var(--bs-danger);
+    top: 114px;
+    left: 112px;
+    animation: loading-92 1.25s linear infinite;
+}
+@-webkit-keyframes loading-9 {
+    0%,
+    5% {
+        width: 128px;
+        height: 32px;
+        transform: translateX(-32px) translateY(35px) rotate(0);
+    }
+    22% {
+        transform: translateX(0) translateY(0) rotate(0);
+    }
+    25% {
+        width: 64px;
+        height: 64px;
+        transform: translateX(0) translateY(-10px) rotate(0);
+    }
+    35% {
+        transform: translateX(0) translateY(-90px) rotate(30deg);
+    }
+    45% {
+        transform: translateX(0) translateY(-130px) rotate(60deg);
+    }
+    50% {
+        transform: translateX(0) translateY(-145px) rotate(75deg);
+    }
+    55% {
+        transform: translateX(0) translateY(-150px) rotate(90deg);
+    }
+    60% {
+        transform: translateX(0) translateY(-140px) rotate(105deg);
+    }
+    65% {
+        transform: translateX(0) translateY(-130px) rotate(120deg);
+    }
+    75% {
+        transform: translateX(0) translateY(-90px) rotate(150deg);
+    }
+    85% {
+        width: 64px;
+        height: 64px;
+        transform: translateX(0) translateY(0) rotate(180deg);
+    }
+    100% {
+        width: 128px;
+        height: 32px;
+        transform: translateX(-32px) translateY(35px) rotate(180deg);
+    }
+}
+@keyframes loading-9 {
+    0%,
+    5% {
+        width: 128px;
+        height: 32px;
+        transform: translateX(-32px) translateY(35px) rotate(0);
+    }
+    22% {
+        transform: translateX(0) translateY(0) rotate(0);
+    }
+    25% {
+        width: 64px;
+        height: 64px;
+        transform: translateX(0) translateY(-10px) rotate(0);
+    }
+    35% {
+        transform: translateX(0) translateY(-90px) rotate(30deg);
+    }
+    45% {
+        transform: translateX(0) translateY(-130px) rotate(60deg);
+    }
+    50% {
+        transform: translateX(0) translateY(-145px) rotate(75deg);
+    }
+    55% {
+        transform: translateX(0) translateY(-150px) rotate(90deg);
+    }
+    60% {
+        transform: translateX(0) translateY(-140px) rotate(105deg);
+    }
+    65% {
+        transform: translateX(0) translateY(-130px) rotate(120deg);
+    }
+    75% {
+        transform: translateX(0) translateY(-90px) rotate(150deg);
+    }
+    85% {
+        width: 64px;
+        height: 64px;
+        transform: translateX(0) translateY(0) rotate(180deg);
+    }
+    100% {
+        width: 128px;
+        height: 32px;
+        transform: translateX(-32px) translateY(35px) rotate(180deg);
+    }
+}
+@-webkit-keyframes loading-92 {
+    0%,
+    5% {
+        width: 64px;
+        height: 16px;
+        transform: translateX(-16px) translateY(51px) rotate(0);
+    }
+    22% {
+        transform: translateX(0) translateY(3px) rotate(0);
+    }
+    25% {
+        width: 32px;
+        height: 32px;
+        transform: translateX(0) translateY(-15px) rotate(0);
+    }
+    35% {
+        transform: translateX(0) translateY(-135px) rotate(-60deg);
+    }
+    45% {
+        transform: translateX(0) translateY(-195px) rotate(-120deg);
+    }
+    50% {
+        transform: translateX(0) translateY(-215px) rotate(-150deg);
+    }
+    55% {
+        transform: translateX(0) translateY(-225px) rotate(-180deg);
+    }
+    60% {
+        transform: translateX(0) translateY(-215px) rotate(-210deg);
+    }
+    65% {
+        transform: translateX(0) translateY(-195px) rotate(-240deg);
+    }
+    75% {
+        transform: translateX(0) translateY(-135px) rotate(-300deg);
+    }
+    85% {
+        width: 32px;
+        height: 32px;
+        transform: translateX(0) translateY(0) rotate(-360deg);
+    }
+    100% {
+        width: 64px;
+        height: 16px;
+        transform: translateX(-16px) translateY(51px) rotate(-360deg);
+    }
+}
+@keyframes loading-92 {
+    0%,
+    5% {
+        width: 64px;
+        height: 16px;
+        transform: translateX(-16px) translateY(51px) rotate(0);
+    }
+    22% {
+        transform: translateX(0) translateY(3px) rotate(0);
+    }
+    25% {
+        width: 32px;
+        height: 32px;
+        transform: translateX(0) translateY(-15px) rotate(0);
+    }
+    35% {
+        transform: translateX(0) translateY(-135px) rotate(-60deg);
+    }
+    45% {
+        transform: translateX(0) translateY(-195px) rotate(-120deg);
+    }
+    50% {
+        transform: translateX(0) translateY(-215px) rotate(-150deg);
+    }
+    55% {
+        transform: translateX(0) translateY(-225px) rotate(-180deg);
+    }
+    60% {
+        transform: translateX(0) translateY(-215px) rotate(-210deg);
+    }
+    65% {
+        transform: translateX(0) translateY(-195px) rotate(-240deg);
+    }
+    75% {
+        transform: translateX(0) translateY(-135px) rotate(-300deg);
+    }
+    85% {
+        width: 32px;
+        height: 32px;
+        transform: translateX(0) translateY(0) rotate(-360deg);
+    }
+    100% {
+        width: 64px;
+        height: 16px;
+        transform: translateX(-16px) translateY(51px) rotate(-360deg);
+    }
+}
+@-webkit-keyframes loading-93 {
+    0%,
+    100% {
+        transform: scale(2.5, 1);
+    }
+    30%,
+    85% {
+        transform: scale(1.5, 1);
+    }
+    55% {
+        transform: scale(0.8, 0.8);
+    }
+}
+@keyframes loading-93 {
+    0%,
+    100% {
+        transform: scale(2.5, 1);
+    }
+    30%,
+    85% {
+        transform: scale(1.5, 1);
+    }
+    55% {
+        transform: scale(0.8, 0.8);
+    }
+}

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

@@ -1,6 +1,7 @@
 import { NgIf, NgFor, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output } from '@angular/core';
+import { EventEmitter, forwardRef, Component, Input, Output } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 class YsFileUploadComponent {
     fileList;
@@ -28,10 +29,10 @@ class YsFileUploadComponent {
     progressValueMax = 100;
     /**Display cancel upload button */
     isCancel = false;
-    /**Event to get choosed files */
-    choosed = new EventEmitter();
+    /**Event to get files */
+    change = new EventEmitter();
     /**Event of selected file */
-    selected = new EventEmitter();
+    select = new EventEmitter();
     /**Event of cancel upload button */
     cancel = new EventEmitter();
     /**Disable elements */
@@ -55,7 +56,7 @@ class YsFileUploadComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    onChoosedFiles(event) {
+    onChangeFiles(event) {
         this.fileList = event.target.files;
         if (this.fileList?.length) {
             if (!this.multiple) {
@@ -72,7 +73,7 @@ class YsFileUploadComponent {
         }
         this.onChange(this.files);
         this.onTouched(this.files);
-        this.choosed.emit(this.files);
+        this.change.emit(this.files);
         event.target.value = null;
     }
     removeFile(file) {
@@ -80,25 +81,37 @@ class YsFileUploadComponent {
         this.files.splice(index, 1);
         this.onChange(this.files);
         this.onTouched(this.files);
-        this.choosed.emit(this.files);
+        this.change.emit(this.files);
         if (this.selectedFile == file) {
             this.selectedFile = undefined;
-            this.selected.emit(undefined);
+            this.select.emit(undefined);
         }
     }
     onSelectFile(file) {
         this.selectedFile = file;
-        this.selected.emit(this.selectedFile);
+        this.select.emit(this.selectedFile);
     }
     cancelUpload() {
         this.cancel.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsFileUploadComponent, isStandalone: true, selector: "ys-file-upload", inputs: { multiple: "multiple", accept: "accept", uploadLabel: "uploadLabel", uploadStyleClass: "uploadStyleClass", uploadIconClass: "uploadIconClass", removeIconClass: "removeIconClass", isHorizontal: "isHorizontal", isRemove: "isRemove", message: "message", progressValue: "progressValue", progressValueMax: "progressValueMax", isCancel: "isCancel", disabled: "disabled" }, outputs: { choosed: "choosed", selected: "selected", cancel: "cancel" }, ngImport: i0, template: "<input class=\"form-control d-none file-upload\" type=\"file\" id=\"ysFileUpload\" #ysFileUpload [multiple]=\"multiple\"\r\n    [accept]=\"accept\" [disabled]=\"disabled\" (change)=\"onChoosedFiles($event)\">\r\n\r\n<div class=\"file-upload\">\r\n    <div class=\"row\">\r\n        <div class=\"col\">\r\n            <button class=\"btn btn-primary btn-upload {{uploadStyleClass}}\" (click)=\"ysFileUpload.click()\"\r\n                [disabled]=\"disabled\">\r\n                <i [ngClass]=\"uploadIconClass\"></i>\r\n                <span class=\"ms-2\" *ngIf=\"uploadLabel\">{{uploadLabel}}</span>\r\n            </button>\r\n\r\n            <span class=\"ms-2\">{{files.length ? '' : message}}</span>\r\n\r\n            <ul *ngIf=\"files.length\" class=\"file-upload-list list-group mt-2\"\r\n                [ngClass]=\"{'list-group-horizontal': isHorizontal}\">\r\n                <a class=\"file-upload-item list-group-item d-flex align-items-center\" role=\"button\"\r\n                    *ngFor=\"let file of files\" (click)=\"onSelectFile(file)\"\r\n                    [ngClass]=\"{'active': file == selectedFile, 'disabled': disabled}\">\r\n                    <span class=\"me-2\">{{file.name}}</span>\r\n                    <button *ngIf=\"isRemove\" class=\"btn btn-outline-danger btn-sm ms-auto\" type=\"button\"\r\n                        id=\"removeFileButton\" (click)=\"removeFile(file); $event.stopPropagation();\"\r\n                        [disabled]=\"disabled\">\r\n                        <i [ngClass]=\"removeIconClass\"></i>\r\n                    </button>\r\n                </a>\r\n            </ul>\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"progress mt-2\" style=\"height: 20px;\" *ngIf=\"progressValue\">\r\n    <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progressValue\" [attr.aria-valuenow]=\"progressValue\"\r\n        aria-valuemin=\"0\" [attr.aria-valuemax]=\"progressValueMax\"></div>\r\n\r\n    <button *ngIf=\"isCancel && progressValue < progressValueMax\" class=\"btn btn-danger btn-sm btn-upload-cancel d-flex\"\r\n        (click)=\"cancelUpload()\">\r\n        <i class=\"fa fa-times\" (click)=\"cancelUpload()\"></i>\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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsFileUploadComponent, isStandalone: true, selector: "ys-file-upload", inputs: { multiple: "multiple", accept: "accept", uploadLabel: "uploadLabel", uploadStyleClass: "uploadStyleClass", uploadIconClass: "uploadIconClass", removeIconClass: "removeIconClass", isHorizontal: "isHorizontal", isRemove: "isRemove", message: "message", progressValue: "progressValue", progressValueMax: "progressValueMax", isCancel: "isCancel", disabled: "disabled" }, outputs: { change: "change", select: "select", cancel: "cancel" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => YsFileUploadComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<input class=\"form-control d-none file-upload\" type=\"file\" id=\"ysFileUpload\" #ysFileUpload [multiple]=\"multiple\"\r\n    [accept]=\"accept\" [disabled]=\"disabled\" (change)=\"onChangeFiles($event)\">\r\n\r\n<div class=\"file-upload\">\r\n    <div class=\"row\">\r\n        <div class=\"col\">\r\n            <button class=\"btn btn-primary btn-upload {{uploadStyleClass}}\" (click)=\"ysFileUpload.click()\"\r\n                [disabled]=\"disabled\">\r\n                <i [ngClass]=\"uploadIconClass\"></i>\r\n                <span class=\"ms-2\" *ngIf=\"uploadLabel\">{{uploadLabel}}</span>\r\n            </button>\r\n\r\n            <span class=\"ms-2\">{{files.length ? '' : message}}</span>\r\n\r\n            <ul *ngIf=\"files.length\" class=\"file-upload-list list-group mt-2\"\r\n                [ngClass]=\"{'list-group-horizontal': isHorizontal}\">\r\n                <a class=\"file-upload-item list-group-item d-flex align-items-center\" role=\"button\"\r\n                    *ngFor=\"let file of files\" (click)=\"onSelectFile(file)\"\r\n                    [ngClass]=\"{'active': file == selectedFile, 'disabled': disabled}\">\r\n                    <span class=\"me-2\">{{file.name}}</span>\r\n                    <button *ngIf=\"isRemove\" class=\"btn btn-outline-danger btn-sm ms-auto\" type=\"button\"\r\n                        id=\"removeFileButton\" (click)=\"removeFile(file); $event.stopPropagation();\"\r\n                        [disabled]=\"disabled\">\r\n                        <i [ngClass]=\"removeIconClass\"></i>\r\n                    </button>\r\n                </a>\r\n            </ul>\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"progress mt-2\" style=\"height: 20px;\" *ngIf=\"progressValue\">\r\n    <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progressValue\" [attr.aria-valuenow]=\"progressValue\"\r\n        aria-valuemin=\"0\" [attr.aria-valuemax]=\"progressValueMax\"></div>\r\n\r\n    <button *ngIf=\"isCancel && progressValue < progressValueMax\" class=\"btn btn-danger btn-sm btn-upload-cancel d-flex\"\r\n        (click)=\"cancelUpload()\">\r\n        <i class=\"fa fa-times\" (click)=\"cancelUpload()\"></i>\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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-file-upload', imports: [NgIf, NgFor, NgClass], template: "<input class=\"form-control d-none file-upload\" type=\"file\" id=\"ysFileUpload\" #ysFileUpload [multiple]=\"multiple\"\r\n    [accept]=\"accept\" [disabled]=\"disabled\" (change)=\"onChoosedFiles($event)\">\r\n\r\n<div class=\"file-upload\">\r\n    <div class=\"row\">\r\n        <div class=\"col\">\r\n            <button class=\"btn btn-primary btn-upload {{uploadStyleClass}}\" (click)=\"ysFileUpload.click()\"\r\n                [disabled]=\"disabled\">\r\n                <i [ngClass]=\"uploadIconClass\"></i>\r\n                <span class=\"ms-2\" *ngIf=\"uploadLabel\">{{uploadLabel}}</span>\r\n            </button>\r\n\r\n            <span class=\"ms-2\">{{files.length ? '' : message}}</span>\r\n\r\n            <ul *ngIf=\"files.length\" class=\"file-upload-list list-group mt-2\"\r\n                [ngClass]=\"{'list-group-horizontal': isHorizontal}\">\r\n                <a class=\"file-upload-item list-group-item d-flex align-items-center\" role=\"button\"\r\n                    *ngFor=\"let file of files\" (click)=\"onSelectFile(file)\"\r\n                    [ngClass]=\"{'active': file == selectedFile, 'disabled': disabled}\">\r\n                    <span class=\"me-2\">{{file.name}}</span>\r\n                    <button *ngIf=\"isRemove\" class=\"btn btn-outline-danger btn-sm ms-auto\" type=\"button\"\r\n                        id=\"removeFileButton\" (click)=\"removeFile(file); $event.stopPropagation();\"\r\n                        [disabled]=\"disabled\">\r\n                        <i [ngClass]=\"removeIconClass\"></i>\r\n                    </button>\r\n                </a>\r\n            </ul>\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"progress mt-2\" style=\"height: 20px;\" *ngIf=\"progressValue\">\r\n    <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progressValue\" [attr.aria-valuenow]=\"progressValue\"\r\n        aria-valuemin=\"0\" [attr.aria-valuemax]=\"progressValueMax\"></div>\r\n\r\n    <button *ngIf=\"isCancel && progressValue < progressValueMax\" class=\"btn btn-danger btn-sm btn-upload-cancel d-flex\"\r\n        (click)=\"cancelUpload()\">\r\n        <i class=\"fa fa-times\" (click)=\"cancelUpload()\"></i>\r\n    </button>\r\n</div>" }]
+            args: [{ selector: 'ys-file-upload', imports: [NgIf, NgFor, NgClass], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsFileUploadComponent),
+                            multi: true
+                        }
+                    ], template: "<input class=\"form-control d-none file-upload\" type=\"file\" id=\"ysFileUpload\" #ysFileUpload [multiple]=\"multiple\"\r\n    [accept]=\"accept\" [disabled]=\"disabled\" (change)=\"onChangeFiles($event)\">\r\n\r\n<div class=\"file-upload\">\r\n    <div class=\"row\">\r\n        <div class=\"col\">\r\n            <button class=\"btn btn-primary btn-upload {{uploadStyleClass}}\" (click)=\"ysFileUpload.click()\"\r\n                [disabled]=\"disabled\">\r\n                <i [ngClass]=\"uploadIconClass\"></i>\r\n                <span class=\"ms-2\" *ngIf=\"uploadLabel\">{{uploadLabel}}</span>\r\n            </button>\r\n\r\n            <span class=\"ms-2\">{{files.length ? '' : message}}</span>\r\n\r\n            <ul *ngIf=\"files.length\" class=\"file-upload-list list-group mt-2\"\r\n                [ngClass]=\"{'list-group-horizontal': isHorizontal}\">\r\n                <a class=\"file-upload-item list-group-item d-flex align-items-center\" role=\"button\"\r\n                    *ngFor=\"let file of files\" (click)=\"onSelectFile(file)\"\r\n                    [ngClass]=\"{'active': file == selectedFile, 'disabled': disabled}\">\r\n                    <span class=\"me-2\">{{file.name}}</span>\r\n                    <button *ngIf=\"isRemove\" class=\"btn btn-outline-danger btn-sm ms-auto\" type=\"button\"\r\n                        id=\"removeFileButton\" (click)=\"removeFile(file); $event.stopPropagation();\"\r\n                        [disabled]=\"disabled\">\r\n                        <i [ngClass]=\"removeIconClass\"></i>\r\n                    </button>\r\n                </a>\r\n            </ul>\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"progress mt-2\" style=\"height: 20px;\" *ngIf=\"progressValue\">\r\n    <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progressValue\" [attr.aria-valuenow]=\"progressValue\"\r\n        aria-valuemin=\"0\" [attr.aria-valuemax]=\"progressValueMax\"></div>\r\n\r\n    <button *ngIf=\"isCancel && progressValue < progressValueMax\" class=\"btn btn-danger btn-sm btn-upload-cancel d-flex\"\r\n        (click)=\"cancelUpload()\">\r\n        <i class=\"fa fa-times\" (click)=\"cancelUpload()\"></i>\r\n    </button>\r\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { multiple: [{
                 type: Input
             }], accept: [{
@@ -123,9 +136,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                 type: Input
             }], isCancel: [{
                 type: Input
-            }], choosed: [{
+            }], change: [{
                 type: Output
-            }], selected: [{
+            }], select: [{
                 type: Output
             }], cancel: [{
                 type: Output

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

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

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

@@ -1,4 +1,4 @@
-import { NgIf, NgFor, NgClass, JsonPipe } from '@angular/common';
+import { NgIf, NgFor } from '@angular/common';
 import * as i0 from '@angular/core';
 import { forwardRef, Component, Input } from '@angular/core';
 import * as i1 from '@angular/forms';
@@ -16,16 +16,24 @@ class YsSelectComponent {
     invalidStyleClass = 'is-invalid';
     valid = false;
     validStyleClass = 'is-valid';
+    /**Support multiple attribute */
     multiple = false;
+    /**Size of multiple attribute */
+    size;
     /**Display clear button */
     isClear = false;
-    isDisabled = false;
+    disabled = false;
     onChange = () => { };
     onTouched = () => { };
     value;
     writeValue(obj) {
-        if (this.placeholder && !obj) {
-            this.value = undefined;
+        if (!this.multiple && this.placeholder && !obj) {
+            this.value = null;
+            this.onChange(this.value);
+            return;
+        }
+        if (this.multiple && !obj) {
+            this.multiple ? this.value = [] : this.value = null;
             this.onChange(this.value);
             return;
         }
@@ -34,7 +42,7 @@ class YsSelectComponent {
                 this.value = obj[0];
             }
             else {
-                this.value = undefined;
+                this.value = null;
             }
             this.onChange(this.value);
             return;
@@ -48,37 +56,37 @@ class YsSelectComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
+        this.disabled = isDisabled;
     }
     onModelChange(option) {
         this.onChange(option);
         this.onTouched(option);
     }
     clearValue() {
-        this.value = undefined;
+        this.multiple ? this.value = [] : this.value = null;
         this.onModelChange(this.value);
     }
     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", isClear: "isClear" }, providers: [
+    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: [
             {
                 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]=\"isDisabled\">\r\n        <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"undefined\" 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]=\"isDisabled\"\r\n        [multiple]=\"multiple\">\r\n\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]=\"isDisabled\">\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\">\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-select', imports: [NgIf, NgFor, NgClass, FormsModule, JsonPipe], providers: [
+            args: [{ selector: 'ys-select', imports: [NgIf, NgFor, 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]=\"isDisabled\">\r\n        <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"undefined\" 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]=\"isDisabled\"\r\n        [multiple]=\"multiple\">\r\n\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]=\"isDisabled\">\r\n        <span class=\"fa fa-times\"></span>\r\n    </button>\r\n</div>" }]
+                    ], 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>" }]
         }], propDecorators: { id: [{
                 type: Input
             }], options: [{
@@ -99,8 +107,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                 type: Input
             }], multiple: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], isClear: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }] } });
 
 /*

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 { JsonPipe, NgClass, 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, NgClass, FormsModule, JsonPipe],\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  @Input() multiple?: boolean = false;\r\n  /**Display clear button */\r\n  @Input() isClear?: boolean = false;\r\n\r\n  isDisabled: 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.placeholder && !obj) {\r\n      this.value = undefined;\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 = undefined;\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.isDisabled = 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.value = undefined;\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]=\"isDisabled\">\r\n        <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"undefined\" 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]=\"isDisabled\"\r\n        [multiple]=\"multiple\">\r\n\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]=\"isDisabled\">\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":["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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"}

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

@@ -9,14 +9,37 @@ class SidebarService {
     constructor() { }
     _isSidebarToggled$ = new BehaviorSubject(true);
     _isSidebar$ = new BehaviorSubject(false);
+    /**
+     * Sidebar toggled state. Default value is true.
+     */
     get isSidebarToggled$() { return this._isSidebarToggled$.asObservable(); }
+    /**
+     * Sidebar display state. Default value is false.
+     */
     get isSidebar$() { return this._isSidebar$.asObservable(); }
+    /**
+     * Change sidebar toggle state.
+     */
     toggleSidebar() {
         this._isSidebarToggled$.next(!this._isSidebarToggled$.value);
     }
+    /**
+     * Set sidebar toggle state.
+     * @param isToggled
+     */
+    setIsSidebarToggled(isToggled) {
+        this._isSidebarToggled$.next(isToggled);
+    }
+    /**
+     * Set sidebar toggle state.
+     * @param isSidebar
+     */
     setIsSidebar(isSidebar) {
         this._isSidebar$.next(isSidebar);
     }
+    /**
+     * Return sidebar toggle state.
+     */
     get sidebarState() {
         return this._isSidebarToggled$.getValue();
     }

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  get isSidebarToggled$() { return this._isSidebarToggled$.asObservable(); }\r\n\r\n  get isSidebar$() { return this._isSidebar$.asObservable(); }\r\n\r\n  toggleSidebar() {\r\n    this._isSidebarToggled$.next(!this._isSidebarToggled$.value);\r\n  }\r\n\r\n  setIsSidebar(isSidebar: boolean) {\r\n    this._isSidebar$.next(isSidebar);\r\n  }\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, 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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"}

package/file-upload/src/ys-file-upload/ys-file-upload.component.d.ts

@@ -27,10 +27,10 @@ export declare class YsFileUploadComponent implements ControlValueAccessor {
     progressValueMax: number;
     /**Display cancel upload button */
     isCancel: boolean;
-    /**Event to get choosed files */
-    choosed: EventEmitter<File[]>;
+    /**Event to get files */
+    change: EventEmitter<File[]>;
     /**Event of selected file */
-    selected: EventEmitter<File | undefined>;
+    select: EventEmitter<File | undefined>;
     /**Event of cancel upload button */
     cancel: EventEmitter<void>;
     /**Disable elements */
@@ -42,10 +42,10 @@ export declare class YsFileUploadComponent implements ControlValueAccessor {
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState?(isDisabled: boolean): void;
-    onChoosedFiles(event: any): void;
+    onChangeFiles(event: any): void;
     removeFile(file: File): void;
     onSelectFile(file: File): void;
     cancelUpload(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<YsFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<YsFileUploadComponent, "ys-file-upload", never, { "multiple": { "alias": "multiple"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "uploadLabel": { "alias": "uploadLabel"; "required": false; }; "uploadStyleClass": { "alias": "uploadStyleClass"; "required": false; }; "uploadIconClass": { "alias": "uploadIconClass"; "required": false; }; "removeIconClass": { "alias": "removeIconClass"; "required": false; }; "isHorizontal": { "alias": "isHorizontal"; "required": false; }; "isRemove": { "alias": "isRemove"; "required": false; }; "message": { "alias": "message"; "required": false; }; "progressValue": { "alias": "progressValue"; "required": false; }; "progressValueMax": { "alias": "progressValueMax"; "required": false; }; "isCancel": { "alias": "isCancel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "choosed": "choosed"; "selected": "selected"; "cancel": "cancel"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YsFileUploadComponent, "ys-file-upload", never, { "multiple": { "alias": "multiple"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "uploadLabel": { "alias": "uploadLabel"; "required": false; }; "uploadStyleClass": { "alias": "uploadStyleClass"; "required": false; }; "uploadIconClass": { "alias": "uploadIconClass"; "required": false; }; "removeIconClass": { "alias": "removeIconClass"; "required": false; }; "isHorizontal": { "alias": "isHorizontal"; "required": false; }; "isRemove": { "alias": "isRemove"; "required": false; }; "message": { "alias": "message"; "required": false; }; "progressValue": { "alias": "progressValue"; "required": false; }; "progressValueMax": { "alias": "progressValueMax"; "required": false; }; "isCancel": { "alias": "isCancel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; "select": "select"; "cancel": "cancel"; }, never, never, true, never>;
 }

package/navbar/src/models/navbar-item.d.ts

@@ -1,10 +1,11 @@
+import { UrlTree } from "@angular/router";
 export interface NavbarItem {
     id?: number;
     label?: string;
     iconClass?: string;
     onClick?: (event?: any) => void;
     items?: NavbarItem[];
-    routerLink?: any[];
+    routerLink?: string | any[] | UrlTree | null | undefined;
     tooltipLabel?: string;
     isDivider?: boolean;
     data?: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoozsoft/yoozsoft-ng",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "peerDependencies": {
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0"
@@ -14,14 +14,14 @@
     "bootstrap",
     "ng-bootstrap",
     "components",
-    "persian datepicker",
-    "file upload",
+    "persian-datepicker",
+    "file-upload",
     "navbar",
     "password-strength",
     "progress",
     "select",
     "sidebar",
-    "tiff viewer",
+    "tiff-viewer",
     "toast"
   ],
   "license": "MIT",
@@ -39,6 +39,10 @@
       "types": "./datepicker/index.d.ts",
       "default": "./fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs"
     },
+    "./file-upload": {
+      "types": "./file-upload/index.d.ts",
+      "default": "./fesm2022/yoozsoft-yoozsoft-ng-file-upload.mjs"
+    },
     "./directives": {
       "types": "./directives/index.d.ts",
       "default": "./fesm2022/yoozsoft-yoozsoft-ng-directives.mjs"
@@ -47,10 +51,6 @@
       "types": "./footer/index.d.ts",
       "default": "./fesm2022/yoozsoft-yoozsoft-ng-footer.mjs"
     },
-    "./file-upload": {
-      "types": "./file-upload/index.d.ts",
-      "default": "./fesm2022/yoozsoft-yoozsoft-ng-file-upload.mjs"
-    },
     "./navbar": {
       "types": "./navbar/index.d.ts",
       "default": "./fesm2022/yoozsoft-yoozsoft-ng-navbar.mjs"
@@ -67,14 +67,14 @@
       "types": "./password-strength/index.d.ts",
       "default": "./fesm2022/yoozsoft-yoozsoft-ng-password-strength.mjs"
     },
-    "./select": {
-      "types": "./select/index.d.ts",
-      "default": "./fesm2022/yoozsoft-yoozsoft-ng-select.mjs"
-    },
     "./progress": {
       "types": "./progress/index.d.ts",
       "default": "./fesm2022/yoozsoft-yoozsoft-ng-progress.mjs"
     },
+    "./select": {
+      "types": "./select/index.d.ts",
+      "default": "./fesm2022/yoozsoft-yoozsoft-ng-select.mjs"
+    },
     "./sidebar": {
       "types": "./sidebar/index.d.ts",
       "default": "./fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs"

package/select/src/ys-select/ys-select.component.d.ts

@@ -12,10 +12,13 @@ export declare class YsSelectComponent implements ControlValueAccessor {
     invalidStyleClass?: string;
     valid?: boolean;
     validStyleClass?: string;
+    /**Support multiple attribute */
     multiple?: boolean;
+    /**Size of multiple attribute */
+    size?: number;
     /**Display clear button */
     isClear?: boolean;
-    isDisabled: boolean;
+    disabled: boolean;
     onChange: any;
     onTouched: any;
     value?: any;
@@ -27,5 +30,5 @@ export declare class YsSelectComponent implements ControlValueAccessor {
     clearValue(): void;
     isObject(item: any): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<YsSelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<YsSelectComponent, "ys-select", never, { "id": { "alias": "id"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "invalidStyleClass": { "alias": "invalidStyleClass"; "required": false; }; "valid": { "alias": "valid"; "required": false; }; "validStyleClass": { "alias": "validStyleClass"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "isClear": { "alias": "isClear"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YsSelectComponent, "ys-select", never, { "id": { "alias": "id"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "invalidStyleClass": { "alias": "invalidStyleClass"; "required": false; }; "valid": { "alias": "valid"; "required": false; }; "validStyleClass": { "alias": "validStyleClass"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "size": { "alias": "size"; "required": false; }; "isClear": { "alias": "isClear"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
 }

package/sidebar/src/models/sidebar-item.d.ts

@@ -1,7 +1,8 @@
+import { UrlTree } from "@angular/router";
 export interface SidebarItem {
     id?: number;
     label?: string;
-    routerLink?: any[];
+    routerLink?: string | any[] | UrlTree | null | undefined;
     iconClass?: string;
     badgeLabel?: string;
     badgeStyleClass?: string;

package/sidebar/src/services/sidebar.service.d.ts

@@ -3,10 +3,31 @@ export declare class SidebarService {
     constructor();
     private _isSidebarToggled$;
     private _isSidebar$;
+    /**
+     * Sidebar toggled state. Default value is true.
+     */
     get isSidebarToggled$(): import("rxjs").Observable<boolean>;
+    /**
+     * Sidebar display state. Default value is false.
+     */
     get isSidebar$(): import("rxjs").Observable<boolean>;
+    /**
+     * Change sidebar toggle state.
+     */
     toggleSidebar(): void;
+    /**
+     * Set sidebar toggle state.
+     * @param isToggled
+     */
+    setIsSidebarToggled(isToggled: boolean): void;
+    /**
+     * Set sidebar toggle state.
+     * @param isSidebar
+     */
     setIsSidebar(isSidebar: boolean): void;
+    /**
+     * Return sidebar toggle state.
+     */
     get sidebarState(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SidebarService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<SidebarService>;