@winexist/ngp 0.7.1 → 0.7.2

package/fesm2022/winexist-ngp.mjs

@@ -0,0 +1,1102 @@
+import * as i0 from '@angular/core';
+import { input, Component, output, signal, effect, ViewChild, ContentChild, Input, forwardRef, inject, Injectable, computed, Injector, untracked } from '@angular/core';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from 'primeng/fileupload';
+import { FileUploadModule } from 'primeng/fileupload';
+import * as i4 from '@angular/forms';
+import { NgControl, FormsModule, NG_VALUE_ACCESSOR, FormBuilder, ReactiveFormsModule, NG_VALIDATORS } from '@angular/forms';
+import * as i1$1 from 'primeng/message';
+import { MessageModule } from 'primeng/message';
+import * as i1$2 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+import * as i3$1 from 'primeng/floatlabel';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import * as i5 from 'primeng/progressspinner';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { RxwebValidators } from '@rxweb/reactive-form-validators';
+import * as i1$3 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i2 from 'primeng/inputnumber';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { HttpClient } from '@angular/common/http';
+import * as i3$2 from 'primeng/api';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import * as i4$1 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i6 from 'primeng/popover';
+import { PopoverModule } from 'primeng/popover';
+import * as i5$1 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
+import * as i2$1 from 'primeng/table';
+import { TableModule } from 'primeng/table';
+import { ToastModule } from 'primeng/toast';
+import { ToolbarModule } from 'primeng/toolbar';
+import { TooltipModule } from 'primeng/tooltip';
+import { tap } from 'rxjs/operators';
+import { __decorate } from 'tslib';
+import { shareReplay, catchError, of, finalize } from 'rxjs';
+import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
+
+class EmptyComponent {
+    title = input('Section is empty.', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    message = input('No data available.', ...(ngDevMode ? [{ debugName: "message" }] : []));
+    imgSrc = input(...(ngDevMode ? [undefined, { debugName: "imgSrc" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: EmptyComponent, isStandalone: true, selector: "ngp-empty", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"w-full flex justify-center items-center p-5 h-full\">\n  <div class=\"flex items-center gap-3\">\n    @if (imgSrc()) {\n    <img alt=\"Empty\" [src]=\"imgSrc()\" class=\"w-[80px]\" />\n    } @else {\n    <div class=\"!rounded-md p-5 !bg-slate-100 mb-6\">\n      <span class=\"material-icons !text-gray-400 !text-7xl\"> search_off </span>\n    </div>\n    }\n\n    <div class=\"flex flex-col\">\n      <span class=\"!text-gray-900 !text-2xl !font-bold\">{{ title() }}</span>\n      @if (message()) {\n      <span class=\"!text-gray-400 !text-base\">{{ message() }}</span>\n      }\n    </div>\n  </div>\n</div>", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EmptyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngp-empty', imports: [], template: "<div class=\"w-full flex justify-center items-center p-5 h-full\">\n  <div class=\"flex items-center gap-3\">\n    @if (imgSrc()) {\n    <img alt=\"Empty\" [src]=\"imgSrc()\" class=\"w-[80px]\" />\n    } @else {\n    <div class=\"!rounded-md p-5 !bg-slate-100 mb-6\">\n      <span class=\"material-icons !text-gray-400 !text-7xl\"> search_off </span>\n    </div>\n    }\n\n    <div class=\"flex flex-col\">\n      <span class=\"!text-gray-900 !text-2xl !font-bold\">{{ title() }}</span>\n      @if (message()) {\n      <span class=\"!text-gray-400 !text-base\">{{ message() }}</span>\n      }\n    </div>\n  </div>\n</div>" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], imgSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgSrc", required: false }] }] } });
+
+class FileUploadComponent {
+    fileUploader;
+    // Signal-based inputs with defaults
+    files = input([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    accept = input('.pdf,.png,.jpg,.jpeg,.doc,.docx,.csv,.xls,.xlsx', ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    maxFileSize = input(2097152, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : [])); // 2MB in bytes
+    placeholder = input('Drag and drop new files here to upload.', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    showUploadButton = input(false, ...(ngDevMode ? [{ debugName: "showUploadButton" }] : []));
+    cancelLabel = input('Clear', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
+    // Signal-based outputs
+    filesSelected = output();
+    filesCleared = output();
+    // Internal state
+    uploadedFiles = signal([], ...(ngDevMode ? [{ debugName: "uploadedFiles" }] : []));
+    constructor() {
+        effect(() => {
+            const _files = this.files();
+            if (_files.length) {
+                this.uploadedFiles.set(_files.map((file) => this.addFileType(file)));
+            }
+        });
+    }
+    onFileSelect(event) {
+        const validFiles = event.currentFiles.filter((file) => file.size <= this.maxFileSize() && this.isValidFileType(file));
+        if (validFiles.length) {
+            // Add type to files before adding to uploadedFiles
+            const typedFiles = validFiles.map((file) => this.addFileType(file));
+            if (this.multiple()) {
+                this.uploadedFiles.update((files) => Array.from(new Set([...files, ...typedFiles])));
+            }
+            else {
+                this.uploadedFiles.set(typedFiles);
+            }
+            this.filesSelected.emit(typedFiles);
+        }
+    }
+    onClear() {
+        this.uploadedFiles.set([]);
+        this.filesCleared.emit();
+    }
+    removeFile(index) {
+        this.uploadedFiles.update((files) => files.filter((_, i) => i !== index));
+        this.filesSelected.emit(this.uploadedFiles());
+    }
+    isValidFileType(file) {
+        const acceptedTypes = this.accept().split(',');
+        return acceptedTypes.some((type) => file.name.toLowerCase().endsWith(type.trim().toLowerCase()));
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    clear() {
+        this.uploadedFiles.set([]);
+        if (this.fileUploader?.nativeElement?.clear) {
+            this.fileUploader.nativeElement.clear();
+        }
+    }
+    // Function to determine file type based on extension
+    getFileTypeByExtension(file) {
+        const fileName = file.name.toLowerCase();
+        const imageExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.svg', '.webp'];
+        const pdfExtension = '.pdf';
+        if (imageExtensions.some((ext) => fileName.endsWith(ext))) {
+            return 'image';
+        }
+        else if (fileName.endsWith(pdfExtension)) {
+            return 'pdf';
+        }
+        else {
+            return 'other';
+        }
+    }
+    // Function to add type property to file
+    addFileType(file) {
+        const typedFile = file;
+        typedFile.fileType = this.getFileTypeByExtension(file);
+        return typedFile;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FileUploadComponent, isStandalone: true, selector: "ngp-file-upload", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showUploadButton: { classPropertyName: "showUploadButton", publicName: "showUploadButton", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", filesCleared: "filesCleared" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUploader"], descendants: true }], ngImport: i0, template: "<p-fileupload #fileUploader [multiple]=\"multiple()\" [showUploadButton]=\"showUploadButton()\"\n  [cancelLabel]=\"cancelLabel()\" [accept]=\"accept()\" auto=\"false\" [maxFileSize]=\"maxFileSize()\" mode=\"advanced\"\n  [customUpload]=\"true\" styleClass=\"!bg-gray-50\" (onSelect)=\"onFileSelect($event)\" (onClear)=\"onClear()\">\n  <ng-template #content>\n    @if (uploadedFiles().length) {\n    <ul class=\"space-y-2\">\n      @for (file of uploadedFiles(); track $index) {\n      <li class=\"flex justify-between gap-4 p-2 bg-gray-100 rounded\">\n        <div class=\"flex gap-2\">\n          <ng-container [ngTemplateOutlet]=\"iconTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: file.fileType }\"></ng-container>\n          <span class=\"text-sm\"> {{ file.name }} - {{ formatFileSize(file.size) }} </span>\n        </div>\n        <button type=\"button\" (click)=\"removeFile($index)\" class=\"text-red-500 hover:text-red-700 text-sm\">\n          <span class=\"material-icons !text-base\"> cancel </span>\n        </button>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"flex flex-col items-center gap-3\">\n      <img src=\"assets/images/file-upload.svg\" alt=\"File Upload\" class=\"w-28 mx-auto\" />\n      <span class=\"font-semibold text-center text-gray-400 text-sm\">\n        Drag & drop or<br />\n        click the \"Choose\" button to add new files\n      </span>\n    </div>\n    }\n  </ng-template>\n  <ng-template #file></ng-template>\n</p-fileupload>\n\n<ng-template #iconTemplate let-type>\n  @if (type === 'image') {\n  <span class=\"material-icons\"> image </span>\n  } @else if (type === 'pdf') {\n  <span class=\"material-icons\"> picture_as_pdf </span>\n  } @else {\n  <span class=\"material-icons\"> insert_drive_file </span>\n  }\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i1.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngp-file-upload', imports: [FileUploadModule, CommonModule], template: "<p-fileupload #fileUploader [multiple]=\"multiple()\" [showUploadButton]=\"showUploadButton()\"\n  [cancelLabel]=\"cancelLabel()\" [accept]=\"accept()\" auto=\"false\" [maxFileSize]=\"maxFileSize()\" mode=\"advanced\"\n  [customUpload]=\"true\" styleClass=\"!bg-gray-50\" (onSelect)=\"onFileSelect($event)\" (onClear)=\"onClear()\">\n  <ng-template #content>\n    @if (uploadedFiles().length) {\n    <ul class=\"space-y-2\">\n      @for (file of uploadedFiles(); track $index) {\n      <li class=\"flex justify-between gap-4 p-2 bg-gray-100 rounded\">\n        <div class=\"flex gap-2\">\n          <ng-container [ngTemplateOutlet]=\"iconTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: file.fileType }\"></ng-container>\n          <span class=\"text-sm\"> {{ file.name }} - {{ formatFileSize(file.size) }} </span>\n        </div>\n        <button type=\"button\" (click)=\"removeFile($index)\" class=\"text-red-500 hover:text-red-700 text-sm\">\n          <span class=\"material-icons !text-base\"> cancel </span>\n        </button>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"flex flex-col items-center gap-3\">\n      <img src=\"assets/images/file-upload.svg\" alt=\"File Upload\" class=\"w-28 mx-auto\" />\n      <span class=\"font-semibold text-center text-gray-400 text-sm\">\n        Drag & drop or<br />\n        click the \"Choose\" button to add new files\n      </span>\n    </div>\n    }\n  </ng-template>\n  <ng-template #file></ng-template>\n</p-fileupload>\n\n<ng-template #iconTemplate let-type>\n  @if (type === 'image') {\n  <span class=\"material-icons\"> image </span>\n  } @else if (type === 'pdf') {\n  <span class=\"material-icons\"> picture_as_pdf </span>\n  } @else {\n  <span class=\"material-icons\"> insert_drive_file </span>\n  }\n</ng-template>" }]
+        }], ctorParameters: () => [], propDecorators: { fileUploader: [{
+                type: ViewChild,
+                args: ['fileUploader']
+            }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showUploadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUploadButton", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], filesCleared: [{ type: i0.Output, args: ["filesCleared"] }] } });
+
+// form-field-wrapper.component.ts
+class FormFieldWrapperComponent {
+    validationMessages = {
+        required: 'This field is required',
+        email: 'Please enter a valid email',
+        minlength: 'Input does not meet minimum length',
+        maxlength: 'Input exceeds maximum length',
+        pattern: 'Input format is invalid',
+        endTimeBeforeStartTime: 'End time must not be before start time',
+        breakStartBeforeEarliestStart: 'Break start time cannot be before the earliest start time'
+    };
+    control;
+    subscription;
+    ngAfterContentInit() {
+        if (this.control) {
+            this.subscription = this.control.statusChanges?.subscribe(() => { });
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    shouldShowError() {
+        return (!!this.control &&
+            this.control.invalid === true &&
+            (this.control.dirty === true || this.control.touched === true));
+    }
+    getErrorMessage() {
+        if (!this.control?.errors) {
+            return '';
+        }
+        const firstErrorKey = Object.keys(this.control.errors)[0];
+        const error = this.control.errors[firstErrorKey];
+        if (this.control.errors['message']) {
+            return this.control.errors['message'];
+        }
+        if (error?.message) {
+            return error.message;
+        }
+        return this.validationMessages[firstErrorKey] || `Invalid input: ${firstErrorKey}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FormFieldWrapperComponent, isStandalone: true, selector: "ngp-form-field-wrapper", inputs: { validationMessages: "validationMessages" }, queries: [{ propertyName: "control", first: true, predicate: NgControl, descendants: true }], ngImport: i0, template: "<div class=\"form-field-container\">\n  <ng-content></ng-content>\n  @if (shouldShowError()) {\n  <p-message severity=\"error\" variant=\"simple\" size=\"small\" [text]=\"getErrorMessage()\">\n  </p-message>\n  }\n</div>", styles: [":host{display:block;margin-bottom:1rem}.form-field-container{display:flex;flex-direction:column;gap:4px}:host ::ng-deep .ng-invalid.ng-touched,:host ::ng-deep .ng-invalid.ng-dirty{border-color:#f44336!important;outline-color:#f44336!important}:host ::ng-deep .ng-invalid.ng-touched input,:host ::ng-deep .ng-invalid.ng-dirty input{border-color:#f44336!important;outline-color:#f44336!important}:host ::ng-deep .ng-invalid.ng-touched .ng-select-container,:host ::ng-deep .ng-invalid.ng-dirty .ng-select-container{border-color:#f44336!important;outline-color:#f44336!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i1$1.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngp-form-field-wrapper', standalone: true, imports: [CommonModule, MessageModule], template: "<div class=\"form-field-container\">\n  <ng-content></ng-content>\n  @if (shouldShowError()) {\n  <p-message severity=\"error\" variant=\"simple\" size=\"small\" [text]=\"getErrorMessage()\">\n  </p-message>\n  }\n</div>", styles: [":host{display:block;margin-bottom:1rem}.form-field-container{display:flex;flex-direction:column;gap:4px}:host ::ng-deep .ng-invalid.ng-touched,:host ::ng-deep .ng-invalid.ng-dirty{border-color:#f44336!important;outline-color:#f44336!important}:host ::ng-deep .ng-invalid.ng-touched input,:host ::ng-deep .ng-invalid.ng-dirty input{border-color:#f44336!important;outline-color:#f44336!important}:host ::ng-deep .ng-invalid.ng-touched .ng-select-container,:host ::ng-deep .ng-invalid.ng-dirty .ng-select-container{border-color:#f44336!important;outline-color:#f44336!important}\n"] }]
+        }], propDecorators: { validationMessages: [{
+                type: Input
+            }], control: [{
+                type: ContentChild,
+                args: [NgControl]
+            }] } });
+
+class BasicNgSelectComponent {
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    bindLabel = input('', ...(ngDevMode ? [{ debugName: "bindLabel" }] : []));
+    bindValue = input('', ...(ngDevMode ? [{ debugName: "bindValue" }] : []));
+    placeholder = input('Select an option', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    required = input(true, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    // Internal state
+    value = null;
+    disabled = false;
+    // ControlValueAccessor callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    // Handle value changes from ng-select
+    onValueChange(value) {
+        this.value = value;
+        this.onChange(value);
+    }
+    writeValue(val) {
+        this.value = val;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    // Compare function for ng-select
+    compareWith = (item, selected) => {
+        const bindValueKey = this.bindValue();
+        // If no bindValue is set, compare entire objects
+        if (!bindValueKey) {
+            return item === selected;
+        }
+        // Handle null/undefined cases
+        if (!item || !selected) {
+            return item === selected;
+        }
+        // If selected is a primitive (just the id), compare with item's property
+        if (typeof selected !== 'object') {
+            return item[bindValueKey] === selected;
+        }
+        // If both are objects, compare the bindValue property
+        return item[bindValueKey] === selected[bindValueKey];
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BasicNgSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: BasicNgSelectComponent, isStandalone: true, selector: "ngp-basic-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => BasicNgSelectComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<ngp-form-field-wrapper>\n  <p-floatlabel variant=\"in\">\n    <ng-select [(ngModel)]=\"value\" [bindLabel]=\"bindLabel()\" [bindValue]=\"bindValue()\" [items]=\"options()\"\n      [compareWith]=\"compareWith\" [clearable]=\"clearable()\" (change)=\"onValueChange($event)\">\n      <ng-template ng-loadingspinner-tmp>\n        <ng-container [ngTemplateOutlet]=\"spinner\" />\n      </ng-template>\n    </ng-select>\n\n    @if (label()) {\n    <label class=\"block mb-2\" [ngClass]=\"{'required-label': required() }\">{{ label() }}</label>\n    }\n  </p-floatlabel>\n</ngp-form-field-wrapper>\n\n<ng-template #spinner>\n  <p-progress-spinner ariaLabel=\"loading\" styleClass=\"text-gray-400\" />\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i1$2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "ngp-form-field-wrapper", inputs: ["validationMessages"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BasicNgSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngp-basic-select', imports: [NgSelectModule, FormsModule, CommonModule, FormFieldWrapperComponent, FloatLabelModule, ProgressSpinnerModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BasicNgSelectComponent),
+                            multi: true
+                        }
+                    ], template: "<ngp-form-field-wrapper>\n  <p-floatlabel variant=\"in\">\n    <ng-select [(ngModel)]=\"value\" [bindLabel]=\"bindLabel()\" [bindValue]=\"bindValue()\" [items]=\"options()\"\n      [compareWith]=\"compareWith\" [clearable]=\"clearable()\" (change)=\"onValueChange($event)\">\n      <ng-template ng-loadingspinner-tmp>\n        <ng-container [ngTemplateOutlet]=\"spinner\" />\n      </ng-template>\n    </ng-select>\n\n    @if (label()) {\n    <label class=\"block mb-2\" [ngClass]=\"{'required-label': required() }\">{{ label() }}</label>\n    }\n  </p-floatlabel>\n</ngp-form-field-wrapper>\n\n<ng-template #spinner>\n  <p-progress-spinner ariaLabel=\"loading\" styleClass=\"text-gray-400\" />\n</ng-template>" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
+
+class AddressService {
+    url = `/api/v1/records/address`;
+    http = inject(HttpClient);
+    getProvinces() {
+        return this.http.get(`${this.url}/provinces`);
+    }
+    getMunicipalities(provinceId) {
+        return this.http.get(`${this.url}/municipalities/${provinceId}`);
+    }
+    getBarangays(muncipalityId, params) {
+        return this.http.get(`${this.url}/barangay/${muncipalityId}`, { params });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddressService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddressService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class FgAddressComponent {
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    isCreateMode = input(true, ...(ngDevMode ? [{ debugName: "isCreateMode" }] : []));
+    isViewMode = input(false, ...(ngDevMode ? [{ debugName: "isViewMode" }] : []));
+    addressForm;
+    provHttp$;
+    cityHttp$;
+    barangayHttp$;
+    provinceOptions = [];
+    cityOptions = [];
+    barangayOptions = [];
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    pendingAddress = null;
+    isInitializing = false;
+    detectedEditMode = false;
+    onChange = () => { };
+    onTouched = () => { };
+    addressService = inject(AddressService);
+    fb = inject(FormBuilder);
+    constructor() {
+        this.addressForm = this.fb.group({
+            line1: [null, RxwebValidators.required()],
+            line2: [null],
+            barangay: [null, RxwebValidators.required()],
+            city: [null, RxwebValidators.required()],
+            province: [null, RxwebValidators.required()],
+            country: ['Philippines', RxwebValidators.required()],
+            zipCode: [null, RxwebValidators.required()],
+            landmark: [null, RxwebValidators.required()]
+        });
+        // Use effect to watch for form value changes
+        effect(() => {
+            if (this.isDisabled()) {
+                this.addressForm.disable({ emitEvent: false });
+            }
+            else {
+                this.addressForm.enable({ emitEvent: false });
+            }
+        });
+        // Subscribe to form changes
+        this.addressForm.valueChanges.subscribe((value) => {
+            this.onChange(value);
+            this.onTouched();
+        });
+        this.loadProvince();
+        // Handle province changes - works for both create and edit mode
+        this.addressForm.get('province')?.valueChanges.subscribe((prov) => {
+            if (prov && !this.isInitializing) {
+                this.clearFieldByName('city');
+                this.clearFieldByName('barangay');
+                this.cityOptions = [];
+                this.barangayOptions = [];
+                this.loadCityByProvinceId(prov.id);
+            }
+        });
+        // Handle city changes - works for both create and edit mode
+        this.addressForm.get('city')?.valueChanges.subscribe((city) => {
+            if (city && !this.isInitializing) {
+                this.clearFieldByName('barangay');
+                this.barangayOptions = [];
+                this.loadBarangayByCityId(city.id);
+            }
+        });
+    }
+    clearFieldByName(fieldName) {
+        this.addressForm.get(fieldName)?.setValue(null, { emitEvent: false });
+    }
+    loadProvince() {
+        this.provHttp$ = this.addressService.getProvinces().subscribe((res) => {
+            this.provinceOptions = res;
+            // If we have a pending address to load, process it now
+            if (this.pendingAddress) {
+                this.initializeEditMode(this.pendingAddress);
+            }
+        });
+    }
+    loadCityByProvinceId(id) {
+        this.cityHttp$ = this.addressService.getMunicipalities(id).subscribe((res) => {
+            this.cityOptions = res;
+            // Continue initialization if needed
+            if (this.isInitializing && this.pendingAddress) {
+                this.setCityFromPending();
+            }
+        });
+    }
+    loadBarangayByCityId(id) {
+        this.barangayHttp$ = this.addressService.getBarangays(id).subscribe((res) => {
+            this.barangayOptions = res;
+            // Continue initialization if needed
+            if (this.isInitializing && this.pendingAddress) {
+                this.setBarangayFromPending();
+            }
+        });
+    }
+    /**
+     * Detects if the address contains data that requires edit mode initialization
+     */
+    isEditModeAddress(address) {
+        // Check if any cascading field (province, city, barangay) is a string (name)
+        // This indicates data from backend that needs to be matched with dropdown options
+        return ((typeof address.province === 'string' && address.province !== '') ||
+            (typeof address.city === 'string' && address.city !== '') ||
+            (typeof address.barangay === 'string' && address.barangay !== ''));
+    }
+    initializeEditMode(address) {
+        this.isInitializing = true;
+        // Set non-cascading fields first
+        this.addressForm.patchValue({
+            line1: address.line1,
+            line2: address.line2,
+            country: address.country || 'Philippines',
+            zipCode: address.zipCode,
+            landmark: address.landmark
+        }, { emitEvent: false });
+        // Find and set province
+        if (address.province && typeof address.province === 'string') {
+            const provinceItem = this.provinceOptions.find((p) => p.name.toLowerCase() === address.province?.toLowerCase());
+            if (provinceItem) {
+                this.addressForm.get('province')?.setValue(provinceItem, { emitEvent: false });
+                this.loadCityByProvinceId(provinceItem.id);
+            }
+            else {
+                this.completeInitialization();
+            }
+        }
+        else {
+            this.completeInitialization();
+        }
+    }
+    setCityFromPending() {
+        if (!this.pendingAddress?.city || typeof this.pendingAddress.city !== 'string') {
+            this.completeInitialization();
+            return;
+        }
+        const cityItem = this.cityOptions.find((c) => c.name.toLowerCase() === this.pendingAddress.city?.toLowerCase());
+        if (cityItem) {
+            this.addressForm.get('city')?.setValue(cityItem, { emitEvent: false });
+            this.loadBarangayByCityId(cityItem.id);
+        }
+        else {
+            this.completeInitialization();
+        }
+    }
+    setBarangayFromPending() {
+        if (!this.pendingAddress?.barangay || typeof this.pendingAddress.barangay !== 'string') {
+            this.completeInitialization();
+            return;
+        }
+        const barangayItem = this.barangayOptions.find((b) => b.name.toLowerCase() === this.pendingAddress.barangay?.toLowerCase());
+        if (barangayItem) {
+            this.addressForm.get('barangay')?.setValue(barangayItem, { emitEvent: false });
+        }
+        this.completeInitialization();
+    }
+    completeInitialization() {
+        this.isInitializing = false;
+        this.pendingAddress = null;
+    }
+    // ControlValueAccessor methods
+    writeValue(value) {
+        if (value) {
+            // Auto-detect if this is edit mode based on the address data structure
+            this.detectedEditMode = this.isEditModeAddress(value);
+            if (this.detectedEditMode) {
+                // Address contains string values (names) - needs initialization
+                this.pendingAddress = value;
+                // If provinces are already loaded, start initialization
+                if (this.provinceOptions.length > 0) {
+                    this.initializeEditMode(value);
+                }
+                // Otherwise, it will be triggered when provinces load
+            }
+            else {
+                // Create mode or already has proper objects
+                this.addressForm.patchValue(value, { emitEvent: false });
+                // Load cascading data if IDs are present
+                const province = value.province;
+                if (province && typeof province === 'object' && 'id' in province) {
+                    this.loadCityByProvinceId(province.id);
+                }
+                const city = value.city;
+                if (city && typeof city === 'object' && 'id' in city) {
+                    this.loadBarangayByCityId(city.id);
+                }
+            }
+        }
+        else {
+            this.addressForm.reset({ country: 'Philippines' }, { emitEvent: false });
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled?.set(isDisabled);
+        if (isDisabled) {
+            this.addressForm.disable();
+        }
+        else {
+            this.addressForm.enable();
+        }
+    }
+    validate(control) {
+        return this.addressForm?.valid ? null : { invalidAddress: true };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FgAddressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FgAddressComponent, isStandalone: true, selector: "ngp-fg-address", inputs: { showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, isCreateMode: { classPropertyName: "isCreateMode", publicName: "isCreateMode", isSignal: true, isRequired: false, transformFunction: null }, isViewMode: { classPropertyName: "isViewMode", publicName: "isViewMode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FgAddressComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => FgAddressComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "@if (showHeader()) {\n\t<h2 class=\"text-xl font-semibold mb-4\">Address</h2>\n}\n\n@if (isViewMode()) {\n\t@let address = addressForm.value;\n\n\t<div class=\"grid gap-3 p-4\">\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"country\">Country:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{ address.country || 'Philippines' }}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"province\">Province:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{\n\t\t\t\taddress.province?.name || address.province || ''\n\t\t\t}}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"city\">City/Municipality:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{\n\t\t\t\taddress.city?.name || address.city || ''\n\t\t\t}}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"barangay\">Barangay:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{\n\t\t\t\taddress.barangay?.name || address.barangay || ''\n\t\t\t}}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"line1\">Line 1:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{ address.line1 || '' }}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"line2\">Line 2:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{ address.line2 || '' }}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"zipCode\">Zip Code:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{ address.zipCode || '' }}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"landmark\">Nearest Landmark:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{ address.landmark || '' }}</p>\n\t\t</div>\n\t</div>\n} @else {\n\t<form [formGroup]=\"addressForm\">\n\t\t<div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n\t\t\t<div>\n\t\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t\t<input pInputText trim=\"blur\" id=\"country\" formControlName=\"country\" class=\"w-full\" />\n\t\t\t\t\t\t<label for=\"country\" class=\"block mb-2 required-label\">Country</label>\n\t\t\t\t\t</p-floatlabel>\n\t\t\t\t</ngp-form-field-wrapper>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t\t<ng-select\n\t\t\t\t\t\t\tformControlName=\"province\"\n\t\t\t\t\t\t\t[items]=\"provinceOptions\"\n\t\t\t\t\t\t\t[loading]=\"provHttp$ && !provHttp$.closed\"\n\t\t\t\t\t\t\tbindLabel=\"name\" />\n\t\t\t\t\t\t<label for=\"province\" class=\"block mb-2 required-label\">Province</label>\n\t\t\t\t\t</p-floatlabel>\n\t\t\t\t</ngp-form-field-wrapper>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n\t\t\t<div>\n\t\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t\t<ng-select\n\t\t\t\t\t\t\tformControlName=\"city\"\n\t\t\t\t\t\t\t[items]=\"cityOptions\"\n\t\t\t\t\t\t\t[loading]=\"cityHttp$ && !cityHttp$.closed\"\n\t\t\t\t\t\t\tbindLabel=\"name\" />\n\t\t\t\t\t\t<label for=\"city\" class=\"block mb-2 required-label\">City/Municipality</label>\n\t\t\t\t\t</p-floatlabel>\n\t\t\t\t</ngp-form-field-wrapper>\n\t\t\t</div>\n\n\t\t\t<div>\n\t\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t\t<ng-select\n\t\t\t\t\t\t\tformControlName=\"barangay\"\n\t\t\t\t\t\t\t[items]=\"barangayOptions\"\n\t\t\t\t\t\t\t[loading]=\"barangayHttp$ && !barangayHttp$.closed\"\n\t\t\t\t\t\t\tbindLabel=\"name\" />\n\n\t\t\t\t\t\t<label for=\"barangay\" class=\"block mb-2 required-label\">Barangay</label>\n\t\t\t\t\t</p-floatlabel>\n\t\t\t\t</ngp-form-field-wrapper>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div>\n\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t<label for=\"line1\" class=\"block mb-2 required-label\">Line 1</label>\n\t\t\t\t\t<input pInputText trim=\"blur\" id=\"line1\" formControlName=\"line1\" class=\"w-full\" />\n\t\t\t\t</p-floatlabel>\n\t\t\t</ngp-form-field-wrapper>\n\t\t</div>\n\n\t\t<div>\n\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t<label for=\"line2\" class=\"block mb-2\">Line 2</label>\n\t\t\t\t\t<input pInputText trim=\"blur\" id=\"line2\" formControlName=\"line2\" class=\"w-full\" />\n\t\t\t\t</p-floatlabel>\n\t\t\t</ngp-form-field-wrapper>\n\t\t</div>\n\t\t<div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n\t\t\t<div>\n\t\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t\t<p-inputnumber\n\t\t\t\t\t\t\t[inputId]=\"'zipCode'\"\n\t\t\t\t\t\t\tformControlName=\"zipCode\"\n\t\t\t\t\t\t\tstyleClass=\"w-full\"\n\t\t\t\t\t\t\t[useGrouping]=\"false\" />\n\t\t\t\t\t\t<label for=\"zipCode\" class=\"block mb-2 required-label\">Zip Code</label>\n\t\t\t\t\t</p-floatlabel>\n\t\t\t\t</ngp-form-field-wrapper>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t\t<label for=\"landmark\" class=\"block mb-2 required-label\">Nearest Landmark</label>\n\t\t\t\t\t\t<input pInputText trim=\"blur\" id=\"landmark\" formControlName=\"landmark\" class=\"w-full\" />\n\t\t\t\t\t</p-floatlabel>\n\t\t\t\t</ngp-form-field-wrapper>\n\t\t\t</div>\n\t\t</div>\n\t</form>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i2.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "ngp-form-field-wrapper", inputs: ["validationMessages"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FgAddressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngp-fg-address', imports: [
+                        InputTextModule,
+                        InputNumberModule,
+                        FloatLabelModule,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormFieldWrapperComponent,
+                        NgSelectModule
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FgAddressComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => FgAddressComponent),
+                            multi: true
+                        }
+                    ], template: "@if (showHeader()) {\n\t<h2 class=\"text-xl font-semibold mb-4\">Address</h2>\n}\n\n@if (isViewMode()) {\n\t@let address = addressForm.value;\n\n\t<div class=\"grid gap-3 p-4\">\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"country\">Country:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{ address.country || 'Philippines' }}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"province\">Province:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{\n\t\t\t\taddress.province?.name || address.province || ''\n\t\t\t}}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"city\">City/Municipality:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{\n\t\t\t\taddress.city?.name || address.city || ''\n\t\t\t}}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"barangay\">Barangay:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{\n\t\t\t\taddress.barangay?.name || address.barangay || ''\n\t\t\t}}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"line1\">Line 1:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{ address.line1 || '' }}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"line2\">Line 2:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{ address.line2 || '' }}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between border-b border-b-slate-200 py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"zipCode\">Zip Code:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{ address.zipCode || '' }}</p>\n\t\t</div>\n\t\t<div class=\"flex items-center justify-between py-3\">\n\t\t\t<label class=\"font-bold px-2 text-slate-400 text-sm\" for=\"landmark\">Nearest Landmark:</label>\n\t\t\t<p class=\"font-bold text-right text-slate-500\">{{ address.landmark || '' }}</p>\n\t\t</div>\n\t</div>\n} @else {\n\t<form [formGroup]=\"addressForm\">\n\t\t<div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n\t\t\t<div>\n\t\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t\t<input pInputText trim=\"blur\" id=\"country\" formControlName=\"country\" class=\"w-full\" />\n\t\t\t\t\t\t<label for=\"country\" class=\"block mb-2 required-label\">Country</label>\n\t\t\t\t\t</p-floatlabel>\n\t\t\t\t</ngp-form-field-wrapper>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t\t<ng-select\n\t\t\t\t\t\t\tformControlName=\"province\"\n\t\t\t\t\t\t\t[items]=\"provinceOptions\"\n\t\t\t\t\t\t\t[loading]=\"provHttp$ && !provHttp$.closed\"\n\t\t\t\t\t\t\tbindLabel=\"name\" />\n\t\t\t\t\t\t<label for=\"province\" class=\"block mb-2 required-label\">Province</label>\n\t\t\t\t\t</p-floatlabel>\n\t\t\t\t</ngp-form-field-wrapper>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n\t\t\t<div>\n\t\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t\t<ng-select\n\t\t\t\t\t\t\tformControlName=\"city\"\n\t\t\t\t\t\t\t[items]=\"cityOptions\"\n\t\t\t\t\t\t\t[loading]=\"cityHttp$ && !cityHttp$.closed\"\n\t\t\t\t\t\t\tbindLabel=\"name\" />\n\t\t\t\t\t\t<label for=\"city\" class=\"block mb-2 required-label\">City/Municipality</label>\n\t\t\t\t\t</p-floatlabel>\n\t\t\t\t</ngp-form-field-wrapper>\n\t\t\t</div>\n\n\t\t\t<div>\n\t\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t\t<ng-select\n\t\t\t\t\t\t\tformControlName=\"barangay\"\n\t\t\t\t\t\t\t[items]=\"barangayOptions\"\n\t\t\t\t\t\t\t[loading]=\"barangayHttp$ && !barangayHttp$.closed\"\n\t\t\t\t\t\t\tbindLabel=\"name\" />\n\n\t\t\t\t\t\t<label for=\"barangay\" class=\"block mb-2 required-label\">Barangay</label>\n\t\t\t\t\t</p-floatlabel>\n\t\t\t\t</ngp-form-field-wrapper>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div>\n\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t<label for=\"line1\" class=\"block mb-2 required-label\">Line 1</label>\n\t\t\t\t\t<input pInputText trim=\"blur\" id=\"line1\" formControlName=\"line1\" class=\"w-full\" />\n\t\t\t\t</p-floatlabel>\n\t\t\t</ngp-form-field-wrapper>\n\t\t</div>\n\n\t\t<div>\n\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t<label for=\"line2\" class=\"block mb-2\">Line 2</label>\n\t\t\t\t\t<input pInputText trim=\"blur\" id=\"line2\" formControlName=\"line2\" class=\"w-full\" />\n\t\t\t\t</p-floatlabel>\n\t\t\t</ngp-form-field-wrapper>\n\t\t</div>\n\t\t<div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n\t\t\t<div>\n\t\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t\t<p-inputnumber\n\t\t\t\t\t\t\t[inputId]=\"'zipCode'\"\n\t\t\t\t\t\t\tformControlName=\"zipCode\"\n\t\t\t\t\t\t\tstyleClass=\"w-full\"\n\t\t\t\t\t\t\t[useGrouping]=\"false\" />\n\t\t\t\t\t\t<label for=\"zipCode\" class=\"block mb-2 required-label\">Zip Code</label>\n\t\t\t\t\t</p-floatlabel>\n\t\t\t\t</ngp-form-field-wrapper>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<ngp-form-field-wrapper>\n\t\t\t\t\t<p-floatlabel variant=\"in\">\n\t\t\t\t\t\t<label for=\"landmark\" class=\"block mb-2 required-label\">Nearest Landmark</label>\n\t\t\t\t\t\t<input pInputText trim=\"blur\" id=\"landmark\" formControlName=\"landmark\" class=\"w-full\" />\n\t\t\t\t\t</p-floatlabel>\n\t\t\t\t</ngp-form-field-wrapper>\n\t\t\t</div>\n\t\t</div>\n\t</form>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], isCreateMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCreateMode", required: false }] }], isViewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isViewMode", required: false }] }] } });
+
+class DataTableComponent {
+    dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    totalElements = input(0, ...(ngDevMode ? [{ debugName: "totalElements" }] : []));
+    currentPage = input(0, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    showDefaultActions = input(true, ...(ngDevMode ? [{ debugName: "showDefaultActions" }] : []));
+    emptyMessage = input('No data available.', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    hasDeleteAction = input(true, ...(ngDevMode ? [{ debugName: "hasDeleteAction" }] : []));
+    hasEditAction = input(true, ...(ngDevMode ? [{ debugName: "hasEditAction" }] : []));
+    canEdit = input(() => true, ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    hasViewAction = input(true, ...(ngDevMode ? [{ debugName: "hasViewAction" }] : []));
+    entityName = input('', ...(ngDevMode ? [{ debugName: "entityName" }] : []));
+    isPaginated = input(true, ...(ngDevMode ? [{ debugName: "isPaginated" }] : []));
+    showCustomAction = input(false, ...(ngDevMode ? [{ debugName: "showCustomAction" }] : []));
+    showRowNumbers = input(false, ...(ngDevMode ? [{ debugName: "showRowNumbers" }] : []));
+    rowNumberHeader = input('', ...(ngDevMode ? [{ debugName: "rowNumberHeader" }] : []));
+    // Internal signals
+    data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    filteredData = signal([], ...(ngDevMode ? [{ debugName: "filteredData" }] : []));
+    dialogVisible = signal(false, ...(ngDevMode ? [{ debugName: "dialogVisible" }] : []));
+    dialogTitle = signal('Add Item', ...(ngDevMode ? [{ debugName: "dialogTitle" }] : []));
+    editingItem = signal(null, ...(ngDevMode ? [{ debugName: "editingItem" }] : []));
+    // Custom event emitters
+    add = output();
+    edit = output();
+    deleteAction = output();
+    view = output();
+    pageChange = output();
+    sortChange = output();
+    actions = computed(() => [this.hasViewAction(), this.hasEditAction(), this.hasDeleteAction()], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    actionsLength = computed(() => this.actions().filter((action) => !!action).length, ...(ngDevMode ? [{ debugName: "actionsLength" }] : []));
+    actionItems = computed(() => {
+        return [
+            {
+                label: 'View ' + this.entityName(),
+                visible: this.hasViewAction(),
+                icon: 'pi-search'
+            },
+            {
+                label: 'Update ' + this.entityName(),
+                visible: this.hasEditAction(),
+                icon: 'pi-pen-to-square',
+                shouldShow: (item) => this.canEdit()(item)
+            },
+            {
+                label: 'Delete ' + this.entityName(),
+                visible: this.hasDeleteAction(),
+                icon: 'pi-trash'
+            }
+        ];
+    }, ...(ngDevMode ? [{ debugName: "actionItems" }] : []));
+    // Content children for custom templates
+    formTemplate;
+    table;
+    // Services
+    http = inject(HttpClient);
+    confirmationService = inject(ConfirmationService);
+    messageService = inject(MessageService);
+    // Column filters for individual column filtering
+    filterValues = {};
+    // For custom cell templates
+    customTemplates = new Map();
+    constructor() {
+        // Effect to update filtered data when raw data changes
+        effect(() => {
+            const sourceData = this.dataSource();
+            this.data.set([...sourceData]);
+        });
+    }
+    // Register a custom template for a specific column
+    registerTemplate(field, template) {
+        this.customTemplates.set(field, template);
+    }
+    handlePageChange(event) {
+        this.pageChange.emit(event);
+    }
+    handleSort(event) {
+        const column = this.columns().find((col) => col.field === event.field);
+        const actualSortField = column?.sortField ?? event.field;
+        const order = event.order === 1 ? 'ASC' : 'DESC';
+        this.sortChange.emit({
+            sort: actualSortField,
+            order
+        });
+    }
+    resetTableSort() {
+        if (this.table) {
+            this.table.sortOrder = 0;
+            this.table.sortField = null;
+            this.table.tableService.onSort(null);
+        }
+    }
+    // Helper to safely get nested property values using dot notation
+    getItemValue(item, field, column) {
+        if (column && typeof column.render === 'function') {
+            return column.render(item);
+        }
+        return field
+            .split('.')
+            .reduce((obj, key) => obj?.[key] ?? null, item);
+    }
+    perFormActionFromPopover(item, actionType) {
+        if (actionType.includes('View')) {
+            this.view.emit(item);
+        }
+        else if (actionType.includes('Update')) {
+            this.edit.emit(item);
+        }
+        else if (actionType.includes('Delete')) {
+            this.deleteAction.emit(item);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DataTableComponent, isStandalone: true, selector: "ngp-data-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalElements: { classPropertyName: "totalElements", publicName: "totalElements", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, showDefaultActions: { classPropertyName: "showDefaultActions", publicName: "showDefaultActions", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, hasDeleteAction: { classPropertyName: "hasDeleteAction", publicName: "hasDeleteAction", isSignal: true, isRequired: false, transformFunction: null }, hasEditAction: { classPropertyName: "hasEditAction", publicName: "hasEditAction", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, hasViewAction: { classPropertyName: "hasViewAction", publicName: "hasViewAction", isSignal: true, isRequired: false, transformFunction: null }, entityName: { classPropertyName: "entityName", publicName: "entityName", isSignal: true, isRequired: false, transformFunction: null }, isPaginated: { classPropertyName: "isPaginated", publicName: "isPaginated", isSignal: true, isRequired: false, transformFunction: null }, showCustomAction: { classPropertyName: "showCustomAction", publicName: "showCustomAction", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, rowNumberHeader: { classPropertyName: "rowNumberHeader", publicName: "rowNumberHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { add: "add", edit: "edit", deleteAction: "deleteAction", view: "view", pageChange: "pageChange", sortChange: "sortChange" }, providers: [ConfirmationService, MessageService], queries: [{ propertyName: "formTemplate", first: true, predicate: ["formTemplate"], descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div class=\"card\">\n\t<p-table\n\t\t#dt\n\t\t[value]=\"data()\"\n\t\t[paginator]=\"isPaginated()\"\n\t\t[rows]=\"pageSize()\"\n\t\t[rowsPerPageOptions]=\"[5, 10, 25, 50]\"\n\t\t[rowHover]=\"true\"\n\t\t[loading]=\"loading()\"\n\t\t[showLoader]=\"false\"\n\t\t[scrollable]=\"true\"\n\t\tstyleClass=\"p-datatable-sm\"\n\t\t[totalRecords]=\"totalElements()\"\n\t\t[lazy]=\"isPaginated()\"\n\t\t[first]=\"currentPage() * pageSize()\"\n\t\tpaginatorDropdownAppendTo=\"body\"\n\t\t(onPage)=\"handlePageChange($event)\"\n\t\t(onSort)=\"handleSort($event)\">\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t@if (showRowNumbers()) {\n\t\t\t\t\t<th class=\"text-left !font-bold !text-gray-500 !w-1\" scope=\"col\">{{\n\t\t\t\t\t\trowNumberHeader()\n\t\t\t\t\t}}</th>\n\t\t\t\t}\n\t\t\t\t@for (column of columns(); track column.field) {\n\t\t\t\t\t<th\n\t\t\t\t\t\t[pSortableColumn]=\"column.sortable ? column.field : undefined\"\n\t\t\t\t\t\tclass=\"text-left !font-bold !text-gray-500\"\n\t\t\t\t\t\t[ngClass]=\"{ '!text-center': column.align === 'center' }\"\n\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t[style]=\"{ width: column.width || 'auto' }\">\n\t\t\t\t\t\t{{ column.header }}\n\t\t\t\t\t\t@if (column.sortable) {\n\t\t\t\t\t\t\t<p-sortIcon [field]=\"column.field\"></p-sortIcon>\n\t\t\t\t\t\t}\n\t\t\t\t\t</th>\n\t\t\t\t}\n\n\t\t\t\t@if (showDefaultActions() || showCustomAction()) {\n\t\t\t\t\t<th class=\"!w-32 !text-center !font-bold !text-gray-500\" scope=\"col\">Actions</th>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t</ng-template>\n\n\t\t<ng-template pTemplate=\"body\" let-item let-rowIndex=\"rowIndex\">\n\t\t\t<tr>\n\t\t\t\t@if (showRowNumbers()) {\n\t\t\t\t\t<td class=\"!w-1 text-center\">\n\t\t\t\t\t\t{{ rowIndex + 1 }}\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t\t@for (column of columns(); track column.field) {\n\t\t\t\t\t<td [ngClass]=\"{ '!text-center': column.align === 'center' }\">\n\t\t\t\t\t\t@if (customTemplates && customTemplates.get(column.field)) {\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"customTemplates.get(column.field)!\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item, field: column.field }\">\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t{{ getItemValue(item, column.field, column) }}\n\t\t\t\t\t\t}\n\t\t\t\t\t</td>\n\t\t\t\t}\n\n\t\t\t\t@if (showDefaultActions() || showCustomAction()) {\n\t\t\t\t\t<td class=\"\">\n\t\t\t\t\t\t<div class=\"flex justify-center gap-2\">\n\t\t\t\t\t\t\t@if (showDefaultActions() && actionsLength() < 2 && !showCustomAction()) {\n\t\t\t\t\t\t\t\t<!-- Inline buttons for less than 2 standard actions and no custom action -->\n\t\t\t\t\t\t\t\t@if (hasViewAction()) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t[text]=\"true\"\n\t\t\t\t\t\t\t\t\t\tpButton\n\t\t\t\t\t\t\t\t\t\tclass=\"!p-0 p-button-primary\"\n\t\t\t\t\t\t\t\t\t\t[label]=\"'View'\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"view.emit(item)\"></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (hasEditAction()) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t[text]=\"true\"\n\t\t\t\t\t\t\t\t\t\tpButton\n\t\t\t\t\t\t\t\t\t\tclass=\"!p-0 p-button-primary\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"edit.emit(item)\"\n\t\t\t\t\t\t\t\t\t\t[label]=\"'Update'\"></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (hasDeleteAction()) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t[text]=\"true\"\n\t\t\t\t\t\t\t\t\t\tpButton\n\t\t\t\t\t\t\t\t\t\tclass=\"!p-0 p-button-danger\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"deleteAction.emit(item)\"\n\t\t\t\t\t\t\t\t\t\t[label]=\"'Delete'\"></button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} @else if (!showDefaultActions() && showCustomAction()) {\n\t\t\t\t\t\t\t\t<!-- Only custom action, no popover needed -->\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"customTemplates.get('customAction')!\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item, field: 'customAction' }\">\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<!-- Popover menu for 2+ standard actions or when combining with custom action -->\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t[text]=\"true\"\n\t\t\t\t\t\t\t\t\tpButton\n\t\t\t\t\t\t\t\t\ticon=\"pi pi-ellipsis-h\"\n\t\t\t\t\t\t\t\t\tclass=\"p-button-outlined p-button-secondary\"\n\t\t\t\t\t\t\t\t\t(click)=\"po.toggle($event)\"></button>\n\t\t\t\t\t\t\t\t<p-popover #po styleClass=\"!min-w-40\">\n\t\t\t\t\t\t\t\t\t<span class=\"!font-semibold !text-gray-500 block mb-2\">Actions</span>\n\t\t\t\t\t\t\t\t\t<ul class=\"list-none p-0 m-0 flex flex-col\">\n\t\t\t\t\t\t\t\t\t\t@if (showDefaultActions()) {\n\t\t\t\t\t\t\t\t\t\t\t@for (actionItem of actionItems(); track $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t@if (\n\t\t\t\t\t\t\t\t\t\t\t\t\tactionItem.visible &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t(!actionItem.shouldShow || actionItem.shouldShow(item))\n\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"perFormActionFromPopover(item, actionItem.label)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"pi\" [ngClass]=\"actionItem.icon\"></span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"font-medium\">{{ actionItem.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t<!-- Custom action template in popover -->\n\t\t\t\t\t\t\t\t\t\t@if (showCustomAction() && customTemplates.get('customAction')) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"customTemplates.get('customAction')!\"\n\t\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item, field: 'customAction' }\">\n\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</p-popover>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t</ng-template>\n\n\t\t<ng-template #loadingbody>\n\t\t\t<tr>\n\t\t\t\t@for (column of columns(); track column.field) {\n\t\t\t\t\t<td>\n\t\t\t\t\t\t<p-skeleton />\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t\t@if (showDefaultActions() || showCustomAction()) {\n\t\t\t\t\t<td>\n\t\t\t\t\t\t<p-skeleton />\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t@for (column of columns(); track column.field) {\n\t\t\t\t\t<td>\n\t\t\t\t\t\t<p-skeleton />\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t\t@if (showDefaultActions() || showCustomAction()) {\n\t\t\t\t\t<td>\n\t\t\t\t\t\t<p-skeleton />\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t@for (column of columns(); track column.field) {\n\t\t\t\t\t<td>\n\t\t\t\t\t\t<p-skeleton />\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t\t@if (showDefaultActions() || showCustomAction()) {\n\t\t\t\t\t<td>\n\t\t\t\t\t\t<p-skeleton />\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t</ng-template>\n\n\t\t<ng-template pTemplate=\"emptymessage\">\n\t\t\t<tr>\n\t\t\t\t<td [attr.colspan]=\"columns().length + 1\" class=\"text-center p-4\">{{ emptyMessage() }}</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: ToolbarModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i5$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i6.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngp-data-table', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TableModule,
+                        ButtonModule,
+                        InputTextModule,
+                        ConfirmDialogModule,
+                        DialogModule,
+                        TooltipModule,
+                        ToastModule,
+                        ToolbarModule,
+                        SkeletonModule,
+                        PopoverModule
+                    ], providers: [ConfirmationService, MessageService], template: "<div class=\"card\">\n\t<p-table\n\t\t#dt\n\t\t[value]=\"data()\"\n\t\t[paginator]=\"isPaginated()\"\n\t\t[rows]=\"pageSize()\"\n\t\t[rowsPerPageOptions]=\"[5, 10, 25, 50]\"\n\t\t[rowHover]=\"true\"\n\t\t[loading]=\"loading()\"\n\t\t[showLoader]=\"false\"\n\t\t[scrollable]=\"true\"\n\t\tstyleClass=\"p-datatable-sm\"\n\t\t[totalRecords]=\"totalElements()\"\n\t\t[lazy]=\"isPaginated()\"\n\t\t[first]=\"currentPage() * pageSize()\"\n\t\tpaginatorDropdownAppendTo=\"body\"\n\t\t(onPage)=\"handlePageChange($event)\"\n\t\t(onSort)=\"handleSort($event)\">\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t@if (showRowNumbers()) {\n\t\t\t\t\t<th class=\"text-left !font-bold !text-gray-500 !w-1\" scope=\"col\">{{\n\t\t\t\t\t\trowNumberHeader()\n\t\t\t\t\t}}</th>\n\t\t\t\t}\n\t\t\t\t@for (column of columns(); track column.field) {\n\t\t\t\t\t<th\n\t\t\t\t\t\t[pSortableColumn]=\"column.sortable ? column.field : undefined\"\n\t\t\t\t\t\tclass=\"text-left !font-bold !text-gray-500\"\n\t\t\t\t\t\t[ngClass]=\"{ '!text-center': column.align === 'center' }\"\n\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t[style]=\"{ width: column.width || 'auto' }\">\n\t\t\t\t\t\t{{ column.header }}\n\t\t\t\t\t\t@if (column.sortable) {\n\t\t\t\t\t\t\t<p-sortIcon [field]=\"column.field\"></p-sortIcon>\n\t\t\t\t\t\t}\n\t\t\t\t\t</th>\n\t\t\t\t}\n\n\t\t\t\t@if (showDefaultActions() || showCustomAction()) {\n\t\t\t\t\t<th class=\"!w-32 !text-center !font-bold !text-gray-500\" scope=\"col\">Actions</th>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t</ng-template>\n\n\t\t<ng-template pTemplate=\"body\" let-item let-rowIndex=\"rowIndex\">\n\t\t\t<tr>\n\t\t\t\t@if (showRowNumbers()) {\n\t\t\t\t\t<td class=\"!w-1 text-center\">\n\t\t\t\t\t\t{{ rowIndex + 1 }}\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t\t@for (column of columns(); track column.field) {\n\t\t\t\t\t<td [ngClass]=\"{ '!text-center': column.align === 'center' }\">\n\t\t\t\t\t\t@if (customTemplates && customTemplates.get(column.field)) {\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"customTemplates.get(column.field)!\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item, field: column.field }\">\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t{{ getItemValue(item, column.field, column) }}\n\t\t\t\t\t\t}\n\t\t\t\t\t</td>\n\t\t\t\t}\n\n\t\t\t\t@if (showDefaultActions() || showCustomAction()) {\n\t\t\t\t\t<td class=\"\">\n\t\t\t\t\t\t<div class=\"flex justify-center gap-2\">\n\t\t\t\t\t\t\t@if (showDefaultActions() && actionsLength() < 2 && !showCustomAction()) {\n\t\t\t\t\t\t\t\t<!-- Inline buttons for less than 2 standard actions and no custom action -->\n\t\t\t\t\t\t\t\t@if (hasViewAction()) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t[text]=\"true\"\n\t\t\t\t\t\t\t\t\t\tpButton\n\t\t\t\t\t\t\t\t\t\tclass=\"!p-0 p-button-primary\"\n\t\t\t\t\t\t\t\t\t\t[label]=\"'View'\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"view.emit(item)\"></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (hasEditAction()) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t[text]=\"true\"\n\t\t\t\t\t\t\t\t\t\tpButton\n\t\t\t\t\t\t\t\t\t\tclass=\"!p-0 p-button-primary\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"edit.emit(item)\"\n\t\t\t\t\t\t\t\t\t\t[label]=\"'Update'\"></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (hasDeleteAction()) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t[text]=\"true\"\n\t\t\t\t\t\t\t\t\t\tpButton\n\t\t\t\t\t\t\t\t\t\tclass=\"!p-0 p-button-danger\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"deleteAction.emit(item)\"\n\t\t\t\t\t\t\t\t\t\t[label]=\"'Delete'\"></button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} @else if (!showDefaultActions() && showCustomAction()) {\n\t\t\t\t\t\t\t\t<!-- Only custom action, no popover needed -->\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"customTemplates.get('customAction')!\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item, field: 'customAction' }\">\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<!-- Popover menu for 2+ standard actions or when combining with custom action -->\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t[text]=\"true\"\n\t\t\t\t\t\t\t\t\tpButton\n\t\t\t\t\t\t\t\t\ticon=\"pi pi-ellipsis-h\"\n\t\t\t\t\t\t\t\t\tclass=\"p-button-outlined p-button-secondary\"\n\t\t\t\t\t\t\t\t\t(click)=\"po.toggle($event)\"></button>\n\t\t\t\t\t\t\t\t<p-popover #po styleClass=\"!min-w-40\">\n\t\t\t\t\t\t\t\t\t<span class=\"!font-semibold !text-gray-500 block mb-2\">Actions</span>\n\t\t\t\t\t\t\t\t\t<ul class=\"list-none p-0 m-0 flex flex-col\">\n\t\t\t\t\t\t\t\t\t\t@if (showDefaultActions()) {\n\t\t\t\t\t\t\t\t\t\t\t@for (actionItem of actionItems(); track $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t@if (\n\t\t\t\t\t\t\t\t\t\t\t\t\tactionItem.visible &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t(!actionItem.shouldShow || actionItem.shouldShow(item))\n\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"perFormActionFromPopover(item, actionItem.label)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"pi\" [ngClass]=\"actionItem.icon\"></span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"font-medium\">{{ actionItem.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t<!-- Custom action template in popover -->\n\t\t\t\t\t\t\t\t\t\t@if (showCustomAction() && customTemplates.get('customAction')) {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"customTemplates.get('customAction')!\"\n\t\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item, field: 'customAction' }\">\n\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</p-popover>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t</ng-template>\n\n\t\t<ng-template #loadingbody>\n\t\t\t<tr>\n\t\t\t\t@for (column of columns(); track column.field) {\n\t\t\t\t\t<td>\n\t\t\t\t\t\t<p-skeleton />\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t\t@if (showDefaultActions() || showCustomAction()) {\n\t\t\t\t\t<td>\n\t\t\t\t\t\t<p-skeleton />\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t@for (column of columns(); track column.field) {\n\t\t\t\t\t<td>\n\t\t\t\t\t\t<p-skeleton />\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t\t@if (showDefaultActions() || showCustomAction()) {\n\t\t\t\t\t<td>\n\t\t\t\t\t\t<p-skeleton />\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t@for (column of columns(); track column.field) {\n\t\t\t\t\t<td>\n\t\t\t\t\t\t<p-skeleton />\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t\t@if (showDefaultActions() || showCustomAction()) {\n\t\t\t\t\t<td>\n\t\t\t\t\t\t<p-skeleton />\n\t\t\t\t\t</td>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t</ng-template>\n\n\t\t<ng-template pTemplate=\"emptymessage\">\n\t\t\t<tr>\n\t\t\t\t<td [attr.colspan]=\"columns().length + 1\" class=\"text-center p-4\">{{ emptyMessage() }}</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], totalElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalElements", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], showDefaultActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDefaultActions", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], hasDeleteAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDeleteAction", required: false }] }], hasEditAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasEditAction", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], hasViewAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasViewAction", required: false }] }], entityName: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityName", required: false }] }], isPaginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPaginated", required: false }] }], showCustomAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomAction", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], rowNumberHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowNumberHeader", required: false }] }], add: [{ type: i0.Output, args: ["add"] }], edit: [{ type: i0.Output, args: ["edit"] }], deleteAction: [{ type: i0.Output, args: ["deleteAction"] }], view: [{ type: i0.Output, args: ["view"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], formTemplate: [{
+                type: ContentChild,
+                args: ['formTemplate']
+            }], table: [{
+                type: ViewChild,
+                args: ['dt']
+            }] } });
+
+class DynamicNgSelectComponent {
+    apiUrl;
+    formatOptions;
+    bindLabel = 'description';
+    bindValue = 'id';
+    placeholder = 'Select';
+    isRequired = false;
+    options = [];
+    value;
+    disabled = false;
+    tableParams = signal({ page: 0, size: 10 }, ...(ngDevMode ? [{ debugName: "tableParams" }] : []));
+    onChange = (_) => { }; // eslint-disable-line
+    onTouched = () => { }; // eslint-disable-line
+    ngOnInit() {
+        this.loadOptions();
+    }
+    loadOptions() {
+        if (!this.apiUrl) {
+            return;
+        }
+        this.getOptions();
+    }
+    getOptions() {
+        this.apiUrl(this.tableParams())
+            .pipe(tap((items) => {
+            const values = this.formatOptions ? this.formatOptions(items.results) : items.results;
+            this.options = [...this.options, ...values];
+            if (items.hasNextPage) {
+                this.tableParams.update((param) => ({ ...param, page: param.page + 1 }));
+                this.getOptions();
+            }
+        }))
+            .subscribe();
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onValueChange(value) {
+        if (!value) {
+            this.value = null;
+            this.onChange(null);
+        }
+        else {
+            this.value = value[this.bindValue];
+            this.onChange(value[this.bindValue]);
+        }
+        this.onTouched();
+    }
+    validate(control) {
+        if (this.isRequired &&
+            (this.value === null || this.value === undefined || this.value === '')) {
+            return { required: true };
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicNgSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DynamicNgSelectComponent, isStandalone: true, selector: "ngp-dynamic-select", inputs: { apiUrl: "apiUrl", formatOptions: "formatOptions", bindLabel: "bindLabel", bindValue: "bindValue", placeholder: "placeholder", isRequired: "isRequired", options: "options" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DynamicNgSelectComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => DynamicNgSelectComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<p-floatlabel variant=\"in\">\n  <ng-select [items]=\"options\" [bindLabel]=\"bindLabel\" [bindValue]=\"bindValue\" [disabled]=\"disabled\"\n    [(ngModel)]=\"value\" [clearable]=\"true\" (change)=\"onValueChange($event)\">\n  </ng-select>\n\n  <label [class.required-label]=\"isRequired\">{{ placeholder }}</label>\n</p-floatlabel>", dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicNgSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngp-dynamic-select', imports: [NgSelectModule, FormsModule, CommonModule, FloatLabelModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DynamicNgSelectComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => DynamicNgSelectComponent),
+                            multi: true
+                        }
+                    ], template: "<p-floatlabel variant=\"in\">\n  <ng-select [items]=\"options\" [bindLabel]=\"bindLabel\" [bindValue]=\"bindValue\" [disabled]=\"disabled\"\n    [(ngModel)]=\"value\" [clearable]=\"true\" (change)=\"onValueChange($event)\">\n  </ng-select>\n\n  <label [class.required-label]=\"isRequired\">{{ placeholder }}</label>\n</p-floatlabel>" }]
+        }], propDecorators: { apiUrl: [{
+                type: Input
+            }], formatOptions: [{
+                type: Input
+            }], bindLabel: [{
+                type: Input
+            }], bindValue: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], isRequired: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+class PaginatedRequest {
+    page;
+    size;
+    sort;
+}
+
+let CrudAbstractComponent = class CrudAbstractComponent {
+    // State signals
+    sourceSignal = signal(null, ...(ngDevMode ? [{ debugName: "sourceSignal" }] : []));
+    loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : []));
+    errorSignal = signal(null, ...(ngDevMode ? [{ debugName: "errorSignal" }] : []));
+    actionSignal = signal(null, ...(ngDevMode ? [{ debugName: "actionSignal" }] : []));
+    firstLoadSignal = signal(true, ...(ngDevMode ? [{ debugName: "firstLoadSignal" }] : []));
+    showFormSignal = signal(false, ...(ngDevMode ? [{ debugName: "showFormSignal" }] : []));
+    formActionSignal = signal(null, ...(ngDevMode ? [{ debugName: "formActionSignal" }] : []));
+    dataSignal = signal(null, ...(ngDevMode ? [{ debugName: "dataSignal" }] : []));
+    filters = signal(null, ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    tableParams = signal({ page: 0, size: 10 }, ...(ngDevMode ? [{ debugName: "tableParams" }] : []));
+    requestParams = computed(() => ({
+        ...this.filters(),
+        ...this.tableParams()
+    }), ...(ngDevMode ? [{ debugName: "requestParams" }] : []));
+    // Injections
+    injector = inject(Injector);
+    // Public interface
+    data = this.dataSignal.asReadonly();
+    isLoading = this.loadingSignal.asReadonly();
+    error = this.errorSignal.asReadonly();
+    currentAction = this.actionSignal.asReadonly();
+    isFirstLoad = this.firstLoadSignal.asReadonly();
+    isFormVisible = this.showFormSignal.asReadonly();
+    formAction = this.formActionSignal.asReadonly();
+    safeDataSource = computed(() => {
+        const rawData = this.dataSignal();
+        const isLoading = this.loadingSignal();
+        // Default empty response
+        const defaultResponse = {
+            hasNextPage: false,
+            totalElements: 0,
+            results: [],
+            currentPage: 0,
+            pageSize: 10
+        };
+        if (!rawData || isLoading)
+            return defaultResponse;
+        const isPaginatedResponse = (obj) => {
+            return (obj !== null &&
+                typeof obj === 'object' &&
+                'results' in obj &&
+                Array.isArray(obj.results) &&
+                'totalElements' in obj &&
+                typeof obj.totalElements === 'number');
+        };
+        // Handler for Paginated Response
+        if (typeof rawData === 'object' && isPaginatedResponse(rawData)) {
+            return {
+                results: [...rawData.results],
+                totalElements: rawData.totalElements,
+                currentPage: rawData.currentPage,
+                pageSize: rawData.pageSize,
+                hasNextPage: rawData.hasNextPage
+            };
+        }
+        // Handle array case
+        if (Array.isArray(rawData)) {
+            return {
+                ...defaultResponse,
+                totalElements: rawData.length,
+                results: [...rawData],
+                pageSize: rawData.length // For arrays, we typically return all elements
+            };
+        }
+        // Handle single object case
+        return {
+            ...defaultResponse,
+            totalElements: 1,
+            results: [rawData],
+            pageSize: 1
+        };
+    }, ...(ngDevMode ? [{ debugName: "safeDataSource" }] : []));
+    /**
+     * Provides direct access to raw list data without pagination wrapper
+     * Returns an empty array if data is not available or not an array
+     */
+    rawList = computed(() => {
+        const rawData = this.data();
+        if (!rawData || this.isLoading()) {
+            return [];
+        }
+        // If it's already an array, return it
+        if (Array.isArray(rawData)) {
+            return [...rawData];
+        }
+        // If it's a paginated response with a results property that's an array
+        if (typeof rawData === 'object' && 'results' in rawData && Array.isArray(rawData.results)) {
+            return [...rawData.results];
+        }
+        // If it's a single object, return it as an array with one item
+        if (typeof rawData === 'object' && !('results' in rawData)) {
+            return [rawData];
+        }
+        // Default fallback
+        return [];
+    }, ...(ngDevMode ? [{ debugName: "rawList" }] : []));
+    // Usage in your component:
+    // const items = this.rawList();
+    // Current operations state
+    currentOperations;
+    currentParams;
+    // Effect to handle Observable subscriptions
+    dataEffect = effect(() => {
+        const obs = this.sourceSignal();
+        if (!obs) {
+            untracked(() => this.dataSignal.set(null));
+            return;
+        }
+        untracked(() => {
+            this.loadingSignal.set(true);
+            this.errorSignal.set(null);
+            const sub = obs
+                .pipe(shareReplay(1), catchError((err) => {
+                this.errorSignal.set(err);
+                return of(null);
+            }), finalize(() => this.loadingSignal.set(false)))
+                .subscribe((value) => {
+                this.dataSignal.set(value);
+            });
+            return () => sub.unsubscribe();
+        });
+    }, ...(ngDevMode ? [{ debugName: "dataEffect", injector: this.injector }] : [{ injector: this.injector }]));
+    /**
+     * Initialize with dynamic service operations
+     */
+    initService(operations) {
+        this.currentOperations = operations;
+    }
+    /**
+     * GET data
+     */
+    loadData(params) {
+        if (!this.currentOperations?.get)
+            return;
+        this.executeOperation('get', () => this.currentOperations.get(params), params);
+        this.firstLoadSignal.set(false);
+    }
+    /**
+     * GET data by ID
+     */
+    getById(id, params) {
+        if (!this.currentOperations?.getById)
+            return of(null);
+        return this.executeOperation('get', () => this.currentOperations.getById(id, params));
+    }
+    /**
+     * CREATE data
+     */
+    createData(data) {
+        if (!this.currentOperations?.create)
+            return of(null);
+        return this.executeOperation('create', () => this.currentOperations.create(data));
+    }
+    /**
+     * UPDATE data
+     */
+    updateData(data) {
+        if (!this.currentOperations?.update)
+            return of(null);
+        return this.executeOperation('update', () => this.currentOperations.update(data));
+    }
+    /**
+     * UPDATE data by ID
+     */
+    updateById(id, data) {
+        if (!this.currentOperations?.updateById)
+            return of(null);
+        return this.executeOperation('updateById', () => this.currentOperations.updateById(id, data));
+    }
+    /**
+     * DELETE data
+     */
+    deleteData(id) {
+        if (!this.currentOperations?.delete)
+            return of(null);
+        return this.executeOperation('delete', () => this.currentOperations.delete(id));
+    }
+    /**
+     * UPDATE status
+     */
+    updateStatus(id, status) {
+        if (!this.currentOperations?.updateStatus)
+            return of(null);
+        return this.executeOperation('update', // You can reuse 'update' action or add a new one like 'updateStatus'
+        () => this.currentOperations.updateStatus(id, status));
+    }
+    /**
+     * SHOW/HIDE form
+     * @param show Whether to show or hide the form
+     */
+    showForm(show) {
+        this.showFormSignal.set(show);
+    }
+    /**
+     * Update form action (create/edit)
+     * @param action The action to set for the form
+     */
+    updateFormAction(action) {
+        this.formActionSignal.set(action);
+    }
+    /**
+     * Shared operation execution logic
+     */
+    executeOperation(action, operation, params) {
+        this.errorSignal.set(null);
+        this.loadingSignal.set(true);
+        this.actionSignal.set(action);
+        if (action === 'get') {
+            this.currentParams = params;
+        }
+        const operation$ = operation().pipe(untilDestroyed(this), catchError((err) => {
+            this.errorSignal.set(err);
+            return of(null);
+        }), finalize(() => {
+            this.loadingSignal.set(false);
+            this.actionSignal.set(null);
+        }), shareReplay(1));
+        if (action === 'get') {
+            this.sourceSignal.set(operation$);
+        }
+        else {
+            operation$.subscribe(() => {
+                if (this.currentOperations?.get) {
+                    this.refresh();
+                }
+            });
+        }
+        return operation$;
+    }
+    /**
+     * Refresh current data
+     */
+    refresh() {
+        if (this.currentOperations?.get && this.currentParams) {
+            this.loadData(this.currentParams);
+        }
+    }
+    get entityName() {
+        return 'Item';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrudAbstractComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrudAbstractComponent });
+};
+CrudAbstractComponent = __decorate([
+    UntilDestroy()
+], CrudAbstractComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrudAbstractComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class HelperService {
+    transformEmployeeResponse = (res) => ({
+        ...res,
+        results: res.results.map((e) => ({
+            ...e,
+            fullName: [e.name.givenName, e.name.middleName, e.name.familyName]
+                .filter((part) => part)
+                .join(' ')
+                .trim()
+                .concat(e?.company?.name ? ` (${e.company.name})` : '')
+        }))
+    });
+    transformPayloadWithAddress = (payload) => {
+        const transformedPayload = { ...payload };
+        if (transformedPayload['address']) {
+            const address = { ...transformedPayload['address'] };
+            // Helper function to extract name from address field
+            const extractName = (field) => {
+                if (!field)
+                    return undefined;
+                if (typeof field === 'string')
+                    return field;
+                if (typeof field === 'object' && field !== null && 'name' in field) {
+                    return field['name'];
+                }
+                return undefined;
+            };
+            address.province = extractName(address.province);
+            address.city = extractName(address.city);
+            address.barangay = extractName(address.barangay);
+            transformedPayload['address'] = address;
+        }
+        return transformedPayload;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HelperService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HelperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+// Components
+// export * from './lib/components/components';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BasicNgSelectComponent, CrudAbstractComponent, DataTableComponent, DynamicNgSelectComponent, EmptyComponent, FgAddressComponent, FileUploadComponent, FormFieldWrapperComponent, HelperService, PaginatedRequest };
+//# sourceMappingURL=winexist-ngp.mjs.map