@yoozsoft/yoozsoft-ng 5.3.5 → 7.1.1

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

@@ -1,69 +1,75 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component } from '@angular/core';
+import { input, model, output, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { NgbPagination } from '@ng-bootstrap/ng-bootstrap';
 
-class YsPaginationComponent {
-    rowsPerPage = [10, 25, 50];
-    pageReport = true;
-    pageReportTemplate = 'Showing {first} to {last} of {totalRecords} items';
-    ellipses = false;
-    boundaryLinks = true;
-    maxSize = 5;
-    rotate = true;
-    page = 1;
-    pageSizeSelection = true;
-    pageSize = this.rowsPerPage[0] || 10;
-    collectionSize = 0;
-    pageChange = new EventEmitter();
-    get firstIndex() { return (this.page - 1) * this.pageSize; }
-    get lastIndex() { return Math.min(this.firstIndex + this.pageSize, this.collectionSize); }
-    get totalPages() {
-        return Math.ceil(this.collectionSize / this.pageSize) || 1;
+class YsPagination {
+    rowsPerPage = input([10, 25, 50], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowsPerPage" }] : /* istanbul ignore next */ []));
+    pageReport = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageReport" }] : /* istanbul ignore next */ []));
+    pageReportTemplate = input('Showing {first} to {last} of {totalRecords} items', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageReportTemplate" }] : /* istanbul ignore next */ []));
+    ellipses = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ellipses" }] : /* istanbul ignore next */ []));
+    boundaryLinks = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boundaryLinks" }] : /* istanbul ignore next */ []));
+    maxSize = input(5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    rotate = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rotate" }] : /* istanbul ignore next */ []));
+    page = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    pageSizeSelection = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeSelection" }] : /* istanbul ignore next */ []));
+    pageSize = model(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    collectionSize = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collectionSize" }] : /* istanbul ignore next */ []));
+    pageChanged = output();
+    firstIndex = computed(() => (this.page() - 1) * this.pageSize(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstIndex" }] : /* istanbul ignore next */ []));
+    lastIndex = computed(() => Math.min(this.firstIndex() + this.pageSize(), this.collectionSize()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastIndex" }] : /* istanbul ignore next */ []));
+    totalPages = computed(() => Math.ceil(this.collectionSize() / this.pageSize()) || 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    firstRecord = computed(() => (this.collectionSize() === 0 ? 0 : this.firstIndex() + 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstRecord" }] : /* istanbul ignore next */ []));
+    pageReportText = computed(() => this.pageReportTemplate()
+        .replace('{first}', this.firstRecord() + '')
+        .replace('{last}', this.lastIndex() + '')
+        .replace('{totalRecords}', this.collectionSize() + ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageReportText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (!this.rowsPerPage().includes(this.pageSize())) {
+                this.pageSize.set(this.rowsPerPage()[0] ?? 10);
+            }
+        });
     }
     changePage(page) {
-        if (page >= 1 && page <= this.totalPages) {
-            this.page = page;
-            this.pageChange.emit({ page: this.page, pageSize: this.pageSize });
-        }
+        this.page.set(page);
+        this.pageChanged.emit({
+            page,
+            pageSize: this.pageSize(),
+        });
     }
     changePageSize(size) {
-        this.pageSize = +size;
-        this.page = 1;
-        this.pageChange.emit({ page: this.page, pageSize: this.pageSize });
+        this.pageSize.set(+size);
+        this.page.set(1);
+        this.pageChanged.emit({
+            page: 1,
+            pageSize: size,
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsPaginationComponent, isStandalone: true, selector: "ys-pagination", inputs: { rowsPerPage: "rowsPerPage", pageReport: "pageReport", pageReportTemplate: "pageReportTemplate", ellipses: "ellipses", boundaryLinks: "boundaryLinks", maxSize: "maxSize", rotate: "rotate", page: "page", pageSizeSelection: "pageSizeSelection", pageSize: "pageSize", collectionSize: "collectionSize" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"ys-pagination d-flex flex-wrap justify-content-center justify-content-sm-between align-items-center gap-2\">\r\n\r\n    <!-- \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC -->\r\n    <ngb-pagination [collectionSize]=\"collectionSize\" [(page)]=\"page\" [pageSize]=\"pageSize\" [maxSize]=\"maxSize\"\r\n        [rotate]=\"rotate\" [ellipses]=\"ellipses\" [boundaryLinks]=\"boundaryLinks\" (pageChange)=\"changePage($event)\" />\r\n\r\n    <!-- \u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0639\u062F\u0627\u062F \u062F\u0631 \u0647\u0631 \u0635\u0641\u062D\u0647 -->\r\n    @if(pageSizeSelection){\r\n    <select class=\"pagination-select form-select form-select-sm w-auto me-auto\" [(ngModel)]=\"pageSize\"\r\n        (change)=\"changePageSize(pageSize)\" id=\"pagination\">\r\n        @for (opt of rowsPerPage; track opt) {\r\n        <option [value]=\"opt\">{{ opt }}</option>\r\n        }\r\n    </select>\r\n    }\r\n\r\n    <!-- \u06AF\u0632\u0627\u0631\u0634 -->\r\n    @if(pageReport){\r\n    <small class=\"pagination-report text-muted ms-auto\">\r\n        {{ pageReportTemplate\r\n        .replace('{first}', firstIndex + 1 + '')\r\n        .replace('{last}', lastIndex + '')\r\n        .replace('{totalRecords}', collectionSize + '') }}\r\n    </small>\r\n    }\r\n\r\n</div>", styles: [":host::ng-deep .ys-pagination .pagination{margin-bottom:0!important}:host::ng-deep .ys-pagination .pagination-select{height:-webkit-fill-available;height:stretch}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsPagination, isStandalone: true, selector: "ys-pagination", inputs: { rowsPerPage: { classPropertyName: "rowsPerPage", publicName: "rowsPerPage", isSignal: true, isRequired: false, transformFunction: null }, pageReport: { classPropertyName: "pageReport", publicName: "pageReport", isSignal: true, isRequired: false, transformFunction: null }, pageReportTemplate: { classPropertyName: "pageReportTemplate", publicName: "pageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, ellipses: { classPropertyName: "ellipses", publicName: "ellipses", isSignal: true, isRequired: false, transformFunction: null }, boundaryLinks: { classPropertyName: "boundaryLinks", publicName: "boundaryLinks", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSizeSelection: { classPropertyName: "pageSizeSelection", publicName: "pageSizeSelection", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, collectionSize: { classPropertyName: "collectionSize", publicName: "collectionSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", pageChanged: "pageChanged" }, ngImport: i0, template: "<div class=\"ys-pagination d-flex flex-wrap justify-content-center justify-content-sm-between align-items-center gap-2\">\n\n    <!-- \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC -->\n    <ngb-pagination [collectionSize]=\"collectionSize()\" [page]=\"page()\" [pageSize]=\"pageSize()\" [maxSize]=\"maxSize()\"\n        [rotate]=\"rotate()\" [ellipses]=\"ellipses()\" [boundaryLinks]=\"boundaryLinks()\"\n        (pageChange)=\"changePage($event)\" />\n\n    <!-- \u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0639\u062F\u0627\u062F \u062F\u0631 \u0647\u0631 \u0635\u0641\u062D\u0647 -->\n    @if(pageSizeSelection()){\n    <select class=\"pagination-select form-select form-select-sm w-auto me-auto\" [ngModel]=\"pageSize()\"\n        (ngModelChange)=\"changePageSize($event)\" id=\"pagination\">\n        @for (rows of rowsPerPage(); track rows) {\n        <option [value]=\"rows\">{{ rows }}</option>\n        }\n    </select>\n    }\n\n    <!-- \u06AF\u0632\u0627\u0631\u0634 -->\n    @if(pageReport()){\n    <small class=\"pagination-report text-muted ms-auto\">\n        {{ pageReportText() }}\n    </small>\n    }\n\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsPagination, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-pagination', imports: [FormsModule, NgbPagination], template: "<div class=\"ys-pagination d-flex flex-wrap justify-content-center justify-content-sm-between align-items-center gap-2\">\r\n\r\n    <!-- \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC -->\r\n    <ngb-pagination [collectionSize]=\"collectionSize\" [(page)]=\"page\" [pageSize]=\"pageSize\" [maxSize]=\"maxSize\"\r\n        [rotate]=\"rotate\" [ellipses]=\"ellipses\" [boundaryLinks]=\"boundaryLinks\" (pageChange)=\"changePage($event)\" />\r\n\r\n    <!-- \u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0639\u062F\u0627\u062F \u062F\u0631 \u0647\u0631 \u0635\u0641\u062D\u0647 -->\r\n    @if(pageSizeSelection){\r\n    <select class=\"pagination-select form-select form-select-sm w-auto me-auto\" [(ngModel)]=\"pageSize\"\r\n        (change)=\"changePageSize(pageSize)\" id=\"pagination\">\r\n        @for (opt of rowsPerPage; track opt) {\r\n        <option [value]=\"opt\">{{ opt }}</option>\r\n        }\r\n    </select>\r\n    }\r\n\r\n    <!-- \u06AF\u0632\u0627\u0631\u0634 -->\r\n    @if(pageReport){\r\n    <small class=\"pagination-report text-muted ms-auto\">\r\n        {{ pageReportTemplate\r\n        .replace('{first}', firstIndex + 1 + '')\r\n        .replace('{last}', lastIndex + '')\r\n        .replace('{totalRecords}', collectionSize + '') }}\r\n    </small>\r\n    }\r\n\r\n</div>", styles: [":host::ng-deep .ys-pagination .pagination{margin-bottom:0!important}:host::ng-deep .ys-pagination .pagination-select{height:-webkit-fill-available;height:stretch}\n"] }]
-        }], propDecorators: { rowsPerPage: [{
-                type: Input
-            }], pageReport: [{
-                type: Input
-            }], pageReportTemplate: [{
-                type: Input
-            }], ellipses: [{
-                type: Input
-            }], boundaryLinks: [{
-                type: Input
-            }], maxSize: [{
-                type: Input
-            }], rotate: [{
-                type: Input
-            }], page: [{
-                type: Input
-            }], pageSizeSelection: [{
-                type: Input
-            }], pageSize: [{
-                type: Input
-            }], collectionSize: [{
-                type: Input
-            }], pageChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'ys-pagination', imports: [FormsModule, NgbPagination], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"ys-pagination d-flex flex-wrap justify-content-center justify-content-sm-between align-items-center gap-2\">\n\n    <!-- \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC -->\n    <ngb-pagination [collectionSize]=\"collectionSize()\" [page]=\"page()\" [pageSize]=\"pageSize()\" [maxSize]=\"maxSize()\"\n        [rotate]=\"rotate()\" [ellipses]=\"ellipses()\" [boundaryLinks]=\"boundaryLinks()\"\n        (pageChange)=\"changePage($event)\" />\n\n    <!-- \u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0639\u062F\u0627\u062F \u062F\u0631 \u0647\u0631 \u0635\u0641\u062D\u0647 -->\n    @if(pageSizeSelection()){\n    <select class=\"pagination-select form-select form-select-sm w-auto me-auto\" [ngModel]=\"pageSize()\"\n        (ngModelChange)=\"changePageSize($event)\" id=\"pagination\">\n        @for (rows of rowsPerPage(); track rows) {\n        <option [value]=\"rows\">{{ rows }}</option>\n        }\n    </select>\n    }\n\n    <!-- \u06AF\u0632\u0627\u0631\u0634 -->\n    @if(pageReport()){\n    <small class=\"pagination-report text-muted ms-auto\">\n        {{ pageReportText() }}\n    </small>\n    }\n\n</div>" }]
+        }], ctorParameters: () => [], propDecorators: { rowsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPage", required: false }] }], pageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageReport", required: false }] }], pageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageReportTemplate", required: false }] }], ellipses: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipses", required: false }] }], boundaryLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryLinks", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSizeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeSelection", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], collectionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "collectionSize", required: false }] }], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }] } });
 
 /*
  * Public API Surface of ys-pagination
@@ -73,5 +79,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { YsPaginationComponent };
+export { YsPagination };
 //# sourceMappingURL=yoozsoft-yoozsoft-ng-pagination.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-pagination.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/pagination/src/ys-pagination/ys-pagination.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/pagination/src/ys-pagination/ys-pagination.component.html","../../../../projects/yoozsoft/yoozsoft-ng/pagination/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/pagination/yoozsoft-yoozsoft-ng-pagination.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { NgbPagination } from '@ng-bootstrap/ng-bootstrap';\r\n\r\n@Component({\r\n  selector: 'ys-pagination',\r\n  imports: [FormsModule, NgbPagination],\r\n  templateUrl: './ys-pagination.component.html',\r\n  styleUrl: './ys-pagination.component.scss'\r\n})\r\nexport class YsPaginationComponent {\r\n\r\n  @Input() rowsPerPage: number[] = [10, 25, 50];\r\n  @Input() pageReport: boolean = true;\r\n  @Input() pageReportTemplate: string = 'Showing {first} to {last} of {totalRecords} items';\r\n  @Input() ellipses: boolean = false;\r\n  @Input() boundaryLinks: boolean = true;\r\n  @Input() maxSize: number = 5;\r\n  @Input() rotate: boolean = true;\r\n\r\n  @Input() page: number = 1;\r\n  @Input() pageSizeSelection: boolean = true;\r\n  @Input() pageSize: number = this.rowsPerPage[0] || 10;\r\n  @Input() collectionSize: number = 0;\r\n\r\n  @Output() pageChange = new EventEmitter<{ page: number, pageSize: number }>();\r\n\r\n  get firstIndex(): number { return (this.page - 1) * this.pageSize; }\r\n  get lastIndex(): number { return Math.min(this.firstIndex + this.pageSize, this.collectionSize); }\r\n\r\n  get totalPages(): number {\r\n    return Math.ceil(this.collectionSize / this.pageSize) || 1;\r\n  }\r\n\r\n  changePage(page: number): void {\r\n    if (page >= 1 && page <= this.totalPages) {\r\n      this.page = page;\r\n\r\n      this.pageChange.emit({ page: this.page, pageSize: this.pageSize });\r\n    }\r\n  }\r\n\r\n  changePageSize(size: number): void {\r\n    this.pageSize = +size;\r\n    this.page = 1;\r\n    this.pageChange.emit({ page: this.page, pageSize: this.pageSize });\r\n  }\r\n\r\n}","<div class=\"ys-pagination d-flex flex-wrap justify-content-center justify-content-sm-between align-items-center gap-2\">\r\n\r\n    <!-- صفحه‌بندی -->\r\n    <ngb-pagination [collectionSize]=\"collectionSize\" [(page)]=\"page\" [pageSize]=\"pageSize\" [maxSize]=\"maxSize\"\r\n        [rotate]=\"rotate\" [ellipses]=\"ellipses\" [boundaryLinks]=\"boundaryLinks\" (pageChange)=\"changePage($event)\" />\r\n\r\n    <!-- انتخاب تعداد در هر صفحه -->\r\n    @if(pageSizeSelection){\r\n    <select class=\"pagination-select form-select form-select-sm w-auto me-auto\" [(ngModel)]=\"pageSize\"\r\n        (change)=\"changePageSize(pageSize)\" id=\"pagination\">\r\n        @for (opt of rowsPerPage; track opt) {\r\n        <option [value]=\"opt\">{{ opt }}</option>\r\n        }\r\n    </select>\r\n    }\r\n\r\n    <!-- گزارش -->\r\n    @if(pageReport){\r\n    <small class=\"pagination-report text-muted ms-auto\">\r\n        {{ pageReportTemplate\r\n        .replace('{first}', firstIndex + 1 + '')\r\n        .replace('{last}', lastIndex + '')\r\n        .replace('{totalRecords}', collectionSize + '') }}\r\n    </small>\r\n    }\r\n\r\n</div>","/*\r\n * Public API Surface of ys-pagination\r\n */\r\n\r\nexport * from './src/ys-pagination/ys-pagination.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-pagination.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/pagination/src/ys-pagination/ys-pagination.ts","../../../../projects/yoozsoft/yoozsoft-ng/pagination/src/ys-pagination/ys-pagination.html","../../../../projects/yoozsoft/yoozsoft-ng/pagination/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/pagination/yoozsoft-yoozsoft-ng-pagination.ts"],"sourcesContent":["import {\r\n  Component,\r\n  computed,\r\n  effect,\r\n  input,\r\n  model,\r\n  output,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { NgbPagination } from '@ng-bootstrap/ng-bootstrap';\r\n\r\n@Component({\r\n  selector: 'ys-pagination',\r\n  imports: [FormsModule, NgbPagination],\r\n  templateUrl: './ys-pagination.html',\r\n  changeDetection: ChangeDetectionStrategy.Eager,\r\n  styleUrl: './ys-pagination.scss',\r\n})\r\nexport class YsPagination {\r\n  rowsPerPage = input<number[]>([10, 25, 50]);\r\n  pageReport = input(true);\r\n  pageReportTemplate = input<string>('Showing {first} to {last} of {totalRecords} items');\r\n  ellipses = input<boolean>(false);\r\n  boundaryLinks = input<boolean>(true);\r\n  maxSize = input<number>(5);\r\n  rotate = input<boolean>(true);\r\n\r\n  page = model<number>(1);\r\n  pageSizeSelection = input<boolean>(true);\r\n  pageSize = model<number>(10);\r\n  collectionSize = input<number>(0);\r\n\r\n  pageChanged = output<{ page: number; pageSize: number }>();\r\n\r\n  readonly firstIndex = computed<number>(() => (this.page() - 1) * this.pageSize());\r\n\r\n  readonly lastIndex = computed<number>(() =>\r\n    Math.min(this.firstIndex() + this.pageSize(), this.collectionSize()),\r\n  );\r\n\r\n  readonly totalPages = computed<number>(\r\n    () => Math.ceil(this.collectionSize() / this.pageSize()) || 1,\r\n  );\r\n\r\n  readonly firstRecord = computed(() => (this.collectionSize() === 0 ? 0 : this.firstIndex() + 1));\r\n\r\n  readonly pageReportText = computed(() =>\r\n    this.pageReportTemplate()\r\n      .replace('{first}', this.firstRecord() + '')\r\n      .replace('{last}', this.lastIndex() + '')\r\n      .replace('{totalRecords}', this.collectionSize() + ''),\r\n  );\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      if (!this.rowsPerPage().includes(this.pageSize())) {\r\n        this.pageSize.set(this.rowsPerPage()[0] ?? 10);\r\n      }\r\n    });\r\n  }\r\n\r\n  changePage(page: number): void {\r\n    this.page.set(page);\r\n\r\n    this.pageChanged.emit({\r\n      page,\r\n      pageSize: this.pageSize(),\r\n    });\r\n  }\r\n\r\n  changePageSize(size: number): void {\r\n    this.pageSize.set(+size);\r\n    this.page.set(1);\r\n\r\n    this.pageChanged.emit({\r\n      page: 1,\r\n      pageSize: size,\r\n    });\r\n  }\r\n}\r\n","<div class=\"ys-pagination d-flex flex-wrap justify-content-center justify-content-sm-between align-items-center gap-2\">\n\n    <!-- صفحه‌بندی -->\n    <ngb-pagination [collectionSize]=\"collectionSize()\" [page]=\"page()\" [pageSize]=\"pageSize()\" [maxSize]=\"maxSize()\"\n        [rotate]=\"rotate()\" [ellipses]=\"ellipses()\" [boundaryLinks]=\"boundaryLinks()\"\n        (pageChange)=\"changePage($event)\" />\n\n    <!-- انتخاب تعداد در هر صفحه -->\n    @if(pageSizeSelection()){\n    <select class=\"pagination-select form-select form-select-sm w-auto me-auto\" [ngModel]=\"pageSize()\"\n        (ngModelChange)=\"changePageSize($event)\" id=\"pagination\">\n        @for (rows of rowsPerPage(); track rows) {\n        <option [value]=\"rows\">{{ rows }}</option>\n        }\n    </select>\n    }\n\n    <!-- گزارش -->\n    @if(pageReport()){\n    <small class=\"pagination-report text-muted ms-auto\">\n        {{ pageReportText() }}\n    </small>\n    }\n\n</div>","/*\r\n * Public API Surface of ys-pagination\r\n */\r\n\r\nexport * from './src/ys-pagination/ys-pagination';\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-password-strength.mjs

