@corp-products/ui-components 3.2.9 → 3.3.0

package/fesm2022/corp-products-ui-components.mjs

@@ -0,0 +1,1988 @@
+import * as i0 from '@angular/core';
+import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, Injectable, HostListener, ViewChild, InjectionToken, Injector, createComponent, ViewContainerRef, ApplicationRef, EnvironmentInjector } from '@angular/core';
+import * as i1 from 'primeng/button';
+import { Button, ButtonModule, ButtonStyle } from 'primeng/button';
+import * as i1$1 from '@angular/common';
+import { CommonModule, NgClass, NgTemplateOutlet, NgIf, JsonPipe, NgStyle, SlicePipe, Location, NgComponentOutlet } from '@angular/common';
+import * as i2 from 'primeng/tabs';
+import { TabsModule } from 'primeng/tabs';
+import * as i1$2 from '@ngx-translate/core';
+import { TranslateModule, TranslateService, TranslatePipe } from '@ngx-translate/core';
+import * as i1$7 from '@angular/router';
+import { Router, ActivatedRoute, NavigationEnd, RouterLink, RouterOutlet, NavigationStart, RouterModule } from '@angular/router';
+import { filter, Subject, Subscription, BehaviorSubject, of } from 'rxjs';
+import * as i3 from 'primeng/badge';
+import { BadgeModule } from 'primeng/badge';
+import { Popover } from 'primeng/popover';
+import * as i2$1 from 'primeng/api';
+import { PrimeTemplate } from 'primeng/api';
+import * as i1$9 from 'primeng/drawer';
+import { Drawer, DrawerModule } from 'primeng/drawer';
+import * as i1$3 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import { AvatarModule } from 'primeng/avatar';
+import * as i1$8 from 'primeng/dynamicdialog';
+import { DynamicDialogRef, DialogService, DynamicDialogConfig, DynamicDialogModule, DynamicDialogStyle } from 'primeng/dynamicdialog';
+import * as i1$4 from '@angular/forms';
+import { Validators, ReactiveFormsModule, FormsModule, FormControl } from '@angular/forms';
+import { AutoComplete } from 'primeng/autocomplete';
+import * as i3$1 from 'primeng/floatlabel';
+import { FloatLabel, FloatLabelModule } from 'primeng/floatlabel';
+import { DatePicker, DatePickerModule } from 'primeng/datepicker';
+import { InputText } from 'primeng/inputtext';
+import { Textarea } from 'primeng/textarea';
+import * as i2$2 from 'primeng/selectbutton';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import * as i2$3 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { Select } from 'primeng/select';
+import * as i1$5 from 'primeng/toggleswitch';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import * as i1$6 from '@ng-bootstrap/ng-bootstrap';
+import { NgbDatepickerI18n, NgbCalendarIslamicUmalqura, NgbDatepickerModule, NgbCalendar, NgbCalendarGregorian } from '@ng-bootstrap/ng-bootstrap';
+import moment from 'moment-hijri';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import '@angular/localize/init';
+import * as i2$4 from 'primeng/accordion';
+import { AccordionModule } from 'primeng/accordion';
+import { DividerModule } from 'primeng/divider';
+import { Breadcrumb } from 'primeng/breadcrumb';
+import { filter as filter$1, map } from 'rxjs/operators';
+
+class AppButtonComponent extends Button {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AppButtonComponent, isStandalone: true, selector: "app-button", providers: [ButtonStyle], usesInheritance: true, ngImport: i0, template: "<p-button (onFocus)=\"onFocus.emit()\" (onBlur)=\"onBlur.emit()\" (onClick)=\"onClick.emit()\" [size]=\"size\"\r\n  [loadingIcon]=\"loadingIcon\" [disabled]=\"disabled\" [iconPos]=\"iconPos\" [icon]=\"icon\" [label]=\"label\"\r\n  [rounded]=\"rounded\" [severity]=\"severity\" [styleClass]=\"styleClass\" [text]=\"text\" [variant]=\"variant\"\r\n  [loading]=\"loading\" [autofocus]=\"autofocus\" [link]=\"link\" [plain]=\"plain\" [raised]=\"raised\"\r\n  [loadingIcon]=\"loadingIcon\" [style]=\"style\" [outlined]=\"outlined\">\r\n  <ng-content></ng-content>\r\n</p-button>", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppButtonComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [ButtonModule], selector: 'app-button', standalone: true, encapsulation: ViewEncapsulation.None, providers: [ButtonStyle], template: "<p-button (onFocus)=\"onFocus.emit()\" (onBlur)=\"onBlur.emit()\" (onClick)=\"onClick.emit()\" [size]=\"size\"\r\n  [loadingIcon]=\"loadingIcon\" [disabled]=\"disabled\" [iconPos]=\"iconPos\" [icon]=\"icon\" [label]=\"label\"\r\n  [rounded]=\"rounded\" [severity]=\"severity\" [styleClass]=\"styleClass\" [text]=\"text\" [variant]=\"variant\"\r\n  [loading]=\"loading\" [autofocus]=\"autofocus\" [link]=\"link\" [plain]=\"plain\" [raised]=\"raised\"\r\n  [loadingIcon]=\"loadingIcon\" [style]=\"style\" [outlined]=\"outlined\">\r\n  <ng-content></ng-content>\r\n</p-button>" }]
+        }] });
+
+class IcoMoonIconComponent {
+    iconName;
+    iconClass;
+    iconPathCount = 0;
+    get getPathCount() {
+        return Array.from({ length: this.iconPathCount }, (_, i) => i + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IcoMoonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: IcoMoonIconComponent, isStandalone: true, selector: "app-ico-moon-card", inputs: { iconName: "iconName", iconClass: "iconClass", iconPathCount: "iconPathCount" }, ngImport: i0, template: `
+    <i [class]="iconName + ' ' + iconClass">
+      @for (path of getPathCount; track $index) {
+        <i [class]="iconName + ' path'+path"></i>
+      }
+    </i>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IcoMoonIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-ico-moon-card',
+                    standalone: true,
+                    template: `
+    <i [class]="iconName + ' ' + iconClass">
+      @for (path of getPathCount; track $index) {
+        <i [class]="iconName + ' path'+path"></i>
+      }
+    </i>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { iconName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], iconClass: [{
+                type: Input
+            }], iconPathCount: [{
+                type: Input
+            }] } });
+
+class AppTabsComponent {
+    tabs;
+    tabsStyle = 'basic';
+    responsive = false;
+    twoDigitCount;
+    selectedTabIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedTabIndex" }] : []));
+    activeTabIndex = 0;
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    ngOnInit() {
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+            this.updateActiveTab();
+        });
+        // to be refactor
+        this.updateActiveTab();
+    }
+    // Updates the active tab index based on the current route
+    updateActiveTab() {
+        if (!this.tabs.isRouted)
+            return;
+        const currentUrl = this.router.url;
+        const matchingTabIndex = this.tabs.items.findIndex((tab) => currentUrl.includes(tab.link));
+        this.activeTabIndex = matchingTabIndex !== -1 ? matchingTabIndex : 0;
+    }
+    onTabChange(index) {
+        this.selectedTabIndex.set(index);
+        if (!this.tabs.isRouted)
+            return;
+        const selectedTab = this.tabs.items[index];
+        if (selectedTab && !selectedTab.disabled) {
+            this.router.navigate([selectedTab.link], { relativeTo: this.route });
+        }
+    }
+    getTabCount(count) {
+        if (!count)
+            return '0';
+        return this.twoDigitCount && count > 99 ? '99+' : count.toString();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AppTabsComponent, isStandalone: true, selector: "app-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: false, isRequired: false, transformFunction: null }, tabsStyle: { classPropertyName: "tabsStyle", publicName: "tabsStyle", isSignal: false, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: false, isRequired: false, transformFunction: null }, twoDigitCount: { classPropertyName: "twoDigitCount", publicName: "twoDigitCount", isSignal: false, isRequired: false, transformFunction: null }, selectedTabIndex: { classPropertyName: "selectedTabIndex", publicName: "selectedTabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabIndex: "selectedTabIndexChange" }, ngImport: i0, template: "@if (tabs && tabs.items.length) {\r\n<div [class]=\"tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'\">\r\n  <p-tabs [value]=\"selectedTabIndex() || activeTabIndex\" scrollable>\r\n    <p-tablist>\r\n\r\n      @for (tab of tabs.items; let i = $index; track i) {\r\n      <p-tab [value]=\"i\" [routerLink]=\"tabs.isRouted ? $any(tab).link : null\" [disabled]=\"tab.disabled\"\r\n        (click)=\"onTabChange(i)\">\r\n        @if (tab.iconName) {\r\n        <app-ico-moon-card [iconClass]=\"'text-[17px]'\" [iconName]=\"tab.iconName\"\r\n          [iconPathCount]=\"tab.iconPathCount || 0\" />\r\n        }\r\n        <span>{{ tab.title | translate }}\r\n          @if (tab.count || tab.count === 0) {\r\n          <p-badge [value]=\"getTabCount(tab.count)\" severity=\"secondary\" />\r\n          }\r\n        </span>\r\n      </p-tab>\r\n      }\r\n\r\n    </p-tablist>\r\n\r\n    <p-tabpanels>\r\n      @if (tabs.isRouted) {\r\n      <router-outlet></router-outlet>\r\n      } @else {\r\n      @for (tab of tabs.items; let i = $index; track i) {\r\n      <p-tabpanel [value]=\"i\">\r\n        <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n      </p-tabpanel>\r\n      }\r\n      }\r\n\r\n    </p-tabpanels>\r\n  </p-tabs>\r\n</div>\r\n}", styles: [".tabs-container.full-width .p-tabs .p-tablist-tab-list .p-tab{@apply flex-grow flex justify-center max-w-[50%];}.tabs-container .p-tabs .p-tablist-tab-list{@apply relative;}.tabs-container .p-tabs .p-tablist-tab-list:after{@apply content-[\"\"] w-full h-[3px] bg-purple-800/5 absolute bottom-0 right-0 z-[1];}.tabs-container .p-tabs .p-tablist-tab-list .p-tab{@apply text-sm text-gray-400 font-normal text-[16px] border-b-[4px] border-transparent z-[2];}.tabs-container .p-tabs .p-tablist-tab-list .p-tab:not(.p-tab-active) app-ico-moon-card{@apply grayscale;}.tabs-container .p-tabs .p-tablist-active-bar{@apply hidden;}.tabs-container .p-tabs .p-tabpanels.p-component{@apply mt-5 rounded-lg;}.tabs-container.basic .p-tabs .p-tablist-tab-list{@apply bg-transparent;}.tabs-container.basic .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply text-primary border-primary;}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab{@apply rounded-t-lg text-[14px];}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply bg-purple-800/5 font-semibold text-primary border-primary;}.tabs-container.primary .p-tabs .p-tablist-tab-list:after{@apply bg-purple-800/5;}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab{@apply rounded-t-lg text-[14px];}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply bg-primary font-semibold text-white border-secondary;}[dir=rtl] .p-tabs .p-tablist .p-iconwrapper{@apply rotate-180deg;}[dir=rtl] .p-tabs .p-tablist .p-tablist-next-button{@apply right-auto left-0;}[dir=rtl] .p-tabs .p-tablist .p-tablist-prev-button{@apply right-0 left-auto;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabList, selector: "p-tablist" }, { kind: "component", type: i2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: IcoMoonIconComponent, selector: "app-ico-moon-card", inputs: ["iconName", "iconClass", "iconPathCount"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-tabs', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        TabsModule,
+                        RouterLink,
+                        RouterOutlet,
+                        IcoMoonIconComponent,
+                        TranslateModule,
+                        BadgeModule,
+                    ], template: "@if (tabs && tabs.items.length) {\r\n<div [class]=\"tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'\">\r\n  <p-tabs [value]=\"selectedTabIndex() || activeTabIndex\" scrollable>\r\n    <p-tablist>\r\n\r\n      @for (tab of tabs.items; let i = $index; track i) {\r\n      <p-tab [value]=\"i\" [routerLink]=\"tabs.isRouted ? $any(tab).link : null\" [disabled]=\"tab.disabled\"\r\n        (click)=\"onTabChange(i)\">\r\n        @if (tab.iconName) {\r\n        <app-ico-moon-card [iconClass]=\"'text-[17px]'\" [iconName]=\"tab.iconName\"\r\n          [iconPathCount]=\"tab.iconPathCount || 0\" />\r\n        }\r\n        <span>{{ tab.title | translate }}\r\n          @if (tab.count || tab.count === 0) {\r\n          <p-badge [value]=\"getTabCount(tab.count)\" severity=\"secondary\" />\r\n          }\r\n        </span>\r\n      </p-tab>\r\n      }\r\n\r\n    </p-tablist>\r\n\r\n    <p-tabpanels>\r\n      @if (tabs.isRouted) {\r\n      <router-outlet></router-outlet>\r\n      } @else {\r\n      @for (tab of tabs.items; let i = $index; track i) {\r\n      <p-tabpanel [value]=\"i\">\r\n        <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n      </p-tabpanel>\r\n      }\r\n      }\r\n\r\n    </p-tabpanels>\r\n  </p-tabs>\r\n</div>\r\n}", styles: [".tabs-container.full-width .p-tabs .p-tablist-tab-list .p-tab{@apply flex-grow flex justify-center max-w-[50%];}.tabs-container .p-tabs .p-tablist-tab-list{@apply relative;}.tabs-container .p-tabs .p-tablist-tab-list:after{@apply content-[\"\"] w-full h-[3px] bg-purple-800/5 absolute bottom-0 right-0 z-[1];}.tabs-container .p-tabs .p-tablist-tab-list .p-tab{@apply text-sm text-gray-400 font-normal text-[16px] border-b-[4px] border-transparent z-[2];}.tabs-container .p-tabs .p-tablist-tab-list .p-tab:not(.p-tab-active) app-ico-moon-card{@apply grayscale;}.tabs-container .p-tabs .p-tablist-active-bar{@apply hidden;}.tabs-container .p-tabs .p-tabpanels.p-component{@apply mt-5 rounded-lg;}.tabs-container.basic .p-tabs .p-tablist-tab-list{@apply bg-transparent;}.tabs-container.basic .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply text-primary border-primary;}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab{@apply rounded-t-lg text-[14px];}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply bg-purple-800/5 font-semibold text-primary border-primary;}.tabs-container.primary .p-tabs .p-tablist-tab-list:after{@apply bg-purple-800/5;}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab{@apply rounded-t-lg text-[14px];}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply bg-primary font-semibold text-white border-secondary;}[dir=rtl] .p-tabs .p-tablist .p-iconwrapper{@apply rotate-180deg;}[dir=rtl] .p-tabs .p-tablist .p-tablist-next-button{@apply right-auto left-0;}[dir=rtl] .p-tabs .p-tablist .p-tablist-prev-button{@apply right-0 left-auto;}\n"] }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], tabsStyle: [{
+                type: Input
+            }], responsive: [{
+                type: Input
+            }], twoDigitCount: [{
+                type: Input
+            }], selectedTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTabIndex", required: false }] }, { type: i0.Output, args: ["selectedTabIndexChange"] }] } });
+
+class MenuPopupTextColorPipe {
+    transform(color) {
+        switch (color) {
+            case 'white': return 'text-white';
+            case 'purple': return 'text-purple-500';
+            case 'green': return 'text-green-500';
+            default: return 'text-white';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuPopupTextColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MenuPopupTextColorPipe, isStandalone: true, name: "popupTextColorClass" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuPopupTextColorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'popupTextColorClass',
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
+class AppDropdownMenuComponent {
+    buttonTitle;
+    menuItems = [];
+    popupMenuStyle = "purple";
+    buttonIcon = "font-icon-plus";
+    buttonClass;
+    buttonStyle;
+    buttonIconPosition = "left";
+    router = inject(Router);
+    showMenu;
+    ngOnInit() {
+        this.showMenu = this.menuItems.some((item) => {
+            return item.show;
+        });
+    }
+    onMenuItemClick(item) {
+        if (item.callback) {
+            item.callback();
+        }
+        else if (item.routerLink) {
+            this.router.navigate(Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink], { queryParams: item.queryParams || {} });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AppDropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { buttonTitle: "buttonTitle", menuItems: "menuItems", popupMenuStyle: "popupMenuStyle", buttonIcon: "buttonIcon", buttonClass: "buttonClass", buttonStyle: "buttonStyle", buttonIconPosition: "buttonIconPosition" }, ngImport: i0, template: "@if (showMenu) {\r\n<app-button (click)=\"op.toggle($event)\" [class]=\"buttonClass\" [iconPos]=\"buttonIconPosition\" [icon]=\"buttonIcon\"\r\n  [title]=\"buttonTitle\" [styleClass]=\"buttonStyle\" />\r\n}\r\n<p-popover #op [styleClass]=\"popupMenuStyle === 'white' ? 'white-menu' : 'purple-menu'\">\r\n  <div class=\"flex flex-col gap-4 text-sm md:text-xs\">\r\n    <ul>\r\n      @for (item of menuItems; track $index) {\r\n      @if (item.show) {\r\n      <li [ngClass]=\"{'flex-row-reverse': item.iconPosition === 'right'}\"\r\n        [class]=\"'flex justify-between min-w-[130px] gap-3 items-center cursor-pointer text-sm ' + (item.textColor | popupTextColorClass)\"\r\n        (click)=\"onMenuItemClick(item)\">\r\n        {{ item.title | translate }}\r\n        @if (item.icon) {\r\n        <i [class]=\"item.icon\"></i>\r\n        }\r\n      </li>\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</p-popover>", styles: [".p-popover.p-component{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover.p-component:is(.purple-menu){@apply bg-primary text-white text-sm mt-2;}.p-popover.p-component:is(.purple-menu) li:not(:last-child){@apply border-b-2 border-purple-700;}.p-popover.p-component:is(.white-menu) li:not(:last-child){@apply border-b;}.p-popover.p-component:before,.p-popover.p-component:after{display:none}.p-popover.p-component .p-popover-content{width:auto;min-width:unset}.p-popover.p-component .p-popover-content ul li{@apply py-3;}.p-popover.p-component .p-popover-content ul li:hover{opacity:.7}.p-popover.p-component .p-popover-content ul li:first-child{@apply pt-0;}.p-popover.p-component .p-popover-content ul li:last-child{@apply pb-0;}\n"], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: MenuPopupTextColorPipe, name: "popupTextColorClass" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppDropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-dropdown-menu", standalone: true, imports: [AppButtonComponent, Popover, TranslateModule, NgClass, MenuPopupTextColorPipe], encapsulation: ViewEncapsulation.None, template: "@if (showMenu) {\r\n<app-button (click)=\"op.toggle($event)\" [class]=\"buttonClass\" [iconPos]=\"buttonIconPosition\" [icon]=\"buttonIcon\"\r\n  [title]=\"buttonTitle\" [styleClass]=\"buttonStyle\" />\r\n}\r\n<p-popover #op [styleClass]=\"popupMenuStyle === 'white' ? 'white-menu' : 'purple-menu'\">\r\n  <div class=\"flex flex-col gap-4 text-sm md:text-xs\">\r\n    <ul>\r\n      @for (item of menuItems; track $index) {\r\n      @if (item.show) {\r\n      <li [ngClass]=\"{'flex-row-reverse': item.iconPosition === 'right'}\"\r\n        [class]=\"'flex justify-between min-w-[130px] gap-3 items-center cursor-pointer text-sm ' + (item.textColor | popupTextColorClass)\"\r\n        (click)=\"onMenuItemClick(item)\">\r\n        {{ item.title | translate }}\r\n        @if (item.icon) {\r\n        <i [class]=\"item.icon\"></i>\r\n        }\r\n      </li>\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</p-popover>", styles: [".p-popover.p-component{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover.p-component:is(.purple-menu){@apply bg-primary text-white text-sm mt-2;}.p-popover.p-component:is(.purple-menu) li:not(:last-child){@apply border-b-2 border-purple-700;}.p-popover.p-component:is(.white-menu) li:not(:last-child){@apply border-b;}.p-popover.p-component:before,.p-popover.p-component:after{display:none}.p-popover.p-component .p-popover-content{width:auto;min-width:unset}.p-popover.p-component .p-popover-content ul li{@apply py-3;}.p-popover.p-component .p-popover-content ul li:hover{opacity:.7}.p-popover.p-component .p-popover-content ul li:first-child{@apply pt-0;}.p-popover.p-component .p-popover-content ul li:last-child{@apply pb-0;}\n"] }]
+        }], propDecorators: { buttonTitle: [{
+                type: Input,
+                args: [{ required: true }]
+            }], menuItems: [{
+                type: Input,
+                args: [{ required: true }]
+            }], popupMenuStyle: [{
+                type: Input
+            }], buttonIcon: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], buttonStyle: [{
+                type: Input
+            }], buttonIconPosition: [{
+                type: Input
+            }] } });
+
+class SideBarComponent {
+    show = false;
+    title;
+    closable = true;
+    dismissible = false;
+    closeOnEscape = false;
+    sidebarSize = "sm";
+    styleClass = "";
+    hide = new EventEmitter();
+    onShow = new EventEmitter();
+    contentTemplate;
+    footerTemplate;
+    position = 'left';
+    hideSidebar() {
+        this.show = false;
+        this.hide.emit(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SideBarComponent, isStandalone: true, selector: "app-side-bar", inputs: { show: "show", title: "title", closable: "closable", dismissible: "dismissible", closeOnEscape: "closeOnEscape", sidebarSize: "sidebarSize", styleClass: "styleClass", contentTemplate: "contentTemplate", footerTemplate: "footerTemplate", position: "position" }, outputs: { hide: "hide", onShow: "onShow" }, ngImport: i0, template: "<!-- TODO refactor position sidebar based on html dir-->\r\n<p-drawer\r\n  (onHide)=\"hideSidebar()\"\r\n  (onShow)=\"onShow.emit($event)\"\r\n  [(visible)]=\"show\"\r\n  [closable]=\"closable\"\r\n  [closeOnEscape]=\"closeOnEscape\"\r\n  [dismissible]=\"dismissible\"\r\n  [ngClass]=\"{ show: show }\"\r\n  [position]=\"'left'\"\r\n  appendTo=\"body\"\r\n  styleClass=\"p-drawer-{{ sidebarSize }} custom-content bg-white {{ styleClass }}\">\r\n  <ng-template pTemplate=\"header\">\r\n    <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n  </ng-template>\r\n  @if (contentTemplate) {\r\n    <ng-template pTemplate=\"content\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"footer\">\r\n      <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500}.p-drawer-footer{--p-drawer-footer-padding: .75rem var(--p-overlay-modal-padding)}.p-drawer-content{padding-top:var(--p-overlay-modal-padding)!important}\n"], dependencies: [{ kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-side-bar", standalone: true, imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet, TooltipModule], encapsulation: ViewEncapsulation.None, template: "<!-- TODO refactor position sidebar based on html dir-->\r\n<p-drawer\r\n  (onHide)=\"hideSidebar()\"\r\n  (onShow)=\"onShow.emit($event)\"\r\n  [(visible)]=\"show\"\r\n  [closable]=\"closable\"\r\n  [closeOnEscape]=\"closeOnEscape\"\r\n  [dismissible]=\"dismissible\"\r\n  [ngClass]=\"{ show: show }\"\r\n  [position]=\"'left'\"\r\n  appendTo=\"body\"\r\n  styleClass=\"p-drawer-{{ sidebarSize }} custom-content bg-white {{ styleClass }}\">\r\n  <ng-template pTemplate=\"header\">\r\n    <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n  </ng-template>\r\n  @if (contentTemplate) {\r\n    <ng-template pTemplate=\"content\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"footer\">\r\n      <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500}.p-drawer-footer{--p-drawer-footer-padding: .75rem var(--p-overlay-modal-padding)}.p-drawer-content{padding-top:var(--p-overlay-modal-padding)!important}\n"] }]
+        }], propDecorators: { show: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
+            }], closeOnEscape: [{
+                type: Input
+            }], sidebarSize: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], hide: [{
+                type: Output
+            }], onShow: [{
+                type: Output
+            }], contentTemplate: [{
+                type: Input
+            }], footerTemplate: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }] } });
+
+class UserInfoComponent {
+    profileImage;
+    name;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: UserInfoComponent, isStandalone: true, selector: "user-info", inputs: { profileImage: "profileImage", name: "name" }, ngImport: i0, template: "<div class=\"flex items-center gap-2\">\r\n  <img\r\n    [alt]=\"name\"\r\n    [src]=\"profileImage\"\r\n    class=\"rounded-full object-cover w-[24px] h-[24px]\"\r\n    height=\"24\"\r\n    width=\"24\"\r\n  />\r\n  <p class=\"text-[14px]\">{{ name }}</p>\r\n</div>\r\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UserInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "user-info", standalone: true, template: "<div class=\"flex items-center gap-2\">\r\n  <img\r\n    [alt]=\"name\"\r\n    [src]=\"profileImage\"\r\n    class=\"rounded-full object-cover w-[24px] h-[24px]\"\r\n    height=\"24\"\r\n    width=\"24\"\r\n  />\r\n  <p class=\"text-[14px]\">{{ name }}</p>\r\n</div>\r\n" }]
+        }], propDecorators: { profileImage: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+class FormUtils {
+    static getFormControl(controlName, form) {
+        if (!form)
+            throw new Error(`Form is not initialized.`);
+        const formControl = form.get(controlName);
+        if (!formControl)
+            throw new Error(`There's no form control with given name. '${controlName}'`);
+        return formControl;
+    }
+}
+
+var BasicErrorKeysEnum;
+(function (BasicErrorKeysEnum) {
+    BasicErrorKeysEnum["required"] = "REQUIRED";
+    BasicErrorKeysEnum["email"] = "EMAIL";
+    BasicErrorKeysEnum["pattern"] = "PATTERN";
+    BasicErrorKeysEnum["invalidArFormat"] = "INVALID_AR_FORMAT";
+    BasicErrorKeysEnum["invalidLink"] = "INVALID_LINK";
+    BasicErrorKeysEnum["endDateBeforeStartDate"] = "END_DATE_BEFORE_START_DATE";
+    BasicErrorKeysEnum["startDateEqualsEndDate"] = "START_DATE_EQUALS_END_DATE";
+    BasicErrorKeysEnum["endTimeBeforeStartTime"] = "END_TIME_BEFORE_START_TIME";
+    BasicErrorKeysEnum["startTimeEqualsEndTime"] = "START_TIME_EQUALS_END_TIME";
+    BasicErrorKeysEnum["integer"] = "INTEGER";
+    BasicErrorKeysEnum["positiveNumber"] = "POSITIVE_NUMBER";
+    BasicErrorKeysEnum["fileSelected"] = "FILE_SELECTED";
+    BasicErrorKeysEnum["default"] = "DEFAULT";
+})(BasicErrorKeysEnum || (BasicErrorKeysEnum = {}));
+var ErrorsWithValuesKeysEnum;
+(function (ErrorsWithValuesKeysEnum) {
+    ErrorsWithValuesKeysEnum["minlength"] = "MIN_LENGTH";
+    ErrorsWithValuesKeysEnum["maxlength"] = "MAX_LENGTH";
+    ErrorsWithValuesKeysEnum["min"] = "MIN";
+    ErrorsWithValuesKeysEnum["max"] = "MAX";
+    ErrorsWithValuesKeysEnum["maxSize"] = "MAX_SIZE";
+    ErrorsWithValuesKeysEnum["maxFiles"] = "MAX_FILES";
+    ErrorsWithValuesKeysEnum["allowedTypes"] = "ALLOWED_TYPES";
+})(ErrorsWithValuesKeysEnum || (ErrorsWithValuesKeysEnum = {}));
+
+class FormValidationService {
+    translate = inject(TranslateService);
+    getTranslation(key, interpolateParams) {
+        return this.translate.instant(`VALIDATION.${key}`, interpolateParams);
+    }
+    getErrorMessage(errorKey, errorValue) {
+        if (this.isBasicErrorKey(errorKey)) {
+            return this.getTranslation(BasicErrorKeysEnum[errorKey]);
+        }
+        if (this.isErrorWithValueKey(errorKey)) {
+            return this.getErrorWithValueMessage(errorKey, errorValue);
+        }
+        return this.getTranslation(BasicErrorKeysEnum.default);
+    }
+    // Basic error keys are the keys that don't have any values to interpolate. like required, email, etc.
+    isBasicErrorKey(key) {
+        return Object.keys(BasicErrorKeysEnum).includes(key);
+    }
+    // Error keys with values are the keys that have values to interpolate. like minlength, maxlength, etc.
+    isErrorWithValueKey(key) {
+        return Object.keys(ErrorsWithValuesKeysEnum).includes(key);
+    }
+    getErrorWithValueMessage(errorKey, errorValue) {
+        const messages = {
+            minlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.minlength, {
+                requiredLength: val?.requiredLength,
+                actualLength: val?.actualLength,
+            }),
+            maxlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxlength, {
+                requiredLength: val?.requiredLength,
+                actualLength: val?.actualLength,
+            }),
+            min: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.min, { min: val?.min }),
+            max: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.max, { max: val?.max }),
+            maxSize: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxSize, { size: val?.requiredLength }),
+            maxFiles: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxFiles, { size: val?.requiredLength }),
+            allowedTypes: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.allowedTypes, { types: val?.join(', ') }),
+        };
+        return messages[errorKey](errorValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ValidationErrorsPipe {
+    formValidationService = inject(FormValidationService);
+    // allowed keys here to handle errors in case of cross-validators like startDate and endDate validators,
+    // we pass this custom key to handle the error messages only for the allowed keys
+    transform(errors, allowedKeys) {
+        if (!errors)
+            return [];
+        return Object.keys(errors)
+            .filter((errorKey) => !allowedKeys || allowedKeys.includes(errorKey)) // Filter errors if allowedKeys are provided
+            .map((errorKey) => {
+            return this.formValidationService.getErrorMessage(errorKey, errors[errorKey]);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, isStandalone: true, name: "validationErrors" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "validationErrors",
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
+class BaseInputComponent {
+    control;
+    name = '';
+    label;
+    placeholder = '';
+    inputId;
+    readonly = false;
+    disabled = false;
+    hint;
+    destroy$ = new Subject();
+    get required() {
+        return this.control.hasValidator(Validators.required);
+    }
+    get isInvalid() {
+        return this.control.invalid && this.control.touched;
+    }
+    ngOnInit() {
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { control: "control", name: "name", label: "label", placeholder: "placeholder", inputId: "inputId", readonly: "readonly", disabled: "disabled", hint: "hint" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], propDecorators: { control: [{
+                type: Input,
+                args: [{ required: true }]
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }] } });
+
+class AutoCompleteComponent extends BaseInputComponent {
+    selectedItemTemplate = null;
+    // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+    onSearch = new EventEmitter();
+    selectOption = new EventEmitter();
+    items = [];
+    minLengthToSearch = 3;
+    delay = 300; // default value
+    basicInput;
+    typeAhead = false;
+    variant = 'over';
+    constructor() {
+        super();
+    }
+    search(event) {
+        this.onSearch.emit(event.query);
+    }
+    onSelect(event) {
+        this.selectOption.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AutoCompleteComponent, isStandalone: true, selector: "stc-auto-complete", inputs: { selectedItemTemplate: "selectedItemTemplate", items: "items", minLengthToSearch: "minLengthToSearch", delay: "delay", basicInput: "basicInput", typeAhead: "typeAhead", variant: "variant" }, outputs: { onSearch: "onSearch", selectOption: "selectOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  @if (!required) {\r\n  <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n  }\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <p-auto-complete (completeMethod)=\"search($event)\" (onSelect)=\"onSelect($event)\" [delay]=\"delay\"\r\n      [disabled]=\"disabled\" [formControl]=\"control\" [id]=\"inputId\" fluid [typeahead]=\"typeAhead\"\r\n      [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n      [minLength]=\"minLengthToSearch\" [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n      [placeholder]=\"placeholder\" [styleClass]=\"'w-full'\" multiple [suggestions]=\"items\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        @if (selectedItemTemplate) {\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n        }\r\n      </ng-template>\r\n    </p-auto-complete>\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"isInvalid\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatlabel>\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  }\r\n  @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br>\r\n    }\r\n  </small>\r\n  }\r\n\r\n</div>", styles: [".text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stc-auto-complete', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        AutoComplete,
+                        PrimeTemplate,
+                        NgIf,
+                        NgTemplateOutlet,
+                        NgClass,
+                        JsonPipe,
+                        ValidationErrorsPipe,
+                        TranslatePipe,
+                        FloatLabel,
+                    ], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  @if (!required) {\r\n  <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n  }\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <p-auto-complete (completeMethod)=\"search($event)\" (onSelect)=\"onSelect($event)\" [delay]=\"delay\"\r\n      [disabled]=\"disabled\" [formControl]=\"control\" [id]=\"inputId\" fluid [typeahead]=\"typeAhead\"\r\n      [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n      [minLength]=\"minLengthToSearch\" [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n      [placeholder]=\"placeholder\" [styleClass]=\"'w-full'\" multiple [suggestions]=\"items\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        @if (selectedItemTemplate) {\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n        }\r\n      </ng-template>\r\n    </p-auto-complete>\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"isInvalid\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatlabel>\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  }\r\n  @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br>\r\n    }\r\n  </small>\r\n  }\r\n\r\n</div>", styles: [".text-required{color:red}.p-error{color:#dc2626}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
+                type: Input
+            }], onSearch: [{
+                type: Output
+            }], selectOption: [{
+                type: Output
+            }], items: [{
+                type: Input
+            }], minLengthToSearch: [{
+                type: Input
+            }], delay: [{
+                type: Input
+            }], basicInput: [{
+                type: Input
+            }], typeAhead: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }] } });
+
+class DatePickerComponent extends BaseInputComponent {
+    showIcon = false;
+    showClear = false;
+    basicInput;
+    isTimeOnly = false;
+    minDate;
+    maxDate;
+    hourFormat = '12';
+    nowTime = new Date();
+    selectionMode = 'single';
+    onAfterClearDate = new EventEmitter();
+    variant = 'over';
+    constructor() {
+        super();
+    }
+    selectCurrentTime(e) {
+        this.control.setValue(this.nowTime);
+    }
+    clearButtonClick(e) {
+        this.control.setValue(null);
+    }
+    afterClearDate() {
+        this.control.reset();
+        this.onAfterClearDate.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", hourFormat: "hourFormat", selectionMode: "selectionMode", variant: "variant" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"control\" [iconDisplay]=\"'input'\"\r\n      [showClear]=\"showClear\" (onClear)=\"afterClearDate()\" [inputId]=\"inputId\"\r\n      [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n      [class]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n      [maxDate]=\"maxDate\" panelStyleClass=\"d-ltr\">\r\n      @if (isTimeOnly) {\r\n      <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n        <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\">\r\n        <div class=\"p-datepicker-buttonbar\">\r\n          <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n          </button>\r\n          <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n        </div>\r\n      </ng-template>\r\n      }\r\n    </p-datepicker>\r\n\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatlabel>\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  }\r\n  @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br>\r\n    }\r\n  </small>\r\n  }\r\n</div>", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stc-date-picker', standalone: true, imports: [
+                        FormsModule,
+                        DatePicker,
+                        ReactiveFormsModule,
+                        NgClass,
+                        DatePickerModule,
+                        ValidationErrorsPipe,
+                        FloatLabelModule,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"control\" [iconDisplay]=\"'input'\"\r\n      [showClear]=\"showClear\" (onClear)=\"afterClearDate()\" [inputId]=\"inputId\"\r\n      [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n      [class]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n      [maxDate]=\"maxDate\" panelStyleClass=\"d-ltr\">\r\n      @if (isTimeOnly) {\r\n      <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n        <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\">\r\n        <div class=\"p-datepicker-buttonbar\">\r\n          <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n          </button>\r\n          <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n        </div>\r\n      </ng-template>\r\n      }\r\n    </p-datepicker>\r\n\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatlabel>\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  }\r\n  @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br>\r\n    }\r\n  </small>\r\n  }\r\n</div>", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showIcon: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], basicInput: [{
+                type: Input
+            }], isTimeOnly: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], hourFormat: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], onAfterClearDate: [{
+                type: Output
+            }], variant: [{
+                type: Input
+            }] } });
+
+class InputComponent extends BaseInputComponent {
+    type = 'text';
+    contentType = 'text';
+    size = "small";
+    prefix;
+    rows = 2;
+    cols = 20;
+    autoResize = true;
+    basicInput;
+    noStyle;
+    hideOptionalLabel;
+    inputDirection = 'inherit';
+    variant = 'over';
+    defaultColor = '#DFE0E6';
+    constructor() {
+        super();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  @if (!required && !hideOptionalLabel) {\r\n  <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n  }\r\n\r\n  <!-- input text align will be handled according to lang when implemented -->\r\n\r\n  @switch (type) {\r\n  @case ('textarea') {\r\n  @if (label) {\r\n  <label [for]=\"inputId\">\r\n    {{ label }}\r\n    @if (required) {\r\n    <span [class.text-required]=\"required\">*</span>\r\n    }\r\n  </label>\r\n\r\n  <ng-content></ng-content>\r\n  }\r\n  <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n    [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n  </textarea>\r\n  }\r\n  @default {\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n    <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n      class=\"w-full\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatlabel>\r\n  @if (prefix) {\r\n  <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n    {{ prefix }}\r\n  </span>\r\n  }\r\n\r\n\r\n  }\r\n  }\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  }\r\n  @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br>\r\n    }\r\n  </small>\r\n  }\r\n</div>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}textarea,.p-select,input{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover,input:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus,input:not(.p-disabled).p-focus,input:not(.p-disabled).p-focus:hover,input:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stc-input', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        InputText,
+                        Textarea,
+                        ValidationErrorsPipe,
+                        NgClass,
+                        NgStyle,
+                        TranslatePipe,
+                        FloatLabelModule,
+                    ], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  @if (!required && !hideOptionalLabel) {\r\n  <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n  }\r\n\r\n  <!-- input text align will be handled according to lang when implemented -->\r\n\r\n  @switch (type) {\r\n  @case ('textarea') {\r\n  @if (label) {\r\n  <label [for]=\"inputId\">\r\n    {{ label }}\r\n    @if (required) {\r\n    <span [class.text-required]=\"required\">*</span>\r\n    }\r\n  </label>\r\n\r\n  <ng-content></ng-content>\r\n  }\r\n  <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n    [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n  </textarea>\r\n  }\r\n  @default {\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n    <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n      class=\"w-full\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatlabel>\r\n  @if (prefix) {\r\n  <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n    {{ prefix }}\r\n  </span>\r\n  }\r\n\r\n\r\n  }\r\n  }\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  }\r\n  @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br>\r\n    }\r\n  </small>\r\n  }\r\n</div>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}textarea,.p-select,input{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover,input:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus,input:not(.p-disabled).p-focus,input:not(.p-disabled).p-focus:hover,input:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], contentType: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], autoResize: [{
+                type: Input
+            }], basicInput: [{
+                type: Input
+            }], noStyle: [{
+                type: Input
+            }], hideOptionalLabel: [{
+                type: Input
+            }], inputDirection: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], defaultColor: [{
+                type: Input
+            }] } });
+
+class SelectButtonComponent extends BaseInputComponent {
+    onChange = new EventEmitter();
+    options;
+    title;
+    changeValue(e) {
+        this.onChange.emit(e.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SelectButtonComponent, isStandalone: true, selector: "stc-select-button", inputs: { options: "options", title: "title" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-0 items-end\">\r\n  <div class=\"col-span-12\">\r\n    <div class=\"text-[14px] font-bold mb-1\">{{ title }}</div>\r\n    <div class=\"grid w-100 bg-gray-100 rounded drop-shadow-basic\">\r\n      <p-selectButton [disabled]=\"disabled\"\r\n                      [options]=\"options\"\r\n                      [formControl]=\"control\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                      class=\"rounded\"\r\n                      [styleClass]=\"'full-width'\"\r\n                      (onChange)=\"changeValue($event)\">\r\n        <ng-template let-item class=\"flex w-100\">\r\n          <div class=\"col-span-4\">\r\n            <span>{{ item.value }}</span>\r\n          </div>\r\n        </ng-template>\r\n      </p-selectButton>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "stc-select-button", standalone: true, imports: [ReactiveFormsModule, SelectButtonModule, FormsModule], template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-0 items-end\">\r\n  <div class=\"col-span-12\">\r\n    <div class=\"text-[14px] font-bold mb-1\">{{ title }}</div>\r\n    <div class=\"grid w-100 bg-gray-100 rounded drop-shadow-basic\">\r\n      <p-selectButton [disabled]=\"disabled\"\r\n                      [options]=\"options\"\r\n                      [formControl]=\"control\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                      class=\"rounded\"\r\n                      [styleClass]=\"'full-width'\"\r\n                      (onChange)=\"changeValue($event)\">\r\n        <ng-template let-item class=\"flex w-100\">\r\n          <div class=\"col-span-4\">\r\n            <span>{{ item.value }}</span>\r\n          </div>\r\n        </ng-template>\r\n      </p-selectButton>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { onChange: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class SelectComponent extends BaseInputComponent {
+    selectedItemTemplate = null;
+    optionTemplate = null;
+    options;
+    optionLabel;
+    checkmark = true;
+    showClear = false;
+    editable = false;
+    filter = false;
+    multiple = false;
+    filterBy;
+    size = "small";
+    selectedItemsLabel;
+    basicInput;
+    variant = 'over';
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    change = new EventEmitter();
+    defaultColor = '#DFE0E6';
+    constructor() {
+        super();
+    }
+    onChange(e) {
+        this.change.emit(e);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectComponent, isStandalone: true, selector: "stc-select", inputs: { selectedItemTemplate: "selectedItemTemplate", optionTemplate: "optionTemplate", options: "options", optionLabel: "optionLabel", checkmark: "checkmark", showClear: "showClear", editable: "editable", filter: "filter", multiple: "multiple", filterBy: "filterBy", size: "size", selectedItemsLabel: "selectedItemsLabel", basicInput: "basicInput", variant: "variant", defaultColor: "defaultColor" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  @if(multiple) {\r\n   <p-floatLabel [variant]=\"variant\">\r\n\r\n    <p-multiselect\r\n    [disabled]=\"disabled\"\r\n    [filterBy]=\"filterBy\"\r\n    [filter]=\"filter\"\r\n    [formControl]=\"control\"\r\n    [id]=\"inputId\"\r\n    [name]=\"name\"\r\n    [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [options]=\"options\"\r\n    [placeholder]=\"placeholder\"\r\n    [readonly]=\"readonly\"\r\n    [showClear]=\"showClear\"\r\n    class=\"w-full\"\r\n     [size]=\"size\"\r\n    [selectedItemsLabel]=\"selectedItemsLabel\"\r\n    [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n    (onChange)=\"onChange($event)\"\r\n    [ngClass]=\"{ 'basic-style': basicInput }\"\r\n     >\r\n\r\n\r\n\r\n\r\n\r\n\r\n      @if(optionTemplate){\r\n      <ng-template let-item #item>\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n      </ng-template>\r\n      }\r\n\r\n\r\n      <ng-template #dropdownicon>\r\n        <i class=\"pi pi-map\"></i>\r\n      </ng-template>\r\n\r\n\r\n    </p-multiselect>\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n\r\n  </p-floatLabel>\r\n\r\n  } @else {\r\n      <p-floatLabel [variant]=\"variant\">\r\n    <p-select\r\n      [checkmark]=\"checkmark\"\r\n      [disabled]=\"disabled\"\r\n      [editable]=\"editable\"\r\n      [filterBy]=\"filterBy\"\r\n      [filter]=\"filter\"\r\n      [formControl]=\"control\"\r\n      [id]=\"inputId\"\r\n      [name]=\"name\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n      [optionLabel]=\"optionLabel\"\r\n      [options]=\"options\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [showClear]=\"showClear\"\r\n       [size]=\"size\"\r\n      class=\"w-full\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n      (onChange)=\"onChange($event)\"\r\n      [ngClass]=\"{ 'basic-style': basicInput }\"\r\n    >\r\n\r\n      @if (optionTemplate) {\r\n        <ng-template let-item pTemplate=\"item\">\r\n          <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n        </ng-template>\r\n      }\r\n      @if (selectedItemTemplate) {\r\n        <ng-template let-item pTemplate=\"selectedItem\">\r\n          <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n        </ng-template>\r\n      }\r\n    </p-select>\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatLabel>\r\n  }\r\n\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  } @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br />\r\n    }\r\n  </small>\r\n  }\r\n</div>\r\n", styles: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stc-select', standalone: true, imports: [
+                        FormsModule,
+                        Select,
+                        ReactiveFormsModule,
+                        NgClass,
+                        NgTemplateOutlet,
+                        PrimeTemplate,
+                        ValidationErrorsPipe,
+                        MultiSelectModule,
+                        FloatLabelModule,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  @if(multiple) {\r\n   <p-floatLabel [variant]=\"variant\">\r\n\r\n    <p-multiselect\r\n    [disabled]=\"disabled\"\r\n    [filterBy]=\"filterBy\"\r\n    [filter]=\"filter\"\r\n    [formControl]=\"control\"\r\n    [id]=\"inputId\"\r\n    [name]=\"name\"\r\n    [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [options]=\"options\"\r\n    [placeholder]=\"placeholder\"\r\n    [readonly]=\"readonly\"\r\n    [showClear]=\"showClear\"\r\n    class=\"w-full\"\r\n     [size]=\"size\"\r\n    [selectedItemsLabel]=\"selectedItemsLabel\"\r\n    [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n    (onChange)=\"onChange($event)\"\r\n    [ngClass]=\"{ 'basic-style': basicInput }\"\r\n     >\r\n\r\n\r\n\r\n\r\n\r\n\r\n      @if(optionTemplate){\r\n      <ng-template let-item #item>\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n      </ng-template>\r\n      }\r\n\r\n\r\n      <ng-template #dropdownicon>\r\n        <i class=\"pi pi-map\"></i>\r\n      </ng-template>\r\n\r\n\r\n    </p-multiselect>\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n\r\n  </p-floatLabel>\r\n\r\n  } @else {\r\n      <p-floatLabel [variant]=\"variant\">\r\n    <p-select\r\n      [checkmark]=\"checkmark\"\r\n      [disabled]=\"disabled\"\r\n      [editable]=\"editable\"\r\n      [filterBy]=\"filterBy\"\r\n      [filter]=\"filter\"\r\n      [formControl]=\"control\"\r\n      [id]=\"inputId\"\r\n      [name]=\"name\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n      [optionLabel]=\"optionLabel\"\r\n      [options]=\"options\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [showClear]=\"showClear\"\r\n       [size]=\"size\"\r\n      class=\"w-full\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n      (onChange)=\"onChange($event)\"\r\n      [ngClass]=\"{ 'basic-style': basicInput }\"\r\n    >\r\n\r\n      @if (optionTemplate) {\r\n        <ng-template let-item pTemplate=\"item\">\r\n          <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n        </ng-template>\r\n      }\r\n      @if (selectedItemTemplate) {\r\n        <ng-template let-item pTemplate=\"selectedItem\">\r\n          <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n        </ng-template>\r\n      }\r\n    </p-select>\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatLabel>\r\n  }\r\n\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  } @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br />\r\n    }\r\n  </small>\r\n  }\r\n</div>\r\n", styles: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
+                type: Input
+            }], optionTemplate: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], checkmark: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], filterBy: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], selectedItemsLabel: [{
+                type: Input
+            }], basicInput: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], defaultColor: [{
+                type: Input
+            }] } });
+
+class SwitchComponent {
+    label;
+    key;
+    checked = false;
+    onChange = new EventEmitter();
+    // checked: boolean = false;
+    sendUpdatedValue(value) {
+        if (value) {
+            this.onChange.emit(value.checked);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SwitchComponent, isStandalone: true, selector: "stc-switch", inputs: { label: "label", key: "key", checked: "checked" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"flex items-center mr-2\">\r\n    <p-toggleswitch [(ngModel)]=\"checked\" [inputId]=\"key\" (onChange)=\"sendUpdatedValue($event)\" class=\"flex\">\r\n    </p-toggleswitch>\r\n    <label [for]=\"key\" class=\"text-[12px] mx-2\">{{label}}</label>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i1$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "stc-switch", standalone: true, imports: [CommonModule, ToggleSwitchModule, FormsModule], template: "<div class=\"flex items-center mr-2\">\r\n    <p-toggleswitch [(ngModel)]=\"checked\" [inputId]=\"key\" (onChange)=\"sendUpdatedValue($event)\" class=\"flex\">\r\n    </p-toggleswitch>\r\n    <label [for]=\"key\" class=\"text-[12px] mx-2\">{{label}}</label>\r\n</div>" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], key: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
+var FormFieldTypeEnum;
+(function (FormFieldTypeEnum) {
+    FormFieldTypeEnum["DATE_PICKER"] = "date-picker";
+    FormFieldTypeEnum["SELECT_BUTTON"] = "select-button";
+    FormFieldTypeEnum["INPUT"] = "input";
+    FormFieldTypeEnum["SELECT"] = "select";
+    FormFieldTypeEnum["SWITCH"] = "switch";
+    FormFieldTypeEnum["AUTO_COMPLETE"] = "auto-complete";
+    FormFieldTypeEnum["HIJRI_DATE_PICKER"] = "hijri-date";
+})(FormFieldTypeEnum || (FormFieldTypeEnum = {}));
+
+const WEEKDAYS = {
+    ar: ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'],
+    en: ['M', 'T', 'W', 'T', 'F', 'S', 'S']
+};
+const MONTHS_GREGORIAN = {
+    ar: [
+        'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+        'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    en: [
+        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+    ]
+};
+const MONTHS_HIJRI = {
+    ar: [
+        'محرم',
+        'صفر',
+        'ربيع الأول',
+        'ربيع الآخر',
+        'جمادى الأولى',
+        'جمادى الآخرة',
+        'رجب',
+        'شعبان',
+        'رمضان',
+        'شوال',
+        'ذو القعدة',
+        'ذو الحجة'
+    ],
+    en: [
+        'Muharram',
+        'Safar',
+        'Rabi Al-Awwal',
+        'Rabi Al-Thani',
+        'Jumada Al-Awwal',
+        'Jumada Al-Thani',
+        'Rajab',
+        'Shaaban',
+        'Ramadan',
+        'Shawwal',
+        'Dhul-Qi’dah',
+        'Dhul-Hijjah'
+    ]
+};
+function getGregorianMonthName(lang, month) {
+    return MONTHS_GREGORIAN[lang][month - 1] || '';
+}
+function getHijriMonthName(lang, month) {
+    return MONTHS_HIJRI[lang][month - 1] || '';
+}
+function getWeekdayName(lang, weekday) {
+    return WEEKDAYS[lang][weekday - 1];
+}
+
+class IslamicI18n extends NgbDatepickerI18n {
+    getMonthShortName(month) {
+        return MONTHS_HIJRI.ar[month - 1];
+    }
+    getMonthFullName(month) {
+        return MONTHS_HIJRI.ar[month - 1];
+    }
+    getWeekdayLabel(weekday) {
+        return WEEKDAYS.ar[weekday - 1];
+    }
+    getWeekdayShortName(weekday) {
+        return WEEKDAYS.ar[weekday - 1];
+    }
+    getDayAriaLabel(date) {
+        return `${date.day}-${date.month}-${date.year}`;
+    }
+    getYearNumerals(year) {
+        return String(year);
+    }
+    getWeekNumerals(weekNumber) {
+        return String(weekNumber);
+    }
+    getDayNumerals(date) {
+        return String(date.day);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n, decorators: [{
+            type: Injectable
+        }] });
+class HijriEnglishI18n extends NgbDatepickerI18n {
+    getMonthShortName(month) {
+        return MONTHS_HIJRI.en[month - 1].substring(0, 3);
+    }
+    getMonthFullName(month) {
+        return MONTHS_HIJRI.en[month - 1];
+    }
+    getWeekdayLabel(weekday) {
+        return WEEKDAYS.en[weekday - 1];
+    }
+    getWeekdayShortName(weekday) {
+        return WEEKDAYS.en[weekday - 1];
+    }
+    getDayAriaLabel(date) {
+        return `${date.day}-${date.month}-${date.year}`;
+    }
+    getYearNumerals(year) {
+        return String(year);
+    }
+    getWeekNumerals(weekNumber) {
+        return String(weekNumber);
+    }
+    getDayNumerals(date) {
+        return String(date.day);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n, decorators: [{
+            type: Injectable
+        }] });
+class DynamicHijriI18n extends NgbDatepickerI18n {
+    currentLang = 'ar';
+    arabicI18n = new IslamicI18n();
+    englishI18n = new HijriEnglishI18n();
+    setLanguage(lang) {
+        this.currentLang = lang;
+    }
+    get activeI18n() {
+        return this.currentLang === 'ar' ? this.arabicI18n : this.englishI18n;
+    }
+    getMonthShortName(month) {
+        return this.activeI18n.getMonthShortName(month);
+    }
+    getMonthFullName(month) {
+        return this.activeI18n.getMonthFullName(month);
+    }
+    getWeekdayLabel(weekday) {
+        return this.activeI18n.getWeekdayLabel(weekday);
+    }
+    getWeekdayShortName(weekday) {
+        return this.activeI18n.getWeekdayShortName(weekday);
+    }
+    getDayAriaLabel(date) {
+        return this.activeI18n.getDayAriaLabel(date);
+    }
+    getYearNumerals(year) {
+        return this.activeI18n.getYearNumerals(year);
+    }
+    getWeekNumerals(weekNumber) {
+        return this.activeI18n.getWeekNumerals(weekNumber);
+    }
+    getDayNumerals(date) {
+        return this.activeI18n.getDayNumerals(date);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n, decorators: [{
+            type: Injectable
+        }] });
+
+class HijriCalendarComponent {
+    i18n;
+    cdr;
+    model;
+    dateSelected = new EventEmitter();
+    language = 'en';
+    startDate;
+    calendar = new NgbCalendarIslamicUmalqura();
+    constructor(i18n, cdr) {
+        this.i18n = i18n;
+        this.cdr = cdr;
+    }
+    ngOnChanges(changes) {
+        if (changes['model'] && changes['model'].currentValue) {
+            this.startDate = { ...changes['model'].currentValue };
+            console.log('Hijri navigating to:', this.startDate);
+        }
+        if (changes['language'] && this.i18n instanceof DynamicHijriI18n) {
+            this.i18n.setLanguage(this.language);
+            this.cdr.detectChanges(); // Force re-render to update labels
+        }
+    }
+    onDateChange(date) {
+        this.model = date;
+        this.startDate = { ...date };
+    }
+    isToday(date) {
+        const today = this.calendar.getToday();
+        return date.year === today.year &&
+            date.month === today.month &&
+            date.day === today.day;
+    }
+    isDisabled = () => false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriCalendarComponent, deps: [{ token: i1$6.NgbDatepickerI18n }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriCalendarComponent, isStandalone: true, selector: "app-hijri-calendar", inputs: { model: "model", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
+            { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
+            { provide: NgbDatepickerI18n, useClass: DynamicHijriI18n }
+        ], usesOnChanges: true, ngImport: i0, template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n  [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n  [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n  <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n    [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n    {{ date.day }}\r\n  </span>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-hijri-calendar", standalone: true, imports: [NgbDatepickerModule, FormsModule], providers: [
+                        { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
+                        { provide: NgbDatepickerI18n, useClass: DynamicHijriI18n }
+                    ], template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n  [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n  [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n  <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n    [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n    {{ date.day }}\r\n  </span>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [{ type: i1$6.NgbDatepickerI18n }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
+                type: Input
+            }], dateSelected: [{
+                type: Output
+            }], language: [{
+                type: Input
+            }] } });
+
+class GregorianArabicI18n extends NgbDatepickerI18n {
+    getMonthShortName(month) {
+        return MONTHS_GREGORIAN.ar[month - 1];
+    }
+    getMonthFullName(month) {
+        return MONTHS_GREGORIAN.ar[month - 1];
+    }
+    getWeekdayLabel(weekday) {
+        return WEEKDAYS.ar[weekday - 1];
+    }
+    getWeekdayShortName(weekday) {
+        return WEEKDAYS.ar[weekday - 1];
+    }
+    getDayAriaLabel(date) {
+        return `${date.day}-${date.month}-${date.year}`;
+    }
+    getYearNumerals(year) {
+        return String(year);
+    }
+    getWeekNumerals(weekNumber) {
+        return String(weekNumber);
+    }
+    getDayNumerals(date) {
+        return String(date.day);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n, decorators: [{
+            type: Injectable
+        }] });
+class GregorianEnglishI18n extends NgbDatepickerI18n {
+    getMonthShortName(month) {
+        return MONTHS_GREGORIAN.en[month - 1].substring(0, 3);
+    }
+    getMonthFullName(month) {
+        return MONTHS_GREGORIAN.en[month - 1];
+    }
+    getWeekdayLabel(weekday) {
+        return WEEKDAYS.en[weekday - 1];
+    }
+    getWeekdayShortName(weekday) {
+        return WEEKDAYS.en[weekday - 1];
+    }
+    getDayAriaLabel(date) {
+        return `${date.day}-${date.month}-${date.year}`;
+    }
+    getYearNumerals(year) {
+        return String(year);
+    }
+    getWeekNumerals(weekNumber) {
+        return String(weekNumber);
+    }
+    getDayNumerals(date) {
+        return String(date.day);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n, decorators: [{
+            type: Injectable
+        }] });
+// ============ Dynamic I18N Factory ============
+class DynamicGregorianI18n extends NgbDatepickerI18n {
+    currentLang = 'en';
+    arabicI18n = new GregorianArabicI18n();
+    englishI18n = new GregorianEnglishI18n();
+    setLanguage(lang) {
+        this.currentLang = lang;
+    }
+    get activeI18n() {
+        return this.currentLang === 'ar' ? this.arabicI18n : this.englishI18n;
+    }
+    getMonthShortName(month) {
+        return this.activeI18n.getMonthShortName(month);
+    }
+    getMonthFullName(month) {
+        return this.activeI18n.getMonthFullName(month);
+    }
+    getWeekdayLabel(weekday) {
+        return this.activeI18n.getWeekdayLabel(weekday);
+    }
+    getWeekdayShortName(weekday) {
+        return this.activeI18n.getWeekdayShortName(weekday);
+    }
+    getDayAriaLabel(date) {
+        return this.activeI18n.getDayAriaLabel(date);
+    }
+    getYearNumerals(year) {
+        return this.activeI18n.getYearNumerals(year);
+    }
+    getWeekNumerals(weekNumber) {
+        return this.activeI18n.getWeekNumerals(weekNumber);
+    }
+    getDayNumerals(date) {
+        return this.activeI18n.getDayNumerals(date);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n, decorators: [{
+            type: Injectable
+        }] });
+
+class GregorianCalendarComponent {
+    i18n;
+    cdr;
+    model;
+    dateSelected = new EventEmitter();
+    language = 'en';
+    startDate;
+    calendar = new NgbCalendarGregorian();
+    constructor(i18n, cdr) {
+        this.i18n = i18n;
+        this.cdr = cdr;
+    }
+    ngOnChanges(changes) {
+        if (changes['model'] && changes['model'].currentValue) {
+            this.startDate = { ...changes['model'].currentValue };
+        }
+        if (changes['language'] && this.i18n instanceof DynamicGregorianI18n) {
+            this.i18n.setLanguage(this.language);
+            this.cdr.detectChanges();
+        }
+    }
+    onDateChange(date) {
+        this.model = date;
+        this.startDate = { ...date };
+    }
+    isToday(date) {
+        const today = this.calendar.getToday();
+        return date.year === today.year &&
+            date.month === today.month &&
+            date.day === today.day;
+    }
+    isDisabled = () => false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, deps: [{ token: i1$6.NgbDatepickerI18n }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: GregorianCalendarComponent, isStandalone: true, selector: "app-gregorian-calendar", inputs: { model: "model", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
+            { provide: NgbCalendar, useClass: NgbCalendarGregorian },
+            { provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
+        ], usesOnChanges: true, ngImport: i0, template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n  [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n  [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n  <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n    [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n    {{ date.day }}\r\n  </span>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-gregorian-calendar", standalone: true, imports: [NgbDatepickerModule, FormsModule], providers: [
+                        { provide: NgbCalendar, useClass: NgbCalendarGregorian },
+                        { provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
+                    ], template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n  [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n  [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n  <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n    [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n    {{ date.day }}\r\n  </span>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [{ type: i1$6.NgbDatepickerI18n }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
+                type: Input
+            }], dateSelected: [{
+                type: Output
+            }], language: [{
+                type: Input
+            }] } });
+
+class DatePickerSwitcherComponent extends BaseInputComponent {
+    type = 'text';
+    contentType = 'text';
+    size = "small";
+    prefix;
+    rows = 2;
+    cols = 20;
+    autoResize = true;
+    basicInput;
+    noStyle;
+    hideOptionalLabel;
+    inputDirection = 'inherit';
+    variant = 'over';
+    defaultColor = '#DFE0E6';
+    formattedDate = '';
+    openCalender = new EventEmitter();
+    constructor() {
+        super();
+    }
+    ngOnChanges(changes) {
+        if (changes['formattedDate'] && changes['formattedDate'].currentValue) {
+            // Update the FormControl value if parent changes the formattedDate
+            this.control.setValue(changes['formattedDate'].currentValue, { emitEvent: false });
+        }
+    }
+    ngOnInit() {
+        this.control.setValue(this.formattedDate);
+    }
+    clearButtonClick(e) {
+        this.control.setValue(null);
+    }
+    openCalendar(isOpen) {
+        this.openCalender.emit(isOpen);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerSwitcherComponent, isStandalone: true, selector: "stc-date-picker-switcher", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor", formattedDate: "formattedDate" }, outputs: { openCalender: "openCalender" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n    <p-floatlabel [variant]=\"variant\">\r\n    <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"true\" (focus)=\"openCalendar(true)\"\r\n      (click)=\"openCalendar(true)\" [pSize]=\"'small'\"  style=\"direction: rtl; unicode-bidi: plaintext;\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" [disabled]=\"disabled\" [name]=\"name\" pInputText\r\n      class=\"w-full\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatlabel>\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  }\r\n  @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br>\r\n    }\r\n  </small>\r\n  }\r\n</div>\r\n", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.my-custom-datepicker-panel{display:none!important}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stc-date-picker-switcher', standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgClass,
+                        InputText,
+                        DatePickerModule,
+                        ValidationErrorsPipe,
+                        TranslatePipe,
+                        FloatLabelModule,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n    <p-floatlabel [variant]=\"variant\">\r\n    <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"true\" (focus)=\"openCalendar(true)\"\r\n      (click)=\"openCalendar(true)\" [pSize]=\"'small'\"  style=\"direction: rtl; unicode-bidi: plaintext;\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" [disabled]=\"disabled\" [name]=\"name\" pInputText\r\n      class=\"w-full\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatlabel>\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  }\r\n  @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br>\r\n    }\r\n  </small>\r\n  }\r\n</div>\r\n", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.my-custom-datepicker-panel{display:none!important}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], contentType: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], autoResize: [{
+                type: Input
+            }], basicInput: [{
+                type: Input
+            }], noStyle: [{
+                type: Input
+            }], hideOptionalLabel: [{
+                type: Input
+            }], inputDirection: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], defaultColor: [{
+                type: Input
+            }], formattedDate: [{
+                type: Input
+            }], openCalender: [{
+                type: Output
+            }] } });
+
+class DualCalendarComponent {
+    selectedDate = '';
+    control = new FormControl({ value: null, disabled: false }, []);
+    mode = 'gregorian';
+    gregorianModel;
+    hijriModel;
+    currentLang = 'ar';
+    selectButtonChange = new EventEmitter();
+    isCalendarOpen = false;
+    calendarContainer;
+    constructor() { }
+    onDocumentClick(event) {
+        if (!this.calendarContainer)
+            return;
+        const clickedInside = this.calendarContainer.nativeElement.contains(event.target);
+        if (!clickedInside) {
+            this.isCalendarOpen = false;
+        }
+    }
+    onSelectGregorian(date) {
+        this.gregorianModel = date;
+        const m = moment(`${date.year}-${date.month}-${date.day}`, 'YYYY-M-D');
+        this.hijriModel = {
+            year: +m.format('iYYYY'),
+            month: +m.format('iM'),
+            day: +m.format('iD')
+        };
+        this.selectedDate = this.formatHijri(m);
+        this.isCalendarOpen = false;
+    }
+    onSelectHijri(date) {
+        this.hijriModel = date;
+        const m = moment(`${date.year}-${date.month}-${date.day}`, 'iYYYY-iM-iD');
+        this.gregorianModel = {
+            year: +m.format('YYYY'),
+            month: +m.format('M'),
+            day: +m.format('D')
+        };
+        this.selectedDate = this.formatHijri(m);
+        this.isCalendarOpen = false;
+    }
+    showCalender(isOpen) {
+        this.isCalendarOpen = isOpen;
+    }
+    formatHijri(m) {
+        const hijriDay = m.format('iD');
+        const hijriMonth = getHijriMonthName(this.currentLang, +m.format('iM'));
+        const gregorianDay = m.format('D');
+        const gregorianMonth = getGregorianMonthName(this.currentLang, +m.format('M'));
+        const gregorianYear = m.format('YYYY');
+        const hijriYear = m.format('iYYYY');
+        return `${gregorianDay} ${gregorianMonth} ${gregorianYear} - ${hijriDay} ${hijriMonth} ${hijriYear}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DualCalendarComponent, isStandalone: true, selector: "app-dual-calendar", inputs: { control: "control" }, outputs: { selectButtonChange: "selectButtonChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+            { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
+        ], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], ngImport: i0, template: "<div class=\"calender-content  \"   #calendarContainer>\r\n  <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"'Select Date'\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n    [control]=\"control\" [formattedDate]='selectedDate'  >\r\n  </stc-date-picker-switcher>\r\n\r\n  <!-- calender.html -->\r\n  <div dir=\"rtl\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\"  >\r\n    <div class=\"header-tabs\">\r\n      <div class=\"header-label\">\u0646\u0648\u0639 \u0627\u0644\u062A\u0642\u0648\u064A\u0645</div>\r\n      <div class=\"tabs\">\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" (click)=\"  mode='gregorian'\">\r\n          \u0627\u0644\u0645\u064A\u0644\u0627\u062F\u064A\r\n        </button>\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" (click)=\" mode='hijri'\">\r\n          \u0647\u062C\u0631\u064A\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if(mode === 'gregorian') {\r\n    <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang\"\r\n      (dateSelected)=\"onSelectGregorian($event)\">\r\n    </app-gregorian-calendar>\r\n    }\r\n\r\n    @if(mode === 'hijri') {\r\n    <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang\" (dateSelected)=\"onSelectHijri($event)\">\r\n    </app-hijri-calendar>\r\n    }\r\n  </div>\r\n\r\n</div>\r\n", styles: [".calendar-wrapper{font-family:Tajawal,sans-serif;max-width:375px;padding:15px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative;padding-top:10px}.calendar-wrapper{position:absolute;top:100%;left:0;width:100%;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: HijriCalendarComponent, selector: "app-hijri-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "component", type: DatePickerSwitcherComponent, selector: "stc-date-picker-switcher", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "formattedDate"], outputs: ["openCalender"] }, { kind: "component", type: GregorianCalendarComponent, selector: "app-gregorian-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }], animations: [
+            trigger('slideDown', [
+                state('closed', style({
+                    height: '0px',
+                    opacity: 0,
+                    overflow: 'hidden'
+                })),
+                state('open', style({
+                    height: '*',
+                    opacity: 1,
+                    overflow: 'hidden'
+                })),
+                transition('closed <=> open', [
+                    animate('300ms ease')
+                ])
+            ])
+        ], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-dual-calendar', animations: [
+                        trigger('slideDown', [
+                            state('closed', style({
+                                height: '0px',
+                                opacity: 0,
+                                overflow: 'hidden'
+                            })),
+                            state('open', style({
+                                height: '*',
+                                opacity: 1,
+                                overflow: 'hidden'
+                            })),
+                            transition('closed <=> open', [
+                                animate('300ms ease')
+                            ])
+                        ])
+                    ], imports: [
+                        NgbDatepickerModule,
+                        FormsModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        DatePickerModule,
+                        FloatLabelModule,
+                        HijriCalendarComponent,
+                        DatePickerSwitcherComponent,
+                        GregorianCalendarComponent
+                    ], providers: [
+                        { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content  \"   #calendarContainer>\r\n  <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"'Select Date'\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n    [control]=\"control\" [formattedDate]='selectedDate'  >\r\n  </stc-date-picker-switcher>\r\n\r\n  <!-- calender.html -->\r\n  <div dir=\"rtl\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\"  >\r\n    <div class=\"header-tabs\">\r\n      <div class=\"header-label\">\u0646\u0648\u0639 \u0627\u0644\u062A\u0642\u0648\u064A\u0645</div>\r\n      <div class=\"tabs\">\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" (click)=\"  mode='gregorian'\">\r\n          \u0627\u0644\u0645\u064A\u0644\u0627\u062F\u064A\r\n        </button>\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" (click)=\" mode='hijri'\">\r\n          \u0647\u062C\u0631\u064A\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if(mode === 'gregorian') {\r\n    <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang\"\r\n      (dateSelected)=\"onSelectGregorian($event)\">\r\n    </app-gregorian-calendar>\r\n    }\r\n\r\n    @if(mode === 'hijri') {\r\n    <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang\" (dateSelected)=\"onSelectHijri($event)\">\r\n    </app-hijri-calendar>\r\n    }\r\n  </div>\r\n\r\n</div>\r\n", styles: [".calendar-wrapper{font-family:Tajawal,sans-serif;max-width:375px;padding:15px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative;padding-top:10px}.calendar-wrapper{position:absolute;top:100%;left:0;width:100%;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], selectButtonChange: [{
+                type: Output
+            }], calendarContainer: [{
+                type: ViewChild,
+                args: ['calendarContainer']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class DynamicFormComponent {
+    dynamicFormData;
+    // Generic field change outputs (optional for consumers)
+    selectButtonChange = new EventEmitter();
+    selectChange = new EventEmitter();
+    switchChange = new EventEmitter();
+    autoCompleteSearch = new EventEmitter();
+    autoCompleteSelect = new EventEmitter();
+    inputsNames = [];
+    formGroup;
+    inputsMap;
+    fieldType = FormFieldTypeEnum;
+    getFormControl = FormUtils.getFormControl;
+    ngOnInit() {
+        this.formGroup = this.dynamicFormData?.formGroup;
+        this.inputsMap = this.dynamicFormData?.inputsMap;
+        this.inputsNames = Object.keys(this.inputsMap || {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, outputs: { selectButtonChange: "selectButtonChange", selectChange: "selectChange", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"grid grid-cols-12 gap-x-2\">\r\n    @for (inputName of inputsNames; track $index) {\r\n    <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n      @switch (inputsMap[inputName].fieldType) {\r\n      @case (fieldType.HIJRI_DATE_PICKER) {\r\n         <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\"  ></app-dual-calendar>\r\n      }\r\n\r\n      @case (fieldType.DATE_PICKER) {\r\n      <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n        [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n      }\r\n      @case (fieldType.SELECT_BUTTON) {\r\n      <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n        [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n        (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n      }\r\n      @case (fieldType.INPUT) {\r\n      <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n        [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n        [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? true\"\r\n        [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n        @if(inputsMap[inputName].maxLength){\r\n        <small class=\"text-sm text-gray-600 self-end\">\r\n          {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n          <span>\r\n            / {{ inputsMap[inputName].maxLength}}\r\n          </span>\r\n        </small>\r\n        }\r\n      </stc-input>\r\n      }\r\n      @case (fieldType.SELECT) {\r\n      <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n        [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n        [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n        [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\"/>\r\n      }\r\n      @case (fieldType.SWITCH) {\r\n      <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n        [checked]=\"getFormControl(inputName, formGroup).value\"\r\n        (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n      }\r\n      @case (fieldType.AUTO_COMPLETE) {\r\n      <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n        [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n        (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n        (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  <div class=\"col-span-12\">\r\n    <small class=\"p-error text-red-700\">\r\n      @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n      track error) {\r\n      {{ error }}\r\n      }\r\n    </small>\r\n  </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "component", type: DualCalendarComponent, selector: "app-dual-calendar", inputs: ["control"], outputs: ["selectButtonChange"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "size", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-dynamic-form', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        DatePickerComponent,
+                        ValidationErrorsPipe,
+                        TranslateModule,
+                        SelectButtonComponent,
+                        DualCalendarComponent,
+                        InputComponent,
+                        SelectComponent,
+                        AutoCompleteComponent,
+                        SwitchComponent,
+                    ], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"grid grid-cols-12 gap-x-2\">\r\n    @for (inputName of inputsNames; track $index) {\r\n    <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n      @switch (inputsMap[inputName].fieldType) {\r\n      @case (fieldType.HIJRI_DATE_PICKER) {\r\n         <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\"  ></app-dual-calendar>\r\n      }\r\n\r\n      @case (fieldType.DATE_PICKER) {\r\n      <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n        [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n      }\r\n      @case (fieldType.SELECT_BUTTON) {\r\n      <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n        [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n        (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n      }\r\n      @case (fieldType.INPUT) {\r\n      <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n        [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n        [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? true\"\r\n        [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n        @if(inputsMap[inputName].maxLength){\r\n        <small class=\"text-sm text-gray-600 self-end\">\r\n          {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n          <span>\r\n            / {{ inputsMap[inputName].maxLength}}\r\n          </span>\r\n        </small>\r\n        }\r\n      </stc-input>\r\n      }\r\n      @case (fieldType.SELECT) {\r\n      <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n        [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n        [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n        [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\"/>\r\n      }\r\n      @case (fieldType.SWITCH) {\r\n      <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n        [checked]=\"getFormControl(inputName, formGroup).value\"\r\n        (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n      }\r\n      @case (fieldType.AUTO_COMPLETE) {\r\n      <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n        [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n        (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n        (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  <div class=\"col-span-12\">\r\n    <small class=\"p-error text-red-700\">\r\n      @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n      track error) {\r\n      {{ error }}\r\n      }\r\n    </small>\r\n  </div>\r\n</form>\r\n" }]
+        }], propDecorators: { dynamicFormData: [{
+                type: Input,
+                args: [{ required: true }]
+            }], selectButtonChange: [{
+                type: Output
+            }], selectChange: [{
+                type: Output
+            }], switchChange: [{
+                type: Output
+            }], autoCompleteSearch: [{
+                type: Output
+            }], autoCompleteSelect: [{
+                type: Output
+            }] } });
+
+class ConfirmationDialogComponent extends DynamicDialogRef {
+    router = inject(Router);
+    dialogService = inject(DialogService);
+    dynamicDialogConfig = inject(DynamicDialogConfig);
+    _ref = inject(DynamicDialogRef);
+    _subscription = new Subscription();
+    dialogFormData;
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
+    ngOnInit() {
+        // closing when navigating back from the browser
+        this._subscription.add(this.router.events.pipe(filter((event) => event instanceof NavigationStart)).subscribe(() => {
+            if (this.dynamicDialogConfig) {
+                this._ref.close(false);
+            }
+        }));
+        this.dialogFormData = this.dynamicDialogConfig.data?.inputForm;
+    }
+    submit() {
+        // we should pass submitted data when using form dialog
+        // const submitData = { submitted: true, data: this.dialogFormData?.formGroup?.value };
+        // this._ref.close(this.dynamicDialogConfig.data.inputForm ? submitData : true);
+        this._ref.close(true);
+    }
+    close() {
+        this._ref.close(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirm-dialog", providers: [DialogService, DynamicDialogStyle], usesInheritance: true, ngImport: i0, template: "@if (dynamicDialogConfig.data) {\r\n<div class=\"confirmation-dialog\">\r\n  <div class=\"dialog-wrapper\">\r\n    @if (dynamicDialogConfig.data) {\r\n    <div class=\"confirmation-dialog__content my-4\">\r\n      @if (dynamicDialogConfig.data.dialogIcon) {\r\n      <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n      }\r\n      <p class=\"confirmation-dialog__message text-xl mb-2\">\r\n        {{ dynamicDialogConfig.data.message }}\r\n      </p>\r\n      @if (dynamicDialogConfig.data.hint) {\r\n      <p class=\"confirmation-dialog__hint font-normal text-base\">\r\n        {{ dynamicDialogConfig.data.hint }}\r\n      </p>\r\n      }\r\n      @if (dynamicDialogConfig.data.inputForm) {\r\n      <app-dynamic-form [dynamicFormData]=\"dialogFormData\"></app-dynamic-form>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"confirmation-dialog__actions flex gap-2 mt-4\">\r\n      <app-button [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\"\r\n        [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\" [severity]=\"'primary'\"\r\n        [id]=\"dynamicDialogConfig.data.confirmBtnId\" [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n        [label]=\"dynamicDialogConfig.data.confirmBtnLabel\"\r\n        [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\" [styleClass]=\"'confirmation-btn'\"\r\n        (click)=\"submit()\" />\r\n      <app-button [title]=\"dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)\"\r\n        [severity]=\"'primary'\" variant=\"outlined\" [label]=\"dynamicDialogConfig.data.cancelBtnLabel\"\r\n        [id]=\"dynamicDialogConfig.data.cancelBtnId\" [styleClass]=\"'cancel-btn confirmation-btn cancel-btn'\"\r\n        (click)=\"close()\" />\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["dynamicFormData"], outputs: ["selectButtonChange", "selectChange", "switchChange", "autoCompleteSearch", "autoCompleteSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-confirm-dialog', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        AppButtonComponent,
+                        AvatarModule,
+                        DynamicDialogModule,
+                        DynamicFormComponent,
+                        TranslatePipe,
+                    ], providers: [DialogService, DynamicDialogStyle], template: "@if (dynamicDialogConfig.data) {\r\n<div class=\"confirmation-dialog\">\r\n  <div class=\"dialog-wrapper\">\r\n    @if (dynamicDialogConfig.data) {\r\n    <div class=\"confirmation-dialog__content my-4\">\r\n      @if (dynamicDialogConfig.data.dialogIcon) {\r\n      <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n      }\r\n      <p class=\"confirmation-dialog__message text-xl mb-2\">\r\n        {{ dynamicDialogConfig.data.message }}\r\n      </p>\r\n      @if (dynamicDialogConfig.data.hint) {\r\n      <p class=\"confirmation-dialog__hint font-normal text-base\">\r\n        {{ dynamicDialogConfig.data.hint }}\r\n      </p>\r\n      }\r\n      @if (dynamicDialogConfig.data.inputForm) {\r\n      <app-dynamic-form [dynamicFormData]=\"dialogFormData\"></app-dynamic-form>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"confirmation-dialog__actions flex gap-2 mt-4\">\r\n      <app-button [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\"\r\n        [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\" [severity]=\"'primary'\"\r\n        [id]=\"dynamicDialogConfig.data.confirmBtnId\" [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n        [label]=\"dynamicDialogConfig.data.confirmBtnLabel\"\r\n        [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\" [styleClass]=\"'confirmation-btn'\"\r\n        (click)=\"submit()\" />\r\n      <app-button [title]=\"dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)\"\r\n        [severity]=\"'primary'\" variant=\"outlined\" [label]=\"dynamicDialogConfig.data.cancelBtnLabel\"\r\n        [id]=\"dynamicDialogConfig.data.cancelBtnId\" [styleClass]=\"'cancel-btn confirmation-btn cancel-btn'\"\r\n        (click)=\"close()\" />\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n}" }]
+        }] });
+
+class ReadMoreComponent {
+    text = "";
+    styleClass = "";
+    maxCharacters = 100;
+    isExpanded = false;
+    toggleReadMore() {
+        this.isExpanded = !this.isExpanded;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ReadMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ReadMoreComponent, isStandalone: true, selector: "app-read-more", inputs: { text: "text", styleClass: "styleClass", maxCharacters: "maxCharacters" }, ngImport: i0, template: "<p [class]=\"styleClass\">\r\n  {{ isExpanded ? text : (text | slice : 0 : maxCharacters) }}\r\n  @if (text.length > maxCharacters && !isExpanded) {\r\n    <span>...</span>\r\n  }\r\n  @if (isExpanded) {\r\n    <span>\r\n    {{ text | slice : maxCharacters + 1 : text.length }}\r\n  </span>\r\n  }\r\n  <br>\r\n  @if (text.length > maxCharacters) {\r\n    <span class=\"text-primary_light cursor-pointer\" (click)=\"toggleReadMore()\">\r\n     {{ isExpanded ? ('less' | translate) : ('more' | translate) }}\r\n    </span>\r\n  }\r\n</p>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: SlicePipe, name: "slice" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ReadMoreComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-read-more", standalone: true, imports: [TranslateModule, SlicePipe], template: "<p [class]=\"styleClass\">\r\n  {{ isExpanded ? text : (text | slice : 0 : maxCharacters) }}\r\n  @if (text.length > maxCharacters && !isExpanded) {\r\n    <span>...</span>\r\n  }\r\n  @if (isExpanded) {\r\n    <span>\r\n    {{ text | slice : maxCharacters + 1 : text.length }}\r\n  </span>\r\n  }\r\n  <br>\r\n  @if (text.length > maxCharacters) {\r\n    <span class=\"text-primary_light cursor-pointer\" (click)=\"toggleReadMore()\">\r\n     {{ isExpanded ? ('less' | translate) : ('more' | translate) }}\r\n    </span>\r\n  }\r\n</p>\r\n" }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], styleClass: [{
+                type: Input
+            }], maxCharacters: [{
+                type: Input
+            }] } });
+
+class AppAccordionComponent {
+    iconName;
+    iconClass;
+    iconPathCount = 0;
+    title;
+    contentBorderTop = true;
+    accordionPanelBorder = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AppAccordionComponent, isStandalone: true, selector: "app-accordion", inputs: { iconName: "iconName", iconClass: "iconClass", iconPathCount: "iconPathCount", title: "title", contentBorderTop: "contentBorderTop", accordionPanelBorder: "accordionPanelBorder" }, ngImport: i0, template: "<p-accordion value=\"0\">\r\n  <p-accordion-panel value=\"0\" [class.!border-0]=\"!accordionPanelBorder\">\r\n    <p-accordion-header>\r\n            <span class=\"flex items-center gap-2 w-full\">\r\n                <app-ico-moon-card [iconClass]=\"'text-[24px] text-secondary'\" [iconName]=\"'font-icon-'+iconName\" />\r\n                <span class=\"font-bold whitespace-nowrap\">{{title}}</span>\r\n            </span>\r\n    </p-accordion-header>\r\n    <p-accordion-content>\r\n      <div [ngClass]=\"{'border-t-2 border-gray-light pt-2': contentBorderTop, }\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </p-accordion-content>\r\n  </p-accordion-panel>\r\n</p-accordion>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$4.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i2$4.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i2$4.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i2$4.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: IcoMoonIconComponent, selector: "app-ico-moon-card", inputs: ["iconName", "iconClass", "iconPathCount"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-accordion", standalone: true, imports: [CommonModule, DividerModule, AccordionModule, IcoMoonIconComponent], template: "<p-accordion value=\"0\">\r\n  <p-accordion-panel value=\"0\" [class.!border-0]=\"!accordionPanelBorder\">\r\n    <p-accordion-header>\r\n            <span class=\"flex items-center gap-2 w-full\">\r\n                <app-ico-moon-card [iconClass]=\"'text-[24px] text-secondary'\" [iconName]=\"'font-icon-'+iconName\" />\r\n                <span class=\"font-bold whitespace-nowrap\">{{title}}</span>\r\n            </span>\r\n    </p-accordion-header>\r\n    <p-accordion-content>\r\n      <div [ngClass]=\"{'border-t-2 border-gray-light pt-2': contentBorderTop, }\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </p-accordion-content>\r\n  </p-accordion-panel>\r\n</p-accordion>\r\n" }]
+        }], propDecorators: { iconName: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], iconPathCount: [{
+                type: Input
+            }], title: [{
+                type: Input,
+                args: [{ required: true }]
+            }], contentBorderTop: [{
+                type: Input
+            }], accordionPanelBorder: [{
+                type: Input
+            }] } });
+
+class UserAutocompleteCardComponent {
+    select = new EventEmitter();
+    delete = new EventEmitter();
+    userData;
+    explicitRole = "";
+    showDeleteAction = true;
+    onDelete() {
+        this.delete.emit(this.userData);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UserAutocompleteCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UserAutocompleteCardComponent, isStandalone: true, selector: "app-user-autocomplete-card", inputs: { userData: "userData", explicitRole: "explicitRole", showDeleteAction: "showDeleteAction" }, outputs: { select: "select", delete: "delete" }, ngImport: i0, template: "<div class=\"flex gap-2 items-center justify-between p-4 rounded mb-4 border border-dotted border-gray-300 bg-gray-100\">\r\n  <div class=\"flex gap-4 items-center\">\r\n    <img [alt]=\"userData.name\" [src]=\"userData.profileImage\" class=\"rounded-full object-cover w-[48px] h-[48px]\" />\r\n    <div class=\"flex flex-col justify-end\">\r\n      <h4 class=\"font-bold text-[12px] text-gray-800 truncate max-w-[135px] dir-ltr\">\r\n        {{ userData.name }}\r\n      </h4>\r\n      <p class=\"text-[12px] text-gray-700\">{{ explicitRole ? explicitRole : userData.position.name }}</p>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex-1 flex flex-col items-end\">\r\n    <p class=\"text-[12px] text-purple-700 truncate max-w-[90px] dir-ltr\">{{ userData.email }}</p>\r\n    <p class=\"text-[12px] text-gray-600 dir-ltr\">{{ userData.contact.mobile }}</p>\r\n  </div>\r\n  @if (showDeleteAction){\r\n    <div class=\"flex gap-1 flex-nowrap\">\r\n      <app-button (clickEmitter)=\"onDelete()\" [rounded]=\"true\" [size]=\"'large'\" [text]=\"true\" icon=\"font-icon-trash\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UserAutocompleteCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-user-autocomplete-card", standalone: true, imports: [AppButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex gap-2 items-center justify-between p-4 rounded mb-4 border border-dotted border-gray-300 bg-gray-100\">\r\n  <div class=\"flex gap-4 items-center\">\r\n    <img [alt]=\"userData.name\" [src]=\"userData.profileImage\" class=\"rounded-full object-cover w-[48px] h-[48px]\" />\r\n    <div class=\"flex flex-col justify-end\">\r\n      <h4 class=\"font-bold text-[12px] text-gray-800 truncate max-w-[135px] dir-ltr\">\r\n        {{ userData.name }}\r\n      </h4>\r\n      <p class=\"text-[12px] text-gray-700\">{{ explicitRole ? explicitRole : userData.position.name }}</p>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex-1 flex flex-col items-end\">\r\n    <p class=\"text-[12px] text-purple-700 truncate max-w-[90px] dir-ltr\">{{ userData.email }}</p>\r\n    <p class=\"text-[12px] text-gray-600 dir-ltr\">{{ userData.contact.mobile }}</p>\r\n  </div>\r\n  @if (showDeleteAction){\r\n    <div class=\"flex gap-1 flex-nowrap\">\r\n      <app-button (clickEmitter)=\"onDelete()\" [rounded]=\"true\" [size]=\"'large'\" [text]=\"true\" icon=\"font-icon-trash\"/>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { select: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], userData: [{
+                type: Input,
+                args: [{ required: true }]
+            }], explicitRole: [{
+                type: Input
+            }], showDeleteAction: [{
+                type: Input
+            }] } });
+
+class AppBreadcrumbComponent {
+    activatedRoute;
+    router;
+    items;
+    isShown;
+    constructor(activatedRoute, router) {
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+    }
+    ngOnInit() {
+        if (this.items) {
+            this.isShown = true;
+            return;
+        }
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((e) => {
+            // remove duplicates
+            this.items = this._createBreadcrumbs(this.activatedRoute.root).filter((item, index, self) => index ===
+                self.findIndex((t) => t.label === item.label && t.routerLink === item.routerLink));
+            this._checkHiddenBreadcrumb();
+            this._checkEmpty();
+        });
+    }
+    _checkHiddenBreadcrumb() {
+        const activeBreadcrumb = this.items?.find((item) => {
+            return item.routerLink === this.router.url;
+        });
+        this.isShown = !!activeBreadcrumb?.isShown;
+    }
+    _createBreadcrumbs(activatedRoute, routerLink = '', breadcrumbs = []) {
+        const children = activatedRoute.children;
+        if (children.length === 0) {
+            return breadcrumbs;
+        }
+        for (const child of children) {
+            const routeURL = child.snapshot.url.map((segment) => segment.path).join('/');
+            if (routeURL !== '') {
+                routerLink += `/${routeURL}`;
+            }
+            let label = child.snapshot.data['breadcrumb'];
+            const notClickableBreadcrumb = !!child.snapshot.data['notClickableBreadcrumb'];
+            const isShown = !!child.snapshot.data['isShown'];
+            const extraBreadcrumbs = child.snapshot.data['extraBreadcrumbs'] || [];
+            if (!(typeof label === 'undefined' || label === null)) {
+                const data = activatedRoute.snapshot.firstChild?.data || {};
+                // Resolve dynamic breadcrumb label
+                if (label && label.startsWith('[') && label.endsWith(']')) {
+                    label = this._getRecursiveKey(data, label.slice(1, -1).split('.'));
+                }
+                // Resolve dynamic URL parts
+                const resolveDynamicUrl = (route) => {
+                    return route.replace(/\[([^\]]+)]/g, (_, key) => this._getRecursiveKey(data, key.split('.')) || '');
+                };
+                const mainBreadcrumb = {
+                    label,
+                    routerLink,
+                    data,
+                    notClickableBreadcrumb,
+                    isShown,
+                };
+                // Process extra breadcrumbs
+                const beforeBreadcrumbs = [];
+                const afterBreadcrumbs = [];
+                extraBreadcrumbs.forEach((extra) => {
+                    let extraLabel = extra.label || '';
+                    if (extraLabel.startsWith('[') && extraLabel.endsWith(']')) {
+                        extraLabel = this._getRecursiveKey(data, extraLabel.slice(1, -1).split('.'));
+                    }
+                    const extraUrl = resolveDynamicUrl(extra.routerLink || '');
+                    const extraBreadcrumb = { ...extra, label: extraLabel, routerLink: extraUrl };
+                    if (extra.position === 'before') {
+                        beforeBreadcrumbs.push(extraBreadcrumb);
+                    }
+                    else {
+                        afterBreadcrumbs.push(extraBreadcrumb);
+                    }
+                });
+                // Merge breadcrumbs
+                breadcrumbs.push(...beforeBreadcrumbs, mainBreadcrumb, ...afterBreadcrumbs);
+            }
+            return this._createBreadcrumbs(child, routerLink, breadcrumbs);
+        }
+    }
+    _checkEmpty() {
+        if (!this.items)
+            return;
+        const lastBreadcrumbVisibility = this.items[this.items.length - 1].isShown;
+        this.items = this.items.filter((b) => b.label !== '');
+        this.items[this.items.length - 1].isShown = lastBreadcrumbVisibility;
+    }
+    _getRecursiveKey(obj, keys) {
+        if (keys.length === 0) {
+            return undefined;
+        }
+        const [currentKey, ...remainingKeys] = keys;
+        if (currentKey in obj) {
+            if (remainingKeys.length > 0) {
+                return this._getRecursiveKey(obj[currentKey], remainingKeys);
+            }
+            return obj[currentKey];
+        }
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppBreadcrumbComponent, deps: [{ token: i1$7.ActivatedRoute }, { token: i1$7.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AppBreadcrumbComponent, isStandalone: true, selector: "app-breadcrumb", inputs: { items: "items" }, ngImport: i0, template: "@if(isShown) {\r\n<nav class=\"flex gap-x-3 text-[12px] w-full items-center mb-5\">\r\n  <div class=\"card flex justify-center\">\r\n    <p-breadcrumb [model]=\"items\"></p-breadcrumb>\r\n  </div>\r\n</nav>\r\n}\r\n", styles: [".p-breadcrumb-list li:first-child a{@apply text-secondary;}.p-breadcrumb-list .p-breadcrumb-separator{transform:scale(.7);display:none}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-link{padding:0 4px}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label{@apply text-light_red relative;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:hover{@apply text-light_red;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:before{content:\"/\";@apply inline-block absolute text-gray-900;inset-inline-end:-9px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: RouterModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-breadcrumb', standalone: true, imports: [CommonModule, Breadcrumb, RouterModule], encapsulation: ViewEncapsulation.None, template: "@if(isShown) {\r\n<nav class=\"flex gap-x-3 text-[12px] w-full items-center mb-5\">\r\n  <div class=\"card flex justify-center\">\r\n    <p-breadcrumb [model]=\"items\"></p-breadcrumb>\r\n  </div>\r\n</nav>\r\n}\r\n", styles: [".p-breadcrumb-list li:first-child a{@apply text-secondary;}.p-breadcrumb-list .p-breadcrumb-separator{transform:scale(.7);display:none}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-link{padding:0 4px}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label{@apply text-light_red relative;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:hover{@apply text-light_red;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:before{content:\"/\";@apply inline-block absolute text-gray-900;inset-inline-end:-9px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$7.ActivatedRoute }, { type: i1$7.Router }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
+const SIDEBAR_DATA = new InjectionToken('SIDEBAR_DATA');
+function createCustomInjector(parentInjector, injectionToken, data) {
+    return Injector.create({
+        parent: parentInjector,
+        providers: [
+            {
+                provide: injectionToken,
+                useValue: data ?? null
+            }
+        ]
+    });
+}
+;
+var SidebarActionType;
+(function (SidebarActionType) {
+    SidebarActionType["SAVE"] = "SAVE";
+    SidebarActionType["SaveMore"] = "SaveMore";
+    SidebarActionType["CANCEL"] = "CANCEL";
+    SidebarActionType["SUBMIT"] = "SUBMIT";
+    SidebarActionType["CLOSE"] = "CLOSE";
+    SidebarActionType["CloseWithData"] = "CloseWithData";
+})(SidebarActionType || (SidebarActionType = {}));
+
+class DataInjectorPipe {
+    injector = inject(Injector);
+    transform(data) {
+        return createCustomInjector(this.injector, SIDEBAR_DATA, data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: DataInjectorPipe, isStandalone: true, name: "dataInjector" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataInjectorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dataInjector',
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
+class SideBarDynamicComponent {
+    dynamicSidebarService = inject(DynamicSidebarService);
+    parentInjector = inject(Injector);
+    location = inject(Location);
+    popStateListener;
+    sidebarConfig = this.dynamicSidebarService.sidebarConfig;
+    ngOnInit() {
+        //To close a sidebar when the browser back button is pressed
+        this.popStateListener = this.location.subscribe(() => {
+            if (this.dynamicSidebarService.sidebarConfig.visible) {
+                this.dynamicSidebarService.close();
+            }
+        });
+    }
+    ngOnDestroy() {
+        // reset Sidebar token
+        createCustomInjector(this.parentInjector, SIDEBAR_DATA, null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideBarDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SideBarDynamicComponent, isStandalone: true, selector: "app-side-bar-dynamic", ngImport: i0, template: "<p-drawer (onHide)=\"dynamicSidebarService.close()\" [(visible)]=\"sidebarConfig.visible\"\r\n  [closable]=\"sidebarConfig.closable\" [closeOnEscape]=\"sidebarConfig.closeOnEscape\"\r\n  [dismissible]=\"sidebarConfig.dismissible\" [ngClass]=\"{ show: sidebarConfig.show }\" [position]=\"'left'\" appendTo=\"body\"\r\n  id=\"main-drawer\"\r\n  styleClass=\"p-drawer-{{ sidebarConfig.sidebarSize }} custom-content bg-white {{ sidebarConfig.styleClass }}\">\r\n  <ng-template pTemplate=\"header\">{{ sidebarConfig.title }}</ng-template>\r\n  <ng-template pTemplate=\"content\">\r\n    <ng-container [ngComponentOutletInjector]=\"dynamicSidebarService.contentComponentData | dataInjector\"\r\n      [ngComponentOutlet]=\"dynamicSidebarService.contentComponentRef\"></ng-container>\r\n  </ng-template>\r\n  @if (sidebarConfig.showSaveBtn || sidebarConfig.showSaveAndMoreBtn || sidebarConfig.showCancelBtn) {\r\n  <ng-template pTemplate=\"footer\">\r\n    <section class=\"flex justify-between bg-gray-200 py-4\" id=\"sidebar-footer\">\r\n      <div class=\"flex gap-2\">\r\n        @if (sidebarConfig.showSaveBtn) {\r\n        <app-button (clickEmitter)=\"dynamicSidebarService.submit(true)\"\r\n          [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n          [icon]=\"sidebarConfig!.actions!.save!.icon || 'font-icon-plus'\"\r\n          [iconPos]=\"sidebarConfig!.actions!.save!.iconPos || 'right'\"\r\n          [styleClass]=\"sidebarConfig!.actions!.save!.style || 'danger'\"\r\n          [title]=\"sidebarConfig!.actions!.save!.title || ('actions.save' | translate)\"\r\n          [variant]=\"sidebarConfig!.actions!.save!.variant\" />\r\n        }\r\n        @if (sidebarConfig.showSaveAndMoreBtn) {\r\n        <app-button (clickEmitter)=\"dynamicSidebarService.submit()\"\r\n          [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n          [icon]=\"sidebarConfig!.actions!.saveAndMore!.icon || 'font-icon-plus'\"\r\n          [iconPos]=\"sidebarConfig!.actions!.saveAndMore!.iconPos || 'right'\"\r\n          [styleClass]=\"sidebarConfig!.actions!.saveAndMore!.style || 'danger'\"\r\n          [title]=\"sidebarConfig!.actions!.saveAndMore!.title || ('actions.save_and_and_more' | translate)\"\r\n          [variant]=\"sidebarConfig!.actions!.saveAndMore!.variant\" />\r\n\r\n        }\r\n      </div>\r\n      @if (sidebarConfig.showCancelBtn) {\r\n      <app-button (clickEmitter)=\"dynamicSidebarService.cancel()\" [styleClass]=\"'secondary'\"\r\n        [title]=\"'actions.cancel' | translate\" />\r\n      }\r\n    </section>\r\n  </ng-template>\r\n  }\r\n</p-drawer>", styles: [".sidebar.show{min-width:550px}\n"], dependencies: [{ kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "pipe", type: DataInjectorPipe, name: "dataInjector" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideBarDynamicComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-side-bar-dynamic", standalone: true, imports: [Drawer, NgClass, NgComponentOutlet, PrimeTemplate, DataInjectorPipe, AppButtonComponent, TranslatePipe], template: "<p-drawer (onHide)=\"dynamicSidebarService.close()\" [(visible)]=\"sidebarConfig.visible\"\r\n  [closable]=\"sidebarConfig.closable\" [closeOnEscape]=\"sidebarConfig.closeOnEscape\"\r\n  [dismissible]=\"sidebarConfig.dismissible\" [ngClass]=\"{ show: sidebarConfig.show }\" [position]=\"'left'\" appendTo=\"body\"\r\n  id=\"main-drawer\"\r\n  styleClass=\"p-drawer-{{ sidebarConfig.sidebarSize }} custom-content bg-white {{ sidebarConfig.styleClass }}\">\r\n  <ng-template pTemplate=\"header\">{{ sidebarConfig.title }}</ng-template>\r\n  <ng-template pTemplate=\"content\">\r\n    <ng-container [ngComponentOutletInjector]=\"dynamicSidebarService.contentComponentData | dataInjector\"\r\n      [ngComponentOutlet]=\"dynamicSidebarService.contentComponentRef\"></ng-container>\r\n  </ng-template>\r\n  @if (sidebarConfig.showSaveBtn || sidebarConfig.showSaveAndMoreBtn || sidebarConfig.showCancelBtn) {\r\n  <ng-template pTemplate=\"footer\">\r\n    <section class=\"flex justify-between bg-gray-200 py-4\" id=\"sidebar-footer\">\r\n      <div class=\"flex gap-2\">\r\n        @if (sidebarConfig.showSaveBtn) {\r\n        <app-button (clickEmitter)=\"dynamicSidebarService.submit(true)\"\r\n          [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n          [icon]=\"sidebarConfig!.actions!.save!.icon || 'font-icon-plus'\"\r\n          [iconPos]=\"sidebarConfig!.actions!.save!.iconPos || 'right'\"\r\n          [styleClass]=\"sidebarConfig!.actions!.save!.style || 'danger'\"\r\n          [title]=\"sidebarConfig!.actions!.save!.title || ('actions.save' | translate)\"\r\n          [variant]=\"sidebarConfig!.actions!.save!.variant\" />\r\n        }\r\n        @if (sidebarConfig.showSaveAndMoreBtn) {\r\n        <app-button (clickEmitter)=\"dynamicSidebarService.submit()\"\r\n          [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n          [icon]=\"sidebarConfig!.actions!.saveAndMore!.icon || 'font-icon-plus'\"\r\n          [iconPos]=\"sidebarConfig!.actions!.saveAndMore!.iconPos || 'right'\"\r\n          [styleClass]=\"sidebarConfig!.actions!.saveAndMore!.style || 'danger'\"\r\n          [title]=\"sidebarConfig!.actions!.saveAndMore!.title || ('actions.save_and_and_more' | translate)\"\r\n          [variant]=\"sidebarConfig!.actions!.saveAndMore!.variant\" />\r\n\r\n        }\r\n      </div>\r\n      @if (sidebarConfig.showCancelBtn) {\r\n      <app-button (clickEmitter)=\"dynamicSidebarService.cancel()\" [styleClass]=\"'secondary'\"\r\n        [title]=\"'actions.cancel' | translate\" />\r\n      }\r\n    </section>\r\n  </ng-template>\r\n  }\r\n</p-drawer>", styles: [".sidebar.show{min-width:550px}\n"] }]
+        }] });
+
+const SidebarConfigDefaults = {
+    title: "",
+    show: true,
+    visible: true,
+    closable: true,
+    dismissible: false,
+    closeOnEscape: false,
+    sidebarSize: "md",
+    showCancelBtn: false,
+    showSaveBtn: false,
+    showSaveAndMoreBtn: false,
+    actions: {
+        save: {},
+        saveAndMore: {
+            variant: "outlined"
+        }
+    }
+};
+
+class DynamicSidebarService {
+    environmentInjector;
+    appRef;
+    contentComponentRef = null;
+    contentComponentData;
+    sidebarConfig = this.getDefaultConfig();
+    activeForm = null;
+    componentRef = null;
+    sidebarAction$ = new Subject();
+    action$ = this.sidebarAction$.asObservable();
+    sidebarSideEffectAction$ = new Subject();
+    sideEffectAction$ = this.sidebarSideEffectAction$.asObservable();
+    isOpen$ = new BehaviorSubject(false);
+    isOpenObservable$ = this.isOpen$.asObservable();
+    constructor(environmentInjector, appRef) {
+        this.environmentInjector = environmentInjector;
+        this.appRef = appRef;
+    }
+    // Action notifications
+    notifyAction(type, payload) {
+        this.sidebarAction$.next({ type, payload });
+    }
+    notifySideEffectAction(type, payload) {
+        this.sidebarSideEffectAction$.next({ type, payload });
+    }
+    // Form management
+    setActiveForm(control) {
+        this.activeForm = control;
+    }
+    resetActiveForm() {
+        this.activeForm = null;
+    }
+    isButtonDisabled() {
+        if (!this.activeForm) {
+            return false;
+        }
+        return this.activeForm.invalid || this.activeForm.untouched;
+    }
+    open(component, config, data) {
+        // Close any existing sidebar before opening a new one
+        // TODO Need to Review
+        if (!component) {
+            return;
+        }
+        this.close();
+        this.contentComponentRef = component;
+        this.contentComponentData = data;
+        this.sidebarConfig = { ...this.getDefaultConfig(), ...config };
+        this.componentRef = createComponent(SideBarDynamicComponent, {
+            environmentInjector: this.environmentInjector,
+        });
+        // Attach the component to the Angular application
+        this.appRef.attachView(this.componentRef.hostView);
+        // Append the component to the DOM
+        const domElem = this.componentRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+    }
+    /**
+     * Closes the currently open sidebar, if any.
+     */
+    close() {
+        if (this.componentRef) {
+            // Detach the view and destroy the component
+            this.appRef.detachView(this.componentRef.hostView);
+            this.componentRef.destroy();
+            this.componentRef = null;
+            // Reset content and configuration
+            this.contentComponentRef = null;
+            this.contentComponentData = null;
+            this.sidebarConfig = this.getDefaultConfig();
+            this.isOpen$.next(false);
+            this.resetActiveForm();
+            this.notifySideEffectAction(SidebarActionType.CLOSE);
+        }
+    }
+    cancel() {
+        this.notifyAction(SidebarActionType.CANCEL);
+    }
+    submit(flag = false) {
+        const actionType = flag ? SidebarActionType.SaveMore : SidebarActionType.SAVE;
+        this.notifyAction(actionType, { withClose: flag });
+    }
+    /**
+     * Provides the default configuration for the sidebar.
+     * @returns The default SidebarConfig object.
+     */
+    getDefaultConfig() {
+        return {
+            ...SidebarConfigDefaults,
+            show: false,
+            visible: false,
+            closable: false,
+            dismissible: true
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarService, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }] });
+
+class ConfirmationDialogService {
+    dialogService;
+    constructor(dialogService) {
+        this.dialogService = dialogService;
+    }
+    open(data) {
+        const ref = this.dialogService.open(ConfirmationDialogComponent, {
+            data,
+            header: data.header,
+            showHeader: true,
+            width: '600px',
+            closable: true,
+            modal: true,
+            styleClass: 'confirmation-dialog-wrapper',
+            breakpoints: data.breakpoints,
+        });
+        if (!ref) {
+            return of(false); // or EMPTY / throwError — depending on your logic
+        }
+        // Emit true/false when dialog closes
+        return ref.onClose.pipe(filter$1((res) => res !== undefined), map((res) => !!res));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogService, deps: [{ token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$8.DialogService }] });
+
+class BottomSheetComponent {
+    show = false;
+    contentTemplate;
+    onHide = new EventEmitter();
+    onShow = new EventEmitter();
+    hideBottomSheet() {
+        this.show = false;
+        this.onHide.emit(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: BottomSheetComponent, isStandalone: true, selector: "app-bottom-sheet", inputs: { show: "show", contentTemplate: "contentTemplate" }, outputs: { onHide: "onHide", onShow: "onShow" }, ngImport: i0, template: "<p-drawer\r\n  (onHide)=\"hideBottomSheet()\"\r\n  (onShow)=\"onShow.emit($event)\"\r\n  [(visible)]=\"show\"\r\n  [closable]=\"false\"\r\n  [ngClass]=\"{ show: show }\"\r\n  [position]=\"'bottom'\"\r\n  appendTo=\"body\"\r\n  >\r\n  <ng-template pTemplate=\"header\">\r\n    <div class=\"band\"></div>\r\n  </ng-template>\r\n  @if (contentTemplate) {\r\n    <ng-template pTemplate=\"content\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.band{background-color:#dfe0e6;width:40px;height:4px;border-radius:24px;display:block}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500;justify-content:center;color:#090d0f;font-size:20px;flex-direction:column}.p-drawer-content{padding:0!important;margin:0!important}\n"], dependencies: [{ kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BottomSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-bottom-sheet", standalone: true, imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet, TooltipModule], encapsulation: ViewEncapsulation.None, template: "<p-drawer\r\n  (onHide)=\"hideBottomSheet()\"\r\n  (onShow)=\"onShow.emit($event)\"\r\n  [(visible)]=\"show\"\r\n  [closable]=\"false\"\r\n  [ngClass]=\"{ show: show }\"\r\n  [position]=\"'bottom'\"\r\n  appendTo=\"body\"\r\n  >\r\n  <ng-template pTemplate=\"header\">\r\n    <div class=\"band\"></div>\r\n  </ng-template>\r\n  @if (contentTemplate) {\r\n    <ng-template pTemplate=\"content\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.band{background-color:#dfe0e6;width:40px;height:4px;border-radius:24px;display:block}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500;justify-content:center;color:#090d0f;font-size:20px;flex-direction:column}.p-drawer-content{padding:0!important;margin:0!important}\n"] }]
+        }], propDecorators: { show: [{
+                type: Input
+            }], contentTemplate: [{
+                type: Input
+            }], onHide: [{
+                type: Output
+            }], onShow: [{
+                type: Output
+            }] } });
+
+class DynamicSidebarComponent {
+    component;
+    data;
+    title = '';
+    actions;
+    sidebarSize = 'md';
+    closable = true;
+    closeOnEscape = true;
+    dismissible = true;
+    position = 'left';
+    styleClass = '';
+    disabled = false;
+    closed = new EventEmitter();
+    contentContainer;
+    contentRef;
+    show = true;
+    ngAfterViewInit() {
+        this.renderContent();
+    }
+    renderContent() {
+        if (!this.component)
+            return;
+        this.contentContainer.clear();
+        this.contentRef = this.contentContainer.createComponent(this.component);
+        if (this.data)
+            Object.assign(this.contentRef.instance, this.data);
+    }
+    handleClose() {
+        if (this.contentRef.instance.close)
+            this.contentRef.instance.close();
+        this.closed.emit(null);
+        this.destroy();
+    }
+    handleSubmit() {
+        if (this.data.form) {
+            this.data.form.markAllAsTouched();
+            if (this.data.form.invalid)
+                return;
+        }
+        if (this.contentRef.instance.submit)
+            this.contentRef.instance.submit();
+    }
+    destroy() {
+        this.contentRef?.destroy();
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DynamicSidebarComponent, isStandalone: true, selector: "app-dynamic-sidebar", inputs: { component: "component", data: "data", title: "title", actions: "actions", sidebarSize: "sidebarSize", closable: "closable", closeOnEscape: "closeOnEscape", dismissible: "dismissible", position: "position", styleClass: "styleClass", disabled: "disabled" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<p-drawer\r\n  [(visible)]=\"show\"\r\n  [position]=\"position\"\r\n  appendTo=\"body\"\r\n  [closable]=\"closable\"\r\n  [closeOnEscape]=\"closeOnEscape\"\r\n  [dismissible]=\"dismissible\"\r\n  (onHide)=\"handleClose()\"\r\n  [position]=\"'left'\"\r\n  [styleClass]=\"'p-drawer-' + sidebarSize + ' custom-content bg-white ' + styleClass\">\r\n  <ng-template pTemplate=\"header\">\r\n    <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n  </ng-template>\r\n  <ng-template pTemplate=\"content\">\r\n    <ng-template #contentContainer></ng-template>\r\n  </ng-template>\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex gap-4 mt-4\">\r\n      <div class=\"flex-auto\">\r\n        <app-button (click)=\"handleSubmit()\"\r\n          [icon]=\"actions?.save?.icon\"\r\n          [iconPos]=\"actions?.save?.iconPos || 'right'\"\r\n          [styleClass]=\"(actions?.save?.style || 'danger') + ' w-full'\"\r\n          [label]=\"actions?.save?.title || ('actions.submit' | translate)\"\r\n          [variant]=\"actions?.save?.variant\"\r\n          />\r\n      </div>\r\n      <app-button (click)=\"handleClose()\" severity=\"danger\" variant=\"outlined\"\r\n        [label]=\"actions?.cancel?.title || ('actions.cancel' | translate)\" />\r\n    </div>\r\n  </ng-template>\r\n</p-drawer>\r\n", styles: [".flex-auto{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1$9.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-dynamic-sidebar", standalone: true, imports: [CommonModule, TranslatePipe, DrawerModule, TooltipModule, AppButtonComponent], template: "<p-drawer\r\n  [(visible)]=\"show\"\r\n  [position]=\"position\"\r\n  appendTo=\"body\"\r\n  [closable]=\"closable\"\r\n  [closeOnEscape]=\"closeOnEscape\"\r\n  [dismissible]=\"dismissible\"\r\n  (onHide)=\"handleClose()\"\r\n  [position]=\"'left'\"\r\n  [styleClass]=\"'p-drawer-' + sidebarSize + ' custom-content bg-white ' + styleClass\">\r\n  <ng-template pTemplate=\"header\">\r\n    <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n  </ng-template>\r\n  <ng-template pTemplate=\"content\">\r\n    <ng-template #contentContainer></ng-template>\r\n  </ng-template>\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex gap-4 mt-4\">\r\n      <div class=\"flex-auto\">\r\n        <app-button (click)=\"handleSubmit()\"\r\n          [icon]=\"actions?.save?.icon\"\r\n          [iconPos]=\"actions?.save?.iconPos || 'right'\"\r\n          [styleClass]=\"(actions?.save?.style || 'danger') + ' w-full'\"\r\n          [label]=\"actions?.save?.title || ('actions.submit' | translate)\"\r\n          [variant]=\"actions?.save?.variant\"\r\n          />\r\n      </div>\r\n      <app-button (click)=\"handleClose()\" severity=\"danger\" variant=\"outlined\"\r\n        [label]=\"actions?.cancel?.title || ('actions.cancel' | translate)\" />\r\n    </div>\r\n  </ng-template>\r\n</p-drawer>\r\n", styles: [".flex-auto{flex:1 1 auto}\n"] }]
+        }], propDecorators: { component: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], sidebarSize: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], closeOnEscape: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], contentContainer: [{
+                type: ViewChild,
+                args: ['contentContainer', { read: ViewContainerRef }]
+            }] } });
+
+class DynamicSidebarV2Service {
+    sidebarRef;
+    appRef = inject(ApplicationRef);
+    injector = inject(Injector);
+    envInjector = inject(EnvironmentInjector);
+    open(options) {
+        this.close();
+        this.sidebarRef = createComponent(DynamicSidebarComponent, {
+            environmentInjector: this.envInjector,
+            elementInjector: this.injector,
+        });
+        const instance = this.sidebarRef.instance;
+        instance.title = options.title ?? '';
+        instance.sidebarSize = options.size ?? 'md';
+        instance.position = options.position ?? 'left';
+        instance.styleClass = options.styleClass ?? '';
+        instance.component = options.component;
+        instance.data = options.data ?? {};
+        instance.actions = options.actions;
+        instance.closed.subscribe(() => this.close());
+        this.appRef.attachView(this.sidebarRef.hostView);
+        const domElem = this.sidebarRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+    }
+    close() {
+        if (this.sidebarRef) {
+            this.sidebarRef.destroy();
+            this.sidebarRef = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarV2Service, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarV2Service, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarV2Service, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppAccordionComponent, AppBreadcrumbComponent, AppButtonComponent, AppDropdownMenuComponent, AppTabsComponent, AutoCompleteComponent, BasicErrorKeysEnum, BottomSheetComponent, ConfirmationDialogComponent, ConfirmationDialogService, DatePickerComponent, DualCalendarComponent, DynamicFormComponent, DynamicSidebarService, DynamicSidebarV2Service, ErrorsWithValuesKeysEnum, FormFieldTypeEnum, FormUtils, FormValidationService, IcoMoonIconComponent, InputComponent, ReadMoreComponent, SelectButtonComponent, SelectComponent, SideBarComponent, SidebarConfigDefaults, SwitchComponent, UserAutocompleteCardComponent, UserInfoComponent, ValidationErrorsPipe };
+//# sourceMappingURL=corp-products-ui-components.mjs.map