zek 17.3.47 → 17.3.49

package/fesm2022/zek.mjs

@@ -9,7 +9,7 @@ import * as i1$1 from '@angular/common/http';
 import { HttpParams, HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as i1$2 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
-import * as i1$4 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS } from '@angular/forms';
 import * as i1$3 from '@angular/platform-browser';
 import { finalize, map, takeWhile } from 'rxjs/operators';
@@ -2028,7 +2028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Output
             }] } });
 
-let uniqueId$5 = 0;
+let uniqueId$6 = 0;
 class CoreUiComponent extends CoreComponent {
     constructor(_renderer, _elementRef
     //private _changeDetector: ChangeDetectorRef
@@ -2045,7 +2045,7 @@ class CoreUiComponent extends CoreComponent {
         this._onTouched = () => { };
         this.change = new EventEmitter();
         this.changing = new EventEmitter();
-        this._name = `zek-${++uniqueId$5}`;
+        this._name = `zek-${++uniqueId$6}`;
         this._isInitialized = false;
         this._value = null;
         this._readonly = false;
@@ -2567,6 +2567,7 @@ class ListBaseComponent extends BaseComponent {
         this.isFiltered = false;
         this.selectedIds = [];
         this.pager = new Pager();
+        this.tableId = 'table';
         this.approveModel = {};
         this.approvedMesage = 'Alert.Approved';
         this.disapprovedMesage = 'Alert.Disapproved';
@@ -2599,6 +2600,10 @@ class ListBaseComponent extends BaseComponent {
     apiGetAll(filter) {
         return this.service.getAll(filter);
     }
+    scrollTop() {
+        const el = document.getElementById(this.tableId);
+        el?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+    }
     initDefaultFilter() {
     }
     initStoredFilter() {
@@ -2617,11 +2622,12 @@ class ListBaseComponent extends BaseComponent {
             localStorage.removeItem('filter');
         }
     }
-    changePage(page) {
+    async changePage(page) {
         this.internalFilter.page = page;
         this.filter.page = page;
-        this.refresh();
+        await this.bindModel();
         this.autoSaveFilter();
+        this.scrollTop();
     }
     changePageSize(pageSize) {
         this.internalFilter.pageSize = pageSize;
@@ -2632,10 +2638,13 @@ class ListBaseComponent extends BaseComponent {
         this.filterModal?.show();
     }
     search() {
-        //this.filterModal?.hide();
         this.assignFilter();
-        this.changePage(1);
-        //this.internalAutoSaveFilter();
+        // this.changePage(1);
+        //can't use this because don't want to execute scrollTop
+        this.internalFilter.page = 1;
+        this.filter.page = 1;
+        this.bindModel();
+        this.autoSaveFilter();
     }
     assignFilter() {
         this.internalFilter = Object.assign({}, this.filter);
@@ -3074,7 +3083,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.Router }] });
 
-let uniqueId$4 = 0;
+let uniqueId$5 = 0;
 /**
  * Provider Expression that allows bb to register as a ControlValueAccessor. This
  * allows it to support [(ngModel)] and ngControl.
@@ -3088,7 +3097,7 @@ const ZEK_BB_CONTROL_VALUE_ACCESSOR = {
 class ZekButtonBrowse extends CoreUiComponent {
     constructor() {
         super(...arguments);
-        this._uniqueId = `zek-bb-${++uniqueId$4}`;
+        this._uniqueId = `zek-bb-${++uniqueId$5}`;
         /** The unique ID for the bb. */
         this.id = this._uniqueId;
         this.filter = {};
@@ -3963,18 +3972,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 }]
         }] });
 
