@corp-products/ui-components 0.0.1 → 1.0.0

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

@@ -0,0 +1,840 @@
+import * as i1$2 from '@angular/common';
+import { CommonModule, NgClass, NgTemplateOutlet, NgStyle, NgIf, JsonPipe, SlicePipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, ViewEncapsulation, Component, ChangeDetectionStrategy, Pipe, inject, Injectable } from '@angular/core';
+import * as i1$1 from '@angular/router';
+import { RouterModule, NavigationEnd, RouterLink, RouterOutlet, Router, NavigationStart } from '@angular/router';
+import * as i1 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i3 from 'primeng/tabs';
+import { TabsModule } from 'primeng/tabs';
+import * as i1$3 from '@ngx-translate/core';
+import { TranslateModule, TranslateService, TranslatePipe } from '@ngx-translate/core';
+import { filter, Subject, takeUntil, Subscription } from 'rxjs';
+import { Popover } from 'primeng/popover';
+import * as i2$1 from 'primeng/api';
+import { PrimeTemplate } from 'primeng/api';
+import { Drawer } from 'primeng/drawer';
+import { AvatarModule } from 'primeng/avatar';
+import { DialogService, DynamicDialogConfig, DynamicDialogRef, DynamicDialog } from 'primeng/dynamicdialog';
+import * as i1$4 from '@angular/forms';
+import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { InputText } from 'primeng/inputtext';
+import { Textarea } from 'primeng/textarea';
+import { Select } from 'primeng/select';
+import * as i2 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { DatePicker } from 'primeng/datepicker';
+import { CalendarModule } from 'primeng/calendar';
+import { AutoComplete } from 'primeng/autocomplete';
+import * as i2$2 from 'primeng/selectbutton';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import * as i1$5 from 'primeng/toggleswitch';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import * as i2$3 from 'primeng/accordion';
+import { AccordionModule } from 'primeng/accordion';
+import { DividerModule } from 'primeng/divider';
+
+class AppButtonComponent {
+    constructor() {
+        this.disabled = false;
+        this.text = false;
+        this.rounded = false;
+        this.clickEmitter = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AppButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AppButtonComponent, isStandalone: true, selector: "app-button", inputs: { title: "title", class: "class", icon: "icon", size: "size", style: "style", iconPos: "iconPos", variant: "variant", disabled: "disabled", text: "text", rounded: "rounded" }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, template: "<p-button\r\n  (click)=\"clickEmitter.emit()\"\r\n  [class]=\"class\"\r\n  [disabled]=\"disabled\"\r\n  [iconPos]=\"iconPos\"\r\n  [icon]=\"icon\"\r\n  [label]=\"title\"\r\n  [rounded]=\"rounded\"\r\n  [severity]=\"style\"\r\n  [styleClass]=\"'w-full'\"\r\n  [text]=\"text\"\r\n  [variant]=\"variant\">\r\n</p-button>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AppButtonComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [RouterModule, ButtonModule, CommonModule], selector: 'app-button', standalone: true, encapsulation: ViewEncapsulation.None, template: "<p-button\r\n  (click)=\"clickEmitter.emit()\"\r\n  [class]=\"class\"\r\n  [disabled]=\"disabled\"\r\n  [iconPos]=\"iconPos\"\r\n  [icon]=\"icon\"\r\n  [label]=\"title\"\r\n  [rounded]=\"rounded\"\r\n  [severity]=\"style\"\r\n  [styleClass]=\"'w-full'\"\r\n  [text]=\"text\"\r\n  [variant]=\"variant\">\r\n</p-button>\r\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], iconPos: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], clickEmitter: [{
+                type: Output
+            }] } });
+
+class IcoMoonIconComponent {
+    constructor() {
+        this.iconPathCount = 0;
+    }
+    get getPathCount() {
+        return Array.from({ length: this.iconPathCount }, (_, i) => i + 1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: IcoMoonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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: "18.2.0", 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 {
+    constructor(route, router) {
+        this.route = route;
+        this.router = router;
+        this.tabsStyle = "basic";
+        this.responsive = false;
+        this.activeTabIndex = 0;
+    }
+    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) {
+        if (!this.tabs.isRouted)
+            return;
+        const selectedTab = this.tabs.items[index];
+        if (selectedTab && !selectedTab.disabled) {
+            this.router.navigate([selectedTab.link], { relativeTo: this.route });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AppTabsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AppTabsComponent, isStandalone: true, selector: "app-tabs", inputs: { tabs: "tabs", tabsStyle: "tabsStyle", responsive: "responsive" }, ngImport: i0, template: "@if (tabs && tabs.items.length) {\r\n  <div [class]=\"tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'\">\r\n    <p-tabs [value]=\"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 }} @if (tab.count) {\r\n              <span>({{ tab.count }})</span>\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}\r\n", styles: [".tabs-container.full-width .p-tabs .p-tablist-tab-list .p-tab{display:flex;max-width:50%;flex-grow:1;justify-content:center}.tabs-container .p-tabs .p-tablist-tab-list{position:relative}.tabs-container .p-tabs .p-tablist-tab-list:after{position:absolute;bottom:0;right:0;z-index:1;height:3px;width:100%;background-color:#6b21a80d;--tw-content: \"\";content:var(--tw-content)}.tabs-container .p-tabs .p-tablist-tab-list .p-tab{z-index:2;border-bottom-width:4px;border-color:transparent;font-size:.875rem;line-height:1.25rem;font-size:16px;font-weight:400;--tw-text-opacity: 1;color:rgb(166 166 166 / var(--tw-text-opacity, 1))}.tabs-container .p-tabs .p-tablist-tab-list .p-tab:not(.p-tab-active) app-ico-moon-card{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.tabs-container .p-tabs .p-tablist-active-bar{display:none}.tabs-container .p-tabs .p-tabpanels.p-component{margin-top:1.25rem;border-radius:.5rem}.tabs-container.basic .p-tabs .p-tablist-tab-list{background-color:transparent}.tabs-container.basic .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{border-color:var(--primary);color:var(--primary)}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab{border-top-left-radius:.5rem;border-top-right-radius:.5rem;font-size:14px}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{border-color:var(--primary);background-color:#6b21a80d;font-weight:500;color:var(--primary)}.tabs-container.primary .p-tabs .p-tablist-tab-list:after{background-color:#6b21a80d}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab{border-top-left-radius:.5rem;border-top-right-radius:.5rem;font-size:14px}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{border-color:var(--secondary);background-color:var(--primary);font-weight:500;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}[dir=rtl] .p-tabs .p-tablist .p-iconwrapper{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}[dir=rtl] .p-tabs .p-tablist .p-tablist-next-button{right:auto;left:0}[dir=rtl] .p-tabs .p-tablist .p-tablist-prev-button{right:0;left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i3.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i3.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i3.TabList, selector: "p-tablist" }, { kind: "component", type: i3.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"], 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: "pipe", type: i1$3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AppTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-tabs", standalone: true, encapsulation: ViewEncapsulation.None, imports: [CommonModule, TabsModule, RouterLink, RouterOutlet, IcoMoonIconComponent, TranslateModule], template: "@if (tabs && tabs.items.length) {\r\n  <div [class]=\"tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'\">\r\n    <p-tabs [value]=\"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 }} @if (tab.count) {\r\n              <span>({{ tab.count }})</span>\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}\r\n", styles: [".tabs-container.full-width .p-tabs .p-tablist-tab-list .p-tab{display:flex;max-width:50%;flex-grow:1;justify-content:center}.tabs-container .p-tabs .p-tablist-tab-list{position:relative}.tabs-container .p-tabs .p-tablist-tab-list:after{position:absolute;bottom:0;right:0;z-index:1;height:3px;width:100%;background-color:#6b21a80d;--tw-content: \"\";content:var(--tw-content)}.tabs-container .p-tabs .p-tablist-tab-list .p-tab{z-index:2;border-bottom-width:4px;border-color:transparent;font-size:.875rem;line-height:1.25rem;font-size:16px;font-weight:400;--tw-text-opacity: 1;color:rgb(166 166 166 / var(--tw-text-opacity, 1))}.tabs-container .p-tabs .p-tablist-tab-list .p-tab:not(.p-tab-active) app-ico-moon-card{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.tabs-container .p-tabs .p-tablist-active-bar{display:none}.tabs-container .p-tabs .p-tabpanels.p-component{margin-top:1.25rem;border-radius:.5rem}.tabs-container.basic .p-tabs .p-tablist-tab-list{background-color:transparent}.tabs-container.basic .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{border-color:var(--primary);color:var(--primary)}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab{border-top-left-radius:.5rem;border-top-right-radius:.5rem;font-size:14px}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{border-color:var(--primary);background-color:#6b21a80d;font-weight:500;color:var(--primary)}.tabs-container.primary .p-tabs .p-tablist-tab-list:after{background-color:#6b21a80d}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab{border-top-left-radius:.5rem;border-top-right-radius:.5rem;font-size:14px}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{border-color:var(--secondary);background-color:var(--primary);font-weight:500;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}[dir=rtl] .p-tabs .p-tablist .p-iconwrapper{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}[dir=rtl] .p-tabs .p-tablist .p-tablist-next-button{right:auto;left:0}[dir=rtl] .p-tabs .p-tablist .p-tablist-prev-button{right:0;left:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }], propDecorators: { tabs: [{
+                type: Input
+            }], tabsStyle: [{
+                type: Input
+            }], responsive: [{
+                type: Input
+            }] } });
+
+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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MenuPopupTextColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MenuPopupTextColorPipe, isStandalone: true, name: "popupTextColorClass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MenuPopupTextColorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'popupTextColorClass',
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
+class AppDropdownMenuComponent {
+    constructor() {
+        this.menuItems = [];
+        this.popupMenuStyle = "purple";
+        this.buttonIcon = "font-icon-plus";
+        this.buttonIconPosition = "left";
+        this.router = inject(Router);
+    }
+    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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AppDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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\"\r\n              [iconPos]=\"buttonIconPosition\"\r\n              [icon]=\"buttonIcon\" [title]=\"buttonTitle\"\r\n              [style]=\"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\r\n            [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>\r\n", styles: [".p-popover.p-component{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover.p-component:is(.purple-menu){margin-top:.5rem;background-color:var(--primary);font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.p-popover.p-component:is(.purple-menu) li:not(:last-child){border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgb(126 34 206 / var(--tw-border-opacity, 1))}.p-popover.p-component:is(.white-menu) li:not(:last-child){border-bottom-width:1px}.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{padding-top:.75rem;padding-bottom:.75rem}.p-popover.p-component .p-popover-content ul li:hover{opacity:.7}.p-popover.p-component .p-popover-content ul li:first-child{padding-top:0}.p-popover.p-component .p-popover-content ul li:last-child{padding-bottom:0}\n"], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["title", "class", "icon", "size", "style", "iconPos", "variant", "disabled", "text", "rounded"], outputs: ["clickEmitter"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: MenuPopupTextColorPipe, name: "popupTextColorClass" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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\"\r\n              [iconPos]=\"buttonIconPosition\"\r\n              [icon]=\"buttonIcon\" [title]=\"buttonTitle\"\r\n              [style]=\"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\r\n            [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>\r\n", styles: [".p-popover.p-component{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover.p-component:is(.purple-menu){margin-top:.5rem;background-color:var(--primary);font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.p-popover.p-component:is(.purple-menu) li:not(:last-child){border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgb(126 34 206 / var(--tw-border-opacity, 1))}.p-popover.p-component:is(.white-menu) li:not(:last-child){border-bottom-width:1px}.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{padding-top:.75rem;padding-bottom:.75rem}.p-popover.p-component .p-popover-content ul li:hover{opacity:.7}.p-popover.p-component .p-popover-content ul li:first-child{padding-top:0}.p-popover.p-component .p-popover-content ul li:last-child{padding-bottom: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 {
+    constructor() {
+        this.show = false;
+        this.closable = false;
+        this.dismissible = false;
+        this.closeOnEscape = false;
+        this.sidebarSize = "sm";
+        this.styleClass = "";
+        this.hide = new EventEmitter();
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onShow = new EventEmitter();
+    }
+    hideSidebar() {
+        this.show = false;
+        this.hide.emit(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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" }, 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\">{{ title }}</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  <ng-template pTemplate=\"content\">\r\n    <ng-content id=\"side-content\"></ng-content>\r\n  </ng-template>\r\n</p-drawer>\r\n", styles: [".sidebar.show{min-width:550px}\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SideBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-side-bar", standalone: true, imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet], 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\">{{ title }}</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  <ng-template pTemplate=\"content\">\r\n    <ng-content id=\"side-content\"></ng-content>\r\n  </ng-template>\r\n</p-drawer>\r\n", styles: [".sidebar.show{min-width:550px}\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
+            }] } });
+
+class UserInfoComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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: "18.2.0", 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
+            }] } });
+
+var FormFieldTypeEnum;
+(function (FormFieldTypeEnum) {
+    FormFieldTypeEnum["DATE_PICKER"] = "date-picker";
+    FormFieldTypeEnum["SELECT_BUTTON"] = "select-button";
+})(FormFieldTypeEnum || (FormFieldTypeEnum = {}));
+
+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 {
+    constructor() {
+        this.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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormValidationService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormValidationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }] });
+
+class ValidationErrorsPipe {
+    constructor() {
+        this.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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ValidationErrorsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: ValidationErrorsPipe, isStandalone: true, name: "validationErrors" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ValidationErrorsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "validationErrors",
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
+class BaseInputComponent {
+    constructor() {
+        this.name = "";
+        this.placeholder = "";
+        this.readonly = false;
+        this.disabled = false;
+        this.destroy$ = new Subject();
+    }
+    get required() {
+        return this.control.hasValidator(Validators.required);
+    }
+    get isInvalid() {
+        return this.control.invalid && this.control.touched;
+    }
+    ngOnInit() {
+        this.inputId = `input-${this.name + "-" + Math.random().toString(36).substring(7)}`;
+        this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((v) => {
+            if (v) {
+                this.control.markAsTouched();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: BaseInputComponent, 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: "18.2.0", 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 InputComponent extends BaseInputComponent {
+    constructor() {
+        super();
+        this.type = "text";
+        this.contentType = "text";
+        this.rows = 2;
+        this.cols = 20;
+        this.autoResize = true;
+        this.inputDirection = "inherit";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  @if (label) {\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span [class.text-red-700]=\"isInvalid\">*</span>\r\n      }\r\n    </label>\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  @if (type !== 'textarea') {\r\n    <input\r\n      [id]=\"inputId\"\r\n      [type]=\"contentType\"\r\n      [formControl]=\"control\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [disabled]=\"disabled\"\r\n      [name]=\"name\"\r\n      pInputText\r\n      [ngStyle]=\"{'direction': inputDirection || 'inherit', 'text-align': 'right'}\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\"\r\n    />\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  } @else {\r\n    <textarea\r\n      [name]=\"name\"\r\n      [id]=\"inputId\"\r\n      [formControl]=\"control\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [disabled]=\"disabled\"\r\n      pTextarea\r\n      [rows]=\"rows\"\r\n      [cols]=\"cols\"\r\n      [autoResize]=\"autoResize\"\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  @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 text-red-700\">\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{height:auto;min-height:50px;overflow:auto}\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: ["variant", "fluid", "pSize"] }, { kind: "directive", type: Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "stc-input", standalone: true, imports: [ReactiveFormsModule, InputText, Textarea, ValidationErrorsPipe, NgClass, NgStyle, TranslatePipe], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  @if (label) {\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span [class.text-red-700]=\"isInvalid\">*</span>\r\n      }\r\n    </label>\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  @if (type !== 'textarea') {\r\n    <input\r\n      [id]=\"inputId\"\r\n      [type]=\"contentType\"\r\n      [formControl]=\"control\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [disabled]=\"disabled\"\r\n      [name]=\"name\"\r\n      pInputText\r\n      [ngStyle]=\"{'direction': inputDirection || 'inherit', 'text-align': 'right'}\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\"\r\n    />\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  } @else {\r\n    <textarea\r\n      [name]=\"name\"\r\n      [id]=\"inputId\"\r\n      [formControl]=\"control\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [disabled]=\"disabled\"\r\n      pTextarea\r\n      [rows]=\"rows\"\r\n      [cols]=\"cols\"\r\n      [autoResize]=\"autoResize\"\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  @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 text-red-700\">\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{height:auto;min-height:50px;overflow:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], contentType: [{
+                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
+            }] } });
+
+class SelectComponent extends BaseInputComponent {
+    constructor() {
+        super();
+        this.selectedItemTemplate = null;
+        this.optionTemplate = null;
+        this.checkmark = true;
+        this.showClear = false;
+        this.editable = false;
+        this.filter = false;
+        this.multiple = false;
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.change = new EventEmitter();
+    }
+    onChange(e) {
+        this.change.emit(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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", selectedItemsLabel: "selectedItemsLabel", basicInput: "basicInput" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  @if (label) {\r\n  <label [for]=\"inputId\">\r\n    {{ label }}\r\n    @if (required) {\r\n    <span [class.text-red-700]=\"isInvalid\">*</span>\r\n    }\r\n  </label>\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\r\n\r\n  @if(multiple) {\r\n\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    [selectedItemsLabel]=\"selectedItemsLabel\"\r\n    (onChange)=\"onChange($event)\"\r\n    [ngClass]=\"{ 'basic-style': basicInput }\"\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\r\n  } @else {\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      class=\"w-full\"\r\n      (onChange)=\"onChange($event)\"\r\n      [ngClass]=\"{ 'basic-style': basicInput }\"\r\n    >\r\n\r\n\r\n    @if (selectedItemTemplate) {\r\n      <ng-template let-item pTemplate=\"item\">\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n      </ng-template>\r\n    }\r\n  </p-select>\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 text-red-700\">\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: [""], 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", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], 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: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "stc-select", standalone: true, imports: [
+                        FormsModule,
+                        Select,
+                        ReactiveFormsModule,
+                        NgClass,
+                        NgTemplateOutlet,
+                        PrimeTemplate,
+                        ValidationErrorsPipe,
+                        MultiSelectModule,
+                        TranslatePipe
+                    ], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  @if (label) {\r\n  <label [for]=\"inputId\">\r\n    {{ label }}\r\n    @if (required) {\r\n    <span [class.text-red-700]=\"isInvalid\">*</span>\r\n    }\r\n  </label>\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\r\n\r\n  @if(multiple) {\r\n\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    [selectedItemsLabel]=\"selectedItemsLabel\"\r\n    (onChange)=\"onChange($event)\"\r\n    [ngClass]=\"{ 'basic-style': basicInput }\"\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\r\n  } @else {\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      class=\"w-full\"\r\n      (onChange)=\"onChange($event)\"\r\n      [ngClass]=\"{ 'basic-style': basicInput }\"\r\n    >\r\n\r\n\r\n    @if (selectedItemTemplate) {\r\n      <ng-template let-item pTemplate=\"item\">\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n      </ng-template>\r\n    }\r\n  </p-select>\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 text-red-700\">\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" }]
+        }], 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
+            }], selectedItemsLabel: [{
+                type: Input
+            }], basicInput: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class DatePickerComponent extends BaseInputComponent {
+    constructor() {
+        super();
+        this.showIcon = false;
+        this.showClear = false;
+        this.isTimeOnly = false;
+        this.hourFormat = "12";
+        this.nowTime = new Date();
+        this.selectionMode = "single";
+        this.onAfterClearDate = new EventEmitter();
+    }
+    selectCurrentTime(e) {
+        this.control.setValue(this.nowTime);
+    }
+    clearButtonClick(e) {
+        this.control.setValue(null);
+    }
+    afterClearDate() {
+        this.control.reset();
+        this.onAfterClearDate.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\"  >\r\n  @if (label) {\r\n  <label [for]=\"inputId\">\r\n    {{ label }}\r\n    @if (required) {\r\n    <span [class.text-red-700]=\"isInvalid\">*</span>\r\n    }\r\n  </label>\r\n  }\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-datepicker\r\n    [selectionMode]=\"selectionMode\"\r\n    [disabled]=\"disabled\"\r\n    [formControl]=\"control\"\r\n    [iconDisplay]=\"'input'\"\r\n    [showClear]=\"showClear\"\r\n    (onClear)=\"afterClearDate()\"\r\n    [id]=\"inputId\"\r\n    [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n    [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n    [placeholder]=\"placeholder\"\r\n    [showIcon]=\"showIcon\" [styleClass]=\"'w-full'\"\r\n    appendTo=\"body\"\r\n    [timeOnly]=\"isTimeOnly\"\r\n    [hourFormat]=\"hourFormat\"\r\n    [minDate]=\"minDate\"\r\n    [maxDate]=\"maxDate\">\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  @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 text-red-700\">\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{position:absolute;top:50%;left:13px;margin-left:calc(var(--p-icon-size));--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;line-height:1;color:var(--p-datepicker-input-icon-color)}\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", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], 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: CalendarModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "stc-date-picker", standalone: true, imports: [FormsModule, DatePicker, ReactiveFormsModule, NgClass, CalendarModule, ValidationErrorsPipe, TranslatePipe], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\"  >\r\n  @if (label) {\r\n  <label [for]=\"inputId\">\r\n    {{ label }}\r\n    @if (required) {\r\n    <span [class.text-red-700]=\"isInvalid\">*</span>\r\n    }\r\n  </label>\r\n  }\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-datepicker\r\n    [selectionMode]=\"selectionMode\"\r\n    [disabled]=\"disabled\"\r\n    [formControl]=\"control\"\r\n    [iconDisplay]=\"'input'\"\r\n    [showClear]=\"showClear\"\r\n    (onClear)=\"afterClearDate()\"\r\n    [id]=\"inputId\"\r\n    [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n    [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n    [placeholder]=\"placeholder\"\r\n    [showIcon]=\"showIcon\" [styleClass]=\"'w-full'\"\r\n    appendTo=\"body\"\r\n    [timeOnly]=\"isTimeOnly\"\r\n    [hourFormat]=\"hourFormat\"\r\n    [minDate]=\"minDate\"\r\n    [maxDate]=\"maxDate\">\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  @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 text-red-700\">\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{position:absolute;top:50%;left:13px;margin-left:calc(var(--p-icon-size));--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;line-height:1;color:var(--p-datepicker-input-icon-color)}\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
+            }] } });
+
+class AutoCompleteComponent extends BaseInputComponent {
+    constructor() {
+        super();
+        this.selectedItemTemplate = null;
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onSearch = new EventEmitter();
+        this.selectOption = new EventEmitter();
+        this.items = [];
+        this.minLengthToSearch = 3;
+        this.delay = 300; // default value
+    }
+    search(event) {
+        this.onSearch.emit(event.query);
+    }
+    onSelect(event) {
+        this.selectOption.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AutoCompleteComponent, isStandalone: true, selector: "stc-auto-complete", inputs: { selectedItemTemplate: "selectedItemTemplate", items: "items", minLengthToSearch: "minLengthToSearch", delay: "delay", basicInput: "basicInput" }, outputs: { onSearch: "onSearch", selectOption: "selectOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  @if (label) {\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span [class.text-red-700]=\"isInvalid\">*</span>\r\n      }\r\n    </label>\r\n  }\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-auto-complete\r\n    (completeMethod)=\"search($event)\"\r\n    (onSelect)=\"onSelect($event)\"\r\n    [delay]=\"delay\"\r\n    [disabled]=\"disabled\"\r\n    [formControl]=\"control\"\r\n    [id]=\"inputId\"\r\n    [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n    [minLength]=\"minLengthToSearch\"\r\n    [name]=\"name\"\r\n    [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n    [placeholder]=\"placeholder\"\r\n    [styleClass]=\"'w-full'\"\r\n    [suggestions]=\"items\">\r\n    <ng-template let-item pTemplate=\"item\">\r\n      @if (selectedItemTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n          [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n        />\r\n      }\r\n    </ng-template>\r\n  </p-auto-complete>\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 text-red-700\">\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>\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: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "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: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AutoCompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "stc-auto-complete", standalone: true, imports: [
+                        ReactiveFormsModule,
+                        AutoComplete,
+                        PrimeTemplate,
+                        NgIf,
+                        NgTemplateOutlet,
+                        NgClass,
+                        JsonPipe,
+                        ValidationErrorsPipe,
+                        TranslatePipe
+                    ], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  @if (label) {\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span [class.text-red-700]=\"isInvalid\">*</span>\r\n      }\r\n    </label>\r\n  }\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-auto-complete\r\n    (completeMethod)=\"search($event)\"\r\n    (onSelect)=\"onSelect($event)\"\r\n    [delay]=\"delay\"\r\n    [disabled]=\"disabled\"\r\n    [formControl]=\"control\"\r\n    [id]=\"inputId\"\r\n    [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n    [minLength]=\"minLengthToSearch\"\r\n    [name]=\"name\"\r\n    [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n    [placeholder]=\"placeholder\"\r\n    [styleClass]=\"'w-full'\"\r\n    [suggestions]=\"items\">\r\n    <ng-template let-item pTemplate=\"item\">\r\n      @if (selectedItemTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n          [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n        />\r\n      }\r\n    </ng-template>\r\n  </p-auto-complete>\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 text-red-700\">\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>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
+                type: Input
+            }], onSearch: [{
+                type: Output
+            }], selectOption: [{
+                type: Output
+            }], items: [{
+                type: Input
+            }], minLengthToSearch: [{
+                type: Input
+            }], delay: [{
+                type: Input
+            }], basicInput: [{
+                type: Input
+            }] } });
+
+class SelectButtonComponent extends BaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.onChange = new EventEmitter();
+    }
+    changeValue(e) {
+        this.onChange.emit(e.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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 SwitchComponent {
+    constructor() {
+        this.checked = false;
+        this.onChange = new EventEmitter();
+    }
+    // checked: boolean = false;
+    sendUpdatedValue(value) {
+        if (value) {
+            this.onChange.emit(value.checked);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "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: "18.2.0", 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
+            }] } });
+
+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;
+    }
+}
+
+class DynamicFormComponent {
+    constructor() {
+        this.inputsNames = [];
+        this.fieldType = FormFieldTypeEnum;
+        this.getFormControl = FormUtils.getFormControl;
+    }
+    ngOnInit() {
+        this.formGroup = this.dynamicFormData?.formGroup;
+        this.inputsMap = this.dynamicFormData?.inputsMap;
+        this.inputsNames = Object.keys(this.inputsMap || {});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, ngImport: i0, template: "<div class=\"border-t mx-4 py-2\">\r\n  <form [formGroup]=\"formGroup\">\r\n    <div class=\"grid grid-cols-12 gap-x-2\">\r\n      @for (inputName of inputsNames; track $index) {\r\n        <div\r\n          [ngClass]=\"inputsMap[inputName].rowSize === 'half' ? 'col-span-6 md:col-span-6': 'col-span-12 md:col-span-12'\">\r\n          @switch (inputsMap[inputName].fieldType) {\r\n            @case (fieldType.DATE_PICKER) {\r\n              <stc-date-picker\r\n                [minDate]=\"inputsMap[inputName]?.dateRange?.min\"\r\n                [id]=\"inputsMap[inputName].inputId\"\r\n                [control]=\"getFormControl(inputName, formGroup)\"\r\n                [name]=\"inputName\"\r\n                [label]=\"inputsMap[inputName].label\"\r\n                [showIcon]=\"inputsMap[inputName].showIcon || true\"\r\n                [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\"/>\r\n            }\r\n            @case (fieldType.SELECT_BUTTON) {\r\n              <stc-select-button\r\n                [control]=\"getFormControl(inputName, formGroup)\"\r\n                [id]=\"inputsMap[inputName].inputId\"\r\n                [name]=\"inputName\"\r\n                [label]=\"inputsMap[inputName].label\"\r\n                [options]=\"inputsMap[inputName].selectButtonOptions || []\"/>\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</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.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"], outputs: ["onAfterClearDate"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-dynamic-form", standalone: true, imports: [CommonModule, ReactiveFormsModule, DatePickerComponent, ValidationErrorsPipe, TranslateModule, SelectButtonComponent], template: "<div class=\"border-t mx-4 py-2\">\r\n  <form [formGroup]=\"formGroup\">\r\n    <div class=\"grid grid-cols-12 gap-x-2\">\r\n      @for (inputName of inputsNames; track $index) {\r\n        <div\r\n          [ngClass]=\"inputsMap[inputName].rowSize === 'half' ? 'col-span-6 md:col-span-6': 'col-span-12 md:col-span-12'\">\r\n          @switch (inputsMap[inputName].fieldType) {\r\n            @case (fieldType.DATE_PICKER) {\r\n              <stc-date-picker\r\n                [minDate]=\"inputsMap[inputName]?.dateRange?.min\"\r\n                [id]=\"inputsMap[inputName].inputId\"\r\n                [control]=\"getFormControl(inputName, formGroup)\"\r\n                [name]=\"inputName\"\r\n                [label]=\"inputsMap[inputName].label\"\r\n                [showIcon]=\"inputsMap[inputName].showIcon || true\"\r\n                [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\"/>\r\n            }\r\n            @case (fieldType.SELECT_BUTTON) {\r\n              <stc-select-button\r\n                [control]=\"getFormControl(inputName, formGroup)\"\r\n                [id]=\"inputsMap[inputName].inputId\"\r\n                [name]=\"inputName\"\r\n                [label]=\"inputsMap[inputName].label\"\r\n                [options]=\"inputsMap[inputName].selectButtonOptions || []\"/>\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</div>\r\n" }]
+        }], propDecorators: { dynamicFormData: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class ConfirmationDialogComponent {
+    constructor() {
+        this.router = inject(Router);
+        this.dialogService = inject(DialogService);
+        this.dynamicDialogConfig = inject(DynamicDialogConfig);
+        this._ref = inject(DynamicDialogRef);
+        this._subscription = new Subscription();
+    }
+    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();
+            }
+        }));
+        this.dialogFormData = this.dynamicDialogConfig.data?.inputForm;
+    }
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
+    submit() {
+        const submitData = { submitted: true, data: this.dialogFormData?.formGroup?.value };
+        this._ref.close(this.dynamicDialogConfig.data.inputForm ? submitData : true);
+    }
+    close() {
+        this._ref.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirm-dialog", providers: [DialogService], ngImport: i0, template: "@if (dynamicDialogConfig.data) {\r\n  <div>\r\n    <div class=\"bg-gray-150 p-4 flex items-center\">\r\n      <div class=\"flex-grow flex gap-2\">\r\n        @if (dynamicDialogConfig.data.headerIcon) {\r\n          <i [class]=\"dynamicDialogConfig.data.headerIcon\"></i>\r\n        }\r\n\r\n        <h3 class=\"m-0 font-bold text-[16px]\">\r\n          {{ dynamicDialogConfig.data.header }}\r\n        </h3>\r\n      </div>\r\n\r\n      <app-button (click)=\"close()\" icon=\"font-icon-close\" [style]=\"'secondary'\" variant=\"text\"/>\r\n    </div>\r\n\r\n    @if (dynamicDialogConfig.data) {\r\n      <div class=\"p-4\">\r\n        @if (dynamicDialogConfig.data.dialogIcon) {\r\n          <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n        }\r\n        <div>\r\n          {{ dynamicDialogConfig.data.message }}\r\n        </div>\r\n        @if (dynamicDialogConfig.data.hint) {\r\n          <div class=\"font-bold text-[14px] mt-2\">\r\n            {{ dynamicDialogConfig.data.hint }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (dynamicDialogConfig.data.inputForm) {\r\n      <app-dynamic-form [dynamicFormData]=\"dialogFormData\"></app-dynamic-form>\r\n    }\r\n\r\n    <div class=\"p-4 flex gap-3\">\r\n      <app-button\r\n        [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\" class=\"w-[50%]\"\r\n        [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\"\r\n        [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n        [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\"\r\n        [style]=\"dynamicDialogConfig.data.confirmBtnStyle ||'primary'\"\r\n        (click)=\"submit()\"/>\r\n\r\n      <app-button\r\n        [title]=\"dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)\"\r\n        class=\"w-[50%]\"\r\n        [style]=\"'secondary'\"\r\n        [variant]=\"'outlined'\"\r\n        (click)=\"close()\"/>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["title", "class", "icon", "size", "style", "iconPos", "variant", "disabled", "text", "rounded"], outputs: ["clickEmitter"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: DynamicDialog }, { kind: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["dynamicFormData"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-confirm-dialog", standalone: true, imports: [AppButtonComponent, AvatarModule, DynamicDialog, DynamicFormComponent, TranslatePipe], providers: [DialogService], template: "@if (dynamicDialogConfig.data) {\r\n  <div>\r\n    <div class=\"bg-gray-150 p-4 flex items-center\">\r\n      <div class=\"flex-grow flex gap-2\">\r\n        @if (dynamicDialogConfig.data.headerIcon) {\r\n          <i [class]=\"dynamicDialogConfig.data.headerIcon\"></i>\r\n        }\r\n\r\n        <h3 class=\"m-0 font-bold text-[16px]\">\r\n          {{ dynamicDialogConfig.data.header }}\r\n        </h3>\r\n      </div>\r\n\r\n      <app-button (click)=\"close()\" icon=\"font-icon-close\" [style]=\"'secondary'\" variant=\"text\"/>\r\n    </div>\r\n\r\n    @if (dynamicDialogConfig.data) {\r\n      <div class=\"p-4\">\r\n        @if (dynamicDialogConfig.data.dialogIcon) {\r\n          <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n        }\r\n        <div>\r\n          {{ dynamicDialogConfig.data.message }}\r\n        </div>\r\n        @if (dynamicDialogConfig.data.hint) {\r\n          <div class=\"font-bold text-[14px] mt-2\">\r\n            {{ dynamicDialogConfig.data.hint }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (dynamicDialogConfig.data.inputForm) {\r\n      <app-dynamic-form [dynamicFormData]=\"dialogFormData\"></app-dynamic-form>\r\n    }\r\n\r\n    <div class=\"p-4 flex gap-3\">\r\n      <app-button\r\n        [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\" class=\"w-[50%]\"\r\n        [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\"\r\n        [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n        [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\"\r\n        [style]=\"dynamicDialogConfig.data.confirmBtnStyle ||'primary'\"\r\n        (click)=\"submit()\"/>\r\n\r\n      <app-button\r\n        [title]=\"dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)\"\r\n        class=\"w-[50%]\"\r\n        [style]=\"'secondary'\"\r\n        [variant]=\"'outlined'\"\r\n        (click)=\"close()\"/>\r\n    </div>\r\n  </div>\r\n}\r\n" }]
+        }] });
+
+class ReadMoreComponent {
+    constructor() {
+        this.text = "";
+        this.styleClass = "";
+        this.maxCharacters = 100;
+        this.isExpanded = false;
+    }
+    toggleReadMore() {
+        this.isExpanded = !this.isExpanded;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ReadMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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 {
+    constructor() {
+        this.iconPathCount = 0;
+        this.contentBorderTop = true;
+        this.accordionPanelBorder = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AppAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$3.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i2$3.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i2$3.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i2$3.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: "18.2.0", 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 {
+    constructor() {
+        this.select = new EventEmitter();
+        this.delete = new EventEmitter();
+        this.explicitRole = "";
+        this.showDeleteAction = true;
+    }
+    onDelete() {
+        this.delete.emit(this.userData);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: UserAutocompleteCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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", inputs: ["title", "class", "icon", "size", "style", "iconPos", "variant", "disabled", "text", "rounded"], outputs: ["clickEmitter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppAccordionComponent, AppButtonComponent, AppDropdownMenuComponent, AppTabsComponent, AutoCompleteComponent, BasicErrorKeysEnum, ConfirmationDialogComponent, DatePickerComponent, DynamicFormComponent, ErrorsWithValuesKeysEnum, FormFieldTypeEnum, FormUtils, FormValidationService, IcoMoonIconComponent, InputComponent, ReadMoreComponent, SelectButtonComponent, SelectComponent, SideBarComponent, SwitchComponent, UserAutocompleteCardComponent, UserInfoComponent, ValidationErrorsPipe };
+//# sourceMappingURL=corp-products-ui-components.mjs.map