@yoozsoft/yoozsoft-ng 3.1.4 → 4.0.0

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

@@ -0,0 +1,145 @@
+import { NgIf, NgFor, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output } from '@angular/core';
+
+class YsFileUploadComponent {
+    fileList;
+    files = [];
+    selectedFile;
+    multiple = false;
+    accept = '*/*';
+    /**Label of upload button */
+    uploadLabel = 'Choose File';
+    /**Style class of upload button */
+    uploadStyleClass;
+    /**Icon class of upload button */
+    uploadIconClass = 'fa fa-paperclip';
+    /**Icon of remove item button */
+    removeIconClass = 'fa fa-times';
+    /**Files display style */
+    isHorizontal = false;
+    /**Display remove button */
+    isRemove = true;
+    /**Message displayed before choosen file */
+    message = "No file chosen";
+    /**Value of progress element */
+    progressValue;
+    /**Max value of progress element */
+    progressValueMax = 100;
+    /**Display cancel upload button */
+    isCancel = false;
+    /**Event to get choosed files */
+    choosed = new EventEmitter();
+    /**Event of selected file */
+    selected = new EventEmitter();
+    /**Event of cancel upload button */
+    cancel = new EventEmitter();
+    /**Disable elements */
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() { }
+    writeValue(obj) {
+        if (!obj) {
+            this.files = [];
+            return;
+        }
+        this.files = obj;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onChoosedFiles(event) {
+        this.fileList = event.target.files;
+        if (this.fileList?.length) {
+            if (!this.multiple) {
+                this.files = [];
+            }
+            for (let i = 0; i < this.fileList.length; i++) {
+                const file = this.fileList.item(i);
+                this.files.push(file);
+            }
+            this.files.sort((a, b) => a.name > b.name ? -1 : 1);
+        }
+        else {
+            this.files = [];
+        }
+        this.onChange(this.files);
+        this.onTouched(this.files);
+        this.choosed.emit(this.files);
+        event.target.value = null;
+    }
+    removeFile(file) {
+        const index = this.files.indexOf(file);
+        this.files.splice(index, 1);
+        this.onChange(this.files);
+        this.onTouched(this.files);
+        this.choosed.emit(this.files);
+        if (this.selectedFile == file) {
+            this.selectedFile = undefined;
+            this.selected.emit(undefined);
+        }
+    }
+    onSelectFile(file) {
+        this.selectedFile = file;
+        this.selected.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"] }] });
+}
+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>" }]
+        }], ctorParameters: () => [], propDecorators: { multiple: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], uploadLabel: [{
+                type: Input
+            }], uploadStyleClass: [{
+                type: Input
+            }], uploadIconClass: [{
+                type: Input
+            }], removeIconClass: [{
+                type: Input
+            }], isHorizontal: [{
+                type: Input
+            }], isRemove: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], progressValue: [{
+                type: Input
+            }], progressValueMax: [{
+                type: Input
+            }], isCancel: [{
+                type: Input
+            }], choosed: [{
+                type: Output
+            }], selected: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ys-select
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { YsFileUploadComponent };
+//# sourceMappingURL=yoozsoft-yoozsoft-ng-file-upload.mjs.map

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