-let uniqueId$3 = 0;
+let uniqueId$4 = 0;
 class ZekModal extends CoreComponent {
     constructor() {
-        super();
+        super(...arguments);
         this.translate = inject(TranslateService);
-        this._uniqueId = `zek-modal-${++uniqueId$3}`;
+        this._uniqueId = `zek-modal-${++uniqueId$4}`;
         /** The unique ID for the radio button. */
         this.id = this._uniqueId;
         this.modalId = `${this.id}-modal`;
         this.lableId = `${this.id}-lable`;
         this.cancelButtonId = `${this.id}-cancel-button`;
         this.okButtonId = `${this.id}-ok-button`;
+        this.elementId = RandomHelper.randomHex();
         this._showOk = true;
         this._disabledOk = false;
         this._showCancel = true;
@@ -3989,7 +3999,6 @@ class ZekModal extends CoreComponent {
         this._showHeader = true;
         this._showFooter = true;
         this.onValidating = new EventEmitter(false);
-        this.elementId = RandomHelper.randomHex();
     }
     async destroy() {
         await super.destroy();
@@ -4158,13 +4167,13 @@ class ZekModal extends CoreComponent {
         e.preventDefault();
         this.ok();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ZekModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ZekModal, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ZekModal, selector: "zek-modal", inputs: { id: "id", model: "model", showOk: "showOk", disabledOk: "disabledOk", showCancel: "showCancel", autoHide: "autoHide", title: "title", text: "text", icon: "icon", okButtonText: "okButtonText", componentType: "componentType", size: "size", large: "large", xl: "xl", scrollable: "scrollable", fullscreen: "fullscreen", showHeader: "showHeader", showFooter: "showFooter" }, outputs: { onShown: "onShown", onHidden: "onHidden", onOk: "onOk", onValidating: "onValidating" }, usesInheritance: true, ngImport: i0, template: "<div (keydown.enter)=\"keyDown($event)\" class=\"modal fade\" data-bs-backdrop=\"static\" id=\"{{modalId}}\" tabindex=\"-1\" attr.aria-labelledby=\"{{lableId}}\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog\" [ngClass]=\"{\r\n        'modal-sm': size === 'sm',\r\n        'modal-lg': size === 'lg', \r\n        'modal-xl': size === 'xl'\r\n    }\" [class.modal-dialog-scrollable]=\"scrollable\" [class.modal-fullscreen]=\"fullscreen\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\" *ngIf=\"showHeader\">\r\n                <ng-content select=\"header\"></ng-content>\r\n                <h5 class=\"modal-title\" id=\"{{lableId}}\">{{title}}</h5>\r\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                {{text}}\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\" *ngIf=\"showFooter\">\r\n                <ng-content select=\"footer\"></ng-content>\r\n                <button [class.visually-hidden]=\"!showOk\" [disabled]=\"disabledOk\" type=\"button\" class=\"btn {{cssButton()}}\" id=\"{{okButtonId}}\" (click)=\"ok()\">\r\n                    <i *ngIf=\"icon\" class=\"{{ icon }}\"></i> {{ okButtonText }}\r\n                </button>\r\n                <button [class.visually-hidden]=\"!showCancel\" type=\"button\" class=\"btn btn-secondary\" id=\"{{cancelButtonId}}\" data-bs-dismiss=\"modal\">\r\n                    <i class=\"fa-solid fa-ban\"></i> {{ 'Action.Cancel' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ZekModal, decorators: [{
             type: Component,
             args: [{ selector: 'zek-modal', template: "<div (keydown.enter)=\"keyDown($event)\" class=\"modal fade\" data-bs-backdrop=\"static\" id=\"{{modalId}}\" tabindex=\"-1\" attr.aria-labelledby=\"{{lableId}}\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog\" [ngClass]=\"{\r\n        'modal-sm': size === 'sm',\r\n        'modal-lg': size === 'lg', \r\n        'modal-xl': size === 'xl'\r\n    }\" [class.modal-dialog-scrollable]=\"scrollable\" [class.modal-fullscreen]=\"fullscreen\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\" *ngIf=\"showHeader\">\r\n                <ng-content select=\"header\"></ng-content>\r\n                <h5 class=\"modal-title\" id=\"{{lableId}}\">{{title}}</h5>\r\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                {{text}}\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\" *ngIf=\"showFooter\">\r\n                <ng-content select=\"footer\"></ng-content>\r\n                <button [class.visually-hidden]=\"!showOk\" [disabled]=\"disabledOk\" type=\"button\" class=\"btn {{cssButton()}}\" id=\"{{okButtonId}}\" (click)=\"ok()\">\r\n                    <i *ngIf=\"icon\" class=\"{{ icon }}\"></i> {{ okButtonText }}\r\n                </button>\r\n                <button [class.visually-hidden]=\"!showCancel\" type=\"button\" class=\"btn btn-secondary\" id=\"{{cancelButtonId}}\" data-bs-dismiss=\"modal\">\r\n                    <i class=\"fa-solid fa-ban\"></i> {{ 'Action.Cancel' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
-        }], ctorParameters: () => [], propDecorators: { id: [{
+        }], propDecorators: { id: [{
                 type: Input
             }], model: [{
                 type: Input
@@ -4484,12 +4493,12 @@ function loadScript$1(onLoaded, url, nonce) {
 }
 const loader$1 = { loadScript: loadScript$1 };
 
-let uniqueId$2 = 0;
+let uniqueId$3 = 0;
 class ZekGoogleLoginButton extends CoreComponent {
     constructor(client_id) {
         super();
         this.client_id = client_id;
-        this._uniqueId = `zek-google-button-container-${++uniqueId$2}`;
+        this._uniqueId = `zek-google-button-container-${++uniqueId$3}`;
         this.id = this._uniqueId;
         this._prompt = true;
         this._autoSelect = false;
@@ -5204,7 +5213,7 @@ class ZekPassword {
         this._type = this._type === 'password' ? 'text' : 'password';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ZekPassword, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ZekPassword, isStandalone: true, selector: "zek-password", inputs: { name: "name", required: "required", minlength: "minlength", maxlength: "maxlength", model: "model" }, outputs: { onChange: "modelChange" }, ngImport: i0, template: "<div class=\"input-group has-validation\">\r\n    <input type=\"{{type}}\" class=\"form-control\" name=\"{{name}}\" id=\"{{name}}\" [attr.aria-describedby]=\"name+'-show'\"\r\n    [required]=\"required\" [minlength]=\"minlength\" [maxlength]=\"maxlength\"\r\n    [ngModel]=\"model\" (ngModelChange)=\"onChange.emit($event)\"\r\n    #password=\"ngModel\"\r\n    >\r\n    <button class=\"btn btn-outline-secondary\" type=\"button\" id=\"{{name}}-show\" (click)=\"showHide()\"><i class=\"fa-solid fa-eye\"></i></button>\r\n    <div zek-field-validator [field]=\"password\"></div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZekFieldValidator, selector: "zek-field-validator, [zek-field-validator]", inputs: ["field"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ZekPassword, isStandalone: true, selector: "zek-password", inputs: { name: "name", required: "required", minlength: "minlength", maxlength: "maxlength", model: "model" }, outputs: { onChange: "modelChange" }, ngImport: i0, template: "<div class=\"input-group has-validation\">\r\n    <input type=\"{{type}}\" class=\"form-control\" name=\"{{name}}\" id=\"{{name}}\" [attr.aria-describedby]=\"name+'-show'\"\r\n    [required]=\"required\" [minlength]=\"minlength\" [maxlength]=\"maxlength\"\r\n    [ngModel]=\"model\" (ngModelChange)=\"onChange.emit($event)\"\r\n    #password=\"ngModel\"\r\n    >\r\n    <button class=\"btn btn-outline-secondary\" type=\"button\" id=\"{{name}}-show\" (click)=\"showHide()\"><i class=\"fa-solid fa-eye\"></i></button>\r\n    <div zek-field-validator [field]=\"password\"></div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZekFieldValidator, selector: "zek-field-validator, [zek-field-validator]", inputs: ["field"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ZekPassword, decorators: [{
             type: Component,
@@ -5319,7 +5328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Input
             }] } });
 
-let uniqueId$1 = 0;
+let uniqueId$2 = 0;
 /**
  * Provider Expression that allows zek-radio to register as a ControlValueAccessor. This
  * allows it to support [(ngModel)] and ngControl.
@@ -5334,7 +5343,7 @@ class ZekRadio extends CoreUiComponent {
     constructor(_changeDetector, _renderer, _elementRef) {
         super(_renderer, _elementRef);
         this._changeDetector = _changeDetector;
-        this._uniqueId = `zek-radio-${++uniqueId$1}`;
+        this._uniqueId = `zek-radio-${++uniqueId$2}`;
         /** The unique ID for the radio button. */
         this.id = this._uniqueId;
         this._inline = false;
@@ -5625,7 +5634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 }]
         }] });
 
