@corp-products/ui-components 3.5.8 → 3.6.0

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 (148) hide show
  1. package/.storybook/main.ts +12 -0
  2. package/debug-storybook.log +53 -0
  3. package/ng-package.json +7 -0
  4. package/package.json +25 -36
  5. package/src/enums/date-formatter.ts +22 -0
  6. package/src/helper/date-handler.ts +142 -0
  7. package/src/lib/alert-dialog/alert-dialog.component.html +22 -0
  8. package/src/lib/alert-dialog/alert-dialog.component.scss +0 -0
  9. package/src/lib/alert-dialog/alert-dialog.component.spec.ts +22 -0
  10. package/src/lib/alert-dialog/alert-dialog.component.ts +44 -0
  11. package/src/lib/alert-dialog/alert-dialog.interface.ts +6 -0
  12. package/src/lib/alert-dialog/alert-dialog.service.ts +33 -0
  13. package/src/lib/app-accordion/app-accordion.component.html +15 -0
  14. package/src/lib/app-accordion/app-accordion.component.scss +0 -0
  15. package/src/lib/app-accordion/app-accordion.component.spec.ts +21 -0
  16. package/src/lib/app-accordion/app-accordion.component.ts +21 -0
  17. package/src/lib/app-accordion/index.ts +2 -0
  18. package/src/lib/app-breadcrumb/app-breadcrumb.component.html +7 -0
  19. package/src/lib/app-breadcrumb/app-breadcrumb.component.scss +25 -0
  20. package/src/lib/app-breadcrumb/app-breadcrumb.component.ts +140 -0
  21. package/src/lib/app-breadcrumb/app-breadcrumb.interface.ts +15 -0
  22. package/src/lib/app-button/app-button.component.html +7 -0
  23. package/src/lib/app-button/app-button.component.scss +0 -0
  24. package/src/lib/app-button/app-button.component.ts +14 -0
  25. package/src/lib/app-button/app-button.ts +15 -0
  26. package/src/lib/app-button/index.ts +2 -0
  27. package/src/lib/app-dropdown-menu/app-dropdown-menu.component.html +22 -0
  28. package/src/lib/app-dropdown-menu/app-dropdown-menu.component.scss +39 -0
  29. package/src/lib/app-dropdown-menu/app-dropdown-menu.component.spec.ts +21 -0
  30. package/src/lib/app-dropdown-menu/app-dropdown-menu.component.ts +43 -0
  31. package/src/lib/app-dropdown-menu/app-dropdown-menu.ts +17 -0
  32. package/src/lib/app-dropdown-menu/index.ts +2 -0
  33. package/src/lib/app-dropdown-menu/menu-popup.pipe.ts +18 -0
  34. package/src/lib/app-header/app-header.component.html +26 -0
  35. package/src/lib/app-header/app-header.component.scss +0 -0
  36. package/src/lib/app-header/app-header.component.ts +43 -0
  37. package/src/lib/app-side-menu/app-side-menu.component.html +20 -0
  38. package/src/lib/app-side-menu/app-side-menu.component.ts +28 -0
  39. package/src/lib/app-side-menu/routes-names.ts +28 -0
  40. package/src/lib/app-side-menu/side-menu-items.ts +45 -0
  41. package/src/lib/app-side-menu/side-menu.ts +12 -0
  42. package/src/lib/app-tabs/app-tab.interface.ts +27 -0
  43. package/src/lib/app-tabs/app-tabs.component.html +37 -0
  44. package/src/lib/app-tabs/app-tabs.component.scss +103 -0
  45. package/src/lib/app-tabs/app-tabs.component.spec.ts +21 -0
  46. package/src/lib/app-tabs/app-tabs.component.ts +67 -0
  47. package/src/lib/app-tabs/index.ts +2 -0
  48. package/src/lib/bottom-sheet/bottom-sheet.component.html +18 -0
  49. package/src/lib/bottom-sheet/bottom-sheet.component.scss +31 -0
  50. package/src/lib/bottom-sheet/bottom-sheet.component.ts +26 -0
  51. package/src/lib/confirmation-dialog/confirmation-dialog.component.html +37 -0
  52. package/src/lib/confirmation-dialog/confirmation-dialog.component.scss +0 -0
  53. package/src/lib/confirmation-dialog/confirmation-dialog.component.spec.ts +22 -0
  54. package/src/lib/confirmation-dialog/confirmation-dialog.component.ts +64 -0
  55. package/src/lib/confirmation-dialog/confirmation-dialog.interface.ts +13 -0
  56. package/src/lib/confirmation-dialog/confirmation-dialog.service.ts +34 -0
  57. package/src/lib/dual-calender/date-picker-switcher/date-picker-switcher.component.html +27 -0
  58. package/src/lib/dual-calender/date-picker-switcher/date-picker-switcher.component.scss +22 -0
  59. package/src/lib/dual-calender/date-picker-switcher/date-picker-switcher.component.ts +64 -0
  60. package/src/lib/dual-calender/dual-calendar.component.html +30 -0
  61. package/src/lib/dual-calender/dual-calendar.component.scss +265 -0
  62. package/src/lib/dual-calender/dual-calendar.component.ts +157 -0
  63. package/src/lib/dual-calender/gregorian-calendar/gregorian-calendar.component.html +21 -0
  64. package/src/lib/dual-calender/gregorian-calendar/gregorian-calendar.component.scss +0 -0
  65. package/src/lib/dual-calender/gregorian-calendar/gregorian-calendar.component.spec.ts +21 -0
  66. package/src/lib/dual-calender/gregorian-calendar/gregorian-calendar.component.ts +65 -0
  67. package/src/lib/dual-calender/hijri-calendar/hijri-calendar.component.html +10 -0
  68. package/src/lib/dual-calender/hijri-calendar/hijri-calendar.component.scss +0 -0
  69. package/src/lib/dual-calender/hijri-calendar/hijri-calendar.component.spec.ts +21 -0
  70. package/src/lib/dual-calender/hijri-calendar/hijri-calendar.component.ts +66 -0
  71. package/src/lib/dual-calender/services/gregorian-i18n.service.ts +123 -0
  72. package/src/lib/dual-calender/services/islamic-i18n.service.ts +119 -0
  73. package/src/lib/dual-calender/utils/date-i18n.utils.ts +58 -0
  74. package/src/lib/dynamic-form/dynamic-form.component.html +84 -0
  75. package/src/lib/dynamic-form/dynamic-form.component.scss +0 -0
  76. package/src/lib/dynamic-form/dynamic-form.component.spec.ts +21 -0
  77. package/src/lib/dynamic-form/dynamic-form.component.ts +58 -0
  78. package/src/lib/dynamic-form/dynamic-form.interface.ts +96 -0
  79. package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.component.html +32 -0
  80. package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.component.scss +3 -0
  81. package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.component.ts +82 -0
  82. package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.config.ts +31 -0
  83. package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.service.ts +41 -0
  84. package/src/lib/form-components/@utils/form-utils.ts +12 -0
  85. package/src/lib/form-components/@utils/validations/error-keys.enum.ts +25 -0
  86. package/src/lib/form-components/@utils/validations/form-validation.service.ts +68 -0
  87. package/src/lib/form-components/@utils/validations/index.ts +4 -0
  88. package/src/lib/form-components/@utils/validations/numbers-only.validator.ts +10 -0
  89. package/src/lib/form-components/@utils/validations/validation-message.pipe.ts +24 -0
  90. package/src/lib/form-components/components/auto-complete/auto-complete.component.html +35 -0
  91. package/src/lib/form-components/components/auto-complete/auto-complete.component.scss +12 -0
  92. package/src/lib/form-components/components/auto-complete/auto-complete.component.spec.ts +21 -0
  93. package/src/lib/form-components/components/auto-complete/auto-complete.component.ts +82 -0
  94. package/src/lib/form-components/components/base-input.component.ts +35 -0
  95. package/src/lib/form-components/components/date-picker/date-picker.component.html +40 -0
  96. package/src/lib/form-components/components/date-picker/date-picker.component.scss +32 -0
  97. package/src/lib/form-components/components/date-picker/date-picker.component.spec.ts +21 -0
  98. package/src/lib/form-components/components/date-picker/date-picker.component.ts +81 -0
  99. package/src/lib/form-components/components/date-picker/date-picker.validator.ts +38 -0
  100. package/src/lib/form-components/components/input/input.component.html +80 -0
  101. package/src/lib/form-components/components/input/input.component.scss +46 -0
  102. package/src/lib/form-components/components/input/input.component.spec.ts +21 -0
  103. package/src/lib/form-components/components/input/input.component.ts +56 -0
  104. package/src/lib/form-components/components/select/select.component.html +123 -0
  105. package/src/lib/form-components/components/select/select.component.scss +53 -0
  106. package/src/lib/form-components/components/select/select.component.spec.ts +21 -0
  107. package/src/lib/form-components/components/select/select.component.ts +87 -0
  108. package/src/lib/form-components/components/select-button/select-button.component.html +21 -0
  109. package/src/lib/form-components/components/select-button/select-button.component.scss +0 -0
  110. package/src/lib/form-components/components/select-button/select-button.component.spec.ts +21 -0
  111. package/src/lib/form-components/components/select-button/select-button.component.ts +22 -0
  112. package/src/lib/form-components/components/switcher/switch.component.html +5 -0
  113. package/src/lib/form-components/components/switcher/switch.component.scss +0 -0
  114. package/src/lib/form-components/components/switcher/switch.component.spec.ts +21 -0
  115. package/src/lib/form-components/components/switcher/switch.component.ts +25 -0
  116. package/src/lib/form-components/index.ts +9 -0
  117. package/src/lib/form-components/interfaces/index.ts +1 -0
  118. package/src/lib/form-components/interfaces/label-value.ts +4 -0
  119. package/src/lib/ico-moon-icon/ico-moon-icon.component.ts +23 -0
  120. package/src/lib/read-more/read-more.component.html +17 -0
  121. package/src/lib/read-more/read-more.component.scss +0 -0
  122. package/src/lib/read-more/read-more.component.spec.ts +21 -0
  123. package/src/lib/read-more/read-more.component.ts +21 -0
  124. package/src/lib/side-bar/side-bar.component.html +24 -0
  125. package/src/lib/side-bar/side-bar.component.scss +22 -0
  126. package/src/lib/side-bar/side-bar.component.spec.ts +21 -0
  127. package/src/lib/side-bar/side-bar.component.ts +33 -0
  128. package/src/lib/side-bar-dynamic/data-injector.pipe.ts +15 -0
  129. package/src/lib/side-bar-dynamic/dynamic-sidebar.service.ts +116 -0
  130. package/src/lib/side-bar-dynamic/side-bar-dynamic.component.html +42 -0
  131. package/src/lib/side-bar-dynamic/side-bar-dynamic.component.scss +5 -0
  132. package/src/lib/side-bar-dynamic/side-bar-dynamic.component.spec.ts +21 -0
  133. package/src/lib/side-bar-dynamic/side-bar-dynamic.component.ts +37 -0
  134. package/src/lib/side-bar-dynamic/side-bar-utils.ts +30 -0
  135. package/src/lib/side-bar-dynamic/sidebar-config.ts +48 -0
  136. package/src/lib/user-autocomplete-card/user-autocomplete-card.component.html +20 -0
  137. package/src/lib/user-autocomplete-card/user-autocomplete-card.component.scss +0 -0
  138. package/src/lib/user-autocomplete-card/user-autocomplete-card.component.spec.ts +21 -0
  139. package/src/lib/user-autocomplete-card/user-autocomplete-card.component.ts +21 -0
  140. package/src/lib/user-info/user-info.component.html +10 -0
  141. package/src/lib/user-info/user-info.component.ts +11 -0
  142. package/src/public-api.ts +29 -0
  143. package/tsconfig.lib.json +18 -0
  144. package/tsconfig.lib.prod.json +11 -0
  145. package/tsconfig.spec.json +14 -0
  146. package/fesm2022/corp-products-ui-components.mjs +0 -2252
  147. package/fesm2022/corp-products-ui-components.mjs.map +0 -1
  148. package/index.d.ts +0 -720
