@corp-products/ui-components 1.0.3 → 2.0.1
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.
- package/README.md +63 -2
- package/fesm2022/corp-products-ui-components.mjs +227 -187
- package/fesm2022/corp-products-ui-components.mjs.map +1 -1
- package/index.d.ts +394 -13
- package/package.json +6 -6
- package/esm2022/corp-products-ui-components.mjs +0 -5
- package/esm2022/index.mjs +0 -14
- package/esm2022/lib/app-accordion/app-accordion.component.mjs +0 -35
- package/esm2022/lib/app-button/app-button.component.mjs +0 -43
- package/esm2022/lib/app-button/app-button.mjs +0 -2
- package/esm2022/lib/app-button/index.mjs +0 -3
- package/esm2022/lib/app-dropdown-menu/app-dropdown-menu.component.mjs +0 -54
- package/esm2022/lib/app-dropdown-menu/app-dropdown-menu.mjs +0 -2
- package/esm2022/lib/app-dropdown-menu/index.mjs +0 -3
- package/esm2022/lib/app-dropdown-menu/menu-popup.pipe.mjs +0 -23
- package/esm2022/lib/app-tabs/app-tab.interface.mjs +0 -2
- package/esm2022/lib/app-tabs/app-tabs.component.mjs +0 -57
- package/esm2022/lib/app-tabs/index.mjs +0 -3
- package/esm2022/lib/confirmation-dialog/confirmation-dialog.component.mjs +0 -44
- package/esm2022/lib/dynamic-form/dynamic-form.component.mjs +0 -31
- package/esm2022/lib/dynamic-form/dynamic-form.interface.mjs +0 -6
- package/esm2022/lib/form-components/@utils/form-utils.mjs +0 -11
- package/esm2022/lib/form-components/@utils/validations/error-keys.enum.mjs +0 -27
- package/esm2022/lib/form-components/@utils/validations/form-validation.service.mjs +0 -50
- package/esm2022/lib/form-components/@utils/validations/index.mjs +0 -4
- package/esm2022/lib/form-components/@utils/validations/validation-message.pipe.mjs +0 -30
- package/esm2022/lib/form-components/components/auto-complete/auto-complete.component.mjs +0 -59
- package/esm2022/lib/form-components/components/base-input.component.mjs +0 -57
- package/esm2022/lib/form-components/components/date-picker/date-picker.component.mjs +0 -58
- package/esm2022/lib/form-components/components/input/input.component.mjs +0 -48
- package/esm2022/lib/form-components/components/select/select.component.mjs +0 -72
- package/esm2022/lib/form-components/components/select-button/select-button.component.mjs +0 -29
- package/esm2022/lib/form-components/components/switcher/switch.component.mjs +0 -34
- package/esm2022/lib/form-components/index.mjs +0 -10
- package/esm2022/lib/form-components/interfaces/index.mjs +0 -2
- package/esm2022/lib/form-components/interfaces/label-value.mjs +0 -2
- package/esm2022/lib/ico-moon-icon/ico-moon-icon.component.mjs +0 -41
- package/esm2022/lib/read-more/read-more.component.mjs +0 -30
- package/esm2022/lib/side-bar/side-bar.component.mjs +0 -51
- package/esm2022/lib/user-autocomplete-card/user-autocomplete-card.component.mjs +0 -32
- package/esm2022/lib/user-info/user-info.component.mjs +0 -15
- package/lib/app-accordion/app-accordion.component.d.ts +0 -11
- package/lib/app-button/app-button.component.d.ts +0 -18
- package/lib/app-button/app-button.d.ts +0 -4
- package/lib/app-button/index.d.ts +0 -2
- package/lib/app-dropdown-menu/app-dropdown-menu.component.d.ts +0 -20
- package/lib/app-dropdown-menu/app-dropdown-menu.d.ts +0 -15
- package/lib/app-dropdown-menu/index.d.ts +0 -2
- package/lib/app-dropdown-menu/menu-popup.pipe.d.ts +0 -8
- package/lib/app-tabs/app-tab.interface.d.ts +0 -23
- package/lib/app-tabs/app-tabs.component.d.ts +0 -18
- package/lib/app-tabs/index.d.ts +0 -2
- package/lib/confirmation-dialog/confirmation-dialog.component.d.ts +0 -19
- package/lib/dynamic-form/dynamic-form.component.d.ts +0 -16
- package/lib/dynamic-form/dynamic-form.interface.d.ts +0 -44
- package/lib/form-components/@utils/form-utils.d.ts +0 -4
- package/lib/form-components/@utils/validations/error-keys.enum.d.ts +0 -24
- package/lib/form-components/@utils/validations/form-validation.service.d.ts +0 -11
- package/lib/form-components/@utils/validations/index.d.ts +0 -3
- package/lib/form-components/@utils/validations/validation-message.pipe.d.ts +0 -9
- package/lib/form-components/components/auto-complete/auto-complete.component.d.ts +0 -18
- package/lib/form-components/components/base-input.component.d.ts +0 -21
- package/lib/form-components/components/date-picker/date-picker.component.d.ts +0 -21
- package/lib/form-components/components/input/input.component.d.ts +0 -17
- package/lib/form-components/components/select/select.component.d.ts +0 -23
- package/lib/form-components/components/select-button/select-button.component.d.ts +0 -13
- package/lib/form-components/components/switcher/switch.component.d.ts +0 -11
- package/lib/form-components/index.d.ts +0 -9
- package/lib/form-components/interfaces/index.d.ts +0 -1
- package/lib/form-components/interfaces/label-value.d.ts +0 -4
- package/lib/ico-moon-icon/ico-moon-icon.component.d.ts +0 -9
- package/lib/read-more/read-more.component.d.ts +0 -10
- package/lib/side-bar/side-bar.component.d.ts +0 -18
- package/lib/user-autocomplete-card/user-autocomplete-card.component.d.ts +0 -12
- package/lib/user-info/user-info.component.d.ts +0 -7
|
@@ -16,7 +16,7 @@ import * as i2$1 from 'primeng/api';
|
|
|
16
16
|
import { PrimeTemplate } from 'primeng/api';
|
|
17
17
|
import { Drawer } from 'primeng/drawer';
|
|
18
18
|
import { AvatarModule } from 'primeng/avatar';
|
|
19
|
-
import { DialogService, DynamicDialogConfig, DynamicDialogRef,
|
|
19
|
+
import { DialogService, DynamicDialogConfig, DynamicDialogRef, DynamicDialogModule } from 'primeng/dynamicdialog';
|
|
20
20
|
import * as i1$4 from '@angular/forms';
|
|
21
21
|
import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
22
22
|
import { InputText } from 'primeng/inputtext';
|
|
@@ -24,8 +24,7 @@ import { Textarea } from 'primeng/textarea';
|
|
|
24
24
|
import { Select } from 'primeng/select';
|
|
25
25
|
import * as i2 from 'primeng/multiselect';
|
|
26
26
|
import { MultiSelectModule } from 'primeng/multiselect';
|
|
27
|
-
import { DatePicker } from 'primeng/datepicker';
|
|
28
|
-
import { CalendarModule } from 'primeng/calendar';
|
|
27
|
+
import { DatePicker, DatePickerModule } from 'primeng/datepicker';
|
|
29
28
|
import { AutoComplete } from 'primeng/autocomplete';
|
|
30
29
|
import * as i2$2 from 'primeng/selectbutton';
|
|
31
30
|
import { SelectButtonModule } from 'primeng/selectbutton';
|
|
@@ -36,16 +35,21 @@ import { AccordionModule } from 'primeng/accordion';
|
|
|
36
35
|
import { DividerModule } from 'primeng/divider';
|
|
37
36
|
|
|
38
37
|
class AppButtonComponent {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
38
|
+
title;
|
|
39
|
+
class;
|
|
40
|
+
icon;
|
|
41
|
+
size;
|
|
42
|
+
style;
|
|
43
|
+
iconPos;
|
|
44
|
+
variant;
|
|
45
|
+
disabled = false;
|
|
46
|
+
text = false;
|
|
47
|
+
rounded = false;
|
|
48
|
+
clickEmitter = new EventEmitter();
|
|
49
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: AppButtonComponent, isStandalone: true, selector: "app-button", inputs: { title: "title", class: "class", icon: "icon", size: "size", style: "style", iconPos: "iconPos", variant: "variant", disabled: "disabled", text: "text", rounded: "rounded" }, outputs: { clickEmitter: "clickEmitter" }, ngImport: i0, template: "<p-button\r\n (click)=\"clickEmitter.emit()\"\r\n [class]=\"class\"\r\n [disabled]=\"disabled\"\r\n [iconPos]=\"iconPos\"\r\n [icon]=\"icon\"\r\n [label]=\"title\"\r\n [rounded]=\"rounded\"\r\n [severity]=\"style\"\r\n [styleClass]=\"'w-full'\"\r\n [text]=\"text\"\r\n [variant]=\"variant\">\r\n</p-button>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
47
51
|
}
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
52
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppButtonComponent, decorators: [{
|
|
49
53
|
type: Component,
|
|
50
54
|
args: [{ imports: [RouterModule, ButtonModule, CommonModule], selector: 'app-button', standalone: true, encapsulation: ViewEncapsulation.None, template: "<p-button\r\n (click)=\"clickEmitter.emit()\"\r\n [class]=\"class\"\r\n [disabled]=\"disabled\"\r\n [iconPos]=\"iconPos\"\r\n [icon]=\"icon\"\r\n [label]=\"title\"\r\n [rounded]=\"rounded\"\r\n [severity]=\"style\"\r\n [styleClass]=\"'w-full'\"\r\n [text]=\"text\"\r\n [variant]=\"variant\">\r\n</p-button>\r\n" }]
|
|
51
55
|
}], propDecorators: { title: [{
|
|
@@ -73,22 +77,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
73
77
|
}] } });
|
|
74
78
|
|
|
75
79
|
class IcoMoonIconComponent {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
80
|
+
iconName;
|
|
81
|
+
iconClass;
|
|
82
|
+
iconPathCount = 0;
|
|
79
83
|
get getPathCount() {
|
|
80
84
|
return Array.from({ length: this.iconPathCount }, (_, i) => i + 1);
|
|
81
85
|
}
|
|
82
|
-
static
|
|
83
|
-
static
|
|
86
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IcoMoonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
87
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: IcoMoonIconComponent, isStandalone: true, selector: "app-ico-moon-card", inputs: { iconName: "iconName", iconClass: "iconClass", iconPathCount: "iconPathCount" }, ngImport: i0, template: `
|
|
84
88
|
<i [class]="iconName + ' ' + iconClass">
|
|
85
89
|
@for (path of getPathCount; track $index) {
|
|
86
90
|
<i [class]="iconName + ' path'+path"></i>
|
|
87
91
|
}
|
|
88
92
|
</i>
|
|
89
|
-
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
93
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
90
94
|
}
|
|
91
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IcoMoonIconComponent, decorators: [{
|
|
92
96
|
type: Component,
|
|
93
97
|
args: [{
|
|
94
98
|
selector: 'app-ico-moon-card',
|
|
@@ -112,12 +116,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
112
116
|
}] } });
|
|
113
117
|
|
|
114
118
|
class AppTabsComponent {
|
|
119
|
+
route;
|
|
120
|
+
router;
|
|
121
|
+
tabs;
|
|
122
|
+
tabsStyle = "basic";
|
|
123
|
+
responsive = false;
|
|
124
|
+
activeTabIndex = 0;
|
|
115
125
|
constructor(route, router) {
|
|
116
126
|
this.route = route;
|
|
117
127
|
this.router = router;
|
|
118
|
-
this.tabsStyle = "basic";
|
|
119
|
-
this.responsive = false;
|
|
120
|
-
this.activeTabIndex = 0;
|
|
121
128
|
}
|
|
122
129
|
ngOnInit() {
|
|
123
130
|
this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
|
|
@@ -142,12 +149,12 @@ class AppTabsComponent {
|
|
|
142
149
|
this.router.navigate([selectedTab.link], { relativeTo: this.route });
|
|
143
150
|
}
|
|
144
151
|
}
|
|
145
|
-
static
|
|
146
|
-
static
|
|
152
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppTabsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
153
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AppTabsComponent, isStandalone: true, selector: "app-tabs", inputs: { tabs: "tabs", tabsStyle: "tabsStyle", responsive: "responsive" }, ngImport: i0, template: "@if (tabs && tabs.items.length) {\r\n <div [class]=\"tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'\">\r\n <p-tabs [value]=\"activeTabIndex\" scrollable>\r\n <p-tablist>\r\n\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tab [value]=\"i\" [routerLink]=\"tabs.isRouted ? $any(tab).link : null\" [disabled]=\"tab.disabled\"\r\n (click)=\"onTabChange(i)\">\r\n @if (tab.iconName) {\r\n <app-ico-moon-card [iconClass]=\"'text-[17px]'\" [iconName]=\"tab.iconName\"\r\n [iconPathCount]=\"tab.iconPathCount || 0\"/>\r\n }\r\n <span>{{ tab.title | translate }} @if (tab.count) {\r\n <span>({{ tab.count }})</span>\r\n } </span>\r\n </p-tab>\r\n }\r\n\r\n </p-tablist>\r\n\r\n <p-tabpanels>\r\n @if (tabs.isRouted) {\r\n <router-outlet></router-outlet>\r\n } @else {\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tabpanel [value]=\"i\">\r\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n </p-tabpanel>\r\n }\r\n }\r\n\r\n </p-tabpanels>\r\n </p-tabs>\r\n </div>\r\n}\r\n", styles: [".tabs-container.full-width .p-tabs .p-tablist-tab-list .p-tab{@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$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i3.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i3.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i3.TabList, selector: "p-tablist" }, { kind: "component", type: i3.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "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: "pipe", type: i1$3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
147
154
|
}
|
|
148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppTabsComponent, decorators: [{
|
|
149
156
|
type: Component,
|
|
150
|
-
args: [{ selector: "app-tabs", standalone: true, encapsulation: ViewEncapsulation.None, imports: [CommonModule, TabsModule, RouterLink, RouterOutlet, IcoMoonIconComponent, TranslateModule], template: "@if (tabs && tabs.items.length) {\r\n <div [class]=\"tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'\">\r\n <p-tabs [value]=\"activeTabIndex\" scrollable>\r\n <p-tablist>\r\n\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tab [value]=\"i\" [routerLink]=\"tabs.isRouted ? $any(tab).link : null\" [disabled]=\"tab.disabled\"\r\n (click)=\"onTabChange(i)\">\r\n @if (tab.iconName) {\r\n <app-ico-moon-card [iconClass]=\"'text-[17px]'\" [iconName]=\"tab.iconName\"\r\n [iconPathCount]=\"tab.iconPathCount || 0\"/>\r\n }\r\n <span>{{ tab.title | translate }} @if (tab.count) {\r\n <span>({{ tab.count }})</span>\r\n } </span>\r\n </p-tab>\r\n }\r\n\r\n </p-tablist>\r\n\r\n <p-tabpanels>\r\n @if (tabs.isRouted) {\r\n <router-outlet></router-outlet>\r\n } @else {\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tabpanel [value]=\"i\">\r\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n </p-tabpanel>\r\n }\r\n }\r\n\r\n </p-tabpanels>\r\n </p-tabs>\r\n </div>\r\n}\r\n", styles: [".tabs-container.full-width .p-tabs .p-tablist-tab-list .p-tab{
|
|
157
|
+
args: [{ selector: "app-tabs", standalone: true, encapsulation: ViewEncapsulation.None, imports: [CommonModule, TabsModule, RouterLink, RouterOutlet, IcoMoonIconComponent, TranslateModule], template: "@if (tabs && tabs.items.length) {\r\n <div [class]=\"tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'\">\r\n <p-tabs [value]=\"activeTabIndex\" scrollable>\r\n <p-tablist>\r\n\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tab [value]=\"i\" [routerLink]=\"tabs.isRouted ? $any(tab).link : null\" [disabled]=\"tab.disabled\"\r\n (click)=\"onTabChange(i)\">\r\n @if (tab.iconName) {\r\n <app-ico-moon-card [iconClass]=\"'text-[17px]'\" [iconName]=\"tab.iconName\"\r\n [iconPathCount]=\"tab.iconPathCount || 0\"/>\r\n }\r\n <span>{{ tab.title | translate }} @if (tab.count) {\r\n <span>({{ tab.count }})</span>\r\n } </span>\r\n </p-tab>\r\n }\r\n\r\n </p-tablist>\r\n\r\n <p-tabpanels>\r\n @if (tabs.isRouted) {\r\n <router-outlet></router-outlet>\r\n } @else {\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tabpanel [value]=\"i\">\r\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n </p-tabpanel>\r\n }\r\n }\r\n\r\n </p-tabpanels>\r\n </p-tabs>\r\n </div>\r\n}\r\n", styles: [".tabs-container.full-width .p-tabs .p-tablist-tab-list .p-tab{@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"] }]
|
|
151
158
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }], propDecorators: { tabs: [{
|
|
152
159
|
type: Input
|
|
153
160
|
}], tabsStyle: [{
|
|
@@ -165,10 +172,10 @@ class MenuPopupTextColorPipe {
|
|
|
165
172
|
default: return 'text-white';
|
|
166
173
|
}
|
|
167
174
|
}
|
|
168
|
-
static
|
|
169
|
-
static
|
|
175
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MenuPopupTextColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
176
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: MenuPopupTextColorPipe, isStandalone: true, name: "popupTextColorClass" });
|
|
170
177
|
}
|
|
171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MenuPopupTextColorPipe, decorators: [{
|
|
172
179
|
type: Pipe,
|
|
173
180
|
args: [{
|
|
174
181
|
name: 'popupTextColorClass',
|
|
@@ -178,13 +185,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
178
185
|
}] });
|
|
179
186
|
|
|
180
187
|
class AppDropdownMenuComponent {
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
+
buttonTitle;
|
|
189
|
+
menuItems = [];
|
|
190
|
+
popupMenuStyle = "purple";
|
|
191
|
+
buttonIcon = "font-icon-plus";
|
|
192
|
+
buttonClass;
|
|
193
|
+
buttonStyle;
|
|
194
|
+
buttonIconPosition = "left";
|
|
195
|
+
router = inject(Router);
|
|
196
|
+
showMenu;
|
|
188
197
|
ngOnInit() {
|
|
189
198
|
this.showMenu = this.menuItems.some((item) => {
|
|
190
199
|
return item.show;
|
|
@@ -198,12 +207,12 @@ class AppDropdownMenuComponent {
|
|
|
198
207
|
this.router.navigate(Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink], { queryParams: item.queryParams || {} });
|
|
199
208
|
}
|
|
200
209
|
}
|
|
201
|
-
static
|
|
202
|
-
static
|
|
210
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
211
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AppDropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { buttonTitle: "buttonTitle", menuItems: "menuItems", popupMenuStyle: "popupMenuStyle", buttonIcon: "buttonIcon", buttonClass: "buttonClass", buttonStyle: "buttonStyle", buttonIconPosition: "buttonIconPosition" }, ngImport: i0, template: "@if (showMenu) {\r\n <app-button (click)=\"op.toggle($event)\" [class]=\"buttonClass\"\r\n [iconPos]=\"buttonIconPosition\"\r\n [icon]=\"buttonIcon\" [title]=\"buttonTitle\"\r\n [style]=\"buttonStyle\"/>\r\n}\r\n<p-popover #op [styleClass]=\"popupMenuStyle === 'white' ? 'white-menu' : 'purple-menu'\">\r\n <div class=\"flex flex-col gap-4 text-sm md:text-xs\">\r\n <ul>\r\n @for (item of menuItems; track $index) {\r\n @if (item.show) {\r\n <li\r\n [ngClass]=\"{'flex-row-reverse': item.iconPosition === 'right'}\"\r\n [class]=\"'flex justify-between min-w-[130px] gap-3 items-center cursor-pointer text-sm ' + (item.textColor | popupTextColorClass)\"\r\n (click)=\"onMenuItemClick(item)\">\r\n {{ item.title | translate }}\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</p-popover>\r\n", styles: [".p-popover.p-component{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover.p-component:is(.purple-menu){@apply bg-primary text-white text-sm mt-2;}.p-popover.p-component:is(.purple-menu) li:not(:last-child){@apply border-b-2 border-purple-700;}.p-popover.p-component:is(.white-menu) li:not(:last-child){@apply border-b;}.p-popover.p-component:before,.p-popover.p-component:after{display:none}.p-popover.p-component .p-popover-content{width:auto;min-width:unset}.p-popover.p-component .p-popover-content ul li{@apply py-3;}.p-popover.p-component .p-popover-content ul li:hover{opacity:.7}.p-popover.p-component .p-popover-content ul li:first-child{@apply pt-0;}.p-popover.p-component .p-popover-content ul li:last-child{@apply pb-0;}\n"], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["title", "class", "icon", "size", "style", "iconPos", "variant", "disabled", "text", "rounded"], outputs: ["clickEmitter"] }, { 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$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: MenuPopupTextColorPipe, name: "popupTextColorClass" }], encapsulation: i0.ViewEncapsulation.None });
|
|
203
212
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppDropdownMenuComponent, decorators: [{
|
|
205
214
|
type: Component,
|
|
206
|
-
args: [{ selector: "app-dropdown-menu", standalone: true, imports: [AppButtonComponent, Popover, TranslateModule, NgClass, MenuPopupTextColorPipe], encapsulation: ViewEncapsulation.None, template: "@if (showMenu) {\r\n <app-button (click)=\"op.toggle($event)\" [class]=\"buttonClass\"\r\n [iconPos]=\"buttonIconPosition\"\r\n [icon]=\"buttonIcon\" [title]=\"buttonTitle\"\r\n [style]=\"buttonStyle\"/>\r\n}\r\n<p-popover #op [styleClass]=\"popupMenuStyle === 'white' ? 'white-menu' : 'purple-menu'\">\r\n <div class=\"flex flex-col gap-4 text-sm md:text-xs\">\r\n <ul>\r\n @for (item of menuItems; track $index) {\r\n @if (item.show) {\r\n <li\r\n [ngClass]=\"{'flex-row-reverse': item.iconPosition === 'right'}\"\r\n [class]=\"'flex justify-between min-w-[130px] gap-3 items-center cursor-pointer text-sm ' + (item.textColor | popupTextColorClass)\"\r\n (click)=\"onMenuItemClick(item)\">\r\n {{ item.title | translate }}\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</p-popover>\r\n", styles: [".p-popover.p-component{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover.p-component:is(.purple-menu){
|
|
215
|
+
args: [{ selector: "app-dropdown-menu", standalone: true, imports: [AppButtonComponent, Popover, TranslateModule, NgClass, MenuPopupTextColorPipe], encapsulation: ViewEncapsulation.None, template: "@if (showMenu) {\r\n <app-button (click)=\"op.toggle($event)\" [class]=\"buttonClass\"\r\n [iconPos]=\"buttonIconPosition\"\r\n [icon]=\"buttonIcon\" [title]=\"buttonTitle\"\r\n [style]=\"buttonStyle\"/>\r\n}\r\n<p-popover #op [styleClass]=\"popupMenuStyle === 'white' ? 'white-menu' : 'purple-menu'\">\r\n <div class=\"flex flex-col gap-4 text-sm md:text-xs\">\r\n <ul>\r\n @for (item of menuItems; track $index) {\r\n @if (item.show) {\r\n <li\r\n [ngClass]=\"{'flex-row-reverse': item.iconPosition === 'right'}\"\r\n [class]=\"'flex justify-between min-w-[130px] gap-3 items-center cursor-pointer text-sm ' + (item.textColor | popupTextColorClass)\"\r\n (click)=\"onMenuItemClick(item)\">\r\n {{ item.title | translate }}\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</p-popover>\r\n", styles: [".p-popover.p-component{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover.p-component:is(.purple-menu){@apply bg-primary text-white text-sm mt-2;}.p-popover.p-component:is(.purple-menu) li:not(:last-child){@apply border-b-2 border-purple-700;}.p-popover.p-component:is(.white-menu) li:not(:last-child){@apply border-b;}.p-popover.p-component:before,.p-popover.p-component:after{display:none}.p-popover.p-component .p-popover-content{width:auto;min-width:unset}.p-popover.p-component .p-popover-content ul li{@apply py-3;}.p-popover.p-component .p-popover-content ul li:hover{opacity:.7}.p-popover.p-component .p-popover-content ul li:first-child{@apply pt-0;}.p-popover.p-component .p-popover-content ul li:last-child{@apply pb-0;}\n"] }]
|
|
207
216
|
}], propDecorators: { buttonTitle: [{
|
|
208
217
|
type: Input,
|
|
209
218
|
args: [{ required: true }]
|
|
@@ -223,27 +232,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
223
232
|
}] } });
|
|
224
233
|
|
|
225
234
|
class SideBarComponent {
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
235
|
+
show = false;
|
|
236
|
+
title;
|
|
237
|
+
closable = false;
|
|
238
|
+
dismissible = false;
|
|
239
|
+
closeOnEscape = false;
|
|
240
|
+
sidebarSize = "sm";
|
|
241
|
+
styleClass = "";
|
|
242
|
+
hide = new EventEmitter();
|
|
243
|
+
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
244
|
+
onShow = new EventEmitter();
|
|
245
|
+
contentTemplate;
|
|
246
|
+
footerTemplate;
|
|
237
247
|
hideSidebar() {
|
|
238
248
|
this.show = false;
|
|
239
249
|
this.hide.emit(false);
|
|
240
250
|
}
|
|
241
|
-
static
|
|
242
|
-
static
|
|
251
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
252
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SideBarComponent, isStandalone: true, selector: "app-side-bar", inputs: { show: "show", title: "title", closable: "closable", dismissible: "dismissible", closeOnEscape: "closeOnEscape", sidebarSize: "sidebarSize", styleClass: "styleClass", contentTemplate: "contentTemplate", footerTemplate: "footerTemplate" }, outputs: { hide: "hide", onShow: "onShow" }, ngImport: i0, template: "<!-- TODO refactor position sidebar based on html dir-->\r\n<p-drawer\r\n (onHide)=\"hideSidebar()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'left'\"\r\n appendTo=\"body\"\r\n styleClass=\"p-drawer-{{ sidebarSize }} custom-content bg-white {{ styleClass }}\">\r\n <ng-template pTemplate=\"header\">{{ title }}</ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n <ng-template pTemplate=\"content\">\r\n <ng-content id=\"side-content\"></ng-content>\r\n </ng-template>\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}\n"], dependencies: [{ kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
243
253
|
}
|
|
244
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SideBarComponent, decorators: [{
|
|
245
255
|
type: Component,
|
|
246
|
-
args: [{ selector: "app-side-bar", standalone: true, imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<!-- TODO refactor position sidebar based on html dir-->\r\n<p-drawer\r\n (onHide)=\"hideSidebar()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'left'\"\r\n appendTo=\"body\"\r\n styleClass=\"p-drawer-{{ sidebarSize }} custom-content bg-white {{ styleClass }}\">\r\n <ng-template pTemplate=\"header\">{{ title }}</ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n <ng-template pTemplate=\"content\">\r\n <ng-content id=\"side-content\"></ng-content>\r\n </ng-template>\r\n</p-drawer>\r\n", styles: [".sidebar.show{min-
|
|
256
|
+
args: [{ selector: "app-side-bar", standalone: true, imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<!-- TODO refactor position sidebar based on html dir-->\r\n<p-drawer\r\n (onHide)=\"hideSidebar()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'left'\"\r\n appendTo=\"body\"\r\n styleClass=\"p-drawer-{{ sidebarSize }} custom-content bg-white {{ styleClass }}\">\r\n <ng-template pTemplate=\"header\">{{ title }}</ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n <ng-template pTemplate=\"content\">\r\n <ng-content id=\"side-content\"></ng-content>\r\n </ng-template>\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}\n"] }]
|
|
247
257
|
}], propDecorators: { show: [{
|
|
248
258
|
type: Input
|
|
249
259
|
}], title: [{
|
|
@@ -269,10 +279,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
269
279
|
}] } });
|
|
270
280
|
|
|
271
281
|
class UserInfoComponent {
|
|
272
|
-
|
|
273
|
-
|
|
282
|
+
profileImage;
|
|
283
|
+
name;
|
|
284
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
285
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: UserInfoComponent, isStandalone: true, selector: "user-info", inputs: { profileImage: "profileImage", name: "name" }, ngImport: i0, template: "<div class=\"flex items-center gap-2\">\r\n <img\r\n [alt]=\"name\"\r\n [src]=\"profileImage\"\r\n class=\"rounded-full object-cover w-[24px] h-[24px]\"\r\n height=\"24\"\r\n width=\"24\"\r\n />\r\n <p class=\"text-[14px]\">{{ name }}</p>\r\n</div>\r\n" });
|
|
274
286
|
}
|
|
275
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserInfoComponent, decorators: [{
|
|
276
288
|
type: Component,
|
|
277
289
|
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" }]
|
|
278
290
|
}], propDecorators: { profileImage: [{
|
|
@@ -315,9 +327,7 @@ var ErrorsWithValuesKeysEnum;
|
|
|
315
327
|
})(ErrorsWithValuesKeysEnum || (ErrorsWithValuesKeysEnum = {}));
|
|
316
328
|
|
|
317
329
|
class FormValidationService {
|
|
318
|
-
|
|
319
|
-
this.translate = inject(TranslateService);
|
|
320
|
-
}
|
|
330
|
+
translate = inject(TranslateService);
|
|
321
331
|
getTranslation(key, interpolateParams) {
|
|
322
332
|
return this.translate.instant(`VALIDATION.${key}`, interpolateParams);
|
|
323
333
|
}
|
|
@@ -340,30 +350,34 @@ class FormValidationService {
|
|
|
340
350
|
}
|
|
341
351
|
getErrorWithValueMessage(errorKey, errorValue) {
|
|
342
352
|
const messages = {
|
|
343
|
-
minlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.minlength, {
|
|
344
|
-
|
|
353
|
+
minlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.minlength, {
|
|
354
|
+
requiredLength: val?.requiredLength,
|
|
355
|
+
actualLength: val?.actualLength,
|
|
356
|
+
}),
|
|
357
|
+
maxlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxlength, {
|
|
358
|
+
requiredLength: val?.requiredLength,
|
|
359
|
+
actualLength: val?.actualLength,
|
|
360
|
+
}),
|
|
345
361
|
min: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.min, { min: val?.min }),
|
|
346
362
|
max: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.max, { max: val?.max }),
|
|
347
363
|
maxSize: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxSize, { size: val?.requiredLength }),
|
|
348
364
|
maxFiles: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxFiles, { size: val?.requiredLength }),
|
|
349
|
-
allowedTypes: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.allowedTypes, { types: val?.join(
|
|
365
|
+
allowedTypes: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.allowedTypes, { types: val?.join(', ') }),
|
|
350
366
|
};
|
|
351
367
|
return messages[errorKey](errorValue);
|
|
352
368
|
}
|
|
353
|
-
static
|
|
354
|
-
static
|
|
369
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
370
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormValidationService, providedIn: 'root' });
|
|
355
371
|
}
|
|
356
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
372
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormValidationService, decorators: [{
|
|
357
373
|
type: Injectable,
|
|
358
374
|
args: [{
|
|
359
|
-
providedIn:
|
|
375
|
+
providedIn: 'root',
|
|
360
376
|
}]
|
|
361
377
|
}] });
|
|
362
378
|
|
|
363
379
|
class ValidationErrorsPipe {
|
|
364
|
-
|
|
365
|
-
this.formValidationService = inject(FormValidationService);
|
|
366
|
-
}
|
|
380
|
+
formValidationService = inject(FormValidationService);
|
|
367
381
|
// allowed keys here to handle errors in case of cross-validators like startDate and endDate validators,
|
|
368
382
|
// we pass this custom key to handle the error messages only for the allowed keys
|
|
369
383
|
transform(errors, allowedKeys) {
|
|
@@ -375,10 +389,10 @@ class ValidationErrorsPipe {
|
|
|
375
389
|
return this.formValidationService.getErrorMessage(errorKey, errors[errorKey]);
|
|
376
390
|
});
|
|
377
391
|
}
|
|
378
|
-
static
|
|
379
|
-
static
|
|
392
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ValidationErrorsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
393
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: ValidationErrorsPipe, isStandalone: true, name: "validationErrors" });
|
|
380
394
|
}
|
|
381
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ValidationErrorsPipe, decorators: [{
|
|
382
396
|
type: Pipe,
|
|
383
397
|
args: [{
|
|
384
398
|
name: "validationErrors",
|
|
@@ -388,13 +402,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
388
402
|
}] });
|
|
389
403
|
|
|
390
404
|
class BaseInputComponent {
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
405
|
+
control;
|
|
406
|
+
name = "";
|
|
407
|
+
label;
|
|
408
|
+
placeholder = "";
|
|
409
|
+
inputId;
|
|
410
|
+
readonly = false;
|
|
411
|
+
disabled = false;
|
|
412
|
+
hint;
|
|
413
|
+
destroy$ = new Subject();
|
|
398
414
|
get required() {
|
|
399
415
|
return this.control.hasValidator(Validators.required);
|
|
400
416
|
}
|
|
@@ -413,10 +429,10 @@ class BaseInputComponent {
|
|
|
413
429
|
this.destroy$.next();
|
|
414
430
|
this.destroy$.complete();
|
|
415
431
|
}
|
|
416
|
-
static
|
|
417
|
-
static
|
|
432
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
433
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { control: "control", name: "name", label: "label", placeholder: "placeholder", inputId: "inputId", readonly: "readonly", disabled: "disabled", hint: "hint" }, ngImport: i0, template: "", isInline: true });
|
|
418
434
|
}
|
|
419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BaseInputComponent, decorators: [{
|
|
420
436
|
type: Component,
|
|
421
437
|
args: [{
|
|
422
438
|
template: ""
|
|
@@ -441,21 +457,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
441
457
|
}] } });
|
|
442
458
|
|
|
443
459
|
class InputComponent extends BaseInputComponent {
|
|
460
|
+
type = "text";
|
|
461
|
+
contentType = "text";
|
|
462
|
+
prefix;
|
|
463
|
+
rows = 2;
|
|
464
|
+
cols = 20;
|
|
465
|
+
autoResize = true;
|
|
466
|
+
basicInput;
|
|
467
|
+
noStyle;
|
|
468
|
+
hideOptionalLabel;
|
|
469
|
+
inputDirection = "inherit";
|
|
444
470
|
constructor() {
|
|
445
471
|
super();
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
this.cols = 20;
|
|
450
|
-
this.autoResize = true;
|
|
451
|
-
this.inputDirection = "inherit";
|
|
452
|
-
}
|
|
453
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
454
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n @if (!required && !hideOptionalLabel) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @if (type !== 'textarea') {\r\n <input\r\n [id]=\"inputId\"\r\n [type]=\"contentType\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n [name]=\"name\"\r\n pInputText\r\n [ngStyle]=\"{'direction': inputDirection || 'inherit', 'text-align': 'right'}\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\"\r\n />\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n } @else {\r\n <textarea\r\n [name]=\"name\"\r\n [id]=\"inputId\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n pTextarea\r\n [rows]=\"rows\"\r\n [cols]=\"cols\"\r\n [autoResize]=\"autoResize\"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\"\r\n ></textarea>\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: ["textarea{height:auto;min-height:50px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
472
|
+
}
|
|
473
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
474
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n @if (!required && !hideOptionalLabel) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @if (type !== 'textarea') {\r\n <input\r\n [id]=\"inputId\"\r\n [type]=\"contentType\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n [name]=\"name\"\r\n pInputText\r\n [ngStyle]=\"{'direction': inputDirection || 'inherit', 'text-align': 'right'}\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\"\r\n />\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n } @else {\r\n <textarea\r\n [name]=\"name\"\r\n [id]=\"inputId\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n pTextarea\r\n [rows]=\"rows\"\r\n [cols]=\"cols\"\r\n [autoResize]=\"autoResize\"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\"\r\n ></textarea>\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["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: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
455
475
|
}
|
|
456
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputComponent, decorators: [{
|
|
457
477
|
type: Component,
|
|
458
|
-
args: [{ selector: "stc-input", standalone: true, imports: [ReactiveFormsModule, InputText, Textarea, ValidationErrorsPipe, NgClass, NgStyle, TranslatePipe], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n @if (!required && !hideOptionalLabel) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @if (type !== 'textarea') {\r\n <input\r\n [id]=\"inputId\"\r\n [type]=\"contentType\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n [name]=\"name\"\r\n pInputText\r\n [ngStyle]=\"{'direction': inputDirection || 'inherit', 'text-align': 'right'}\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\"\r\n />\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n } @else {\r\n <textarea\r\n [name]=\"name\"\r\n [id]=\"inputId\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n pTextarea\r\n [rows]=\"rows\"\r\n [cols]=\"cols\"\r\n [autoResize]=\"autoResize\"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\"\r\n ></textarea>\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: ["textarea{
|
|
478
|
+
args: [{ selector: "stc-input", standalone: true, imports: [ReactiveFormsModule, InputText, Textarea, ValidationErrorsPipe, NgClass, NgStyle, TranslatePipe], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n @if (!required && !hideOptionalLabel) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @if (type !== 'textarea') {\r\n <input\r\n [id]=\"inputId\"\r\n [type]=\"contentType\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n [name]=\"name\"\r\n pInputText\r\n [ngStyle]=\"{'direction': inputDirection || 'inherit', 'text-align': 'right'}\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\"\r\n />\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n } @else {\r\n <textarea\r\n [name]=\"name\"\r\n [id]=\"inputId\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n pTextarea\r\n [rows]=\"rows\"\r\n [cols]=\"cols\"\r\n [autoResize]=\"autoResize\"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\"\r\n ></textarea>\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}\n"] }]
|
|
459
479
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
460
480
|
type: Input
|
|
461
481
|
}], contentType: [{
|
|
@@ -479,25 +499,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
479
499
|
}] } });
|
|
480
500
|
|
|
481
501
|
class SelectComponent extends BaseInputComponent {
|
|
502
|
+
selectedItemTemplate = null;
|
|
503
|
+
optionTemplate = null;
|
|
504
|
+
options;
|
|
505
|
+
optionLabel;
|
|
506
|
+
checkmark = true;
|
|
507
|
+
showClear = false;
|
|
508
|
+
editable = false;
|
|
509
|
+
filter = false;
|
|
510
|
+
multiple = false;
|
|
511
|
+
filterBy;
|
|
512
|
+
selectedItemsLabel;
|
|
513
|
+
basicInput;
|
|
514
|
+
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
515
|
+
change = new EventEmitter();
|
|
482
516
|
constructor() {
|
|
483
517
|
super();
|
|
484
|
-
this.selectedItemTemplate = null;
|
|
485
|
-
this.optionTemplate = null;
|
|
486
|
-
this.checkmark = true;
|
|
487
|
-
this.showClear = false;
|
|
488
|
-
this.editable = false;
|
|
489
|
-
this.filter = false;
|
|
490
|
-
this.multiple = false;
|
|
491
|
-
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
492
|
-
this.change = new EventEmitter();
|
|
493
518
|
}
|
|
494
519
|
onChange(e) {
|
|
495
520
|
this.change.emit(e);
|
|
496
521
|
}
|
|
497
|
-
static
|
|
498
|
-
static
|
|
522
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
523
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SelectComponent, isStandalone: true, selector: "stc-select", inputs: { selectedItemTemplate: "selectedItemTemplate", optionTemplate: "optionTemplate", options: "options", optionLabel: "optionLabel", checkmark: "checkmark", showClear: "showClear", editable: "editable", filter: "filter", multiple: "multiple", filterBy: "filterBy", selectedItemsLabel: "selectedItemsLabel", basicInput: "basicInput" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n } @if (!required) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n\r\n @if(multiple) {\r\n\r\n\r\n <p-multiselect\r\n [disabled]=\"disabled\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n class=\"w-full\"\r\n [selectedItemsLabel]=\"selectedItemsLabel\"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n\r\n @if(optionTemplate){\r\n <ng-template let-item #item>\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n\r\n\r\n <ng-template #dropdownicon>\r\n <i class=\"pi pi-map\"></i>\r\n </ng-template>\r\n\r\n\r\n </p-multiselect>\r\n\r\n } @else {\r\n <p-select\r\n [checkmark]=\"checkmark\"\r\n [disabled]=\"disabled\"\r\n [editable]=\"editable\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n class=\"w-full\"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n\r\n @if (selectedItemTemplate) {\r\n <ng-template let-item pTemplate=\"item\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n </ng-template>\r\n }\r\n </p-select>\r\n}\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n } @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br />\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "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.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: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
499
524
|
}
|
|
500
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
525
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectComponent, decorators: [{
|
|
501
526
|
type: Component,
|
|
502
527
|
args: [{ selector: "stc-select", standalone: true, imports: [
|
|
503
528
|
FormsModule,
|
|
@@ -539,15 +564,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
539
564
|
}] } });
|
|
540
565
|
|
|
541
566
|
class DatePickerComponent extends BaseInputComponent {
|
|
567
|
+
showIcon = false;
|
|
568
|
+
showClear = false;
|
|
569
|
+
basicInput;
|
|
570
|
+
isTimeOnly = false;
|
|
571
|
+
minDate;
|
|
572
|
+
maxDate;
|
|
573
|
+
hourFormat = '12';
|
|
574
|
+
nowTime = new Date();
|
|
575
|
+
selectionMode = 'single';
|
|
576
|
+
onAfterClearDate = new EventEmitter();
|
|
542
577
|
constructor() {
|
|
543
578
|
super();
|
|
544
|
-
this.showIcon = false;
|
|
545
|
-
this.showClear = false;
|
|
546
|
-
this.isTimeOnly = false;
|
|
547
|
-
this.hourFormat = "12";
|
|
548
|
-
this.nowTime = new Date();
|
|
549
|
-
this.selectionMode = "single";
|
|
550
|
-
this.onAfterClearDate = new EventEmitter();
|
|
551
579
|
}
|
|
552
580
|
selectCurrentTime(e) {
|
|
553
581
|
this.control.setValue(this.nowTime);
|
|
@@ -559,12 +587,20 @@ class DatePickerComponent extends BaseInputComponent {
|
|
|
559
587
|
this.control.reset();
|
|
560
588
|
this.onAfterClearDate.emit();
|
|
561
589
|
}
|
|
562
|
-
static
|
|
563
|
-
static
|
|
590
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
591
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", hourFormat: "hourFormat", selectionMode: "selectionMode" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\" >\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n @if (!required) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n <p-datepicker\r\n [selectionMode]=\"selectionMode\"\r\n [disabled]=\"disabled\"\r\n [formControl]=\"control\"\r\n [iconDisplay]=\"'input'\"\r\n [showClear]=\"showClear\"\r\n (onClear)=\"afterClearDate()\"\r\n [id]=\"inputId\"\r\n [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [placeholder]=\"placeholder\"\r\n [showIcon]=\"showIcon\" [styleClass]=\"'w-full'\"\r\n appendTo=\"body\"\r\n [timeOnly]=\"isTimeOnly\"\r\n [hourFormat]=\"hourFormat\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: [".p-datepicker-clear-icon{@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;}\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: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
564
592
|
}
|
|
565
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
566
594
|
type: Component,
|
|
567
|
-
args: [{ selector:
|
|
595
|
+
args: [{ selector: 'stc-date-picker', standalone: true, imports: [
|
|
596
|
+
FormsModule,
|
|
597
|
+
DatePicker,
|
|
598
|
+
ReactiveFormsModule,
|
|
599
|
+
NgClass,
|
|
600
|
+
DatePickerModule,
|
|
601
|
+
ValidationErrorsPipe,
|
|
602
|
+
TranslatePipe,
|
|
603
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\" >\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n @if (!required) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n <p-datepicker\r\n [selectionMode]=\"selectionMode\"\r\n [disabled]=\"disabled\"\r\n [formControl]=\"control\"\r\n [iconDisplay]=\"'input'\"\r\n [showClear]=\"showClear\"\r\n (onClear)=\"afterClearDate()\"\r\n [id]=\"inputId\"\r\n [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [placeholder]=\"placeholder\"\r\n [showIcon]=\"showIcon\" [styleClass]=\"'w-full'\"\r\n appendTo=\"body\"\r\n [timeOnly]=\"isTimeOnly\"\r\n [hourFormat]=\"hourFormat\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: [".p-datepicker-clear-icon{@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;}\n"] }]
|
|
568
604
|
}], ctorParameters: () => [], propDecorators: { showIcon: [{
|
|
569
605
|
type: Input
|
|
570
606
|
}], showClear: [{
|
|
@@ -586,15 +622,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
586
622
|
}] } });
|
|
587
623
|
|
|
588
624
|
class AutoCompleteComponent extends BaseInputComponent {
|
|
625
|
+
selectedItemTemplate = null;
|
|
626
|
+
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
627
|
+
onSearch = new EventEmitter();
|
|
628
|
+
selectOption = new EventEmitter();
|
|
629
|
+
items = [];
|
|
630
|
+
minLengthToSearch = 3;
|
|
631
|
+
delay = 300; // default value
|
|
632
|
+
basicInput;
|
|
589
633
|
constructor() {
|
|
590
634
|
super();
|
|
591
|
-
this.selectedItemTemplate = null;
|
|
592
|
-
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
593
|
-
this.onSearch = new EventEmitter();
|
|
594
|
-
this.selectOption = new EventEmitter();
|
|
595
|
-
this.items = [];
|
|
596
|
-
this.minLengthToSearch = 3;
|
|
597
|
-
this.delay = 300; // default value
|
|
598
635
|
}
|
|
599
636
|
search(event) {
|
|
600
637
|
this.onSearch.emit(event.query);
|
|
@@ -602,10 +639,10 @@ class AutoCompleteComponent extends BaseInputComponent {
|
|
|
602
639
|
onSelect(event) {
|
|
603
640
|
this.selectOption.emit(event);
|
|
604
641
|
}
|
|
605
|
-
static
|
|
606
|
-
static
|
|
642
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
643
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AutoCompleteComponent, isStandalone: true, selector: "stc-auto-complete", inputs: { selectedItemTemplate: "selectedItemTemplate", items: "items", minLengthToSearch: "minLengthToSearch", delay: "delay", basicInput: "basicInput" }, outputs: { onSearch: "onSearch", selectOption: "selectOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n @if (!required) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n <p-auto-complete\r\n (completeMethod)=\"search($event)\"\r\n (onSelect)=\"onSelect($event)\"\r\n [delay]=\"delay\"\r\n [disabled]=\"disabled\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n [minLength]=\"minLengthToSearch\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n [placeholder]=\"placeholder\"\r\n [styleClass]=\"'w-full'\"\r\n [suggestions]=\"items\">\r\n <ng-template let-item pTemplate=\"item\">\r\n @if (selectedItemTemplate) {\r\n <ng-container\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n />\r\n }\r\n </ng-template>\r\n </p-auto-complete>\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
607
644
|
}
|
|
608
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
645
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutoCompleteComponent, decorators: [{
|
|
609
646
|
type: Component,
|
|
610
647
|
args: [{ selector: "stc-auto-complete", standalone: true, imports: [
|
|
611
648
|
ReactiveFormsModule,
|
|
@@ -635,17 +672,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
635
672
|
}] } });
|
|
636
673
|
|
|
637
674
|
class SelectButtonComponent extends BaseInputComponent {
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
}
|
|
675
|
+
onChange = new EventEmitter();
|
|
676
|
+
options;
|
|
677
|
+
title;
|
|
642
678
|
changeValue(e) {
|
|
643
679
|
this.onChange.emit(e.value);
|
|
644
680
|
}
|
|
645
|
-
static
|
|
646
|
-
static
|
|
681
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
682
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SelectButtonComponent, isStandalone: true, selector: "stc-select-button", inputs: { options: "options", title: "title" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-0 items-end\">\r\n <div class=\"col-span-12\">\r\n <div class=\"text-[14px] font-bold mb-1\">{{ title }}</div>\r\n <div class=\"grid w-100 bg-gray-100 rounded drop-shadow-basic\">\r\n <p-selectButton [disabled]=\"disabled\"\r\n [options]=\"options\"\r\n [formControl]=\"control\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n class=\"rounded\"\r\n [styleClass]=\"'full-width'\"\r\n (onChange)=\"changeValue($event)\">\r\n <ng-template let-item class=\"flex w-100\">\r\n <div class=\"col-span-4\">\r\n <span>{{ item.value }}</span>\r\n </div>\r\n </ng-template>\r\n </p-selectButton>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
647
683
|
}
|
|
648
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
684
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectButtonComponent, decorators: [{
|
|
649
685
|
type: Component,
|
|
650
686
|
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" }]
|
|
651
687
|
}], propDecorators: { onChange: [{
|
|
@@ -657,20 +693,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
657
693
|
}] } });
|
|
658
694
|
|
|
659
695
|
class SwitchComponent {
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
696
|
+
label;
|
|
697
|
+
key;
|
|
698
|
+
checked = false;
|
|
699
|
+
onChange = new EventEmitter();
|
|
664
700
|
// checked: boolean = false;
|
|
665
701
|
sendUpdatedValue(value) {
|
|
666
702
|
if (value) {
|
|
667
703
|
this.onChange.emit(value.checked);
|
|
668
704
|
}
|
|
669
705
|
}
|
|
670
|
-
static
|
|
671
|
-
static
|
|
706
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
707
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SwitchComponent, isStandalone: true, selector: "stc-switch", inputs: { label: "label", key: "key", checked: "checked" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"flex items-center mr-2\">\r\n <p-toggleswitch [(ngModel)]=\"checked\" [inputId]=\"key\" (onChange)=\"sendUpdatedValue($event)\" class=\"flex\">\r\n </p-toggleswitch>\r\n <label [for]=\"key\" class=\"text-[12px] mx-2\">{{label}}</label>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i1$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
672
708
|
}
|
|
673
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
709
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
674
710
|
type: Component,
|
|
675
711
|
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>" }]
|
|
676
712
|
}], propDecorators: { label: [{
|
|
@@ -695,20 +731,21 @@ class FormUtils {
|
|
|
695
731
|
}
|
|
696
732
|
|
|
697
733
|
class DynamicFormComponent {
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
734
|
+
dynamicFormData;
|
|
735
|
+
inputsNames = [];
|
|
736
|
+
formGroup;
|
|
737
|
+
inputsMap;
|
|
738
|
+
fieldType = FormFieldTypeEnum;
|
|
739
|
+
getFormControl = FormUtils.getFormControl;
|
|
703
740
|
ngOnInit() {
|
|
704
741
|
this.formGroup = this.dynamicFormData?.formGroup;
|
|
705
742
|
this.inputsMap = this.dynamicFormData?.inputsMap;
|
|
706
743
|
this.inputsNames = Object.keys(this.inputsMap || {});
|
|
707
744
|
}
|
|
708
|
-
static
|
|
709
|
-
static
|
|
745
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
746
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, ngImport: i0, template: "<div class=\"border-t mx-4 py-2\">\r\n <form [formGroup]=\"formGroup\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div\r\n [ngClass]=\"inputsMap[inputName].rowSize === 'half' ? 'col-span-6 md:col-span-6': 'col-span-12 md:col-span-12'\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker\r\n [minDate]=\"inputsMap[inputName]?.dateRange?.min\"\r\n [id]=\"inputsMap[inputName].inputId\"\r\n [control]=\"getFormControl(inputName, formGroup)\"\r\n [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\"\r\n [showIcon]=\"inputsMap[inputName].showIcon || true\"\r\n [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\"/>\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button\r\n [control]=\"getFormControl(inputName, formGroup)\"\r\n [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"/>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col-span-12\">\r\n <small class=\"p-error text-red-700\">\r\n @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n track error) {\r\n {{ error }}\r\n }\r\n </small>\r\n </div>\r\n </form>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
|
|
710
747
|
}
|
|
711
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
748
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
712
749
|
type: Component,
|
|
713
750
|
args: [{ selector: "app-dynamic-form", standalone: true, imports: [CommonModule, ReactiveFormsModule, DatePickerComponent, ValidationErrorsPipe, TranslateModule, SelectButtonComponent], template: "<div class=\"border-t mx-4 py-2\">\r\n <form [formGroup]=\"formGroup\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div\r\n [ngClass]=\"inputsMap[inputName].rowSize === 'half' ? 'col-span-6 md:col-span-6': 'col-span-12 md:col-span-12'\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker\r\n [minDate]=\"inputsMap[inputName]?.dateRange?.min\"\r\n [id]=\"inputsMap[inputName].inputId\"\r\n [control]=\"getFormControl(inputName, formGroup)\"\r\n [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\"\r\n [showIcon]=\"inputsMap[inputName].showIcon || true\"\r\n [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\"/>\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button\r\n [control]=\"getFormControl(inputName, formGroup)\"\r\n [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"/>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col-span-12\">\r\n <small class=\"p-error text-red-700\">\r\n @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n track error) {\r\n {{ error }}\r\n }\r\n </small>\r\n </div>\r\n </form>\r\n</div>\r\n" }]
|
|
714
751
|
}], propDecorators: { dynamicFormData: [{
|
|
@@ -717,13 +754,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
717
754
|
}] } });
|
|
718
755
|
|
|
719
756
|
class ConfirmationDialogComponent {
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
}
|
|
757
|
+
router = inject(Router);
|
|
758
|
+
dialogService = inject(DialogService);
|
|
759
|
+
dynamicDialogConfig = inject(DynamicDialogConfig);
|
|
760
|
+
_ref = inject(DynamicDialogRef);
|
|
761
|
+
_subscription = new Subscription();
|
|
762
|
+
dialogFormData;
|
|
727
763
|
ngOnInit() {
|
|
728
764
|
// closing when navigating back from the browser
|
|
729
765
|
this._subscription.add(this.router.events.pipe(filter((event) => event instanceof NavigationStart)).subscribe(() => {
|
|
@@ -743,28 +779,32 @@ class ConfirmationDialogComponent {
|
|
|
743
779
|
close() {
|
|
744
780
|
this._ref.close();
|
|
745
781
|
}
|
|
746
|
-
static
|
|
747
|
-
static
|
|
782
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
783
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirm-dialog", providers: [DialogService], ngImport: i0, template: "@if (dynamicDialogConfig.data) {\r\n <div>\r\n <div class=\"bg-gray-150 p-4 flex items-center\">\r\n <div class=\"flex-grow flex gap-2\">\r\n @if (dynamicDialogConfig.data.headerIcon) {\r\n <i [class]=\"dynamicDialogConfig.data.headerIcon\"></i>\r\n }\r\n\r\n <h3 class=\"m-0 font-bold text-[16px]\">\r\n {{ dynamicDialogConfig.data.header }}\r\n </h3>\r\n </div>\r\n\r\n <app-button (click)=\"close()\" icon=\"font-icon-close\" [style]=\"'secondary'\" variant=\"text\"/>\r\n </div>\r\n\r\n @if (dynamicDialogConfig.data) {\r\n <div class=\"p-4\">\r\n @if (dynamicDialogConfig.data.dialogIcon) {\r\n <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n }\r\n <div>\r\n {{ dynamicDialogConfig.data.message }}\r\n </div>\r\n @if (dynamicDialogConfig.data.hint) {\r\n <div class=\"font-bold text-[14px] mt-2\">\r\n {{ dynamicDialogConfig.data.hint }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (dynamicDialogConfig.data.inputForm) {\r\n <app-dynamic-form [dynamicFormData]=\"dialogFormData\"></app-dynamic-form>\r\n }\r\n\r\n <div class=\"p-4 flex gap-3\">\r\n <app-button\r\n [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\" class=\"w-[50%]\"\r\n [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\"\r\n [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\"\r\n [style]=\"dynamicDialogConfig.data.confirmBtnStyle ||'primary'\"\r\n (click)=\"submit()\"/>\r\n\r\n <app-button\r\n [title]=\"dynamicDialogConfig.data?.closeLabel || ('actions.cancel' | translate)\"\r\n class=\"w-[50%]\"\r\n [style]=\"'secondary'\"\r\n [variant]=\"'outlined'\"\r\n (click)=\"close()\"/>\r\n </div>\r\n </div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["title", "class", "icon", "size", "style", "iconPos", "variant", "disabled", "text", "rounded"], outputs: ["clickEmitter"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["dynamicFormData"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
748
784
|
}
|
|
749
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
785
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
750
786
|
type: Component,
|
|
751
|
-
args: [{ selector:
|
|
787
|
+
args: [{ selector: 'app-confirm-dialog', standalone: true, imports: [
|
|
788
|
+
AppButtonComponent,
|
|
789
|
+
AvatarModule,
|
|
790
|
+
DynamicDialogModule,
|
|
791
|
+
DynamicFormComponent,
|
|
792
|
+
TranslatePipe,
|
|
793
|
+
], providers: [DialogService], template: "@if (dynamicDialogConfig.data) {\r\n <div>\r\n <div class=\"bg-gray-150 p-4 flex items-center\">\r\n <div class=\"flex-grow flex gap-2\">\r\n @if (dynamicDialogConfig.data.headerIcon) {\r\n <i [class]=\"dynamicDialogConfig.data.headerIcon\"></i>\r\n }\r\n\r\n <h3 class=\"m-0 font-bold text-[16px]\">\r\n {{ dynamicDialogConfig.data.header }}\r\n </h3>\r\n </div>\r\n\r\n <app-button (click)=\"close()\" icon=\"font-icon-close\" [style]=\"'secondary'\" variant=\"text\"/>\r\n </div>\r\n\r\n @if (dynamicDialogConfig.data) {\r\n <div class=\"p-4\">\r\n @if (dynamicDialogConfig.data.dialogIcon) {\r\n <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n }\r\n <div>\r\n {{ dynamicDialogConfig.data.message }}\r\n </div>\r\n @if (dynamicDialogConfig.data.hint) {\r\n <div class=\"font-bold text-[14px] mt-2\">\r\n {{ dynamicDialogConfig.data.hint }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (dynamicDialogConfig.data.inputForm) {\r\n <app-dynamic-form [dynamicFormData]=\"dialogFormData\"></app-dynamic-form>\r\n }\r\n\r\n <div class=\"p-4 flex gap-3\">\r\n <app-button\r\n [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\" class=\"w-[50%]\"\r\n [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\"\r\n [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\"\r\n [style]=\"dynamicDialogConfig.data.confirmBtnStyle ||'primary'\"\r\n (click)=\"submit()\"/>\r\n\r\n <app-button\r\n [title]=\"dynamicDialogConfig.data?.closeLabel || ('actions.cancel' | translate)\"\r\n class=\"w-[50%]\"\r\n [style]=\"'secondary'\"\r\n [variant]=\"'outlined'\"\r\n (click)=\"close()\"/>\r\n </div>\r\n </div>\r\n}\r\n" }]
|
|
752
794
|
}] });
|
|
753
795
|
|
|
754
796
|
class ReadMoreComponent {
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
this.isExpanded = false;
|
|
760
|
-
}
|
|
797
|
+
text = "";
|
|
798
|
+
styleClass = "";
|
|
799
|
+
maxCharacters = 100;
|
|
800
|
+
isExpanded = false;
|
|
761
801
|
toggleReadMore() {
|
|
762
802
|
this.isExpanded = !this.isExpanded;
|
|
763
803
|
}
|
|
764
|
-
static
|
|
765
|
-
static
|
|
804
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ReadMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
805
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: ReadMoreComponent, isStandalone: true, selector: "app-read-more", inputs: { text: "text", styleClass: "styleClass", maxCharacters: "maxCharacters" }, ngImport: i0, template: "<p [class]=\"styleClass\">\r\n {{ isExpanded ? text : (text | slice : 0 : maxCharacters) }}\r\n @if (text.length > maxCharacters && !isExpanded) {\r\n <span>...</span>\r\n }\r\n @if (isExpanded) {\r\n <span>\r\n {{ text | slice : maxCharacters + 1 : text.length }}\r\n </span>\r\n }\r\n <br>\r\n @if (text.length > maxCharacters) {\r\n <span class=\"text-primary_light cursor-pointer\" (click)=\"toggleReadMore()\">\r\n {{ isExpanded ? ('less' | translate) : ('more' | translate) }}\r\n </span>\r\n }\r\n</p>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: SlicePipe, name: "slice" }] });
|
|
766
806
|
}
|
|
767
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
807
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ReadMoreComponent, decorators: [{
|
|
768
808
|
type: Component,
|
|
769
809
|
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" }]
|
|
770
810
|
}], propDecorators: { text: [{
|
|
@@ -777,15 +817,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
777
817
|
}] } });
|
|
778
818
|
|
|
779
819
|
class AppAccordionComponent {
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
static
|
|
820
|
+
iconName;
|
|
821
|
+
iconClass;
|
|
822
|
+
iconPathCount = 0;
|
|
823
|
+
title;
|
|
824
|
+
contentBorderTop = true;
|
|
825
|
+
accordionPanelBorder = true;
|
|
826
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
827
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: AppAccordionComponent, isStandalone: true, selector: "app-accordion", inputs: { iconName: "iconName", iconClass: "iconClass", iconPathCount: "iconPathCount", title: "title", contentBorderTop: "contentBorderTop", accordionPanelBorder: "accordionPanelBorder" }, ngImport: i0, template: "<p-accordion value=\"0\">\r\n <p-accordion-panel value=\"0\" [class.!border-0]=\"!accordionPanelBorder\">\r\n <p-accordion-header>\r\n <span class=\"flex items-center gap-2 w-full\">\r\n <app-ico-moon-card [iconClass]=\"'text-[24px] text-secondary'\" [iconName]=\"'font-icon-'+iconName\" />\r\n <span class=\"font-bold whitespace-nowrap\">{{title}}</span>\r\n </span>\r\n </p-accordion-header>\r\n <p-accordion-content>\r\n <div [ngClass]=\"{'border-t-2 border-gray-light pt-2': contentBorderTop, }\">\r\n <ng-content></ng-content>\r\n </div>\r\n </p-accordion-content>\r\n </p-accordion-panel>\r\n</p-accordion>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$3.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i2$3.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i2$3.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i2$3.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: IcoMoonIconComponent, selector: "app-ico-moon-card", inputs: ["iconName", "iconClass", "iconPathCount"] }] });
|
|
787
828
|
}
|
|
788
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppAccordionComponent, decorators: [{
|
|
789
830
|
type: Component,
|
|
790
831
|
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" }]
|
|
791
832
|
}], propDecorators: { iconName: [{
|
|
@@ -804,19 +845,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
804
845
|
}] } });
|
|
805
846
|
|
|
806
847
|
class UserAutocompleteCardComponent {
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
}
|
|
848
|
+
select = new EventEmitter();
|
|
849
|
+
delete = new EventEmitter();
|
|
850
|
+
userData;
|
|
851
|
+
explicitRole = "";
|
|
852
|
+
showDeleteAction = true;
|
|
813
853
|
onDelete() {
|
|
814
854
|
this.delete.emit(this.userData);
|
|
815
855
|
}
|
|
816
|
-
static
|
|
817
|
-
static
|
|
856
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserAutocompleteCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
857
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: UserAutocompleteCardComponent, isStandalone: true, selector: "app-user-autocomplete-card", inputs: { userData: "userData", explicitRole: "explicitRole", showDeleteAction: "showDeleteAction" }, outputs: { select: "select", delete: "delete" }, ngImport: i0, template: "<div class=\"flex gap-2 items-center justify-between p-4 rounded mb-4 border border-dotted border-gray-300 bg-gray-100\">\r\n <div class=\"flex gap-4 items-center\">\r\n <img [alt]=\"userData.name\" [src]=\"userData.profileImage\" class=\"rounded-full object-cover w-[48px] h-[48px]\" />\r\n <div class=\"flex flex-col justify-end\">\r\n <h4 class=\"font-bold text-[12px] text-gray-800 truncate max-w-[135px] dir-ltr\">\r\n {{ userData.name }}\r\n </h4>\r\n <p class=\"text-[12px] text-gray-700\">{{ explicitRole ? explicitRole : userData.position.name }}</p>\r\n </div>\r\n </div>\r\n <div class=\"flex-1 flex flex-col items-end\">\r\n <p class=\"text-[12px] text-purple-700 truncate max-w-[90px] dir-ltr\">{{ userData.email }}</p>\r\n <p class=\"text-[12px] text-gray-600 dir-ltr\">{{ userData.contact.mobile }}</p>\r\n </div>\r\n @if (showDeleteAction){\r\n <div class=\"flex gap-1 flex-nowrap\">\r\n <app-button (clickEmitter)=\"onDelete()\" [rounded]=\"true\" [size]=\"'large'\" [text]=\"true\" icon=\"font-icon-trash\"/>\r\n </div>\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["title", "class", "icon", "size", "style", "iconPos", "variant", "disabled", "text", "rounded"], outputs: ["clickEmitter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
818
858
|
}
|
|
819
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
859
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserAutocompleteCardComponent, decorators: [{
|
|
820
860
|
type: Component,
|
|
821
861
|
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" }]
|
|
822
862
|
}], propDecorators: { select: [{
|