-let uniqueId = 0;
+let uniqueId$1 = 0;
 const ZEK_SELECT_MULTIPLE_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => ZekSelectMultiple),
@@ -5634,7 +5643,7 @@ const ZEK_SELECT_MULTIPLE_CONTROL_VALUE_ACCESSOR = {
 class ZekSelectMultiple extends CoreUiComponent {
     constructor(renderer, elementRef) {
         super(renderer, elementRef);
-        this._uniqueId = `zek-select-${++uniqueId}`;
+        this._uniqueId = `zek-select-${++uniqueId$1}`;
         /** The unique ID for the radio button. */
         this.id = this._uniqueId;
         this.css = 'primary';
@@ -5964,7 +5973,7 @@ class ZekSelect2 {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ZekSelect2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ZekSelect2, isStandalone: true, selector: "zek-select2,[zek-select2]", inputs: { data: "data", textField: "textField", valueField: "valueField", placeholder: "placeholder", value: "value" }, outputs: { selectedItemChange: "selectedItemChange", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"input-group position-relative\" id=\"dropdown-menu-container-{{elementId}}\">\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"{{placeholder}}\" data-bs-toggle=\"dropdown\" id=\"input-{{elementId}}\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange($event)\" (focus)=\"onFocus($event)\" (blur)=\"inputUnfocused()\">\r\n  <button class=\"btn btn-outline-secondary dropdown-toggle\" id=\"btn-{{elementId}}\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-reference=\"parent\"></button>\r\n  <ul class=\"dropdown-menu dropdown-menu-start w-100 scrollable-menu\" id=\"dropdown-menu-{{elementId}}\">\r\n    <ng-container *ngIf=\"textField\">\r\n      <li *ngFor=\"let entry of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(entry)\" class=\"dropdown-item\">{{entry[textField]}}</a>\r\n      </li>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!textField\">\r\n      <li *ngFor=\"let entry of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(entry)\" class=\"dropdown-item\">{{textField}}</a>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n<!-- <kendo-autocomplete\r\n  [data]=\"data\"\r\n  [filterable]=\"true\"\r\n  (valueChange)=\"valueChange($event)\"\r\n  (filterChange)=\"filterChange($event)\"\r\n  (open)=\"open()\"\r\n  (close)=\"close()\"\r\n  (focus)=\"focus()\"\r\n  (blur)=\"blur()\">\r\n</kendo-autocomplete> -->", styles: [".scrollable-menu{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ZekSelect2, isStandalone: true, selector: "zek-select2,[zek-select2]", inputs: { data: "data", textField: "textField", valueField: "valueField", placeholder: "placeholder", value: "value" }, outputs: { selectedItemChange: "selectedItemChange", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"input-group position-relative\" id=\"dropdown-menu-container-{{elementId}}\">\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"{{placeholder}}\" data-bs-toggle=\"dropdown\" id=\"input-{{elementId}}\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange($event)\" (focus)=\"onFocus($event)\" (blur)=\"inputUnfocused()\">\r\n  <button class=\"btn btn-outline-secondary dropdown-toggle\" id=\"btn-{{elementId}}\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-reference=\"parent\"></button>\r\n  <ul class=\"dropdown-menu dropdown-menu-start w-100 scrollable-menu\" id=\"dropdown-menu-{{elementId}}\">\r\n    <ng-container *ngIf=\"textField\">\r\n      <li *ngFor=\"let entry of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(entry)\" class=\"dropdown-item\">{{entry[textField]}}</a>\r\n      </li>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!textField\">\r\n      <li *ngFor=\"let entry of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(entry)\" class=\"dropdown-item\">{{textField}}</a>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n<!-- <kendo-autocomplete\r\n  [data]=\"data\"\r\n  [filterable]=\"true\"\r\n  (valueChange)=\"valueChange($event)\"\r\n  (filterChange)=\"filterChange($event)\"\r\n  (open)=\"open()\"\r\n  (close)=\"close()\"\r\n  (focus)=\"focus()\"\r\n  (blur)=\"blur()\">\r\n</kendo-autocomplete> -->", styles: [".scrollable-menu{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ZekSelect2, decorators: [{
             type: Component,
@@ -6092,7 +6101,7 @@ class ZekSelect2Multiple {
         this.valueChange.emit(v);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ZekSelect2Multiple, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ZekSelect2Multiple, isStandalone: true, selector: "zek-select2-multiple,[zek-select2-multiple]", inputs: { data: "data", textField: "textField", selectedField: "selectedField", valueField: "valueField", placeholder: "placeholder", value: "value" }, outputs: { selectedItemChange: "selectedItemChange", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"input-group position-relative\" id=\"dropdown-menu-container-{{elementId}}\">\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"{{placeholder}}\" data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\" id=\"input-{{elementId}}\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange($event)\" (focus)=\"onFocus($event)\" (blur)=\"inputUnfocused()\">\r\n  <button class=\"btn btn-outline-secondary dropdown-toggle\" id=\"btn-{{elementId}}\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-reference=\"parent\"></button>\r\n  <ul class=\"dropdown-menu dropdown-menu-start w-100 scrollable-menu\" id=\"dropdown-menu-{{elementId}}\">\r\n    <ng-container *ngIf=\"textField\">\r\n      <li *ngFor=\"let item of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(item)\" class=\"dropdown-item\">\r\n          <span *ngIf=\"item.selected\"><i class=\"fa-regular fa-square-check\"></i></span>\r\n          <span *ngIf=\"!item.selected\"><i class=\"fa-regular fa-square\"></i></span>\r\n          {{item[textField]}}\r\n        </a>\r\n      </li>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!textField\">\r\n      <li *ngFor=\"let item of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(item)\" class=\"dropdown-item\">\r\n          <span *ngIf=\"item.selected\"><i class=\"fa-regular fa-square-check\"></i></span>\r\n          <span *ngIf=\"!item.selected\"><i class=\"fa-regular fa-square\"></i></span>\r\n          {{item}}\r\n        </a>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ZekSelect2Multiple, isStandalone: true, selector: "zek-select2-multiple,[zek-select2-multiple]", inputs: { data: "data", textField: "textField", selectedField: "selectedField", valueField: "valueField", placeholder: "placeholder", value: "value" }, outputs: { selectedItemChange: "selectedItemChange", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"input-group position-relative\" id=\"dropdown-menu-container-{{elementId}}\">\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"{{placeholder}}\" data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\" id=\"input-{{elementId}}\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange($event)\" (focus)=\"onFocus($event)\" (blur)=\"inputUnfocused()\">\r\n  <button class=\"btn btn-outline-secondary dropdown-toggle\" id=\"btn-{{elementId}}\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-reference=\"parent\"></button>\r\n  <ul class=\"dropdown-menu dropdown-menu-start w-100 scrollable-menu\" id=\"dropdown-menu-{{elementId}}\">\r\n    <ng-container *ngIf=\"textField\">\r\n      <li *ngFor=\"let item of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(item)\" class=\"dropdown-item\">\r\n          <span *ngIf=\"item.selected\"><i class=\"fa-regular fa-square-check\"></i></span>\r\n          <span *ngIf=\"!item.selected\"><i class=\"fa-regular fa-square\"></i></span>\r\n          {{item[textField]}}\r\n        </a>\r\n      </li>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!textField\">\r\n      <li *ngFor=\"let item of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(item)\" class=\"dropdown-item\">\r\n          <span *ngIf=\"item.selected\"><i class=\"fa-regular fa-square-check\"></i></span>\r\n          <span *ngIf=\"!item.selected\"><i class=\"fa-regular fa-square\"></i></span>\r\n          {{item}}\r\n        </a>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ZekSelect2Multiple, decorators: [{
             type: Component,
@@ -6307,6 +6316,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Input
             }] } });
 
+let uniqueId = 0;
+class ZekTag extends CoreUiComponent {
+    constructor() {
+        super(...arguments);
+        this.modelChange = new EventEmitter();
+        this._max = 1000000000;
+        this._maxlength = null;
+        this._duplicate = false;
+        this.text = null;
+        this._uniqueId = `zek-tag-${++uniqueId}`;
+        /** The unique ID for the tag. */
+        this.id = this._uniqueId;
+    }
+    get max() {
+        return this._max;
+    }
+    set max(v) {
+        const tmp = MathHelper.clamp(Convert.toNumber(v) || 0, 0, 1000000000);
+        if (this._max !== tmp) {
+            this._max = tmp;
+        }
+    }
+    get maxlength() {
+        return this._maxlength;
+    }
+    set maxlength(v) {
+        const tmp = Convert.parseNumber(v);
+        if (tmp !== null) {
+            const num = MathHelper.clamp(tmp, 0, 1000000000);
+            if (this._maxlength !== num) {
+                this._maxlength = num;
+            }
+        }
+        this._maxlength = tmp;
+    }
+    get duplicate() {
+        return this._duplicate;
+    }
+    set duplicate(v) {
+        this._duplicate = Convert.toBooleanProperty(v);
+    }
+    onKeyEnter(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.add(this.text)) {
+            this.text = null;
+        }
+    }
+    get inputId() {
+        return `${this.id || this._uniqueId}-input`;
+    }
+    add(text) {
+        if (!text)
+            return false;
+        let emitModel = false;
+        if (!this.model) {
+            this.model = [];
+            emitModel = true;
+        }
+        const maxlength = (this.maxlength || 0);
+        if (maxlength > 0 && text.length > maxlength) {
+            return false;
+        }
+        if (!this.duplicate && this.model.includes(text)) {
+            return false;
+        }
+        if (this.model.length >= this.max) {
+            return false;
+        }
+        this.model.push(text);
+        if (emitModel)
+            this.modelChange.emit(this.model);
+        return true;
+    }
+    remove(item) {
+        if (!this.model)
+            return;
+        const index = this.model.indexOf(item);
+        if (index !== -1) {
+            this.model.splice(index, 1);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ZekTag, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ZekTag, isStandalone: true, selector: "zek-tag", inputs: { model: "model", max: "max", maxlength: "maxlength", duplicate: "duplicate", id: "id" }, outputs: { modelChange: "modelChange" }, host: { properties: { "attr.id": "id" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-wrap align-items-center gap-1 form-control\">\r\n    <ng-container *ngIf=\"model\">\r\n        <button *ngFor=\"let item of model\" type=\"button\" (click)=\"remove(item)\" class=\"align-items-center gap-1 d-inline-flex py-0 border-0 btn btn-primary\">{{item}}<span class=\"d-inline-flex\" role=\"button\" tabindex=\"-1\"><i class=\"fa-solid fa-xmark\"></i></span></button>\r\n    </ng-container>\r\n    <div class=\"input-wrapper\"><span>i</span><input type=\"text\"\r\n            [id]=\"inputId\"\r\n            [name]=\"inputId\"\r\n            [(ngModel)]=\"text\"\r\n            [maxlength]=\"maxlength\"\r\n            (keydown.enter)=\"onKeyEnter($event)\"></div>\r\n</div>", styles: [".input-wrapper{position:relative;min-width:4px;flex-grow:1;white-space:nowrap}.input-wrapper>span{visibility:hidden}.input-wrapper input[type=text]{position:absolute;top:0;left:0;padding:0;outline:0;border:0;width:100%;background-color:transparent}.input-wrapper input[type=text]::placeholder{color:#212529bf;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ZekTag, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, FormsModule], selector: 'zek-tag', host: {
+                        '[attr.id]': 'id',
+                    }, template: "<div class=\"d-flex flex-wrap align-items-center gap-1 form-control\">\r\n    <ng-container *ngIf=\"model\">\r\n        <button *ngFor=\"let item of model\" type=\"button\" (click)=\"remove(item)\" class=\"align-items-center gap-1 d-inline-flex py-0 border-0 btn btn-primary\">{{item}}<span class=\"d-inline-flex\" role=\"button\" tabindex=\"-1\"><i class=\"fa-solid fa-xmark\"></i></span></button>\r\n    </ng-container>\r\n    <div class=\"input-wrapper\"><span>i</span><input type=\"text\"\r\n            [id]=\"inputId\"\r\n            [name]=\"inputId\"\r\n            [(ngModel)]=\"text\"\r\n            [maxlength]=\"maxlength\"\r\n            (keydown.enter)=\"onKeyEnter($event)\"></div>\r\n</div>", styles: [".input-wrapper{position:relative;min-width:4px;flex-grow:1;white-space:nowrap}.input-wrapper>span{visibility:hidden}.input-wrapper input[type=text]{position:absolute;top:0;left:0;padding:0;outline:0;border:0;width:100%;background-color:transparent}.input-wrapper input[type=text]::placeholder{color:#212529bf;opacity:1}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], modelChange: [{
+                type: Output
+            }], max: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], duplicate: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
 //import { toDate } from '../../extensions';
 class TimePipe {
     constructor(_datePipe) {
@@ -6893,5 +7006,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, AgePipe, Alert, AlertService, ArrayHelper, AuthService, Base64Helper, BaseAlert, BaseComponent, BaseService, BitwiseHelper, BootstrapHelper, Color, ComponentType, Convert, CoreComponent, CoreUiComponent, CrudService, CssHelper, CustomHttpParamEncoder, DATE_FORMAT, DateHelper, DateValueAccessor, DatepickerModule, EditBase, EditBaseComponent, EditComponent, EditFormComponent, ErrorHelper, ExcelHelper, FileBase, FileBytes, FileHelper, FileString, FilterBase, FilterHelper, GOOGLE_CLIENT_ID, Gender, HtmlHelper, HttpErrorHandler, JwtHelper, KeyPair, KeyPairChecked, KeyPairEx, KeyPairRequired, LANGUAGE, ListBase, ListBaseComponent, MATCH_VALIDATOR, MatchValidator, MathHelper, Month, ObjectHelper, OverlapHelper, PagedList, Pager, PagerHelper, PeriodRelation, PrintType, RANGE_VALIDATOR, RECAPTCHA_SITE_KEY, RandomHelper, RangeValidator, ReCaptchaService, RecaptchaModule, StorageHelper, StringHelper, TimeHelper, TimeModule, TimePipe, TimerService, TmpHelper, Toast, Tree, UrlHelper, ValidEventArgs, ValidationHelper, Validators, ValidatorsModule, WebApiClient, WebApiModule, ZekAlert, ZekApproveModal, ZekAutoComplete, ZekButtonBrowse, ZekButtonBrowseModalBase, ZekButtonBrowseModalToolbar, ZekButtonBrowseModule, ZekCallbackPipe, ZekCard, ZekCountdown, ZekDateAgoPipe, ZekDeleteModal, ZekDisapproveModal, ZekEditToolbar, ZekFieldValidator, ZekFileSizePipe, ZekFileViewer, ZekFilterModal, ZekGoogleLoginButton, ZekGoogleLoginModule, ZekGridToolbar, ZekGridToolbarBar, ZekListToolbar, ZekLoading, ZekLoadingModule, ZekLocalToUtcModule, ZekLocalToUtcPipe, ZekModal, ZekModalModule, ZekNumericDirective, ZekPageTitle, ZekPager, ZekPassword, ZekProgress, ZekRadio, ZekReadOnlyDirective, ZekRestoreModal, ZekSafePipe, ZekSelect2, ZekSelect2Multiple, ZekSelectMultiple, ZekSort, ZekSortButtonGroup, ZekSubmitModal, ZekSumModal, ZekToast, ZekTooltip, ZekUtcToLocalModule, ZekUtcToLocalPipe, ZekValidation, ZekWizard, ZekWizard2, firstBy, handler, matchValidator, nullValidator, rangeValidator, zekAuthGuard };
+export { API_BASE_URL, AgePipe, Alert, AlertService, ArrayHelper, AuthService, Base64Helper, BaseAlert, BaseComponent, BaseService, BitwiseHelper, BootstrapHelper, Color, ComponentType, Convert, CoreComponent, CoreUiComponent, CrudService, CssHelper, CustomHttpParamEncoder, DATE_FORMAT, DateHelper, DateValueAccessor, DatepickerModule, EditBase, EditBaseComponent, EditComponent, EditFormComponent, ErrorHelper, ExcelHelper, FileBase, FileBytes, FileHelper, FileString, FilterBase, FilterHelper, GOOGLE_CLIENT_ID, Gender, HtmlHelper, HttpErrorHandler, JwtHelper, KeyPair, KeyPairChecked, KeyPairEx, KeyPairRequired, LANGUAGE, ListBase, ListBaseComponent, MATCH_VALIDATOR, MatchValidator, MathHelper, Month, ObjectHelper, OverlapHelper, PagedList, Pager, PagerHelper, PeriodRelation, PrintType, RANGE_VALIDATOR, RECAPTCHA_SITE_KEY, RandomHelper, RangeValidator, ReCaptchaService, RecaptchaModule, StorageHelper, StringHelper, TimeHelper, TimeModule, TimePipe, TimerService, TmpHelper, Toast, Tree, UrlHelper, ValidEventArgs, ValidationHelper, Validators, ValidatorsModule, WebApiClient, WebApiModule, ZekAlert, ZekApproveModal, ZekAutoComplete, ZekButtonBrowse, ZekButtonBrowseModalBase, ZekButtonBrowseModalToolbar, ZekButtonBrowseModule, ZekCallbackPipe, ZekCard, ZekCountdown, ZekDateAgoPipe, ZekDeleteModal, ZekDisapproveModal, ZekEditToolbar, ZekFieldValidator, ZekFileSizePipe, ZekFileViewer, ZekFilterModal, ZekGoogleLoginButton, ZekGoogleLoginModule, ZekGridToolbar, ZekGridToolbarBar, ZekListToolbar, ZekLoading, ZekLoadingModule, ZekLocalToUtcModule, ZekLocalToUtcPipe, ZekModal, ZekModalModule, ZekNumericDirective, ZekPageTitle, ZekPager, ZekPassword, ZekProgress, ZekRadio, ZekReadOnlyDirective, ZekRestoreModal, ZekSafePipe, ZekSelect2, ZekSelect2Multiple, ZekSelectMultiple, ZekSort, ZekSortButtonGroup, ZekSubmitModal, ZekSumModal, ZekTag, ZekToast, ZekTooltip, ZekUtcToLocalModule, ZekUtcToLocalPipe, ZekValidation, ZekWizard, ZekWizard2, firstBy, handler, matchValidator, nullValidator, rangeValidator, zekAuthGuard };
 //# sourceMappingURL=zek.mjs.map