@@ -1,156 +1,168 @@
 import * as i0 from '@angular/core';
-import { Input, Component, Directive } from '@angular/core';
+import { input, signal, computed, effect, ChangeDetectionStrategy, Component, inject, ViewContainerRef, Injector, Directive } from '@angular/core';
+import { Validators, NgControl } from '@angular/forms';
 import { NgClass } from '@angular/common';
-import * as i1 from '@angular/forms';
-import { Validators } from '@angular/forms';
 
-const StrongPasswordRegx = /^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=\D*\d)(?=.*[!@#$%^&*]).{8,}$/;
-const UppercaseRegx = /^.*[A-Z]/;
-const LowercaseRegx = /^.*[a-z]/;
-const DigitRegx = /^.*[0-9].*/;
-const NonAlphanumericRegx = /^.*[!@#$%^&*]/;
+const STRONG_PASSWORD_REGX = /^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=\D*\d)(?=.*[!@#$%^&*]).{8,}$/;
+const UPPERCASE_REGEX = /^.*[A-Z]/;
+const LOWERCASE_REGEX = /^.*[a-z]/;
+const DIGIT_REGX = /^.*[0-9].*/;
+const NON_ALPHANUMERIC_REGX = /^.*[!@#$%^&*]/;
 // export const MinLength8Regx: RegExp = /^.{8,}/;
 
-class StrengthValidationFeedback {
-    required;
-    uppercase;
-    lowercase;
-    digit;
-    nonAlphanumeric;
-    minLength;
-    constructor(options) {
-        this.required = options?.required == undefined ? 'Please enter a valid password.' : options?.required;
-        this.uppercase = options?.uppercase == undefined ? 'At least one uppercase letter.' : options?.uppercase;
-        this.lowercase = options?.lowercase == undefined ? 'At least one lowercase letter.' : options?.lowercase;
-        this.digit = options?.digit == undefined ? 'At least one digit.' : options?.digit;
-        this.nonAlphanumeric = options?.nonAlphanumeric == undefined ? 'At least one special character (e.g., !, @, #, $).' : options?.nonAlphanumeric;
-        this.minLength = options?.minLength == undefined ? 'At least 8 characters long.' : options?.minLength;
-    }
-}
+const DEFAULT_FEEDBACK = {
+    required: 'Please enter a valid password.',
+    uppercase: 'At least one uppercase letter.',
+    lowercase: 'At least one lowercase letter.',
+    digit: 'At least one digit.',
+    nonAlphanumeric: 'At least one special character (e.g., !, @, #, $).',
+    minLength: 'At least 8 characters long.',
+};
 
-class StrengthValidationOption {
-    requireUppercase;
-    requireLowercase;
-    requireDigit;
-    requireNonAlphanumeric;
-    requiredMinLength;
-    constructor(options) {
-        this.requireUppercase = options?.requireUppercase == undefined ? true : options?.requireUppercase;
-        this.requireLowercase = options?.requireLowercase == undefined ? true : options?.requireLowercase;
-        this.requireDigit = options?.requireDigit == undefined ? true : options?.requireDigit;
-        this.requireNonAlphanumeric = options?.requireNonAlphanumeric == undefined ? true : options?.requireNonAlphanumeric;
-        this.requiredMinLength = options?.requiredMinLength == undefined ? 8 : options?.requiredMinLength;
-    }
-}
+const DEFAULT_OPTIONS = {
+    requireUppercase: true,
+    requireLowercase: true,
+    requireDigit: true,
+    requireNonAlphanumeric: true,
+    requiredMinLength: 8,
+};
 
-class YsPasswordStrengthComponent {
-    passwordHelp = null;
-    displayFeedback = true;
-    feedback = new StrengthValidationFeedback();
+class YsPasswordStrength {
     minLengthRegx = new RegExp('');
-    _control;
-    get control() { return this._control; }
-    set control(value) {
-        this._control = value;
-        if (!this._control) {
-            return;
-        }
-        if (!this._control.options) {
-            this._control.options = new StrengthValidationOption();
-        }
-        const strongPasswordRegx = new RegExp(`${this._control.options.requireUppercase ? '^(?=[^A-Z]*[A-Z])' : ''}${this._control.options.requireLowercase ? '(?=[^a-z]*[a-z])' : ''}${this._control.options.requireDigit ? '(?=\\D*\\d)' : ''}${this._control.options.requireNonAlphanumeric ? '(?=.*[!@#$%^&*])' : ''}.{${this._control.options.requiredMinLength},}$`);
-        this.minLengthRegx = new RegExp(`.{${this._control.options.requiredMinLength},}$`);
-        this._control.formControl?.addValidators([Validators.required, Validators.pattern(strongPasswordRegx)]);
-        this._control.formControl?.updateValueAndValidity();
-    }
-    get requiredOptionsLength() { return Object.values(this.control?.options).filter(x => x).length; }
-    get hasUppercase() { return this.control?.formControl?.value && UppercaseRegx.test(this.control?.formControl?.value); }
-    get hasLowercase() { return this.control?.formControl?.value && LowercaseRegx.test(this.control?.formControl?.value); }
-    get hasDigit() { return this.control?.formControl?.value && DigitRegx.test(this.control?.formControl?.value); }
-    get hasNonAlphanumeric() { return this.control?.formControl?.value && NonAlphanumericRegx.test(this.control?.formControl?.value); }
-    get hasMinLength() { return this.control?.formControl?.value && this.minLengthRegx.test(this.control?.formControl?.value); }
-    get strengthMeter() {
+    passwordHelp = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "passwordHelp" }] : /* istanbul ignore next */ []));
+    displayFeedback = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFeedback" }] : /* istanbul ignore next */ []));
+    feedback = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "feedback" }] : /* istanbul ignore next */ []));
+    control = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "control" }] : /* istanbul ignore next */ []));
+    passwordValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "passwordValue" }] : /* istanbul ignore next */ []));
+    hasUppercase = computed(() => UPPERCASE_REGEX.test(this.passwordValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasUppercase" }] : /* istanbul ignore next */ []));
+    hasLowercase = computed(() => LOWERCASE_REGEX.test(this.passwordValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLowercase" }] : /* istanbul ignore next */ []));
+    hasDigit = computed(() => DIGIT_REGX.test(this.passwordValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDigit" }] : /* istanbul ignore next */ []));
+    hasNonAlphanumeric = computed(() => NON_ALPHANUMERIC_REGX.test(this.passwordValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasNonAlphanumeric" }] : /* istanbul ignore next */ []));
+    hasMinLength = computed(() => this.minLengthRegx.test(this.passwordValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMinLength" }] : /* istanbul ignore next */ []));
+    strengthMeter = computed(() => {
         let strength = -1;
-        if (this.control?.options?.requireUppercase && this.hasUppercase)
+        if (this.mergedOptions().requireUppercase && this.hasUppercase())
             strength += 1;
-        if (this.control?.options?.requireLowercase && this.hasLowercase)
+        if (this.mergedOptions().requireLowercase && this.hasLowercase())
             strength += 1;
-        if (this.control?.options?.requireDigit && this.hasDigit)
+        if (this.mergedOptions().requireDigit && this.hasDigit())
             strength += 1;
-        if (this.control?.options?.requireNonAlphanumeric && this.hasNonAlphanumeric)
+        if (this.mergedOptions().requireNonAlphanumeric && this.hasNonAlphanumeric())
             strength += 1;
-        if (this.control?.options?.requiredMinLength && this.hasMinLength)
+        if (this.mergedOptions().requiredMinLength && this.hasMinLength())
             strength += 1;
-        return strength + (5 - this.requiredOptionsLength);
-    }
-    get strengthStyleClass() {
-        return this.strengthMeter == 4 ? "green" :
-            this.strengthMeter == 3 ? "yellow" :
-                this.strengthMeter == 2 ? "orange" :
-                    this.strengthMeter == 1 ? "red" :
-                        this.strengthMeter == 0 ? "pink" :
-                            '';
+        return strength + (5 - this.requiredOptionsLength());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strengthMeter" }] : /* istanbul ignore next */ []));
+    strengthStyleClass = computed(() => {
+        return this.strengthMeter() == 4
+            ? 'green'
+            : this.strengthMeter() == 3
+                ? 'yellow'
+                : this.strengthMeter() == 2
+                    ? 'orange'
+                    : this.strengthMeter() == 1
+                        ? 'red'
+                        : this.strengthMeter() == 0
+                            ? 'pink'
+                            : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strengthStyleClass" }] : /* istanbul ignore next */ []));
+    requiredOptionsLength = computed(() => Object.values(this.mergedOptions()).filter(Boolean).length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "requiredOptionsLength" }] : /* istanbul ignore next */ []));
+    mergedOptions = computed(() => ({
+        ...DEFAULT_OPTIONS,
+        ...(this.control()?.options ?? {}),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mergedOptions" }] : /* istanbul ignore next */ []));
+    mergedFeedback = computed(() => ({
+        ...DEFAULT_FEEDBACK,
+        ...this.feedback(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mergedFeedback" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect((onCleanup) => {
+            const control = this.control();
+            if (!control?.formControl)
+                return;
+            this.passwordValue.set(control.formControl.value ?? '');
+            const sub = control.formControl.valueChanges.subscribe((value) => {
+                this.passwordValue.set(value ?? '');
+            });
+            onCleanup(() => sub.unsubscribe());
+            // control.options ??= { ...DEFAULT_OPTIONS };
+            const strongPasswordRegex = new RegExp(`${this.mergedOptions().requireUppercase ? '^(?=[^A-Z]*[A-Z])' : ''}${this.mergedOptions().requireLowercase ? '(?=[^a-z]*[a-z])' : ''}${this.mergedOptions().requireDigit ? '(?=\\D*\\d)' : ''}${this.mergedOptions().requireNonAlphanumeric ? '(?=.*[!@#$%^&*])' : ''}.{${this.mergedOptions().requiredMinLength},}$`);
+            this.minLengthRegx = new RegExp(`.{${this.mergedOptions().requiredMinLength},}$`);
+            control.formControl?.setValidators([
+                Validators.required,
+                Validators.pattern(strongPasswordRegex),
+            ]);
+            control.formControl?.updateValueAndValidity();
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsPasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsPasswordStrengthComponent, isStandalone: true, selector: "ys-password-strength", inputs: { passwordHelp: "passwordHelp", displayFeedback: "displayFeedback", feedback: "feedback", control: "control" }, ngImport: i0, template: "@if (control) {\r\n  <div class=\"password-strength\">\r\n    <div class=\"d-flex flex-row mt-1\">\r\n      @if (this.requiredOptionsLength > 4) {\r\n        <hr class=\"rounded-start rounded-end me-1\"\r\n          [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\r\n          [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n        }\r\n        @if (this.requiredOptionsLength > 3) {\r\n          <hr class=\"rounded-start rounded-end me-1\"\r\n            [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n          }\r\n          @if (this.requiredOptionsLength > 2) {\r\n            <hr class=\"rounded-start rounded-end me-1\"\r\n              [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\r\n              [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n            }\r\n            @if (this.requiredOptionsLength > 1) {\r\n              <hr class=\"rounded-start rounded-end me-1\"\r\n                [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\r\n                [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n              }\r\n              @if (this.requiredOptionsLength > 0) {\r\n                <hr class=\"rounded-start rounded-end\"\r\n                  [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\r\n                  [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n                }\r\n              </div>\r\n              @if (passwordHelp) {\r\n                <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\r\n              }\r\n              @if (displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n                <div\r\n                  class=\"invalid-feedback d-grid \">\r\n                  @if (control.options?.requireUppercase) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\r\n                  }\r\n                  @if (control.options?.requireLowercase) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\r\n                  }\r\n                  @if (control.options?.requireDigit) {\r\n                    <span [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\r\n                  }\r\n                  @if (control.options?.requireNonAlphanumeric) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\r\n                  }\r\n                  @if (control.options?.requiredMinLength) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\r\n                  }\r\n                </div>\r\n              }\r\n              @if (control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n                <div\r\n                  class=\"invalid-feedback d-grid \">\r\n                  {{feedback?.required}}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @if (!control) {\r\n            <div>\r\n              Password strength control is undefined.\r\n            </div>\r\n          }", styles: [".is-invalid ys-password-strength~.invalid-feedback{display:block}.password-strength hr{border-top:3px solid;margin:0;opacity:.75!important}.password-strength .gray{color:var(--bs-gray-300)}.password-strength .pink{color:var(--bs-pink)}.password-strength .red{color:var(--bs-red)}.password-strength .orange{color:var(--bs-orange)}.password-strength .yellow{color:var(--bs-yellow)}.password-strength .green{color:var(--bs-green)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsPasswordStrength, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsPasswordStrength, isStandalone: true, selector: "ys-password-strength", inputs: { passwordHelp: { classPropertyName: "passwordHelp", publicName: "passwordHelp", isSignal: true, isRequired: false, transformFunction: null }, displayFeedback: { classPropertyName: "displayFeedback", publicName: "displayFeedback", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (control()) {\n<div class=\"password-strength\">\n    <div class=\"d-flex flex-row mt-1\">\n\n        @if (this.requiredOptionsLength() > 4) {\n        <hr class=\"rounded-start rounded-end me-1\" [ngClass]=\" (strengthMeter() >= 0) ? strengthStyleClass() : 'gray'\"\n            [style.width.%]=\"[100 / requiredOptionsLength()]\">\n        }\n\n        @if (this.requiredOptionsLength() > 3) {\n        <hr class=\"rounded-start rounded-end me-1\" [ngClass]=\"(strengthMeter() >= 1) ? strengthStyleClass() : 'gray'\"\n            [style.width.%]=\"[100 / requiredOptionsLength()]\">\n        }\n\n        @if (this.requiredOptionsLength() > 2) {\n        <hr class=\"rounded-start rounded-end me-1\" [ngClass]=\"(strengthMeter() >= 2) ? strengthStyleClass() : 'gray'\"\n            [style.width.%]=\"[100 / requiredOptionsLength()]\">\n        }\n\n        @if (this.requiredOptionsLength() > 1) {\n        <hr class=\"rounded-start rounded-end me-1\" [ngClass]=\"(strengthMeter() >= 3) ? strengthStyleClass() : 'gray'\"\n            [style.width.%]=\"[100 / requiredOptionsLength()]\">\n        }\n\n        @if (this.requiredOptionsLength() > 0) {\n        <hr class=\"rounded-start rounded-end\" [ngClass]=\"(strengthMeter() >= 4) ? strengthStyleClass() : 'gray'\"\n            [style.width.%]=\"[100 / requiredOptionsLength()]\">\n        }\n\n    </div>\n\n    @if (passwordHelp()) {\n\n    <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp()}}</small>\n\n    }\n\n    @if (displayFeedback() && control()?.formControl?.errors?.['pattern'] && (control()?.formControl?.touched ||\n    control()?.formControl?.dirty)) {\n\n    <div class=\"invalid-feedback d-grid \">\n\n        @if (mergedOptions().requireUppercase && mergedFeedback().uppercase) {\n        <span [ngClass]=\"{'text-success': hasUppercase()}\">{{mergedFeedback().uppercase}}</span>\n        }\n\n        @if (mergedOptions().requireLowercase && mergedFeedback().lowercase) {\n        <span [ngClass]=\"{'text-success': hasLowercase()}\">{{mergedFeedback().lowercase}}</span>\n        }\n\n        @if (mergedOptions().requireDigit && mergedFeedback().digit) {\n        <span [ngClass]=\"{'text-success': hasDigit()}\">{{mergedFeedback().digit}}</span>\n        }\n\n        @if (mergedOptions().requireNonAlphanumeric && mergedFeedback().nonAlphanumeric) {\n        <span [ngClass]=\"{'text-success': hasNonAlphanumeric()}\">{{mergedFeedback().nonAlphanumeric}}</span>\n        }\n\n        @if (mergedOptions().requiredMinLength && mergedFeedback().minLength) {\n        <span [ngClass]=\"{'text-success': hasMinLength()}\">{{mergedFeedback().minLength}}</span>\n\n        }\n\n    </div>\n\n    }\n\n    @if (control()?.formControl?.errors?.['required'] && (control()?.formControl?.touched ||\n    control()?.formControl?.dirty)) {\n\n    <div class=\"invalid-feedback d-grid \">\n        {{mergedFeedback().required}}\n    </div>\n\n    }\n\n</div>\n\n}\n\n@if (!control()) {\n\n<div>\n    Password strength control is undefined.\n</div>\n\n}", styles: [".is-invalid ys-password-strength~.invalid-feedback{display:block}.password-strength hr{border-top:3px solid;margin:0;opacity:.75!important}.password-strength .gray{color:var(--bs-gray-300)}.password-strength .pink{color:var(--bs-pink)}.password-strength .red{color:var(--bs-red)}.password-strength .orange{color:var(--bs-orange)}.password-strength .yellow{color:var(--bs-yellow)}.password-strength .green{color:var(--bs-green)}\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: YsPasswordStrengthComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsPasswordStrength, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-password-strength', imports: [NgClass], template: "@if (control) {\r\n  <div class=\"password-strength\">\r\n    <div class=\"d-flex flex-row mt-1\">\r\n      @if (this.requiredOptionsLength > 4) {\r\n        <hr class=\"rounded-start rounded-end me-1\"\r\n          [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\r\n          [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n        }\r\n        @if (this.requiredOptionsLength > 3) {\r\n          <hr class=\"rounded-start rounded-end me-1\"\r\n            [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n          }\r\n          @if (this.requiredOptionsLength > 2) {\r\n            <hr class=\"rounded-start rounded-end me-1\"\r\n              [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\r\n              [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n            }\r\n            @if (this.requiredOptionsLength > 1) {\r\n              <hr class=\"rounded-start rounded-end me-1\"\r\n                [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\r\n                [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n              }\r\n              @if (this.requiredOptionsLength > 0) {\r\n                <hr class=\"rounded-start rounded-end\"\r\n                  [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\r\n                  [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n                }\r\n              </div>\r\n              @if (passwordHelp) {\r\n                <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\r\n              }\r\n              @if (displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n                <div\r\n                  class=\"invalid-feedback d-grid \">\r\n                  @if (control.options?.requireUppercase) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\r\n                  }\r\n                  @if (control.options?.requireLowercase) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\r\n                  }\r\n                  @if (control.options?.requireDigit) {\r\n                    <span [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\r\n                  }\r\n                  @if (control.options?.requireNonAlphanumeric) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\r\n                  }\r\n                  @if (control.options?.requiredMinLength) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\r\n                  }\r\n                </div>\r\n              }\r\n              @if (control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n                <div\r\n                  class=\"invalid-feedback d-grid \">\r\n                  {{feedback?.required}}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @if (!control) {\r\n            <div>\r\n              Password strength control is undefined.\r\n            </div>\r\n          }", styles: [".is-invalid ys-password-strength~.invalid-feedback{display:block}.password-strength hr{border-top:3px solid;margin:0;opacity:.75!important}.password-strength .gray{color:var(--bs-gray-300)}.password-strength .pink{color:var(--bs-pink)}.password-strength .red{color:var(--bs-red)}.password-strength .orange{color:var(--bs-orange)}.password-strength .yellow{color:var(--bs-yellow)}.password-strength .green{color:var(--bs-green)}\n"] }]
-        }], propDecorators: { passwordHelp: [{
-                type: Input
-            }], displayFeedback: [{
-                type: Input
-            }], feedback: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ys-password-strength', imports: [NgClass], changeDetection: ChangeDetectionStrategy.Eager, template: "@if (control()) {\n<div class=\"password-strength\">\n    <div class=\"d-flex flex-row mt-1\">\n\n        @if (this.requiredOptionsLength() > 4) {\n        <hr class=\"rounded-start rounded-end me-1\" [ngClass]=\" (strengthMeter() >= 0) ? strengthStyleClass() : 'gray'\"\n            [style.width.%]=\"[100 / requiredOptionsLength()]\">\n        }\n\n        @if (this.requiredOptionsLength() > 3) {\n        <hr class=\"rounded-start rounded-end me-1\" [ngClass]=\"(strengthMeter() >= 1) ? strengthStyleClass() : 'gray'\"\n            [style.width.%]=\"[100 / requiredOptionsLength()]\">\n        }\n\n        @if (this.requiredOptionsLength() > 2) {\n        <hr class=\"rounded-start rounded-end me-1\" [ngClass]=\"(strengthMeter() >= 2) ? strengthStyleClass() : 'gray'\"\n            [style.width.%]=\"[100 / requiredOptionsLength()]\">\n        }\n\n        @if (this.requiredOptionsLength() > 1) {\n        <hr class=\"rounded-start rounded-end me-1\" [ngClass]=\"(strengthMeter() >= 3) ? strengthStyleClass() : 'gray'\"\n            [style.width.%]=\"[100 / requiredOptionsLength()]\">\n        }\n\n        @if (this.requiredOptionsLength() > 0) {\n        <hr class=\"rounded-start rounded-end\" [ngClass]=\"(strengthMeter() >= 4) ? strengthStyleClass() : 'gray'\"\n            [style.width.%]=\"[100 / requiredOptionsLength()]\">\n        }\n\n    </div>\n\n    @if (passwordHelp()) {\n\n    <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp()}}</small>\n\n    }\n\n    @if (displayFeedback() && control()?.formControl?.errors?.['pattern'] && (control()?.formControl?.touched ||\n    control()?.formControl?.dirty)) {\n\n    <div class=\"invalid-feedback d-grid \">\n\n        @if (mergedOptions().requireUppercase && mergedFeedback().uppercase) {\n        <span [ngClass]=\"{'text-success': hasUppercase()}\">{{mergedFeedback().uppercase}}</span>\n        }\n\n        @if (mergedOptions().requireLowercase && mergedFeedback().lowercase) {\n        <span [ngClass]=\"{'text-success': hasLowercase()}\">{{mergedFeedback().lowercase}}</span>\n        }\n\n        @if (mergedOptions().requireDigit && mergedFeedback().digit) {\n        <span [ngClass]=\"{'text-success': hasDigit()}\">{{mergedFeedback().digit}}</span>\n        }\n\n        @if (mergedOptions().requireNonAlphanumeric && mergedFeedback().nonAlphanumeric) {\n        <span [ngClass]=\"{'text-success': hasNonAlphanumeric()}\">{{mergedFeedback().nonAlphanumeric}}</span>\n        }\n\n        @if (mergedOptions().requiredMinLength && mergedFeedback().minLength) {\n        <span [ngClass]=\"{'text-success': hasMinLength()}\">{{mergedFeedback().minLength}}</span>\n\n        }\n\n    </div>\n\n    }\n\n    @if (control()?.formControl?.errors?.['required'] && (control()?.formControl?.touched ||\n    control()?.formControl?.dirty)) {\n\n    <div class=\"invalid-feedback d-grid \">\n        {{mergedFeedback().required}}\n    </div>\n\n    }\n\n</div>\n\n}\n\n@if (!control()) {\n\n<div>\n    Password strength control is undefined.\n</div>\n\n}", styles: [".is-invalid ys-password-strength~.invalid-feedback{display:block}.password-strength hr{border-top:3px solid;margin:0;opacity:.75!important}.password-strength .gray{color:var(--bs-gray-300)}.password-strength .pink{color:var(--bs-pink)}.password-strength .red{color:var(--bs-red)}.password-strength .orange{color:var(--bs-orange)}.password-strength .yellow{color:var(--bs-yellow)}.password-strength .green{color:var(--bs-green)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { passwordHelp: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordHelp", required: false }] }], displayFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFeedback", required: false }] }], feedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedback", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }] } });
 
 class YsPasswordStrengthDirective {
-    el;
-    viewContainerRef;
-    injector;
-    control;
-    passwordHelp = null;
-    displayFeedback = true;
-    feedback = new StrengthValidationFeedback();
-    options;
-    constructor(el, viewContainerRef, injector, control) {
-        this.el = el;
-        this.viewContainerRef = viewContainerRef;
-        this.injector = injector;
-        this.control = control;
-    }
-    ngOnInit() {
-        const element = this.el.nativeElement;
-        const elementParent = element.parentElement;
-        const formControl = this.control.control;
-        const passwordStrengthComponent = this.viewContainerRef.createComponent(YsPasswordStrengthComponent, { injector: this.injector });
-        elementParent.insertBefore(passwordStrengthComponent.location.nativeElement, element.nextSibling);
-        const passwordStrength = passwordStrengthComponent.instance;
-        passwordStrength.passwordHelp = this.passwordHelp;
-        passwordStrength.displayFeedback = this.displayFeedback;
-        passwordStrength.feedback = this.feedback;
-        passwordStrength.control = { formControl: formControl, options: this.options };
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    control = inject(NgControl, {
+        self: true
+    });
+    componentRef = this.viewContainerRef.createComponent(YsPasswordStrength, {
+        injector: this.injector
+    });
+    passwordHelp = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "passwordHelp" }] : /* istanbul ignore next */ []));
+    displayFeedback = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFeedback" }] : /* istanbul ignore next */ []));
+    feedback = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "feedback" }] : /* istanbul ignore next */ []));
+    options = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    mergedOptions = computed(() => ({
+        ...DEFAULT_OPTIONS,
+        ...this.options()
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mergedOptions" }] : /* istanbul ignore next */ []));
+    mergedFeedback = computed(() => ({
+        ...DEFAULT_FEEDBACK,
+        ...this.feedback()
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mergedFeedback" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const formControl = this.control.control;
+            this.componentRef.setInput('passwordHelp', this.passwordHelp());
+            this.componentRef.setInput('displayFeedback', this.displayFeedback());
+            this.componentRef.setInput('feedback', this.mergedFeedback());
+            this.componentRef.setInput('control', { formControl: formControl, options: this.mergedOptions() });
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsPasswordStrengthDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: YsPasswordStrengthDirective, isStandalone: true, selector: "[ysPasswordStrength]", inputs: { passwordHelp: "passwordHelp", displayFeedback: "displayFeedback", feedback: "feedback", options: "options" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsPasswordStrengthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: YsPasswordStrengthDirective, isStandalone: true, selector: "[ysPasswordStrength]", inputs: { passwordHelp: { classPropertyName: "passwordHelp", publicName: "passwordHelp", isSignal: true, isRequired: false, transformFunction: null }, displayFeedback: { classPropertyName: "displayFeedback", publicName: "displayFeedback", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsPasswordStrengthDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsPasswordStrengthDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ysPasswordStrength]'
+                    selector: '[ysPasswordStrength]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl }], propDecorators: { passwordHelp: [{
-                type: Input
-            }], displayFeedback: [{
-                type: Input
-            }], feedback: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { passwordHelp: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordHelp", required: false }] }], displayFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFeedback", required: false }] }], feedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedback", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
 /*
  * Public API Surface of ys-password-strength
@@ -160,5 +172,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DigitRegx, LowercaseRegx, NonAlphanumericRegx, StrengthValidationFeedback, StrengthValidationOption, StrongPasswordRegx, UppercaseRegx, YsPasswordStrengthComponent, YsPasswordStrengthDirective };
+export { DEFAULT_FEEDBACK, DEFAULT_OPTIONS, DIGIT_REGX, LOWERCASE_REGEX, NON_ALPHANUMERIC_REGX, STRONG_PASSWORD_REGX, UPPERCASE_REGEX, YsPasswordStrength, YsPasswordStrengthDirective };
 //# sourceMappingURL=yoozsoft-yoozsoft-ng-password-strength.mjs.map