@unipin/angular-applet 18.1.0 → 18.2.0

package/fesm2022/unipin-angular-applet.mjs

@@ -622,8 +622,8 @@ function getFormErrorMessage(err, label) {
 }
 
 function generateContrastColor(str) {
-    if (str.length > 8)
-        str = str.substring(0, 8);
+    if (str.length > 4)
+        str = str.substring(0, 4);
     let res = '';
     let total = 0;
     for (let i = 0; i < str.length; i++) {
@@ -2241,20 +2241,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
         }], ctorParameters: () => [{ type: i1$1.Apollo }] });
 
 class FormCurrencyInputComponent {
-    constructor(numberPlaceholder, ch, countryService, currencyService) {
+    constructor(placeholder, numberPlaceholder, ch, currencyService) {
+        this.placeholder = placeholder;
         this.numberPlaceholder = numberPlaceholder;
         this.ch = ch;
-        this.countryService = countryService;
         this.currencyService = currencyService;
         this.clearable = true;
         this.isInputNumber = false;
-        this.label = 'Currency';
         this.numberValue = null;
         this.isNumberDisabled = false;
         this.required = false;
         this.disabled = false;
         this.onChange = new EventEmitter();
-        this.items = [{ label: 'Hello', value: 'c', data: 'a' }];
+        this.items = [];
         this.isLoading = true;
         this.isTouched = false;
         this.value = null;
@@ -2263,27 +2262,13 @@ class FormCurrencyInputComponent {
         this.onTouched = () => { };
     }
     ngOnInit() {
-        if (this.label === 'Currency') {
-            this.sub = this.currencyService.query().subscribe({
-                error: () => {
-                    this.items = [];
-                    this.setIsLoading(false);
-                },
-                next: ({ data: { webConfigMsCurrency: { data } } }) => {
-                    this.items = data.map((d) => ({ label: `[${d.code}] ${d.name}`, value: d.code, data: d }));
-                    this.setIsLoading(false);
-                }
-            });
-            return;
-        }
-        this.isInputNumber = false;
-        this.sub = this.countryService.query().subscribe({
+        this.sub = this.currencyService.query().subscribe({
             error: () => {
                 this.items = [];
                 this.setIsLoading(false);
             },
-            next: ({ data: { webConfigMsCountry: { data } } }) => {
-                this.items = data.map((d) => ({ label: `${d.name}`, value: d.code, data: d }));
+            next: ({ data: { webConfigMsCurrency: { data } } }) => {
+                this.items = data.map((d) => ({ label: `[${d.code}] ${d.name}`, value: d.code, data: d }));
                 this.setIsLoading(false);
             }
         });
@@ -2317,7 +2302,7 @@ class FormCurrencyInputComponent {
             this.selectedItem = e?.data;
             this.changed(this.value);
             this.onChange.emit({ selectedItem: e, number: this.numberValue });
-            this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
+            this.errorMsg = getFormErrorMessage(this.formControl.errors, 'Currency');
         }
         if (e?.magnifyValue === 1)
             this.decimalLimiter = 0;
@@ -2337,8 +2322,8 @@ class FormCurrencyInputComponent {
         this.isLoading = b;
         this.ch.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FormCurrencyInputComponent, deps: [{ token: 'numberPlaceholder', attribute: true }, { token: i0.ChangeDetectorRef }, { token: CountryService }, { token: CurrencyService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.4", type: FormCurrencyInputComponent, isStandalone: true, selector: "up-currency-input", inputs: { clearable: "clearable", isInputNumber: "isInputNumber", label: "label", numberValue: "numberValue", isNumberDisabled: "isNumberDisabled", required: "required", disabled: "disabled" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FormCurrencyInputComponent, deps: [{ token: 'placeholder', attribute: true }, { token: 'numberPlaceholder', attribute: true }, { token: i0.ChangeDetectorRef }, { token: CurrencyService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.4", type: FormCurrencyInputComponent, isStandalone: true, selector: "up-currency-input", inputs: { clearable: "clearable", isInputNumber: "isInputNumber", numberValue: "numberValue", isNumberDisabled: "isNumberDisabled", required: "required", disabled: "disabled" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -2349,7 +2334,7 @@ class FormCurrencyInputComponent {
                 provide: NG_VALIDATORS,
                 useExisting: FormCurrencyInputComponent
             }
-        ], ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n\n<ng-template #selectForm>\n    <ng-select \n        class=\"flex-shrink-0\"\n        [class.number]=\"isInputNumber\"\n        appendTo=\"body\"\n        bindValue=\"value\"\n        placeholder=\"{{ label }}\"\n        [virtualScroll]=\"true\"\n        [items]=\"items\"\n        [ngModel]=\"value\"\n        [readonly]=\"disabled\" \n        [loading]=\"isLoading\"\n        [clearable]=\"clearable\"\n        (change)=\"change($event);\"\n    >\n        <ng-template ng-option-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n\n        <ng-template ng-label-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n    </ng-select>\n</ng-template>\n\n<ng-template #inputNumber>\n    <div class=\"d-flex justify-content-between gap-1 align-items-center\">\n        <ng-container *ngTemplateOutlet=\"selectForm\" />\n\n        <input type=\"number\" [placeholder]=\"numberPlaceholder\" class=\"form-control flex-grow-1\" [disabled]=\"isNumberDisabled\" [value]=\"numberValue\" (keypress)=\"limitDecimal($event)\" (input)=\"numberInput($event.target)\">\n    </div>\n</ng-template>\n\n<ng-container *ngIf=\"!isInputNumber else inputNumber\">\n    <ng-container *ngTemplateOutlet=\"selectForm\" />\n</ng-container>\n\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: ["ng-select.number{min-width:105px;max-width:105px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">Currency</label>\n\n<ng-template #selectForm>\n    <ng-select \n        class=\"flex-shrink-0\"\n        [class.number]=\"isInputNumber\"\n        appendTo=\"body\"\n        bindValue=\"value\"\n        placeholder=\"{{ placeholder }}\"\n        [virtualScroll]=\"true\"\n        [items]=\"items\"\n        [ngModel]=\"value\"\n        [readonly]=\"disabled\" \n        [loading]=\"isLoading\"\n        [clearable]=\"clearable\"\n        (change)=\"change($event);\"\n    >\n        <ng-template ng-option-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n\n        <ng-template ng-label-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n    </ng-select>\n</ng-template>\n\n<ng-template #inputNumber>\n    <div class=\"d-flex justify-content-between gap-1 align-items-center\">\n        <ng-container *ngTemplateOutlet=\"selectForm\" />\n\n        <input type=\"number\" [placeholder]=\"numberPlaceholder\" class=\"form-control flex-grow-1\" [disabled]=\"isNumberDisabled\" [value]=\"numberValue\" (keypress)=\"limitDecimal($event)\" (input)=\"numberInput($event.target)\">\n    </div>\n</ng-template>\n\n<ng-container *ngIf=\"!isInputNumber else inputNumber\">\n    <ng-container *ngTemplateOutlet=\"selectForm\" />\n</ng-container>\n\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: ["ng-select.number{min-width:105px;max-width:105px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FormCurrencyInputComponent, decorators: [{
             type: Component,
@@ -2370,16 +2355,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                             provide: NG_VALIDATORS,
                             useExisting: FormCurrencyInputComponent
                         }
-                    ], template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n\n<ng-template #selectForm>\n    <ng-select \n        class=\"flex-shrink-0\"\n        [class.number]=\"isInputNumber\"\n        appendTo=\"body\"\n        bindValue=\"value\"\n        placeholder=\"{{ label }}\"\n        [virtualScroll]=\"true\"\n        [items]=\"items\"\n        [ngModel]=\"value\"\n        [readonly]=\"disabled\" \n        [loading]=\"isLoading\"\n        [clearable]=\"clearable\"\n        (change)=\"change($event);\"\n    >\n        <ng-template ng-option-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n\n        <ng-template ng-label-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n    </ng-select>\n</ng-template>\n\n<ng-template #inputNumber>\n    <div class=\"d-flex justify-content-between gap-1 align-items-center\">\n        <ng-container *ngTemplateOutlet=\"selectForm\" />\n\n        <input type=\"number\" [placeholder]=\"numberPlaceholder\" class=\"form-control flex-grow-1\" [disabled]=\"isNumberDisabled\" [value]=\"numberValue\" (keypress)=\"limitDecimal($event)\" (input)=\"numberInput($event.target)\">\n    </div>\n</ng-template>\n\n<ng-container *ngIf=\"!isInputNumber else inputNumber\">\n    <ng-container *ngTemplateOutlet=\"selectForm\" />\n</ng-container>\n\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: ["ng-select.number{min-width:105px;max-width:105px}\n"] }]
+                    ], template: "<label class=\"form-label\" [class.required]=\"required\">Currency</label>\n\n<ng-template #selectForm>\n    <ng-select \n        class=\"flex-shrink-0\"\n        [class.number]=\"isInputNumber\"\n        appendTo=\"body\"\n        bindValue=\"value\"\n        placeholder=\"{{ placeholder }}\"\n        [virtualScroll]=\"true\"\n        [items]=\"items\"\n        [ngModel]=\"value\"\n        [readonly]=\"disabled\" \n        [loading]=\"isLoading\"\n        [clearable]=\"clearable\"\n        (change)=\"change($event);\"\n    >\n        <ng-template ng-option-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n\n        <ng-template ng-label-tmp let-i=\"item\">\n            <span>{{ isInputNumber? i.value : i.label }}</span>\n        </ng-template>\n    </ng-select>\n</ng-template>\n\n<ng-template #inputNumber>\n    <div class=\"d-flex justify-content-between gap-1 align-items-center\">\n        <ng-container *ngTemplateOutlet=\"selectForm\" />\n\n        <input type=\"number\" [placeholder]=\"numberPlaceholder\" class=\"form-control flex-grow-1\" [disabled]=\"isNumberDisabled\" [value]=\"numberValue\" (keypress)=\"limitDecimal($event)\" (input)=\"numberInput($event.target)\">\n    </div>\n</ng-template>\n\n<ng-container *ngIf=\"!isInputNumber else inputNumber\">\n    <ng-container *ngTemplateOutlet=\"selectForm\" />\n</ng-container>\n\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: ["ng-select.number{min-width:105px;max-width:105px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['placeholder']
+                }] }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['numberPlaceholder']
-                }] }, { type: i0.ChangeDetectorRef }, { type: CountryService }, { type: CurrencyService }], propDecorators: { clearable: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: CurrencyService }], propDecorators: { clearable: [{
                 type: Input
             }], isInputNumber: [{
                 type: Input
-            }], label: [{
-                type: Input
             }], numberValue: [{
                 type: Input
             }], isNumberDisabled: [{
@@ -2392,6 +2378,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                 type: Output
             }] } });
 