@@ -0,0 +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":";;;;MAUa,qBAAqB,CAAA;AAExB,IAAA,QAAQ;IAChB,KAAK,GAAW,EAAE;AAClB,IAAA,YAAY;IAEH,QAAQ,GAAY,KAAK;IACzB,MAAM,GAAW,KAAK;;IAEtB,WAAW,GAAY,aAAa;;AAEpC,IAAA,gBAAgB;;IAEhB,eAAe,GAAW,iBAAiB;;IAE3C,eAAe,GAAW,aAAa;;IAEvC,YAAY,GAAY,KAAK;;IAE7B,QAAQ,GAAY,IAAI;;IAGxB,OAAO,GAAW,gBAAgB;;AAGlC,IAAA,aAAa;;IAEb,gBAAgB,GAAW,GAAG;;IAE9B,QAAQ,GAAY,KAAK;;AAGxB,IAAA,OAAO,GAAyB,IAAI,YAAY,EAAE;;AAElD,IAAA,QAAQ,GAAmC,IAAI,YAAY,EAAE;;AAE7D,IAAA,MAAM,GAAuB,IAAI,YAAY,EAAE;;IAGhD,QAAQ,GAAY,KAAK;AAClC,IAAA,QAAQ,GAAQ,MAAK,GAAI;AACzB,IAAA,SAAS,GAAQ,MAAK,GAAI;AAE1B,IAAA,WAAA,GAAA;AAEA,IAAA,UAAU,CAAC,GAAQ,EAAA;QACjB,IAAI,CAAC,GAAG,EAAE;AACR,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE;YACf;;AAGF,QAAA,IAAI,CAAC,KAAK,GAAG,GAAG;;AAElB,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;;AAEpB,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;AAErB,IAAA,gBAAgB,CAAE,UAAmB,EAAA;AACnC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU;;AAG5B,IAAA,cAAc,CAAC,KAAU,EAAA;QACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;AAElC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE;AAEzB,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,CAAC,KAAK,GAAG,EAAE;;AAGjB,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAS,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE;AACzC,gBAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGvB,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;;aAE9C;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE;;AAGjB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;QAE1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAE7B,QAAA,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI;;AAI3B,IAAA,UAAU,CAAC,IAAU,EAAA;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAE3B,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;QAE1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAE7B,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;AAC7B,YAAA,IAAI,CAAC,YAAY,GAAG,SAAS;AAC7B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;;;AAIjC,IAAA,YAAY,CAAC,IAAU,EAAA;AACrB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;IAGvC,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;;uGAjHT,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,2gBCVlC,+rEAwCM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDlCM,IAAI,EAAE,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,KAAK,mHAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAInB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBANjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,WACjB,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,+rEAAA,EAAA;wDAUtB,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,MAAM,EAAA,CAAA;sBAAd;gBAEQ,WAAW,EAAA,CAAA;sBAAnB;gBAEQ,gBAAgB,EAAA,CAAA;sBAAxB;gBAEQ,eAAe,EAAA,CAAA;sBAAvB;gBAEQ,eAAe,EAAA,CAAA;sBAAvB;gBAEQ,YAAY,EAAA,CAAA;sBAApB;gBAEQ,QAAQ,EAAA,CAAA;sBAAhB;gBAGQ,OAAO,EAAA,CAAA;sBAAf;gBAGQ,aAAa,EAAA,CAAA;sBAArB;gBAEQ,gBAAgB,EAAA,CAAA;sBAAxB;gBAEQ,QAAQ,EAAA,CAAA;sBAAhB;gBAGS,OAAO,EAAA,CAAA;sBAAhB;gBAES,QAAQ,EAAA,CAAA;sBAAjB;gBAES,MAAM,EAAA,CAAA;sBAAf;gBAGQ,QAAQ,EAAA,CAAA;sBAAhB;;;AEjDH;;AAEG;;ACFH;;AAEG;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-footer.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/footer/src/ys-footer/ys-footer.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/footer/src/ys-footer/ys-footer.component.html","../../../../projects/yoozsoft/yoozsoft-ng/footer/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/footer/yoozsoft-yoozsoft-ng-footer.ts"],"sourcesContent":["import { NgClass, NgFor, NgIf } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';\r\nimport { FooterBrand, SocialNetwork } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-footer',\r\n  standalone: true,\r\n  imports: [\r\n    NgFor,\r\n    NgIf,\r\n    NgClass,\r\n    NgbTooltip\r\n  ],\r\n  templateUrl: './ys-footer.component.html',\r\n  styleUrls: ['./ys-footer.component.scss']\r\n})\r\nexport class YsFooterComponent {\r\n\r\n  @Input() styleClass: string | null = null;\r\n  @Input() brand: FooterBrand | null = null;\r\n  @Input() copyright: string | null = null;\r\n  @Input() socialNetworks: SocialNetwork[] = [];\r\n\r\n}\r\n","<footer class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"brand || copyright\" class=\"d-flex align-items-center\">\r\n        <a *ngIf=\"brand\" href=\"{{brand.href}}\" class=\"px-2 text-muted text-decoration-none\">\r\n            <img src=\"{{brand.src}}\" alt=\"{{brand.alt}}\" width=\"30\" height=\"24\" class=\"d-inline-block align-text-top\">\r\n        </a>\r\n        <span *ngIf=\"copyright\" class=\"text-muted\">{{copyright}}</span>\r\n    </div>\r\n\r\n    <ul *ngIf=\"socialNetworks.length > 0\" class=\"nav d-flex justify-content-end\">\r\n        <li class=\"px-2\" *ngFor=\"let item of socialNetworks\">\r\n            <a class=\"text-muted social-icon\" href=\"{{item.href}}\" [ngbTooltip]=\"item.tooltip\">\r\n                <em class=\"{{item.iconClass}}\"></em>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n</footer>","/*\r\n * Public API Surface of ys-footer\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/ys-footer/ys-footer.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAiBa,iBAAiB,CAAA;AAZ9B,IAAA,WAAA,GAAA;QAcW,IAAU,CAAA,UAAA,GAAkB,IAAI,CAAC;QACjC,IAAK,CAAA,KAAA,GAAuB,IAAI,CAAC;QACjC,IAAS,CAAA,SAAA,GAAkB,IAAI,CAAC;QAChC,IAAc,CAAA,cAAA,GAAoB,EAAE,CAAC;AAE/C,KAAA;8GAPY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjB9B,65BAeS,EDNL,MAAA,EAAA,CAAA,gGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,KAAK,mHACL,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACJ,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,eAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAKD,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAZ7B,SAAS;+BACE,WAAW,EAAA,UAAA,EACT,IAAI,EACP,OAAA,EAAA;wBACP,KAAK;wBACL,IAAI;wBACJ,OAAO;wBACP,UAAU;AACX,qBAAA,EAAA,QAAA,EAAA,65BAAA,EAAA,MAAA,EAAA,CAAA,gGAAA,CAAA,EAAA,CAAA;8BAMQ,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;;;AEtBR;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-footer.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/footer/src/ys-footer/ys-footer.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/footer/src/ys-footer/ys-footer.component.html","../../../../projects/yoozsoft/yoozsoft-ng/footer/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/footer/yoozsoft-yoozsoft-ng-footer.ts"],"sourcesContent":["import { NgClass, NgFor, NgIf } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';\r\nimport { FooterBrand, SocialNetwork } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-footer',\r\n  imports: [NgFor, NgIf, NgClass, NgbTooltip],\r\n  templateUrl: './ys-footer.component.html',\r\n  styleUrl: './ys-footer.component.scss'\r\n})\r\nexport class YsFooterComponent {\r\n\r\n  @Input() styleClass: string | null = null;\r\n  @Input() brand: FooterBrand | null = null;\r\n  @Input() copyright: string | null = null;\r\n  @Input() socialNetworks: SocialNetwork[] = [];\r\n\r\n}\r\n","<footer class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"brand || copyright\" class=\"d-flex align-items-center\">\r\n        <a *ngIf=\"brand\" href=\"{{brand.href}}\" class=\"px-2 text-muted text-decoration-none\">\r\n            <img src=\"{{brand.src}}\" alt=\"{{brand.alt}}\" class=\"brand-logo d-inline-block align-text-top\">\r\n        </a>\r\n        <span *ngIf=\"copyright\" class=\"text-muted\">{{copyright}}</span>\r\n    </div>\r\n\r\n    <ul *ngIf=\"socialNetworks.length\" class=\"nav d-flex justify-content-end\">\r\n        <li class=\"px-2\" *ngFor=\"let item of socialNetworks\">\r\n            <a class=\"text-muted social-icon\" href=\"{{item.href}}\" [ngbTooltip]=\"item.tooltip\">\r\n                <em class=\"{{item.iconClass}}\"></em>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n</footer>","/*\r\n * Public API Surface of ys-footer\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/ys-footer/ys-footer.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAWa,iBAAiB,CAAA;IAEnB,UAAU,GAAkB,IAAI;IAChC,KAAK,GAAuB,IAAI;IAChC,SAAS,GAAkB,IAAI;IAC/B,cAAc,GAAoB,EAAE;uGALlC,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECX9B,y4BAeS,EDRG,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,KAAK,mHAAE,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,eAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAI/B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;+BACE,WAAW,EAAA,OAAA,EACZ,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,EAAA,QAAA,EAAA,y4BAAA,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA;8BAMlC,UAAU,EAAA,CAAA;sBAAlB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;;;AEhBH;;AAEG;;ACFH;;AAEG;;;;"}

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

