@corp-products/ui-components 3.2.7 → 3.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (138) hide show
  1. package/ng-package.json +7 -0
  2. package/package.json +22 -36
  3. package/src/enums/date-formatter.ts +21 -0
  4. package/src/helper/date-handler.ts +142 -0
  5. package/src/lib/app-accordion/app-accordion.component.html +15 -0
  6. package/src/lib/app-accordion/app-accordion.component.scss +0 -0
  7. package/src/lib/app-accordion/app-accordion.component.spec.ts +21 -0
  8. package/src/lib/app-accordion/app-accordion.component.ts +21 -0
  9. package/src/lib/app-accordion/index.ts +2 -0
  10. package/src/lib/app-breadcrumb/app-breadcrumb.component.html +7 -0
  11. package/src/lib/app-breadcrumb/app-breadcrumb.component.scss +25 -0
  12. package/src/lib/app-breadcrumb/app-breadcrumb.component.ts +140 -0
  13. package/src/lib/app-breadcrumb/app-breadcrumb.interface.ts +15 -0
  14. package/src/lib/app-button/app-button.component.html +7 -0
  15. package/src/lib/app-button/app-button.component.scss +0 -0
  16. package/src/lib/app-button/app-button.component.ts +14 -0
  17. package/src/lib/app-button/app-button.ts +15 -0
  18. package/src/lib/app-button/index.ts +2 -0
  19. package/src/lib/app-dropdown-menu/app-dropdown-menu.component.html +22 -0
  20. package/src/lib/app-dropdown-menu/app-dropdown-menu.component.scss +39 -0
  21. package/src/lib/app-dropdown-menu/app-dropdown-menu.component.spec.ts +21 -0
  22. package/src/lib/app-dropdown-menu/app-dropdown-menu.component.ts +43 -0
  23. package/src/lib/app-dropdown-menu/app-dropdown-menu.ts +17 -0
  24. package/src/lib/app-dropdown-menu/index.ts +2 -0
  25. package/src/lib/app-dropdown-menu/menu-popup.pipe.ts +18 -0
  26. package/src/lib/app-header/app-header.component.html +26 -0
  27. package/src/lib/app-header/app-header.component.scss +0 -0
  28. package/src/lib/app-header/app-header.component.ts +43 -0
  29. package/src/lib/app-side-menu/app-side-menu.component.html +20 -0
  30. package/src/lib/app-side-menu/app-side-menu.component.ts +28 -0
  31. package/src/lib/app-side-menu/routes-names.ts +28 -0
  32. package/src/lib/app-side-menu/side-menu-items.ts +45 -0
  33. package/src/lib/app-side-menu/side-menu.ts +12 -0
  34. package/src/lib/app-tabs/app-tab.interface.ts +27 -0
  35. package/src/lib/app-tabs/app-tabs.component.html +37 -0
  36. package/src/lib/app-tabs/app-tabs.component.scss +103 -0
  37. package/src/lib/app-tabs/app-tabs.component.spec.ts +21 -0
  38. package/src/lib/app-tabs/app-tabs.component.ts +67 -0
  39. package/src/lib/app-tabs/index.ts +2 -0
  40. package/src/lib/bottom-sheet/bottom-sheet.component.html +18 -0
  41. package/src/lib/bottom-sheet/bottom-sheet.component.scss +31 -0
  42. package/src/lib/bottom-sheet/bottom-sheet.component.ts +26 -0
  43. package/src/lib/confirmation-dialog/confirmation-dialog.component.html +37 -0
  44. package/src/lib/confirmation-dialog/confirmation-dialog.component.scss +0 -0
  45. package/src/lib/confirmation-dialog/confirmation-dialog.component.spec.ts +22 -0
  46. package/src/lib/confirmation-dialog/confirmation-dialog.component.ts +64 -0
  47. package/src/lib/confirmation-dialog/confirmation-dialog.interface.ts +13 -0
  48. package/src/lib/confirmation-dialog/confirmation-dialog.service.ts +34 -0
  49. package/src/lib/dual-calender/date-picker-switcher/date-picker-switcher.component.html +27 -0
  50. package/src/lib/dual-calender/date-picker-switcher/date-picker-switcher.component.scss +22 -0
  51. package/src/lib/dual-calender/date-picker-switcher/date-picker-switcher.component.ts +64 -0
  52. package/src/lib/dual-calender/dual-calendar.component.html +31 -0
  53. package/src/lib/dual-calender/dual-calendar.component.scss +229 -0
  54. package/src/lib/dual-calender/dual-calendar.component.ts +107 -0
  55. package/src/lib/dual-calender/gregorian-calendar/gregorian-calendar.component.html +10 -0
  56. package/src/lib/dual-calender/gregorian-calendar/gregorian-calendar.component.scss +0 -0
  57. package/src/lib/dual-calender/gregorian-calendar/gregorian-calendar.component.spec.ts +21 -0
  58. package/src/lib/dual-calender/gregorian-calendar/gregorian-calendar.component.ts +59 -0
  59. package/src/lib/dual-calender/hijri-calendar/hijri-calendar.component.html +10 -0
  60. package/src/lib/dual-calender/hijri-calendar/hijri-calendar.component.scss +0 -0
  61. package/src/lib/dual-calender/hijri-calendar/hijri-calendar.component.spec.ts +21 -0
  62. package/src/lib/dual-calender/hijri-calendar/hijri-calendar.component.ts +59 -0
  63. package/src/lib/dual-calender/services/gregorian-i18n.service.ts +123 -0
  64. package/src/lib/dual-calender/services/islamic-i18n.service.ts +119 -0
  65. package/src/lib/dual-calender/utils/date-i18n.utils.ts +58 -0
  66. package/src/lib/dynamic-form/dynamic-form.component.html +86 -0
  67. package/src/lib/dynamic-form/dynamic-form.component.scss +0 -0
  68. package/src/lib/dynamic-form/dynamic-form.component.spec.ts +21 -0
  69. package/src/lib/dynamic-form/dynamic-form.component.ts +58 -0
  70. package/src/lib/dynamic-form/dynamic-form.interface.ts +94 -0
  71. package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.component.html +32 -0
  72. package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.component.scss +3 -0
  73. package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.component.ts +82 -0
  74. package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.config.ts +31 -0
  75. package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.service.ts +41 -0
  76. package/src/lib/form-components/@utils/form-utils.ts +12 -0
  77. package/src/lib/form-components/@utils/validations/error-keys.enum.ts +24 -0
  78. package/src/lib/form-components/@utils/validations/form-validation.service.ts +68 -0
  79. package/src/lib/form-components/@utils/validations/index.ts +3 -0
  80. package/src/lib/form-components/@utils/validations/validation-message.pipe.ts +24 -0
  81. package/src/lib/form-components/components/auto-complete/auto-complete.component.html +35 -0
  82. package/src/lib/form-components/components/auto-complete/auto-complete.component.scss +7 -0
  83. package/src/lib/form-components/components/auto-complete/auto-complete.component.spec.ts +21 -0
  84. package/src/lib/form-components/components/auto-complete/auto-complete.component.ts +57 -0
  85. package/src/lib/form-components/components/base-input.component.ts +35 -0
  86. package/src/lib/form-components/components/date-picker/date-picker.component.html +41 -0
  87. package/src/lib/form-components/components/date-picker/date-picker.component.scss +16 -0
  88. package/src/lib/form-components/components/date-picker/date-picker.component.spec.ts +21 -0
  89. package/src/lib/form-components/components/date-picker/date-picker.component.ts +54 -0
  90. package/src/lib/form-components/components/input/input.component.html +63 -0
  91. package/src/lib/form-components/components/input/input.component.scss +41 -0
  92. package/src/lib/form-components/components/input/input.component.spec.ts +21 -0
  93. package/src/lib/form-components/components/input/input.component.ts +45 -0
  94. package/src/lib/form-components/components/select/select.component.html +111 -0
  95. package/src/lib/form-components/components/select/select.component.scss +43 -0
  96. package/src/lib/form-components/components/select/select.component.spec.ts +21 -0
  97. package/src/lib/form-components/components/select/select.component.ts +56 -0
  98. package/src/lib/form-components/components/select-button/select-button.component.html +21 -0
  99. package/src/lib/form-components/components/select-button/select-button.component.scss +0 -0
  100. package/src/lib/form-components/components/select-button/select-button.component.spec.ts +21 -0
  101. package/src/lib/form-components/components/select-button/select-button.component.ts +22 -0
  102. package/src/lib/form-components/components/switcher/switch.component.html +5 -0
  103. package/src/lib/form-components/components/switcher/switch.component.scss +0 -0
  104. package/src/lib/form-components/components/switcher/switch.component.spec.ts +21 -0
  105. package/src/lib/form-components/components/switcher/switch.component.ts +25 -0
  106. package/src/lib/form-components/index.ts +9 -0
  107. package/src/lib/form-components/interfaces/index.ts +1 -0
  108. package/src/lib/form-components/interfaces/label-value.ts +4 -0
  109. package/src/lib/ico-moon-icon/ico-moon-icon.component.ts +23 -0
  110. package/src/lib/read-more/read-more.component.html +17 -0
  111. package/src/lib/read-more/read-more.component.scss +0 -0
  112. package/src/lib/read-more/read-more.component.spec.ts +21 -0
  113. package/src/lib/read-more/read-more.component.ts +21 -0
  114. package/src/lib/side-bar/side-bar.component.html +24 -0
  115. package/src/lib/side-bar/side-bar.component.scss +22 -0
  116. package/src/lib/side-bar/side-bar.component.spec.ts +21 -0
  117. package/src/lib/side-bar/side-bar.component.ts +33 -0
  118. package/src/lib/side-bar-dynamic/data-injector.pipe.ts +15 -0
  119. package/src/lib/side-bar-dynamic/dynamic-sidebar.service.ts +116 -0
  120. package/src/lib/side-bar-dynamic/side-bar-dynamic.component.html +42 -0
  121. package/src/lib/side-bar-dynamic/side-bar-dynamic.component.scss +5 -0
  122. package/src/lib/side-bar-dynamic/side-bar-dynamic.component.spec.ts +21 -0
  123. package/src/lib/side-bar-dynamic/side-bar-dynamic.component.ts +37 -0
  124. package/src/lib/side-bar-dynamic/side-bar-utils.ts +30 -0
  125. package/src/lib/side-bar-dynamic/sidebar-config.ts +48 -0
  126. package/src/lib/user-autocomplete-card/user-autocomplete-card.component.html +20 -0
  127. package/src/lib/user-autocomplete-card/user-autocomplete-card.component.scss +0 -0
  128. package/src/lib/user-autocomplete-card/user-autocomplete-card.component.spec.ts +21 -0
  129. package/src/lib/user-autocomplete-card/user-autocomplete-card.component.ts +21 -0
  130. package/src/lib/user-info/user-info.component.html +10 -0
  131. package/src/lib/user-info/user-info.component.ts +11 -0
  132. package/src/public-api.ts +26 -0
  133. package/tsconfig.lib.json +18 -0
  134. package/tsconfig.lib.prod.json +11 -0
  135. package/tsconfig.spec.json +14 -0
  136. package/fesm2022/corp-products-ui-components.mjs +0 -1409
  137. package/fesm2022/corp-products-ui-components.mjs.map +0 -1
  138. package/index.d.ts +0 -623
