@yoozsoft/yoozsoft-ng 5.3.5 → 7.1.1

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

@@ -1,73 +1,99 @@
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Input, Output, Component } from '@angular/core';
+import { input, output, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
-class YsFileUploadComponent {
-    fileList;
-    files = [];
-    selectedFile = null;
-    styleClass;
+class YsFileUpload {
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
     /**
      * Allowing upload multiple files
      * Default is false
      */
-    multiple = false;
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     /**
      * Acceptable type of files
      * Default is all file type
      */
-    accept = '*/*';
+    accept = input('*/*', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
     /**
      * Upload button label
      * Default is Choose File
      */
-    uploadLabel = 'Choose File';
+    uploadLabel = input('Choose File', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadLabel" }] : /* istanbul ignore next */ []));
     /**Style class of upload button */
-    uploadStyleClass = 'btn-primary';
+    uploadStyleClass = input('btn-primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadStyleClass" }] : /* istanbul ignore next */ []));
     /**Icon class of upload button */
-    uploadIconClass = 'fa fa-paperclip';
+    uploadIconClass = input('fa fa-paperclip', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadIconClass" }] : /* istanbul ignore next */ []));
     /**Display choosed file remove button */
-    isRemove = true;
+    showRemove = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showRemove" }] : /* istanbul ignore next */ []));
     /**Icon of remove item button */
-    removeIconClass = 'fa fa-times';
+    removeIconClass = input('fa fa-times', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeIconClass" }] : /* istanbul ignore next */ []));
+    cancelIconClass = input('fa fa-times', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelIconClass" }] : /* istanbul ignore next */ []));
     /**
      * Files list display direction
      * Default is vertical (false)
      */
-    isHorizontal = false;
+    horizontal = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "horizontal" }] : /* istanbul ignore next */ []));
     /**Message displayed before choosing file */
-    noFileMessage = "No file chosen";
-    progressStyleClass;
+    noFileMessage = input('No file chosen', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noFileMessage" }] : /* istanbul ignore next */ []));
+    progressStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "progressStyleClass" }] : /* istanbul ignore next */ []));
     /**Value of progress element */
-    progressValue;
+    progressValue = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progressValue" }] : /* istanbul ignore next */ []));
     /**Max value of progress element */
-    progressValueMax = 100;
+    progressValueMax = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progressValueMax" }] : /* istanbul ignore next */ []));
     /**Display cancel upload button */
-    isCancel = false;
-    /**Event to get choosed files */
-    choosed = new EventEmitter();
+    showCancel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCancel" }] : /* istanbul ignore next */ []));
+    /**Event to get selected files */
+    filesSelected = output();
     /**Event of selected file in the list of choosed file*/
-    select = new EventEmitter();
+    select = output();
     /**Event of removed file in the list of choosed file*/
-    removed = new EventEmitter();
+    removed = output();
     /**Event of cancel upload button */
-    cancel = new EventEmitter();
+    cancel = output();
     /**Disable elements */
-    disabled = false;
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    files = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    selectedFile = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedFile" }] : /* istanbul ignore next */ []));
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    inputId = computed(() => this.id() ?? `ys-file-upload-${crypto.randomUUID()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
     constructor() { }
     writeValue(obj) {
         if (!obj) {
-            this.files = [];
+            this.files.set([]);
             return;
         }
         if (!Array.isArray(obj)) {
-            this.files = [obj];
+            this.files.set([obj]);
             return;
         }
-        this.files = obj;
+        this.files.set(obj);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -76,105 +102,69 @@ class YsFileUploadComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.disabledState.set(isDisabled);
     }
     onChangeFiles(event) {
-        this.fileList = event.target.files;
-        if (this.fileList?.length) {
-            if (!this.multiple) {
-                this.files = [];
+        const input = event.target;
+        const files = input.files;
+        if (files?.length) {
+            if (!this.multiple()) {
+                this.files.set([]);
             }
-            for (let i = 0; i < this.fileList.length; i++) {
-                const file = this.fileList.item(i);
-                this.files.push(file);
+            for (let i = 0; i < files.length; i++) {
+                const file = files.item(i);
+                const currentFiles = [...this.files()];
+                currentFiles.push(file);
+                this.files.set(currentFiles);
             }
-            this.files.sort((a, b) => a.name > b.name ? -1 : 1);
+            this.files().sort((a, b) => b.name.localeCompare(a.name));
         }
         else {
-            this.files = [];
+            this.files.set([]);
         }
-        this.onChange(this.files);
-        this.onTouched(this.files);
-        this.choosed.emit(this.files);
-        event.target.value = null;
+        this.onChange(this.files());
+        this.onTouched();
+        this.filesSelected.emit(this.files());
+        input.value = '';
     }
     removeFile(file) {
-        const index = this.files.indexOf(file);
-        this.files.splice(index, 1);
+        this.files.set(this.files().filter((f) => f !== file));
         // this.onChange(this.multiple ? this.files : this.files[0]);
-        this.onChange(this.files);
-        this.onTouched(this.files);
+        this.onChange(this.files());
+        this.onTouched();
         // this.choosed.emit(this.files);
-        if (this.selectedFile == file) {
-            this.selectedFile = null;
-            // this.select.emit(null);
+        if (this.selectedFile() == file) {
+            this.selectedFile.set(null);
+            this.select.emit(null);
         }
         this.removed.emit(file);
     }
     onSelectFile(file) {
-        this.selectedFile = file;
-        this.select.emit(this.selectedFile);
+        this.selectedFile.set(file);
+        this.select.emit(this.selectedFile());
     }
     cancelUpload() {
         this.cancel.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsFileUploadComponent, isStandalone: true, selector: "ys-file-upload", inputs: { styleClass: "styleClass", multiple: "multiple", accept: "accept", uploadLabel: "uploadLabel", uploadStyleClass: "uploadStyleClass", uploadIconClass: "uploadIconClass", isRemove: "isRemove", removeIconClass: "removeIconClass", isHorizontal: "isHorizontal", noFileMessage: "noFileMessage", progressStyleClass: "progressStyleClass", progressValue: "progressValue", progressValueMax: "progressValueMax", isCancel: "isCancel", disabled: "disabled" }, outputs: { choosed: "choosed", select: "select", removed: "removed", cancel: "cancel" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsFileUpload, isStandalone: true, selector: "ys-file-upload", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadStyleClass: { classPropertyName: "uploadStyleClass", publicName: "uploadStyleClass", isSignal: true, isRequired: false, transformFunction: null }, uploadIconClass: { classPropertyName: "uploadIconClass", publicName: "uploadIconClass", isSignal: true, isRequired: false, transformFunction: null }, showRemove: { classPropertyName: "showRemove", publicName: "showRemove", isSignal: true, isRequired: false, transformFunction: null }, removeIconClass: { classPropertyName: "removeIconClass", publicName: "removeIconClass", isSignal: true, isRequired: false, transformFunction: null }, cancelIconClass: { classPropertyName: "cancelIconClass", publicName: "cancelIconClass", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, noFileMessage: { classPropertyName: "noFileMessage", publicName: "noFileMessage", isSignal: true, isRequired: false, transformFunction: null }, progressStyleClass: { classPropertyName: "progressStyleClass", publicName: "progressStyleClass", isSignal: true, isRequired: false, transformFunction: null }, progressValue: { classPropertyName: "progressValue", publicName: "progressValue", isSignal: true, isRequired: false, transformFunction: null }, progressValueMax: { classPropertyName: "progressValueMax", publicName: "progressValueMax", isSignal: true, isRequired: false, transformFunction: null }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", select: "select", removed: "removed", 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\" [ngClass]=\"styleClass\">\r\n    <div class=\"row\">\r\n      <div class=\"col\">\r\n        <button class=\"btn btn-upload\" [ngClass]=\"uploadStyleClass\" (click)=\"ysFileUpload.click()\"\r\n          [disabled]=\"disabled\">\r\n          <i [ngClass]=\"uploadIconClass\"></i>\r\n          @if (uploadLabel) {\r\n            <span class=\"ms-2\">{{uploadLabel}}</span>\r\n          }\r\n        </button>\r\n\r\n        @if (noFileMessage) {\r\n          <span class=\"ms-2\">{{files.length ? '' : noFileMessage}}</span>\r\n        }\r\n\r\n        @if (files.length) {\r\n          <ul class=\"file-upload-list list-group mt-2\"\r\n            [ngClass]=\"{'list-group-horizontal overflow-auto': isHorizontal}\">\r\n            @for (file of files; track file) {\r\n              <a class=\"file-upload-item list-group-item d-flex align-items-center\" role=\"button\"\r\n                (click)=\"onSelectFile(file)\"\r\n                [ngClass]=\"{'active': file == selectedFile, 'disabled': disabled}\">\r\n                <span class=\"me-2\">{{file.name}}</span>\r\n                @if (isRemove) {\r\n                  <button 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                }\r\n              </a>\r\n            }\r\n          </ul>\r\n        }\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (progressValue) {\r\n    <div class=\"progress mt-2\" [ngClass]=\"progressStyleClass\">\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      @if (isCancel && progressValue < progressValueMax) {\r\n        <button class=\"btn btn-danger btn-sm btn-upload-cancel d-flex\"\r\n          (click)=\"cancelUpload()\">\r\n          <i class=\"fa fa-times\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  }", styles: [".progress{height:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+                useExisting: forwardRef(() => YsFileUpload),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<input class=\"form-control d-none file-upload\" type=\"file\" [id]=\"inputId()\" #ysFileUpload [multiple]=\"multiple()\"\n  [accept]=\"accept()\" [disabled]=\"isDisabled()\" (change)=\"onChangeFiles($event)\">\n\n<div class=\"file-upload\" [class]=\"styleClass()\">\n  <div class=\"row\">\n    <div class=\"col\">\n      <button class=\"btn btn-upload\" [class]=\"uploadStyleClass()\" (click)=\"ysFileUpload.click()\"\n        [disabled]=\"isDisabled()\">\n        <i [class]=\"uploadIconClass()\"></i>\n        @if (uploadLabel()) {\n        <span class=\"ms-2\">{{uploadLabel()}}</span>\n        }\n      </button>\n\n      @if (noFileMessage()) {\n      <span class=\"ms-2\">{{files().length ? '' : noFileMessage()}}</span>\n      }\n\n      @if (files().length) {\n      <ul class=\"file-upload-list list-group mt-2\" [ngClass]=\"{'list-group-horizontal overflow-auto': horizontal()}\">\n        @for (file of files(); track file) {\n        <a class=\"file-upload-item list-group-item d-flex align-items-center text-wrap text-break\" role=\"button\"\n          (click)=\"onSelectFile(file)\" [ngClass]=\"{'active': file == selectedFile(), 'disabled': isDisabled()}\">\n          <span class=\"me-2\">{{file.name}}</span>\n          @if (showRemove()) {\n          <button class=\"btn btn-outline-danger btn-sm ms-auto\" type=\"button\" id=\"removeFileButton\"\n            (click)=\"removeFile(file); $event.stopPropagation();\" [disabled]=\"isDisabled()\">\n            <i [class]=\"removeIconClass()\"></i>\n          </button>\n          }\n        </a>\n        }\n      </ul>\n      }\n\n    </div>\n  </div>\n</div>\n\n@if (progressValue() != null) {\n<div class=\"progress mt-2\" [class]=\"progressStyleClass()\">\n  <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progressValue()\" [attr.aria-valuenow]=\"progressValue()\"\n    aria-valuemin=\"0\" [attr.aria-valuemax]=\"progressValueMax()\"></div>\n\n  @if (showCancel() && (progressValue()! < progressValueMax())) { <button\n    class=\"btn btn-danger btn-sm btn-upload-cancel d-flex\" (click)=\"cancelUpload()\">\n    <i [ngClass]=\"cancelIconClass()\"></i>\n    </button>\n    }\n\n</div>\n}", styles: [".progress{height:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsFileUpload, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-file-upload', imports: [NgClass], providers: [
+            args: [{ selector: 'ys-file-upload', imports: [NgClass], changeDetection: ChangeDetectionStrategy.Eager, 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\" [ngClass]=\"styleClass\">\r\n    <div class=\"row\">\r\n      <div class=\"col\">\r\n        <button class=\"btn btn-upload\" [ngClass]=\"uploadStyleClass\" (click)=\"ysFileUpload.click()\"\r\n          [disabled]=\"disabled\">\r\n          <i [ngClass]=\"uploadIconClass\"></i>\r\n          @if (uploadLabel) {\r\n            <span class=\"ms-2\">{{uploadLabel}}</span>\r\n          }\r\n        </button>\r\n\r\n        @if (noFileMessage) {\r\n          <span class=\"ms-2\">{{files.length ? '' : noFileMessage}}</span>\r\n        }\r\n\r\n        @if (files.length) {\r\n          <ul class=\"file-upload-list list-group mt-2\"\r\n            [ngClass]=\"{'list-group-horizontal overflow-auto': isHorizontal}\">\r\n            @for (file of files; track file) {\r\n              <a class=\"file-upload-item list-group-item d-flex align-items-center\" role=\"button\"\r\n                (click)=\"onSelectFile(file)\"\r\n                [ngClass]=\"{'active': file == selectedFile, 'disabled': disabled}\">\r\n                <span class=\"me-2\">{{file.name}}</span>\r\n                @if (isRemove) {\r\n                  <button 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                }\r\n              </a>\r\n            }\r\n          </ul>\r\n        }\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (progressValue) {\r\n    <div class=\"progress mt-2\" [ngClass]=\"progressStyleClass\">\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      @if (isCancel && progressValue < progressValueMax) {\r\n        <button class=\"btn btn-danger btn-sm btn-upload-cancel d-flex\"\r\n          (click)=\"cancelUpload()\">\r\n          <i class=\"fa fa-times\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  }", styles: [".progress{height:20px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { styleClass: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], accept: [{
-                type: Input
-            }], uploadLabel: [{
-                type: Input
-            }], uploadStyleClass: [{
-                type: Input
-            }], uploadIconClass: [{
-                type: Input
-            }], isRemove: [{
-                type: Input
-            }], removeIconClass: [{
-                type: Input
-            }], isHorizontal: [{
-                type: Input
-            }], noFileMessage: [{
-                type: Input
-            }], progressStyleClass: [{
-                type: Input
-            }], progressValue: [{
-                type: Input
-            }], progressValueMax: [{
-                type: Input
-            }], isCancel: [{
-                type: Input
-            }], choosed: [{
-                type: Output
-            }], select: [{
-                type: Output
-            }], removed: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }], disabled: [{
-                type: Input
-            }] } });
+                            useExisting: forwardRef(() => YsFileUpload),
+                            multi: true,
+                        },
+                    ], template: "<input class=\"form-control d-none file-upload\" type=\"file\" [id]=\"inputId()\" #ysFileUpload [multiple]=\"multiple()\"\n  [accept]=\"accept()\" [disabled]=\"isDisabled()\" (change)=\"onChangeFiles($event)\">\n\n<div class=\"file-upload\" [class]=\"styleClass()\">\n  <div class=\"row\">\n    <div class=\"col\">\n      <button class=\"btn btn-upload\" [class]=\"uploadStyleClass()\" (click)=\"ysFileUpload.click()\"\n        [disabled]=\"isDisabled()\">\n        <i [class]=\"uploadIconClass()\"></i>\n        @if (uploadLabel()) {\n        <span class=\"ms-2\">{{uploadLabel()}}</span>\n        }\n      </button>\n\n      @if (noFileMessage()) {\n      <span class=\"ms-2\">{{files().length ? '' : noFileMessage()}}</span>\n      }\n\n      @if (files().length) {\n      <ul class=\"file-upload-list list-group mt-2\" [ngClass]=\"{'list-group-horizontal overflow-auto': horizontal()}\">\n        @for (file of files(); track file) {\n        <a class=\"file-upload-item list-group-item d-flex align-items-center text-wrap text-break\" role=\"button\"\n          (click)=\"onSelectFile(file)\" [ngClass]=\"{'active': file == selectedFile(), 'disabled': isDisabled()}\">\n          <span class=\"me-2\">{{file.name}}</span>\n          @if (showRemove()) {\n          <button class=\"btn btn-outline-danger btn-sm ms-auto\" type=\"button\" id=\"removeFileButton\"\n            (click)=\"removeFile(file); $event.stopPropagation();\" [disabled]=\"isDisabled()\">\n            <i [class]=\"removeIconClass()\"></i>\n          </button>\n          }\n        </a>\n        }\n      </ul>\n      }\n\n    </div>\n  </div>\n</div>\n\n@if (progressValue() != null) {\n<div class=\"progress mt-2\" [class]=\"progressStyleClass()\">\n  <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progressValue()\" [attr.aria-valuenow]=\"progressValue()\"\n    aria-valuemin=\"0\" [attr.aria-valuemax]=\"progressValueMax()\"></div>\n\n  @if (showCancel() && (progressValue()! < progressValueMax())) { <button\n    class=\"btn btn-danger btn-sm btn-upload-cancel d-flex\" (click)=\"cancelUpload()\">\n    <i [ngClass]=\"cancelIconClass()\"></i>\n    </button>\n    }\n\n</div>\n}", styles: [".progress{height:20px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], uploadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadLabel", required: false }] }], uploadStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadStyleClass", required: false }] }], uploadIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadIconClass", required: false }] }], showRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRemove", required: false }] }], removeIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeIconClass", required: false }] }], cancelIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelIconClass", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], noFileMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noFileMessage", required: false }] }], progressStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressStyleClass", required: false }] }], progressValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressValue", required: false }] }], progressValueMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressValueMax", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], select: [{ type: i0.Output, args: ["select"] }], removed: [{ type: i0.Output, args: ["removed"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /*
  * Public API Surface of ys-file-upload
@@ -184,5 +174,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { YsFileUploadComponent };
+export { YsFileUpload };
 //# sourceMappingURL=yoozsoft-yoozsoft-ng-file-upload.mjs.map

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

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

@@ -1,28 +1,23 @@
-import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
-class YsFooterComponent {
-    styleClass = null;
-    brand = null;
-    copyright = null;
-    socialNetworks = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsFooterComponent, isStandalone: true, selector: "ys-footer", inputs: { styleClass: "styleClass", brand: "brand", copyright: "copyright", socialNetworks: "socialNetworks" }, ngImport: i0, template: "<!-- https://colorlib.com/wp/template/bootstrap-footer-19/ -->\r\n<footer [ngClass]=\"styleClass\">\r\n  <!-- <div class=\"row\">\r\n    <div class=\"col-md-6 col-lg-3 mb-md-0 mb-4\">\r\n      <h2 class=\"footer-heading d-flex\">\r\n        <span class=\"icon d-flex align-items-center justify-content-center\"><i class=\"ion-logo-ionic\"></i></span>\r\n        About\r\n      </h2>\r\n      <div class=\"block-23 mb-3\">\r\n        <ul>\r\n          <li><span class=\"icon ion-ios-pin\"></span><span class=\"text\">203 Fake St. Mountain View, San\r\n              Francisco, California, USA</span></li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-call\"></span><span class=\"text\">+2 392 3929 210</span></a>\r\n          </li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-send\"></span><span\r\n                class=\"text\">support&#64;yourdomain.com</span></a></li>\r\n        </ul>\r\n      </div>\r\n\r\n      <form action=\"#\" class=\"subscribe-form\">\r\n        <div class=\"input-group d-flex\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Enter email address\">\r\n          <button type=\"submit\" class=\"btn btn-info\">\r\n            <span class=\"sr-only\">Submit</span>\r\n            <i class=\"fa fa-paper-plane\"></i></button>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n  </div> -->\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <div class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\">\r\n        @if (brand || copyright) {\r\n        <div class=\"d-flex align-items-center\">\r\n          @if (brand) {\r\n          <a 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          }\r\n          @if (copyright) {\r\n          <span class=\"text-muted\">{{copyright}}</span>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        @if (socialNetworks.length) {\r\n        <ul class=\"nav\">\r\n          @for (item of socialNetworks; track item) {\r\n          <li class=\"px-2\">\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          }\r\n        </ul>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\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: 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"] }] });
+class YsFooter {
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    brand = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "brand" }] : /* istanbul ignore next */ []));
+    copyright = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copyright" }] : /* istanbul ignore next */ []));
+    socialNetworks = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "socialNetworks" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsFooter, isStandalone: true, selector: "ys-footer", inputs: { styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null }, socialNetworks: { classPropertyName: "socialNetworks", publicName: "socialNetworks", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- https://colorlib.com/wp/template/bootstrap-footer-19/ -->\r\n<footer [class]=\"styleClass()\">\r\n  <!-- <div class=\"row\">\r\n    <div class=\"col-md-6 col-lg-3 mb-md-0 mb-4\">\r\n      <h2 class=\"footer-heading d-flex\">\r\n        <span class=\"icon d-flex align-items-center justify-content-center\"><i class=\"ion-logo-ionic\"></i></span>\r\n        About\r\n      </h2>\r\n      <div class=\"block-23 mb-3\">\r\n        <ul>\r\n          <li><span class=\"icon ion-ios-pin\"></span><span class=\"text\">203 Fake St. Mountain View, San\r\n              Francisco, California, USA</span></li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-call\"></span><span class=\"text\">+2 392 3929 210</span></a>\r\n          </li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-send\"></span><span\r\n                class=\"text\">support&#64;yourdomain.com</span></a></li>\r\n        </ul>\r\n      </div>\r\n\r\n      <form action=\"#\" class=\"subscribe-form\">\r\n        <div class=\"input-group d-flex\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Enter email address\">\r\n          <button type=\"submit\" class=\"btn btn-info\">\r\n            <span class=\"sr-only\">Submit</span>\r\n            <i class=\"fa fa-paper-plane\"></i></button>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n  </div> -->\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <div class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\">\r\n        @if (brand() || copyright()) {\r\n        <div class=\"d-flex align-items-center\">\r\n          @if (brand()?.href) {\r\n          <a [href]=\"brand()?.href\" class=\"px-2 text-muted text-decoration-none\">\r\n            <img [src]=\"brand()?.src\" [alt]=\"brand()?.alt || 'logo'\" [class]=\"brand()?.styleClass\"\r\n              class=\"brand-logo d-inline-block align-text-top\" />\r\n          </a>\r\n          } @else {\r\n          <img [src]=\"brand()?.src\" [alt]=\"brand()?.alt || 'logo'\" [class]=\"brand()?.styleClass\"\r\n            class=\"brand-logo d-inline-block align-text-top\" />\r\n          }\r\n\r\n          @if (copyright()) {\r\n          <span class=\"text-muted\">{{ copyright() }}</span>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        @if (socialNetworks().length) {\r\n        <ul class=\"nav\">\r\n          @for (social of socialNetworks(); track social.href) {\r\n          <li class=\"px-2\">\r\n            <a class=\"text-muted social-icon\" [href]=\"social.href\" [ngbTooltip]=\"social.tooltip\" target=\"_blank\"\r\n              rel=\"noopener noreferrer\">\r\n              <em [class]=\"social.iconClass\"></em>\r\n            </a>\r\n          </li>\r\n          }\r\n        </ul>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\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: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsFooter, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-footer', imports: [NgClass, NgbTooltip], template: "<!-- https://colorlib.com/wp/template/bootstrap-footer-19/ -->\r\n<footer [ngClass]=\"styleClass\">\r\n  <!-- <div class=\"row\">\r\n    <div class=\"col-md-6 col-lg-3 mb-md-0 mb-4\">\r\n      <h2 class=\"footer-heading d-flex\">\r\n        <span class=\"icon d-flex align-items-center justify-content-center\"><i class=\"ion-logo-ionic\"></i></span>\r\n        About\r\n      </h2>\r\n      <div class=\"block-23 mb-3\">\r\n        <ul>\r\n          <li><span class=\"icon ion-ios-pin\"></span><span class=\"text\">203 Fake St. Mountain View, San\r\n              Francisco, California, USA</span></li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-call\"></span><span class=\"text\">+2 392 3929 210</span></a>\r\n          </li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-send\"></span><span\r\n                class=\"text\">support&#64;yourdomain.com</span></a></li>\r\n        </ul>\r\n      </div>\r\n\r\n      <form action=\"#\" class=\"subscribe-form\">\r\n        <div class=\"input-group d-flex\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Enter email address\">\r\n          <button type=\"submit\" class=\"btn btn-info\">\r\n            <span class=\"sr-only\">Submit</span>\r\n            <i class=\"fa fa-paper-plane\"></i></button>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n  </div> -->\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <div class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\">\r\n        @if (brand || copyright) {\r\n        <div class=\"d-flex align-items-center\">\r\n          @if (brand) {\r\n          <a 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          }\r\n          @if (copyright) {\r\n          <span class=\"text-muted\">{{copyright}}</span>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        @if (socialNetworks.length) {\r\n        <ul class=\"nav\">\r\n          @for (item of socialNetworks; track item) {\r\n          <li class=\"px-2\">\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          }\r\n        </ul>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\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: [{
-                type: Input
-            }], copyright: [{
-                type: Input
-            }], socialNetworks: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ys-footer', imports: [NgbTooltip], changeDetection: ChangeDetectionStrategy.Eager, template: "<!-- https://colorlib.com/wp/template/bootstrap-footer-19/ -->\r\n<footer [class]=\"styleClass()\">\r\n  <!-- <div class=\"row\">\r\n    <div class=\"col-md-6 col-lg-3 mb-md-0 mb-4\">\r\n      <h2 class=\"footer-heading d-flex\">\r\n        <span class=\"icon d-flex align-items-center justify-content-center\"><i class=\"ion-logo-ionic\"></i></span>\r\n        About\r\n      </h2>\r\n      <div class=\"block-23 mb-3\">\r\n        <ul>\r\n          <li><span class=\"icon ion-ios-pin\"></span><span class=\"text\">203 Fake St. Mountain View, San\r\n              Francisco, California, USA</span></li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-call\"></span><span class=\"text\">+2 392 3929 210</span></a>\r\n          </li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-send\"></span><span\r\n                class=\"text\">support&#64;yourdomain.com</span></a></li>\r\n        </ul>\r\n      </div>\r\n\r\n      <form action=\"#\" class=\"subscribe-form\">\r\n        <div class=\"input-group d-flex\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Enter email address\">\r\n          <button type=\"submit\" class=\"btn btn-info\">\r\n            <span class=\"sr-only\">Submit</span>\r\n            <i class=\"fa fa-paper-plane\"></i></button>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n  </div> -->\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <div class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\">\r\n        @if (brand() || copyright()) {\r\n        <div class=\"d-flex align-items-center\">\r\n          @if (brand()?.href) {\r\n          <a [href]=\"brand()?.href\" class=\"px-2 text-muted text-decoration-none\">\r\n            <img [src]=\"brand()?.src\" [alt]=\"brand()?.alt || 'logo'\" [class]=\"brand()?.styleClass\"\r\n              class=\"brand-logo d-inline-block align-text-top\" />\r\n          </a>\r\n          } @else {\r\n          <img [src]=\"brand()?.src\" [alt]=\"brand()?.alt || 'logo'\" [class]=\"brand()?.styleClass\"\r\n            class=\"brand-logo d-inline-block align-text-top\" />\r\n          }\r\n\r\n          @if (copyright()) {\r\n          <span class=\"text-muted\">{{ copyright() }}</span>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        @if (socialNetworks().length) {\r\n        <ul class=\"nav\">\r\n          @for (social of socialNetworks(); track social.href) {\r\n          <li class=\"px-2\">\r\n            <a class=\"text-muted social-icon\" [href]=\"social.href\" [ngbTooltip]=\"social.tooltip\" target=\"_blank\"\r\n              rel=\"noopener noreferrer\">\r\n              <em [class]=\"social.iconClass\"></em>\r\n            </a>\r\n          </li>\r\n          }\r\n        </ul>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\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: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], copyright: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyright", required: false }] }], socialNetworks: [{ type: i0.Input, args: [{ isSignal: true, alias: "socialNetworks", required: false }] }] } });
 
 /*
  * Public API Surface of ys-footer
@@ -32,5 +27,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { YsFooterComponent };
+export { YsFooter };
 //# sourceMappingURL=yoozsoft-yoozsoft-ng-footer.mjs.map

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 } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\nimport { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';\r\nimport { FooterBrand, SocialNetwork } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-footer',\r\n  imports: [NgClass, NgbTooltip],\r\n  templateUrl: './ys-footer.component.html',\r\n  styleUrl: './ys-footer.component.scss'\r\n})\r\nexport class YsFooterComponent {\r\n\r\n  @Input() styleClass: string | null = null;\r\n  @Input() brand: FooterBrand | null = null;\r\n  @Input() copyright: string | null = null;\r\n  @Input() socialNetworks: SocialNetwork[] = [];\r\n\r\n}\r\n","<!-- https://colorlib.com/wp/template/bootstrap-footer-19/ -->\r\n<footer [ngClass]=\"styleClass\">\r\n  <!-- <div class=\"row\">\r\n    <div class=\"col-md-6 col-lg-3 mb-md-0 mb-4\">\r\n      <h2 class=\"footer-heading d-flex\">\r\n        <span class=\"icon d-flex align-items-center justify-content-center\"><i class=\"ion-logo-ionic\"></i></span>\r\n        About\r\n      </h2>\r\n      <div class=\"block-23 mb-3\">\r\n        <ul>\r\n          <li><span class=\"icon ion-ios-pin\"></span><span class=\"text\">203 Fake St. Mountain View, San\r\n              Francisco, California, USA</span></li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-call\"></span><span class=\"text\">+2 392 3929 210</span></a>\r\n          </li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-send\"></span><span\r\n                class=\"text\">support&#64;yourdomain.com</span></a></li>\r\n        </ul>\r\n      </div>\r\n\r\n      <form action=\"#\" class=\"subscribe-form\">\r\n        <div class=\"input-group d-flex\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Enter email address\">\r\n          <button type=\"submit\" class=\"btn btn-info\">\r\n            <span class=\"sr-only\">Submit</span>\r\n            <i class=\"fa fa-paper-plane\"></i></button>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n  </div> -->\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <div class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\">\r\n        @if (brand || copyright) {\r\n        <div class=\"d-flex align-items-center\">\r\n          @if (brand) {\r\n          <a 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          }\r\n          @if (copyright) {\r\n          <span class=\"text-muted\">{{copyright}}</span>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        @if (socialNetworks.length) {\r\n        <ul class=\"nav\">\r\n          @for (item of socialNetworks; track item) {\r\n          <li class=\"px-2\">\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          }\r\n        </ul>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\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;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECX9B,+6EA4DS,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDrDG,OAAO,oFAAE,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,eAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIlB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,OAAA,EACZ,CAAC,OAAO,EAAE,UAAU,CAAC,EAAA,QAAA,EAAA,+6EAAA,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA;8BAMrB,UAAU,EAAA,CAAA;sBAAlB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;;;AEhBH;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-footer.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/footer/src/ys-footer/ys-footer.ts","../../../../projects/yoozsoft/yoozsoft-ng/footer/src/ys-footer/ys-footer.html","../../../../projects/yoozsoft/yoozsoft-ng/footer/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/footer/yoozsoft-yoozsoft-ng-footer.ts"],"sourcesContent":["import { Component, input, ChangeDetectionStrategy } 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: [NgbTooltip],\r\n  templateUrl: './ys-footer.html',\r\n  changeDetection: ChangeDetectionStrategy.Eager,\r\n  styleUrl: './ys-footer.scss',\r\n})\r\nexport class YsFooter {\r\n  styleClass = input<string>();\r\n  brand = input<FooterBrand>();\r\n  copyright = input('');\r\n  socialNetworks = input<readonly SocialNetwork[]>([]);\r\n}\r\n","<!-- https://colorlib.com/wp/template/bootstrap-footer-19/ -->\r\n<footer [class]=\"styleClass()\">\r\n  <!-- <div class=\"row\">\r\n    <div class=\"col-md-6 col-lg-3 mb-md-0 mb-4\">\r\n      <h2 class=\"footer-heading d-flex\">\r\n        <span class=\"icon d-flex align-items-center justify-content-center\"><i class=\"ion-logo-ionic\"></i></span>\r\n        About\r\n      </h2>\r\n      <div class=\"block-23 mb-3\">\r\n        <ul>\r\n          <li><span class=\"icon ion-ios-pin\"></span><span class=\"text\">203 Fake St. Mountain View, San\r\n              Francisco, California, USA</span></li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-call\"></span><span class=\"text\">+2 392 3929 210</span></a>\r\n          </li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-send\"></span><span\r\n                class=\"text\">support&#64;yourdomain.com</span></a></li>\r\n        </ul>\r\n      </div>\r\n\r\n      <form action=\"#\" class=\"subscribe-form\">\r\n        <div class=\"input-group d-flex\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Enter email address\">\r\n          <button type=\"submit\" class=\"btn btn-info\">\r\n            <span class=\"sr-only\">Submit</span>\r\n            <i class=\"fa fa-paper-plane\"></i></button>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n  </div> -->\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <div class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\">\r\n        @if (brand() || copyright()) {\r\n        <div class=\"d-flex align-items-center\">\r\n          @if (brand()?.href) {\r\n          <a [href]=\"brand()?.href\" class=\"px-2 text-muted text-decoration-none\">\r\n            <img [src]=\"brand()?.src\" [alt]=\"brand()?.alt || 'logo'\" [class]=\"brand()?.styleClass\"\r\n              class=\"brand-logo d-inline-block align-text-top\" />\r\n          </a>\r\n          } @else {\r\n          <img [src]=\"brand()?.src\" [alt]=\"brand()?.alt || 'logo'\" [class]=\"brand()?.styleClass\"\r\n            class=\"brand-logo d-inline-block align-text-top\" />\r\n          }\r\n\r\n          @if (copyright()) {\r\n          <span class=\"text-muted\">{{ copyright() }}</span>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        @if (socialNetworks().length) {\r\n        <ul class=\"nav\">\r\n          @for (social of socialNetworks(); track social.href) {\r\n          <li class=\"px-2\">\r\n            <a class=\"text-muted social-icon\" [href]=\"social.href\" [ngbTooltip]=\"social.tooltip\" target=\"_blank\"\r\n              rel=\"noopener noreferrer\">\r\n              <em [class]=\"social.iconClass\"></em>\r\n            </a>\r\n          </li>\r\n          }\r\n        </ul>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\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';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAWa,QAAQ,CAAA;AACnB,IAAA,UAAU,GAAG,KAAK;8FAAU;AAC5B,IAAA,KAAK,GAAG,KAAK;yFAAe;IAC5B,SAAS,GAAG,KAAK,CAAC,EAAE;kFAAC;IACrB,cAAc,GAAG,KAAK,CAA2B,EAAE;uFAAC;uGAJzC,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXrB,yxFAkES,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED5DG,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,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,KAAA,EAAA,CAAA;;2FAKT,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAPpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,WACZ,CAAC,UAAU,CAAC,EAAA,eAAA,EAEJ,uBAAuB,CAAC,KAAK,EAAA,QAAA,EAAA,yxFAAA,EAAA,MAAA,EAAA,CAAA,mIAAA,CAAA,EAAA;;;AERhD;;AAEG;;ACFH;;AAEG;;;;"}

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

@@ -1,30 +1,26 @@
-import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 
-class YsLoadingMaskComponent {
-    loading = false;
-    message = 'Loading ...';
-    backgroundStyleclass = null;
-    spinnerStyleclass = null;
-    messageStyleclass = null;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsLoadingMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsLoadingMaskComponent, isStandalone: true, selector: "ys-loading-mask", inputs: { loading: "loading", message: "message", backgroundStyleclass: "backgroundStyleclass", spinnerStyleclass: "spinnerStyleclass", messageStyleclass: "messageStyleclass" }, ngImport: i0, template: "@if (loading) {\r\n  <div\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      @if (message) {\r\n        <strong class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n          {{message}}\r\n        </strong>\r\n      }\r\n    </div>\r\n  </div>\r\n}", styles: [".loading-wrapper{top:0;left:0;z-index:1001}.loading-wrapper .loading-mask{opacity:.3}.loading-wrapper .loading-content{z-index:1}.loading-wrapper .loading-content .loading-spinner{width:3rem;height:3rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+class YsLoadingMask {
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    message = input('Loading ...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    backgroundStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "backgroundStyleClass" }] : /* istanbul ignore next */ []));
+    spinnerStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "spinnerStyleClass" }] : /* istanbul ignore next */ []));
+    messageStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "messageStyleClass" }] : /* istanbul ignore next */ []));
+    fullScreen = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullScreen" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsLoadingMask, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsLoadingMask, isStandalone: true, selector: "ys-loading-mask", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, backgroundStyleClass: { classPropertyName: "backgroundStyleClass", publicName: "backgroundStyleClass", isSignal: true, isRequired: false, transformFunction: null }, spinnerStyleClass: { classPropertyName: "spinnerStyleClass", publicName: "spinnerStyleClass", isSignal: true, isRequired: false, transformFunction: null }, messageStyleClass: { classPropertyName: "messageStyleClass", publicName: "messageStyleClass", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (loading()) {\n<div class=\"ys-loading-wrapper d-flex flex-column align-items-center justify-content-center\"\n    [class.position-fixed]=\"fullScreen()\" [class.position-absolute]=\"!fullScreen()\">\n    <div class=\"ys-loading-mask bg-secondary position-absolute\" [class]=\"backgroundStyleClass()\">\n    </div>\n    <div class=\"ys-loading-content d-flex flex-column align-items-center justify-content-center\">\n        <div class=\"loading-spinner spinner-border text-primary\" [class]=\"spinnerStyleClass()\" role=\"status\"></div>\n\n        @if (message()) {\n        <strong class=\"badge text-primary mt-4 p-3\" [class]=\"messageStyleClass()\">\n            {{message()}}\n        </strong>\n        }\n\n    </div>\n</div>\n}", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.ys-loading-wrapper{inset:0;z-index:1001;animation:fade-in .15s ease}.ys-loading-wrapper .ys-loading-mask{inset:0;opacity:.3}.ys-loading-wrapper .ys-loading-content .loading-spinner{width:3rem;height:3rem}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsLoadingMaskComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsLoadingMask, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-loading-mask', imports: [NgClass], template: "@if (loading) {\r\n  <div\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      @if (message) {\r\n        <strong class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n          {{message}}\r\n        </strong>\r\n      }\r\n    </div>\r\n  </div>\r\n}", styles: [".loading-wrapper{top:0;left:0;z-index:1001}.loading-wrapper .loading-mask{opacity:.3}.loading-wrapper .loading-content{z-index:1}.loading-wrapper .loading-content .loading-spinner{width:3rem;height:3rem}\n"] }]
-        }], propDecorators: { loading: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], backgroundStyleclass: [{
-                type: Input
-            }], spinnerStyleclass: [{
-                type: Input
-            }], messageStyleclass: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ys-loading-mask', imports: [], changeDetection: ChangeDetectionStrategy.Eager, template: "@if (loading()) {\n<div class=\"ys-loading-wrapper d-flex flex-column align-items-center justify-content-center\"\n    [class.position-fixed]=\"fullScreen()\" [class.position-absolute]=\"!fullScreen()\">\n    <div class=\"ys-loading-mask bg-secondary position-absolute\" [class]=\"backgroundStyleClass()\">\n    </div>\n    <div class=\"ys-loading-content d-flex flex-column align-items-center justify-content-center\">\n        <div class=\"loading-spinner spinner-border text-primary\" [class]=\"spinnerStyleClass()\" role=\"status\"></div>\n\n        @if (message()) {\n        <strong class=\"badge text-primary mt-4 p-3\" [class]=\"messageStyleClass()\">\n            {{message()}}\n        </strong>\n        }\n\n    </div>\n</div>\n}", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.ys-loading-wrapper{inset:0;z-index:1001;animation:fade-in .15s ease}.ys-loading-wrapper .ys-loading-mask{inset:0;opacity:.3}.ys-loading-wrapper .ys-loading-content .loading-spinner{width:3rem;height:3rem}\n"] }]
+        }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], backgroundStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundStyleClass", required: false }] }], spinnerStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerStyleClass", required: false }] }], messageStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageStyleClass", required: false }] }], fullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreen", required: false }] }] } });
 
 /*
  * Public API Surface of ys-loading-mask
@@ -34,5 +30,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { YsLoadingMaskComponent };
+export { YsLoadingMask };
 //# sourceMappingURL=yoozsoft-yoozsoft-ng-loading.mjs.map