@@ -3,19 +3,26 @@ import * as i0 from '@angular/core';
 import { Component, Input } from '@angular/core';
 
 class YsLoadingMaskComponent {
-    constructor() {
-        this.loading = false;
-        this.styleClass = null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsLoadingMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: YsLoadingMaskComponent, isStandalone: true, selector: "ys-loading-mask", inputs: { loading: "loading", styleClass: "styleClass" }, ngImport: i0, template: "<div *ngIf=\"loading\" class=\"loading-mask bg-secondary\" [ngClass]=\"styleClass\">\r\n</div>\r\n<div *ngIf=\"loading\" class=\"loading-content spinner-border text-secondary\" role=\"status\">\r\n    <span class=\"sr-only\">Loading...</span>\r\n</div>", styles: [".loading-mask{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.2;z-index:1001}.loading-content{position:absolute;top:50%;left:50%;z-index:1002}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    loading = false;
+    message = 'Loading ...';
+    backgroundStyleclass = null;
+    spinnerStyleclass = null;
+    messageStyleclass = null;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsLoadingMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsLoadingMaskComponent, isStandalone: true, selector: "ys-loading-mask", inputs: { loading: "loading", message: "message", backgroundStyleclass: "backgroundStyleclass", spinnerStyleclass: "spinnerStyleclass", messageStyleclass: "messageStyleclass" }, ngImport: i0, template: "<div *ngIf=\"loading\"\r\n    class=\"loading-wrapper d-flex flex-column align-items-center justify-content-center h-100 w-100 position-absolute\">\r\n    <div class=\"loading-mask bg-secondary position-absolute h-100 w-100\" [ngClass]=\"backgroundStyleclass\">\r\n    </div>\r\n    <div class=\"loading-content d-flex flex-column align-items-center justify-content-center\">\r\n        <div class=\"loading-spinner spinner-border text-primary\" [ngClass]=\"spinnerStyleclass\" role=\"status\"></div>\r\n        <strong *ngIf=\"message\" class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n            {{message}}\r\n        </strong>\r\n    </div>\r\n</div>", styles: [".loading-wrapper{top:0;left:0;z-index:1001}.loading-wrapper .loading-mask{opacity:.3}.loading-wrapper .loading-content{z-index:1}.loading-wrapper .loading-content .loading-spinner{width:3rem;height:3rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsLoadingMaskComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsLoadingMaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-loading-mask', standalone: true, imports: [NgIf, NgClass], template: "<div *ngIf=\"loading\" class=\"loading-mask bg-secondary\" [ngClass]=\"styleClass\">\r\n</div>\r\n<div *ngIf=\"loading\" class=\"loading-content spinner-border text-secondary\" role=\"status\">\r\n    <span class=\"sr-only\">Loading...</span>\r\n</div>", styles: [".loading-mask{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.2;z-index:1001}.loading-content{position:absolute;top:50%;left:50%;z-index:1002}\n"] }]
+            args: [{ selector: 'ys-loading-mask', imports: [NgIf, NgClass], template: "<div *ngIf=\"loading\"\r\n    class=\"loading-wrapper d-flex flex-column align-items-center justify-content-center h-100 w-100 position-absolute\">\r\n    <div class=\"loading-mask bg-secondary position-absolute h-100 w-100\" [ngClass]=\"backgroundStyleclass\">\r\n    </div>\r\n    <div class=\"loading-content d-flex flex-column align-items-center justify-content-center\">\r\n        <div class=\"loading-spinner spinner-border text-primary\" [ngClass]=\"spinnerStyleclass\" role=\"status\"></div>\r\n        <strong *ngIf=\"message\" class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n            {{message}}\r\n        </strong>\r\n    </div>\r\n</div>", styles: [".loading-wrapper{top:0;left:0;z-index:1001}.loading-wrapper .loading-mask{opacity:.3}.loading-wrapper .loading-content{z-index:1}.loading-wrapper .loading-content .loading-spinner{width:3rem;height:3rem}\n"] }]
         }], propDecorators: { loading: [{
                 type: Input
-            }], styleClass: [{
+            }], message: [{
+                type: Input
+            }], backgroundStyleclass: [{
+                type: Input
+            }], spinnerStyleclass: [{
+                type: Input
+            }], messageStyleclass: [{
                 type: Input
             }] } });
 

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

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-loading.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.component.html","../../../../projects/yoozsoft/yoozsoft-ng/loading/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/yoozsoft-yoozsoft-ng-loading.ts"],"sourcesContent":["import { NgClass, NgIf } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'ys-loading-mask',\r\n  standalone: true,\r\n  imports: [NgIf, NgClass],\r\n  templateUrl: './ys-loading-mask.component.html',\r\n  styleUrls: ['./ys-loading-mask.component.scss']\r\n})\r\nexport class YsLoadingMaskComponent {\r\n  @Input() loading: boolean = false;\r\n  @Input() styleClass: string | null = null;\r\n}\r\n","<div *ngIf=\"loading\" class=\"loading-mask bg-secondary\" [ngClass]=\"styleClass\">\r\n</div>\r\n<div *ngIf=\"loading\" class=\"loading-content spinner-border text-secondary\" role=\"status\">\r\n    <span class=\"sr-only\">Loading...</span>\r\n</div>","/*\r\n * Public API Surface of ys-loading-mask\r\n */\r\n\r\nexport * from './src/ys-loading-mask/ys-loading-mask.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAUa,sBAAsB,CAAA;AAPnC,IAAA,WAAA,GAAA;QAQW,IAAO,CAAA,OAAA,GAAY,KAAK,CAAC;QACzB,IAAU,CAAA,UAAA,GAAkB,IAAI,CAAC;AAC3C,KAAA;8GAHY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,ECVnC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,8PAIM,EDEM,MAAA,EAAA,CAAA,iKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAIZ,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,cACf,IAAI,EAAA,OAAA,EACP,CAAC,IAAI,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,8PAAA,EAAA,MAAA,EAAA,CAAA,iKAAA,CAAA,EAAA,CAAA;8BAKf,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;;;AEZR;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-loading.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/src/ys-loading-mask/ys-loading-mask.component.html","../../../../projects/yoozsoft/yoozsoft-ng/loading/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/loading/yoozsoft-yoozsoft-ng-loading.ts"],"sourcesContent":["import { NgClass, NgIf } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'ys-loading-mask',\r\n  imports: [NgIf, NgClass],\r\n  templateUrl: './ys-loading-mask.component.html',\r\n  styleUrl: './ys-loading-mask.component.scss'\r\n})\r\nexport class YsLoadingMaskComponent {\r\n\r\n  @Input() loading: boolean = false;\r\n  @Input() message: string | null = 'Loading ...';\r\n  @Input() backgroundStyleclass: string | null = null;\r\n  @Input() spinnerStyleclass: string | null = null;\r\n  @Input() messageStyleclass: string | null = null;\r\n\r\n}\r\n","<div *ngIf=\"loading\"\r\n    class=\"loading-wrapper d-flex flex-column align-items-center justify-content-center h-100 w-100 position-absolute\">\r\n    <div class=\"loading-mask bg-secondary position-absolute h-100 w-100\" [ngClass]=\"backgroundStyleclass\">\r\n    </div>\r\n    <div class=\"loading-content d-flex flex-column align-items-center justify-content-center\">\r\n        <div class=\"loading-spinner spinner-border text-primary\" [ngClass]=\"spinnerStyleclass\" role=\"status\"></div>\r\n        <strong *ngIf=\"message\" class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n            {{message}}\r\n        </strong>\r\n    </div>\r\n</div>","/*\r\n * Public API Surface of ys-loading-mask\r\n */\r\n\r\nexport * from './src/ys-loading-mask/ys-loading-mask.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MASa,sBAAsB,CAAA;IAExB,OAAO,GAAY,KAAK;IACxB,OAAO,GAAkB,aAAa;IACtC,oBAAoB,GAAkB,IAAI;IAC1C,iBAAiB,GAAkB,IAAI;IACvC,iBAAiB,GAAkB,IAAI;uGANrC,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,ECTnC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,wqBAUM,EDLM,MAAA,EAAA,CAAA,+MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIZ,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBANlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAClB,OAAA,EAAA,CAAC,IAAI,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,wqBAAA,EAAA,MAAA,EAAA,CAAA,+MAAA,CAAA,EAAA;8BAMf,OAAO,EAAA,CAAA;sBAAf;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,oBAAoB,EAAA,CAAA;sBAA5B;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;;;AEfH;;AAEG;;ACFH;;AAEG;;;;"}

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