@@ -1,1409 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, Injectable, InjectionToken, Injector, createComponent, ViewContainerRef, ViewChild, ApplicationRef, EnvironmentInjector } from '@angular/core';
3
- import * as i1 from 'primeng/button';
4
- import { Button, ButtonModule, ButtonStyle } from 'primeng/button';
5
- import * as i1$1 from '@angular/common';
6
- import { CommonModule, NgClass, NgTemplateOutlet, NgIf, JsonPipe, NgStyle, SlicePipe, Location, NgComponentOutlet } from '@angular/common';
7
- import * as i2 from 'primeng/tabs';
8
- import { TabsModule } from 'primeng/tabs';
9
- import * as i1$2 from '@ngx-translate/core';
10
- import { TranslateModule, TranslateService, TranslatePipe } from '@ngx-translate/core';
11
- import * as i1$6 from '@angular/router';
12
- import { Router, ActivatedRoute, NavigationEnd, RouterLink, RouterOutlet, NavigationStart, RouterModule } from '@angular/router';
13
- import { filter, Subject, Subscription, BehaviorSubject } from 'rxjs';
14
- import * as i3 from 'primeng/badge';
15
- import { BadgeModule } from 'primeng/badge';
16
- import { Popover } from 'primeng/popover';
17
- import * as i2$1 from 'primeng/api';
18
- import { PrimeTemplate } from 'primeng/api';
19
- import * as i1$8 from 'primeng/drawer';
20
- import { Drawer, DrawerModule } from 'primeng/drawer';
21
- import * as i1$3 from 'primeng/tooltip';
22
- import { TooltipModule } from 'primeng/tooltip';
23
- import { AvatarModule } from 'primeng/avatar';
24
- import * as i1$7 from 'primeng/dynamicdialog';
25
- import { DynamicDialogRef, DialogService, DynamicDialogConfig, DynamicDialogModule, DynamicDialogStyle } from 'primeng/dynamicdialog';
26
- import * as i1$4 from '@angular/forms';
27
- import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
28
- import { AutoComplete } from 'primeng/autocomplete';
29
- import { DatePicker, DatePickerModule } from 'primeng/datepicker';
30
- import * as i3$1 from 'primeng/floatlabel';
31
- import { FloatLabelModule } from 'primeng/floatlabel';
32
- import { InputText } from 'primeng/inputtext';
33
- import { Textarea } from 'primeng/textarea';
34
- import * as i2$2 from 'primeng/selectbutton';
35
- import { SelectButtonModule } from 'primeng/selectbutton';
36
- import * as i2$3 from 'primeng/multiselect';
37
- import { MultiSelectModule } from 'primeng/multiselect';
38
- import { Select } from 'primeng/select';
39
- import * as i1$5 from 'primeng/toggleswitch';
40
- import { ToggleSwitchModule } from 'primeng/toggleswitch';
41
- import * as i2$4 from 'primeng/accordion';
42
- import { AccordionModule } from 'primeng/accordion';
43
- import { DividerModule } from 'primeng/divider';
44
- import { Breadcrumb } from 'primeng/breadcrumb';
45
- import { filter as filter$1, map } from 'rxjs/operators';
46
-
47
- class AppButtonComponent extends Button {
48
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
49
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: AppButtonComponent, isStandalone: true, selector: "app-button", providers: [ButtonStyle], usesInheritance: true, ngImport: i0, template: "<p-button (onFocus)=\"onFocus.emit()\" (onBlur)=\"onBlur.emit()\" (onClick)=\"onClick.emit()\" [size]=\"size\"\r\n [loadingIcon]=\"loadingIcon\" [disabled]=\"disabled\" [iconPos]=\"iconPos\" [icon]=\"icon\" [label]=\"label\"\r\n [rounded]=\"rounded\" [severity]=\"severity\" [styleClass]=\"styleClass\" [text]=\"text\" [variant]=\"variant\"\r\n [loading]=\"loading\" [autofocus]=\"autofocus\" [link]=\"link\" [plain]=\"plain\" [raised]=\"raised\"\r\n [loadingIcon]=\"loadingIcon\" [style]=\"style\" [outlined]=\"outlined\">\r\n <ng-content></ng-content>\r\n</p-button>", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
50
- }
51
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppButtonComponent, decorators: [{
52
- type: Component,
53
- args: [{ imports: [ButtonModule], selector: 'app-button', standalone: true, encapsulation: ViewEncapsulation.None, providers: [ButtonStyle], template: "<p-button (onFocus)=\"onFocus.emit()\" (onBlur)=\"onBlur.emit()\" (onClick)=\"onClick.emit()\" [size]=\"size\"\r\n [loadingIcon]=\"loadingIcon\" [disabled]=\"disabled\" [iconPos]=\"iconPos\" [icon]=\"icon\" [label]=\"label\"\r\n [rounded]=\"rounded\" [severity]=\"severity\" [styleClass]=\"styleClass\" [text]=\"text\" [variant]=\"variant\"\r\n [loading]=\"loading\" [autofocus]=\"autofocus\" [link]=\"link\" [plain]=\"plain\" [raised]=\"raised\"\r\n [loadingIcon]=\"loadingIcon\" [style]=\"style\" [outlined]=\"outlined\">\r\n <ng-content></ng-content>\r\n</p-button>" }]
54
- }] });
55
-
56
- class IcoMoonIconComponent {
57
- iconName;
58
- iconClass;
59
- iconPathCount = 0;
60
- get getPathCount() {
61
- return Array.from({ length: this.iconPathCount }, (_, i) => i + 1);
62
- }
63
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IcoMoonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
64
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: IcoMoonIconComponent, isStandalone: true, selector: "app-ico-moon-card", inputs: { iconName: "iconName", iconClass: "iconClass", iconPathCount: "iconPathCount" }, ngImport: i0, template: `
65
- <i [class]="iconName + ' ' + iconClass">
66
- @for (path of getPathCount; track $index) {
67
- <i [class]="iconName + ' path'+path"></i>
68
- }
69
- </i>
70
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
71
- }
72
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IcoMoonIconComponent, decorators: [{
73
- type: Component,
74
- args: [{
75
- selector: 'app-ico-moon-card',
76
- standalone: true,
77
- template: `
78
- <i [class]="iconName + ' ' + iconClass">
79
- @for (path of getPathCount; track $index) {
80
- <i [class]="iconName + ' path'+path"></i>
81
- }
82
- </i>
83
- `,
84
- changeDetection: ChangeDetectionStrategy.OnPush
85
- }]
86
- }], propDecorators: { iconName: [{
87
- type: Input,
88
- args: [{ required: true }]
89
- }], iconClass: [{
90
- type: Input
91
- }], iconPathCount: [{
92
- type: Input
93
- }] } });
94
-
95
- class AppTabsComponent {
96
- tabs;
97
- tabsStyle = 'basic';
98
- responsive = false;
99
- twoDigitCount;
100
- selectedTabIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedTabIndex" }] : []));
101
- activeTabIndex = 0;
102
- router = inject(Router);
103
- route = inject(ActivatedRoute);
104
- ngOnInit() {
105
- this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
106
- this.updateActiveTab();
107
- });
108
- // to be refactor
109
- this.updateActiveTab();
110
- }
111
- // Updates the active tab index based on the current route
112
- updateActiveTab() {
113
- if (!this.tabs.isRouted)
114
- return;
115
- const currentUrl = this.router.url;
116
- const matchingTabIndex = this.tabs.items.findIndex((tab) => currentUrl.includes(tab.link));
117
- this.activeTabIndex = matchingTabIndex !== -1 ? matchingTabIndex : 0;
118
- }
119
- onTabChange(index) {
120
- this.selectedTabIndex.set(index);
121
- if (!this.tabs.isRouted)
122
- return;
123
- const selectedTab = this.tabs.items[index];
124
- if (selectedTab && !selectedTab.disabled) {
125
- this.router.navigate([selectedTab.link], { relativeTo: this.route });
126
- }
127
- }
128
- getTabCount(count) {
129
- if (!count)
130
- return '0';
131
- return this.twoDigitCount && count > 99 ? '99+' : count.toString();
132
- }
133
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
134
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AppTabsComponent, isStandalone: true, selector: "app-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: false, isRequired: false, transformFunction: null }, tabsStyle: { classPropertyName: "tabsStyle", publicName: "tabsStyle", isSignal: false, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: false, isRequired: false, transformFunction: null }, twoDigitCount: { classPropertyName: "twoDigitCount", publicName: "twoDigitCount", isSignal: false, isRequired: false, transformFunction: null }, selectedTabIndex: { classPropertyName: "selectedTabIndex", publicName: "selectedTabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabIndex: "selectedTabIndexChange" }, ngImport: i0, template: "@if (tabs && tabs.items.length) {\r\n<div [class]=\"tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'\">\r\n <p-tabs [value]=\"selectedTabIndex() || activeTabIndex\" scrollable>\r\n <p-tablist>\r\n\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tab [value]=\"i\" [routerLink]=\"tabs.isRouted ? $any(tab).link : null\" [disabled]=\"tab.disabled\"\r\n (click)=\"onTabChange(i)\">\r\n @if (tab.iconName) {\r\n <app-ico-moon-card [iconClass]=\"'text-[17px]'\" [iconName]=\"tab.iconName\"\r\n [iconPathCount]=\"tab.iconPathCount || 0\" />\r\n }\r\n <span>{{ tab.title | translate }}\r\n @if (tab.count || tab.count === 0) {\r\n <p-badge [value]=\"getTabCount(tab.count)\" severity=\"secondary\" />\r\n }\r\n </span>\r\n </p-tab>\r\n }\r\n\r\n </p-tablist>\r\n\r\n <p-tabpanels>\r\n @if (tabs.isRouted) {\r\n <router-outlet></router-outlet>\r\n } @else {\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tabpanel [value]=\"i\">\r\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n </p-tabpanel>\r\n }\r\n }\r\n\r\n </p-tabpanels>\r\n </p-tabs>\r\n</div>\r\n}", styles: [".tabs-container.full-width .p-tabs .p-tablist-tab-list .p-tab{@apply flex-grow flex justify-center max-w-[50%];}.tabs-container .p-tabs .p-tablist-tab-list{@apply relative;}.tabs-container .p-tabs .p-tablist-tab-list:after{@apply content-[\"\"] w-full h-[3px] bg-purple-800/5 absolute bottom-0 right-0 z-[1];}.tabs-container .p-tabs .p-tablist-tab-list .p-tab{@apply text-sm text-gray-400 font-normal text-[16px] border-b-[4px] border-transparent z-[2];}.tabs-container .p-tabs .p-tablist-tab-list .p-tab:not(.p-tab-active) app-ico-moon-card{@apply grayscale;}.tabs-container .p-tabs .p-tablist-active-bar{@apply hidden;}.tabs-container .p-tabs .p-tabpanels.p-component{@apply mt-5 rounded-lg;}.tabs-container.basic .p-tabs .p-tablist-tab-list{@apply bg-transparent;}.tabs-container.basic .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply text-primary border-primary;}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab{@apply rounded-t-lg text-[14px];}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply bg-purple-800/5 font-semibold text-primary border-primary;}.tabs-container.primary .p-tabs .p-tablist-tab-list:after{@apply bg-purple-800/5;}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab{@apply rounded-t-lg text-[14px];}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply bg-primary font-semibold text-white border-secondary;}[dir=rtl] .p-tabs .p-tablist .p-iconwrapper{@apply rotate-180deg;}[dir=rtl] .p-tabs .p-tablist .p-tablist-next-button{@apply right-auto left-0;}[dir=rtl] .p-tabs .p-tablist .p-tablist-prev-button{@apply right-0 left-auto;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabList, selector: "p-tablist" }, { kind: "component", type: i2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: IcoMoonIconComponent, selector: "app-ico-moon-card", inputs: ["iconName", "iconClass", "iconPathCount"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
135
- }
136
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppTabsComponent, decorators: [{
137
- type: Component,
138
- args: [{ selector: 'app-tabs', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
139
- CommonModule,
140
- TabsModule,
141
- RouterLink,
142
- RouterOutlet,
143
- IcoMoonIconComponent,
144
- TranslateModule,
145
- BadgeModule,
146
- ], template: "@if (tabs && tabs.items.length) {\r\n<div [class]=\"tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'\">\r\n <p-tabs [value]=\"selectedTabIndex() || activeTabIndex\" scrollable>\r\n <p-tablist>\r\n\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tab [value]=\"i\" [routerLink]=\"tabs.isRouted ? $any(tab).link : null\" [disabled]=\"tab.disabled\"\r\n (click)=\"onTabChange(i)\">\r\n @if (tab.iconName) {\r\n <app-ico-moon-card [iconClass]=\"'text-[17px]'\" [iconName]=\"tab.iconName\"\r\n [iconPathCount]=\"tab.iconPathCount || 0\" />\r\n }\r\n <span>{{ tab.title | translate }}\r\n @if (tab.count || tab.count === 0) {\r\n <p-badge [value]=\"getTabCount(tab.count)\" severity=\"secondary\" />\r\n }\r\n </span>\r\n </p-tab>\r\n }\r\n\r\n </p-tablist>\r\n\r\n <p-tabpanels>\r\n @if (tabs.isRouted) {\r\n <router-outlet></router-outlet>\r\n } @else {\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tabpanel [value]=\"i\">\r\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n </p-tabpanel>\r\n }\r\n }\r\n\r\n </p-tabpanels>\r\n </p-tabs>\r\n</div>\r\n}", styles: [".tabs-container.full-width .p-tabs .p-tablist-tab-list .p-tab{@apply flex-grow flex justify-center max-w-[50%];}.tabs-container .p-tabs .p-tablist-tab-list{@apply relative;}.tabs-container .p-tabs .p-tablist-tab-list:after{@apply content-[\"\"] w-full h-[3px] bg-purple-800/5 absolute bottom-0 right-0 z-[1];}.tabs-container .p-tabs .p-tablist-tab-list .p-tab{@apply text-sm text-gray-400 font-normal text-[16px] border-b-[4px] border-transparent z-[2];}.tabs-container .p-tabs .p-tablist-tab-list .p-tab:not(.p-tab-active) app-ico-moon-card{@apply grayscale;}.tabs-container .p-tabs .p-tablist-active-bar{@apply hidden;}.tabs-container .p-tabs .p-tabpanels.p-component{@apply mt-5 rounded-lg;}.tabs-container.basic .p-tabs .p-tablist-tab-list{@apply bg-transparent;}.tabs-container.basic .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply text-primary border-primary;}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab{@apply rounded-t-lg text-[14px];}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply bg-purple-800/5 font-semibold text-primary border-primary;}.tabs-container.primary .p-tabs .p-tablist-tab-list:after{@apply bg-purple-800/5;}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab{@apply rounded-t-lg text-[14px];}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply bg-primary font-semibold text-white border-secondary;}[dir=rtl] .p-tabs .p-tablist .p-iconwrapper{@apply rotate-180deg;}[dir=rtl] .p-tabs .p-tablist .p-tablist-next-button{@apply right-auto left-0;}[dir=rtl] .p-tabs .p-tablist .p-tablist-prev-button{@apply right-0 left-auto;}\n"] }]
147
- }], propDecorators: { tabs: [{
148
- type: Input
149
- }], tabsStyle: [{
150
- type: Input
151
- }], responsive: [{
152
- type: Input
153
- }], twoDigitCount: [{
154
- type: Input
155
- }] } });
156
-
157
- class MenuPopupTextColorPipe {
158
- transform(color) {
159
- switch (color) {
160
- case 'white': return 'text-white';
161
- case 'purple': return 'text-purple-500';
162
- case 'green': return 'text-green-500';
163
- default: return 'text-white';
164
- }
165
- }
166
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MenuPopupTextColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
167
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: MenuPopupTextColorPipe, isStandalone: true, name: "popupTextColorClass" });
168
- }
169
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MenuPopupTextColorPipe, decorators: [{
170
- type: Pipe,
171
- args: [{
172
- name: 'popupTextColorClass',
173
- standalone: true,
174
- pure: true
175
- }]
176
- }] });
177
-
178
- class AppDropdownMenuComponent {
179
- buttonTitle;
180
- menuItems = [];
181
- popupMenuStyle = "purple";
182
- buttonIcon = "font-icon-plus";
183
- buttonClass;
184
- buttonStyle;
185
- buttonIconPosition = "left";
186
- router = inject(Router);
187
- showMenu;
188
- ngOnInit() {
189
- this.showMenu = this.menuItems.some((item) => {
190
- return item.show;
191
- });
192
- }
193
- onMenuItemClick(item) {
194
- if (item.callback) {
195
- item.callback();
196
- }
197
- else if (item.routerLink) {
198
- this.router.navigate(Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink], { queryParams: item.queryParams || {} });
199
- }
200
- }
201
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
202
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AppDropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { buttonTitle: "buttonTitle", menuItems: "menuItems", popupMenuStyle: "popupMenuStyle", buttonIcon: "buttonIcon", buttonClass: "buttonClass", buttonStyle: "buttonStyle", buttonIconPosition: "buttonIconPosition" }, ngImport: i0, template: "@if (showMenu) {\r\n<app-button (click)=\"op.toggle($event)\" [class]=\"buttonClass\" [iconPos]=\"buttonIconPosition\" [icon]=\"buttonIcon\"\r\n [title]=\"buttonTitle\" [styleClass]=\"buttonStyle\" />\r\n}\r\n<p-popover #op [styleClass]=\"popupMenuStyle === 'white' ? 'white-menu' : 'purple-menu'\">\r\n <div class=\"flex flex-col gap-4 text-sm md:text-xs\">\r\n <ul>\r\n @for (item of menuItems; track $index) {\r\n @if (item.show) {\r\n <li [ngClass]=\"{'flex-row-reverse': item.iconPosition === 'right'}\"\r\n [class]=\"'flex justify-between min-w-[130px] gap-3 items-center cursor-pointer text-sm ' + (item.textColor | popupTextColorClass)\"\r\n (click)=\"onMenuItemClick(item)\">\r\n {{ item.title | translate }}\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</p-popover>", styles: [".p-popover.p-component{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover.p-component:is(.purple-menu){@apply bg-primary text-white text-sm mt-2;}.p-popover.p-component:is(.purple-menu) li:not(:last-child){@apply border-b-2 border-purple-700;}.p-popover.p-component:is(.white-menu) li:not(:last-child){@apply border-b;}.p-popover.p-component:before,.p-popover.p-component:after{display:none}.p-popover.p-component .p-popover-content{width:auto;min-width:unset}.p-popover.p-component .p-popover-content ul li{@apply py-3;}.p-popover.p-component .p-popover-content ul li:hover{opacity:.7}.p-popover.p-component .p-popover-content ul li:first-child{@apply pt-0;}.p-popover.p-component .p-popover-content ul li:last-child{@apply pb-0;}\n"], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: MenuPopupTextColorPipe, name: "popupTextColorClass" }], encapsulation: i0.ViewEncapsulation.None });
203
- }
204
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppDropdownMenuComponent, decorators: [{
205
- type: Component,
206
- args: [{ selector: "app-dropdown-menu", standalone: true, imports: [AppButtonComponent, Popover, TranslateModule, NgClass, MenuPopupTextColorPipe], encapsulation: ViewEncapsulation.None, template: "@if (showMenu) {\r\n<app-button (click)=\"op.toggle($event)\" [class]=\"buttonClass\" [iconPos]=\"buttonIconPosition\" [icon]=\"buttonIcon\"\r\n [title]=\"buttonTitle\" [styleClass]=\"buttonStyle\" />\r\n}\r\n<p-popover #op [styleClass]=\"popupMenuStyle === 'white' ? 'white-menu' : 'purple-menu'\">\r\n <div class=\"flex flex-col gap-4 text-sm md:text-xs\">\r\n <ul>\r\n @for (item of menuItems; track $index) {\r\n @if (item.show) {\r\n <li [ngClass]=\"{'flex-row-reverse': item.iconPosition === 'right'}\"\r\n [class]=\"'flex justify-between min-w-[130px] gap-3 items-center cursor-pointer text-sm ' + (item.textColor | popupTextColorClass)\"\r\n (click)=\"onMenuItemClick(item)\">\r\n {{ item.title | translate }}\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</p-popover>", styles: [".p-popover.p-component{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover.p-component:is(.purple-menu){@apply bg-primary text-white text-sm mt-2;}.p-popover.p-component:is(.purple-menu) li:not(:last-child){@apply border-b-2 border-purple-700;}.p-popover.p-component:is(.white-menu) li:not(:last-child){@apply border-b;}.p-popover.p-component:before,.p-popover.p-component:after{display:none}.p-popover.p-component .p-popover-content{width:auto;min-width:unset}.p-popover.p-component .p-popover-content ul li{@apply py-3;}.p-popover.p-component .p-popover-content ul li:hover{opacity:.7}.p-popover.p-component .p-popover-content ul li:first-child{@apply pt-0;}.p-popover.p-component .p-popover-content ul li:last-child{@apply pb-0;}\n"] }]
207
- }], propDecorators: { buttonTitle: [{
208
- type: Input,
209
- args: [{ required: true }]
210
- }], menuItems: [{
211
- type: Input,
212
- args: [{ required: true }]
213
- }], popupMenuStyle: [{
214
- type: Input
215
- }], buttonIcon: [{
216
- type: Input
217
- }], buttonClass: [{
218
- type: Input
219
- }], buttonStyle: [{
220
- type: Input
221
- }], buttonIconPosition: [{
222
- type: Input
223
- }] } });
224
-
225
- class SideBarComponent {
226
- show = false;
227
- title;
228
- closable = true;
229
- dismissible = false;
230
- closeOnEscape = false;
231
- sidebarSize = "sm";
232
- styleClass = "";
233
- hide = new EventEmitter();
234
- onShow = new EventEmitter();
235
- contentTemplate;
236
- footerTemplate;
237
- position = 'left';
238
- hideSidebar() {
239
- this.show = false;
240
- this.hide.emit(false);
241
- }
242
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
243
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SideBarComponent, isStandalone: true, selector: "app-side-bar", inputs: { show: "show", title: "title", closable: "closable", dismissible: "dismissible", closeOnEscape: "closeOnEscape", sidebarSize: "sidebarSize", styleClass: "styleClass", contentTemplate: "contentTemplate", footerTemplate: "footerTemplate", position: "position" }, outputs: { hide: "hide", onShow: "onShow" }, ngImport: i0, template: "<!-- TODO refactor position sidebar based on html dir-->\r\n<p-drawer\r\n (onHide)=\"hideSidebar()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'left'\"\r\n appendTo=\"body\"\r\n styleClass=\"p-drawer-{{ sidebarSize }} custom-content bg-white {{ styleClass }}\">\r\n <ng-template pTemplate=\"header\">\r\n <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n </ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500}.p-drawer-footer{--p-drawer-footer-padding: .75rem var(--p-overlay-modal-padding)}.p-drawer-content{padding-top:var(--p-overlay-modal-padding)!important}\n"], dependencies: [{ kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }], encapsulation: i0.ViewEncapsulation.None });
244
- }
245
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SideBarComponent, decorators: [{
246
- type: Component,
247
- args: [{ selector: "app-side-bar", standalone: true, imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet, TooltipModule], encapsulation: ViewEncapsulation.None, template: "<!-- TODO refactor position sidebar based on html dir-->\r\n<p-drawer\r\n (onHide)=\"hideSidebar()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'left'\"\r\n appendTo=\"body\"\r\n styleClass=\"p-drawer-{{ sidebarSize }} custom-content bg-white {{ styleClass }}\">\r\n <ng-template pTemplate=\"header\">\r\n <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n </ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500}.p-drawer-footer{--p-drawer-footer-padding: .75rem var(--p-overlay-modal-padding)}.p-drawer-content{padding-top:var(--p-overlay-modal-padding)!important}\n"] }]
248
- }], propDecorators: { show: [{
249
- type: Input
250
- }], title: [{
251
- type: Input
252
- }], closable: [{
253
- type: Input
254
- }], dismissible: [{
255
- type: Input
256
- }], closeOnEscape: [{
257
- type: Input
258
- }], sidebarSize: [{
259
- type: Input
260
- }], styleClass: [{
261
- type: Input
262
- }], hide: [{
263
- type: Output
264
- }], onShow: [{
265
- type: Output
266
- }], contentTemplate: [{
267
- type: Input
268
- }], footerTemplate: [{
269
- type: Input
270
- }], position: [{
271
- type: Input
272
- }] } });
273
-
274
- class UserInfoComponent {
275
- profileImage;
276
- name;
277
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
278
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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" });
279
- }
280
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserInfoComponent, decorators: [{
281
- type: Component,
282
- 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" }]
283
- }], propDecorators: { profileImage: [{
284
- type: Input
285
- }], name: [{
286
- type: Input
287
- }] } });
288
-
289
- class FormUtils {
290
- static getFormControl(controlName, form) {
291
- if (!form)
292
- throw new Error(`Form is not initialized.`);
293
- const formControl = form.get(controlName);
294
- if (!formControl)
295
- throw new Error(`There's no form control with given name. '${controlName}'`);
296
- return formControl;
297
- }
298
- }
299
-
300
- var BasicErrorKeysEnum;
301
- (function (BasicErrorKeysEnum) {
302
- BasicErrorKeysEnum["required"] = "REQUIRED";
303
- BasicErrorKeysEnum["email"] = "EMAIL";
304
- BasicErrorKeysEnum["pattern"] = "PATTERN";
305
- BasicErrorKeysEnum["invalidArFormat"] = "INVALID_AR_FORMAT";
306
- BasicErrorKeysEnum["invalidLink"] = "INVALID_LINK";
307
- BasicErrorKeysEnum["endDateBeforeStartDate"] = "END_DATE_BEFORE_START_DATE";
308
- BasicErrorKeysEnum["startDateEqualsEndDate"] = "START_DATE_EQUALS_END_DATE";
309
- BasicErrorKeysEnum["endTimeBeforeStartTime"] = "END_TIME_BEFORE_START_TIME";
310
- BasicErrorKeysEnum["startTimeEqualsEndTime"] = "START_TIME_EQUALS_END_TIME";
311
- BasicErrorKeysEnum["integer"] = "INTEGER";
312
- BasicErrorKeysEnum["positiveNumber"] = "POSITIVE_NUMBER";
313
- BasicErrorKeysEnum["fileSelected"] = "FILE_SELECTED";
314
- BasicErrorKeysEnum["default"] = "DEFAULT";
315
- })(BasicErrorKeysEnum || (BasicErrorKeysEnum = {}));
316
- var ErrorsWithValuesKeysEnum;
317
- (function (ErrorsWithValuesKeysEnum) {
318
- ErrorsWithValuesKeysEnum["minlength"] = "MIN_LENGTH";
319
- ErrorsWithValuesKeysEnum["maxlength"] = "MAX_LENGTH";
320
- ErrorsWithValuesKeysEnum["min"] = "MIN";
321
- ErrorsWithValuesKeysEnum["max"] = "MAX";
322
- ErrorsWithValuesKeysEnum["maxSize"] = "MAX_SIZE";
323
- ErrorsWithValuesKeysEnum["maxFiles"] = "MAX_FILES";
324
- ErrorsWithValuesKeysEnum["allowedTypes"] = "ALLOWED_TYPES";
325
- })(ErrorsWithValuesKeysEnum || (ErrorsWithValuesKeysEnum = {}));
326
-
327
- class FormValidationService {
328
- translate = inject(TranslateService);
329
- getTranslation(key, interpolateParams) {
330
- return this.translate.instant(`VALIDATION.${key}`, interpolateParams);
331
- }
332
- getErrorMessage(errorKey, errorValue) {
333
- if (this.isBasicErrorKey(errorKey)) {
334
- return this.getTranslation(BasicErrorKeysEnum[errorKey]);
335
- }
336
- if (this.isErrorWithValueKey(errorKey)) {
337
- return this.getErrorWithValueMessage(errorKey, errorValue);
338
- }
339
- return this.getTranslation(BasicErrorKeysEnum.default);
340
- }
341
- // Basic error keys are the keys that don't have any values to interpolate. like required, email, etc.
342
- isBasicErrorKey(key) {
343
- return Object.keys(BasicErrorKeysEnum).includes(key);
344
- }
345
- // Error keys with values are the keys that have values to interpolate. like minlength, maxlength, etc.
346
- isErrorWithValueKey(key) {
347
- return Object.keys(ErrorsWithValuesKeysEnum).includes(key);
348
- }
349
- getErrorWithValueMessage(errorKey, errorValue) {
350
- const messages = {
351
- minlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.minlength, {
352
- requiredLength: val?.requiredLength,
353
- actualLength: val?.actualLength,
354
- }),
355
- maxlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxlength, {
356
- requiredLength: val?.requiredLength,
357
- actualLength: val?.actualLength,
358
- }),
359
- min: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.min, { min: val?.min }),
360
- max: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.max, { max: val?.max }),
361
- maxSize: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxSize, { size: val?.requiredLength }),
362
- maxFiles: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxFiles, { size: val?.requiredLength }),
363
- allowedTypes: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.allowedTypes, { types: val?.join(', ') }),
364
- };
365
- return messages[errorKey](errorValue);
366
- }
367
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
368
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormValidationService, providedIn: 'root' });
369
- }
370
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormValidationService, decorators: [{
371
- type: Injectable,
372
- args: [{
373
- providedIn: 'root',
374
- }]
375
- }] });
376
-
377
- class ValidationErrorsPipe {
378
- formValidationService = inject(FormValidationService);
379
- // allowed keys here to handle errors in case of cross-validators like startDate and endDate validators,
380
- // we pass this custom key to handle the error messages only for the allowed keys
381
- transform(errors, allowedKeys) {
382
- if (!errors)
383
- return [];
384
- return Object.keys(errors)
385
- .filter((errorKey) => !allowedKeys || allowedKeys.includes(errorKey)) // Filter errors if allowedKeys are provided
386
- .map((errorKey) => {
387
- return this.formValidationService.getErrorMessage(errorKey, errors[errorKey]);
388
- });
389
- }
390
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ValidationErrorsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
391
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: ValidationErrorsPipe, isStandalone: true, name: "validationErrors" });
392
- }
393
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ValidationErrorsPipe, decorators: [{
394
- type: Pipe,
395
- args: [{
396
- name: "validationErrors",
397
- standalone: true,
398
- pure: true
399
- }]
400
- }] });
401
-
402
- class BaseInputComponent {
403
- control;
404
- name = '';
405
- label;
406
- placeholder = '';
407
- inputId;
408
- readonly = false;
409
- disabled = false;
410
- hint;
411
- destroy$ = new Subject();
412
- get required() {
413
- return this.control.hasValidator(Validators.required);
414
- }
415
- get isInvalid() {
416
- return this.control.invalid && this.control.touched;
417
- }
418
- ngOnInit() {
419
- }
420
- ngOnDestroy() {
421
- this.destroy$.next();
422
- this.destroy$.complete();
423
- }
424
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
425
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { control: "control", name: "name", label: "label", placeholder: "placeholder", inputId: "inputId", readonly: "readonly", disabled: "disabled", hint: "hint" }, ngImport: i0, template: '', isInline: true });
426
- }
427
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BaseInputComponent, decorators: [{
428
- type: Component,
429
- args: [{
430
- template: '',
431
- }]
432
- }], propDecorators: { control: [{
433
- type: Input,
434
- args: [{ required: true }]
435
- }], name: [{
436
- type: Input
437
- }], label: [{
438
- type: Input
439
- }], placeholder: [{
440
- type: Input
441
- }], inputId: [{
442
- type: Input
443
- }], readonly: [{
444
- type: Input
445
- }], disabled: [{
446
- type: Input
447
- }], hint: [{
448
- type: Input
449
- }] } });
450
-
451
- class AutoCompleteComponent extends BaseInputComponent {
452
- selectedItemTemplate = null;
453
- // eslint-disable-next-line @angular-eslint/no-output-on-prefix
454
- onSearch = new EventEmitter();
455
- selectOption = new EventEmitter();
456
- items = [];
457
- minLengthToSearch = 3;
458
- delay = 300; // default value
459
- basicInput;
460
- constructor() {
461
- super();
462
- }
463
- search(event) {
464
- this.onSearch.emit(event.query);
465
- }
466
- onSelect(event) {
467
- this.selectOption.emit(event);
468
- }
469
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
470
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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-required]=\"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\">\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: [".text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "appendTo"], 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" }] });
471
- }
472
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutoCompleteComponent, decorators: [{
473
- type: Component,
474
- args: [{ selector: "stc-auto-complete", standalone: true, imports: [
475
- ReactiveFormsModule,
476
- AutoComplete,
477
- PrimeTemplate,
478
- NgIf,
479
- NgTemplateOutlet,
480
- NgClass,
481
- JsonPipe,
482
- ValidationErrorsPipe,
483
- TranslatePipe
484
- ], 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-required]=\"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\">\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: [".text-required{color:red}.p-error{color:#dc2626}\n"] }]
485
- }], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
486
- type: Input
487
- }], onSearch: [{
488
- type: Output
489
- }], selectOption: [{
490
- type: Output
491
- }], items: [{
492
- type: Input
493
- }], minLengthToSearch: [{
494
- type: Input
495
- }], delay: [{
496
- type: Input
497
- }], basicInput: [{
498
- type: Input
499
- }] } });
500
-
501
- class DatePickerComponent extends BaseInputComponent {
502
- showIcon = false;
503
- showClear = false;
504
- basicInput;
505
- isTimeOnly = false;
506
- minDate;
507
- maxDate;
508
- hourFormat = '12';
509
- nowTime = new Date();
510
- selectionMode = 'single';
511
- onAfterClearDate = new EventEmitter();
512
- variant = 'over';
513
- constructor() {
514
- super();
515
- }
516
- selectCurrentTime(e) {
517
- this.control.setValue(this.nowTime);
518
- }
519
- clearButtonClick(e) {
520
- this.control.setValue(null);
521
- }
522
- afterClearDate() {
523
- this.control.reset();
524
- this.onAfterClearDate.emit();
525
- }
526
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
527
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", hourFormat: "hourFormat", selectionMode: "selectionMode", variant: "variant" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"control\" [iconDisplay]=\"'input'\"\r\n [showClear]=\"showClear\" (onClear)=\"afterClearDate()\" [inputId]=\"inputId\"\r\n [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n [class]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\" panelStyleClass=\"d-ltr\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
528
- }
529
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatePickerComponent, decorators: [{
530
- type: Component,
531
- args: [{ selector: 'stc-date-picker', standalone: true, imports: [
532
- FormsModule,
533
- DatePicker,
534
- ReactiveFormsModule,
535
- NgClass,
536
- DatePickerModule,
537
- ValidationErrorsPipe,
538
- TranslatePipe,
539
- FloatLabelModule,
540
- ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"control\" [iconDisplay]=\"'input'\"\r\n [showClear]=\"showClear\" (onClear)=\"afterClearDate()\" [inputId]=\"inputId\"\r\n [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n [class]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\" panelStyleClass=\"d-ltr\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
541
- }], ctorParameters: () => [], propDecorators: { showIcon: [{
542
- type: Input
543
- }], showClear: [{
544
- type: Input
545
- }], basicInput: [{
546
- type: Input
547
- }], isTimeOnly: [{
548
- type: Input
549
- }], minDate: [{
550
- type: Input
551
- }], maxDate: [{
552
- type: Input
553
- }], hourFormat: [{
554
- type: Input
555
- }], selectionMode: [{
556
- type: Input
557
- }], onAfterClearDate: [{
558
- type: Output
559
- }], variant: [{
560
- type: Input
561
- }] } });
562
-
563
- class InputComponent extends BaseInputComponent {
564
- type = 'text';
565
- contentType = 'text';
566
- size = "small";
567
- prefix;
568
- rows = 2;
569
- cols = 20;
570
- autoResize = true;
571
- basicInput;
572
- noStyle;
573
- hideOptionalLabel;
574
- inputDirection = 'inherit';
575
- variant = 'over';
576
- defaultColor = '#DFE0E6';
577
- constructor() {
578
- super();
579
- }
580
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
581
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if (!required && !hideOptionalLabel) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @switch (type) {\r\n @case ('textarea') {\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n <ng-content></ng-content>\r\n }\r\n <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n </textarea>\r\n }\r\n @default {\r\n <p-floatlabel [variant]=\"variant\">\r\n <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \" [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n class=\"w-full\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n\r\n\r\n }\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}textarea,.p-select,input{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover,input:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus,input:not(.p-disabled).p-focus,input:not(.p-disabled).p-focus:hover,input:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
582
- }
583
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputComponent, decorators: [{
584
- type: Component,
585
- args: [{ selector: 'stc-input', standalone: true, imports: [
586
- ReactiveFormsModule,
587
- InputText,
588
- Textarea,
589
- ValidationErrorsPipe,
590
- NgClass,
591
- NgStyle,
592
- TranslatePipe,
593
- FloatLabelModule,
594
- ], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if (!required && !hideOptionalLabel) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @switch (type) {\r\n @case ('textarea') {\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n <ng-content></ng-content>\r\n }\r\n <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n </textarea>\r\n }\r\n @default {\r\n <p-floatlabel [variant]=\"variant\">\r\n <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \" [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n class=\"w-full\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n\r\n\r\n }\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}textarea,.p-select,input{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover,input:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus,input:not(.p-disabled).p-focus,input:not(.p-disabled).p-focus:hover,input:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
595
- }], ctorParameters: () => [], propDecorators: { type: [{
596
- type: Input
597
- }], contentType: [{
598
- type: Input
599
- }], size: [{
600
- type: Input
601
- }], prefix: [{
602
- type: Input
603
- }], rows: [{
604
- type: Input
605
- }], cols: [{
606
- type: Input
607
- }], autoResize: [{
608
- type: Input
609
- }], basicInput: [{
610
- type: Input
611
- }], noStyle: [{
612
- type: Input
613
- }], hideOptionalLabel: [{
614
- type: Input
615
- }], inputDirection: [{
616
- type: Input
617
- }], variant: [{
618
- type: Input
619
- }], defaultColor: [{
620
- type: Input
621
- }] } });
622
-
623
- class SelectButtonComponent extends BaseInputComponent {
624
- onChange = new EventEmitter();
625
- options;
626
- title;
627
- changeValue(e) {
628
- this.onChange.emit(e.value);
629
- }
630
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
631
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SelectButtonComponent, isStandalone: true, selector: "stc-select-button", inputs: { options: "options", title: "title" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-0 items-end\">\r\n <div class=\"col-span-12\">\r\n <div class=\"text-[14px] font-bold mb-1\">{{ title }}</div>\r\n <div class=\"grid w-100 bg-gray-100 rounded drop-shadow-basic\">\r\n <p-selectButton [disabled]=\"disabled\"\r\n [options]=\"options\"\r\n [formControl]=\"control\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n class=\"rounded\"\r\n [styleClass]=\"'full-width'\"\r\n (onChange)=\"changeValue($event)\">\r\n <ng-template let-item class=\"flex w-100\">\r\n <div class=\"col-span-4\">\r\n <span>{{ item.value }}</span>\r\n </div>\r\n </ng-template>\r\n </p-selectButton>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }] });
632
- }
633
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectButtonComponent, decorators: [{
634
- type: Component,
635
- 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" }]
636
- }], propDecorators: { onChange: [{
637
- type: Output
638
- }], options: [{
639
- type: Input
640
- }], title: [{
641
- type: Input
642
- }] } });
643
-
644
- class SelectComponent extends BaseInputComponent {
645
- selectedItemTemplate = null;
646
- optionTemplate = null;
647
- options;
648
- optionLabel;
649
- checkmark = true;
650
- showClear = false;
651
- editable = false;
652
- filter = false;
653
- multiple = false;
654
- filterBy;
655
- size = "small";
656
- selectedItemsLabel;
657
- basicInput;
658
- variant = 'over';
659
- // eslint-disable-next-line @angular-eslint/no-output-native
660
- change = new EventEmitter();
661
- defaultColor = '#DFE0E6';
662
- constructor() {
663
- super();
664
- }
665
- onChange(e) {
666
- this.change.emit(e);
667
- }
668
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
669
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SelectComponent, isStandalone: true, selector: "stc-select", inputs: { selectedItemTemplate: "selectedItemTemplate", optionTemplate: "optionTemplate", options: "options", optionLabel: "optionLabel", checkmark: "checkmark", showClear: "showClear", editable: "editable", filter: "filter", multiple: "multiple", filterBy: "filterBy", size: "size", selectedItemsLabel: "selectedItemsLabel", basicInput: "basicInput", variant: "variant", defaultColor: "defaultColor" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if(multiple) {\r\n <p-floatLabel [variant]=\"variant\">\r\n\r\n <p-multiselect\r\n [disabled]=\"disabled\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n class=\"w-full\"\r\n [size]=\"size\"\r\n [selectedItemsLabel]=\"selectedItemsLabel\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n\r\n\r\n\r\n\r\n\r\n @if(optionTemplate){\r\n <ng-template let-item #item>\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n\r\n\r\n <ng-template #dropdownicon>\r\n <i class=\"pi pi-map\"></i>\r\n </ng-template>\r\n\r\n\r\n </p-multiselect>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n </p-floatLabel>\r\n\r\n } @else {\r\n <p-floatLabel [variant]=\"variant\">\r\n <p-select\r\n [checkmark]=\"checkmark\"\r\n [disabled]=\"disabled\"\r\n [editable]=\"editable\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n [size]=\"size\"\r\n class=\"w-full\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n @if (optionTemplate) {\r\n <ng-template let-item pTemplate=\"item\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n @if (selectedItemTemplate) {\r\n <ng-template let-item pTemplate=\"selectedItem\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n </ng-template>\r\n }\r\n </p-select>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatLabel>\r\n }\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n } @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br />\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
670
- }
671
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectComponent, decorators: [{
672
- type: Component,
673
- args: [{ selector: 'stc-select', standalone: true, imports: [
674
- FormsModule,
675
- Select,
676
- ReactiveFormsModule,
677
- NgClass,
678
- NgTemplateOutlet,
679
- PrimeTemplate,
680
- ValidationErrorsPipe,
681
- MultiSelectModule,
682
- TranslatePipe,
683
- FloatLabelModule,
684
- ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if(multiple) {\r\n <p-floatLabel [variant]=\"variant\">\r\n\r\n <p-multiselect\r\n [disabled]=\"disabled\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n class=\"w-full\"\r\n [size]=\"size\"\r\n [selectedItemsLabel]=\"selectedItemsLabel\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n\r\n\r\n\r\n\r\n\r\n @if(optionTemplate){\r\n <ng-template let-item #item>\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n\r\n\r\n <ng-template #dropdownicon>\r\n <i class=\"pi pi-map\"></i>\r\n </ng-template>\r\n\r\n\r\n </p-multiselect>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n </p-floatLabel>\r\n\r\n } @else {\r\n <p-floatLabel [variant]=\"variant\">\r\n <p-select\r\n [checkmark]=\"checkmark\"\r\n [disabled]=\"disabled\"\r\n [editable]=\"editable\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n [size]=\"size\"\r\n class=\"w-full\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n @if (optionTemplate) {\r\n <ng-template let-item pTemplate=\"item\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n @if (selectedItemTemplate) {\r\n <ng-template let-item pTemplate=\"selectedItem\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n </ng-template>\r\n }\r\n </p-select>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatLabel>\r\n }\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n } @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br />\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
685
- }], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
686
- type: Input
687
- }], optionTemplate: [{
688
- type: Input
689
- }], options: [{
690
- type: Input
691
- }], optionLabel: [{
692
- type: Input
693
- }], checkmark: [{
694
- type: Input
695
- }], showClear: [{
696
- type: Input
697
- }], editable: [{
698
- type: Input
699
- }], filter: [{
700
- type: Input
701
- }], multiple: [{
702
- type: Input
703
- }], filterBy: [{
704
- type: Input
705
- }], size: [{
706
- type: Input
707
- }], selectedItemsLabel: [{
708
- type: Input
709
- }], basicInput: [{
710
- type: Input
711
- }], variant: [{
712
- type: Input
713
- }], change: [{
714
- type: Output
715
- }], defaultColor: [{
716
- type: Input
717
- }] } });
718
-
719
- class SwitchComponent {
720
- label;
721
- key;
722
- checked = false;
723
- onChange = new EventEmitter();
724
- // checked: boolean = false;
725
- sendUpdatedValue(value) {
726
- if (value) {
727
- this.onChange.emit(value.checked);
728
- }
729
- }
730
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
731
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SwitchComponent, isStandalone: true, selector: "stc-switch", inputs: { label: "label", key: "key", checked: "checked" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"flex items-center mr-2\">\r\n <p-toggleswitch [(ngModel)]=\"checked\" [inputId]=\"key\" (onChange)=\"sendUpdatedValue($event)\" class=\"flex\">\r\n </p-toggleswitch>\r\n <label [for]=\"key\" class=\"text-[12px] mx-2\">{{label}}</label>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i1$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
732
- }
733
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SwitchComponent, decorators: [{
734
- type: Component,
735
- 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>" }]
736
- }], propDecorators: { label: [{
737
- type: Input
738
- }], key: [{
739
- type: Input
740
- }], checked: [{
741
- type: Input
742
- }], onChange: [{
743
- type: Output
744
- }] } });
745
-
746
- var FormFieldTypeEnum;
747
- (function (FormFieldTypeEnum) {
748
- FormFieldTypeEnum["DATE_PICKER"] = "date-picker";
749
- FormFieldTypeEnum["SELECT_BUTTON"] = "select-button";
750
- FormFieldTypeEnum["INPUT"] = "input";
751
- FormFieldTypeEnum["SELECT"] = "select";
752
- FormFieldTypeEnum["SWITCH"] = "switch";
753
- FormFieldTypeEnum["AUTO_COMPLETE"] = "auto-complete";
754
- })(FormFieldTypeEnum || (FormFieldTypeEnum = {}));
755
-
756
- class DynamicFormComponent {
757
- dynamicFormData;
758
- // Generic field change outputs (optional for consumers)
759
- selectButtonChange = new EventEmitter();
760
- selectChange = new EventEmitter();
761
- switchChange = new EventEmitter();
762
- autoCompleteSearch = new EventEmitter();
763
- autoCompleteSelect = new EventEmitter();
764
- inputsNames = [];
765
- formGroup;
766
- inputsMap;
767
- fieldType = FormFieldTypeEnum;
768
- getFormControl = FormUtils.getFormControl;
769
- ngOnInit() {
770
- this.formGroup = this.dynamicFormData?.formGroup;
771
- this.inputsMap = this.dynamicFormData?.inputsMap;
772
- this.inputsNames = Object.keys(this.inputsMap || {});
773
- }
774
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
775
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, outputs: { selectButtonChange: "selectButtonChange", selectChange: "selectChange", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n }\r\n @case (fieldType.INPUT) {\r\n <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? true\"\r\n [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n @if(inputsMap[inputName].maxLength){\r\n <small class=\"text-sm text-gray-600 self-end\">\r\n {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n <span>\r\n / {{ inputsMap[inputName].maxLength}}\r\n </span>\r\n </small>\r\n }\r\n </stc-input>\r\n }\r\n @case (fieldType.SELECT) {\r\n <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\" />\r\n }\r\n @case (fieldType.SWITCH) {\r\n <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n [checked]=\"getFormControl(inputName, formGroup).value\"\r\n (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n }\r\n @case (fieldType.AUTO_COMPLETE) {\r\n <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 3\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\" />\r\n }\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>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "size", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
776
- }
777
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicFormComponent, decorators: [{
778
- type: Component,
779
- args: [{ selector: 'app-dynamic-form', standalone: true, imports: [
780
- CommonModule,
781
- ReactiveFormsModule,
782
- DatePickerComponent,
783
- ValidationErrorsPipe,
784
- TranslateModule,
785
- SelectButtonComponent,
786
- InputComponent,
787
- SelectComponent,
788
- AutoCompleteComponent,
789
- SwitchComponent,
790
- ], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n }\r\n @case (fieldType.INPUT) {\r\n <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? true\"\r\n [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n @if(inputsMap[inputName].maxLength){\r\n <small class=\"text-sm text-gray-600 self-end\">\r\n {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n <span>\r\n / {{ inputsMap[inputName].maxLength}}\r\n </span>\r\n </small>\r\n }\r\n </stc-input>\r\n }\r\n @case (fieldType.SELECT) {\r\n <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\" />\r\n }\r\n @case (fieldType.SWITCH) {\r\n <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n [checked]=\"getFormControl(inputName, formGroup).value\"\r\n (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n }\r\n @case (fieldType.AUTO_COMPLETE) {\r\n <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 3\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\" />\r\n }\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>" }]
791
- }], propDecorators: { dynamicFormData: [{
792
- type: Input,
793
- args: [{ required: true }]
794
- }], selectButtonChange: [{
795
- type: Output
796
- }], selectChange: [{
797
- type: Output
798
- }], switchChange: [{
799
- type: Output
800
- }], autoCompleteSearch: [{
801
- type: Output
802
- }], autoCompleteSelect: [{
803
- type: Output
804
- }] } });
805
-
806
- class ConfirmationDialogComponent extends DynamicDialogRef {
807
- router = inject(Router);
808
- dialogService = inject(DialogService);
809
- dynamicDialogConfig = inject(DynamicDialogConfig);
810
- _ref = inject(DynamicDialogRef);
811
- _subscription = new Subscription();
812
- dialogFormData;
813
- ngOnDestroy() {
814
- this._subscription.unsubscribe();
815
- }
816
- ngOnInit() {
817
- // closing when navigating back from the browser
818
- this._subscription.add(this.router.events.pipe(filter((event) => event instanceof NavigationStart)).subscribe(() => {
819
- if (this.dynamicDialogConfig) {
820
- this._ref.close(false);
821
- }
822
- }));
823
- this.dialogFormData = this.dynamicDialogConfig.data?.inputForm;
824
- }
825
- submit() {
826
- // we should pass submitted data when using form dialog
827
- // const submitData = { submitted: true, data: this.dialogFormData?.formGroup?.value };
828
- // this._ref.close(this.dynamicDialogConfig.data.inputForm ? submitData : true);
829
- this._ref.close(true);
830
- }
831
- close() {
832
- this._ref.close(false);
833
- }
834
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ConfirmationDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
835
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirm-dialog", providers: [DialogService, DynamicDialogStyle], usesInheritance: true, ngImport: i0, template: "@if (dynamicDialogConfig.data) {\r\n<div class=\"confirmation-dialog\">\r\n <div class=\"dialog-wrapper\">\r\n @if (dynamicDialogConfig.data) {\r\n <div class=\"confirmation-dialog__content my-4\">\r\n @if (dynamicDialogConfig.data.dialogIcon) {\r\n <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n }\r\n <p class=\"confirmation-dialog__message text-xl mb-2\">\r\n {{ dynamicDialogConfig.data.message }}\r\n </p>\r\n @if (dynamicDialogConfig.data.hint) {\r\n <p class=\"confirmation-dialog__hint font-normal text-base\">\r\n {{ dynamicDialogConfig.data.hint }}\r\n </p>\r\n }\r\n @if (dynamicDialogConfig.data.inputForm) {\r\n <app-dynamic-form [dynamicFormData]=\"dialogFormData\"></app-dynamic-form>\r\n }\r\n </div>\r\n }\r\n <div class=\"confirmation-dialog__actions flex gap-2 mt-4\">\r\n <app-button [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\"\r\n [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\" [severity]=\"'primary'\"\r\n [id]=\"dynamicDialogConfig.data.confirmBtnId\" [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n [label]=\"dynamicDialogConfig.data.confirmBtnLabel\"\r\n [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\" [styleClass]=\"'confirmation-btn'\"\r\n (click)=\"submit()\" />\r\n <app-button [title]=\"dynamicDialogConfig.data?.closeLabel || ('actions.cancel' | translate)\"\r\n [severity]=\"'primary'\" variant=\"outlined\" [label]=\"dynamicDialogConfig.data.cancelBtnLabel\"\r\n [id]=\"dynamicDialogConfig.data.cancelBtnId\" [styleClass]=\"'cancel-btn confirmation-btn cancel-btn'\"\r\n (click)=\"close()\" />\r\n </div>\r\n </div>\r\n\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["dynamicFormData"], outputs: ["selectButtonChange", "selectChange", "switchChange", "autoCompleteSearch", "autoCompleteSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
836
- }
837
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
838
- type: Component,
839
- args: [{ selector: 'app-confirm-dialog', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
840
- AppButtonComponent,
841
- AvatarModule,
842
- DynamicDialogModule,
843
- DynamicFormComponent,
844
- TranslatePipe,
845
- ], providers: [DialogService, DynamicDialogStyle], template: "@if (dynamicDialogConfig.data) {\r\n<div class=\"confirmation-dialog\">\r\n <div class=\"dialog-wrapper\">\r\n @if (dynamicDialogConfig.data) {\r\n <div class=\"confirmation-dialog__content my-4\">\r\n @if (dynamicDialogConfig.data.dialogIcon) {\r\n <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n }\r\n <p class=\"confirmation-dialog__message text-xl mb-2\">\r\n {{ dynamicDialogConfig.data.message }}\r\n </p>\r\n @if (dynamicDialogConfig.data.hint) {\r\n <p class=\"confirmation-dialog__hint font-normal text-base\">\r\n {{ dynamicDialogConfig.data.hint }}\r\n </p>\r\n }\r\n @if (dynamicDialogConfig.data.inputForm) {\r\n <app-dynamic-form [dynamicFormData]=\"dialogFormData\"></app-dynamic-form>\r\n }\r\n </div>\r\n }\r\n <div class=\"confirmation-dialog__actions flex gap-2 mt-4\">\r\n <app-button [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\"\r\n [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\" [severity]=\"'primary'\"\r\n [id]=\"dynamicDialogConfig.data.confirmBtnId\" [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n [label]=\"dynamicDialogConfig.data.confirmBtnLabel\"\r\n [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\" [styleClass]=\"'confirmation-btn'\"\r\n (click)=\"submit()\" />\r\n <app-button [title]=\"dynamicDialogConfig.data?.closeLabel || ('actions.cancel' | translate)\"\r\n [severity]=\"'primary'\" variant=\"outlined\" [label]=\"dynamicDialogConfig.data.cancelBtnLabel\"\r\n [id]=\"dynamicDialogConfig.data.cancelBtnId\" [styleClass]=\"'cancel-btn confirmation-btn cancel-btn'\"\r\n (click)=\"close()\" />\r\n </div>\r\n </div>\r\n\r\n</div>\r\n}" }]
846
- }] });
847
-
848
- class ReadMoreComponent {
849
- text = "";
850
- styleClass = "";
851
- maxCharacters = 100;
852
- isExpanded = false;
853
- toggleReadMore() {
854
- this.isExpanded = !this.isExpanded;
855
- }
856
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ReadMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
857
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: ReadMoreComponent, isStandalone: true, selector: "app-read-more", inputs: { text: "text", styleClass: "styleClass", maxCharacters: "maxCharacters" }, ngImport: i0, template: "<p [class]=\"styleClass\">\r\n {{ isExpanded ? text : (text | slice : 0 : maxCharacters) }}\r\n @if (text.length > maxCharacters && !isExpanded) {\r\n <span>...</span>\r\n }\r\n @if (isExpanded) {\r\n <span>\r\n {{ text | slice : maxCharacters + 1 : text.length }}\r\n </span>\r\n }\r\n <br>\r\n @if (text.length > maxCharacters) {\r\n <span class=\"text-primary_light cursor-pointer\" (click)=\"toggleReadMore()\">\r\n {{ isExpanded ? ('less' | translate) : ('more' | translate) }}\r\n </span>\r\n }\r\n</p>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: SlicePipe, name: "slice" }] });
858
- }
859
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ReadMoreComponent, decorators: [{
860
- type: Component,
861
- 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" }]
862
- }], propDecorators: { text: [{
863
- type: Input,
864
- args: [{ required: true }]
865
- }], styleClass: [{
866
- type: Input
867
- }], maxCharacters: [{
868
- type: Input
869
- }] } });
870
-
871
- class AppAccordionComponent {
872
- iconName;
873
- iconClass;
874
- iconPathCount = 0;
875
- title;
876
- contentBorderTop = true;
877
- accordionPanelBorder = true;
878
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
879
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: AppAccordionComponent, isStandalone: true, selector: "app-accordion", inputs: { iconName: "iconName", iconClass: "iconClass", iconPathCount: "iconPathCount", title: "title", contentBorderTop: "contentBorderTop", accordionPanelBorder: "accordionPanelBorder" }, ngImport: i0, template: "<p-accordion value=\"0\">\r\n <p-accordion-panel value=\"0\" [class.!border-0]=\"!accordionPanelBorder\">\r\n <p-accordion-header>\r\n <span class=\"flex items-center gap-2 w-full\">\r\n <app-ico-moon-card [iconClass]=\"'text-[24px] text-secondary'\" [iconName]=\"'font-icon-'+iconName\" />\r\n <span class=\"font-bold whitespace-nowrap\">{{title}}</span>\r\n </span>\r\n </p-accordion-header>\r\n <p-accordion-content>\r\n <div [ngClass]=\"{'border-t-2 border-gray-light pt-2': contentBorderTop, }\">\r\n <ng-content></ng-content>\r\n </div>\r\n </p-accordion-content>\r\n </p-accordion-panel>\r\n</p-accordion>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$4.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i2$4.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i2$4.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i2$4.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: IcoMoonIconComponent, selector: "app-ico-moon-card", inputs: ["iconName", "iconClass", "iconPathCount"] }] });
880
- }
881
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppAccordionComponent, decorators: [{
882
- type: Component,
883
- 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" }]
884
- }], propDecorators: { iconName: [{
885
- type: Input
886
- }], iconClass: [{
887
- type: Input
888
- }], iconPathCount: [{
889
- type: Input
890
- }], title: [{
891
- type: Input,
892
- args: [{ required: true }]
893
- }], contentBorderTop: [{
894
- type: Input
895
- }], accordionPanelBorder: [{
896
- type: Input
897
- }] } });
898
-
899
- class UserAutocompleteCardComponent {
900
- select = new EventEmitter();
901
- delete = new EventEmitter();
902
- userData;
903
- explicitRole = "";
904
- showDeleteAction = true;
905
- onDelete() {
906
- this.delete.emit(this.userData);
907
- }
908
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserAutocompleteCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
909
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: UserAutocompleteCardComponent, isStandalone: true, selector: "app-user-autocomplete-card", inputs: { userData: "userData", explicitRole: "explicitRole", showDeleteAction: "showDeleteAction" }, outputs: { select: "select", delete: "delete" }, ngImport: i0, template: "<div class=\"flex gap-2 items-center justify-between p-4 rounded mb-4 border border-dotted border-gray-300 bg-gray-100\">\r\n <div class=\"flex gap-4 items-center\">\r\n <img [alt]=\"userData.name\" [src]=\"userData.profileImage\" class=\"rounded-full object-cover w-[48px] h-[48px]\" />\r\n <div class=\"flex flex-col justify-end\">\r\n <h4 class=\"font-bold text-[12px] text-gray-800 truncate max-w-[135px] dir-ltr\">\r\n {{ userData.name }}\r\n </h4>\r\n <p class=\"text-[12px] text-gray-700\">{{ explicitRole ? explicitRole : userData.position.name }}</p>\r\n </div>\r\n </div>\r\n <div class=\"flex-1 flex flex-col items-end\">\r\n <p class=\"text-[12px] text-purple-700 truncate max-w-[90px] dir-ltr\">{{ userData.email }}</p>\r\n <p class=\"text-[12px] text-gray-600 dir-ltr\">{{ userData.contact.mobile }}</p>\r\n </div>\r\n @if (showDeleteAction){\r\n <div class=\"flex gap-1 flex-nowrap\">\r\n <app-button (clickEmitter)=\"onDelete()\" [rounded]=\"true\" [size]=\"'large'\" [text]=\"true\" icon=\"font-icon-trash\"/>\r\n </div>\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
910
- }
911
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserAutocompleteCardComponent, decorators: [{
912
- type: Component,
913
- 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" }]
914
- }], propDecorators: { select: [{
915
- type: Output
916
- }], delete: [{
917
- type: Output
918
- }], userData: [{
919
- type: Input,
920
- args: [{ required: true }]
921
- }], explicitRole: [{
922
- type: Input
923
- }], showDeleteAction: [{
924
- type: Input
925
- }] } });
926
-
927
- class AppBreadcrumbComponent {
928
- activatedRoute;
929
- router;
930
- items;
931
- isShown;
932
- constructor(activatedRoute, router) {
933
- this.activatedRoute = activatedRoute;
934
- this.router = router;
935
- }
936
- ngOnInit() {
937
- if (this.items) {
938
- this.isShown = true;
939
- return;
940
- }
941
- this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((e) => {
942
- // remove duplicates
943
- this.items = this._createBreadcrumbs(this.activatedRoute.root).filter((item, index, self) => index ===
944
- self.findIndex((t) => t.label === item.label && t.routerLink === item.routerLink));
945
- this._checkHiddenBreadcrumb();
946
- this._checkEmpty();
947
- });
948
- }
949
- _checkHiddenBreadcrumb() {
950
- const activeBreadcrumb = this.items?.find((item) => {
951
- return item.routerLink === this.router.url;
952
- });
953
- this.isShown = !!activeBreadcrumb?.isShown;
954
- }
955
- _createBreadcrumbs(activatedRoute, routerLink = '', breadcrumbs = []) {
956
- const children = activatedRoute.children;
957
- if (children.length === 0) {
958
- return breadcrumbs;
959
- }
960
- for (const child of children) {
961
- const routeURL = child.snapshot.url.map((segment) => segment.path).join('/');
962
- if (routeURL !== '') {
963
- routerLink += `/${routeURL}`;
964
- }
965
- let label = child.snapshot.data['breadcrumb'];
966
- const notClickableBreadcrumb = !!child.snapshot.data['notClickableBreadcrumb'];
967
- const isShown = !!child.snapshot.data['isShown'];
968
- const extraBreadcrumbs = child.snapshot.data['extraBreadcrumbs'] || [];
969
- if (!(typeof label === 'undefined' || label === null)) {
970
- const data = activatedRoute.snapshot.firstChild?.data || {};
971
- // Resolve dynamic breadcrumb label
972
- if (label && label.startsWith('[') && label.endsWith(']')) {
973
- label = this._getRecursiveKey(data, label.slice(1, -1).split('.'));
974
- }
975
- // Resolve dynamic URL parts
976
- const resolveDynamicUrl = (route) => {
977
- return route.replace(/\[([^\]]+)]/g, (_, key) => this._getRecursiveKey(data, key.split('.')) || '');
978
- };
979
- const mainBreadcrumb = {
980
- label,
981
- routerLink,
982
- data,
983
- notClickableBreadcrumb,
984
- isShown,
985
- };
986
- // Process extra breadcrumbs
987
- const beforeBreadcrumbs = [];
988
- const afterBreadcrumbs = [];
989
- extraBreadcrumbs.forEach((extra) => {
990
- let extraLabel = extra.label || '';
991
- if (extraLabel.startsWith('[') && extraLabel.endsWith(']')) {
992
- extraLabel = this._getRecursiveKey(data, extraLabel.slice(1, -1).split('.'));
993
- }
994
- const extraUrl = resolveDynamicUrl(extra.routerLink || '');
995
- const extraBreadcrumb = { ...extra, label: extraLabel, routerLink: extraUrl };
996
- if (extra.position === 'before') {
997
- beforeBreadcrumbs.push(extraBreadcrumb);
998
- }
999
- else {
1000
- afterBreadcrumbs.push(extraBreadcrumb);
1001
- }
1002
- });
1003
- // Merge breadcrumbs
1004
- breadcrumbs.push(...beforeBreadcrumbs, mainBreadcrumb, ...afterBreadcrumbs);
1005
- }
1006
- return this._createBreadcrumbs(child, routerLink, breadcrumbs);
1007
- }
1008
- }
1009
- _checkEmpty() {
1010
- if (!this.items)
1011
- return;
1012
- const lastBreadcrumbVisibility = this.items[this.items.length - 1].isShown;
1013
- this.items = this.items.filter((b) => b.label !== '');
1014
- this.items[this.items.length - 1].isShown = lastBreadcrumbVisibility;
1015
- }
1016
- _getRecursiveKey(obj, keys) {
1017
- if (keys.length === 0) {
1018
- return undefined;
1019
- }
1020
- const [currentKey, ...remainingKeys] = keys;
1021
- if (currentKey in obj) {
1022
- if (remainingKeys.length > 0) {
1023
- return this._getRecursiveKey(obj[currentKey], remainingKeys);
1024
- }
1025
- return obj[currentKey];
1026
- }
1027
- return undefined;
1028
- }
1029
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppBreadcrumbComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i1$6.Router }], target: i0.ɵɵFactoryTarget.Component });
1030
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AppBreadcrumbComponent, isStandalone: true, selector: "app-breadcrumb", inputs: { items: "items" }, ngImport: i0, template: "@if(isShown) {\r\n<nav class=\"flex gap-x-3 text-[12px] w-full items-center mb-5\">\r\n <div class=\"card flex justify-center\">\r\n <p-breadcrumb [model]=\"items\"></p-breadcrumb>\r\n </div>\r\n</nav>\r\n}\r\n", styles: [".p-breadcrumb-list li:first-child a{@apply text-secondary;}.p-breadcrumb-list .p-breadcrumb-separator{transform:scale(.7);display:none}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-link{padding:0 4px}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label{@apply text-light_red relative;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:hover{@apply text-light_red;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:before{content:\"/\";@apply inline-block absolute text-gray-900;inset-inline-end:-9px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: RouterModule }], encapsulation: i0.ViewEncapsulation.None });
1031
- }
1032
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppBreadcrumbComponent, decorators: [{
1033
- type: Component,
1034
- args: [{ selector: 'app-breadcrumb', standalone: true, imports: [CommonModule, Breadcrumb, RouterModule], encapsulation: ViewEncapsulation.None, template: "@if(isShown) {\r\n<nav class=\"flex gap-x-3 text-[12px] w-full items-center mb-5\">\r\n <div class=\"card flex justify-center\">\r\n <p-breadcrumb [model]=\"items\"></p-breadcrumb>\r\n </div>\r\n</nav>\r\n}\r\n", styles: [".p-breadcrumb-list li:first-child a{@apply text-secondary;}.p-breadcrumb-list .p-breadcrumb-separator{transform:scale(.7);display:none}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-link{padding:0 4px}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label{@apply text-light_red relative;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:hover{@apply text-light_red;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:before{content:\"/\";@apply inline-block absolute text-gray-900;inset-inline-end:-9px}\n"] }]
1035
- }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i1$6.Router }], propDecorators: { items: [{
1036
- type: Input
1037
- }] } });
1038
-
1039
- const SIDEBAR_DATA = new InjectionToken('SIDEBAR_DATA');
1040
- function createCustomInjector(parentInjector, injectionToken, data) {
1041
- return Injector.create({
1042
- parent: parentInjector,
1043
- providers: [
1044
- {
1045
- provide: injectionToken,
1046
- useValue: data ?? null
1047
- }
1048
- ]
1049
- });
1050
- }
1051
- ;
1052
- var SidebarActionType;
1053
- (function (SidebarActionType) {
1054
- SidebarActionType["SAVE"] = "SAVE";
1055
- SidebarActionType["SaveMore"] = "SaveMore";
1056
- SidebarActionType["CANCEL"] = "CANCEL";
1057
- SidebarActionType["SUBMIT"] = "SUBMIT";
1058
- SidebarActionType["CLOSE"] = "CLOSE";
1059
- SidebarActionType["CloseWithData"] = "CloseWithData";
1060
- })(SidebarActionType || (SidebarActionType = {}));
1061
-
1062
- class DataInjectorPipe {
1063
- injector = inject(Injector);
1064
- transform(data) {
1065
- return createCustomInjector(this.injector, SIDEBAR_DATA, data);
1066
- }
1067
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DataInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
1068
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: DataInjectorPipe, isStandalone: true, name: "dataInjector" });
1069
- }
1070
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DataInjectorPipe, decorators: [{
1071
- type: Pipe,
1072
- args: [{
1073
- name: 'dataInjector',
1074
- standalone: true,
1075
- pure: true
1076
- }]
1077
- }] });
1078
-
1079
- class SideBarDynamicComponent {
1080
- dynamicSidebarService = inject(DynamicSidebarService);
1081
- parentInjector = inject(Injector);
1082
- location = inject(Location);
1083
- popStateListener;
1084
- sidebarConfig = this.dynamicSidebarService.sidebarConfig;
1085
- ngOnInit() {
1086
- //To close a sidebar when the browser back button is pressed
1087
- this.popStateListener = this.location.subscribe(() => {
1088
- if (this.dynamicSidebarService.sidebarConfig.visible) {
1089
- this.dynamicSidebarService.close();
1090
- }
1091
- });
1092
- }
1093
- ngOnDestroy() {
1094
- // reset Sidebar token
1095
- createCustomInjector(this.parentInjector, SIDEBAR_DATA, null);
1096
- }
1097
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SideBarDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1098
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SideBarDynamicComponent, isStandalone: true, selector: "app-side-bar-dynamic", ngImport: i0, template: "<p-drawer (onHide)=\"dynamicSidebarService.close()\" [(visible)]=\"sidebarConfig.visible\"\r\n [closable]=\"sidebarConfig.closable\" [closeOnEscape]=\"sidebarConfig.closeOnEscape\"\r\n [dismissible]=\"sidebarConfig.dismissible\" [ngClass]=\"{ show: sidebarConfig.show }\" [position]=\"'left'\" appendTo=\"body\"\r\n id=\"main-drawer\"\r\n styleClass=\"p-drawer-{{ sidebarConfig.sidebarSize }} custom-content bg-white {{ sidebarConfig.styleClass }}\">\r\n <ng-template pTemplate=\"header\">{{ sidebarConfig.title }}</ng-template>\r\n <ng-template pTemplate=\"content\">\r\n <ng-container [ngComponentOutletInjector]=\"dynamicSidebarService.contentComponentData | dataInjector\"\r\n [ngComponentOutlet]=\"dynamicSidebarService.contentComponentRef\"></ng-container>\r\n </ng-template>\r\n @if (sidebarConfig.showSaveBtn || sidebarConfig.showSaveAndMoreBtn || sidebarConfig.showCancelBtn) {\r\n <ng-template pTemplate=\"footer\">\r\n <section class=\"flex justify-between bg-gray-200 py-4\" id=\"sidebar-footer\">\r\n <div class=\"flex gap-2\">\r\n @if (sidebarConfig.showSaveBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.submit(true)\"\r\n [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n [icon]=\"sidebarConfig!.actions!.save!.icon || 'font-icon-plus'\"\r\n [iconPos]=\"sidebarConfig!.actions!.save!.iconPos || 'right'\"\r\n [styleClass]=\"sidebarConfig!.actions!.save!.style || 'danger'\"\r\n [title]=\"sidebarConfig!.actions!.save!.title || ('actions.save' | translate)\"\r\n [variant]=\"sidebarConfig!.actions!.save!.variant\" />\r\n }\r\n @if (sidebarConfig.showSaveAndMoreBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.submit()\"\r\n [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n [icon]=\"sidebarConfig!.actions!.saveAndMore!.icon || 'font-icon-plus'\"\r\n [iconPos]=\"sidebarConfig!.actions!.saveAndMore!.iconPos || 'right'\"\r\n [styleClass]=\"sidebarConfig!.actions!.saveAndMore!.style || 'danger'\"\r\n [title]=\"sidebarConfig!.actions!.saveAndMore!.title || ('actions.save_and_and_more' | translate)\"\r\n [variant]=\"sidebarConfig!.actions!.saveAndMore!.variant\" />\r\n\r\n }\r\n </div>\r\n @if (sidebarConfig.showCancelBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.cancel()\" [styleClass]=\"'secondary'\"\r\n [title]=\"'actions.cancel' | translate\" />\r\n }\r\n </section>\r\n </ng-template>\r\n }\r\n</p-drawer>", styles: [".sidebar.show{min-width:550px}\n"], dependencies: [{ kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "pipe", type: DataInjectorPipe, name: "dataInjector" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
1099
- }
1100
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SideBarDynamicComponent, decorators: [{
1101
- type: Component,
1102
- args: [{ selector: "app-side-bar-dynamic", standalone: true, imports: [Drawer, NgClass, NgComponentOutlet, PrimeTemplate, DataInjectorPipe, AppButtonComponent, TranslatePipe], template: "<p-drawer (onHide)=\"dynamicSidebarService.close()\" [(visible)]=\"sidebarConfig.visible\"\r\n [closable]=\"sidebarConfig.closable\" [closeOnEscape]=\"sidebarConfig.closeOnEscape\"\r\n [dismissible]=\"sidebarConfig.dismissible\" [ngClass]=\"{ show: sidebarConfig.show }\" [position]=\"'left'\" appendTo=\"body\"\r\n id=\"main-drawer\"\r\n styleClass=\"p-drawer-{{ sidebarConfig.sidebarSize }} custom-content bg-white {{ sidebarConfig.styleClass }}\">\r\n <ng-template pTemplate=\"header\">{{ sidebarConfig.title }}</ng-template>\r\n <ng-template pTemplate=\"content\">\r\n <ng-container [ngComponentOutletInjector]=\"dynamicSidebarService.contentComponentData | dataInjector\"\r\n [ngComponentOutlet]=\"dynamicSidebarService.contentComponentRef\"></ng-container>\r\n </ng-template>\r\n @if (sidebarConfig.showSaveBtn || sidebarConfig.showSaveAndMoreBtn || sidebarConfig.showCancelBtn) {\r\n <ng-template pTemplate=\"footer\">\r\n <section class=\"flex justify-between bg-gray-200 py-4\" id=\"sidebar-footer\">\r\n <div class=\"flex gap-2\">\r\n @if (sidebarConfig.showSaveBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.submit(true)\"\r\n [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n [icon]=\"sidebarConfig!.actions!.save!.icon || 'font-icon-plus'\"\r\n [iconPos]=\"sidebarConfig!.actions!.save!.iconPos || 'right'\"\r\n [styleClass]=\"sidebarConfig!.actions!.save!.style || 'danger'\"\r\n [title]=\"sidebarConfig!.actions!.save!.title || ('actions.save' | translate)\"\r\n [variant]=\"sidebarConfig!.actions!.save!.variant\" />\r\n }\r\n @if (sidebarConfig.showSaveAndMoreBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.submit()\"\r\n [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n [icon]=\"sidebarConfig!.actions!.saveAndMore!.icon || 'font-icon-plus'\"\r\n [iconPos]=\"sidebarConfig!.actions!.saveAndMore!.iconPos || 'right'\"\r\n [styleClass]=\"sidebarConfig!.actions!.saveAndMore!.style || 'danger'\"\r\n [title]=\"sidebarConfig!.actions!.saveAndMore!.title || ('actions.save_and_and_more' | translate)\"\r\n [variant]=\"sidebarConfig!.actions!.saveAndMore!.variant\" />\r\n\r\n }\r\n </div>\r\n @if (sidebarConfig.showCancelBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.cancel()\" [styleClass]=\"'secondary'\"\r\n [title]=\"'actions.cancel' | translate\" />\r\n }\r\n </section>\r\n </ng-template>\r\n }\r\n</p-drawer>", styles: [".sidebar.show{min-width:550px}\n"] }]
1103
- }] });
1104
-
1105
- const SidebarConfigDefaults = {
1106
- title: "",
1107
- show: true,
1108
- visible: true,
1109
- closable: true,
1110
- dismissible: false,
1111
- closeOnEscape: false,
1112
- sidebarSize: "md",
1113
- showCancelBtn: false,
1114
- showSaveBtn: false,
1115
- showSaveAndMoreBtn: false,
1116
- actions: {
1117
- save: {},
1118
- saveAndMore: {
1119
- variant: "outlined"
1120
- }
1121
- }
1122
- };
1123
-
1124
- class DynamicSidebarService {
1125
- environmentInjector;
1126
- appRef;
1127
- contentComponentRef = null;
1128
- contentComponentData;
1129
- sidebarConfig = this.getDefaultConfig();
1130
- activeForm = null;
1131
- componentRef = null;
1132
- sidebarAction$ = new Subject();
1133
- action$ = this.sidebarAction$.asObservable();
1134
- sidebarSideEffectAction$ = new Subject();
1135
- sideEffectAction$ = this.sidebarSideEffectAction$.asObservable();
1136
- isOpen$ = new BehaviorSubject(false);
1137
- isOpenObservable$ = this.isOpen$.asObservable();
1138
- constructor(environmentInjector, appRef) {
1139
- this.environmentInjector = environmentInjector;
1140
- this.appRef = appRef;
1141
- }
1142
- // Action notifications
1143
- notifyAction(type, payload) {
1144
- this.sidebarAction$.next({ type, payload });
1145
- }
1146
- notifySideEffectAction(type, payload) {
1147
- this.sidebarSideEffectAction$.next({ type, payload });
1148
- }
1149
- // Form management
1150
- setActiveForm(control) {
1151
- this.activeForm = control;
1152
- }
1153
- resetActiveForm() {
1154
- this.activeForm = null;
1155
- }
1156
- isButtonDisabled() {
1157
- if (!this.activeForm) {
1158
- return false;
1159
- }
1160
- return this.activeForm.invalid || this.activeForm.untouched;
1161
- }
1162
- open(component, config, data) {
1163
- // Close any existing sidebar before opening a new one
1164
- // TODO Need to Review
1165
- if (!component) {
1166
- return;
1167
- }
1168
- this.close();
1169
- this.contentComponentRef = component;
1170
- this.contentComponentData = data;
1171
- this.sidebarConfig = { ...this.getDefaultConfig(), ...config };
1172
- this.componentRef = createComponent(SideBarDynamicComponent, {
1173
- environmentInjector: this.environmentInjector,
1174
- });
1175
- // Attach the component to the Angular application
1176
- this.appRef.attachView(this.componentRef.hostView);
1177
- // Append the component to the DOM
1178
- const domElem = this.componentRef.hostView.rootNodes[0];
1179
- document.body.appendChild(domElem);
1180
- }
1181
- /**
1182
- * Closes the currently open sidebar, if any.
1183
- */
1184
- close() {
1185
- if (this.componentRef) {
1186
- // Detach the view and destroy the component
1187
- this.appRef.detachView(this.componentRef.hostView);
1188
- this.componentRef.destroy();
1189
- this.componentRef = null;
1190
- // Reset content and configuration
1191
- this.contentComponentRef = null;
1192
- this.contentComponentData = null;
1193
- this.sidebarConfig = this.getDefaultConfig();
1194
- this.isOpen$.next(false);
1195
- this.resetActiveForm();
1196
- this.notifySideEffectAction(SidebarActionType.CLOSE);
1197
- }
1198
- }
1199
- cancel() {
1200
- this.notifyAction(SidebarActionType.CANCEL);
1201
- }
1202
- submit(flag = false) {
1203
- const actionType = flag ? SidebarActionType.SaveMore : SidebarActionType.SAVE;
1204
- this.notifyAction(actionType, { withClose: flag });
1205
- }
1206
- /**
1207
- * Provides the default configuration for the sidebar.
1208
- * @returns The default SidebarConfig object.
1209
- */
1210
- getDefaultConfig() {
1211
- return {
1212
- ...SidebarConfigDefaults,
1213
- show: false,
1214
- visible: false,
1215
- closable: false,
1216
- dismissible: true
1217
- };
1218
- }
1219
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicSidebarService, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
1220
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicSidebarService, providedIn: "root" });
1221
- }
1222
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicSidebarService, decorators: [{
1223
- type: Injectable,
1224
- args: [{
1225
- providedIn: "root"
1226
- }]
1227
- }], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }] });
1228
-
1229
- class ConfirmationDialogService {
1230
- dialogService;
1231
- constructor(dialogService) {
1232
- this.dialogService = dialogService;
1233
- }
1234
- open(data) {
1235
- const ref = this.dialogService.open(ConfirmationDialogComponent, {
1236
- data,
1237
- header: data.header,
1238
- showHeader: true,
1239
- width: '600px',
1240
- closable: true,
1241
- modal: true,
1242
- styleClass: 'confirmation-dialog-wrapper',
1243
- breakpoints: data.breakpoints,
1244
- });
1245
- // Emit true/false when dialog closes
1246
- return ref.onClose.pipe(filter$1((res) => res !== undefined), map((res) => !!res));
1247
- }
1248
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ConfirmationDialogService, deps: [{ token: i1$7.DialogService }], target: i0.ɵɵFactoryTarget.Injectable });
1249
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ConfirmationDialogService, providedIn: 'root' });
1250
- }
1251
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ConfirmationDialogService, decorators: [{
1252
- type: Injectable,
1253
- args: [{
1254
- providedIn: 'root',
1255
- }]
1256
- }], ctorParameters: () => [{ type: i1$7.DialogService }] });
1257
-
1258
- class BottomSheetComponent {
1259
- show = false;
1260
- contentTemplate;
1261
- onHide = new EventEmitter();
1262
- onShow = new EventEmitter();
1263
- hideBottomSheet() {
1264
- this.show = false;
1265
- this.onHide.emit(false);
1266
- }
1267
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1268
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BottomSheetComponent, isStandalone: true, selector: "app-bottom-sheet", inputs: { show: "show", contentTemplate: "contentTemplate" }, outputs: { onHide: "onHide", onShow: "onShow" }, ngImport: i0, template: "<p-drawer\r\n (onHide)=\"hideBottomSheet()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"false\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'bottom'\"\r\n appendTo=\"body\"\r\n >\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"band\"></div>\r\n </ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.band{background-color:#dfe0e6;width:40px;height:4px;border-radius:24px;display:block}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500;justify-content:center;color:#090d0f;font-size:20px;flex-direction:column}.p-drawer-content{padding:0!important;margin:0!important}\n"], dependencies: [{ kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }], encapsulation: i0.ViewEncapsulation.None });
1269
- }
1270
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BottomSheetComponent, decorators: [{
1271
- type: Component,
1272
- args: [{ selector: "app-bottom-sheet", standalone: true, imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet, TooltipModule], encapsulation: ViewEncapsulation.None, template: "<p-drawer\r\n (onHide)=\"hideBottomSheet()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"false\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'bottom'\"\r\n appendTo=\"body\"\r\n >\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"band\"></div>\r\n </ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.band{background-color:#dfe0e6;width:40px;height:4px;border-radius:24px;display:block}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500;justify-content:center;color:#090d0f;font-size:20px;flex-direction:column}.p-drawer-content{padding:0!important;margin:0!important}\n"] }]
1273
- }], propDecorators: { show: [{
1274
- type: Input
1275
- }], contentTemplate: [{
1276
- type: Input
1277
- }], onHide: [{
1278
- type: Output
1279
- }], onShow: [{
1280
- type: Output
1281
- }] } });
1282
-
1283
- class DynamicSidebarComponent {
1284
- component;
1285
- data;
1286
- title = '';
1287
- actions;
1288
- sidebarSize = 'md';
1289
- closable = true;
1290
- closeOnEscape = true;
1291
- dismissible = true;
1292
- position = 'left';
1293
- styleClass = '';
1294
- disabled = false;
1295
- closed = new EventEmitter();
1296
- contentContainer;
1297
- contentRef;
1298
- show = true;
1299
- ngAfterViewInit() {
1300
- this.renderContent();
1301
- }
1302
- renderContent() {
1303
- if (!this.component)
1304
- return;
1305
- this.contentContainer.clear();
1306
- this.contentRef = this.contentContainer.createComponent(this.component);
1307
- if (this.data)
1308
- Object.assign(this.contentRef.instance, this.data);
1309
- }
1310
- handleClose() {
1311
- if (this.contentRef.instance.close)
1312
- this.contentRef.instance.close();
1313
- this.closed.emit(null);
1314
- this.destroy();
1315
- }
1316
- handleSubmit() {
1317
- if (this.data.form) {
1318
- this.data.form.markAllAsTouched();
1319
- if (this.data.form.invalid)
1320
- return;
1321
- }
1322
- if (this.contentRef.instance.submit)
1323
- this.contentRef.instance.submit();
1324
- }
1325
- destroy() {
1326
- this.contentRef?.destroy();
1327
- }
1328
- ngOnDestroy() {
1329
- this.destroy();
1330
- }
1331
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1332
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: DynamicSidebarComponent, isStandalone: true, selector: "app-dynamic-sidebar", inputs: { component: "component", data: "data", title: "title", actions: "actions", sidebarSize: "sidebarSize", closable: "closable", closeOnEscape: "closeOnEscape", dismissible: "dismissible", position: "position", styleClass: "styleClass", disabled: "disabled" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<p-drawer\r\n [(visible)]=\"show\"\r\n [position]=\"position\"\r\n appendTo=\"body\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n (onHide)=\"handleClose()\"\r\n [position]=\"'left'\"\r\n [styleClass]=\"'p-drawer-' + sidebarSize + ' custom-content bg-white ' + styleClass\">\r\n <ng-template pTemplate=\"header\">\r\n <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n </ng-template>\r\n <ng-template pTemplate=\"content\">\r\n <ng-template #contentContainer></ng-template>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"flex gap-4 mt-4\">\r\n <div class=\"flex-auto\">\r\n <app-button (click)=\"handleSubmit()\"\r\n [icon]=\"actions?.save?.icon\"\r\n [iconPos]=\"actions?.save?.iconPos || 'right'\"\r\n [styleClass]=\"(actions?.save?.style || 'danger') + ' w-full'\"\r\n [label]=\"actions?.save?.title || ('actions.submit' | translate)\"\r\n [variant]=\"actions?.save?.variant\"\r\n />\r\n </div>\r\n <app-button (click)=\"handleClose()\" severity=\"danger\" variant=\"outlined\"\r\n [label]=\"actions?.cancel?.title || ('actions.cancel' | translate)\" />\r\n </div>\r\n </ng-template>\r\n</p-drawer>\r\n", styles: [".flex-auto{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1$8.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
1333
- }
1334
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicSidebarComponent, decorators: [{
1335
- type: Component,
1336
- args: [{ selector: "app-dynamic-sidebar", standalone: true, imports: [CommonModule, TranslatePipe, DrawerModule, TooltipModule, AppButtonComponent], template: "<p-drawer\r\n [(visible)]=\"show\"\r\n [position]=\"position\"\r\n appendTo=\"body\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n (onHide)=\"handleClose()\"\r\n [position]=\"'left'\"\r\n [styleClass]=\"'p-drawer-' + sidebarSize + ' custom-content bg-white ' + styleClass\">\r\n <ng-template pTemplate=\"header\">\r\n <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n </ng-template>\r\n <ng-template pTemplate=\"content\">\r\n <ng-template #contentContainer></ng-template>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"flex gap-4 mt-4\">\r\n <div class=\"flex-auto\">\r\n <app-button (click)=\"handleSubmit()\"\r\n [icon]=\"actions?.save?.icon\"\r\n [iconPos]=\"actions?.save?.iconPos || 'right'\"\r\n [styleClass]=\"(actions?.save?.style || 'danger') + ' w-full'\"\r\n [label]=\"actions?.save?.title || ('actions.submit' | translate)\"\r\n [variant]=\"actions?.save?.variant\"\r\n />\r\n </div>\r\n <app-button (click)=\"handleClose()\" severity=\"danger\" variant=\"outlined\"\r\n [label]=\"actions?.cancel?.title || ('actions.cancel' | translate)\" />\r\n </div>\r\n </ng-template>\r\n</p-drawer>\r\n", styles: [".flex-auto{flex:1 1 auto}\n"] }]
1337
- }], propDecorators: { component: [{
1338
- type: Input
1339
- }], data: [{
1340
- type: Input
1341
- }], title: [{
1342
- type: Input
1343
- }], actions: [{
1344
- type: Input
1345
- }], sidebarSize: [{
1346
- type: Input
1347
- }], closable: [{
1348
- type: Input
1349
- }], closeOnEscape: [{
1350
- type: Input
1351
- }], dismissible: [{
1352
- type: Input
1353
- }], position: [{
1354
- type: Input
1355
- }], styleClass: [{
1356
- type: Input
1357
- }], disabled: [{
1358
- type: Input
1359
- }], closed: [{
1360
- type: Output
1361
- }], contentContainer: [{
1362
- type: ViewChild,
1363
- args: ['contentContainer', { read: ViewContainerRef }]
1364
- }] } });
1365
-
1366
- class DynamicSidebarV2Service {
1367
- sidebarRef;
1368
- appRef = inject(ApplicationRef);
1369
- injector = inject(Injector);
1370
- envInjector = inject(EnvironmentInjector);
1371
- open(options) {
1372
- this.close();
1373
- this.sidebarRef = createComponent(DynamicSidebarComponent, {
1374
- environmentInjector: this.envInjector,
1375
- elementInjector: this.injector,
1376
- });
1377
- const instance = this.sidebarRef.instance;
1378
- instance.title = options.title ?? '';
1379
- instance.sidebarSize = options.size ?? 'md';
1380
- instance.position = options.position ?? 'left';
1381
- instance.styleClass = options.styleClass ?? '';
1382
- instance.component = options.component;
1383
- instance.data = options.data ?? {};
1384
- instance.actions = options.actions;
1385
- instance.closed.subscribe(() => this.close());
1386
- this.appRef.attachView(this.sidebarRef.hostView);
1387
- const domElem = this.sidebarRef.hostView.rootNodes[0];
1388
- document.body.appendChild(domElem);
1389
- }
1390
- close() {
1391
- if (this.sidebarRef) {
1392
- this.sidebarRef.destroy();
1393
- this.sidebarRef = undefined;
1394
- }
1395
- }
1396
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicSidebarV2Service, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1397
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicSidebarV2Service, providedIn: 'root' });
1398
- }
1399
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicSidebarV2Service, decorators: [{
1400
- type: Injectable,
1401
- args: [{ providedIn: 'root' }]
1402
- }] });
1403
-
1404
- /**
1405
- * Generated bundle index. Do not edit.
1406
- */
1407
-
1408
- export { AppAccordionComponent, AppBreadcrumbComponent, AppButtonComponent, AppDropdownMenuComponent, AppTabsComponent, AutoCompleteComponent, BasicErrorKeysEnum, BottomSheetComponent, ConfirmationDialogComponent, ConfirmationDialogService, DatePickerComponent, DynamicFormComponent, DynamicSidebarService, DynamicSidebarV2Service, ErrorsWithValuesKeysEnum, FormFieldTypeEnum, FormUtils, FormValidationService, IcoMoonIconComponent, InputComponent, ReadMoreComponent, SelectButtonComponent, SelectComponent, SideBarComponent, SidebarConfigDefaults, SwitchComponent, UserAutocompleteCardComponent, UserInfoComponent, ValidationErrorsPipe };
1409
- //# sourceMappingURL=corp-products-ui-components.mjs.map