+class FormCountryInputComponent {
+    constructor(placeholder, ch, countryService) {
+        this.placeholder = placeholder;
+        this.ch = ch;
+        this.countryService = countryService;
+        this.clearable = true;
+        this.required = false;
+        this.disabled = false;
+        this.onChange = new EventEmitter();
+        this.items = [];
+        this.isLoading = true;
+        this.isTouched = false;
+        this.value = null;
+        this.changed = (_val) => { };
+        this.onTouched = () => { };
+    }
+    ngOnInit() {
+        this.sub = this.countryService.query().subscribe({
+            error: () => {
+                this.items = [];
+                this.setIsLoading(false);
+            },
+            next: ({ data: { webConfigMsCountry: { data } } }) => {
+                this.items = data.map((d) => ({ label: d.name, value: d.code, data: d }));
+                this.setIsLoading(false);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    registerOnChange(fn) { this.changed = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    writeValue(val) {
+        this.value = val;
+        this.ch.markForCheck();
+    }
+    setDisabledState(d) {
+        this.disabled = d;
+        this.ch.markForCheck();
+    }
+    validate(control) {
+        this.formControl = control;
+        return null;
+    }
+    change(e) {
+        if (!this.isTouched) {
+            this.onTouched();
+            this.isTouched = true;
+        }
+        if (!this.disabled) {
+            this.value = e?.value;
+            this.changed(this.value);
+            this.onChange.emit(e.data);
+            this.errorMsg = getFormErrorMessage(this.formControl.errors, 'Country');
+        }
+    }
+    setIsLoading(b) {
+        this.isLoading = b;
+        this.ch.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FormCountryInputComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }, { token: CountryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.4", type: FormCountryInputComponent, isStandalone: true, selector: "up-country-input", inputs: { clearable: "clearable", required: "required", disabled: "disabled" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
+            {
+                multi: true,
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: FormCountryInputComponent
+            },
+            {
+                multi: true,
+                provide: NG_VALIDATORS,
+                useExisting: FormCountryInputComponent
+            }
+        ], ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">Country</label>\n<ng-select \n    class=\"flex-shrink-0\"\n    appendTo=\"body\"\n    bindValue=\"value\"\n    placeholder=\"{{ placeholder }}\"\n    [virtualScroll]=\"true\"\n    [items]=\"items\"\n    [ngModel]=\"value\"\n    [readonly]=\"disabled\" \n    [loading]=\"isLoading\"\n    [clearable]=\"clearable\"\n    (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: FormCountryInputComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'up-country-input', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'd-block'
+                    }, imports: [
+                        CommonModule,
+                        FormsModule,
+                        NgSelectModule
+                    ], providers: [
+                        {
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: FormCountryInputComponent
+                        },
+                        {
+                            multi: true,
+                            provide: NG_VALIDATORS,
+                            useExisting: FormCountryInputComponent
+                        }
+                    ], template: "<label class=\"form-label\" [class.required]=\"required\">Country</label>\n<ng-select \n    class=\"flex-shrink-0\"\n    appendTo=\"body\"\n    bindValue=\"value\"\n    placeholder=\"{{ placeholder }}\"\n    [virtualScroll]=\"true\"\n    [items]=\"items\"\n    [ngModel]=\"value\"\n    [readonly]=\"disabled\" \n    [loading]=\"isLoading\"\n    [clearable]=\"clearable\"\n    (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['placeholder']
+                }] }, { type: i0.ChangeDetectorRef }, { type: CountryService }], propDecorators: { clearable: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
 class FilterComponent {
     constructor(placeholder, ch, popoverCtrl) {
         this.placeholder = placeholder;
@@ -3460,6 +3554,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
                 args: [ApprovalFormComponent]
             }] } });
 