@@ -1,2252 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, Injectable, Renderer2, ChangeDetectorRef, signal, effect, HostListener, ViewChild, InjectionToken, Injector, createComponent, ViewContainerRef, ApplicationRef, EnvironmentInjector, DestroyRef } 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, formatDate, 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$7 from '@angular/router';
12
- import { Router, ActivatedRoute, NavigationEnd, RouterLink, RouterOutlet, NavigationStart, RouterModule } from '@angular/router';
13
- import { filter, Subject, Subscription, BehaviorSubject, of } 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$9 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$8 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, FormControl, FormsModule } from '@angular/forms';
28
- import { AutoComplete } from 'primeng/autocomplete';
29
- import * as i3$1 from 'primeng/floatlabel';
30
- import { FloatLabel, FloatLabelModule } from 'primeng/floatlabel';
31
- import { DatePicker, DatePickerModule } from 'primeng/datepicker';
32
- import { InputText } from 'primeng/inputtext';
33
- import { Textarea } from 'primeng/textarea';
34
- import { IconField } from 'primeng/iconfield';
35
- import { InputIcon } from 'primeng/inputicon';
36
- import * as i2$2 from 'primeng/selectbutton';
37
- import { SelectButtonModule } from 'primeng/selectbutton';
38
- import * as i2$3 from 'primeng/multiselect';
39
- import { MultiSelectModule } from 'primeng/multiselect';
40
- import { Select } from 'primeng/select';
41
- import * as i4 from 'primeng/checkbox';
42
- import { CheckboxModule } from 'primeng/checkbox';
43
- import * as i1$5 from 'primeng/toggleswitch';
44
- import { ToggleSwitchModule } from 'primeng/toggleswitch';
45
- import * as i1$6 from '@ng-bootstrap/ng-bootstrap';
46
- import { NgbDatepickerI18n, NgbCalendarIslamicUmalqura, NgbDatepickerModule, NgbCalendar, NgbCalendarGregorian, NgbDate } from '@ng-bootstrap/ng-bootstrap';
47
- import { trigger, state, transition, style, animate } from '@angular/animations';
48
- import '@angular/localize/init';
49
- import * as i2$4 from 'primeng/accordion';
50
- import { AccordionModule } from 'primeng/accordion';
51
- import { DividerModule } from 'primeng/divider';
52
- import { Breadcrumb } from 'primeng/breadcrumb';
53
- import { filter as filter$1, map } from 'rxjs/operators';
54
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
55
-
56
- class AppButtonComponent extends Button {
57
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
58
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AppButtonComponent, isStandalone: true, selector: "app-button", providers: [ButtonStyle], usesInheritance: true, ngImport: i0, template: "<p-button (onFocus)=\"onFocus.emit()\" (onBlur)=\"onBlur.emit()\" (onClick)=\"onClick.emit()\" [size]=\"size\"\r\n [loadingIcon]=\"loadingIcon\" [disabled]=\"disabled\" [iconPos]=\"iconPos\" [icon]=\"icon\" [label]=\"label\"\r\n [rounded]=\"rounded\" [severity]=\"severity\" [styleClass]=\"styleClass\" [text]=\"text\" [variant]=\"variant\"\r\n [loading]=\"loading\" [autofocus]=\"autofocus\" [link]=\"link\" [plain]=\"plain\" [raised]=\"raised\"\r\n [loadingIcon]=\"loadingIcon\" [style]=\"style\" [outlined]=\"outlined\">\r\n <ng-content></ng-content>\r\n</p-button>", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
59
- }
60
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppButtonComponent, decorators: [{
61
- type: Component,
62
- 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>" }]
63
- }] });
64
-
65
- class IcoMoonIconComponent {
66
- iconName;
67
- iconClass;
68
- iconPathCount = 0;
69
- get getPathCount() {
70
- return Array.from({ length: this.iconPathCount }, (_, i) => i + 1);
71
- }
72
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IcoMoonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
73
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: IcoMoonIconComponent, isStandalone: true, selector: "app-ico-moon-card", inputs: { iconName: "iconName", iconClass: "iconClass", iconPathCount: "iconPathCount" }, ngImport: i0, template: `
74
- <i [class]="iconName + ' ' + iconClass">
75
- @for (path of getPathCount; track $index) {
76
- <i [class]="iconName + ' path'+path"></i>
77
- }
78
- </i>
79
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
80
- }
81
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IcoMoonIconComponent, decorators: [{
82
- type: Component,
83
- args: [{
84
- selector: 'app-ico-moon-card',
85
- standalone: true,
86
- template: `
87
- <i [class]="iconName + ' ' + iconClass">
88
- @for (path of getPathCount; track $index) {
89
- <i [class]="iconName + ' path'+path"></i>
90
- }
91
- </i>
92
- `,
93
- changeDetection: ChangeDetectionStrategy.OnPush
94
- }]
95
- }], propDecorators: { iconName: [{
96
- type: Input,
97
- args: [{ required: true }]
98
- }], iconClass: [{
99
- type: Input
100
- }], iconPathCount: [{
101
- type: Input
102
- }] } });
103
-
104
- class AppTabsComponent {
105
- tabs;
106
- tabsStyle = 'basic';
107
- responsive = false;
108
- twoDigitCount;
109
- selectedTabIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedTabIndex" }] : []));
110
- activeTabIndex = 0;
111
- router = inject(Router);
112
- route = inject(ActivatedRoute);
113
- ngOnInit() {
114
- this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
115
- this.updateActiveTab();
116
- });
117
- // to be refactor
118
- this.updateActiveTab();
119
- }
120
- // Updates the active tab index based on the current route
121
- updateActiveTab() {
122
- if (!this.tabs.isRouted)
123
- return;
124
- const currentUrl = this.router.url;
125
- const matchingTabIndex = this.tabs.items.findIndex((tab) => currentUrl.includes(tab.link));
126
- this.activeTabIndex = matchingTabIndex !== -1 ? matchingTabIndex : 0;
127
- }
128
- onTabChange(index) {
129
- this.selectedTabIndex.set(index);
130
- if (!this.tabs.isRouted)
131
- return;
132
- const selectedTab = this.tabs.items[index];
133
- if (selectedTab && !selectedTab.disabled) {
134
- this.router.navigate([selectedTab.link], { relativeTo: this.route });
135
- }
136
- }
137
- getTabCount(count) {
138
- if (!count)
139
- return '0';
140
- return this.twoDigitCount && count > 99 ? '99+' : count.toString();
141
- }
142
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
143
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AppTabsComponent, isStandalone: true, selector: "app-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: false, isRequired: false, transformFunction: null }, tabsStyle: { classPropertyName: "tabsStyle", publicName: "tabsStyle", isSignal: false, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: false, isRequired: false, transformFunction: null }, twoDigitCount: { classPropertyName: "twoDigitCount", publicName: "twoDigitCount", isSignal: false, isRequired: false, transformFunction: null }, selectedTabIndex: { classPropertyName: "selectedTabIndex", publicName: "selectedTabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabIndex: "selectedTabIndexChange" }, ngImport: i0, template: "@if (tabs && tabs.items.length) {\r\n<div [class]=\"tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'\">\r\n <p-tabs [value]=\"selectedTabIndex() || activeTabIndex\" scrollable>\r\n <p-tablist>\r\n\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tab [value]=\"i\" [routerLink]=\"tabs.isRouted ? $any(tab).link : null\" [disabled]=\"tab.disabled\"\r\n (click)=\"onTabChange(i)\">\r\n @if (tab.iconName) {\r\n <app-ico-moon-card [iconClass]=\"'text-[17px]'\" [iconName]=\"tab.iconName\"\r\n [iconPathCount]=\"tab.iconPathCount || 0\" />\r\n }\r\n <span>{{ tab.title | translate }}\r\n @if (tab.count || tab.count === 0) {\r\n <p-badge [value]=\"getTabCount(tab.count)\" severity=\"secondary\" />\r\n }\r\n </span>\r\n </p-tab>\r\n }\r\n\r\n </p-tablist>\r\n\r\n <p-tabpanels>\r\n @if (tabs.isRouted) {\r\n <router-outlet></router-outlet>\r\n } @else {\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tabpanel [value]=\"i\">\r\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n </p-tabpanel>\r\n }\r\n }\r\n\r\n </p-tabpanels>\r\n </p-tabs>\r\n</div>\r\n}", styles: [".tabs-container.full-width .p-tabs .p-tablist-tab-list .p-tab{@apply flex-grow flex justify-center max-w-[50%];}.tabs-container .p-tabs .p-tablist-tab-list{@apply relative;}.tabs-container .p-tabs .p-tablist-tab-list:after{@apply content-[\"\"] w-full h-[3px] bg-purple-800/5 absolute bottom-0 right-0 z-[1];}.tabs-container .p-tabs .p-tablist-tab-list .p-tab{@apply text-sm text-gray-400 font-normal text-[16px] border-b-[4px] border-transparent z-[2];}.tabs-container .p-tabs .p-tablist-tab-list .p-tab:not(.p-tab-active) app-ico-moon-card{@apply grayscale;}.tabs-container .p-tabs .p-tablist-active-bar{@apply hidden;}.tabs-container .p-tabs .p-tabpanels.p-component{@apply mt-5 rounded-lg;}.tabs-container.basic .p-tabs .p-tablist-tab-list{@apply bg-transparent;}.tabs-container.basic .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply text-primary border-primary;}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab{@apply rounded-t-lg text-[14px];}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply bg-purple-800/5 font-semibold text-primary border-primary;}.tabs-container.primary .p-tabs .p-tablist-tab-list:after{@apply bg-purple-800/5;}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab{@apply rounded-t-lg text-[14px];}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply bg-primary font-semibold text-white border-secondary;}[dir=rtl] .p-tabs .p-tablist .p-iconwrapper{@apply rotate-180deg;}[dir=rtl] .p-tabs .p-tablist .p-tablist-next-button{@apply right-auto left-0;}[dir=rtl] .p-tabs .p-tablist .p-tablist-prev-button{@apply right-0 left-auto;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabList, selector: "p-tablist" }, { kind: "component", type: i2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: IcoMoonIconComponent, selector: "app-ico-moon-card", inputs: ["iconName", "iconClass", "iconPathCount"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
144
- }
145
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppTabsComponent, decorators: [{
146
- type: Component,
147
- args: [{ selector: 'app-tabs', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
148
- CommonModule,
149
- TabsModule,
150
- RouterLink,
151
- RouterOutlet,
152
- IcoMoonIconComponent,
153
- TranslateModule,
154
- BadgeModule,
155
- ], 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"] }]
156
- }], propDecorators: { tabs: [{
157
- type: Input
158
- }], tabsStyle: [{
159
- type: Input
160
- }], responsive: [{
161
- type: Input
162
- }], twoDigitCount: [{
163
- type: Input
164
- }], selectedTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTabIndex", required: false }] }, { type: i0.Output, args: ["selectedTabIndexChange"] }] } });
165
-
166
- class MenuPopupTextColorPipe {
167
- transform(color) {
168
- switch (color) {
169
- case 'white': return 'text-white';
170
- case 'purple': return 'text-purple-500';
171
- case 'green': return 'text-green-500';
172
- default: return 'text-white';
173
- }
174
- }
175
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuPopupTextColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
176
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MenuPopupTextColorPipe, isStandalone: true, name: "popupTextColorClass" });
177
- }
178
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuPopupTextColorPipe, decorators: [{
179
- type: Pipe,
180
- args: [{
181
- name: 'popupTextColorClass',
182
- standalone: true,
183
- pure: true
184
- }]
185
- }] });
186
-
187
- class AppDropdownMenuComponent {
188
- buttonTitle;
189
- menuItems = [];
190
- popupMenuStyle = "purple";
191
- buttonIcon = "font-icon-plus";
192
- buttonClass;
193
- buttonStyle;
194
- buttonSeverity;
195
- buttonIconPosition = "left";
196
- router = inject(Router);
197
- showMenu;
198
- ngOnInit() {
199
- this.showMenu = this.menuItems.some((item) => {
200
- return item.show;
201
- });
202
- }
203
- onMenuItemClick(item) {
204
- if (item.callback) {
205
- item.callback();
206
- }
207
- else if (item.routerLink) {
208
- this.router.navigate(Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink], { queryParams: item.queryParams || {} });
209
- }
210
- }
211
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
212
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AppDropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { buttonTitle: "buttonTitle", menuItems: "menuItems", popupMenuStyle: "popupMenuStyle", buttonIcon: "buttonIcon", buttonClass: "buttonClass", buttonStyle: "buttonStyle", buttonSeverity: "buttonSeverity", buttonIconPosition: "buttonIconPosition" }, ngImport: i0, template: "@if (showMenu) {\r\n<app-button (click)=\"op.toggle($event)\" [class]=\"buttonClass\" [iconPos]=\"buttonIconPosition\" [icon]=\"buttonIcon\"\r\n [label]=\"buttonTitle\" [styleClass]=\"buttonStyle\" [severity]=\"buttonSeverity\" />\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-1 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{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover:is(.purple-menu){@apply bg-primary text-white text-sm mt-2;}.p-popover:is(.purple-menu) li:not(:last-child){@apply border-b-2 border-purple-700;}.p-popover:is(.white-menu) li:not(:last-child){@apply border-b;}.p-popover:before,.p-popover:after{display:none}.p-popover .p-popover-content{width:auto;min-width:unset}.p-popover .p-popover-content ul li{@apply py-3;}.p-popover .p-popover-content ul li:hover{opacity:.7}.p-popover .p-popover-content ul li:first-child{@apply pt-0;}.p-popover .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 });
213
- }
214
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppDropdownMenuComponent, decorators: [{
215
- type: Component,
216
- 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 [label]=\"buttonTitle\" [styleClass]=\"buttonStyle\" [severity]=\"buttonSeverity\" />\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-1 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{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover:is(.purple-menu){@apply bg-primary text-white text-sm mt-2;}.p-popover:is(.purple-menu) li:not(:last-child){@apply border-b-2 border-purple-700;}.p-popover:is(.white-menu) li:not(:last-child){@apply border-b;}.p-popover:before,.p-popover:after{display:none}.p-popover .p-popover-content{width:auto;min-width:unset}.p-popover .p-popover-content ul li{@apply py-3;}.p-popover .p-popover-content ul li:hover{opacity:.7}.p-popover .p-popover-content ul li:first-child{@apply pt-0;}.p-popover .p-popover-content ul li:last-child{@apply pb-0;}\n"] }]
217
- }], propDecorators: { buttonTitle: [{
218
- type: Input,
219
- args: [{ required: true }]
220
- }], menuItems: [{
221
- type: Input,
222
- args: [{ required: true }]
223
- }], popupMenuStyle: [{
224
- type: Input
225
- }], buttonIcon: [{
226
- type: Input
227
- }], buttonClass: [{
228
- type: Input
229
- }], buttonStyle: [{
230
- type: Input
231
- }], buttonSeverity: [{
232
- type: Input
233
- }], buttonIconPosition: [{
234
- type: Input
235
- }] } });
236
-
237
- class SideBarComponent {
238
- show = false;
239
- title;
240
- closable = true;
241
- dismissible = false;
242
- closeOnEscape = false;
243
- sidebarSize = "sm";
244
- styleClass = "";
245
- hide = new EventEmitter();
246
- onShow = new EventEmitter();
247
- contentTemplate;
248
- footerTemplate;
249
- position = 'left';
250
- hideSidebar() {
251
- this.show = false;
252
- this.hide.emit(false);
253
- }
254
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
255
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SideBarComponent, isStandalone: true, selector: "app-side-bar", inputs: { show: "show", title: "title", closable: "closable", dismissible: "dismissible", closeOnEscape: "closeOnEscape", sidebarSize: "sidebarSize", styleClass: "styleClass", contentTemplate: "contentTemplate", footerTemplate: "footerTemplate", position: "position" }, outputs: { hide: "hide", onShow: "onShow" }, ngImport: i0, template: "<!-- TODO refactor position sidebar based on html dir-->\r\n<p-drawer\r\n (onHide)=\"hideSidebar()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'left'\"\r\n appendTo=\"body\"\r\n styleClass=\"p-drawer-{{ sidebarSize }} custom-content bg-white {{ styleClass }}\">\r\n <ng-template pTemplate=\"header\">\r\n <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n </ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500}.p-drawer-footer{--p-drawer-footer-padding: .75rem var(--p-overlay-modal-padding)}.p-drawer-content{padding-top:var(--p-overlay-modal-padding)!important}\n"], dependencies: [{ kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
256
- }
257
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideBarComponent, decorators: [{
258
- type: Component,
259
- 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"] }]
260
- }], propDecorators: { show: [{
261
- type: Input
262
- }], title: [{
263
- type: Input
264
- }], closable: [{
265
- type: Input
266
- }], dismissible: [{
267
- type: Input
268
- }], closeOnEscape: [{
269
- type: Input
270
- }], sidebarSize: [{
271
- type: Input
272
- }], styleClass: [{
273
- type: Input
274
- }], hide: [{
275
- type: Output
276
- }], onShow: [{
277
- type: Output
278
- }], contentTemplate: [{
279
- type: Input
280
- }], footerTemplate: [{
281
- type: Input
282
- }], position: [{
283
- type: Input
284
- }] } });
285
-
286
- class UserInfoComponent {
287
- profileImage;
288
- name;
289
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
290
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: UserInfoComponent, isStandalone: true, selector: "user-info", inputs: { profileImage: "profileImage", name: "name" }, ngImport: i0, template: "<div class=\"flex items-center gap-2\">\r\n <img\r\n [alt]=\"name\"\r\n [src]=\"profileImage\"\r\n class=\"rounded-full object-cover w-[24px] h-[24px]\"\r\n height=\"24\"\r\n width=\"24\"\r\n />\r\n <p class=\"text-[14px]\">{{ name }}</p>\r\n</div>\r\n" });
291
- }
292
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UserInfoComponent, decorators: [{
293
- type: Component,
294
- 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" }]
295
- }], propDecorators: { profileImage: [{
296
- type: Input
297
- }], name: [{
298
- type: Input
299
- }] } });
300
-
301
- class FormUtils {
302
- static getFormControl(controlName, form) {
303
- if (!form)
304
- throw new Error(`Form is not initialized.`);
305
- const formControl = form.get(controlName);
306
- if (!formControl)
307
- throw new Error(`There's no form control with given name. '${controlName}'`);
308
- return formControl;
309
- }
310
- }
311
-
312
- var BasicErrorKeysEnum;
313
- (function (BasicErrorKeysEnum) {
314
- BasicErrorKeysEnum["required"] = "REQUIRED";
315
- BasicErrorKeysEnum["email"] = "EMAIL";
316
- BasicErrorKeysEnum["pattern"] = "PATTERN";
317
- BasicErrorKeysEnum["invalidArFormat"] = "INVALID_AR_FORMAT";
318
- BasicErrorKeysEnum["invalidLink"] = "INVALID_LINK";
319
- BasicErrorKeysEnum["endDateBeforeStartDate"] = "END_DATE_BEFORE_START_DATE";
320
- BasicErrorKeysEnum["startDateEqualsEndDate"] = "START_DATE_EQUALS_END_DATE";
321
- BasicErrorKeysEnum["endTimeBeforeStartTime"] = "END_TIME_BEFORE_START_TIME";
322
- BasicErrorKeysEnum["startTimeEqualsEndTime"] = "START_TIME_EQUALS_END_TIME";
323
- BasicErrorKeysEnum["integer"] = "INTEGER";
324
- BasicErrorKeysEnum["positiveNumber"] = "POSITIVE_NUMBER";
325
- BasicErrorKeysEnum["fileSelected"] = "FILE_SELECTED";
326
- BasicErrorKeysEnum["default"] = "DEFAULT";
327
- })(BasicErrorKeysEnum || (BasicErrorKeysEnum = {}));
328
- var ErrorsWithValuesKeysEnum;
329
- (function (ErrorsWithValuesKeysEnum) {
330
- ErrorsWithValuesKeysEnum["minlength"] = "MIN_LENGTH";
331
- ErrorsWithValuesKeysEnum["maxlength"] = "MAX_LENGTH";
332
- ErrorsWithValuesKeysEnum["min"] = "MIN";
333
- ErrorsWithValuesKeysEnum["max"] = "MAX";
334
- ErrorsWithValuesKeysEnum["maxSize"] = "MAX_SIZE";
335
- ErrorsWithValuesKeysEnum["maxFiles"] = "MAX_FILES";
336
- ErrorsWithValuesKeysEnum["allowedTypes"] = "ALLOWED_TYPES";
337
- })(ErrorsWithValuesKeysEnum || (ErrorsWithValuesKeysEnum = {}));
338
-
339
- class FormValidationService {
340
- translate = inject(TranslateService);
341
- getTranslation(key, interpolateParams) {
342
- return this.translate.instant(`VALIDATION.${key}`, interpolateParams);
343
- }
344
- getErrorMessage(errorKey, errorValue) {
345
- if (this.isBasicErrorKey(errorKey)) {
346
- return this.getTranslation(BasicErrorKeysEnum[errorKey]);
347
- }
348
- if (this.isErrorWithValueKey(errorKey)) {
349
- return this.getErrorWithValueMessage(errorKey, errorValue);
350
- }
351
- return this.getTranslation(BasicErrorKeysEnum.default);
352
- }
353
- // Basic error keys are the keys that don't have any values to interpolate. like required, email, etc.
354
- isBasicErrorKey(key) {
355
- return Object.keys(BasicErrorKeysEnum).includes(key);
356
- }
357
- // Error keys with values are the keys that have values to interpolate. like minlength, maxlength, etc.
358
- isErrorWithValueKey(key) {
359
- return Object.keys(ErrorsWithValuesKeysEnum).includes(key);
360
- }
361
- getErrorWithValueMessage(errorKey, errorValue) {
362
- const messages = {
363
- minlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.minlength, {
364
- requiredLength: val?.requiredLength,
365
- actualLength: val?.actualLength,
366
- }),
367
- maxlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxlength, {
368
- requiredLength: val?.requiredLength,
369
- actualLength: val?.actualLength,
370
- }),
371
- min: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.min, { min: val?.min }),
372
- max: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.max, { max: val?.max }),
373
- maxSize: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxSize, { size: val?.requiredLength }),
374
- maxFiles: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxFiles, { size: val?.requiredLength }),
375
- allowedTypes: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.allowedTypes, { types: val?.join(', ') }),
376
- };
377
- return messages[errorKey](errorValue);
378
- }
379
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
380
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, providedIn: 'root' });
381
- }
382
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, decorators: [{
383
- type: Injectable,
384
- args: [{
385
- providedIn: 'root',
386
- }]
387
- }] });
388
-
389
- class ValidationErrorsPipe {
390
- formValidationService = inject(FormValidationService);
391
- // allowed keys here to handle errors in case of cross-validators like startDate and endDate validators,
392
- // we pass this custom key to handle the error messages only for the allowed keys
393
- transform(errors, allowedKeys) {
394
- if (!errors)
395
- return [];
396
- return Object.keys(errors)
397
- .filter((errorKey) => !allowedKeys || allowedKeys.includes(errorKey)) // Filter errors if allowedKeys are provided
398
- .map((errorKey) => {
399
- return this.formValidationService.getErrorMessage(errorKey, errors[errorKey]);
400
- });
401
- }
402
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
403
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, isStandalone: true, name: "validationErrors" });
404
- }
405
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, decorators: [{
406
- type: Pipe,
407
- args: [{
408
- name: "validationErrors",
409
- standalone: true,
410
- pure: true
411
- }]
412
- }] });
413
-
414
- class BaseInputComponent {
415
- control;
416
- name = '';
417
- label;
418
- placeholder = '';
419
- inputId;
420
- readonly = false;
421
- disabled = false;
422
- hint;
423
- destroy$ = new Subject();
424
- get required() {
425
- return this.control.hasValidator(Validators.required);
426
- }
427
- get isInvalid() {
428
- return this.control.invalid && this.control.touched;
429
- }
430
- ngOnInit() {
431
- }
432
- ngOnDestroy() {
433
- this.destroy$.next();
434
- this.destroy$.complete();
435
- }
436
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
437
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { control: "control", name: "name", label: "label", placeholder: "placeholder", inputId: "inputId", readonly: "readonly", disabled: "disabled", hint: "hint" }, ngImport: i0, template: '', isInline: true });
438
- }
439
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseInputComponent, decorators: [{
440
- type: Component,
441
- args: [{
442
- template: '',
443
- }]
444
- }], propDecorators: { control: [{
445
- type: Input,
446
- args: [{ required: true }]
447
- }], name: [{
448
- type: Input
449
- }], label: [{
450
- type: Input
451
- }], placeholder: [{
452
- type: Input
453
- }], inputId: [{
454
- type: Input
455
- }], readonly: [{
456
- type: Input
457
- }], disabled: [{
458
- type: Input
459
- }], hint: [{
460
- type: Input
461
- }] } });
462
-
463
- class AutoCompleteComponent extends BaseInputComponent {
464
- selectedItemTemplate = null;
465
- // eslint-disable-next-line @angular-eslint/no-output-on-prefix
466
- onSearch = new EventEmitter();
467
- selectOption = new EventEmitter();
468
- items = [];
469
- minLengthToSearch = 3;
470
- delay = 300; // default value
471
- basicInput;
472
- typeAhead = false;
473
- variant = 'over';
474
- constructor() {
475
- super();
476
- }
477
- search(event) {
478
- this.onSearch.emit(event.query);
479
- }
480
- onSelect(event) {
481
- this.selectOption.emit(event);
482
- }
483
- onKeyDown(event) {
484
- if (!['Enter', 'Tab', ' '].includes(event.key))
485
- return;
486
- event.preventDefault();
487
- const input = event.target;
488
- this.addValueFromInput(input);
489
- }
490
- onBlur(event) {
491
- const input = event.target;
492
- this.addValueFromInput(input);
493
- }
494
- addValueFromInput(input) {
495
- const value = input.value?.trim();
496
- if (!value)
497
- return;
498
- const current = this.control.value ?? [];
499
- if (!current.includes(value)) {
500
- this.control.setValue([...current, value]);
501
- this.control.markAsDirty();
502
- }
503
- input.value = '';
504
- }
505
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
506
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AutoCompleteComponent, isStandalone: true, selector: "stc-auto-complete", inputs: { selectedItemTemplate: "selectedItemTemplate", items: "items", minLengthToSearch: "minLengthToSearch", delay: "delay", basicInput: "basicInput", typeAhead: "typeAhead", variant: "variant" }, outputs: { onSearch: "onSearch", selectOption: "selectOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (!required) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n <p-floatlabel [variant]=\"variant\" class=\"autoComplete\">\r\n <p-auto-complete (keydown)=\"onKeyDown($event)\" (onBlur)=\"onBlur($event)\" (completeMethod)=\"search($event)\" (onSelect)=\"onSelect($event)\" [delay]=\"delay\"\r\n [disabled]=\"disabled\" [formControl]=\"control\" [id]=\"inputId\" fluid [typeahead]=\"typeAhead\"\r\n [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n [minLength]=\"minLengthToSearch\" [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n [placeholder]=\"placeholder\" [styleClass]=\"'w-full'\" multiple [suggestions]=\"items\">\r\n <ng-template let-item pTemplate=\"item\">\r\n @if (selectedItemTemplate) {\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n }\r\n </ng-template>\r\n </p-auto-complete>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n\r\n</div>\r\n", styles: [".text-required{color:red}.p-error{color:#dc2626}.autoComplete .p-floatlabel-in{height:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
507
- }
508
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteComponent, decorators: [{
509
- type: Component,
510
- args: [{ selector: 'stc-auto-complete', standalone: true, imports: [
511
- ReactiveFormsModule,
512
- AutoComplete,
513
- PrimeTemplate,
514
- NgIf,
515
- NgTemplateOutlet,
516
- NgClass,
517
- JsonPipe,
518
- ValidationErrorsPipe,
519
- TranslatePipe,
520
- FloatLabel,
521
- ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (!required) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n <p-floatlabel [variant]=\"variant\" class=\"autoComplete\">\r\n <p-auto-complete (keydown)=\"onKeyDown($event)\" (onBlur)=\"onBlur($event)\" (completeMethod)=\"search($event)\" (onSelect)=\"onSelect($event)\" [delay]=\"delay\"\r\n [disabled]=\"disabled\" [formControl]=\"control\" [id]=\"inputId\" fluid [typeahead]=\"typeAhead\"\r\n [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n [minLength]=\"minLengthToSearch\" [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n [placeholder]=\"placeholder\" [styleClass]=\"'w-full'\" multiple [suggestions]=\"items\">\r\n <ng-template let-item pTemplate=\"item\">\r\n @if (selectedItemTemplate) {\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n }\r\n </ng-template>\r\n </p-auto-complete>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n\r\n</div>\r\n", styles: [".text-required{color:red}.p-error{color:#dc2626}.autoComplete .p-floatlabel-in{height:auto!important}\n"] }]
522
- }], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
523
- type: Input
524
- }], onSearch: [{
525
- type: Output
526
- }], selectOption: [{
527
- type: Output
528
- }], items: [{
529
- type: Input
530
- }], minLengthToSearch: [{
531
- type: Input
532
- }], delay: [{
533
- type: Input
534
- }], basicInput: [{
535
- type: Input
536
- }], typeAhead: [{
537
- type: Input
538
- }], variant: [{
539
- type: Input
540
- }] } });
541
-
542
- class DatePickerComponent extends BaseInputComponent {
543
- showIcon = false;
544
- showClear = false;
545
- basicInput;
546
- isTimeOnly = false;
547
- minDate;
548
- maxDate;
549
- hourFormat = '12';
550
- nowTime = new Date();
551
- selectionMode = 'single';
552
- onAfterClearDate = new EventEmitter();
553
- variant = 'over';
554
- withoutTime = false;
555
- innerControl = new FormControl(null);
556
- constructor() {
557
- super();
558
- }
559
- ngOnInit() {
560
- if (typeof this.control?.value === 'string') {
561
- const date = new Date(this.control.value);
562
- if (date) {
563
- this.innerControl.setValue(date, { emitEvent: false });
564
- }
565
- }
566
- this.control.valueChanges.subscribe((value) => {
567
- if (!value)
568
- this.innerControl.reset();
569
- });
570
- }
571
- selectCurrentTime(e) {
572
- if (this.withoutTime) {
573
- const d = new Date();
574
- this.control.setValue(d.toISOString().split('T')[0]);
575
- return;
576
- }
577
- this.control.setValue(this.nowTime);
578
- }
579
- clearButtonClick(e) {
580
- this.control.setValue(null);
581
- }
582
- afterClearDate() {
583
- this.control.reset();
584
- this.onAfterClearDate.emit();
585
- }
586
- onDateChange(value) {
587
- if (!this.withoutTime || !value)
588
- return;
589
- const dateOnly = value instanceof Date ? formatDate(value, 'yyyy-MM-dd', 'en-US') : value;
590
- this.control.setValue(dateOnly, { emitEvent: true });
591
- }
592
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
593
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", hourFormat: "hourFormat", selectionMode: "selectionMode", variant: "variant", withoutTime: "withoutTime" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n [class]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\" panelStyleClass=\"d-ltr\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
594
- }
595
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, decorators: [{
596
- type: Component,
597
- args: [{ selector: 'stc-date-picker', standalone: true, imports: [
598
- FormsModule,
599
- DatePicker,
600
- ReactiveFormsModule,
601
- NgClass,
602
- DatePickerModule,
603
- ValidationErrorsPipe,
604
- FloatLabelModule,
605
- ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n [class]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\" panelStyleClass=\"d-ltr\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
606
- }], ctorParameters: () => [], propDecorators: { showIcon: [{
607
- type: Input
608
- }], showClear: [{
609
- type: Input
610
- }], basicInput: [{
611
- type: Input
612
- }], isTimeOnly: [{
613
- type: Input
614
- }], minDate: [{
615
- type: Input
616
- }], maxDate: [{
617
- type: Input
618
- }], hourFormat: [{
619
- type: Input
620
- }], selectionMode: [{
621
- type: Input
622
- }], onAfterClearDate: [{
623
- type: Output
624
- }], variant: [{
625
- type: Input
626
- }], withoutTime: [{
627
- type: Input
628
- }] } });
629
-
630
- class InputComponent extends BaseInputComponent {
631
- type = 'text';
632
- contentType = 'text';
633
- size = "small";
634
- prefix;
635
- rows = 2;
636
- cols = 20;
637
- autoResize = false;
638
- basicInput;
639
- noStyle;
640
- canClear;
641
- hideOptionalLabel;
642
- inputDirection = 'inherit';
643
- variant = 'over';
644
- defaultColor = '#DFE0E6';
645
- iconClass;
646
- iconPosition = 'left';
647
- constructor() {
648
- super();
649
- }
650
- clearInput() {
651
- this.control.reset();
652
- }
653
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
654
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", canClear: "canClear", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor", iconClass: "iconClass", iconPosition: "iconPosition" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\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 <div class=\"flex items-center justify-between gap-2\">\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n <!-- @else if (!hideOptionalLabel) {\r\n <span span class=\"optional-label\">{{'forms.config.optional' | translate}}</span>\r\n } -->\r\n </label>\r\n <ng-content></ng-content>\r\n </div>\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 @case ('withIcon') {\r\n <p-iconfield class=\"filter-input\">\r\n <p-inputicon>\r\n <i [class]=\"iconClass\"></i>\r\n </p-inputicon>\r\n <input pInputText [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\"\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 [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n @if (canClear && control.value) {\r\n <p-inputIcon (click)=\"clearInput()\">\r\n <i class=\"pi pi-times cursor-pointer text-sm text-gray-400 hover:text-gray-600\"></i>\r\n </p-inputIcon>\r\n }\r\n\r\n </p-iconfield>\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}.optional-label{@apply text-[10px] text-gray-400;margin-inline-start:4px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
655
- }
656
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, decorators: [{
657
- type: Component,
658
- args: [{ selector: 'stc-input', standalone: true, imports: [
659
- ReactiveFormsModule,
660
- InputText,
661
- Textarea,
662
- ValidationErrorsPipe,
663
- NgClass,
664
- NgStyle,
665
- TranslatePipe,
666
- FloatLabelModule,
667
- InputIcon,
668
- IconField,
669
- ], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\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 <div class=\"flex items-center justify-between gap-2\">\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n <!-- @else if (!hideOptionalLabel) {\r\n <span span class=\"optional-label\">{{'forms.config.optional' | translate}}</span>\r\n } -->\r\n </label>\r\n <ng-content></ng-content>\r\n </div>\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 @case ('withIcon') {\r\n <p-iconfield class=\"filter-input\">\r\n <p-inputicon>\r\n <i [class]=\"iconClass\"></i>\r\n </p-inputicon>\r\n <input pInputText [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\"\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 [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n @if (canClear && control.value) {\r\n <p-inputIcon (click)=\"clearInput()\">\r\n <i class=\"pi pi-times cursor-pointer text-sm text-gray-400 hover:text-gray-600\"></i>\r\n </p-inputIcon>\r\n }\r\n\r\n </p-iconfield>\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}.optional-label{@apply text-[10px] text-gray-400;margin-inline-start:4px}\n"] }]
670
- }], ctorParameters: () => [], propDecorators: { type: [{
671
- type: Input
672
- }], contentType: [{
673
- type: Input
674
- }], size: [{
675
- type: Input
676
- }], prefix: [{
677
- type: Input
678
- }], rows: [{
679
- type: Input
680
- }], cols: [{
681
- type: Input
682
- }], autoResize: [{
683
- type: Input
684
- }], basicInput: [{
685
- type: Input
686
- }], noStyle: [{
687
- type: Input
688
- }], canClear: [{
689
- type: Input
690
- }], hideOptionalLabel: [{
691
- type: Input
692
- }], inputDirection: [{
693
- type: Input
694
- }], variant: [{
695
- type: Input
696
- }], defaultColor: [{
697
- type: Input
698
- }], iconClass: [{
699
- type: Input
700
- }], iconPosition: [{
701
- type: Input
702
- }] } });
703
-
704
- class SelectButtonComponent extends BaseInputComponent {
705
- onChange = new EventEmitter();
706
- options;
707
- title;
708
- changeValue(e) {
709
- this.onChange.emit(e.value);
710
- }
711
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
712
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SelectButtonComponent, isStandalone: true, selector: "stc-select-button", inputs: { options: "options", title: "title" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-0 items-end\">\r\n <div class=\"col-span-12\">\r\n <div class=\"text-[14px] font-bold mb-1\">{{ title }}</div>\r\n <div class=\"grid w-100 bg-gray-100 rounded drop-shadow-basic\">\r\n <p-selectButton [disabled]=\"disabled\"\r\n [options]=\"options\"\r\n [formControl]=\"control\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n class=\"rounded\"\r\n [styleClass]=\"'full-width'\"\r\n (onChange)=\"changeValue($event)\">\r\n <ng-template let-item class=\"flex w-100\">\r\n <div class=\"col-span-4\">\r\n <span>{{ item.value }}</span>\r\n </div>\r\n </ng-template>\r\n </p-selectButton>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }] });
713
- }
714
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectButtonComponent, decorators: [{
715
- type: Component,
716
- 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" }]
717
- }], propDecorators: { onChange: [{
718
- type: Output
719
- }], options: [{
720
- type: Input
721
- }], title: [{
722
- type: Input
723
- }] } });
724
-
725
- class SelectComponent extends BaseInputComponent {
726
- selectedItemTemplate = null;
727
- optionTemplate = null;
728
- options = [];
729
- optionLabel;
730
- optionValue;
731
- emptyMessage;
732
- checkmark = true;
733
- showClear = false;
734
- editable = false;
735
- filter = false;
736
- multiple = false;
737
- filterBy;
738
- selectAllLabel;
739
- dataKey;
740
- size = 'small';
741
- selectedItemsLabel;
742
- basicInput;
743
- variant = 'over';
744
- // eslint-disable-next-line @angular-eslint/no-output-native
745
- change = new EventEmitter();
746
- defaultColor = '#DFE0E6';
747
- allSelectd = false;
748
- constructor() {
749
- super();
750
- }
751
- toggleAll(event) {
752
- if (!event.checked) {
753
- this.control.setValue([]);
754
- return;
755
- }
756
- const values = this.optionValue
757
- ? this.options.map((o) => o[this.optionValue])
758
- : this.options;
759
- this.control.setValue([...values]);
760
- }
761
- onMultiSelectClear() {
762
- this.allSelectd = false;
763
- }
764
- onChange(e) {
765
- this.change.emit(e);
766
- }
767
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
768
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectComponent, isStandalone: true, selector: "stc-select", inputs: { selectedItemTemplate: "selectedItemTemplate", optionTemplate: "optionTemplate", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", emptyMessage: "emptyMessage", checkmark: "checkmark", showClear: "showClear", editable: "editable", filter: "filter", multiple: "multiple", filterBy: "filterBy", selectAllLabel: "selectAllLabel", dataKey: "dataKey", 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 [optionValue]=\"optionValue\"\r\n [options]=\"options\"\r\n [showToggleAll]=\"false\"\r\n [placeholder]=\"placeholder\"\r\n [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n (onClear)=\"onMultiSelectClear()\"\r\n class=\"w-full\"\r\n [size]=\"size\"\r\n [selectedItemsLabel]=\"selectedItemsLabel || ('shared.Items_Selected'| translate: {count: '{0}'})\"\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 (selectAllLabel) {\r\n <ng-template #filter>\r\n <p-checkbox\r\n binary=\"true\"\r\n [(ngModel)]=\"allSelectd\"\r\n (onChange)=\"toggleAll($event)\"\r\n inputId=\"toggleAll\">\r\n </p-checkbox>\r\n <span>{{selectAllLabel}}</span>\r\n </ng-template>\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\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 [dataKey]=\"dataKey\"\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 [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\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}.edit-search .p-select-label{padding:1rem 1rem 1rem 2.2rem!important}.edit-search .p-floatlabel>label{padding-inline-start:25px}\n"], dependencies: [{ 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"] }, { 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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
769
- }
770
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectComponent, decorators: [{
771
- type: Component,
772
- args: [{ selector: 'stc-select', standalone: true, imports: [
773
- FormsModule,
774
- Select,
775
- ReactiveFormsModule,
776
- NgClass,
777
- NgTemplateOutlet,
778
- PrimeTemplate,
779
- ValidationErrorsPipe,
780
- MultiSelectModule,
781
- FloatLabelModule,
782
- TranslatePipe,
783
- CheckboxModule,
784
- ], 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 [optionValue]=\"optionValue\"\r\n [options]=\"options\"\r\n [showToggleAll]=\"false\"\r\n [placeholder]=\"placeholder\"\r\n [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n (onClear)=\"onMultiSelectClear()\"\r\n class=\"w-full\"\r\n [size]=\"size\"\r\n [selectedItemsLabel]=\"selectedItemsLabel || ('shared.Items_Selected'| translate: {count: '{0}'})\"\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 (selectAllLabel) {\r\n <ng-template #filter>\r\n <p-checkbox\r\n binary=\"true\"\r\n [(ngModel)]=\"allSelectd\"\r\n (onChange)=\"toggleAll($event)\"\r\n inputId=\"toggleAll\">\r\n </p-checkbox>\r\n <span>{{selectAllLabel}}</span>\r\n </ng-template>\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\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 [dataKey]=\"dataKey\"\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 [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n [optionLabel]=\"optionLabel\"\r\n [optionValue]=\"optionValue\"\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}.edit-search .p-select-label{padding:1rem 1rem 1rem 2.2rem!important}.edit-search .p-floatlabel>label{padding-inline-start:25px}\n"] }]
785
- }], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
786
- type: Input
787
- }], optionTemplate: [{
788
- type: Input
789
- }], options: [{
790
- type: Input
791
- }], optionLabel: [{
792
- type: Input
793
- }], optionValue: [{
794
- type: Input
795
- }], emptyMessage: [{
796
- type: Input
797
- }], checkmark: [{
798
- type: Input
799
- }], showClear: [{
800
- type: Input
801
- }], editable: [{
802
- type: Input
803
- }], filter: [{
804
- type: Input
805
- }], multiple: [{
806
- type: Input
807
- }], filterBy: [{
808
- type: Input
809
- }], selectAllLabel: [{
810
- type: Input
811
- }], dataKey: [{
812
- type: Input
813
- }], size: [{
814
- type: Input
815
- }], selectedItemsLabel: [{
816
- type: Input
817
- }], basicInput: [{
818
- type: Input
819
- }], variant: [{
820
- type: Input
821
- }], change: [{
822
- type: Output
823
- }], defaultColor: [{
824
- type: Input
825
- }] } });
826
-
827
- class SwitchComponent {
828
- label;
829
- key;
830
- checked = false;
831
- onChange = new EventEmitter();
832
- // checked: boolean = false;
833
- sendUpdatedValue(value) {
834
- if (value) {
835
- this.onChange.emit(value.checked);
836
- }
837
- }
838
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
839
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SwitchComponent, isStandalone: true, selector: "stc-switch", inputs: { label: "label", key: "key", checked: "checked" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"flex items-center mr-2\">\r\n <p-toggleswitch [(ngModel)]=\"checked\" [inputId]=\"key\" (onChange)=\"sendUpdatedValue($event)\" class=\"flex\">\r\n </p-toggleswitch>\r\n <label [for]=\"key\" class=\"text-[12px] mx-2\">{{label}}</label>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i1$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
840
- }
841
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SwitchComponent, decorators: [{
842
- type: Component,
843
- 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>" }]
844
- }], propDecorators: { label: [{
845
- type: Input
846
- }], key: [{
847
- type: Input
848
- }], checked: [{
849
- type: Input
850
- }], onChange: [{
851
- type: Output
852
- }] } });
853
-
854
- var FormFieldTypeEnum;
855
- (function (FormFieldTypeEnum) {
856
- FormFieldTypeEnum["DATE_PICKER"] = "date-picker";
857
- FormFieldTypeEnum["SELECT_BUTTON"] = "select-button";
858
- FormFieldTypeEnum["INPUT"] = "input";
859
- FormFieldTypeEnum["SELECT"] = "select";
860
- FormFieldTypeEnum["SWITCH"] = "switch";
861
- FormFieldTypeEnum["AUTO_COMPLETE"] = "auto-complete";
862
- FormFieldTypeEnum["HIJRI_DATE_PICKER"] = "hijri-date";
863
- })(FormFieldTypeEnum || (FormFieldTypeEnum = {}));
864
-
865
- const WEEKDAYS = {
866
- ar: ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'],
867
- en: ['M', 'T', 'W', 'T', 'F', 'S', 'S']
868
- };
869
- const MONTHS_GREGORIAN = {
870
- ar: [
871
- 'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
872
- 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
873
- ],
874
- en: [
875
- 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
876
- 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
877
- ]
878
- };
879
- const MONTHS_HIJRI = {
880
- ar: [
881
- 'محرم',
882
- 'صفر',
883
- 'ربيع الأول',
884
- 'ربيع الآخر',
885
- 'جمادى الأولى',
886
- 'جمادى الآخرة',
887
- 'رجب',
888
- 'شعبان',
889
- 'رمضان',
890
- 'شوال',
891
- 'ذو القعدة',
892
- 'ذو الحجة'
893
- ],
894
- en: [
895
- 'Muharram',
896
- 'Safar',
897
- 'Rabi Al-Awwal',
898
- 'Rabi Al-Thani',
899
- 'Jumada Al-Awwal',
900
- 'Jumada Al-Thani',
901
- 'Rajab',
902
- 'Shaaban',
903
- 'Ramadan',
904
- 'Shawwal',
905
- 'Dhul-Qi’dah',
906
- 'Dhul-Hijjah'
907
- ]
908
- };
909
- function getGregorianMonthName(lang, month) {
910
- return MONTHS_GREGORIAN[lang][month - 1] || '';
911
- }
912
- function getHijriMonthName(lang, month) {
913
- return MONTHS_HIJRI[lang][month - 1] || '';
914
- }
915
- function getWeekdayName(lang, weekday) {
916
- return WEEKDAYS[lang][weekday - 1];
917
- }
918
-
919
- class IslamicI18n extends NgbDatepickerI18n {
920
- getMonthShortName(month) {
921
- return MONTHS_HIJRI.ar[month - 1];
922
- }
923
- getMonthFullName(month) {
924
- return MONTHS_HIJRI.ar[month - 1];
925
- }
926
- getWeekdayLabel(weekday) {
927
- return WEEKDAYS.ar[weekday - 1];
928
- }
929
- getWeekdayShortName(weekday) {
930
- return WEEKDAYS.ar[weekday - 1];
931
- }
932
- getDayAriaLabel(date) {
933
- return `${date.day}-${date.month}-${date.year}`;
934
- }
935
- getYearNumerals(year) {
936
- return String(year);
937
- }
938
- getWeekNumerals(weekNumber) {
939
- return String(weekNumber);
940
- }
941
- getDayNumerals(date) {
942
- return String(date.day);
943
- }
944
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
945
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n });
946
- }
947
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n, decorators: [{
948
- type: Injectable
949
- }] });
950
- class HijriEnglishI18n extends NgbDatepickerI18n {
951
- getMonthShortName(month) {
952
- return MONTHS_HIJRI.en[month - 1].substring(0, 3);
953
- }
954
- getMonthFullName(month) {
955
- return MONTHS_HIJRI.en[month - 1];
956
- }
957
- getWeekdayLabel(weekday) {
958
- return WEEKDAYS.en[weekday - 1];
959
- }
960
- getWeekdayShortName(weekday) {
961
- return WEEKDAYS.en[weekday - 1];
962
- }
963
- getDayAriaLabel(date) {
964
- return `${date.day}-${date.month}-${date.year}`;
965
- }
966
- getYearNumerals(year) {
967
- return String(year);
968
- }
969
- getWeekNumerals(weekNumber) {
970
- return String(weekNumber);
971
- }
972
- getDayNumerals(date) {
973
- return String(date.day);
974
- }
975
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
976
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n });
977
- }
978
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n, decorators: [{
979
- type: Injectable
980
- }] });
981
- class DynamicHijriI18n extends NgbDatepickerI18n {
982
- currentLang = 'ar';
983
- arabicI18n = new IslamicI18n();
984
- englishI18n = new HijriEnglishI18n();
985
- setLanguage(lang) {
986
- this.currentLang = lang;
987
- }
988
- get activeI18n() {
989
- return this.currentLang === 'ar' ? this.arabicI18n : this.englishI18n;
990
- }
991
- getMonthShortName(month) {
992
- return this.activeI18n.getMonthShortName(month);
993
- }
994
- getMonthFullName(month) {
995
- return this.activeI18n.getMonthFullName(month);
996
- }
997
- getWeekdayLabel(weekday) {
998
- return this.activeI18n.getWeekdayLabel(weekday);
999
- }
1000
- getWeekdayShortName(weekday) {
1001
- return this.activeI18n.getWeekdayShortName(weekday);
1002
- }
1003
- getDayAriaLabel(date) {
1004
- return this.activeI18n.getDayAriaLabel(date);
1005
- }
1006
- getYearNumerals(year) {
1007
- return this.activeI18n.getYearNumerals(year);
1008
- }
1009
- getWeekNumerals(weekNumber) {
1010
- return this.activeI18n.getWeekNumerals(weekNumber);
1011
- }
1012
- getDayNumerals(date) {
1013
- return this.activeI18n.getDayNumerals(date);
1014
- }
1015
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
1016
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n });
1017
- }
1018
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n, decorators: [{
1019
- type: Injectable
1020
- }] });
1021
-
1022
- class HijriCalendarComponent {
1023
- i18n;
1024
- cdr;
1025
- model;
1026
- dateSelected = new EventEmitter();
1027
- language = 'en';
1028
- renderer = inject(Renderer2);
1029
- startDate;
1030
- calendar = new NgbCalendarIslamicUmalqura();
1031
- constructor(i18n, cdr) {
1032
- this.i18n = i18n;
1033
- this.cdr = cdr;
1034
- }
1035
- ngOnChanges(changes) {
1036
- if (changes['model'] && changes['model'].currentValue) {
1037
- this.startDate = { ...changes['model'].currentValue };
1038
- console.log('Hijri navigating to:', this.startDate);
1039
- }
1040
- if (changes['language'] && this.i18n instanceof DynamicHijriI18n) {
1041
- this.i18n.setLanguage(this.language);
1042
- this.cdr.detectChanges(); // Force re-render to update labels
1043
- }
1044
- }
1045
- ngAfterViewInit() {
1046
- const buttons = document.querySelectorAll('.ngb-dp-arrow-btn');
1047
- buttons.forEach(btn => {
1048
- this.renderer.removeAttribute(btn, 'title');
1049
- });
1050
- }
1051
- onDateChange(date) {
1052
- this.model = date;
1053
- this.startDate = { ...date };
1054
- }
1055
- isToday(date) {
1056
- const today = this.calendar.getToday();
1057
- return date.year === today.year &&
1058
- date.month === today.month &&
1059
- date.day === today.day;
1060
- }
1061
- isDisabled = () => false;
1062
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriCalendarComponent, deps: [{ token: i1$6.NgbDatepickerI18n }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1063
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriCalendarComponent, isStandalone: true, selector: "app-hijri-calendar", inputs: { model: "model", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
1064
- { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
1065
- { provide: NgbDatepickerI18n, useClass: DynamicHijriI18n }
1066
- ], usesOnChanges: true, ngImport: i0, template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n {{ date.day }}\r\n </span>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1067
- }
1068
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriCalendarComponent, decorators: [{
1069
- type: Component,
1070
- args: [{ selector: "app-hijri-calendar", standalone: true, imports: [NgbDatepickerModule, FormsModule], providers: [
1071
- { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
1072
- { provide: NgbDatepickerI18n, useClass: DynamicHijriI18n }
1073
- ], template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n {{ date.day }}\r\n </span>\r\n</ng-template>\r\n" }]
1074
- }], ctorParameters: () => [{ type: i1$6.NgbDatepickerI18n }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
1075
- type: Input
1076
- }], dateSelected: [{
1077
- type: Output
1078
- }], language: [{
1079
- type: Input
1080
- }] } });
1081
-
1082
- class GregorianArabicI18n extends NgbDatepickerI18n {
1083
- getMonthShortName(month) {
1084
- return MONTHS_GREGORIAN.ar[month - 1];
1085
- }
1086
- getMonthFullName(month) {
1087
- return MONTHS_GREGORIAN.ar[month - 1];
1088
- }
1089
- getWeekdayLabel(weekday) {
1090
- return WEEKDAYS.ar[weekday - 1];
1091
- }
1092
- getWeekdayShortName(weekday) {
1093
- return WEEKDAYS.ar[weekday - 1];
1094
- }
1095
- getDayAriaLabel(date) {
1096
- return `${date.day}-${date.month}-${date.year}`;
1097
- }
1098
- getYearNumerals(year) {
1099
- return String(year);
1100
- }
1101
- getWeekNumerals(weekNumber) {
1102
- return String(weekNumber);
1103
- }
1104
- getDayNumerals(date) {
1105
- return String(date.day);
1106
- }
1107
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
1108
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n });
1109
- }
1110
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n, decorators: [{
1111
- type: Injectable
1112
- }] });
1113
- class GregorianEnglishI18n extends NgbDatepickerI18n {
1114
- getMonthShortName(month) {
1115
- return MONTHS_GREGORIAN.en[month - 1].substring(0, 3);
1116
- }
1117
- getMonthFullName(month) {
1118
- return MONTHS_GREGORIAN.en[month - 1];
1119
- }
1120
- getWeekdayLabel(weekday) {
1121
- return WEEKDAYS.en[weekday - 1];
1122
- }
1123
- getWeekdayShortName(weekday) {
1124
- return WEEKDAYS.en[weekday - 1];
1125
- }
1126
- getDayAriaLabel(date) {
1127
- return `${date.day}-${date.month}-${date.year}`;
1128
- }
1129
- getYearNumerals(year) {
1130
- return String(year);
1131
- }
1132
- getWeekNumerals(weekNumber) {
1133
- return String(weekNumber);
1134
- }
1135
- getDayNumerals(date) {
1136
- return String(date.day);
1137
- }
1138
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
1139
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n });
1140
- }
1141
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n, decorators: [{
1142
- type: Injectable
1143
- }] });
1144
- // ============ Dynamic I18N Factory ============
1145
- class DynamicGregorianI18n extends NgbDatepickerI18n {
1146
- currentLang = 'en';
1147
- arabicI18n = new GregorianArabicI18n();
1148
- englishI18n = new GregorianEnglishI18n();
1149
- setLanguage(lang) {
1150
- this.currentLang = lang;
1151
- }
1152
- get activeI18n() {
1153
- return this.currentLang === 'ar' ? this.arabicI18n : this.englishI18n;
1154
- }
1155
- getMonthShortName(month) {
1156
- return this.activeI18n.getMonthShortName(month);
1157
- }
1158
- getMonthFullName(month) {
1159
- return this.activeI18n.getMonthFullName(month);
1160
- }
1161
- getWeekdayLabel(weekday) {
1162
- return this.activeI18n.getWeekdayLabel(weekday);
1163
- }
1164
- getWeekdayShortName(weekday) {
1165
- return this.activeI18n.getWeekdayShortName(weekday);
1166
- }
1167
- getDayAriaLabel(date) {
1168
- return this.activeI18n.getDayAriaLabel(date);
1169
- }
1170
- getYearNumerals(year) {
1171
- return this.activeI18n.getYearNumerals(year);
1172
- }
1173
- getWeekNumerals(weekNumber) {
1174
- return this.activeI18n.getWeekNumerals(weekNumber);
1175
- }
1176
- getDayNumerals(date) {
1177
- return this.activeI18n.getDayNumerals(date);
1178
- }
1179
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
1180
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n });
1181
- }
1182
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n, decorators: [{
1183
- type: Injectable
1184
- }] });
1185
-
1186
- class GregorianCalendarComponent {
1187
- model;
1188
- dateSelected = new EventEmitter();
1189
- renderer = inject(Renderer2);
1190
- language = 'en';
1191
- startDate;
1192
- calendar = new NgbCalendarGregorian();
1193
- i18n = inject(NgbDatepickerI18n);
1194
- cdr = inject(ChangeDetectorRef);
1195
- calendarKey = 0;
1196
- ngOnChanges(changes) {
1197
- if (changes['model'] && changes['model'].currentValue) {
1198
- this.startDate = { ...changes['model'].currentValue };
1199
- }
1200
- if (changes['language'] && this.i18n instanceof DynamicGregorianI18n) {
1201
- this.i18n.setLanguage(this.language);
1202
- this.calendarKey++; // Increment to force recreation
1203
- }
1204
- }
1205
- ngAfterViewInit() {
1206
- const buttons = document.querySelectorAll('.ngb-dp-arrow-btn');
1207
- buttons.forEach(btn => {
1208
- this.renderer.removeAttribute(btn, 'title');
1209
- });
1210
- }
1211
- onDateChange(date) {
1212
- this.model = date;
1213
- this.startDate = { ...date };
1214
- }
1215
- isToday(date) {
1216
- const today = this.calendar.getToday();
1217
- return date.year === today.year &&
1218
- date.month === today.month &&
1219
- date.day === today.day;
1220
- }
1221
- isDisabled = () => false;
1222
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1223
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GregorianCalendarComponent, isStandalone: true, selector: "app-gregorian-calendar", inputs: { model: "model", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
1224
- { provide: NgbCalendar, useClass: NgbCalendarGregorian },
1225
- { provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
1226
- ], usesOnChanges: true, ngImport: i0, template: "@for(item of [calendarKey]; track item) {\r\n <ngb-datepicker #dp\r\n [class.rtl]=\"language === 'ar'\"\r\n [class.ltr]=\"language === 'en'\"\r\n [ngModel]=\"model\"\r\n [startDate]=\"startDate\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (dateSelect)=\"dateSelected.emit($event)\"\r\n [dayTemplate]=\"dayTemplate\"\r\n [markDisabled]=\"isDisabled\">\r\n </ngb-datepicker>\r\n <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n <span class=\"custom-day\"\r\n [class.today]=\"isToday(date)\"\r\n [class.selected]=\"selected\"\r\n [class.outside]=\"date.month !== currentMonth\"\r\n [class.disabled]=\"disabled\">\r\n {{ date.day }}\r\n </span>\r\n </ng-template>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
1227
- }
1228
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, decorators: [{
1229
- type: Component,
1230
- args: [{ selector: "app-gregorian-calendar", standalone: true, imports: [NgbDatepickerModule, FormsModule], providers: [
1231
- { provide: NgbCalendar, useClass: NgbCalendarGregorian },
1232
- { provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
1233
- ], encapsulation: ViewEncapsulation.None, template: "@for(item of [calendarKey]; track item) {\r\n <ngb-datepicker #dp\r\n [class.rtl]=\"language === 'ar'\"\r\n [class.ltr]=\"language === 'en'\"\r\n [ngModel]=\"model\"\r\n [startDate]=\"startDate\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (dateSelect)=\"dateSelected.emit($event)\"\r\n [dayTemplate]=\"dayTemplate\"\r\n [markDisabled]=\"isDisabled\">\r\n </ngb-datepicker>\r\n <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n <span class=\"custom-day\"\r\n [class.today]=\"isToday(date)\"\r\n [class.selected]=\"selected\"\r\n [class.outside]=\"date.month !== currentMonth\"\r\n [class.disabled]=\"disabled\">\r\n {{ date.day }}\r\n </span>\r\n </ng-template>\r\n}\r\n" }]
1234
- }], propDecorators: { model: [{
1235
- type: Input
1236
- }], dateSelected: [{
1237
- type: Output
1238
- }], language: [{
1239
- type: Input
1240
- }] } });
1241
-
1242
- class DatePickerSwitcherComponent extends BaseInputComponent {
1243
- type = 'text';
1244
- contentType = 'text';
1245
- size = "small";
1246
- prefix;
1247
- rows = 2;
1248
- cols = 20;
1249
- autoResize = true;
1250
- basicInput;
1251
- noStyle;
1252
- hideOptionalLabel;
1253
- inputDirection = 'inherit';
1254
- variant = 'over';
1255
- defaultColor = '#DFE0E6';
1256
- formattedDate = '';
1257
- openCalender = new EventEmitter();
1258
- constructor() {
1259
- super();
1260
- }
1261
- ngOnChanges(changes) {
1262
- if (changes['formattedDate'] && changes['formattedDate'].currentValue) {
1263
- // Update the FormControl value if parent changes the formattedDate
1264
- this.control.setValue(changes['formattedDate'].currentValue, { emitEvent: false });
1265
- }
1266
- }
1267
- ngOnInit() {
1268
- this.control.setValue(this.formattedDate);
1269
- }
1270
- clearButtonClick(e) {
1271
- this.control.setValue(null);
1272
- }
1273
- openCalendar(isOpen) {
1274
- this.openCalender.emit(isOpen);
1275
- }
1276
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1277
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerSwitcherComponent, isStandalone: true, selector: "stc-date-picker-switcher", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor", formattedDate: "formattedDate" }, outputs: { openCalender: "openCalender" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"true\" (focus)=\"openCalendar(true)\"\r\n (click)=\"openCalendar(true)\" [pSize]=\"'small'\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \" [disabled]=\"disabled\" [name]=\"name\" pInputText\r\n class=\"w-full\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.my-custom-datepicker-panel{display:none!important}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
1278
- }
1279
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerSwitcherComponent, decorators: [{
1280
- type: Component,
1281
- args: [{ selector: 'stc-date-picker-switcher', standalone: true, imports: [
1282
- FormsModule,
1283
- ReactiveFormsModule,
1284
- NgClass,
1285
- InputText,
1286
- DatePickerModule,
1287
- ValidationErrorsPipe,
1288
- TranslatePipe,
1289
- FloatLabelModule,
1290
- ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"true\" (focus)=\"openCalendar(true)\"\r\n (click)=\"openCalendar(true)\" [pSize]=\"'small'\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \" [disabled]=\"disabled\" [name]=\"name\" pInputText\r\n class=\"w-full\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.my-custom-datepicker-panel{display:none!important}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
1291
- }], ctorParameters: () => [], propDecorators: { type: [{
1292
- type: Input
1293
- }], contentType: [{
1294
- type: Input
1295
- }], size: [{
1296
- type: Input
1297
- }], prefix: [{
1298
- type: Input
1299
- }], rows: [{
1300
- type: Input
1301
- }], cols: [{
1302
- type: Input
1303
- }], autoResize: [{
1304
- type: Input
1305
- }], basicInput: [{
1306
- type: Input
1307
- }], noStyle: [{
1308
- type: Input
1309
- }], hideOptionalLabel: [{
1310
- type: Input
1311
- }], inputDirection: [{
1312
- type: Input
1313
- }], variant: [{
1314
- type: Input
1315
- }], defaultColor: [{
1316
- type: Input
1317
- }], formattedDate: [{
1318
- type: Input
1319
- }], openCalender: [{
1320
- type: Output
1321
- }] } });
1322
-
1323
- var DateFormats;
1324
- (function (DateFormats) {
1325
- DateFormats["DATE_ONLY"] = "yyyy-MM-dd";
1326
- DateFormats["DATE_UTC"] = "yyyy-MM-dd'T'HH:mm:ss'Z'";
1327
- DateFormats["DATE_TIME_FULL"] = "dd MMMM yyyy - hh:mm a";
1328
- DateFormats["DATE_TIME_SEMI"] = "yyyy/MM/dd - hh:mm a";
1329
- DateFormats["DATE"] = "dd MMMM yyyy";
1330
- DateFormats["DATE_TWO"] = "yyyy/MM/dd";
1331
- DateFormats["DAY_ONLY"] = "cccc";
1332
- DateFormats["TIME_ONLY"] = "hh:mm";
1333
- DateFormats["AM_PM"] = "a";
1334
- DateFormats["TIME"] = "hh:mm a";
1335
- DateFormats["YEAR"] = "yyyy";
1336
- DateFormats["MONTH"] = "MM";
1337
- DateFormats["DAY"] = "dd";
1338
- })(DateFormats || (DateFormats = {}));
1339
- var TimeFormats;
1340
- (function (TimeFormats) {
1341
- TimeFormats["HOURS12Format"] = "hh";
1342
- TimeFormats["HOURS24Format"] = "HH";
1343
- TimeFormats["MINUTES"] = "mm";
1344
- TimeFormats["SECONDS"] = "ss";
1345
- })(TimeFormats || (TimeFormats = {}));
1346
-
1347
- class DualCalendarComponent {
1348
- selectedDate = '';
1349
- control = new FormControl({ value: null, disabled: false }, []);
1350
- label = '';
1351
- name = '';
1352
- withTime = true;
1353
- mode = 'gregorian';
1354
- gregorianModel;
1355
- hijriModel;
1356
- currentLang = signal('ar', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
1357
- gregorianUTC = new EventEmitter();
1358
- gregorianUTCValue = '';
1359
- isCalendarOpen = false;
1360
- calendarContainer;
1361
- hijriCal = new NgbCalendarIslamicUmalqura();
1362
- constructor() {
1363
- effect(() => {
1364
- this.currentLang(); // 👈 track signal
1365
- this.setDate(this.gregorianUTCValue);
1366
- });
1367
- }
1368
- ngOnInit() {
1369
- this.setDate(this.control?.value);
1370
- }
1371
- setDate(value) {
1372
- if (!value)
1373
- return;
1374
- const jsDate = new Date(value);
1375
- if (isNaN(jsDate.getTime()))
1376
- return;
1377
- const ngbDate = {
1378
- year: jsDate.getFullYear(),
1379
- month: jsDate.getMonth() + 1,
1380
- day: jsDate.getDate()
1381
- };
1382
- // 🔥 Reuse existing logic
1383
- this.onSelectGregorian(ngbDate);
1384
- }
1385
- onDocumentClick(event) {
1386
- if (!this.calendarContainer)
1387
- return;
1388
- const clickedInside = this.calendarContainer.nativeElement.contains(event.target);
1389
- if (!clickedInside) {
1390
- this.isCalendarOpen = false;
1391
- }
1392
- }
1393
- structToNgbDate(d) {
1394
- return new NgbDate(d.year, d.month, d.day);
1395
- }
1396
- onSelectGregorian(date) {
1397
- this.gregorianModel = date;
1398
- // Convert to NgbDate
1399
- const jsDate = new Date(date.year, date.month - 1, date.day);
1400
- // fromGregorian expects NgbDate or JS Date (depending on version)
1401
- const hijri = this.hijriCal.fromGregorian(jsDate);
1402
- const isoUTC = jsDate.toISOString();
1403
- this.gregorianUTCValue = this.withTime ? isoUTC : formatDate(jsDate, DateFormats.DATE_ONLY, 'en');
1404
- this.gregorianUTC.emit(this.gregorianUTCValue);
1405
- this.hijriModel = {
1406
- year: hijri.year,
1407
- month: hijri.month,
1408
- day: hijri.day
1409
- }; // datepicker
1410
- this.selectedDate = this.formatHijri(this.structToNgbDate(this.hijriModel)); //input
1411
- this.isCalendarOpen = false;
1412
- }
1413
- onSelectHijri(date) {
1414
- this.hijriModel = date;
1415
- const ngbDate = this.structToNgbDate(date);
1416
- const greg = this.hijriCal.toGregorian(ngbDate);
1417
- const isoUTC = greg.toISOString();
1418
- this.gregorianModel = {
1419
- year: greg.getFullYear(),
1420
- month: greg.getMonth() + 1,
1421
- day: greg.getDate()
1422
- };
1423
- const jsDate = new Date(this.gregorianModel.year, this.gregorianModel.month - 1, this.gregorianModel.day);
1424
- this.gregorianUTCValue = this.withTime ? isoUTC : formatDate(jsDate, DateFormats.DATE_ONLY, 'en');
1425
- this.gregorianUTC.emit(this.gregorianUTCValue);
1426
- this.selectedDate = this.formatHijri(ngbDate);
1427
- this.isCalendarOpen = false;
1428
- }
1429
- showCalender(isOpen) {
1430
- this.isCalendarOpen = isOpen;
1431
- }
1432
- formatHijri(h) {
1433
- const hijriDay = h.day;
1434
- const hijriMonth = getHijriMonthName(this.currentLang(), h.month);
1435
- const hijriYear = h.year;
1436
- const greg = this.hijriCal.toGregorian(h);
1437
- const gregorianDay = greg.getDate();
1438
- const gregorianMonth = getGregorianMonthName(this.currentLang(), greg.getMonth() + 1);
1439
- const gregorianYear = greg.getFullYear();
1440
- return `${gregorianDay} ${gregorianMonth} ${gregorianYear} - ${hijriDay} ${hijriMonth} ${hijriYear}`;
1441
- }
1442
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1443
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DualCalendarComponent, isStandalone: true, selector: "app-dual-calendar", inputs: { control: "control", label: "label", name: "name", withTime: "withTime", currentLang: "currentLang" }, outputs: { gregorianUTC: "gregorianUTC" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
1444
- { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
1445
- ], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], ngImport: i0, template: "<div class=\"calender-content \" #calendarContainer>\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n\r\n <!-- calender.html -->\r\n <div [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\" >\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" type=\"button\" (click)=\" mode='gregorian'\">\r\n {{'calender.gregorian' | translate}}\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n {{'calender.hijri' | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.calendar-wrapper{position:absolute;top:100%;left:0;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: HijriCalendarComponent, selector: "app-hijri-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "component", type: DatePickerSwitcherComponent, selector: "stc-date-picker-switcher", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "formattedDate"], outputs: ["openCalender"] }, { kind: "component", type: GregorianCalendarComponent, selector: "app-gregorian-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
1446
- trigger('slideDown', [
1447
- state('closed', style({
1448
- height: '0px',
1449
- opacity: 0,
1450
- overflow: 'hidden'
1451
- })),
1452
- state('open', style({
1453
- height: '*',
1454
- opacity: 1,
1455
- overflow: 'hidden'
1456
- })),
1457
- transition('closed <=> open', [
1458
- animate('300ms ease')
1459
- ])
1460
- ])
1461
- ], encapsulation: i0.ViewEncapsulation.None });
1462
- }
1463
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, decorators: [{
1464
- type: Component,
1465
- args: [{ selector: 'app-dual-calendar', animations: [
1466
- trigger('slideDown', [
1467
- state('closed', style({
1468
- height: '0px',
1469
- opacity: 0,
1470
- overflow: 'hidden'
1471
- })),
1472
- state('open', style({
1473
- height: '*',
1474
- opacity: 1,
1475
- overflow: 'hidden'
1476
- })),
1477
- transition('closed <=> open', [
1478
- animate('300ms ease')
1479
- ])
1480
- ])
1481
- ], imports: [
1482
- NgbDatepickerModule,
1483
- FormsModule,
1484
- FormsModule,
1485
- ReactiveFormsModule,
1486
- DatePickerModule,
1487
- FloatLabelModule,
1488
- HijriCalendarComponent,
1489
- DatePickerSwitcherComponent,
1490
- TranslatePipe,
1491
- GregorianCalendarComponent
1492
- ], providers: [
1493
- { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
1494
- ], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content \" #calendarContainer>\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n\r\n <!-- calender.html -->\r\n <div [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\" >\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" type=\"button\" (click)=\" mode='gregorian'\">\r\n {{'calender.gregorian' | translate}}\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n {{'calender.hijri' | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.calendar-wrapper{position:absolute;top:100%;left:0;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"] }]
1495
- }], ctorParameters: () => [], propDecorators: { control: [{
1496
- type: Input
1497
- }], label: [{
1498
- type: Input
1499
- }], name: [{
1500
- type: Input
1501
- }], withTime: [{
1502
- type: Input
1503
- }], currentLang: [{
1504
- type: Input
1505
- }], gregorianUTC: [{
1506
- type: Output
1507
- }], calendarContainer: [{
1508
- type: ViewChild,
1509
- args: ['calendarContainer']
1510
- }], onDocumentClick: [{
1511
- type: HostListener,
1512
- args: ['document:click', ['$event']]
1513
- }] } });
1514
-
1515
- class DynamicFormComponent {
1516
- dynamicFormData;
1517
- // Generic field change outputs (optional for consumers)
1518
- selectButtonChange = new EventEmitter();
1519
- selectChange = new EventEmitter();
1520
- switchChange = new EventEmitter();
1521
- autoCompleteSearch = new EventEmitter();
1522
- autoCompleteSelect = new EventEmitter();
1523
- inputsNames = [];
1524
- formGroup;
1525
- inputsMap;
1526
- fieldType = FormFieldTypeEnum;
1527
- getFormControl = FormUtils.getFormControl;
1528
- ngOnInit() {
1529
- this.formGroup = this.dynamicFormData?.formGroup;
1530
- this.inputsMap = this.dynamicFormData?.inputsMap;
1531
- this.inputsNames = Object.keys(this.inputsMap || {});
1532
- }
1533
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1534
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, outputs: { selectButtonChange: "selectButtonChange", selectChange: "selectChange", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.HIJRI_DATE_PICKER) {\r\n <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\" ></app-dual-calendar>\r\n }\r\n\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n }\r\n @case (fieldType.INPUT) {\r\n <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\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 <span class=\"text-xs text-gray-700\">\r\n {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n </span>\r\n }\r\n </stc-input>\r\n }\r\n @case (fieldType.SELECT) {\r\n <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"/>\r\n }\r\n @case (fieldType.SWITCH) {\r\n <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n [checked]=\"getFormControl(inputName, formGroup).value\"\r\n (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n }\r\n @case (fieldType.AUTO_COMPLETE) {\r\n <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col-span-12\">\r\n <small class=\"p-error text-red-700\">\r\n @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n track error) {\r\n {{ error }}\r\n }\r\n </small>\r\n </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant", "withoutTime"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "component", type: DualCalendarComponent, selector: "app-dual-calendar", inputs: ["control", "label", "name", "withTime", "currentLang"], outputs: ["gregorianUTC"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "canClear", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "iconClass", "iconPosition"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "optionValue", "emptyMessage", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "selectAllLabel", "dataKey", "size", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
1535
- }
1536
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
1537
- type: Component,
1538
- args: [{ selector: 'app-dynamic-form', standalone: true, imports: [
1539
- CommonModule,
1540
- ReactiveFormsModule,
1541
- DatePickerComponent,
1542
- ValidationErrorsPipe,
1543
- TranslateModule,
1544
- SelectButtonComponent,
1545
- DualCalendarComponent,
1546
- InputComponent,
1547
- SelectComponent,
1548
- AutoCompleteComponent,
1549
- SwitchComponent,
1550
- ], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.HIJRI_DATE_PICKER) {\r\n <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\" ></app-dual-calendar>\r\n }\r\n\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n }\r\n @case (fieldType.INPUT) {\r\n <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\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 <span class=\"text-xs text-gray-700\">\r\n {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n </span>\r\n }\r\n </stc-input>\r\n }\r\n @case (fieldType.SELECT) {\r\n <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"/>\r\n }\r\n @case (fieldType.SWITCH) {\r\n <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n [checked]=\"getFormControl(inputName, formGroup).value\"\r\n (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n }\r\n @case (fieldType.AUTO_COMPLETE) {\r\n <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col-span-12\">\r\n <small class=\"p-error text-red-700\">\r\n @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n track error) {\r\n {{ error }}\r\n }\r\n </small>\r\n </div>\r\n</form>\r\n" }]
1551
- }], propDecorators: { dynamicFormData: [{
1552
- type: Input,
1553
- args: [{ required: true }]
1554
- }], selectButtonChange: [{
1555
- type: Output
1556
- }], selectChange: [{
1557
- type: Output
1558
- }], switchChange: [{
1559
- type: Output
1560
- }], autoCompleteSearch: [{
1561
- type: Output
1562
- }], autoCompleteSelect: [{
1563
- type: Output
1564
- }] } });
1565
-
1566
- class ConfirmationDialogComponent extends DynamicDialogRef {
1567
- router = inject(Router);
1568
- dialogService = inject(DialogService);
1569
- dynamicDialogConfig = inject(DynamicDialogConfig);
1570
- _ref = inject(DynamicDialogRef);
1571
- _subscription = new Subscription();
1572
- dialogFormData;
1573
- ngOnDestroy() {
1574
- this._subscription.unsubscribe();
1575
- }
1576
- ngOnInit() {
1577
- // closing when navigating back from the browser
1578
- this._subscription.add(this.router.events.pipe(filter((event) => event instanceof NavigationStart)).subscribe(() => {
1579
- if (this.dynamicDialogConfig) {
1580
- this._ref.close(false);
1581
- }
1582
- }));
1583
- this.dialogFormData = this.dynamicDialogConfig.data?.inputForm;
1584
- }
1585
- submit() {
1586
- // we should pass submitted data when using form dialog
1587
- // const submitData = { submitted: true, data: this.dialogFormData?.formGroup?.value };
1588
- // this._ref.close(this.dynamicDialogConfig.data.inputForm ? submitData : true);
1589
- this._ref.close(true);
1590
- }
1591
- close() {
1592
- this._ref.close(false);
1593
- }
1594
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1595
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirm-dialog", providers: [DialogService, DynamicDialogStyle], usesInheritance: true, ngImport: i0, template: "@if (dynamicDialogConfig.data) {\r\n<div class=\"confirmation-dialog\">\r\n <div class=\"dialog-wrapper\">\r\n @if (dynamicDialogConfig.data) {\r\n <div class=\"confirmation-dialog__content my-4\">\r\n @if (dynamicDialogConfig.data.dialogIcon) {\r\n <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n }\r\n <p class=\"confirmation-dialog__message text-xl mb-2\">\r\n {{ dynamicDialogConfig.data.message }}\r\n </p>\r\n @if (dynamicDialogConfig.data.hint) {\r\n <p class=\"confirmation-dialog__hint font-normal text-base\">\r\n {{ dynamicDialogConfig.data.hint }}\r\n </p>\r\n }\r\n @if (dynamicDialogConfig.data.inputForm) {\r\n <app-dynamic-form [dynamicFormData]=\"dialogFormData\"></app-dynamic-form>\r\n }\r\n </div>\r\n }\r\n <div class=\"confirmation-dialog__actions flex gap-2 mt-4\">\r\n <app-button [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\"\r\n [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\" [severity]=\"'primary'\"\r\n [id]=\"dynamicDialogConfig.data.confirmBtnId\" [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n [label]=\"dynamicDialogConfig.data.confirmBtnLabel\"\r\n [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\" [styleClass]=\"'confirmation-btn'\"\r\n (click)=\"submit()\" />\r\n <app-button [title]=\"dynamicDialogConfig.data?.closeLabel || ('actions.cancel' | translate)\"\r\n [severity]=\"'primary'\" variant=\"outlined\" [label]=\"dynamicDialogConfig.data.cancelBtnLabel\"\r\n [id]=\"dynamicDialogConfig.data.cancelBtnId\" [styleClass]=\"'cancel-btn confirmation-btn cancel-btn'\"\r\n (click)=\"close()\" />\r\n </div>\r\n </div>\r\n\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["dynamicFormData"], outputs: ["selectButtonChange", "selectChange", "switchChange", "autoCompleteSearch", "autoCompleteSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
1596
- }
1597
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
1598
- type: Component,
1599
- args: [{ selector: 'app-confirm-dialog', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
1600
- AppButtonComponent,
1601
- AvatarModule,
1602
- DynamicDialogModule,
1603
- DynamicFormComponent,
1604
- TranslatePipe,
1605
- ], 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}" }]
1606
- }] });
1607
-
1608
- class ReadMoreComponent {
1609
- text = "";
1610
- styleClass = "";
1611
- maxCharacters = 100;
1612
- isExpanded = false;
1613
- toggleReadMore() {
1614
- this.isExpanded = !this.isExpanded;
1615
- }
1616
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ReadMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1617
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ReadMoreComponent, isStandalone: true, selector: "app-read-more", inputs: { text: "text", styleClass: "styleClass", maxCharacters: "maxCharacters" }, ngImport: i0, template: "<p [class]=\"styleClass\">\r\n {{ isExpanded ? text : (text | slice : 0 : maxCharacters) }}\r\n @if (text.length > maxCharacters && !isExpanded) {\r\n <span>...</span>\r\n }\r\n @if (isExpanded) {\r\n <span>\r\n {{ text | slice : maxCharacters + 1 : text.length }}\r\n </span>\r\n }\r\n <br>\r\n @if (text.length > maxCharacters) {\r\n <span class=\"text-primary_light cursor-pointer\" (click)=\"toggleReadMore()\">\r\n {{ isExpanded ? ('less' | translate) : ('more' | translate) }}\r\n </span>\r\n }\r\n</p>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: SlicePipe, name: "slice" }] });
1618
- }
1619
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ReadMoreComponent, decorators: [{
1620
- type: Component,
1621
- 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" }]
1622
- }], propDecorators: { text: [{
1623
- type: Input,
1624
- args: [{ required: true }]
1625
- }], styleClass: [{
1626
- type: Input
1627
- }], maxCharacters: [{
1628
- type: Input
1629
- }] } });
1630
-
1631
- class AppAccordionComponent {
1632
- iconName;
1633
- iconClass;
1634
- iconPathCount = 0;
1635
- title;
1636
- contentBorderTop = true;
1637
- accordionPanelBorder = true;
1638
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1639
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AppAccordionComponent, isStandalone: true, selector: "app-accordion", inputs: { iconName: "iconName", iconClass: "iconClass", iconPathCount: "iconPathCount", title: "title", contentBorderTop: "contentBorderTop", accordionPanelBorder: "accordionPanelBorder" }, ngImport: i0, template: "<p-accordion value=\"0\">\r\n <p-accordion-panel value=\"0\" [class.!border-0]=\"!accordionPanelBorder\">\r\n <p-accordion-header>\r\n <span class=\"flex items-center gap-2 w-full\">\r\n <app-ico-moon-card [iconClass]=\"'text-[24px] text-secondary'\" [iconName]=\"'font-icon-'+iconName\" />\r\n <span class=\"font-bold whitespace-nowrap\">{{title}}</span>\r\n </span>\r\n </p-accordion-header>\r\n <p-accordion-content>\r\n <div [ngClass]=\"{'border-t-2 border-gray-light pt-2': contentBorderTop, }\">\r\n <ng-content></ng-content>\r\n </div>\r\n </p-accordion-content>\r\n </p-accordion-panel>\r\n</p-accordion>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$4.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i2$4.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i2$4.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i2$4.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: IcoMoonIconComponent, selector: "app-ico-moon-card", inputs: ["iconName", "iconClass", "iconPathCount"] }] });
1640
- }
1641
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppAccordionComponent, decorators: [{
1642
- type: Component,
1643
- 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" }]
1644
- }], propDecorators: { iconName: [{
1645
- type: Input
1646
- }], iconClass: [{
1647
- type: Input
1648
- }], iconPathCount: [{
1649
- type: Input
1650
- }], title: [{
1651
- type: Input,
1652
- args: [{ required: true }]
1653
- }], contentBorderTop: [{
1654
- type: Input
1655
- }], accordionPanelBorder: [{
1656
- type: Input
1657
- }] } });
1658
-
1659
- class UserAutocompleteCardComponent {
1660
- select = new EventEmitter();
1661
- delete = new EventEmitter();
1662
- userData;
1663
- explicitRole = "";
1664
- showDeleteAction = true;
1665
- onDelete() {
1666
- this.delete.emit(this.userData);
1667
- }
1668
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UserAutocompleteCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1669
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UserAutocompleteCardComponent, isStandalone: true, selector: "app-user-autocomplete-card", inputs: { userData: "userData", explicitRole: "explicitRole", showDeleteAction: "showDeleteAction" }, outputs: { select: "select", delete: "delete" }, ngImport: i0, template: "<div class=\"flex gap-2 items-center justify-between p-4 rounded mb-4 border border-dotted border-gray-300 bg-gray-100\">\r\n <div class=\"flex gap-4 items-center\">\r\n <img [alt]=\"userData.name\" [src]=\"userData.profileImage\" class=\"rounded-full object-cover w-[48px] h-[48px]\" />\r\n <div class=\"flex flex-col justify-end\">\r\n <h4 class=\"font-bold text-[12px] text-gray-800 truncate max-w-[135px] dir-ltr\">\r\n {{ userData.name }}\r\n </h4>\r\n <p class=\"text-[12px] text-gray-700\">{{ explicitRole ? explicitRole : userData.position.name }}</p>\r\n </div>\r\n </div>\r\n <div class=\"flex-1 flex flex-col items-end\">\r\n <p class=\"text-[12px] text-purple-700 truncate max-w-[90px] dir-ltr\">{{ userData.email }}</p>\r\n <p class=\"text-[12px] text-gray-600 dir-ltr\">{{ userData.contact.mobile }}</p>\r\n </div>\r\n @if (showDeleteAction){\r\n <div class=\"flex gap-1 flex-nowrap\">\r\n <app-button (clickEmitter)=\"onDelete()\" [rounded]=\"true\" [size]=\"'large'\" [text]=\"true\" icon=\"font-icon-trash\"/>\r\n </div>\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1670
- }
1671
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UserAutocompleteCardComponent, decorators: [{
1672
- type: Component,
1673
- 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" }]
1674
- }], propDecorators: { select: [{
1675
- type: Output
1676
- }], delete: [{
1677
- type: Output
1678
- }], userData: [{
1679
- type: Input,
1680
- args: [{ required: true }]
1681
- }], explicitRole: [{
1682
- type: Input
1683
- }], showDeleteAction: [{
1684
- type: Input
1685
- }] } });
1686
-
1687
- class AppBreadcrumbComponent {
1688
- activatedRoute;
1689
- router;
1690
- items;
1691
- isShown;
1692
- constructor(activatedRoute, router) {
1693
- this.activatedRoute = activatedRoute;
1694
- this.router = router;
1695
- }
1696
- ngOnInit() {
1697
- if (this.items) {
1698
- this.isShown = true;
1699
- return;
1700
- }
1701
- this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((e) => {
1702
- // remove duplicates
1703
- this.items = this._createBreadcrumbs(this.activatedRoute.root).filter((item, index, self) => index ===
1704
- self.findIndex((t) => t.label === item.label && t.routerLink === item.routerLink));
1705
- this._checkHiddenBreadcrumb();
1706
- this._checkEmpty();
1707
- });
1708
- }
1709
- _checkHiddenBreadcrumb() {
1710
- const activeBreadcrumb = this.items?.find((item) => {
1711
- return item.routerLink === this.router.url;
1712
- });
1713
- this.isShown = !!activeBreadcrumb?.isShown;
1714
- }
1715
- _createBreadcrumbs(activatedRoute, routerLink = '', breadcrumbs = []) {
1716
- const children = activatedRoute.children;
1717
- if (children.length === 0) {
1718
- return breadcrumbs;
1719
- }
1720
- for (const child of children) {
1721
- const routeURL = child.snapshot.url.map((segment) => segment.path).join('/');
1722
- if (routeURL !== '') {
1723
- routerLink += `/${routeURL}`;
1724
- }
1725
- let label = child.snapshot.data['breadcrumb'];
1726
- const notClickableBreadcrumb = !!child.snapshot.data['notClickableBreadcrumb'];
1727
- const isShown = !!child.snapshot.data['isShown'];
1728
- const extraBreadcrumbs = child.snapshot.data['extraBreadcrumbs'] || [];
1729
- if (!(typeof label === 'undefined' || label === null)) {
1730
- const data = activatedRoute.snapshot.firstChild?.data || {};
1731
- // Resolve dynamic breadcrumb label
1732
- if (label && label.startsWith('[') && label.endsWith(']')) {
1733
- label = this._getRecursiveKey(data, label.slice(1, -1).split('.'));
1734
- }
1735
- // Resolve dynamic URL parts
1736
- const resolveDynamicUrl = (route) => {
1737
- return route.replace(/\[([^\]]+)]/g, (_, key) => this._getRecursiveKey(data, key.split('.')) || '');
1738
- };
1739
- const mainBreadcrumb = {
1740
- label,
1741
- routerLink,
1742
- data,
1743
- notClickableBreadcrumb,
1744
- isShown,
1745
- };
1746
- // Process extra breadcrumbs
1747
- const beforeBreadcrumbs = [];
1748
- const afterBreadcrumbs = [];
1749
- extraBreadcrumbs.forEach((extra) => {
1750
- let extraLabel = extra.label || '';
1751
- if (extraLabel.startsWith('[') && extraLabel.endsWith(']')) {
1752
- extraLabel = this._getRecursiveKey(data, extraLabel.slice(1, -1).split('.'));
1753
- }
1754
- const extraUrl = resolveDynamicUrl(extra.routerLink || '');
1755
- const extraBreadcrumb = { ...extra, label: extraLabel, routerLink: extraUrl };
1756
- if (extra.position === 'before') {
1757
- beforeBreadcrumbs.push(extraBreadcrumb);
1758
- }
1759
- else {
1760
- afterBreadcrumbs.push(extraBreadcrumb);
1761
- }
1762
- });
1763
- // Merge breadcrumbs
1764
- breadcrumbs.push(...beforeBreadcrumbs, mainBreadcrumb, ...afterBreadcrumbs);
1765
- }
1766
- return this._createBreadcrumbs(child, routerLink, breadcrumbs);
1767
- }
1768
- }
1769
- _checkEmpty() {
1770
- if (!this.items)
1771
- return;
1772
- const lastBreadcrumbVisibility = this.items[this.items.length - 1].isShown;
1773
- this.items = this.items.filter((b) => b.label !== '');
1774
- this.items[this.items.length - 1].isShown = lastBreadcrumbVisibility;
1775
- }
1776
- _getRecursiveKey(obj, keys) {
1777
- if (keys.length === 0) {
1778
- return undefined;
1779
- }
1780
- const [currentKey, ...remainingKeys] = keys;
1781
- if (currentKey in obj) {
1782
- if (remainingKeys.length > 0) {
1783
- return this._getRecursiveKey(obj[currentKey], remainingKeys);
1784
- }
1785
- return obj[currentKey];
1786
- }
1787
- return undefined;
1788
- }
1789
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppBreadcrumbComponent, deps: [{ token: i1$7.ActivatedRoute }, { token: i1$7.Router }], target: i0.ɵɵFactoryTarget.Component });
1790
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AppBreadcrumbComponent, isStandalone: true, selector: "app-breadcrumb", inputs: { items: "items" }, ngImport: i0, template: "@if(isShown) {\r\n<nav class=\"flex gap-x-3 text-[12px] w-full items-center mb-5\">\r\n <div class=\"card flex justify-center\">\r\n <p-breadcrumb [model]=\"items\"></p-breadcrumb>\r\n </div>\r\n</nav>\r\n}\r\n", styles: [".p-breadcrumb-list li:first-child a{@apply text-secondary;}.p-breadcrumb-list .p-breadcrumb-separator{transform:scale(.7);display:none}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-link{padding:0 4px}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label{@apply text-light_red relative;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:hover{@apply text-light_red;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:before{content:\"/\";@apply inline-block absolute text-gray-900;inset-inline-end:-9px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: RouterModule }], encapsulation: i0.ViewEncapsulation.None });
1791
- }
1792
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppBreadcrumbComponent, decorators: [{
1793
- type: Component,
1794
- 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"] }]
1795
- }], ctorParameters: () => [{ type: i1$7.ActivatedRoute }, { type: i1$7.Router }], propDecorators: { items: [{
1796
- type: Input
1797
- }] } });
1798
-
1799
- const SIDEBAR_DATA = new InjectionToken('SIDEBAR_DATA');
1800
- function createCustomInjector(parentInjector, injectionToken, data) {
1801
- return Injector.create({
1802
- parent: parentInjector,
1803
- providers: [
1804
- {
1805
- provide: injectionToken,
1806
- useValue: data ?? null
1807
- }
1808
- ]
1809
- });
1810
- }
1811
- ;
1812
- var SidebarActionType;
1813
- (function (SidebarActionType) {
1814
- SidebarActionType["SAVE"] = "SAVE";
1815
- SidebarActionType["SaveMore"] = "SaveMore";
1816
- SidebarActionType["CANCEL"] = "CANCEL";
1817
- SidebarActionType["SUBMIT"] = "SUBMIT";
1818
- SidebarActionType["CLOSE"] = "CLOSE";
1819
- SidebarActionType["CloseWithData"] = "CloseWithData";
1820
- })(SidebarActionType || (SidebarActionType = {}));
1821
-
1822
- class DataInjectorPipe {
1823
- injector = inject(Injector);
1824
- transform(data) {
1825
- return createCustomInjector(this.injector, SIDEBAR_DATA, data);
1826
- }
1827
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
1828
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: DataInjectorPipe, isStandalone: true, name: "dataInjector" });
1829
- }
1830
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataInjectorPipe, decorators: [{
1831
- type: Pipe,
1832
- args: [{
1833
- name: 'dataInjector',
1834
- standalone: true,
1835
- pure: true
1836
- }]
1837
- }] });
1838
-
1839
- class SideBarDynamicComponent {
1840
- dynamicSidebarService = inject(DynamicSidebarService);
1841
- parentInjector = inject(Injector);
1842
- location = inject(Location);
1843
- popStateListener;
1844
- sidebarConfig = this.dynamicSidebarService.sidebarConfig;
1845
- ngOnInit() {
1846
- //To close a sidebar when the browser back button is pressed
1847
- this.popStateListener = this.location.subscribe(() => {
1848
- if (this.dynamicSidebarService.sidebarConfig.visible) {
1849
- this.dynamicSidebarService.close();
1850
- }
1851
- });
1852
- }
1853
- ngOnDestroy() {
1854
- // reset Sidebar token
1855
- createCustomInjector(this.parentInjector, SIDEBAR_DATA, null);
1856
- }
1857
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideBarDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1858
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SideBarDynamicComponent, isStandalone: true, selector: "app-side-bar-dynamic", ngImport: i0, template: "<p-drawer (onHide)=\"dynamicSidebarService.close()\" [(visible)]=\"sidebarConfig.visible\"\r\n [closable]=\"sidebarConfig.closable\" [closeOnEscape]=\"sidebarConfig.closeOnEscape\"\r\n [dismissible]=\"sidebarConfig.dismissible\" [ngClass]=\"{ show: sidebarConfig.show }\" [position]=\"'left'\" appendTo=\"body\"\r\n id=\"main-drawer\"\r\n styleClass=\"p-drawer-{{ sidebarConfig.sidebarSize }} custom-content bg-white {{ sidebarConfig.styleClass }}\">\r\n <ng-template pTemplate=\"header\">{{ sidebarConfig.title }}</ng-template>\r\n <ng-template pTemplate=\"content\">\r\n <ng-container [ngComponentOutletInjector]=\"dynamicSidebarService.contentComponentData | dataInjector\"\r\n [ngComponentOutlet]=\"dynamicSidebarService.contentComponentRef\"></ng-container>\r\n </ng-template>\r\n @if (sidebarConfig.showSaveBtn || sidebarConfig.showSaveAndMoreBtn || sidebarConfig.showCancelBtn) {\r\n <ng-template pTemplate=\"footer\">\r\n <section class=\"flex justify-between bg-gray-200 py-4\" id=\"sidebar-footer\">\r\n <div class=\"flex gap-2\">\r\n @if (sidebarConfig.showSaveBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.submit(true)\"\r\n [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n [icon]=\"sidebarConfig!.actions!.save!.icon || 'font-icon-plus'\"\r\n [iconPos]=\"sidebarConfig!.actions!.save!.iconPos || 'right'\"\r\n [styleClass]=\"sidebarConfig!.actions!.save!.style || 'danger'\"\r\n [title]=\"sidebarConfig!.actions!.save!.title || ('actions.save' | translate)\"\r\n [variant]=\"sidebarConfig!.actions!.save!.variant\" />\r\n }\r\n @if (sidebarConfig.showSaveAndMoreBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.submit()\"\r\n [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n [icon]=\"sidebarConfig!.actions!.saveAndMore!.icon || 'font-icon-plus'\"\r\n [iconPos]=\"sidebarConfig!.actions!.saveAndMore!.iconPos || 'right'\"\r\n [styleClass]=\"sidebarConfig!.actions!.saveAndMore!.style || 'danger'\"\r\n [title]=\"sidebarConfig!.actions!.saveAndMore!.title || ('actions.save_and_and_more' | translate)\"\r\n [variant]=\"sidebarConfig!.actions!.saveAndMore!.variant\" />\r\n\r\n }\r\n </div>\r\n @if (sidebarConfig.showCancelBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.cancel()\" [styleClass]=\"'secondary'\"\r\n [title]=\"'actions.cancel' | translate\" />\r\n }\r\n </section>\r\n </ng-template>\r\n }\r\n</p-drawer>", styles: [".sidebar.show{min-width:550px}\n"], dependencies: [{ kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "pipe", type: DataInjectorPipe, name: "dataInjector" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
1859
- }
1860
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideBarDynamicComponent, decorators: [{
1861
- type: Component,
1862
- 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"] }]
1863
- }] });
1864
-
1865
- const SidebarConfigDefaults = {
1866
- title: "",
1867
- show: true,
1868
- visible: true,
1869
- closable: true,
1870
- dismissible: false,
1871
- closeOnEscape: false,
1872
- sidebarSize: "md",
1873
- showCancelBtn: false,
1874
- showSaveBtn: false,
1875
- showSaveAndMoreBtn: false,
1876
- actions: {
1877
- save: {},
1878
- saveAndMore: {
1879
- variant: "outlined"
1880
- }
1881
- }
1882
- };
1883
-
1884
- class DynamicSidebarService {
1885
- environmentInjector;
1886
- appRef;
1887
- contentComponentRef = null;
1888
- contentComponentData;
1889
- sidebarConfig = this.getDefaultConfig();
1890
- activeForm = null;
1891
- componentRef = null;
1892
- sidebarAction$ = new Subject();
1893
- action$ = this.sidebarAction$.asObservable();
1894
- sidebarSideEffectAction$ = new Subject();
1895
- sideEffectAction$ = this.sidebarSideEffectAction$.asObservable();
1896
- isOpen$ = new BehaviorSubject(false);
1897
- isOpenObservable$ = this.isOpen$.asObservable();
1898
- constructor(environmentInjector, appRef) {
1899
- this.environmentInjector = environmentInjector;
1900
- this.appRef = appRef;
1901
- }
1902
- // Action notifications
1903
- notifyAction(type, payload) {
1904
- this.sidebarAction$.next({ type, payload });
1905
- }
1906
- notifySideEffectAction(type, payload) {
1907
- this.sidebarSideEffectAction$.next({ type, payload });
1908
- }
1909
- // Form management
1910
- setActiveForm(control) {
1911
- this.activeForm = control;
1912
- }
1913
- resetActiveForm() {
1914
- this.activeForm = null;
1915
- }
1916
- isButtonDisabled() {
1917
- if (!this.activeForm) {
1918
- return false;
1919
- }
1920
- return this.activeForm.invalid || this.activeForm.untouched;
1921
- }
1922
- open(component, config, data) {
1923
- // Close any existing sidebar before opening a new one
1924
- // TODO Need to Review
1925
- if (!component) {
1926
- return;
1927
- }
1928
- this.close();
1929
- this.contentComponentRef = component;
1930
- this.contentComponentData = data;
1931
- this.sidebarConfig = { ...this.getDefaultConfig(), ...config };
1932
- this.componentRef = createComponent(SideBarDynamicComponent, {
1933
- environmentInjector: this.environmentInjector,
1934
- });
1935
- // Attach the component to the Angular application
1936
- this.appRef.attachView(this.componentRef.hostView);
1937
- // Append the component to the DOM
1938
- const domElem = this.componentRef.hostView.rootNodes[0];
1939
- document.body.appendChild(domElem);
1940
- }
1941
- /**
1942
- * Closes the currently open sidebar, if any.
1943
- */
1944
- close() {
1945
- if (this.componentRef) {
1946
- // Detach the view and destroy the component
1947
- this.appRef.detachView(this.componentRef.hostView);
1948
- this.componentRef.destroy();
1949
- this.componentRef = null;
1950
- // Reset content and configuration
1951
- this.contentComponentRef = null;
1952
- this.contentComponentData = null;
1953
- this.sidebarConfig = this.getDefaultConfig();
1954
- this.isOpen$.next(false);
1955
- this.resetActiveForm();
1956
- this.notifySideEffectAction(SidebarActionType.CLOSE);
1957
- }
1958
- }
1959
- cancel() {
1960
- this.notifyAction(SidebarActionType.CANCEL);
1961
- }
1962
- submit(flag = false) {
1963
- const actionType = flag ? SidebarActionType.SaveMore : SidebarActionType.SAVE;
1964
- this.notifyAction(actionType, { withClose: flag });
1965
- }
1966
- /**
1967
- * Provides the default configuration for the sidebar.
1968
- * @returns The default SidebarConfig object.
1969
- */
1970
- getDefaultConfig() {
1971
- return {
1972
- ...SidebarConfigDefaults,
1973
- show: false,
1974
- visible: false,
1975
- closable: false,
1976
- dismissible: true
1977
- };
1978
- }
1979
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarService, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
1980
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarService, providedIn: "root" });
1981
- }
1982
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarService, decorators: [{
1983
- type: Injectable,
1984
- args: [{
1985
- providedIn: "root"
1986
- }]
1987
- }], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }] });
1988
-
1989
- class ConfirmationDialogService {
1990
- dialogService;
1991
- constructor(dialogService) {
1992
- this.dialogService = dialogService;
1993
- }
1994
- open(data) {
1995
- const ref = this.dialogService.open(ConfirmationDialogComponent, {
1996
- data,
1997
- header: data.header,
1998
- showHeader: true,
1999
- width: '600px',
2000
- closable: true,
2001
- modal: true,
2002
- styleClass: 'confirmation-dialog-wrapper',
2003
- breakpoints: data.breakpoints,
2004
- });
2005
- if (!ref) {
2006
- return of(false); // or EMPTY / throwError — depending on your logic
2007
- }
2008
- // Emit true/false when dialog closes
2009
- return ref.onClose.pipe(filter$1((res) => res !== undefined), map((res) => !!res));
2010
- }
2011
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogService, deps: [{ token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Injectable });
2012
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogService, providedIn: 'root' });
2013
- }
2014
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogService, decorators: [{
2015
- type: Injectable,
2016
- args: [{
2017
- providedIn: 'root',
2018
- }]
2019
- }], ctorParameters: () => [{ type: i1$8.DialogService }] });
2020
-
2021
- class BottomSheetComponent {
2022
- show = false;
2023
- contentTemplate;
2024
- onHide = new EventEmitter();
2025
- onShow = new EventEmitter();
2026
- hideBottomSheet() {
2027
- this.show = false;
2028
- this.onHide.emit(false);
2029
- }
2030
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2031
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: BottomSheetComponent, isStandalone: true, selector: "app-bottom-sheet", inputs: { show: "show", contentTemplate: "contentTemplate" }, outputs: { onHide: "onHide", onShow: "onShow" }, ngImport: i0, template: "<p-drawer\r\n (onHide)=\"hideBottomSheet()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"false\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'bottom'\"\r\n appendTo=\"body\"\r\n >\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"band\"></div>\r\n </ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.band{background-color:#dfe0e6;width:40px;height:4px;border-radius:24px;display:block}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500;justify-content:center;color:#090d0f;font-size:20px;flex-direction:column}.p-drawer-content{padding:0!important;margin:0!important}\n"], dependencies: [{ kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }], encapsulation: i0.ViewEncapsulation.None });
2032
- }
2033
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BottomSheetComponent, decorators: [{
2034
- type: Component,
2035
- 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"] }]
2036
- }], propDecorators: { show: [{
2037
- type: Input
2038
- }], contentTemplate: [{
2039
- type: Input
2040
- }], onHide: [{
2041
- type: Output
2042
- }], onShow: [{
2043
- type: Output
2044
- }] } });
2045
-
2046
- class DynamicSidebarComponent {
2047
- component;
2048
- data;
2049
- title = '';
2050
- actions;
2051
- sidebarSize = 'md';
2052
- closable = true;
2053
- closeOnEscape = true;
2054
- dismissible = true;
2055
- position = 'left';
2056
- styleClass = '';
2057
- disabled = false;
2058
- closed = new EventEmitter();
2059
- contentContainer;
2060
- contentRef;
2061
- show = true;
2062
- ngAfterViewInit() {
2063
- this.renderContent();
2064
- }
2065
- renderContent() {
2066
- if (!this.component)
2067
- return;
2068
- this.contentContainer.clear();
2069
- this.contentRef = this.contentContainer.createComponent(this.component);
2070
- if (this.data)
2071
- Object.assign(this.contentRef.instance, this.data);
2072
- }
2073
- handleClose() {
2074
- if (this.contentRef.instance.close)
2075
- this.contentRef.instance.close();
2076
- this.closed.emit(null);
2077
- this.destroy();
2078
- }
2079
- handleSubmit() {
2080
- if (this.data.form) {
2081
- this.data.form.markAllAsTouched();
2082
- if (this.data.form.invalid)
2083
- return;
2084
- }
2085
- if (this.contentRef.instance.submit)
2086
- this.contentRef.instance.submit();
2087
- }
2088
- destroy() {
2089
- this.contentRef?.destroy();
2090
- }
2091
- ngOnDestroy() {
2092
- this.destroy();
2093
- }
2094
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2095
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DynamicSidebarComponent, isStandalone: true, selector: "app-dynamic-sidebar", inputs: { component: "component", data: "data", title: "title", actions: "actions", sidebarSize: "sidebarSize", closable: "closable", closeOnEscape: "closeOnEscape", dismissible: "dismissible", position: "position", styleClass: "styleClass", disabled: "disabled" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<p-drawer\r\n [(visible)]=\"show\"\r\n [position]=\"position\"\r\n appendTo=\"body\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n (onHide)=\"handleClose()\"\r\n [position]=\"'left'\"\r\n [styleClass]=\"'p-drawer-' + sidebarSize + ' custom-content bg-white ' + styleClass\">\r\n <ng-template pTemplate=\"header\">\r\n <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n </ng-template>\r\n <ng-template pTemplate=\"content\">\r\n <ng-template #contentContainer></ng-template>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"flex gap-4 mt-4\">\r\n <div class=\"flex-auto\">\r\n <app-button (click)=\"handleSubmit()\"\r\n [icon]=\"actions?.save?.icon\"\r\n [iconPos]=\"actions?.save?.iconPos || 'right'\"\r\n [styleClass]=\"(actions?.save?.style || 'danger') + ' w-full'\"\r\n [label]=\"actions?.save?.title || ('actions.submit' | translate)\"\r\n [variant]=\"actions?.save?.variant\"\r\n />\r\n </div>\r\n <app-button (click)=\"handleClose()\" severity=\"danger\" variant=\"outlined\"\r\n [label]=\"actions?.cancel?.title || ('actions.cancel' | translate)\" />\r\n </div>\r\n </ng-template>\r\n</p-drawer>\r\n", styles: [".flex-auto{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1$9.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
2096
- }
2097
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarComponent, decorators: [{
2098
- type: Component,
2099
- 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"] }]
2100
- }], propDecorators: { component: [{
2101
- type: Input
2102
- }], data: [{
2103
- type: Input
2104
- }], title: [{
2105
- type: Input
2106
- }], actions: [{
2107
- type: Input
2108
- }], sidebarSize: [{
2109
- type: Input
2110
- }], closable: [{
2111
- type: Input
2112
- }], closeOnEscape: [{
2113
- type: Input
2114
- }], dismissible: [{
2115
- type: Input
2116
- }], position: [{
2117
- type: Input
2118
- }], styleClass: [{
2119
- type: Input
2120
- }], disabled: [{
2121
- type: Input
2122
- }], closed: [{
2123
- type: Output
2124
- }], contentContainer: [{
2125
- type: ViewChild,
2126
- args: ['contentContainer', { read: ViewContainerRef }]
2127
- }] } });
2128
-
2129
- class DynamicSidebarV2Service {
2130
- sidebarRef;
2131
- appRef = inject(ApplicationRef);
2132
- injector = inject(Injector);
2133
- envInjector = inject(EnvironmentInjector);
2134
- open(options) {
2135
- this.close();
2136
- this.sidebarRef = createComponent(DynamicSidebarComponent, {
2137
- environmentInjector: this.envInjector,
2138
- elementInjector: this.injector,
2139
- });
2140
- const instance = this.sidebarRef.instance;
2141
- instance.title = options.title ?? '';
2142
- instance.sidebarSize = options.size ?? 'md';
2143
- instance.position = options.position ?? 'left';
2144
- instance.styleClass = options.styleClass ?? '';
2145
- instance.component = options.component;
2146
- instance.data = options.data ?? {};
2147
- instance.actions = options.actions;
2148
- instance.closed.subscribe(() => this.close());
2149
- this.appRef.attachView(this.sidebarRef.hostView);
2150
- const domElem = this.sidebarRef.hostView.rootNodes[0];
2151
- document.body.appendChild(domElem);
2152
- }
2153
- close() {
2154
- if (this.sidebarRef) {
2155
- this.sidebarRef.destroy();
2156
- this.sidebarRef = undefined;
2157
- }
2158
- }
2159
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarV2Service, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2160
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarV2Service, providedIn: 'root' });
2161
- }
2162
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarV2Service, decorators: [{
2163
- type: Injectable,
2164
- args: [{ providedIn: 'root' }]
2165
- }] });
2166
-
2167
- class AlertDialogComponent extends DynamicDialogRef {
2168
- router = inject(Router);
2169
- dynamicDialogConfig = inject(DynamicDialogConfig);
2170
- _destroyRef = inject(DestroyRef);
2171
- _ref = inject(DynamicDialogRef);
2172
- ngOnInit() {
2173
- this.router.events.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
2174
- if (this.dynamicDialogConfig) {
2175
- this._ref.close(false);
2176
- }
2177
- });
2178
- }
2179
- close() {
2180
- this._ref.close(false);
2181
- }
2182
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2183
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlertDialogComponent, isStandalone: true, selector: "app-alert-dialog", providers: [DynamicDialogStyle], usesInheritance: true, ngImport: i0, template: "@if (dynamicDialogConfig.data) {\r\n <div class=\"alert-dialog\">\r\n <div class=\"dialog-wrapper\">\r\n @if (dynamicDialogConfig.data) {\r\n <div class=\"alert-dialog__content my-4\">\r\n @if (dynamicDialogConfig.data.dialogIcon) {\r\n <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n }\r\n <p class=\"alert-dialog__message mb-2\">\r\n {{ dynamicDialogConfig.data.message }}\r\n </p>\r\n </div>\r\n }\r\n <div class=\"alert-dialog__actions flex gap-2 mt-4\">\r\n <app-button [severity]=\"'primary'\" variant=\"outlined\"\r\n [label]=\"dynamicDialogConfig.data.cancelBtnLabel??('actions.close' | translate)\"\r\n [id]=\"dynamicDialogConfig.data.cancelBtnId??'button_close_alert'\" [styleClass]=\"'cancel-btn alert-btn'\"\r\n (click)=\"close()\" />\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
2184
- }
2185
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertDialogComponent, decorators: [{
2186
- type: Component,
2187
- args: [{ selector: 'app-alert-dialog', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
2188
- AppButtonComponent,
2189
- AvatarModule,
2190
- DynamicDialogModule,
2191
- TranslatePipe,
2192
- ], providers: [DynamicDialogStyle], template: "@if (dynamicDialogConfig.data) {\r\n <div class=\"alert-dialog\">\r\n <div class=\"dialog-wrapper\">\r\n @if (dynamicDialogConfig.data) {\r\n <div class=\"alert-dialog__content my-4\">\r\n @if (dynamicDialogConfig.data.dialogIcon) {\r\n <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n }\r\n <p class=\"alert-dialog__message mb-2\">\r\n {{ dynamicDialogConfig.data.message }}\r\n </p>\r\n </div>\r\n }\r\n <div class=\"alert-dialog__actions flex gap-2 mt-4\">\r\n <app-button [severity]=\"'primary'\" variant=\"outlined\"\r\n [label]=\"dynamicDialogConfig.data.cancelBtnLabel??('actions.close' | translate)\"\r\n [id]=\"dynamicDialogConfig.data.cancelBtnId??'button_close_alert'\" [styleClass]=\"'cancel-btn alert-btn'\"\r\n (click)=\"close()\" />\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n" }]
2193
- }] });
2194
-
2195
- class AlertDialogService {
2196
- dialogService = inject(DialogService);
2197
- open(data) {
2198
- const ref = this.dialogService.open(AlertDialogComponent, {
2199
- data,
2200
- header: data.header,
2201
- showHeader: true,
2202
- width: '600px',
2203
- closable: true,
2204
- modal: true,
2205
- styleClass: 'alert-dialog-wrapper',
2206
- });
2207
- if (!ref) {
2208
- return of(false); // or EMPTY / throwError — depending on your logic
2209
- }
2210
- // Emit true/false when dialog closes
2211
- return ref.onClose.pipe(filter$1((res) => res !== undefined), map((res) => !!res));
2212
- }
2213
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2214
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertDialogService, providedIn: 'root' });
2215
- }
2216
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertDialogService, decorators: [{
2217
- type: Injectable,
2218
- args: [{
2219
- providedIn: 'root',
2220
- }]
2221
- }] });
2222
-
2223
- const dateRangeValidator = (fromKey, toKey) => (control) => {
2224
- const fromControl = control.get?.(fromKey);
2225
- const toControl = control.get?.(toKey);
2226
- if (!fromControl?.value || !toControl?.value) {
2227
- return null;
2228
- }
2229
- const from = new Date(fromControl.value);
2230
- const to = new Date(toControl.value);
2231
- from.setHours(0, 0, 0, 0);
2232
- to.setHours(0, 0, 0, 0);
2233
- return from > to ? { invalidDateRange: true } : null;
2234
- };
2235
- const notFutureDateValidator = (dateKey) => (control) => {
2236
- const dateControl = control.get?.(dateKey);
2237
- if (!dateControl?.value) {
2238
- return null;
2239
- }
2240
- const valueDate = new Date(dateControl.value);
2241
- valueDate.setHours(0, 0, 0, 0);
2242
- const today = new Date();
2243
- today.setHours(0, 0, 0, 0);
2244
- return valueDate > today ? { futureDate: true } : null;
2245
- };
2246
-
2247
- /**
2248
- * Generated bundle index. Do not edit.
2249
- */
2250
-
2251
- export { AlertDialogComponent, AlertDialogService, AppAccordionComponent, AppBreadcrumbComponent, AppButtonComponent, AppDropdownMenuComponent, AppTabsComponent, AutoCompleteComponent, BasicErrorKeysEnum, BottomSheetComponent, ConfirmationDialogComponent, ConfirmationDialogService, DatePickerComponent, DualCalendarComponent, DynamicFormComponent, DynamicSidebarService, DynamicSidebarV2Service, ErrorsWithValuesKeysEnum, FormFieldTypeEnum, FormUtils, FormValidationService, IcoMoonIconComponent, InputComponent, MONTHS_GREGORIAN, MONTHS_HIJRI, ReadMoreComponent, SelectButtonComponent, SelectComponent, SideBarComponent, SidebarConfigDefaults, SwitchComponent, UserAutocompleteCardComponent, UserInfoComponent, ValidationErrorsPipe, WEEKDAYS, dateRangeValidator, getGregorianMonthName, getHijriMonthName, getWeekdayName, notFutureDateValidator };
2252
- //# sourceMappingURL=corp-products-ui-components.mjs.map