erp-library-itdev 0.1.5

package/fesm2022/erp-library-itdev.mjs

@@ -0,0 +1,1289 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, input, signal, computed, effect, HostListener, model, Injectable, inject, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2$2 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import * as i2$1 from '@ngx-translate/core';
+import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-translate/core';
+import * as i1$1 from '@angular/common/http';
+import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
+import Keycloak from 'keycloak-js';
+import { map, catchError, of } from 'rxjs';
+
+class ButtonComponent {
+    constructor() {
+        this.variant = 'primary';
+        this.size = 'md';
+        this.disabled = false;
+        this.loading = false;
+        this.type = 'button';
+        this.clicked = new EventEmitter();
+    }
+    get classes() {
+        return [
+            'itdev-btn',
+            `itdev-btn--${this.variant}`,
+            `itdev-btn--${this.size}`,
+            this.loading ? 'itdev-btn--loading' : '',
+        ].filter(Boolean);
+    }
+    onClick(event) {
+        if (!this.disabled && !this.loading) {
+            this.clicked.emit(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: ButtonComponent, isStandalone: true, selector: "itdev-button", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading", type: "type" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [class]=\"classes\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick($event)\"\n>\n  <span *ngIf=\"loading\" class=\"itdev-btn__spinner\" aria-hidden=\"true\"></span>\n  <ng-content></ng-content>\n</button>\n", styles: [".itdev-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;font-weight:500;border:none;border-radius:6px;cursor:pointer;transition:background .2s ease,opacity .2s ease;outline-offset:2px}.itdev-btn:focus-visible{outline:2px solid #3b82f6}.itdev-btn:disabled{opacity:.5;cursor:not-allowed}.itdev-btn--sm{padding:.375rem .75rem;font-size:.8125rem}.itdev-btn--md{padding:.5rem 1rem;font-size:.9375rem}.itdev-btn--lg{padding:.625rem 1.25rem;font-size:1.0625rem}.itdev-btn--primary{background:#2563eb;color:#fff}.itdev-btn--primary:hover:not(:disabled){background:#1d4ed8}.itdev-btn--secondary{background:#e5e7eb;color:#111827}.itdev-btn--secondary:hover:not(:disabled){background:#d1d5db}.itdev-btn--danger{background:#dc2626;color:#fff}.itdev-btn--danger:hover:not(:disabled){background:#b91c1c}.itdev-btn--ghost{background:transparent;color:#2563eb;border:1px solid #2563eb}.itdev-btn--ghost:hover:not(:disabled){background:#eff6ff}.itdev-btn__spinner{width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:itdev-spin .6s linear infinite}@keyframes itdev-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'itdev-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type\"\n  [class]=\"classes\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick($event)\"\n>\n  <span *ngIf=\"loading\" class=\"itdev-btn__spinner\" aria-hidden=\"true\"></span>\n  <ng-content></ng-content>\n</button>\n", styles: [".itdev-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;font-weight:500;border:none;border-radius:6px;cursor:pointer;transition:background .2s ease,opacity .2s ease;outline-offset:2px}.itdev-btn:focus-visible{outline:2px solid #3b82f6}.itdev-btn:disabled{opacity:.5;cursor:not-allowed}.itdev-btn--sm{padding:.375rem .75rem;font-size:.8125rem}.itdev-btn--md{padding:.5rem 1rem;font-size:.9375rem}.itdev-btn--lg{padding:.625rem 1.25rem;font-size:1.0625rem}.itdev-btn--primary{background:#2563eb;color:#fff}.itdev-btn--primary:hover:not(:disabled){background:#1d4ed8}.itdev-btn--secondary{background:#e5e7eb;color:#111827}.itdev-btn--secondary:hover:not(:disabled){background:#d1d5db}.itdev-btn--danger{background:#dc2626;color:#fff}.itdev-btn--danger:hover:not(:disabled){background:#b91c1c}.itdev-btn--ghost{background:transparent;color:#2563eb;border:1px solid #2563eb}.itdev-btn--ghost:hover:not(:disabled){background:#eff6ff}.itdev-btn__spinner{width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:itdev-spin .6s linear infinite}@keyframes itdev-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+var Icons;
+(function (Icons) {
+    Icons["ADD_ROUNDED"] = "add-rounded";
+    Icons["ARROW_TOP"] = "arrow-top";
+    Icons["ARROW_TOP_2"] = "arrow-top-2";
+    Icons["ARROW_TOP_ROUNDED"] = "arrow-top-rounded";
+    Icons["ARROW_TOP_ROUNDED_2"] = "arrow-top-rounded-2";
+    Icons["ARROW_BOTTOM"] = "arrow-bottom";
+    Icons["ARROW_BOTTOM_2"] = "arrow-bottom-2";
+    Icons["ARROW_BOTTOM_ROUNDED"] = "arrow-bottom-rounded";
+    Icons["ARROW_BOTTOM_ROUNDED_2"] = "arrow-bottom-rounded-2";
+    Icons["ARROW_RIGHT"] = "arrow-right";
+    Icons["ARROW_RIGHT_2"] = "arrow-right-2";
+    Icons["ARROW_RIGHT_ROUNDED"] = "arrow-right-rounded";
+    Icons["ARROW_RIGHT_ROUNDED_2"] = "arrow-right-rounded-2";
+    Icons["ARROW_LEFT"] = "arrow-left";
+    Icons["ARROW_LEFT_2"] = "arrow-left";
+    Icons["ARROW_LEFT_ROUNDED"] = "arrow-left-rounded";
+    Icons["ARROW_LEFT_ROUNDED_2"] = "arrow-left-rounded-2";
+    Icons["AWARD"] = "award";
+    Icons["CALENDAR"] = "calendar";
+    Icons["CALL_CALLING"] = "call-calling";
+    Icons["CALL_MUTED"] = "call-muted";
+    Icons["CALL_SLASH"] = "call-slash";
+    Icons["CAMERA_SLASH"] = "camera-slash";
+    Icons["CAMERA"] = "camera";
+    Icons["CARD"] = "card";
+    Icons["CHART"] = "chart";
+    Icons["CHECK"] = "check";
+    Icons["CHECK_LIST"] = "check-list";
+    Icons["CLOCK"] = "clock";
+    Icons["CLOSE"] = "close";
+    Icons["CLOUD"] = "cloud";
+    Icons["CLOUD_2"] = "cloud-1";
+    Icons["COMPARISON"] = "comparison";
+    Icons["COPY"] = "copy";
+    Icons["CPU"] = "cpu";
+    Icons["CUP"] = "cup";
+    Icons["DELETE"] = "delete";
+    Icons["DELETE_2"] = "delete-2";
+    Icons["DISCOVER"] = "discover";
+    Icons["DOCUMENT"] = "document";
+    Icons["DOLLAR_ROUNDED"] = "dollar-rounded";
+    Icons["EDIT_ROUNDED"] = "edit-rounded";
+    Icons["EDIT_ROUNDED_2"] = "edit-rounded-2";
+    Icons["EDIT_UNDERLINE"] = "edit-underline";
+    Icons["EDIT"] = "edit";
+    Icons["EXPORT"] = "export";
+    Icons["EYE"] = "eye";
+    Icons["EYE_SLASH"] = "eye-slash";
+    Icons["FILTER"] = "filter";
+    Icons["FLAG"] = "flag";
+    Icons["FOLDER"] = "folder";
+    Icons["GALLERY"] = "gallery";
+    Icons["GRID"] = "grid";
+    Icons["GRID_2"] = "grid-2";
+    Icons["GRID_3"] = "grid-3";
+    Icons["HEADPHONE_SLASH"] = "headphone-slash";
+    Icons["HEADPHONE"] = "headphone";
+    Icons["HEART"] = "heart";
+    Icons["HOME"] = "home";
+    Icons["HOME_2"] = "home-2";
+    Icons["INFO"] = "info";
+    Icons["LOADING"] = "loading";
+    Icons["LOCATION"] = "location";
+    Icons["LOCK"] = "lock";
+    Icons["LOCK_2"] = "lock-1";
+    Icons["LOGOUT"] = "logout";
+    Icons["MENU"] = "menu";
+    Icons["MENU_2"] = "menu-1";
+    Icons["MESSAGE"] = "message";
+    Icons["MESSAGES"] = "messages";
+    Icons["MESSAGE_2"] = "message-2";
+    Icons["MESSAGE_3"] = "message-3";
+    Icons["MESSAGE_4"] = "message-4";
+    Icons["MIC"] = "mic";
+    Icons["MINUS"] = "minus";
+    Icons["MOBILE"] = "mobile";
+    Icons["MONITOR"] = "monitor";
+    Icons["MOON"] = "moon";
+    Icons["MORE"] = "more";
+    Icons["MORE_2"] = "more-2";
+    Icons["MOUSE"] = "mouse";
+    Icons["NOTE"] = "note";
+    Icons["NOTE_2"] = "note-2";
+    Icons["NOTE_3"] = "note-3";
+    Icons["NOTE_ADD"] = "note-add";
+    Icons["NOTE_CHECK"] = "note-check";
+    Icons["NOTE_DELETE"] = "note-delete";
+    Icons["NOTE_MINUS"] = "note-minus";
+    Icons["NOTIFICATION"] = "notification";
+    Icons["NOTIFICATION_2"] = "notification-2";
+    Icons["NOTIFICATION_3"] = "notification-3";
+    Icons["NOTIFICATION_4"] = "notification-4";
+    Icons["PHONE"] = "phone";
+    Icons["PLAY"] = "play";
+    Icons["PLAY_1"] = "play-1";
+    Icons["PLUS"] = "plus";
+    Icons["PRESENTATION"] = "presentation";
+    Icons["PRESENTATION_2"] = "presentation-2";
+    Icons["QUESTION_ROUNDED"] = "question-rounded";
+    Icons["ROTATE_LEFT"] = "rotate-left";
+    Icons["ROTATE_RIGHT"] = "rotate-right";
+    Icons["SAVE"] = "save";
+    Icons["SCAN"] = "scan";
+    Icons["SCAN_2"] = "scan-2";
+    Icons["SCAN_3"] = "scan-3";
+    Icons["SEARCH"] = "search";
+    Icons["SEND"] = "send";
+    Icons["SETTINGS"] = "settings";
+    Icons["SETTINGS_2"] = "settings-2";
+    Icons["SETTINGS_3"] = "settings-3";
+    Icons["SHIELD"] = "shield";
+    Icons["SHIELD_CHECK"] = "shield-check";
+    Icons["SHIELD_CROSS"] = "shield-cross";
+    Icons["SHOPPING"] = "shopping";
+    Icons["SORT"] = "sort";
+    Icons["STAR"] = "star";
+    Icons["STARS"] = "stars";
+    Icons["STATUS"] = "status";
+    Icons["SUN"] = "sun";
+    Icons["SUNRISE"] = "sunrise";
+    Icons["SWAP"] = "swap";
+    Icons["TERMINAL"] = "terminal";
+    Icons["TEXT"] = "text";
+    Icons["TICK"] = "tick";
+    Icons["TODO"] = "todo";
+    Icons["TV"] = "tv";
+    Icons["UNLOCK"] = "unlock";
+    Icons["USER_ADD"] = "user-add";
+    Icons["USER_SCAN"] = "user-scan";
+    Icons["USER_TWO"] = "user-two";
+    Icons["USER"] = "user";
+    Icons["UNCHECKED"] = "unchecked";
+    Icons["VIDEO"] = "video";
+    Icons["VOLUME_CROSS"] = "volume-cross";
+    Icons["VOLUME_HIGH"] = "volume-high";
+    Icons["VOLUME_LOW"] = "volume-low";
+    Icons["VOLUME_MUTE"] = "volume-mute";
+    Icons["VOLUME_SLASH"] = "volume-slash";
+    Icons["WALLET"] = "wallet";
+    Icons["WORK"] = "work";
+    Icons["WEB"] = "web";
+    Icons["ZOOM_IN"] = "zoom-in";
+    Icons["ZOOM_OUT"] = "zoom-out";
+})(Icons || (Icons = {}));
+
+class ErpDate {
+    get fieldValue() {
+        return this.field.value();
+    }
+    get label() {
+        return this.field.label?.();
+    }
+    get placeholder() {
+        return this.field.placeholder?.() || "PLACEHOLDERS.DEFAULT";
+    }
+    get touched() {
+        return this.field.touched(); // note the () after field
+    }
+    get required() {
+        return this.field.required?.() ?? false;
+    }
+    constructor() {
+        this.Icons = Icons;
+        this.icon = input(Icons.CALENDAR, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+        this.day = signal(undefined, ...(ngDevMode ? [{ debugName: "day" }] : []));
+        this.month = signal(undefined, ...(ngDevMode ? [{ debugName: "month" }] : [])); // 1–12
+        this.year = signal(undefined, ...(ngDevMode ? [{ debugName: "year" }] : []));
+        this.displayedValue = signal("", ...(ngDevMode ? [{ debugName: "displayedValue" }] : []));
+        this.calendarMatrix = computed(() => {
+            const month = this.month();
+            const year = this.year();
+            if (!month || !year)
+                return [];
+            return this.getCalendarMatrix(year, month);
+        }, ...(ngDevMode ? [{ debugName: "calendarMatrix" }] : []));
+        this.daysCode = [
+            "DAYS_SHORT.01",
+            "DAYS_SHORT.02",
+            "DAYS_SHORT.03",
+            "DAYS_SHORT.04",
+            "DAYS_SHORT.05",
+            "DAYS_SHORT.06",
+            "DAYS_SHORT.07",
+        ];
+        effect(() => {
+            const selectedValue = this.field.value();
+            if (selectedValue !== null) {
+                this.displayedValue.set(this.getDayNumber(selectedValue.getDate()) +
+                    "-" +
+                    this.getMonthNumber(selectedValue.getMonth() + 1) +
+                    "-" +
+                    selectedValue.getFullYear());
+            }
+            else {
+                this.displayedValue.set("");
+            }
+        });
+    }
+    ngOnInit() {
+        console.log("matrix for 02/2026", this.getCalendarMatrix(2026, 4));
+        this.initCurrentDate();
+    }
+    toggleOpen(event) {
+        event.stopPropagation();
+        this.open.set(!this.open());
+        this.field.setTouched();
+    }
+    initCurrentDate() {
+        const selectedValue = this.field.value();
+        const today = selectedValue ? selectedValue : new Date();
+        this.day.set(today.getDate());
+        this.month.set(today.getMonth() + 1); // JS months 0-11
+        this.year.set(today.getFullYear());
+        if (selectedValue !== null) {
+            console.log("selectedValue", selectedValue);
+            this.displayedValue.set(this.getDayNumber(today.getDate()) +
+                "-" +
+                this.getMonthNumber(today.getMonth() + 1) +
+                "-" +
+                today.getFullYear());
+        }
+    }
+    getCalendarMatrix(year, month) {
+        const matrix = [];
+        // Get first day of the month (0 = Sunday, 1 = Monday, …)
+        const firstDay = new Date(year, month - 1, 1).getDay();
+        const daysInMonth = new Date(year, month, 0).getDate();
+        const daysInPrevMonth = new Date(year, month - 1, 0).getDate();
+        let currentDay = 1;
+        let nextMonthDay = 1;
+        for (let row = 0; row < 5; row++) {
+            // use 6 if you want 6 rows
+            const week = [];
+            for (let col = 0; col < 7; col++) {
+                const cellIndex = row * 7 + col;
+                if (cellIndex < firstDay) {
+                    // Previous month
+                    week.push({
+                        day: daysInPrevMonth - firstDay + col + 1,
+                        currentMonth: false,
+                    });
+                }
+                else if (currentDay <= daysInMonth) {
+                    // Current month
+                    week.push({
+                        day: currentDay++,
+                        currentMonth: true,
+                    });
+                }
+                else {
+                    // Next month
+                    week.push({
+                        day: nextMonthDay++,
+                        currentMonth: false,
+                    });
+                }
+            }
+            matrix.push(week);
+        }
+        return matrix;
+    }
+    previousMonth(event) {
+        event.stopPropagation();
+        const month = this.month();
+        const year = this.year();
+        if (!month || !year)
+            return;
+        let newMonth = month - 1;
+        let newYear = year;
+        if (newMonth < 1) {
+            newMonth = 12;
+            newYear = year - 1;
+        }
+        this.month.set(newMonth);
+        this.year.set(newYear);
+    }
+    nextMonth(event) {
+        event.stopPropagation();
+        const month = this.month();
+        const year = this.year();
+        if (!month || !year)
+            return;
+        let newMonth = month + 1;
+        let newYear = year;
+        if (newMonth > 12) {
+            newMonth = 1;
+            newYear = year + 1;
+        }
+        this.month.set(newMonth);
+        this.year.set(newYear);
+    }
+    setMonth(month) {
+        this.month.set(month);
+    }
+    setYear(year) {
+        this.year.set(year);
+    }
+    getMonthCode() {
+        const month = this.month();
+        if (!month)
+            return "";
+        return month < 10 ? `MONTHS.0${this.month()}` : `MONTHS.${this.month()}`;
+    }
+    getDayNumber(day) {
+        if (!day)
+            return "";
+        return day < 10 ? `0${day}` : `${day}`;
+    }
+    getMonthNumber(month) {
+        if (!month)
+            return "";
+        return month < 10 ? `0${month}` : `${month}`;
+    }
+    selectDate(event, day) {
+        event.stopPropagation();
+        const year = this.year();
+        const month = this.month();
+        if (!year || !month)
+            return;
+        this.day.set(day);
+        this.field.setValue(new Date(year, month - 1, day));
+        const date = `${this.getDayNumber(day)}-${this.getMonthNumber(month)}-${year}`;
+        this.displayedValue.set(date);
+        this.open.set(false);
+    }
+    dayIsCurrent(day) {
+        const today = new Date();
+        return (day === today.getDate() &&
+            this.month() === today.getMonth() + 1 &&
+            this.year() === today.getFullYear());
+    }
+    dayIsSelected(day) {
+        const selectedDate = this.field.value();
+        if (!selectedDate)
+            return false;
+        return (day === this.day() &&
+            this.month() === selectedDate.getMonth() + 1 &&
+            this.year() === selectedDate.getFullYear());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpDate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ErpDate, isStandalone: true, selector: "erp-date", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"min-w-full flex flex-col gap-1\">\n  <div>\n    @if (label) {\n    <p>\n      {{ label | translate}} @if(required === true){\n      <span class=\"text-danger-600\">*</span>}\n    </p>\n    }\n    <div\n      class=\"pretty-select px-4 py-3 min-w-full text-primary-700 rounded-xl border-2 border-input-border transition-all duration-200 ease-in-out\"\n    >\n      <div\n        class=\"flex flex-row min-w-full justify-between items-center cursor-pointer\"\n        (click)=\"toggleOpen($event); $event.stopPropagation()\"\n      >\n        <input\n          type=\"text\"\n          [(ngModel)]=\"displayedValue\"\n          [readOnly]=\"true\"\n          (click)=\"toggleOpen($event); $event.stopPropagation()\"\n          placeholder=\"Select option\"\n        />\n        <mat-icon\n          (click)=\"toggleOpen($event); $event.stopPropagation()\"\n          class=\"text-primary-700\"\n          [svgIcon]=\"icon()\"\n        ></mat-icon>\n      </div>\n      @if (open() === true && calendarMatrix().length > 0) {\n      <div class=\"dropdown-container pt-2\">\n        <div\n          class=\"dropdown px-4 py-3 text-primary-700 rounded-xl flex flex-col gap-4\"\n        >\n          <!--Header-->\n          <div class=\"flex flex-row justify-between items-center\">\n            <mat-icon\n              class=\"cursor-pointer text-primary-900\"\n              [svgIcon]=\"Icons.ARROW_LEFT_ROUNDED\"\n              (click)=\"previousMonth($event)\"\n            ></mat-icon>\n            <p class=\"text-primary-900 font-semibold\">\n              {{getMonthCode()|translate}}&nbsp;{{year()}}\n            </p>\n            <mat-icon\n              class=\"cursor-pointer text-primary-900\"\n              [svgIcon]=\"Icons.ARROW_RIGHT_ROUNDED\"\n              (click)=\"nextMonth($event)\"\n            ></mat-icon>\n          </div>\n          <!-- Content -->\n          <div class=\"grid grid-cols-7 grid-rows-6 gap-2\">\n            @for (day of daysCode; track $index) {\n            <div\n              class=\"flex flex-col items-center justify-center cursor-pointer\"\n            >\n              <p class=\"text-neutral-300 font-semibold\">\n                {{ day | translate }}\n              </p>\n            </div>\n            } @for (row of calendarMatrix(); track $index) { @for (day of row;\n            track $index) {\n            <div\n              class=\"flex flex-col items-center justify-center cursor-pointer rounded-full p-1\"\n              [ngClass]=\"{'bg-primary-700': dayIsSelected(day.day) && day.currentMonth === true}\"\n              (click)=\"selectDate($event, day.day)\"\n            >\n              <p\n                [ngClass]=\"{\n                  'text-white font-regular': dayIsSelected(day.day) && day.currentMonth === true,\n                  'text-primary-600 font-semibold': dayIsCurrent(day.day) === true && day.currentMonth === true,\n                  'text-primary-900 font-semibold': day.currentMonth === true && dayIsCurrent(day.day) === false,\n                  'text-gray-300': day.currentMonth === false\n                }\"\n              >\n                {{ getDayNumber(day.day) }}\n              </p>\n            </div>\n            } }\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    @if (touched && field.error?.()) {\n    <p class=\"text-red-700 text-xs\">{{ field.error?.() | translate }}</p>\n    }\n  </div>\n</div>\n", styles: ["input:focus{outline:none;box-shadow:none;border:none}.pretty-select{background:#fff;font-size:14px;outline:none;position:relative}.pretty-select:focus{box-shadow:0 0 0 2px var(--primary-200),4px 4px 12px #0000000d,-4px -4px 12px #ffffffe6}.dropdown-container{position:absolute;top:100%;left:0;z-index:9999;width:max-content;min-width:100px}.dropdown{background-color:#fff;display:block;box-shadow:0 0 0 2px var(--primary-200),4px 4px 12px #0000000d,-4px -4px 12px #ffffffe6;max-height:400px;overflow-y:auto;width:max-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpDate, decorators: [{
+            type: Component,
+            args: [{ selector: "erp-date", imports: [CommonModule, TranslateModule, MatIcon, MatIconModule, FormsModule], template: "<div class=\"min-w-full flex flex-col gap-1\">\n  <div>\n    @if (label) {\n    <p>\n      {{ label | translate}} @if(required === true){\n      <span class=\"text-danger-600\">*</span>}\n    </p>\n    }\n    <div\n      class=\"pretty-select px-4 py-3 min-w-full text-primary-700 rounded-xl border-2 border-input-border transition-all duration-200 ease-in-out\"\n    >\n      <div\n        class=\"flex flex-row min-w-full justify-between items-center cursor-pointer\"\n        (click)=\"toggleOpen($event); $event.stopPropagation()\"\n      >\n        <input\n          type=\"text\"\n          [(ngModel)]=\"displayedValue\"\n          [readOnly]=\"true\"\n          (click)=\"toggleOpen($event); $event.stopPropagation()\"\n          placeholder=\"Select option\"\n        />\n        <mat-icon\n          (click)=\"toggleOpen($event); $event.stopPropagation()\"\n          class=\"text-primary-700\"\n          [svgIcon]=\"icon()\"\n        ></mat-icon>\n      </div>\n      @if (open() === true && calendarMatrix().length > 0) {\n      <div class=\"dropdown-container pt-2\">\n        <div\n          class=\"dropdown px-4 py-3 text-primary-700 rounded-xl flex flex-col gap-4\"\n        >\n          <!--Header-->\n          <div class=\"flex flex-row justify-between items-center\">\n            <mat-icon\n              class=\"cursor-pointer text-primary-900\"\n              [svgIcon]=\"Icons.ARROW_LEFT_ROUNDED\"\n              (click)=\"previousMonth($event)\"\n            ></mat-icon>\n            <p class=\"text-primary-900 font-semibold\">\n              {{getMonthCode()|translate}}&nbsp;{{year()}}\n            </p>\n            <mat-icon\n              class=\"cursor-pointer text-primary-900\"\n              [svgIcon]=\"Icons.ARROW_RIGHT_ROUNDED\"\n              (click)=\"nextMonth($event)\"\n            ></mat-icon>\n          </div>\n          <!-- Content -->\n          <div class=\"grid grid-cols-7 grid-rows-6 gap-2\">\n            @for (day of daysCode; track $index) {\n            <div\n              class=\"flex flex-col items-center justify-center cursor-pointer\"\n            >\n              <p class=\"text-neutral-300 font-semibold\">\n                {{ day | translate }}\n              </p>\n            </div>\n            } @for (row of calendarMatrix(); track $index) { @for (day of row;\n            track $index) {\n            <div\n              class=\"flex flex-col items-center justify-center cursor-pointer rounded-full p-1\"\n              [ngClass]=\"{'bg-primary-700': dayIsSelected(day.day) && day.currentMonth === true}\"\n              (click)=\"selectDate($event, day.day)\"\n            >\n              <p\n                [ngClass]=\"{\n                  'text-white font-regular': dayIsSelected(day.day) && day.currentMonth === true,\n                  'text-primary-600 font-semibold': dayIsCurrent(day.day) === true && day.currentMonth === true,\n                  'text-primary-900 font-semibold': day.currentMonth === true && dayIsCurrent(day.day) === false,\n                  'text-gray-300': day.currentMonth === false\n                }\"\n              >\n                {{ getDayNumber(day.day) }}\n              </p>\n            </div>\n            } }\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    @if (touched && field.error?.()) {\n    <p class=\"text-red-700 text-xs\">{{ field.error?.() | translate }}</p>\n    }\n  </div>\n</div>\n", styles: ["input:focus{outline:none;box-shadow:none;border:none}.pretty-select{background:#fff;font-size:14px;outline:none;position:relative}.pretty-select:focus{box-shadow:0 0 0 2px var(--primary-200),4px 4px 12px #0000000d,-4px -4px 12px #ffffffe6}.dropdown-container{position:absolute;top:100%;left:0;z-index:9999;width:max-content;min-width:100px}.dropdown{background-color:#fff;display:block;box-shadow:0 0 0 2px var(--primary-200),4px 4px 12px #0000000d,-4px -4px 12px #ffffffe6;max-height:400px;overflow-y:auto;width:max-content}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], field: [{
+                type: Input
+            }] } });
+
+class ErpInputText {
+    constructor() {
+        this.Icons = Icons;
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    }
+    get label() {
+        return this.field.label?.();
+    }
+    get placeholder() {
+        return this.field.placeholder?.() || "PLACEHOLDERS.DEFAULT";
+    }
+    get touched() {
+        return this.field.touched(); // note the () after field
+    }
+    get required() {
+        return this.field.required?.() ?? false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpInputText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ErpInputText, isStandalone: true, selector: "erp-input-text", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"min-w-full flex flex-col gap-1\">\n  <div>\n    @if (label) {\n    <p class=\"font-bold\">\n      {{ label | translate}}@if(required === true){\n      <span class=\"text-danger-600\">*</span>}\n    </p>\n    }\n    <div\n      class=\"pretty-select px-4 py-3 min-w-full text-primary-700 rounded-xl border-2 border-input-border\"\n    >\n      <div\n        class=\"flex flex-row min-w-full justify-between gap-4 items-center cursor-pointer\"\n      >\n        <input\n          type=\"text\"\n          class=\"flex-1\"\n          [ngModel]=\"field.value()\"\n          (ngModelChange)=\"field.setValue($event)\"\n          (blur)=\"field.setTouched()\"\n          [placeholder]=\"placeholder | translate\"\n        />\n        @if (icon(); as icon) {\n        <mat-icon class=\"text-primary-700\" [svgIcon]=\"icon\"></mat-icon>\n        }\n      </div>\n    </div>\n    @if (touched && field.error?.()) {\n    <p class=\"text-red-700 text-xs\">{{ field.error?.() | translate }}</p>\n    }\n  </div>\n</div>\n", styles: ["input:focus{outline:none;box-shadow:none;border:none}.pretty-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;font-size:14px;outline:none;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpInputText, decorators: [{
+            type: Component,
+            args: [{ selector: "erp-input-text", imports: [CommonModule, TranslateModule, MatIcon, MatIconModule, FormsModule], template: "<div class=\"min-w-full flex flex-col gap-1\">\n  <div>\n    @if (label) {\n    <p class=\"font-bold\">\n      {{ label | translate}}@if(required === true){\n      <span class=\"text-danger-600\">*</span>}\n    </p>\n    }\n    <div\n      class=\"pretty-select px-4 py-3 min-w-full text-primary-700 rounded-xl border-2 border-input-border\"\n    >\n      <div\n        class=\"flex flex-row min-w-full justify-between gap-4 items-center cursor-pointer\"\n      >\n        <input\n          type=\"text\"\n          class=\"flex-1\"\n          [ngModel]=\"field.value()\"\n          (ngModelChange)=\"field.setValue($event)\"\n          (blur)=\"field.setTouched()\"\n          [placeholder]=\"placeholder | translate\"\n        />\n        @if (icon(); as icon) {\n        <mat-icon class=\"text-primary-700\" [svgIcon]=\"icon\"></mat-icon>\n        }\n      </div>\n    </div>\n    @if (touched && field.error?.()) {\n    <p class=\"text-red-700 text-xs\">{{ field.error?.() | translate }}</p>\n    }\n  </div>\n</div>\n", styles: ["input:focus{outline:none;box-shadow:none;border:none}.pretty-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;font-size:14px;outline:none;position:relative}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], field: [{
+                type: Input
+            }] } });
+
+class ErpSelect {
+    get fieldValue() {
+        return this.field.value();
+    }
+    get label() {
+        return this.field.label?.();
+    }
+    get placeholder() {
+        return this.field.placeholder?.() || "PLACEHOLDERS.DEFAULT";
+    }
+    get options() {
+        return this.field.options?.() ?? [];
+    }
+    get optionValue() {
+        return this.field.optionValue;
+    }
+    get optionLabel() {
+        return this.field.optionLabel;
+    }
+    get touched() {
+        return this.field.touched(); // note the () after field
+    }
+    get error() {
+        return this.field.error?.(); // same here
+    }
+    get displayValue() {
+        const currentObject = this.field.value(); // Get the object from the signal
+        if (!currentObject)
+            return "";
+        // Access the property dynamically using the optionLabel key
+        return currentObject[this.field.optionLabel ?? "label"] || "";
+    }
+    get required() {
+        return this.field.required?.() ?? false;
+    }
+    constructor(eRef) {
+        this.eRef = eRef;
+        this.icon = input(Icons.ARROW_BOTTOM_ROUNDED, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    }
+    toggleOpen(event) {
+        event.stopPropagation();
+        this.open.set(!this.open());
+        this.field.setTouched();
+    }
+    select(option) {
+        this.field.setValue(option);
+        this.field.setTouched();
+        this.open.set(false);
+    }
+    clickOutside(event) {
+        if (!this.eRef.nativeElement.contains(event.target)) {
+            this.open.set(false);
+        }
+    }
+    getOptionLabel(option) {
+        const key = this.field.optionLabel;
+        if (key)
+            return option[key];
+        else
+            return "optionKey not defined";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ErpSelect, isStandalone: true, selector: "erp-select", inputs: { selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", isSignal: false, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "@if (field;as field) {\n<div class=\"min-w-full flex flex-col gap-1\">\n  <div>\n    @if (label) {\n    <p>\n      {{ label | translate}} @if(required === true){\n      <span class=\"text-danger-600\">*</span>}\n    </p>\n    }\n    <div\n      class=\"pretty-select px-4 py-3 min-w-full text-primary-700 rounded-xl border-2 border-input-border transition-all duration-200 ease-in-out\"\n      (click)=\"toggleOpen($event)\"\n    >\n      <div\n        class=\"flex flex-row min-w-full justify-between items-center cursor-pointer\"\n      >\n        @if (selectedTemplate && field.value() !== null) {\n        <ng-container\n          *ngTemplateOutlet=\"selectedTemplate; context: { $implicit: field.value(), value: field.value() }\"\n        ></ng-container>\n        }@else {\n        <input\n          type=\"text\"\n          [value]=\"displayValue | translate\"\n          [readOnly]=\"true\"\n          (click)=\"toggleOpen($event); $event.stopPropagation()\"\n          [placeholder]=\"placeholder | translate\"\n        />\n        }\n        <mat-icon\n          (click)=\"toggleOpen($event); $event.stopPropagation()\"\n          class=\"text-primary-700\"\n          [svgIcon]=\"icon()\"\n        ></mat-icon>\n      </div>\n      @if (open() === true) {\n      <div class=\"dropdown-container pt-2\">\n        <div class=\"dropdown px-4 py-3 min-w-full text-primary-700 rounded-xl\">\n          @for (option of options; track $index) {\n          <div\n            class=\"option cursor-pointer p-2 border-lg hover:bg-primary-200 rounded-lg hover:text-primary-900 transition-all duration-200 ease-in-out\"\n            [ngClass]=\"{\n              'text-primary-900 bg-primary-100': fieldValue !== null && fieldValue[optionValue] === option[optionValue],\n              'text-primary-500': fieldValue === null || fieldValue[optionValue] !== option[optionValue]\n            }\"\n            (click)=\"$event.stopPropagation(); select(option)\"\n          >\n            @if(optionTemplate) {\n            <ng-container\n              *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option, value: option }\"\n            ></ng-container>\n            }@else{ {{ getOptionLabel(option) | translate}} }\n          </div>\n          } @if (options.length === 0) {\n          <div class=\"no-results\">No results</div>\n          }\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  @if (touched && field.error?.()) {\n  <p class=\"text-red-700 text-xs\">{{ field.error?.() | translate }}</p>\n  }\n</div>\n}\n", styles: ["input:focus{outline:none;box-shadow:none;border:none}.pretty-select{background:#fff;font-size:14px;outline:none;position:relative}.pretty-select:focus{box-shadow:0 0 0 2px var(--primary-200),4px 4px 12px #0000000d,-4px -4px 12px #ffffffe6}.dropdown-container{position:absolute;top:100%;left:0;right:0;z-index:9999}.dropdown{height:100%;width:100%;background-color:#fff;box-shadow:0 0 0 2px var(--primary-200),4px 4px 12px #0000000d,-4px -4px 12px #ffffffe6;max-height:200px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpSelect, decorators: [{
+            type: Component,
+            args: [{ selector: "erp-select", imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatIcon,
+                        MatIconModule,
+                        CommonModule,
+                        NgTemplateOutlet,
+                        TranslateModule,
+                    ], template: "@if (field;as field) {\n<div class=\"min-w-full flex flex-col gap-1\">\n  <div>\n    @if (label) {\n    <p>\n      {{ label | translate}} @if(required === true){\n      <span class=\"text-danger-600\">*</span>}\n    </p>\n    }\n    <div\n      class=\"pretty-select px-4 py-3 min-w-full text-primary-700 rounded-xl border-2 border-input-border transition-all duration-200 ease-in-out\"\n      (click)=\"toggleOpen($event)\"\n    >\n      <div\n        class=\"flex flex-row min-w-full justify-between items-center cursor-pointer\"\n      >\n        @if (selectedTemplate && field.value() !== null) {\n        <ng-container\n          *ngTemplateOutlet=\"selectedTemplate; context: { $implicit: field.value(), value: field.value() }\"\n        ></ng-container>\n        }@else {\n        <input\n          type=\"text\"\n          [value]=\"displayValue | translate\"\n          [readOnly]=\"true\"\n          (click)=\"toggleOpen($event); $event.stopPropagation()\"\n          [placeholder]=\"placeholder | translate\"\n        />\n        }\n        <mat-icon\n          (click)=\"toggleOpen($event); $event.stopPropagation()\"\n          class=\"text-primary-700\"\n          [svgIcon]=\"icon()\"\n        ></mat-icon>\n      </div>\n      @if (open() === true) {\n      <div class=\"dropdown-container pt-2\">\n        <div class=\"dropdown px-4 py-3 min-w-full text-primary-700 rounded-xl\">\n          @for (option of options; track $index) {\n          <div\n            class=\"option cursor-pointer p-2 border-lg hover:bg-primary-200 rounded-lg hover:text-primary-900 transition-all duration-200 ease-in-out\"\n            [ngClass]=\"{\n              'text-primary-900 bg-primary-100': fieldValue !== null && fieldValue[optionValue] === option[optionValue],\n              'text-primary-500': fieldValue === null || fieldValue[optionValue] !== option[optionValue]\n            }\"\n            (click)=\"$event.stopPropagation(); select(option)\"\n          >\n            @if(optionTemplate) {\n            <ng-container\n              *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option, value: option }\"\n            ></ng-container>\n            }@else{ {{ getOptionLabel(option) | translate}} }\n          </div>\n          } @if (options.length === 0) {\n          <div class=\"no-results\">No results</div>\n          }\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  @if (touched && field.error?.()) {\n  <p class=\"text-red-700 text-xs\">{{ field.error?.() | translate }}</p>\n  }\n</div>\n}\n", styles: ["input:focus{outline:none;box-shadow:none;border:none}.pretty-select{background:#fff;font-size:14px;outline:none;position:relative}.pretty-select:focus{box-shadow:0 0 0 2px var(--primary-200),4px 4px 12px #0000000d,-4px -4px 12px #ffffffe6}.dropdown-container{position:absolute;top:100%;left:0;right:0;z-index:9999}.dropdown{height:100%;width:100%;background-color:#fff;box-shadow:0 0 0 2px var(--primary-200),4px 4px 12px #0000000d,-4px -4px 12px #ffffffe6;max-height:200px;overflow-y:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectedTemplate: [{
+                type: Input
+            }], optionTemplate: [{
+                type: Input
+            }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], field: [{
+                type: Input
+            }], clickOutside: [{
+                type: HostListener,
+                args: ["document:click", ["$event"]]
+            }] } });
+
+class ErpStatusCell {
+    constructor() {
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.textColor = undefined;
+        this.backgroundColor = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpStatusCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: ErpStatusCell, isStandalone: true, selector: "erp-status-cell", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: false, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row justify-center items-center\">\n  <div\n    class=\"rounded-lg p-2\"\n    [style.background]=\"backgroundColor?backgroundColor:'var(--primary-500)'\"\n  >\n    <p class=\"text-xs\" [style.color]=\"textColor?textColor:'white'\">\n      {{label()}}\n    </p>\n  </div>\n</div>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpStatusCell, decorators: [{
+            type: Component,
+            args: [{ selector: "erp-status-cell", imports: [], template: "<div class=\"flex flex-row justify-center items-center\">\n  <div\n    class=\"rounded-lg p-2\"\n    [style.background]=\"backgroundColor?backgroundColor:'var(--primary-500)'\"\n  >\n    <p class=\"text-xs\" [style.color]=\"textColor?textColor:'white'\">\n      {{label()}}\n    </p>\n  </div>\n</div>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], textColor: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }] } });
+
+class ErpTable {
+    constructor() {
+        this.Icons = Icons;
+        this.columns = model([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.data = model([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.idCol = model(null, ...(ngDevMode ? [{ debugName: "idCol" }] : []));
+        this.selectedData = model([], ...(ngDevMode ? [{ debugName: "selectedData" }] : []));
+        this.rowSelection = false;
+        this.withPagination = false;
+        this.templates = {};
+        this.actionHeaderLabel = "LABELS.ACTIONS";
+        this.selectedItemsLabel = undefined;
+        this.selectActions = model([], ...(ngDevMode ? [{ debugName: "selectActions" }] : []));
+        this.perItemActions = model([], ...(ngDevMode ? [{ debugName: "perItemActions" }] : []));
+        this.bottomBarFading = signal(false, ...(ngDevMode ? [{ debugName: "bottomBarFading" }] : []));
+        this.isAllToggled = computed(() => this.data().length === this.selectedData().length, ...(ngDevMode ? [{ debugName: "isAllToggled" }] : []));
+    }
+    ngOnInit() {
+        if (this.rowSelection === true && this.idCol() === null) {
+            throw new Error("idCol is required when rowSelection is true");
+        }
+        if (this.idCol() && this.data().length > 0) {
+            const key = this.idCol();
+            const ids = this.data().map((d) => d[key]);
+            if (new Set(ids).size !== ids.length) {
+                throw new Error("idCol must be unique");
+            }
+        }
+    }
+    getTemplate(key) {
+        return this.templates[key];
+    }
+    toggleAll() {
+        if (this.isAllToggled() === true) {
+            this.bottomBarFading.set(true);
+            setTimeout(() => {
+                this.selectedData.set([]);
+                this.bottomBarFading.set(false);
+            }, 220);
+        }
+        else {
+            this.selectedData.set([...this.data()]);
+        }
+    }
+    toggleRow(row) {
+        if (this.isRowSelected(row) === true) {
+            if (this.selectedData().length === 1) {
+                this.bottomBarFading.set(true);
+                setTimeout(() => {
+                    this.selectedData.set(this.selectedData().filter((d) => d[this.idCol()] !== row[this.idCol()]));
+                    this.bottomBarFading.set(false);
+                }, 220);
+            }
+            else {
+                this.selectedData.set(this.selectedData().filter((d) => d[this.idCol()] !== row[this.idCol()]));
+            }
+        }
+        else {
+            this.selectedData.set([...this.selectedData(), row]);
+        }
+    }
+    isRowSelected(row) {
+        const selected = this.selectedData().find((d) => d[this.idCol()] === row[this.idCol()]);
+        if (selected)
+            return true;
+        return false;
+    }
+    clearSelectedData() {
+        this.bottomBarFading.set(true);
+        setTimeout(() => {
+            this.selectedData.set([]);
+            this.bottomBarFading.set(false);
+        }, 220);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ErpTable, isStandalone: true, selector: "erp-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, idCol: { classPropertyName: "idCol", publicName: "idCol", isSignal: true, isRequired: false, transformFunction: null }, selectedData: { classPropertyName: "selectedData", publicName: "selectedData", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: false, isRequired: false, transformFunction: null }, withPagination: { classPropertyName: "withPagination", publicName: "withPagination", isSignal: false, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: false, isRequired: false, transformFunction: null }, actionHeaderLabel: { classPropertyName: "actionHeaderLabel", publicName: "actionHeaderLabel", isSignal: false, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, selectActions: { classPropertyName: "selectActions", publicName: "selectActions", isSignal: true, isRequired: false, transformFunction: null }, perItemActions: { classPropertyName: "perItemActions", publicName: "perItemActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange", data: "dataChange", idCol: "idColChange", selectedData: "selectedDataChange", selectActions: "selectActionsChange", perItemActions: "perItemActionsChange" }, ngImport: i0, template: "@if (columns() && columns().length > 0) {\n<table class=\"app-table min-w-full\">\n  <thead>\n    <tr>\n      @if( rowSelection === true){\n      <th>\n        <span\n          style=\"\n            display: flex;\n            align-items: center;\n            justify-content: start;\n            cursor: pointer;\n          \"\n          (click)=\"toggleAll()\"\n        >\n          @if (isAllToggled()=== true) {\n          <mat-icon class=\"text-white\" [svgIcon]=\"Icons.CHECK\"></mat-icon>\n          }@else {\n          <mat-icon class=\"text-white\" [svgIcon]=\"Icons.UNCHECKED\"></mat-icon>\n          }\n        </span>\n      </th>\n      } @for (col of columns(); track col.key) {\n      <th>\n        <p\n          class=\"text-white\"\n          [ngClass]=\"{'text-center':col.cellAlignment && col.cellAlignment === 'CENTER',\n          'text-start':!col.cellAlignment || col.cellAlignment === 'START',\n          'text-end':col.cellAlignment && col.cellAlignment === 'END'\n        }\"\n        >\n          {{ col.header }}\n        </p>\n      </th>\n      } @if(perItemActions().length > 0){\n      <th><p class=\"text-center text-white\">{{actionHeaderLabel}}</p></th>\n      }\n    </tr>\n  </thead>\n\n  <tbody>\n    @for (row of data(); track row) {\n    <tr>\n      @if(rowSelection){\n      <td class=\"nowrap-cell\">\n        <span\n          style=\"\n            display: flex;\n            align-items: center;\n            justify-content: start;\n            cursor: pointer;\n          \"\n          (click)=\"toggleRow(row)\"\n        >\n          @if (isRowSelected(row) === true) {\n          <mat-icon class=\"text-primary-700\" [svgIcon]=\"Icons.CHECK\"></mat-icon>\n          }@else {\n          <mat-icon\n            class=\"text-primary-700\"\n            [svgIcon]=\"Icons.UNCHECKED\"\n          ></mat-icon>\n          }\n        </span>\n      </td>\n      } @for (col of columns(); track col.key) {\n      <td>\n        @if (getTemplate(col.key); as tpl) {\n\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: row, row: row }\"\n        >\n        </ng-container>\n        } @else {\n        <p\n          [ngClass]=\"{'text-center':col.cellAlignment && col.cellAlignment === 'CENTER',\n          'text-start':!col.cellAlignment || col.cellAlignment === 'START',\n          'text-end':col.cellAlignment && col.cellAlignment === 'END'\n        }\"\n        >\n          {{ row[col.key] }}\n        </p>\n        }\n      </td>\n      } @if (perItemActions().length > 0) {\n      <td>\n        <div class=\"flex flex-row justify-center items-center gap-2\">\n          @for (action of perItemActions(); track $index) { @if\n          (action.hasRole()) {\n          <mat-icon\n            [svgIcon]=\"action.icon\"\n            style=\"cursor: pointer\"\n            [style.color]=\"action.status?.textColor ? action.status!.textColor : 'var(--primary-700)'\"\n            (click)=\"action.execute([row])\"\n          ></mat-icon>\n          } }\n        </div>\n      </td>\n      }\n    </tr>\n    }\n  </tbody>\n</table>\n} @else {\n<div class=\"app-table-empty\">No data available.</div>\n} @if (selectedData().length >0) {\n<div\n  class=\"slide-in-top fixed inset-x-0 bottom-0 bg-primary-700 h-[70px] px-8 flex flex-row justify-between items-center gap-8\"\n  [ngClass]=\"{'slide-out-top':bottomBarFading()===true}\"\n>\n  <p class=\"text-white\">\n    @if (!selectedItemsLabel) { Nombre d'items selectionn\u00E9es:&nbsp; {{\n    selectedData().length}} } @else { {{selectedItemsLabel}} }\n  </p>\n  <div class=\"flex flex-row justify-end items-center gap-4\">\n    @for (action of selectActions(); track $index) { @if (action.hasRole()) {\n    <div\n      class=\"flex flex-row gap-2 items-center cursor-pointer border border-white rounded-xl py-2 px-4\"\n      (click)=\"action.execute(selectedData())\"\n    >\n      <mat-icon class=\"text-white\" [svgIcon]=\"action.icon\"></mat-icon>\n      <p class=\"text-white\">{{action.title |translate}}</p>\n    </div>\n    } }\n    <div\n      (click)=\"clearSelectedData()\"\n      class=\"flex flex-row justify-center items-center cursor-pointer\"\n    >\n      <mat-icon [svgIcon]=\"Icons.CLOSE\" class=\"text-white\"></mat-icon>\n    </div>\n  </div>\n</div>\n\n}\n", styles: [".slide-in-top{animation:slideInTop .22s ease-out}.slide-out-top{animation:slideOutTop .22s ease-out}.slide-in-top.removing{animation:slide-in-top-leave .2s ease-in forwards}.slide-in-right{animation:slide-in-right-animation .22s ease-out}.slide-out-left{animation:slideOutLeft .22s forwards}.slide-in-left{animation:slide-in-left-animation .2s ease-in forwards}@keyframes slideInTop{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOutTop{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(24px)}}@keyframes slide-in-top-animation{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-right-animation{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@keyframes slideOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-200px)}}@keyframes slide-in-left-animation{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes fade-out-animation{0%{opacity:1}to{opacity:0}}@keyframes fade-in-animation{0%{opacity:0}to{opacity:1}}.fade-in{animation:fade-in-animation .22s ease-out}.fade-out{animation:fade-out-animation .2s ease-in forwards}.floating-up-down{z-index:2;animation:floatUpDown 3s ease-in-out infinite}@keyframes floatUpDown{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.app-table{border-radius:15px;border-collapse:separate;border-spacing:0;overflow:hidden}.app-table thead{background:transparent}.app-table thead tr th{background:var(--primary-700)}.app-table th,.app-table td{text-align:left;font-weight:400;padding:1rem 1.5rem}.app-table thead tr:first-child th:first-child{border-top-left-radius:15px;border-bottom-left-radius:15px}.app-table thead tr:first-child th:last-child{border-top-right-radius:15px;border-bottom-right-radius:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpTable, decorators: [{
+            type: Component,
+            args: [{ selector: "erp-table", imports: [
+                        CommonModule,
+                        NgTemplateOutlet,
+                        MatIconModule,
+                        MatIcon,
+                        TranslateModule,
+                    ], template: "@if (columns() && columns().length > 0) {\n<table class=\"app-table min-w-full\">\n  <thead>\n    <tr>\n      @if( rowSelection === true){\n      <th>\n        <span\n          style=\"\n            display: flex;\n            align-items: center;\n            justify-content: start;\n            cursor: pointer;\n          \"\n          (click)=\"toggleAll()\"\n        >\n          @if (isAllToggled()=== true) {\n          <mat-icon class=\"text-white\" [svgIcon]=\"Icons.CHECK\"></mat-icon>\n          }@else {\n          <mat-icon class=\"text-white\" [svgIcon]=\"Icons.UNCHECKED\"></mat-icon>\n          }\n        </span>\n      </th>\n      } @for (col of columns(); track col.key) {\n      <th>\n        <p\n          class=\"text-white\"\n          [ngClass]=\"{'text-center':col.cellAlignment && col.cellAlignment === 'CENTER',\n          'text-start':!col.cellAlignment || col.cellAlignment === 'START',\n          'text-end':col.cellAlignment && col.cellAlignment === 'END'\n        }\"\n        >\n          {{ col.header }}\n        </p>\n      </th>\n      } @if(perItemActions().length > 0){\n      <th><p class=\"text-center text-white\">{{actionHeaderLabel}}</p></th>\n      }\n    </tr>\n  </thead>\n\n  <tbody>\n    @for (row of data(); track row) {\n    <tr>\n      @if(rowSelection){\n      <td class=\"nowrap-cell\">\n        <span\n          style=\"\n            display: flex;\n            align-items: center;\n            justify-content: start;\n            cursor: pointer;\n          \"\n          (click)=\"toggleRow(row)\"\n        >\n          @if (isRowSelected(row) === true) {\n          <mat-icon class=\"text-primary-700\" [svgIcon]=\"Icons.CHECK\"></mat-icon>\n          }@else {\n          <mat-icon\n            class=\"text-primary-700\"\n            [svgIcon]=\"Icons.UNCHECKED\"\n          ></mat-icon>\n          }\n        </span>\n      </td>\n      } @for (col of columns(); track col.key) {\n      <td>\n        @if (getTemplate(col.key); as tpl) {\n\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: row, row: row }\"\n        >\n        </ng-container>\n        } @else {\n        <p\n          [ngClass]=\"{'text-center':col.cellAlignment && col.cellAlignment === 'CENTER',\n          'text-start':!col.cellAlignment || col.cellAlignment === 'START',\n          'text-end':col.cellAlignment && col.cellAlignment === 'END'\n        }\"\n        >\n          {{ row[col.key] }}\n        </p>\n        }\n      </td>\n      } @if (perItemActions().length > 0) {\n      <td>\n        <div class=\"flex flex-row justify-center items-center gap-2\">\n          @for (action of perItemActions(); track $index) { @if\n          (action.hasRole()) {\n          <mat-icon\n            [svgIcon]=\"action.icon\"\n            style=\"cursor: pointer\"\n            [style.color]=\"action.status?.textColor ? action.status!.textColor : 'var(--primary-700)'\"\n            (click)=\"action.execute([row])\"\n          ></mat-icon>\n          } }\n        </div>\n      </td>\n      }\n    </tr>\n    }\n  </tbody>\n</table>\n} @else {\n<div class=\"app-table-empty\">No data available.</div>\n} @if (selectedData().length >0) {\n<div\n  class=\"slide-in-top fixed inset-x-0 bottom-0 bg-primary-700 h-[70px] px-8 flex flex-row justify-between items-center gap-8\"\n  [ngClass]=\"{'slide-out-top':bottomBarFading()===true}\"\n>\n  <p class=\"text-white\">\n    @if (!selectedItemsLabel) { Nombre d'items selectionn\u00E9es:&nbsp; {{\n    selectedData().length}} } @else { {{selectedItemsLabel}} }\n  </p>\n  <div class=\"flex flex-row justify-end items-center gap-4\">\n    @for (action of selectActions(); track $index) { @if (action.hasRole()) {\n    <div\n      class=\"flex flex-row gap-2 items-center cursor-pointer border border-white rounded-xl py-2 px-4\"\n      (click)=\"action.execute(selectedData())\"\n    >\n      <mat-icon class=\"text-white\" [svgIcon]=\"action.icon\"></mat-icon>\n      <p class=\"text-white\">{{action.title |translate}}</p>\n    </div>\n    } }\n    <div\n      (click)=\"clearSelectedData()\"\n      class=\"flex flex-row justify-center items-center cursor-pointer\"\n    >\n      <mat-icon [svgIcon]=\"Icons.CLOSE\" class=\"text-white\"></mat-icon>\n    </div>\n  </div>\n</div>\n\n}\n", styles: [".slide-in-top{animation:slideInTop .22s ease-out}.slide-out-top{animation:slideOutTop .22s ease-out}.slide-in-top.removing{animation:slide-in-top-leave .2s ease-in forwards}.slide-in-right{animation:slide-in-right-animation .22s ease-out}.slide-out-left{animation:slideOutLeft .22s forwards}.slide-in-left{animation:slide-in-left-animation .2s ease-in forwards}@keyframes slideInTop{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOutTop{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(24px)}}@keyframes slide-in-top-animation{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-right-animation{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@keyframes slideOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-200px)}}@keyframes slide-in-left-animation{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes fade-out-animation{0%{opacity:1}to{opacity:0}}@keyframes fade-in-animation{0%{opacity:0}to{opacity:1}}.fade-in{animation:fade-in-animation .22s ease-out}.fade-out{animation:fade-out-animation .2s ease-in forwards}.floating-up-down{z-index:2;animation:floatUpDown 3s ease-in-out infinite}@keyframes floatUpDown{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.app-table{border-radius:15px;border-collapse:separate;border-spacing:0;overflow:hidden}.app-table thead{background:transparent}.app-table thead tr th{background:var(--primary-700)}.app-table th,.app-table td{text-align:left;font-weight:400;padding:1rem 1.5rem}.app-table thead tr:first-child th:first-child{border-top-left-radius:15px;border-bottom-left-radius:15px}.app-table thead tr:first-child th:last-child{border-top-right-radius:15px;border-bottom-right-radius:15px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }, { type: i0.Output, args: ["dataChange"] }], idCol: [{ type: i0.Input, args: [{ isSignal: true, alias: "idCol", required: false }] }, { type: i0.Output, args: ["idColChange"] }], selectedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedData", required: false }] }, { type: i0.Output, args: ["selectedDataChange"] }], rowSelection: [{
+                type: Input
+            }], withPagination: [{
+                type: Input
+            }], templates: [{
+                type: Input
+            }], actionHeaderLabel: [{
+                type: Input
+            }], selectedItemsLabel: [{
+                type: Input
+            }], selectActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectActions", required: false }] }, { type: i0.Output, args: ["selectActionsChange"] }], perItemActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "perItemActions", required: false }] }, { type: i0.Output, args: ["perItemActionsChange"] }] } });
+
+class ErpUserCell {
+    constructor() {
+        this.firstName = "";
+        this.lastName = "";
+        this.email = "";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpUserCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: ErpUserCell, isStandalone: true, selector: "erp-user-cell", inputs: { firstName: "firstName", lastName: "lastName", email: "email" }, ngImport: i0, template: "<div class=\"min-w-full flex flex-row items-center gap-2\">\n  <div class=\"h-[15px] w-[15px] rounded-full bg-primary-400\"></div>\n  <div class=\"\">\n    <p class=\"text-primary-900\">{{firstName}}&nbsp;{{lastName}}</p>\n    <p class=\"text-gray-400\">{{email}}</p>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpUserCell, decorators: [{
+            type: Component,
+            args: [{ selector: "erp-user-cell", imports: [CommonModule], template: "<div class=\"min-w-full flex flex-row items-center gap-2\">\n  <div class=\"h-[15px] w-[15px] rounded-full bg-primary-400\"></div>\n  <div class=\"\">\n    <p class=\"text-primary-900\">{{firstName}}&nbsp;{{lastName}}</p>\n    <p class=\"text-gray-400\">{{email}}</p>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { firstName: [{
+                type: Input
+            }], lastName: [{
+                type: Input
+            }], email: [{
+                type: Input
+            }] } });
+
+class ErpConfigService {
+    constructor() {
+        this.hostOrigin = signal("", ...(ngDevMode ? [{ debugName: "hostOrigin" }] : []));
+        this.remoteOrigin = signal("", ...(ngDevMode ? [{ debugName: "remoteOrigin" }] : []));
+        this.backOrigin = signal("", ...(ngDevMode ? [{ debugName: "backOrigin" }] : []));
+    }
+    setConfig(config) {
+        this.hostOrigin.set(config.hostOrigin);
+        this.remoteOrigin.set(config.remoteOrigin);
+        this.backOrigin.set(config.backOrigin);
+    }
+    setHostOrigin(origin) {
+        this.hostOrigin.set(origin);
+    }
+    setRemoteOrigin(origin) {
+        this.remoteOrigin.set(origin);
+    }
+    setBackOrigin(origin) {
+        this.backOrigin.set(origin);
+    }
+    getConfig() {
+        return {
+            hostOrigin: this.hostOrigin(),
+            remoteOrigin: this.remoteOrigin(),
+            backOrigin: this.backOrigin(),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpConfigService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpConfigService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: () => [] });
+
+class ErpApiService {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.config = inject(ErpConfigService);
+        this.baseUrl = "";
+        this.baseUrl = this.config.getConfig().backOrigin;
+    }
+    get(endpoint, params) {
+        const httpParams = params
+            ? new HttpParams({ fromObject: params })
+            : undefined;
+        return this.http.get(`${this.baseUrl}${endpoint}`, {
+            params: httpParams,
+        });
+    }
+    getPaginated(endpoint, params) {
+        const httpParams = params
+            ? new HttpParams({ fromObject: params })
+            : undefined;
+        return this.http.get(`${this.baseUrl}${endpoint}`, {
+            params: httpParams,
+        });
+    }
+    getByID(endpoint, id, params) {
+        const httpParams = params
+            ? new HttpParams({ fromObject: params })
+            : undefined;
+        return this.http.get(`${this.baseUrl}${endpoint}/${id}`, {
+            params: httpParams,
+        });
+    }
+    post(endpoint, body) {
+        return this.http.post(`${this.baseUrl}${endpoint}`, body, {
+            headers: new HttpHeaders({ "Content-Type": "application/json" }),
+        });
+    }
+    put(endpoint, body) {
+        return this.http.put(`${this.baseUrl}${endpoint}`, body, {
+            headers: new HttpHeaders({ "Content-Type": "application/json" }),
+        });
+    }
+    patch(endpoint, body) {
+        return this.http.patch(`${this.baseUrl}${endpoint}`, body);
+    }
+    delete(endpoint) {
+        return this.http.delete(`${this.baseUrl}${endpoint}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpApiService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: () => [] });
+
+class ErpAuthService {
+    constructor() {
+        this.keycloak = inject(Keycloak);
+        // ── Reactive state ────────────────────────────────────────────────────────
+        /** True when the user has an active Keycloak session */
+        this.isAuthenticated = signal(this.keycloak.authenticated ?? false, ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
+        /** Decoded token payload as a signal */
+        this.tokenParsed = signal(this.keycloak.tokenParsed, ...(ngDevMode ? [{ debugName: "tokenParsed" }] : []));
+        /** Convenience: logged-in username */
+        this.username = computed(() => this.tokenParsed()
+            ?.preferred_username ?? "", ...(ngDevMode ? [{ debugName: "username" }] : []));
+        /** Convenience: user's realm roles */
+        this.roles = computed(() => this.keycloak.realmAccess?.roles ?? [], ...(ngDevMode ? [{ debugName: "roles" }] : []));
+    }
+    // ── Actions ───────────────────────────────────────────────────────────────
+    /**
+     * Redirect to the Keycloak login page.
+     * @param redirectUri  Where to return after login. Defaults to current URL.
+     */
+    login(redirectUri) {
+        return this.keycloak.login({
+            redirectUri: redirectUri ?? window.location.href,
+        });
+    }
+    /**
+     * Logout and redirect.
+     * @param redirectUri  Where to redirect after logout. Defaults to current origin.
+     */
+    logout(redirectUri) {
+        return this.keycloak.logout({
+            redirectUri: redirectUri ?? window.location.origin,
+        });
+    }
+    /**
+     * Redirect to Keycloak's account management page.
+     */
+    manageAccount() {
+        return this.keycloak.accountManagement();
+    }
+    /**
+     * Get the current bearer token string (for manual use if needed).
+     */
+    getToken() {
+        return this.keycloak.token
+            ? Promise.resolve(this.keycloak.token)
+            : Promise.reject("No token available");
+    }
+    /**
+     * Check if the user has a specific realm role.
+     */
+    hasRole(role) {
+        return this.keycloak.hasRealmRole(role);
+    }
+    /**
+     * Check if the user has a specific resource (client) role.
+     */
+    hasResourceRole(role, resource) {
+        return this.keycloak.hasResourceRole(role, resource);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpAuthService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpAuthService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+class ErpNotificationService {
+    constructor() {
+        this.notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpNotificationService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpNotificationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+class ErpTranslationService {
+    constructor(http) {
+        this.http = http;
+        this.translate = inject(TranslateService);
+        this.config = inject(ErpConfigService);
+    }
+    getHostTranslationForKey(key, lang = "fr") {
+        return this.http
+            .get(`${this.config.getConfig().hostOrigin}/assets/i18n/${lang}.json`)
+            .pipe(map((data) => data[key] ?? ""), // pick the key
+        catchError(() => of("")));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpTranslationService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpTranslationService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpTranslationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+
+class ErpI18nService {
+    constructor() {
+        this.translate = inject(TranslateService);
+        /** Reactive signal of the currently active language */
+        this.currentLang = signal(this.translate.currentLang ?? this.translate.defaultLang, ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
+        // Keep the signal in sync when language changes externally
+        this.translate.onLangChange.subscribe(({ lang }) => {
+            this.currentLang.set(lang);
+        });
+    }
+    /**
+     * Switch the active language and persist the choice to localStorage.
+     */
+    use(lang) {
+        localStorage.setItem("itdev_erp_lang", lang);
+        return this.translate.use(lang);
+    }
+    /**
+     * Restore the persisted language on app startup.
+     * Call this in your root component's ngOnInit or APP_INITIALIZER.
+     */
+    restorePersistedLang() {
+        const saved = localStorage.getItem("itdev_erp_lang");
+        if (saved) {
+            this.translate.use(saved);
+        }
+    }
+    /**
+     * Translate a key instantly (synchronous).
+     */
+    instant(key, params) {
+        return this.translate.instant(key, params);
+    }
+    /**
+     * Translate a key reactively (observable — auto-updates on lang change).
+     */
+    get(key, params) {
+        return this.translate.get(key, params);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpI18nService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErpI18nService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Call once in your app.config.ts providers array.
+ *
+ * @example
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideHttpClient(),
+ *     provideErpTranslate({ defaultLang: 'fr' }),
+ *   ],
+ * };
+ */
+function provideErpTranslate(config = {}) {
+    const path = config.translationsPath ?? "assets/i18n/";
+    const defaultLang = config.defaultLang ?? "fr";
+    return makeEnvironmentProviders([
+        importProvidersFrom(TranslateModule.forRoot({
+            // ❌ No isolate:true — library components must share
+            //    the same TranslateService instance as the app
+            defaultLanguage: defaultLang,
+            useDefaultLang: true, // fallback to defaultLang if key is missing
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient],
+            },
+        })),
+    ]);
+}
+class CustomTranslateLoader {
+    constructor(http) {
+        this.http = http;
+    }
+    getTranslation(lang) {
+        return this.http.get(`assets/i18n/${lang}.json`);
+    }
+}
+function HttpLoaderFactory(http) {
+    return new CustomTranslateLoader(http);
+}
+
+var InputTypes;
+(function (InputTypes) {
+    InputTypes["GROUP"] = "GROUP";
+    InputTypes["TEXT"] = "TEXT";
+    InputTypes["TEXT_AR"] = "TEXT_AR";
+    InputTypes["STATUS"] = "STATUS";
+    InputTypes["DATE"] = "DATE";
+    InputTypes["NUMBER"] = "NUMBER";
+    InputTypes["CURRENCY"] = "CURRENCY";
+    InputTypes["BIG_INT_CURRENCY"] = "BIG_INT_CURRENCY";
+    InputTypes["MULTI_DATE"] = "MULTI_DATE";
+    InputTypes["SELECT"] = "SELECT";
+    InputTypes["MULTI_SELECT"] = "MULTI_SELECT";
+    InputTypes["PHONE_NUMBER"] = "PHONE_NUMBER";
+    InputTypes["FAX"] = "FAX";
+    InputTypes["EMAIL"] = "EMAIL";
+    InputTypes["PASSWORD"] = "PASSWORD";
+    InputTypes["AUTOCOMPLETE"] = "AUTOCOMPLETE";
+    InputTypes["TEXT_AREA"] = "TEXT_AREA";
+    InputTypes["MASK"] = "MASK";
+    InputTypes["CHECKBOX"] = "CHECK_BOX";
+})(InputTypes || (InputTypes = {}));
+
+/** parametters for pagination (e.g. ) toPageParams({ page: 0, size: 10, sort: 'createdAt' })*/
+function toPageParams(req) {
+    const params = {};
+    if (req.page !== undefined)
+        params["page"] = req.page.toString();
+    if (req.size !== undefined)
+        params["size"] = req.size.toString();
+    if (req.sort)
+        params["sort"] = req.sort;
+    return params;
+}
+
+// base-entity.model.ts
+class BaseEntity {
+    constructor() {
+        this.archived = false;
+    }
+}
+
+class CategorieSocioProfRequest {
+    constructor(data = {}) {
+        Object.assign(this, data);
+    }
+}
+
+class CategorieSocioProf extends BaseEntity {
+    toJson() {
+        return new CategorieSocioProfRequest({
+            libelleFr: this.libelleFr,
+            libelleAr: this.libelleAr,
+            libelleEn: this.libelleEn,
+        });
+    }
+    static fromJson(data) {
+        const obj = new CategorieSocioProf();
+        obj.id = data.id;
+        obj.libelleFr = data.libelleFr;
+        obj.libelleAr = data.libelleAr;
+        obj.libelleEn = data.libelleEn;
+        obj.createdAt = data.createdAt ? new Date(data.createdAt) : undefined;
+        obj.updatedAt = data.updatedAt ? new Date(data.updatedAt) : undefined;
+        obj.createdBy = data.createdBy;
+        obj.updatedBy = data.updatedBy;
+        obj.archived = data.archived ?? false;
+        obj.attributes = data.attributes;
+        return obj;
+    }
+}
+
+class GrilleRequest {
+    constructor(data = {}) {
+        Object.assign(this, data);
+    }
+}
+
+class Grille extends BaseEntity {
+    toJson() {
+        return new GrilleRequest({
+            section: this.section,
+            indice: this.indice,
+            sbase: this.sbase,
+            statut: this.statut,
+        });
+    }
+    static fromJson(data) {
+        const obj = new Grille();
+        obj.id = data.id;
+        obj.section = data.section;
+        obj.indice = data.indice;
+        obj.sbase = data.sbase;
+        obj.statut = data.statut;
+        obj.createdAt = data.createdAt ? new Date(data.createdAt) : undefined;
+        obj.updatedAt = data.updatedAt ? new Date(data.updatedAt) : undefined;
+        obj.createdBy = data.createdBy;
+        obj.updatedBy = data.updatedBy;
+        obj.archived = data.archived ?? false;
+        obj.attributes = data.attributes;
+        return obj;
+    }
+}
+
+class FichePosteRequest {
+    constructor(data = {}) {
+        Object.assign(this, data);
+    }
+}
+
+class FichePoste extends BaseEntity {
+    toJson() {
+        return new FichePosteRequest({
+            libelleFr: this.libelleFr,
+            libelleAr: this.libelleAr,
+            libelleEn: this.libelleEn,
+            grilleId: this.grille?.id,
+        });
+    }
+    static fromJson(data) {
+        const obj = new FichePoste();
+        obj.id = data.id;
+        obj.libelleFr = data.libelleFr;
+        obj.libelleAr = data.libelleAr;
+        obj.libelleEn = data.libelleEn;
+        obj.grille = data.grille ? Grille.fromJson(data.grille) : undefined;
+        obj.createdAt = data.createdAt ? new Date(data.createdAt) : undefined;
+        obj.updatedAt = data.updatedAt ? new Date(data.updatedAt) : undefined;
+        obj.createdBy = data.createdBy;
+        obj.updatedBy = data.updatedBy;
+        obj.archived = data.archived ?? false;
+        obj.attributes = data.attributes;
+        return obj;
+    }
+}
+
+class PlanComptableRequest {
+    constructor(data = {}) {
+        Object.assign(this, data);
+    }
+}
+
+class PlanComptable extends BaseEntity {
+    toJson() {
+        return new PlanComptableRequest({
+            id: this.id,
+            libelleFr: this.libelleFr,
+            libelleAr: this.libelleAr,
+            libelleEn: this.libelleEn,
+            sens: this.sens,
+        });
+    }
+    static fromJson(data) {
+        const obj = new PlanComptable();
+        obj.id = data.id;
+        obj.libelleFr = data.libelleFr;
+        obj.libelleAr = data.libelleAr;
+        obj.libelleEn = data.libelleEn;
+        obj.sens = data.sens;
+        obj.createdAt = data.createdAt ? new Date(data.createdAt) : undefined;
+        obj.updatedAt = data.updatedAt ? new Date(data.updatedAt) : undefined;
+        obj.createdBy = data.createdBy;
+        obj.updatedBy = data.updatedBy;
+        obj.archived = data.archived ?? false;
+        obj.attributes = data.attributes;
+        return obj;
+    }
+}
+
+var SensComptable;
+(function (SensComptable) {
+    SensComptable["DEBIT"] = "DEBIT";
+    SensComptable["CREDIT"] = "CREDIT";
+})(SensComptable || (SensComptable = {}));
+const SensComptableList = Object.entries(SensComptable).map(([key, value]) => ({ key, value }));
+
+class PlanRubriqueRequest {
+    constructor(data = {}) {
+        Object.assign(this, data);
+    }
+}
+
+class PlanRubrique extends BaseEntity {
+    toJson() {
+        return new PlanRubriqueRequest({
+            codeRubrique: this.codeRubrique,
+            libelleFr: this.libelleFr,
+            libelleAr: this.libelleAr,
+            libelleEn: this.libelleEn,
+            sens: this.sens,
+            modeCalcul: this.modeCalcul,
+            typeRubrique: this.typeRubrique,
+        });
+    }
+    static fromJson(data) {
+        const obj = new PlanRubrique();
+        obj.id = data.id;
+        obj.codeRubrique = data.codeRubrique;
+        obj.libelleFr = data.libelleFr;
+        obj.libelleAr = data.libelleAr;
+        obj.libelleEn = data.libelleEn;
+        obj.sens = data.sens;
+        obj.modeCalcul = data.modeCalcul;
+        obj.typeRubrique = data.typeRubrique;
+        obj.createdAt = data.createdAt ? new Date(data.createdAt) : undefined;
+        obj.updatedAt = data.updatedAt ? new Date(data.updatedAt) : undefined;
+        obj.createdBy = data.createdBy;
+        obj.updatedBy = data.updatedBy;
+        obj.archived = data.archived ?? false;
+        obj.attributes = data.attributes;
+        return obj;
+    }
+}
+
+var TypeRubrique;
+(function (TypeRubrique) {
+    TypeRubrique["FIXE"] = "FIXE";
+    TypeRubrique["VARIABLE"] = "VARIABLE";
+})(TypeRubrique || (TypeRubrique = {}));
+const TypeRubriqueList = Object.entries(TypeRubrique).map(([key, value]) => ({ key, value }));
+
+class TypeCongeRequest {
+    constructor(data = {}) {
+        Object.assign(this, data);
+    }
+}
+
+class TypeConge extends BaseEntity {
+    toJson() {
+        return new TypeCongeRequest({
+            libelleFr: this.libelleFr,
+            libelleAr: this.libelleAr,
+            libelleEn: this.libelleEn,
+        });
+    }
+    static fromJson(data) {
+        const obj = new TypeConge();
+        obj.id = data.id;
+        obj.libelleFr = data.libelleFr;
+        obj.libelleAr = data.libelleAr;
+        obj.libelleEn = data.libelleEn;
+        obj.createdAt = data.createdAt ? new Date(data.createdAt) : undefined;
+        obj.updatedAt = data.updatedAt ? new Date(data.updatedAt) : undefined;
+        obj.createdBy = data.createdBy;
+        obj.updatedBy = data.updatedBy;
+        obj.archived = data.archived ?? false;
+        obj.attributes = data.attributes;
+        return obj;
+    }
+}
+
+class TypeContratRequest {
+    constructor(data = {}) {
+        Object.assign(this, data);
+    }
+}
+
+class TypeContrat extends BaseEntity {
+    toJson() {
+        return new TypeContratRequest({
+            libelleEn: this.libelleEn,
+            libelleFr: this.libelleFr,
+            libelleAr: this.libelleAr,
+        });
+    }
+    static fromJson(data) {
+        const obj = new TypeContrat();
+        obj.id = data.id;
+        obj.libelleEn = data.libelleEn;
+        obj.libelleFr = data.libelleFr;
+        obj.libelleAr = data.libelleAr;
+        obj.createdAt = data.createdAt ? new Date(data.createdAt) : undefined;
+        obj.updatedAt = data.updatedAt ? new Date(data.updatedAt) : undefined;
+        obj.createdBy = data.createdBy;
+        obj.updatedBy = data.updatedBy;
+        obj.archived = data.archived ?? false;
+        obj.attributes = data.attributes;
+        return obj;
+    }
+}
+
+class TypeFormationRequest {
+    constructor(data = {}) {
+        Object.assign(this, data);
+    }
+}
+
+class TypeFormation extends BaseEntity {
+    toJson() {
+        return new TypeFormationRequest({
+            libelleFr: this.libelleFr,
+            libelleAr: this.libelleAr,
+            libelleEn: this.libelleEn,
+        });
+    }
+    static fromJson(data) {
+        const obj = new TypeFormation();
+        obj.id = data.id;
+        obj.libelleFr = data.libelleFr;
+        obj.libelleAr = data.libelleAr;
+        obj.libelleEn = data.libelleEn;
+        obj.createdAt = data.createdAt ? new Date(data.createdAt) : undefined;
+        obj.updatedAt = data.updatedAt ? new Date(data.updatedAt) : undefined;
+        obj.createdBy = data.createdBy;
+        obj.updatedBy = data.updatedBy;
+        obj.archived = data.archived ?? false;
+        obj.attributes = data.attributes;
+        return obj;
+    }
+}
+
+class TypeSanctionRequest {
+    constructor(data = {}) {
+        Object.assign(this, data);
+    }
+}
+
+class TypeSanction extends BaseEntity {
+    toJson() {
+        return new TypeSanctionRequest({
+            libelleFr: this.libelleFr,
+            libelleAr: this.libelleAr,
+            libelleEn: this.libelleEn,
+        });
+    }
+    static fromJson(data) {
+        const obj = new TypeSanction();
+        obj.id = data.id;
+        obj.libelleFr = data.libelleFr;
+        obj.libelleAr = data.libelleAr;
+        obj.libelleEn = data.libelleEn;
+        obj.createdAt = data.createdAt ? new Date(data.createdAt) : undefined;
+        obj.updatedAt = data.updatedAt ? new Date(data.updatedAt) : undefined;
+        obj.createdBy = data.createdBy;
+        obj.updatedBy = data.updatedBy;
+        obj.archived = data.archived ?? false;
+        obj.attributes = data.attributes;
+        return obj;
+    }
+}
+
+/*
+ * Public API Surface of @itdev/erp
+ */
+// Components (standalone)
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseEntity, ButtonComponent, CategorieSocioProf, CategorieSocioProfRequest, CustomTranslateLoader, ErpApiService, ErpAuthService, ErpConfigService, ErpDate, ErpI18nService, ErpInputText, ErpNotificationService, ErpSelect, ErpStatusCell, ErpTable, ErpTranslationService, ErpUserCell, FichePoste, FichePosteRequest, Grille, GrilleRequest, HttpLoaderFactory, Icons, InputTypes, PlanComptable, PlanComptableRequest, PlanRubrique, PlanRubriqueRequest, SensComptable, SensComptableList, TypeConge, TypeCongeRequest, TypeContrat, TypeContratRequest, TypeFormation, TypeFormationRequest, TypeRubrique, TypeRubriqueList, TypeSanction, TypeSanctionRequest, provideErpTranslate, toPageParams };
+//# sourceMappingURL=erp-library-itdev.mjs.map