+class InfiniteScrollDirective {
+    constructor(element) {
+        this.element = element;
+        this.threshold = 0.5;
+        this.rootMargin = '0px';
+        this.onScrollThreshold = new EventEmitter();
+    }
+    ngOnInit() {
+        const options = {
+            root: null,
+            rootMargin: this.rootMargin,
+            threshold: Math.max(0, Math.min(1, this.threshold))
+        };
+        this.observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting)
+                this.onScrollThreshold.emit(true);
+        }, options);
+    }
+    ngAfterViewInit() {
+        this.observer.observe(this.element.nativeElement);
+    }
+    ngOnDestroy() {
+        this.observer.disconnect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: InfiniteScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.4", type: InfiniteScrollDirective, isStandalone: true, selector: "[upInfiniteScroll]", inputs: { threshold: "threshold", rootMargin: "rootMargin" }, outputs: { onScrollThreshold: "onScrollThreshold" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: InfiniteScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[upInfiniteScroll]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { threshold: [{
+                type: Input
+            }], rootMargin: [{
+                type: Input
+            }], onScrollThreshold: [{
+                type: Output
+            }] } });
+
+class InfiniteScrollComponent {
+    constructor() {
+        this.threshold = 0.5;
+        this.rootMargin = '0px';
+        this.loadingIcon = 'dots';
+        this.onScrollThreshold = new EventEmitter();
+    }
+    scroll() {
+        this.onScrollThreshold.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: InfiniteScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.4", type: InfiniteScrollComponent, isStandalone: true, selector: "up-infinite-scroll", inputs: { loadingText: "loadingText", threshold: "threshold", rootMargin: "rootMargin", loadingIcon: "loadingIcon" }, outputs: { onScrollThreshold: "onScrollThreshold" }, ngImport: i0, template: "<div class=\"d-flex flex-column justify-content-center align-items-center p-4\" upInfiniteScroll [threshold]=\"threshold\" [rootMargin]=\"rootMargin\" (onScrollThreshold)=\"scroll()\">\n    <ion-spinner [name]=\"loadingIcon\" />\n    <div class=\"pt-2\" *ngIf=\"loadingText\">{{ loadingText }}</div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[upInfiniteScroll]", inputs: ["threshold", "rootMargin"], outputs: ["onScrollThreshold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'up-infinite-scroll', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        IonicModule,
+                        InfiniteScrollDirective
+                    ], template: "<div class=\"d-flex flex-column justify-content-center align-items-center p-4\" upInfiniteScroll [threshold]=\"threshold\" [rootMargin]=\"rootMargin\" (onScrollThreshold)=\"scroll()\">\n    <ion-spinner [name]=\"loadingIcon\" />\n    <div class=\"pt-2\" *ngIf=\"loadingText\">{{ loadingText }}</div>\n</div>\n" }]
+        }], propDecorators: { loadingText: [{
+                type: Input
+            }], threshold: [{
+                type: Input
+            }], rootMargin: [{
+                type: Input
+            }], loadingIcon: [{
+                type: Input
+            }], onScrollThreshold: [{
+                type: Output
+            }] } });
+
 class AuthResolver {
     isUserLoggedIn() {
         return AuthService.authToken !== '';
@@ -3607,5 +3774,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: AuthService }] });
 