@@ -8,43 +8,48 @@ import * as i2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 class YsNavbarComponent {
+    formBuilder;
+    searchForm;
+    id = 'mainNavbar';
+    theme = 'dark';
+    styleClass;
+    brand = null;
+    items = [];
+    endItems = [];
+    isSearch = false;
+    searchLabel = 'Search';
+    searchIconClass;
+    searchPlaceholder = 'Search';
+    isSidebarToggler = false;
+    isSidebarToggled = true;
+    sidebarTogglerIconClass = "fa-solid fa-angle-right";
+    toggleSidebar = new EventEmitter();
+    search = new EventEmitter();
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
-        this.id = 'navbar01';
-        this.theme = 'dark';
-        this.styleClass = 'navbar-expand-lg bg-primary';
-        this.items = [];
-        this.sideItems = [];
-        this.search = false;
-        this.searchLabel = 'Search';
-        this.searchPlaceholder = 'Search';
-        this.brand = null;
-        this.sidebarToggler = false;
-        this.sidebarToggled = false;
-        // @Input() sidebarPinnerIconClass: string = "fa-solid fa-angle-left";
-        this.sidebarTogglerIconClass = "fa-solid fa-angle-right";
-        this.toggleSidebar = new EventEmitter();
-        this.onSearch = new EventEmitter();
         this.searchForm = this.formBuilder.group({
             searchValue: ['']
         });
     }
+    ngOnInit() {
+        // this.toggleSidebar.emit(this.isSidebarToggled);
+    }
     onToggleSidebar() {
-        this.sidebarToggled = !this.sidebarToggled;
-        this.toggleSidebar.emit(this.sidebarToggled);
+        this.isSidebarToggled = !this.isSidebarToggled;
+        this.toggleSidebar.emit(this.isSidebarToggled);
     }
     submitSearch() {
-        this.onSearch.emit(this.searchForm.get('searchValue')?.value);
+        this.search.emit(this.searchForm.get('searchValue')?.value);
     }
     isDropdown(item) {
-        return item.items?.length > 0;
+        return item.items?.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsNavbarComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: YsNavbarComponent, isStandalone: true, selector: "ys-navbar", inputs: { id: "id", theme: "theme", styleClass: "styleClass", items: "items", sideItems: "sideItems", search: "search", searchLabel: "searchLabel", searchIconClass: "searchIconClass", searchPlaceholder: "searchPlaceholder", brand: "brand", sidebarToggler: "sidebarToggler", sidebarToggled: "sidebarToggled", sidebarTogglerIconClass: "sidebarTogglerIconClass" }, outputs: { toggleSidebar: "toggleSidebar", onSearch: "onSearch" }, ngImport: i0, template: "<nav class=\"navbar\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\r\n  <div class=\"container-fluid\">\r\n    <button *ngIf=\"sidebarToggler\" class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\">\r\n      <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\" [ngClass]=\"{'toggled': sidebarToggled}\"></i>\r\n    </button>\r\n\r\n    <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': items.length <= 0}\" href=\"{{brand?.href}}\">\r\n      <img *ngIf=\"brand?.src\" src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"30\" height=\"24\">\r\n      {{brand?.label}}\r\n    </a>\r\n    <button *ngIf=\"items.length > 0 || sideItems.length > 0 || search\" class=\"navbar-toggler ms-auto\" type=\"button\"\r\n      data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\r\n      aria-label=\"Toggle navigation\">\r\n      <span class=\"navbar-toggler-icon\"></span>\r\n    </button>\r\n\r\n    <div class=\"collapse navbar-collapse\" [id]=\"id\">\r\n\r\n      <ul *ngIf=\"items.length > 0\" class=\"navbar-nav me-auto\">\r\n        <ng-container *ngFor=\"let navItem of items\">\r\n          <li *ngIf=\"!isDropdown(navItem)\" class=\"nav-item\">\r\n            <a class=\"nav-link\" [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n              ngbTooltip=\"{{navItem.tooltipLabel}}\">\r\n              <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n              {{navItem.label}}\r\n              <span class=\"visually-hidden\">(current)</span>\r\n            </a>\r\n          </li>\r\n\r\n          <li *ngIf=\"isDropdown(navItem)\" class=\"nav-item dropdown\">\r\n            <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{navItem.tooltipLabel}}\" data-bs-toggle=\"dropdown\"\r\n              role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n              <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n              <span *ngIf=\"navItem.label\">{{navItem.label}}</span>\r\n            </a>\r\n            <div class=\"dropdown-menu px-2\">\r\n              <ng-container *ngFor=\"let navSubItem of navItem.items\">\r\n\r\n                <a *ngIf=\"!navSubItem.isDivider\" class=\"dropdown-item rounded\" [routerLink]=\"navSubItem.routerLink\"\r\n                  [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\r\n                  <i *ngIf=\"navSubItem.iconClass\" class=\"me-2 {{navSubItem.iconClass}}\"></i>\r\n                  <span *ngIf=\"navSubItem.label\">{{navSubItem.label}}</span>\r\n                </a>\r\n\r\n                <div *ngIf=\"navSubItem.isDivider\" class=\"dropdown-divider\"></div>\r\n\r\n              </ng-container>\r\n            </div>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n\r\n      <ul *ngIf=\"sideItems.length > 0\" class=\"navbar-nav flex-row ms-auto nav-side\" [ngClass]=\"{'me-md-2': search}\">\r\n        <ng-container *ngFor=\"let sideItem of sideItems\">\r\n\r\n          <li *ngIf=\"!isDropdown(sideItem)\" class=\"nav-item\">\r\n            <a class=\"nav-link\" [routerLink]=\"sideItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n              (click)=\"sideItem.onClick && sideItem.onClick($event)\" role=\"button\"\r\n              ngbTooltip=\"{{sideItem.tooltipLabel}}\">\r\n              <i *ngIf=\"sideItem.iconClass\" class=\"pe-2 {{sideItem.iconClass}}\"></i>\r\n              <span *ngIf=\"sideItem.label\">{{sideItem.label}}</span>\r\n            </a>\r\n          </li>\r\n\r\n          <li *ngIf=\"isDropdown(sideItem)\" class=\"nav-item dropdown\">\r\n            <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{sideItem.tooltipLabel}}\" data-bs-toggle=\"dropdown\"\r\n              data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n              <i *ngIf=\"sideItem.iconClass\" class=\"pe-2 {{sideItem.iconClass}}\"></i>\r\n              <span *ngIf=\"sideItem.label\">{{sideItem.label}}</span>\r\n            </a>\r\n            <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n              <ng-container *ngFor=\"let sideItemSubItem of sideItem.items\">\r\n\r\n                <a *ngIf=\"!sideItemSubItem.isDivider\" class=\"dropdown-item text-center rounded\"\r\n                  [routerLink]=\"sideItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                  (click)=\"sideItemSubItem.onClick && sideItemSubItem.onClick($event)\" role=\"button\"\r\n                  ngbTooltip=\"{{sideItemSubItem.tooltipLabel}}\">\r\n                  <i *ngIf=\"sideItemSubItem.iconClass\" class=\"me-2 {{sideItemSubItem.iconClass}}\"></i>\r\n                  <span *ngIf=\"sideItemSubItem.label\">{{sideItemSubItem.label}}</span>\r\n                </a>\r\n\r\n                <div *ngIf=\"sideItemSubItem.isDivider\" class=\"dropdown-divider\"></div>\r\n\r\n              </ng-container>\r\n            </div>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n      <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': sideItems.length <= 0}\"\r\n        [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n        <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\r\n          formControlName=\"searchValue\">\r\n        <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\r\n          <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n          <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n        </button>\r\n      </form>\r\n    </div>\r\n  </div>\r\n</nav>", styles: [".sidebar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}.sidebar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar-toggler-icon.toggled{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@media (max-width: 768px){.nav-side .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}}::ng-deep html[dir=rtl] .sidebar-toggler-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep html[dir=rtl] .sidebar-toggler-icon.toggled{-webkit-transform:scaleX(1);transform:scaleX(1)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsNavbarComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsNavbarComponent, isStandalone: true, selector: "ys-navbar", inputs: { id: "id", theme: "theme", styleClass: "styleClass", brand: "brand", items: "items", endItems: "endItems", isSearch: "isSearch", searchLabel: "searchLabel", searchIconClass: "searchIconClass", searchPlaceholder: "searchPlaceholder", isSidebarToggler: "isSidebarToggler", isSidebarToggled: "isSidebarToggled", sidebarTogglerIconClass: "sidebarTogglerIconClass" }, outputs: { toggleSidebar: "toggleSidebar", search: "search" }, ngImport: i0, template: "<nav class=\"navbar navbar-expand-lg bg-primary\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\r\n    <div class=\"container-fluid\">\r\n\r\n        <button *ngIf=\"isSidebarToggler\" class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\"\r\n            aria-expanded=\"false\" aria-label=\"Toggle sidebar\" [ngClass]=\"{'toggled': isSidebarToggled}\">\r\n            <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\"></i>\r\n        </button>\r\n\r\n        <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\r\n            <img *ngIf=\"brand?.src\" src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\r\n                height=\"{{brand?.height}}\">\r\n            {{brand?.label}}\r\n        </a>\r\n\r\n        <button *ngIf=\"items.length || endItems.length || search\" class=\"navbar-toggler ms-auto\" type=\"button\"\r\n            data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\r\n            aria-label=\"Toggle navigation\">\r\n            <span class=\"navbar-toggler-icon\"></span>\r\n        </button>\r\n\r\n        <div class=\"collapse navbar-collapse\" [id]=\"id\">\r\n\r\n            <ul *ngIf=\"items.length\" class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\r\n                <ng-container *ngFor=\"let navItem of items\">\r\n\r\n                    <li *ngIf=\"!isDropdown(navItem)\" class=\"nav-item\">\r\n                        <a class=\"nav-link\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                            (click)=\"navItem.onClick && navItem.onClick($event)\" [attr.aria-disabled]=\"navItem.disabled\"\r\n                            [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                            ngbTooltip=\"{{navItem.tooltipLabel}}\" aria-current=\"page\">\r\n\r\n                            <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n\r\n                            {{navItem.label}}\r\n\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(navItem)\" class=\"nav-item dropdown\">\r\n                        <a class=\"nav-link dropdown-toggle\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                            [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{navItem.tooltipLabel}}\"\r\n                            data-bs-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n\r\n                            <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n\r\n                            <span *ngIf=\"navItem.label\">{{navItem.label}}</span>\r\n\r\n                        </a>\r\n                        <ul class=\"dropdown-menu px-2\">\r\n                            <li *ngFor=\"let navSubItem of navItem.items\">\r\n\r\n                                <a *ngIf=\"!navSubItem.isDivider\" class=\"dropdown-item rounded\"\r\n                                    (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\r\n                                    [ngClass]=\"{'disabled': navSubItem.disabled}\"\r\n                                    [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navSubItem.routerLink\"\r\n                                    [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\r\n\r\n                                    <i *ngIf=\"navSubItem.iconClass\" class=\"me-2 {{navSubItem.iconClass}}\"></i>\r\n\r\n                                    <span *ngIf=\"navSubItem.label\">{{navSubItem.label}}</span>\r\n\r\n                                </a>\r\n\r\n                                <hr *ngIf=\"navSubItem.isDivider\" class=\"dropdown-divider\">\r\n\r\n                            </li>\r\n                        </ul>\r\n                    </li>\r\n\r\n                </ng-container>\r\n\r\n            </ul>\r\n\r\n            <ul *ngIf=\"endItems.length > 0\" class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\r\n                <ng-container *ngFor=\"let endItem of endItems\">\r\n\r\n                    <li *ngIf=\"!isDropdown(endItem)\" class=\"nav-item\">\r\n                        <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                            (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\"\r\n                            ngbTooltip=\"{{endItem.tooltipLabel}}\">\r\n                            <i *ngIf=\"endItem.iconClass\" class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                            <span *ngIf=\"endItem.label\">{{endItem.label}}</span>\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(endItem)\" class=\"nav-item dropdown\">\r\n                        <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{endItem.tooltipLabel}}\"\r\n                            data-bs-toggle=\"dropdown\" data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\"\r\n                            aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                            <i *ngIf=\"endItem.iconClass\" class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                            <span *ngIf=\"endItem.label\">{{endItem.label}}</span>\r\n                        </a>\r\n                        <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n                            <ng-container *ngFor=\"let endItemSubItem of endItem.items\">\r\n\r\n                                <a *ngIf=\"!endItemSubItem.isDivider\" class=\"dropdown-item text-center rounded\"\r\n                                    [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                                    (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\r\n                                    ngbTooltip=\"{{endItemSubItem.tooltipLabel}}\">\r\n                                    <i *ngIf=\"endItemSubItem.iconClass\" class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\r\n                                    <span *ngIf=\"endItemSubItem.label\">{{endItemSubItem.label}}</span>\r\n                                </a>\r\n\r\n                                <div *ngIf=\"endItemSubItem.isDivider\" class=\"dropdown-divider\"></div>\r\n\r\n                            </ng-container>\r\n                        </div>\r\n                    </li>\r\n                </ng-container>\r\n            </ul>\r\n\r\n            <form *ngIf=\"isSearch\" class=\"search-form d-flex\" role=\"search\" [ngClass]=\"{'ms-auto': !endItems.length}\"\r\n                [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n                <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\r\n                    placeholder=\"{{searchPlaceholder}}\" aria-label=\"Search\">\r\n                <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\r\n                    <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n                    <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n                </button>\r\n            </form>\r\n\r\n            <!-- <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': endItems.length <= 0}\"\r\n                [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n                <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\r\n                    formControlName=\"searchValue\">\r\n                <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\r\n                    <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n                    <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n                </button>\r\n            </form> -->\r\n        </div>\r\n    </div>\r\n</nav>", styles: [".sidebar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}.sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@media (prefers-reduced-motion: reduce){.sidebar-toggler{transition:none}}.sidebar-toggler:hover{text-decoration:none}.sidebar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.sidebar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}::ng-deep html[dir=rtl] .sidebar-toggler{-webkit-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep html[dir=rtl] .sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(1);transform:scaleX(1)}::ng-deep html[dir=rtl] .nav-end .nav-link{padding-left:var(--bs-navbar-nav-link-padding-x);padding-right:0!important}::ng-deep html[dir=rtl] .nav-end.nav-end-me-0{margin-left:0!important}@media (max-width: 576px){.navbar-expand-sm .search-form{margin-top:.5rem!important}.navbar-expand-sm .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 768px){.navbar-expand-md .search-form{margin-top:.5rem!important}.navbar-expand-md .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 992px){.navbar-expand-lg .search-form{margin-top:.5rem!important}.navbar-expand-lg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 1200px){.navbar-expand-xlg .search-form{margin-top:.5rem!important}.navbar-expand-xlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xlg .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 1400px){.navbar-expand-xxlg .search-form{margin-top:.5rem!important}.navbar-expand-xxlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxlg .nav-end.nav-end-me-0{margin-right:0!important}}@media (min-width: 576px){.navbar-expand-sm .navbar-nav{margin-bottom:0!important}}@media (min-width: 768px){.navbar-expand-md .navbar-nav{margin-bottom:0!important}}@media (min-width: 992px){.navbar-expand-lg .navbar-nav{margin-bottom:0!important}}@media (min-width: 1200px){.navbar-expand-xlg .navbar-nav{margin-bottom:0!important}}@media (min-width: 1400px){.navbar-expand-xxlg .navbar-nav{margin-bottom:0!important}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-navbar', standalone: true, imports: [
+            args: [{ selector: 'ys-navbar', imports: [
                         NgIf,
                         NgFor,
                         NgClass,
@@ -52,18 +57,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         RouterLinkActive,
                         ReactiveFormsModule,
                         NgbTooltipModule
-                    ], template: "<nav class=\"navbar\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\r\n  <div class=\"container-fluid\">\r\n    <button *ngIf=\"sidebarToggler\" class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\">\r\n      <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\" [ngClass]=\"{'toggled': sidebarToggled}\"></i>\r\n    </button>\r\n\r\n    <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': items.length <= 0}\" href=\"{{brand?.href}}\">\r\n      <img *ngIf=\"brand?.src\" src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"30\" height=\"24\">\r\n      {{brand?.label}}\r\n    </a>\r\n    <button *ngIf=\"items.length > 0 || sideItems.length > 0 || search\" class=\"navbar-toggler ms-auto\" type=\"button\"\r\n      data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\r\n      aria-label=\"Toggle navigation\">\r\n      <span class=\"navbar-toggler-icon\"></span>\r\n    </button>\r\n\r\n    <div class=\"collapse navbar-collapse\" [id]=\"id\">\r\n\r\n      <ul *ngIf=\"items.length > 0\" class=\"navbar-nav me-auto\">\r\n        <ng-container *ngFor=\"let navItem of items\">\r\n          <li *ngIf=\"!isDropdown(navItem)\" class=\"nav-item\">\r\n            <a class=\"nav-link\" [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n              ngbTooltip=\"{{navItem.tooltipLabel}}\">\r\n              <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n              {{navItem.label}}\r\n              <span class=\"visually-hidden\">(current)</span>\r\n            </a>\r\n          </li>\r\n\r\n          <li *ngIf=\"isDropdown(navItem)\" class=\"nav-item dropdown\">\r\n            <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{navItem.tooltipLabel}}\" data-bs-toggle=\"dropdown\"\r\n              role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n              <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n              <span *ngIf=\"navItem.label\">{{navItem.label}}</span>\r\n            </a>\r\n            <div class=\"dropdown-menu px-2\">\r\n              <ng-container *ngFor=\"let navSubItem of navItem.items\">\r\n\r\n                <a *ngIf=\"!navSubItem.isDivider\" class=\"dropdown-item rounded\" [routerLink]=\"navSubItem.routerLink\"\r\n                  [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\r\n                  <i *ngIf=\"navSubItem.iconClass\" class=\"me-2 {{navSubItem.iconClass}}\"></i>\r\n                  <span *ngIf=\"navSubItem.label\">{{navSubItem.label}}</span>\r\n                </a>\r\n\r\n                <div *ngIf=\"navSubItem.isDivider\" class=\"dropdown-divider\"></div>\r\n\r\n              </ng-container>\r\n            </div>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n\r\n      <ul *ngIf=\"sideItems.length > 0\" class=\"navbar-nav flex-row ms-auto nav-side\" [ngClass]=\"{'me-md-2': search}\">\r\n        <ng-container *ngFor=\"let sideItem of sideItems\">\r\n\r\n          <li *ngIf=\"!isDropdown(sideItem)\" class=\"nav-item\">\r\n            <a class=\"nav-link\" [routerLink]=\"sideItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n              (click)=\"sideItem.onClick && sideItem.onClick($event)\" role=\"button\"\r\n              ngbTooltip=\"{{sideItem.tooltipLabel}}\">\r\n              <i *ngIf=\"sideItem.iconClass\" class=\"pe-2 {{sideItem.iconClass}}\"></i>\r\n              <span *ngIf=\"sideItem.label\">{{sideItem.label}}</span>\r\n            </a>\r\n          </li>\r\n\r\n          <li *ngIf=\"isDropdown(sideItem)\" class=\"nav-item dropdown\">\r\n            <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{sideItem.tooltipLabel}}\" data-bs-toggle=\"dropdown\"\r\n              data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n              <i *ngIf=\"sideItem.iconClass\" class=\"pe-2 {{sideItem.iconClass}}\"></i>\r\n              <span *ngIf=\"sideItem.label\">{{sideItem.label}}</span>\r\n            </a>\r\n            <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n              <ng-container *ngFor=\"let sideItemSubItem of sideItem.items\">\r\n\r\n                <a *ngIf=\"!sideItemSubItem.isDivider\" class=\"dropdown-item text-center rounded\"\r\n                  [routerLink]=\"sideItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                  (click)=\"sideItemSubItem.onClick && sideItemSubItem.onClick($event)\" role=\"button\"\r\n                  ngbTooltip=\"{{sideItemSubItem.tooltipLabel}}\">\r\n                  <i *ngIf=\"sideItemSubItem.iconClass\" class=\"me-2 {{sideItemSubItem.iconClass}}\"></i>\r\n                  <span *ngIf=\"sideItemSubItem.label\">{{sideItemSubItem.label}}</span>\r\n                </a>\r\n\r\n                <div *ngIf=\"sideItemSubItem.isDivider\" class=\"dropdown-divider\"></div>\r\n\r\n              </ng-container>\r\n            </div>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n      <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': sideItems.length <= 0}\"\r\n        [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n        <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\r\n          formControlName=\"searchValue\">\r\n        <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\r\n          <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n          <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n        </button>\r\n      </form>\r\n    </div>\r\n  </div>\r\n</nav>", styles: [".sidebar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}.sidebar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar-toggler-icon.toggled{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@media (max-width: 768px){.nav-side .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}}::ng-deep html[dir=rtl] .sidebar-toggler-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep html[dir=rtl] .sidebar-toggler-icon.toggled{-webkit-transform:scaleX(1);transform:scaleX(1)}\n"] }]
+                    ], template: "<nav class=\"navbar navbar-expand-lg bg-primary\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\r\n    <div class=\"container-fluid\">\r\n\r\n        <button *ngIf=\"isSidebarToggler\" class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\"\r\n            aria-expanded=\"false\" aria-label=\"Toggle sidebar\" [ngClass]=\"{'toggled': isSidebarToggled}\">\r\n            <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\"></i>\r\n        </button>\r\n\r\n        <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\r\n            <img *ngIf=\"brand?.src\" src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\r\n                height=\"{{brand?.height}}\">\r\n            {{brand?.label}}\r\n        </a>\r\n\r\n        <button *ngIf=\"items.length || endItems.length || search\" class=\"navbar-toggler ms-auto\" type=\"button\"\r\n            data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\r\n            aria-label=\"Toggle navigation\">\r\n            <span class=\"navbar-toggler-icon\"></span>\r\n        </button>\r\n\r\n        <div class=\"collapse navbar-collapse\" [id]=\"id\">\r\n\r\n            <ul *ngIf=\"items.length\" class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\r\n                <ng-container *ngFor=\"let navItem of items\">\r\n\r\n                    <li *ngIf=\"!isDropdown(navItem)\" class=\"nav-item\">\r\n                        <a class=\"nav-link\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                            (click)=\"navItem.onClick && navItem.onClick($event)\" [attr.aria-disabled]=\"navItem.disabled\"\r\n                            [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                            ngbTooltip=\"{{navItem.tooltipLabel}}\" aria-current=\"page\">\r\n\r\n                            <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n\r\n                            {{navItem.label}}\r\n\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(navItem)\" class=\"nav-item dropdown\">\r\n                        <a class=\"nav-link dropdown-toggle\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                            [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{navItem.tooltipLabel}}\"\r\n                            data-bs-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n\r\n                            <i *ngIf=\"navItem.iconClass\" class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n\r\n                            <span *ngIf=\"navItem.label\">{{navItem.label}}</span>\r\n\r\n                        </a>\r\n                        <ul class=\"dropdown-menu px-2\">\r\n                            <li *ngFor=\"let navSubItem of navItem.items\">\r\n\r\n                                <a *ngIf=\"!navSubItem.isDivider\" class=\"dropdown-item rounded\"\r\n                                    (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\r\n                                    [ngClass]=\"{'disabled': navSubItem.disabled}\"\r\n                                    [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navSubItem.routerLink\"\r\n                                    [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\r\n\r\n                                    <i *ngIf=\"navSubItem.iconClass\" class=\"me-2 {{navSubItem.iconClass}}\"></i>\r\n\r\n                                    <span *ngIf=\"navSubItem.label\">{{navSubItem.label}}</span>\r\n\r\n                                </a>\r\n\r\n                                <hr *ngIf=\"navSubItem.isDivider\" class=\"dropdown-divider\">\r\n\r\n                            </li>\r\n                        </ul>\r\n                    </li>\r\n\r\n                </ng-container>\r\n\r\n            </ul>\r\n\r\n            <ul *ngIf=\"endItems.length > 0\" class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\r\n                <ng-container *ngFor=\"let endItem of endItems\">\r\n\r\n                    <li *ngIf=\"!isDropdown(endItem)\" class=\"nav-item\">\r\n                        <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                            (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\"\r\n                            ngbTooltip=\"{{endItem.tooltipLabel}}\">\r\n                            <i *ngIf=\"endItem.iconClass\" class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                            <span *ngIf=\"endItem.label\">{{endItem.label}}</span>\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(endItem)\" class=\"nav-item dropdown\">\r\n                        <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{endItem.tooltipLabel}}\"\r\n                            data-bs-toggle=\"dropdown\" data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\"\r\n                            aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                            <i *ngIf=\"endItem.iconClass\" class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                            <span *ngIf=\"endItem.label\">{{endItem.label}}</span>\r\n                        </a>\r\n                        <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n                            <ng-container *ngFor=\"let endItemSubItem of endItem.items\">\r\n\r\n                                <a *ngIf=\"!endItemSubItem.isDivider\" class=\"dropdown-item text-center rounded\"\r\n                                    [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                                    (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\r\n                                    ngbTooltip=\"{{endItemSubItem.tooltipLabel}}\">\r\n                                    <i *ngIf=\"endItemSubItem.iconClass\" class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\r\n                                    <span *ngIf=\"endItemSubItem.label\">{{endItemSubItem.label}}</span>\r\n                                </a>\r\n\r\n                                <div *ngIf=\"endItemSubItem.isDivider\" class=\"dropdown-divider\"></div>\r\n\r\n                            </ng-container>\r\n                        </div>\r\n                    </li>\r\n                </ng-container>\r\n            </ul>\r\n\r\n            <form *ngIf=\"isSearch\" class=\"search-form d-flex\" role=\"search\" [ngClass]=\"{'ms-auto': !endItems.length}\"\r\n                [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n                <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\r\n                    placeholder=\"{{searchPlaceholder}}\" aria-label=\"Search\">\r\n                <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\r\n                    <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n                    <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n                </button>\r\n            </form>\r\n\r\n            <!-- <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': endItems.length <= 0}\"\r\n                [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n                <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\r\n                    formControlName=\"searchValue\">\r\n                <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\r\n                    <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n                    <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n                </button>\r\n            </form> -->\r\n        </div>\r\n    </div>\r\n</nav>", styles: [".sidebar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}.sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@media (prefers-reduced-motion: reduce){.sidebar-toggler{transition:none}}.sidebar-toggler:hover{text-decoration:none}.sidebar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.sidebar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}::ng-deep html[dir=rtl] .sidebar-toggler{-webkit-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep html[dir=rtl] .sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(1);transform:scaleX(1)}::ng-deep html[dir=rtl] .nav-end .nav-link{padding-left:var(--bs-navbar-nav-link-padding-x);padding-right:0!important}::ng-deep html[dir=rtl] .nav-end.nav-end-me-0{margin-left:0!important}@media (max-width: 576px){.navbar-expand-sm .search-form{margin-top:.5rem!important}.navbar-expand-sm .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 768px){.navbar-expand-md .search-form{margin-top:.5rem!important}.navbar-expand-md .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 992px){.navbar-expand-lg .search-form{margin-top:.5rem!important}.navbar-expand-lg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 1200px){.navbar-expand-xlg .search-form{margin-top:.5rem!important}.navbar-expand-xlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xlg .nav-end.nav-end-me-0{margin-right:0!important}}@media (max-width: 1400px){.navbar-expand-xxlg .search-form{margin-top:.5rem!important}.navbar-expand-xxlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxlg .nav-end.nav-end-me-0{margin-right:0!important}}@media (min-width: 576px){.navbar-expand-sm .navbar-nav{margin-bottom:0!important}}@media (min-width: 768px){.navbar-expand-md .navbar-nav{margin-bottom:0!important}}@media (min-width: 992px){.navbar-expand-lg .navbar-nav{margin-bottom:0!important}}@media (min-width: 1200px){.navbar-expand-xlg .navbar-nav{margin-bottom:0!important}}@media (min-width: 1400px){.navbar-expand-xxlg .navbar-nav{margin-bottom:0!important}}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { id: [{
                 type: Input
             }], theme: [{
                 type: Input
             }], styleClass: [{
                 type: Input
+            }], brand: [{
+                type: Input
             }], items: [{
                 type: Input
-            }], sideItems: [{
+            }], endItems: [{
                 type: Input
-            }], search: [{
+            }], isSearch: [{
                 type: Input
             }], searchLabel: [{
                 type: Input
@@ -71,17 +78,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], searchPlaceholder: [{
                 type: Input
-            }], brand: [{
-                type: Input
-            }], sidebarToggler: [{
+            }], isSidebarToggler: [{
                 type: Input
-            }], sidebarToggled: [{
+            }], isSidebarToggled: [{
                 type: Input
             }], sidebarTogglerIconClass: [{
                 type: Input
             }], toggleSidebar: [{
                 type: Output
-            }], onSearch: [{
+            }], search: [{
                 type: Output
             }] } });