-export { AppletContainerComponent, ApprovalDetailComponent, ApprovalListComponent, AuditDetailComponent, AuditListComponent, AuthGuard, AuthResolver, AuthService, ButtonGroupComponent, ButtonLoadingComponent, ColumnContainerComponent, ColumnHeaderContainerComponent, CountryService, CurrencyService, FilterComponent, FormCurrencyInputComponent, FormDateComponent, FormImagePickerComponent, FormInputComponent, FormNumberComponent, FormPasswordComponent, FormSearchableSelectComponent, FormSelectComponent, FormTextareaComponent, GridPaginationComponent, GridService, GridSnapshotComponent, HeaderInterceptor, ListPaginationContainerComponent, ListSnapshotContainerComponent, LoadingPage, ModalContainerComponent, PermissionDirective, PermissionGuard, PermissionModule, PermissionService, ProfileService, RefreshTokenInterceptor, TabContentComponent, TabGroupComponent, TabsComponentModule, UnauthorizedPage, bootstrap, formatCapitalize, generateContrastColor, getFormErrorMessage };
+export { AppletContainerComponent, ApprovalDetailComponent, ApprovalListComponent, AuditDetailComponent, AuditListComponent, AuthGuard, AuthResolver, AuthService, ButtonGroupComponent, ButtonLoadingComponent, ColumnContainerComponent, ColumnHeaderContainerComponent, CountryService, CurrencyService, FilterComponent, FormCountryInputComponent, FormCurrencyInputComponent, FormDateComponent, FormImagePickerComponent, FormInputComponent, FormNumberComponent, FormPasswordComponent, FormSearchableSelectComponent, FormSelectComponent, FormTextareaComponent, GridPaginationComponent, GridService, GridSnapshotComponent, HeaderInterceptor, InfiniteScrollComponent, InfiniteScrollDirective, ListPaginationContainerComponent, ListSnapshotContainerComponent, LoadingPage, ModalContainerComponent, PermissionDirective, PermissionGuard, PermissionModule, PermissionService, ProfileService, RefreshTokenInterceptor, TabContentComponent, TabGroupComponent, TabsComponentModule, UnauthorizedPage, bootstrap, formatCapitalize, generateContrastColor, getFormErrorMessage };
 //# sourceMappingURL=unipin-angular-applet.mjs.map