@corp-products/ui-components 3.2.8 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, Injectable, InjectionToken, Injector, createComponent, ViewContainerRef,
|
|
2
|
+
import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, Injectable, HostListener, ViewChild, InjectionToken, Injector, createComponent, ViewContainerRef, ApplicationRef, EnvironmentInjector } from '@angular/core';
|
|
3
3
|
import * as i1 from 'primeng/button';
|
|
4
4
|
import { Button, ButtonModule, ButtonStyle } from 'primeng/button';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
@@ -8,23 +8,23 @@ import * as i2 from 'primeng/tabs';
|
|
|
8
8
|
import { TabsModule } from 'primeng/tabs';
|
|
9
9
|
import * as i1$2 from '@ngx-translate/core';
|
|
10
10
|
import { TranslateModule, TranslateService, TranslatePipe } from '@ngx-translate/core';
|
|
11
|
-
import * as i1$
|
|
11
|
+
import * as i1$7 from '@angular/router';
|
|
12
12
|
import { Router, ActivatedRoute, NavigationEnd, RouterLink, RouterOutlet, NavigationStart, RouterModule } from '@angular/router';
|
|
13
|
-
import { filter, Subject, Subscription, BehaviorSubject } from 'rxjs';
|
|
13
|
+
import { filter, Subject, Subscription, BehaviorSubject, of } from 'rxjs';
|
|
14
14
|
import * as i3 from 'primeng/badge';
|
|
15
15
|
import { BadgeModule } from 'primeng/badge';
|
|
16
16
|
import { Popover } from 'primeng/popover';
|
|
17
17
|
import * as i2$1 from 'primeng/api';
|
|
18
18
|
import { PrimeTemplate } from 'primeng/api';
|
|
19
|
-
import * as i1$
|
|
19
|
+
import * as i1$9 from 'primeng/drawer';
|
|
20
20
|
import { Drawer, DrawerModule } from 'primeng/drawer';
|
|
21
21
|
import * as i1$3 from 'primeng/tooltip';
|
|
22
22
|
import { TooltipModule } from 'primeng/tooltip';
|
|
23
23
|
import { AvatarModule } from 'primeng/avatar';
|
|
24
|
-
import * as i1$
|
|
24
|
+
import * as i1$8 from 'primeng/dynamicdialog';
|
|
25
25
|
import { DynamicDialogRef, DialogService, DynamicDialogConfig, DynamicDialogModule, DynamicDialogStyle } from 'primeng/dynamicdialog';
|
|
26
26
|
import * as i1$4 from '@angular/forms';
|
|
27
|
-
import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
27
|
+
import { Validators, ReactiveFormsModule, FormsModule, FormControl } from '@angular/forms';
|
|
28
28
|
import { AutoComplete } from 'primeng/autocomplete';
|
|
29
29
|
import * as i3$1 from 'primeng/floatlabel';
|
|
30
30
|
import { FloatLabel, FloatLabelModule } from 'primeng/floatlabel';
|
|
@@ -38,6 +38,11 @@ import { MultiSelectModule } from 'primeng/multiselect';
|
|
|
38
38
|
import { Select } from 'primeng/select';
|
|
39
39
|
import * as i1$5 from 'primeng/toggleswitch';
|
|
40
40
|
import { ToggleSwitchModule } from 'primeng/toggleswitch';
|
|
41
|
+
import * as i1$6 from '@ng-bootstrap/ng-bootstrap';
|
|
42
|
+
import { NgbDatepickerI18n, NgbCalendarIslamicUmalqura, NgbDatepickerModule, NgbCalendar, NgbCalendarGregorian } from '@ng-bootstrap/ng-bootstrap';
|
|
43
|
+
import moment from 'moment-hijri';
|
|
44
|
+
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
45
|
+
import '@angular/localize/init';
|
|
41
46
|
import * as i2$4 from 'primeng/accordion';
|
|
42
47
|
import { AccordionModule } from 'primeng/accordion';
|
|
43
48
|
import { DividerModule } from 'primeng/divider';
|
|
@@ -45,10 +50,10 @@ import { Breadcrumb } from 'primeng/breadcrumb';
|
|
|
45
50
|
import { filter as filter$1, map } from 'rxjs/operators';
|
|
46
51
|
|
|
47
52
|
class AppButtonComponent extends Button {
|
|
48
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
49
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
53
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
54
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AppButtonComponent, isStandalone: true, selector: "app-button", providers: [ButtonStyle], usesInheritance: true, ngImport: i0, template: "<p-button (onFocus)=\"onFocus.emit()\" (onBlur)=\"onBlur.emit()\" (onClick)=\"onClick.emit()\" [size]=\"size\"\r\n [loadingIcon]=\"loadingIcon\" [disabled]=\"disabled\" [iconPos]=\"iconPos\" [icon]=\"icon\" [label]=\"label\"\r\n [rounded]=\"rounded\" [severity]=\"severity\" [styleClass]=\"styleClass\" [text]=\"text\" [variant]=\"variant\"\r\n [loading]=\"loading\" [autofocus]=\"autofocus\" [link]=\"link\" [plain]=\"plain\" [raised]=\"raised\"\r\n [loadingIcon]=\"loadingIcon\" [style]=\"style\" [outlined]=\"outlined\">\r\n <ng-content></ng-content>\r\n</p-button>", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
50
55
|
}
|
|
51
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
56
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppButtonComponent, decorators: [{
|
|
52
57
|
type: Component,
|
|
53
58
|
args: [{ imports: [ButtonModule], selector: 'app-button', standalone: true, encapsulation: ViewEncapsulation.None, providers: [ButtonStyle], template: "<p-button (onFocus)=\"onFocus.emit()\" (onBlur)=\"onBlur.emit()\" (onClick)=\"onClick.emit()\" [size]=\"size\"\r\n [loadingIcon]=\"loadingIcon\" [disabled]=\"disabled\" [iconPos]=\"iconPos\" [icon]=\"icon\" [label]=\"label\"\r\n [rounded]=\"rounded\" [severity]=\"severity\" [styleClass]=\"styleClass\" [text]=\"text\" [variant]=\"variant\"\r\n [loading]=\"loading\" [autofocus]=\"autofocus\" [link]=\"link\" [plain]=\"plain\" [raised]=\"raised\"\r\n [loadingIcon]=\"loadingIcon\" [style]=\"style\" [outlined]=\"outlined\">\r\n <ng-content></ng-content>\r\n</p-button>" }]
|
|
54
59
|
}] });
|
|
@@ -60,8 +65,8 @@ class IcoMoonIconComponent {
|
|
|
60
65
|
get getPathCount() {
|
|
61
66
|
return Array.from({ length: this.iconPathCount }, (_, i) => i + 1);
|
|
62
67
|
}
|
|
63
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
64
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
68
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IcoMoonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
69
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: IcoMoonIconComponent, isStandalone: true, selector: "app-ico-moon-card", inputs: { iconName: "iconName", iconClass: "iconClass", iconPathCount: "iconPathCount" }, ngImport: i0, template: `
|
|
65
70
|
<i [class]="iconName + ' ' + iconClass">
|
|
66
71
|
@for (path of getPathCount; track $index) {
|
|
67
72
|
<i [class]="iconName + ' path'+path"></i>
|
|
@@ -69,7 +74,7 @@ class IcoMoonIconComponent {
|
|
|
69
74
|
</i>
|
|
70
75
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
71
76
|
}
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IcoMoonIconComponent, decorators: [{
|
|
73
78
|
type: Component,
|
|
74
79
|
args: [{
|
|
75
80
|
selector: 'app-ico-moon-card',
|
|
@@ -130,10 +135,10 @@ class AppTabsComponent {
|
|
|
130
135
|
return '0';
|
|
131
136
|
return this.twoDigitCount && count > 99 ? '99+' : count.toString();
|
|
132
137
|
}
|
|
133
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
134
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
138
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
139
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AppTabsComponent, isStandalone: true, selector: "app-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: false, isRequired: false, transformFunction: null }, tabsStyle: { classPropertyName: "tabsStyle", publicName: "tabsStyle", isSignal: false, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: false, isRequired: false, transformFunction: null }, twoDigitCount: { classPropertyName: "twoDigitCount", publicName: "twoDigitCount", isSignal: false, isRequired: false, transformFunction: null }, selectedTabIndex: { classPropertyName: "selectedTabIndex", publicName: "selectedTabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabIndex: "selectedTabIndexChange" }, ngImport: i0, template: "@if (tabs && tabs.items.length) {\r\n<div [class]=\"tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'\">\r\n <p-tabs [value]=\"selectedTabIndex() || activeTabIndex\" scrollable>\r\n <p-tablist>\r\n\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tab [value]=\"i\" [routerLink]=\"tabs.isRouted ? $any(tab).link : null\" [disabled]=\"tab.disabled\"\r\n (click)=\"onTabChange(i)\">\r\n @if (tab.iconName) {\r\n <app-ico-moon-card [iconClass]=\"'text-[17px]'\" [iconName]=\"tab.iconName\"\r\n [iconPathCount]=\"tab.iconPathCount || 0\" />\r\n }\r\n <span>{{ tab.title | translate }}\r\n @if (tab.count || tab.count === 0) {\r\n <p-badge [value]=\"getTabCount(tab.count)\" severity=\"secondary\" />\r\n }\r\n </span>\r\n </p-tab>\r\n }\r\n\r\n </p-tablist>\r\n\r\n <p-tabpanels>\r\n @if (tabs.isRouted) {\r\n <router-outlet></router-outlet>\r\n } @else {\r\n @for (tab of tabs.items; let i = $index; track i) {\r\n <p-tabpanel [value]=\"i\">\r\n <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\r\n </p-tabpanel>\r\n }\r\n }\r\n\r\n </p-tabpanels>\r\n </p-tabs>\r\n</div>\r\n}", styles: [".tabs-container.full-width .p-tabs .p-tablist-tab-list .p-tab{@apply flex-grow flex justify-center max-w-[50%];}.tabs-container .p-tabs .p-tablist-tab-list{@apply relative;}.tabs-container .p-tabs .p-tablist-tab-list:after{@apply content-[\"\"] w-full h-[3px] bg-purple-800/5 absolute bottom-0 right-0 z-[1];}.tabs-container .p-tabs .p-tablist-tab-list .p-tab{@apply text-sm text-gray-400 font-normal text-[16px] border-b-[4px] border-transparent z-[2];}.tabs-container .p-tabs .p-tablist-tab-list .p-tab:not(.p-tab-active) app-ico-moon-card{@apply grayscale;}.tabs-container .p-tabs .p-tablist-active-bar{@apply hidden;}.tabs-container .p-tabs .p-tabpanels.p-component{@apply mt-5 rounded-lg;}.tabs-container.basic .p-tabs .p-tablist-tab-list{@apply bg-transparent;}.tabs-container.basic .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply text-primary border-primary;}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab{@apply rounded-t-lg text-[14px];}.tabs-container.primary_light .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply bg-purple-800/5 font-semibold text-primary border-primary;}.tabs-container.primary .p-tabs .p-tablist-tab-list:after{@apply bg-purple-800/5;}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab{@apply rounded-t-lg text-[14px];}.tabs-container.primary .p-tabs .p-tablist-tab-list .p-tab.p-tab-active{@apply bg-primary font-semibold text-white border-secondary;}[dir=rtl] .p-tabs .p-tablist .p-iconwrapper{@apply rotate-180deg;}[dir=rtl] .p-tabs .p-tablist .p-tablist-next-button{@apply right-auto left-0;}[dir=rtl] .p-tabs .p-tablist .p-tablist-prev-button{@apply right-0 left-auto;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabList, selector: "p-tablist" }, { kind: "component", type: i2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: IcoMoonIconComponent, selector: "app-ico-moon-card", inputs: ["iconName", "iconClass", "iconPathCount"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
135
140
|
}
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppTabsComponent, decorators: [{
|
|
137
142
|
type: Component,
|
|
138
143
|
args: [{ selector: 'app-tabs', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
|
|
139
144
|
CommonModule,
|
|
@@ -152,7 +157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
152
157
|
type: Input
|
|
153
158
|
}], twoDigitCount: [{
|
|
154
159
|
type: Input
|
|
155
|
-
}] } });
|
|
160
|
+
}], selectedTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTabIndex", required: false }] }, { type: i0.Output, args: ["selectedTabIndexChange"] }] } });
|
|
156
161
|
|
|
157
162
|
class MenuPopupTextColorPipe {
|
|
158
163
|
transform(color) {
|
|
@@ -163,10 +168,10 @@ class MenuPopupTextColorPipe {
|
|
|
163
168
|
default: return 'text-white';
|
|
164
169
|
}
|
|
165
170
|
}
|
|
166
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
167
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.
|
|
171
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuPopupTextColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
172
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MenuPopupTextColorPipe, isStandalone: true, name: "popupTextColorClass" });
|
|
168
173
|
}
|
|
169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuPopupTextColorPipe, decorators: [{
|
|
170
175
|
type: Pipe,
|
|
171
176
|
args: [{
|
|
172
177
|
name: 'popupTextColorClass',
|
|
@@ -198,10 +203,10 @@ class AppDropdownMenuComponent {
|
|
|
198
203
|
this.router.navigate(Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink], { queryParams: item.queryParams || {} });
|
|
199
204
|
}
|
|
200
205
|
}
|
|
201
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
202
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
206
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
207
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AppDropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { buttonTitle: "buttonTitle", menuItems: "menuItems", popupMenuStyle: "popupMenuStyle", buttonIcon: "buttonIcon", buttonClass: "buttonClass", buttonStyle: "buttonStyle", buttonIconPosition: "buttonIconPosition" }, ngImport: i0, template: "@if (showMenu) {\r\n<app-button (click)=\"op.toggle($event)\" [class]=\"buttonClass\" [iconPos]=\"buttonIconPosition\" [icon]=\"buttonIcon\"\r\n [title]=\"buttonTitle\" [styleClass]=\"buttonStyle\" />\r\n}\r\n<p-popover #op [styleClass]=\"popupMenuStyle === 'white' ? 'white-menu' : 'purple-menu'\">\r\n <div class=\"flex flex-col gap-4 text-sm md:text-xs\">\r\n <ul>\r\n @for (item of menuItems; track $index) {\r\n @if (item.show) {\r\n <li [ngClass]=\"{'flex-row-reverse': item.iconPosition === 'right'}\"\r\n [class]=\"'flex justify-between min-w-[130px] gap-3 items-center cursor-pointer text-sm ' + (item.textColor | popupTextColorClass)\"\r\n (click)=\"onMenuItemClick(item)\">\r\n {{ item.title | translate }}\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</p-popover>", styles: [".p-popover.p-component{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover.p-component:is(.purple-menu){@apply bg-primary text-white text-sm mt-2;}.p-popover.p-component:is(.purple-menu) li:not(:last-child){@apply border-b-2 border-purple-700;}.p-popover.p-component:is(.white-menu) li:not(:last-child){@apply border-b;}.p-popover.p-component:before,.p-popover.p-component:after{display:none}.p-popover.p-component .p-popover-content{width:auto;min-width:unset}.p-popover.p-component .p-popover-content ul li{@apply py-3;}.p-popover.p-component .p-popover-content ul li:hover{opacity:.7}.p-popover.p-component .p-popover-content ul li:first-child{@apply pt-0;}.p-popover.p-component .p-popover-content ul li:last-child{@apply pb-0;}\n"], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: MenuPopupTextColorPipe, name: "popupTextColorClass" }], encapsulation: i0.ViewEncapsulation.None });
|
|
203
208
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
209
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppDropdownMenuComponent, decorators: [{
|
|
205
210
|
type: Component,
|
|
206
211
|
args: [{ selector: "app-dropdown-menu", standalone: true, imports: [AppButtonComponent, Popover, TranslateModule, NgClass, MenuPopupTextColorPipe], encapsulation: ViewEncapsulation.None, template: "@if (showMenu) {\r\n<app-button (click)=\"op.toggle($event)\" [class]=\"buttonClass\" [iconPos]=\"buttonIconPosition\" [icon]=\"buttonIcon\"\r\n [title]=\"buttonTitle\" [styleClass]=\"buttonStyle\" />\r\n}\r\n<p-popover #op [styleClass]=\"popupMenuStyle === 'white' ? 'white-menu' : 'purple-menu'\">\r\n <div class=\"flex flex-col gap-4 text-sm md:text-xs\">\r\n <ul>\r\n @for (item of menuItems; track $index) {\r\n @if (item.show) {\r\n <li [ngClass]=\"{'flex-row-reverse': item.iconPosition === 'right'}\"\r\n [class]=\"'flex justify-between min-w-[130px] gap-3 items-center cursor-pointer text-sm ' + (item.textColor | popupTextColorClass)\"\r\n (click)=\"onMenuItemClick(item)\">\r\n {{ item.title | translate }}\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</p-popover>", styles: [".p-popover.p-component{box-shadow:none;border-radius:3px;margin-top:13px}.p-popover.p-component:is(.purple-menu){@apply bg-primary text-white text-sm mt-2;}.p-popover.p-component:is(.purple-menu) li:not(:last-child){@apply border-b-2 border-purple-700;}.p-popover.p-component:is(.white-menu) li:not(:last-child){@apply border-b;}.p-popover.p-component:before,.p-popover.p-component:after{display:none}.p-popover.p-component .p-popover-content{width:auto;min-width:unset}.p-popover.p-component .p-popover-content ul li{@apply py-3;}.p-popover.p-component .p-popover-content ul li:hover{opacity:.7}.p-popover.p-component .p-popover-content ul li:first-child{@apply pt-0;}.p-popover.p-component .p-popover-content ul li:last-child{@apply pb-0;}\n"] }]
|
|
207
212
|
}], propDecorators: { buttonTitle: [{
|
|
@@ -239,10 +244,10 @@ class SideBarComponent {
|
|
|
239
244
|
this.show = false;
|
|
240
245
|
this.hide.emit(false);
|
|
241
246
|
}
|
|
242
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
243
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
247
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
248
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SideBarComponent, isStandalone: true, selector: "app-side-bar", inputs: { show: "show", title: "title", closable: "closable", dismissible: "dismissible", closeOnEscape: "closeOnEscape", sidebarSize: "sidebarSize", styleClass: "styleClass", contentTemplate: "contentTemplate", footerTemplate: "footerTemplate", position: "position" }, outputs: { hide: "hide", onShow: "onShow" }, ngImport: i0, template: "<!-- TODO refactor position sidebar based on html dir-->\r\n<p-drawer\r\n (onHide)=\"hideSidebar()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'left'\"\r\n appendTo=\"body\"\r\n styleClass=\"p-drawer-{{ sidebarSize }} custom-content bg-white {{ styleClass }}\">\r\n <ng-template pTemplate=\"header\">\r\n <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n </ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500}.p-drawer-footer{--p-drawer-footer-padding: .75rem var(--p-overlay-modal-padding)}.p-drawer-content{padding-top:var(--p-overlay-modal-padding)!important}\n"], dependencies: [{ kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
244
249
|
}
|
|
245
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideBarComponent, decorators: [{
|
|
246
251
|
type: Component,
|
|
247
252
|
args: [{ selector: "app-side-bar", standalone: true, imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet, TooltipModule], encapsulation: ViewEncapsulation.None, template: "<!-- TODO refactor position sidebar based on html dir-->\r\n<p-drawer\r\n (onHide)=\"hideSidebar()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'left'\"\r\n appendTo=\"body\"\r\n styleClass=\"p-drawer-{{ sidebarSize }} custom-content bg-white {{ styleClass }}\">\r\n <ng-template pTemplate=\"header\">\r\n <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n </ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500}.p-drawer-footer{--p-drawer-footer-padding: .75rem var(--p-overlay-modal-padding)}.p-drawer-content{padding-top:var(--p-overlay-modal-padding)!important}\n"] }]
|
|
248
253
|
}], propDecorators: { show: [{
|
|
@@ -274,10 +279,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
274
279
|
class UserInfoComponent {
|
|
275
280
|
profileImage;
|
|
276
281
|
name;
|
|
277
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
278
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
282
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
283
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: UserInfoComponent, isStandalone: true, selector: "user-info", inputs: { profileImage: "profileImage", name: "name" }, ngImport: i0, template: "<div class=\"flex items-center gap-2\">\r\n <img\r\n [alt]=\"name\"\r\n [src]=\"profileImage\"\r\n class=\"rounded-full object-cover w-[24px] h-[24px]\"\r\n height=\"24\"\r\n width=\"24\"\r\n />\r\n <p class=\"text-[14px]\">{{ name }}</p>\r\n</div>\r\n" });
|
|
279
284
|
}
|
|
280
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UserInfoComponent, decorators: [{
|
|
281
286
|
type: Component,
|
|
282
287
|
args: [{ selector: "user-info", standalone: true, template: "<div class=\"flex items-center gap-2\">\r\n <img\r\n [alt]=\"name\"\r\n [src]=\"profileImage\"\r\n class=\"rounded-full object-cover w-[24px] h-[24px]\"\r\n height=\"24\"\r\n width=\"24\"\r\n />\r\n <p class=\"text-[14px]\">{{ name }}</p>\r\n</div>\r\n" }]
|
|
283
288
|
}], propDecorators: { profileImage: [{
|
|
@@ -364,10 +369,10 @@ class FormValidationService {
|
|
|
364
369
|
};
|
|
365
370
|
return messages[errorKey](errorValue);
|
|
366
371
|
}
|
|
367
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
368
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
372
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
373
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, providedIn: 'root' });
|
|
369
374
|
}
|
|
370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, decorators: [{
|
|
371
376
|
type: Injectable,
|
|
372
377
|
args: [{
|
|
373
378
|
providedIn: 'root',
|
|
@@ -387,10 +392,10 @@ class ValidationErrorsPipe {
|
|
|
387
392
|
return this.formValidationService.getErrorMessage(errorKey, errors[errorKey]);
|
|
388
393
|
});
|
|
389
394
|
}
|
|
390
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
391
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.
|
|
395
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
396
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, isStandalone: true, name: "validationErrors" });
|
|
392
397
|
}
|
|
393
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, decorators: [{
|
|
394
399
|
type: Pipe,
|
|
395
400
|
args: [{
|
|
396
401
|
name: "validationErrors",
|
|
@@ -421,10 +426,10 @@ class BaseInputComponent {
|
|
|
421
426
|
this.destroy$.next();
|
|
422
427
|
this.destroy$.complete();
|
|
423
428
|
}
|
|
424
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
425
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
429
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
430
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { control: "control", name: "name", label: "label", placeholder: "placeholder", inputId: "inputId", readonly: "readonly", disabled: "disabled", hint: "hint" }, ngImport: i0, template: '', isInline: true });
|
|
426
431
|
}
|
|
427
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
432
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseInputComponent, decorators: [{
|
|
428
433
|
type: Component,
|
|
429
434
|
args: [{
|
|
430
435
|
template: '',
|
|
@@ -468,10 +473,10 @@ class AutoCompleteComponent extends BaseInputComponent {
|
|
|
468
473
|
onSelect(event) {
|
|
469
474
|
this.selectOption.emit(event);
|
|
470
475
|
}
|
|
471
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
472
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
476
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
477
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AutoCompleteComponent, isStandalone: true, selector: "stc-auto-complete", inputs: { selectedItemTemplate: "selectedItemTemplate", items: "items", minLengthToSearch: "minLengthToSearch", delay: "delay", basicInput: "basicInput", typeAhead: "typeAhead", variant: "variant" }, outputs: { onSearch: "onSearch", selectOption: "selectOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (!required) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-auto-complete (completeMethod)=\"search($event)\" (onSelect)=\"onSelect($event)\" [delay]=\"delay\"\r\n [disabled]=\"disabled\" [formControl]=\"control\" [id]=\"inputId\" fluid [typeahead]=\"typeAhead\"\r\n [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n [minLength]=\"minLengthToSearch\" [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n [placeholder]=\"placeholder\" [styleClass]=\"'w-full'\" multiple [suggestions]=\"items\">\r\n <ng-template let-item pTemplate=\"item\">\r\n @if (selectedItemTemplate) {\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n }\r\n </ng-template>\r\n </p-auto-complete>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n\r\n</div>", styles: [".text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
473
478
|
}
|
|
474
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
479
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteComponent, decorators: [{
|
|
475
480
|
type: Component,
|
|
476
481
|
args: [{ selector: 'stc-auto-complete', standalone: true, imports: [
|
|
477
482
|
ReactiveFormsModule,
|
|
@@ -530,10 +535,10 @@ class DatePickerComponent extends BaseInputComponent {
|
|
|
530
535
|
this.control.reset();
|
|
531
536
|
this.onAfterClearDate.emit();
|
|
532
537
|
}
|
|
533
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
534
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
538
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
539
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", hourFormat: "hourFormat", selectionMode: "selectionMode", variant: "variant" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"control\" [iconDisplay]=\"'input'\"\r\n [showClear]=\"showClear\" (onClear)=\"afterClearDate()\" [inputId]=\"inputId\"\r\n [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n [class]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\" panelStyleClass=\"d-ltr\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
|
|
535
540
|
}
|
|
536
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
541
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
537
542
|
type: Component,
|
|
538
543
|
args: [{ selector: 'stc-date-picker', standalone: true, imports: [
|
|
539
544
|
FormsModule,
|
|
@@ -542,7 +547,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
542
547
|
NgClass,
|
|
543
548
|
DatePickerModule,
|
|
544
549
|
ValidationErrorsPipe,
|
|
545
|
-
TranslatePipe,
|
|
546
550
|
FloatLabelModule,
|
|
547
551
|
], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"control\" [iconDisplay]=\"'input'\"\r\n [showClear]=\"showClear\" (onClear)=\"afterClearDate()\" [inputId]=\"inputId\"\r\n [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n [class]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\" panelStyleClass=\"d-ltr\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
|
|
548
552
|
}], ctorParameters: () => [], propDecorators: { showIcon: [{
|
|
@@ -584,10 +588,10 @@ class InputComponent extends BaseInputComponent {
|
|
|
584
588
|
constructor() {
|
|
585
589
|
super();
|
|
586
590
|
}
|
|
587
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
588
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
591
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
592
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if (!required && !hideOptionalLabel) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @switch (type) {\r\n @case ('textarea') {\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n <ng-content></ng-content>\r\n }\r\n <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n </textarea>\r\n }\r\n @default {\r\n <p-floatlabel [variant]=\"variant\">\r\n <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \" [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n class=\"w-full\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n\r\n\r\n }\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}textarea,.p-select,input{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover,input:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus,input:not(.p-disabled).p-focus,input:not(.p-disabled).p-focus:hover,input:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
589
593
|
}
|
|
590
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
594
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, decorators: [{
|
|
591
595
|
type: Component,
|
|
592
596
|
args: [{ selector: 'stc-input', standalone: true, imports: [
|
|
593
597
|
ReactiveFormsModule,
|
|
@@ -634,10 +638,10 @@ class SelectButtonComponent extends BaseInputComponent {
|
|
|
634
638
|
changeValue(e) {
|
|
635
639
|
this.onChange.emit(e.value);
|
|
636
640
|
}
|
|
637
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
638
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
641
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
642
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SelectButtonComponent, isStandalone: true, selector: "stc-select-button", inputs: { options: "options", title: "title" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-0 items-end\">\r\n <div class=\"col-span-12\">\r\n <div class=\"text-[14px] font-bold mb-1\">{{ title }}</div>\r\n <div class=\"grid w-100 bg-gray-100 rounded drop-shadow-basic\">\r\n <p-selectButton [disabled]=\"disabled\"\r\n [options]=\"options\"\r\n [formControl]=\"control\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n class=\"rounded\"\r\n [styleClass]=\"'full-width'\"\r\n (onChange)=\"changeValue($event)\">\r\n <ng-template let-item class=\"flex w-100\">\r\n <div class=\"col-span-4\">\r\n <span>{{ item.value }}</span>\r\n </div>\r\n </ng-template>\r\n </p-selectButton>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
639
643
|
}
|
|
640
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
644
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectButtonComponent, decorators: [{
|
|
641
645
|
type: Component,
|
|
642
646
|
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" }]
|
|
643
647
|
}], propDecorators: { onChange: [{
|
|
@@ -672,10 +676,10 @@ class SelectComponent extends BaseInputComponent {
|
|
|
672
676
|
onChange(e) {
|
|
673
677
|
this.change.emit(e);
|
|
674
678
|
}
|
|
675
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
676
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
679
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
680
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectComponent, isStandalone: true, selector: "stc-select", inputs: { selectedItemTemplate: "selectedItemTemplate", optionTemplate: "optionTemplate", options: "options", optionLabel: "optionLabel", checkmark: "checkmark", showClear: "showClear", editable: "editable", filter: "filter", multiple: "multiple", filterBy: "filterBy", size: "size", selectedItemsLabel: "selectedItemsLabel", basicInput: "basicInput", variant: "variant", defaultColor: "defaultColor" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if(multiple) {\r\n <p-floatLabel [variant]=\"variant\">\r\n\r\n <p-multiselect\r\n [disabled]=\"disabled\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n class=\"w-full\"\r\n [size]=\"size\"\r\n [selectedItemsLabel]=\"selectedItemsLabel\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n\r\n\r\n\r\n\r\n\r\n @if(optionTemplate){\r\n <ng-template let-item #item>\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n\r\n\r\n <ng-template #dropdownicon>\r\n <i class=\"pi pi-map\"></i>\r\n </ng-template>\r\n\r\n\r\n </p-multiselect>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n </p-floatLabel>\r\n\r\n } @else {\r\n <p-floatLabel [variant]=\"variant\">\r\n <p-select\r\n [checkmark]=\"checkmark\"\r\n [disabled]=\"disabled\"\r\n [editable]=\"editable\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n [size]=\"size\"\r\n class=\"w-full\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n @if (optionTemplate) {\r\n <ng-template let-item pTemplate=\"item\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n @if (selectedItemTemplate) {\r\n <ng-template let-item pTemplate=\"selectedItem\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n </ng-template>\r\n }\r\n </p-select>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatLabel>\r\n }\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n } @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br />\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
|
|
677
681
|
}
|
|
678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
682
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectComponent, decorators: [{
|
|
679
683
|
type: Component,
|
|
680
684
|
args: [{ selector: 'stc-select', standalone: true, imports: [
|
|
681
685
|
FormsModule,
|
|
@@ -686,7 +690,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
686
690
|
PrimeTemplate,
|
|
687
691
|
ValidationErrorsPipe,
|
|
688
692
|
MultiSelectModule,
|
|
689
|
-
TranslatePipe,
|
|
690
693
|
FloatLabelModule,
|
|
691
694
|
], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if(multiple) {\r\n <p-floatLabel [variant]=\"variant\">\r\n\r\n <p-multiselect\r\n [disabled]=\"disabled\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n class=\"w-full\"\r\n [size]=\"size\"\r\n [selectedItemsLabel]=\"selectedItemsLabel\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n\r\n\r\n\r\n\r\n\r\n @if(optionTemplate){\r\n <ng-template let-item #item>\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n\r\n\r\n <ng-template #dropdownicon>\r\n <i class=\"pi pi-map\"></i>\r\n </ng-template>\r\n\r\n\r\n </p-multiselect>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n </p-floatLabel>\r\n\r\n } @else {\r\n <p-floatLabel [variant]=\"variant\">\r\n <p-select\r\n [checkmark]=\"checkmark\"\r\n [disabled]=\"disabled\"\r\n [editable]=\"editable\"\r\n [filterBy]=\"filterBy\"\r\n [filter]=\"filter\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"options\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [showClear]=\"showClear\"\r\n [size]=\"size\"\r\n class=\"w-full\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n (onChange)=\"onChange($event)\"\r\n [ngClass]=\"{ 'basic-style': basicInput }\"\r\n >\r\n\r\n @if (optionTemplate) {\r\n <ng-template let-item pTemplate=\"item\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n @if (selectedItemTemplate) {\r\n <ng-template let-item pTemplate=\"selectedItem\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n </ng-template>\r\n }\r\n </p-select>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatLabel>\r\n }\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n } @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br />\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
|
|
692
695
|
}], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
|
|
@@ -734,10 +737,10 @@ class SwitchComponent {
|
|
|
734
737
|
this.onChange.emit(value.checked);
|
|
735
738
|
}
|
|
736
739
|
}
|
|
737
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
738
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
740
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
741
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SwitchComponent, isStandalone: true, selector: "stc-switch", inputs: { label: "label", key: "key", checked: "checked" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"flex items-center mr-2\">\r\n <p-toggleswitch [(ngModel)]=\"checked\" [inputId]=\"key\" (onChange)=\"sendUpdatedValue($event)\" class=\"flex\">\r\n </p-toggleswitch>\r\n <label [for]=\"key\" class=\"text-[12px] mx-2\">{{label}}</label>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i1$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
739
742
|
}
|
|
740
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
743
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
741
744
|
type: Component,
|
|
742
745
|
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>" }]
|
|
743
746
|
}], propDecorators: { label: [{
|
|
@@ -758,8 +761,573 @@ var FormFieldTypeEnum;
|
|
|
758
761
|
FormFieldTypeEnum["SELECT"] = "select";
|
|
759
762
|
FormFieldTypeEnum["SWITCH"] = "switch";
|
|
760
763
|
FormFieldTypeEnum["AUTO_COMPLETE"] = "auto-complete";
|
|
764
|
+
FormFieldTypeEnum["HIJRI_DATE_PICKER"] = "hijri-date";
|
|
761
765
|
})(FormFieldTypeEnum || (FormFieldTypeEnum = {}));
|
|
762
766
|
|
|
767
|
+
const WEEKDAYS = {
|
|
768
|
+
ar: ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'],
|
|
769
|
+
en: ['M', 'T', 'W', 'T', 'F', 'S', 'S']
|
|
770
|
+
};
|
|
771
|
+
const MONTHS_GREGORIAN = {
|
|
772
|
+
ar: [
|
|
773
|
+
'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
|
|
774
|
+
'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
|
|
775
|
+
],
|
|
776
|
+
en: [
|
|
777
|
+
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
|
778
|
+
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
|
|
779
|
+
]
|
|
780
|
+
};
|
|
781
|
+
const MONTHS_HIJRI = {
|
|
782
|
+
ar: [
|
|
783
|
+
'محرم',
|
|
784
|
+
'صفر',
|
|
785
|
+
'ربيع الأول',
|
|
786
|
+
'ربيع الآخر',
|
|
787
|
+
'جمادى الأولى',
|
|
788
|
+
'جمادى الآخرة',
|
|
789
|
+
'رجب',
|
|
790
|
+
'شعبان',
|
|
791
|
+
'رمضان',
|
|
792
|
+
'شوال',
|
|
793
|
+
'ذو القعدة',
|
|
794
|
+
'ذو الحجة'
|
|
795
|
+
],
|
|
796
|
+
en: [
|
|
797
|
+
'Muharram',
|
|
798
|
+
'Safar',
|
|
799
|
+
'Rabi Al-Awwal',
|
|
800
|
+
'Rabi Al-Thani',
|
|
801
|
+
'Jumada Al-Awwal',
|
|
802
|
+
'Jumada Al-Thani',
|
|
803
|
+
'Rajab',
|
|
804
|
+
'Shaaban',
|
|
805
|
+
'Ramadan',
|
|
806
|
+
'Shawwal',
|
|
807
|
+
'Dhul-Qi’dah',
|
|
808
|
+
'Dhul-Hijjah'
|
|
809
|
+
]
|
|
810
|
+
};
|
|
811
|
+
function getGregorianMonthName(lang, month) {
|
|
812
|
+
return MONTHS_GREGORIAN[lang][month - 1] || '';
|
|
813
|
+
}
|
|
814
|
+
function getHijriMonthName(lang, month) {
|
|
815
|
+
return MONTHS_HIJRI[lang][month - 1] || '';
|
|
816
|
+
}
|
|
817
|
+
function getWeekdayName(lang, weekday) {
|
|
818
|
+
return WEEKDAYS[lang][weekday - 1];
|
|
819
|
+
}
|
|
820
|
+
|
|
821
|
+
class IslamicI18n extends NgbDatepickerI18n {
|
|
822
|
+
getMonthShortName(month) {
|
|
823
|
+
return MONTHS_HIJRI.ar[month - 1];
|
|
824
|
+
}
|
|
825
|
+
getMonthFullName(month) {
|
|
826
|
+
return MONTHS_HIJRI.ar[month - 1];
|
|
827
|
+
}
|
|
828
|
+
getWeekdayLabel(weekday) {
|
|
829
|
+
return WEEKDAYS.ar[weekday - 1];
|
|
830
|
+
}
|
|
831
|
+
getWeekdayShortName(weekday) {
|
|
832
|
+
return WEEKDAYS.ar[weekday - 1];
|
|
833
|
+
}
|
|
834
|
+
getDayAriaLabel(date) {
|
|
835
|
+
return `${date.day}-${date.month}-${date.year}`;
|
|
836
|
+
}
|
|
837
|
+
getYearNumerals(year) {
|
|
838
|
+
return String(year);
|
|
839
|
+
}
|
|
840
|
+
getWeekNumerals(weekNumber) {
|
|
841
|
+
return String(weekNumber);
|
|
842
|
+
}
|
|
843
|
+
getDayNumerals(date) {
|
|
844
|
+
return String(date.day);
|
|
845
|
+
}
|
|
846
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
847
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n });
|
|
848
|
+
}
|
|
849
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n, decorators: [{
|
|
850
|
+
type: Injectable
|
|
851
|
+
}] });
|
|
852
|
+
class HijriEnglishI18n extends NgbDatepickerI18n {
|
|
853
|
+
getMonthShortName(month) {
|
|
854
|
+
return MONTHS_HIJRI.en[month - 1].substring(0, 3);
|
|
855
|
+
}
|
|
856
|
+
getMonthFullName(month) {
|
|
857
|
+
return MONTHS_HIJRI.en[month - 1];
|
|
858
|
+
}
|
|
859
|
+
getWeekdayLabel(weekday) {
|
|
860
|
+
return WEEKDAYS.en[weekday - 1];
|
|
861
|
+
}
|
|
862
|
+
getWeekdayShortName(weekday) {
|
|
863
|
+
return WEEKDAYS.en[weekday - 1];
|
|
864
|
+
}
|
|
865
|
+
getDayAriaLabel(date) {
|
|
866
|
+
return `${date.day}-${date.month}-${date.year}`;
|
|
867
|
+
}
|
|
868
|
+
getYearNumerals(year) {
|
|
869
|
+
return String(year);
|
|
870
|
+
}
|
|
871
|
+
getWeekNumerals(weekNumber) {
|
|
872
|
+
return String(weekNumber);
|
|
873
|
+
}
|
|
874
|
+
getDayNumerals(date) {
|
|
875
|
+
return String(date.day);
|
|
876
|
+
}
|
|
877
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
878
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n });
|
|
879
|
+
}
|
|
880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n, decorators: [{
|
|
881
|
+
type: Injectable
|
|
882
|
+
}] });
|
|
883
|
+
class DynamicHijriI18n extends NgbDatepickerI18n {
|
|
884
|
+
currentLang = 'ar';
|
|
885
|
+
arabicI18n = new IslamicI18n();
|
|
886
|
+
englishI18n = new HijriEnglishI18n();
|
|
887
|
+
setLanguage(lang) {
|
|
888
|
+
this.currentLang = lang;
|
|
889
|
+
}
|
|
890
|
+
get activeI18n() {
|
|
891
|
+
return this.currentLang === 'ar' ? this.arabicI18n : this.englishI18n;
|
|
892
|
+
}
|
|
893
|
+
getMonthShortName(month) {
|
|
894
|
+
return this.activeI18n.getMonthShortName(month);
|
|
895
|
+
}
|
|
896
|
+
getMonthFullName(month) {
|
|
897
|
+
return this.activeI18n.getMonthFullName(month);
|
|
898
|
+
}
|
|
899
|
+
getWeekdayLabel(weekday) {
|
|
900
|
+
return this.activeI18n.getWeekdayLabel(weekday);
|
|
901
|
+
}
|
|
902
|
+
getWeekdayShortName(weekday) {
|
|
903
|
+
return this.activeI18n.getWeekdayShortName(weekday);
|
|
904
|
+
}
|
|
905
|
+
getDayAriaLabel(date) {
|
|
906
|
+
return this.activeI18n.getDayAriaLabel(date);
|
|
907
|
+
}
|
|
908
|
+
getYearNumerals(year) {
|
|
909
|
+
return this.activeI18n.getYearNumerals(year);
|
|
910
|
+
}
|
|
911
|
+
getWeekNumerals(weekNumber) {
|
|
912
|
+
return this.activeI18n.getWeekNumerals(weekNumber);
|
|
913
|
+
}
|
|
914
|
+
getDayNumerals(date) {
|
|
915
|
+
return this.activeI18n.getDayNumerals(date);
|
|
916
|
+
}
|
|
917
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
918
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n });
|
|
919
|
+
}
|
|
920
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n, decorators: [{
|
|
921
|
+
type: Injectable
|
|
922
|
+
}] });
|
|
923
|
+
|
|
924
|
+
class HijriCalendarComponent {
|
|
925
|
+
i18n;
|
|
926
|
+
cdr;
|
|
927
|
+
model;
|
|
928
|
+
dateSelected = new EventEmitter();
|
|
929
|
+
language = 'en';
|
|
930
|
+
startDate;
|
|
931
|
+
calendar = new NgbCalendarIslamicUmalqura();
|
|
932
|
+
constructor(i18n, cdr) {
|
|
933
|
+
this.i18n = i18n;
|
|
934
|
+
this.cdr = cdr;
|
|
935
|
+
}
|
|
936
|
+
ngOnChanges(changes) {
|
|
937
|
+
if (changes['model'] && changes['model'].currentValue) {
|
|
938
|
+
this.startDate = { ...changes['model'].currentValue };
|
|
939
|
+
console.log('Hijri navigating to:', this.startDate);
|
|
940
|
+
}
|
|
941
|
+
if (changes['language'] && this.i18n instanceof DynamicHijriI18n) {
|
|
942
|
+
this.i18n.setLanguage(this.language);
|
|
943
|
+
this.cdr.detectChanges(); // Force re-render to update labels
|
|
944
|
+
}
|
|
945
|
+
}
|
|
946
|
+
onDateChange(date) {
|
|
947
|
+
this.model = date;
|
|
948
|
+
this.startDate = { ...date };
|
|
949
|
+
}
|
|
950
|
+
isToday(date) {
|
|
951
|
+
const today = this.calendar.getToday();
|
|
952
|
+
return date.year === today.year &&
|
|
953
|
+
date.month === today.month &&
|
|
954
|
+
date.day === today.day;
|
|
955
|
+
}
|
|
956
|
+
isDisabled = () => false;
|
|
957
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriCalendarComponent, deps: [{ token: i1$6.NgbDatepickerI18n }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
958
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriCalendarComponent, isStandalone: true, selector: "app-hijri-calendar", inputs: { model: "model", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
|
|
959
|
+
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
|
|
960
|
+
{ provide: NgbDatepickerI18n, useClass: DynamicHijriI18n }
|
|
961
|
+
], usesOnChanges: true, ngImport: i0, template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n {{ date.day }}\r\n </span>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
962
|
+
}
|
|
963
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriCalendarComponent, decorators: [{
|
|
964
|
+
type: Component,
|
|
965
|
+
args: [{ selector: "app-hijri-calendar", standalone: true, imports: [NgbDatepickerModule, FormsModule], providers: [
|
|
966
|
+
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
|
|
967
|
+
{ provide: NgbDatepickerI18n, useClass: DynamicHijriI18n }
|
|
968
|
+
], template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n {{ date.day }}\r\n </span>\r\n</ng-template>\r\n" }]
|
|
969
|
+
}], ctorParameters: () => [{ type: i1$6.NgbDatepickerI18n }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
|
|
970
|
+
type: Input
|
|
971
|
+
}], dateSelected: [{
|
|
972
|
+
type: Output
|
|
973
|
+
}], language: [{
|
|
974
|
+
type: Input
|
|
975
|
+
}] } });
|
|
976
|
+
|
|
977
|
+
class GregorianArabicI18n extends NgbDatepickerI18n {
|
|
978
|
+
getMonthShortName(month) {
|
|
979
|
+
return MONTHS_GREGORIAN.ar[month - 1];
|
|
980
|
+
}
|
|
981
|
+
getMonthFullName(month) {
|
|
982
|
+
return MONTHS_GREGORIAN.ar[month - 1];
|
|
983
|
+
}
|
|
984
|
+
getWeekdayLabel(weekday) {
|
|
985
|
+
return WEEKDAYS.ar[weekday - 1];
|
|
986
|
+
}
|
|
987
|
+
getWeekdayShortName(weekday) {
|
|
988
|
+
return WEEKDAYS.ar[weekday - 1];
|
|
989
|
+
}
|
|
990
|
+
getDayAriaLabel(date) {
|
|
991
|
+
return `${date.day}-${date.month}-${date.year}`;
|
|
992
|
+
}
|
|
993
|
+
getYearNumerals(year) {
|
|
994
|
+
return String(year);
|
|
995
|
+
}
|
|
996
|
+
getWeekNumerals(weekNumber) {
|
|
997
|
+
return String(weekNumber);
|
|
998
|
+
}
|
|
999
|
+
getDayNumerals(date) {
|
|
1000
|
+
return String(date.day);
|
|
1001
|
+
}
|
|
1002
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
1003
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n });
|
|
1004
|
+
}
|
|
1005
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n, decorators: [{
|
|
1006
|
+
type: Injectable
|
|
1007
|
+
}] });
|
|
1008
|
+
class GregorianEnglishI18n extends NgbDatepickerI18n {
|
|
1009
|
+
getMonthShortName(month) {
|
|
1010
|
+
return MONTHS_GREGORIAN.en[month - 1].substring(0, 3);
|
|
1011
|
+
}
|
|
1012
|
+
getMonthFullName(month) {
|
|
1013
|
+
return MONTHS_GREGORIAN.en[month - 1];
|
|
1014
|
+
}
|
|
1015
|
+
getWeekdayLabel(weekday) {
|
|
1016
|
+
return WEEKDAYS.en[weekday - 1];
|
|
1017
|
+
}
|
|
1018
|
+
getWeekdayShortName(weekday) {
|
|
1019
|
+
return WEEKDAYS.en[weekday - 1];
|
|
1020
|
+
}
|
|
1021
|
+
getDayAriaLabel(date) {
|
|
1022
|
+
return `${date.day}-${date.month}-${date.year}`;
|
|
1023
|
+
}
|
|
1024
|
+
getYearNumerals(year) {
|
|
1025
|
+
return String(year);
|
|
1026
|
+
}
|
|
1027
|
+
getWeekNumerals(weekNumber) {
|
|
1028
|
+
return String(weekNumber);
|
|
1029
|
+
}
|
|
1030
|
+
getDayNumerals(date) {
|
|
1031
|
+
return String(date.day);
|
|
1032
|
+
}
|
|
1033
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
1034
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n });
|
|
1035
|
+
}
|
|
1036
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n, decorators: [{
|
|
1037
|
+
type: Injectable
|
|
1038
|
+
}] });
|
|
1039
|
+
// ============ Dynamic I18N Factory ============
|
|
1040
|
+
class DynamicGregorianI18n extends NgbDatepickerI18n {
|
|
1041
|
+
currentLang = 'en';
|
|
1042
|
+
arabicI18n = new GregorianArabicI18n();
|
|
1043
|
+
englishI18n = new GregorianEnglishI18n();
|
|
1044
|
+
setLanguage(lang) {
|
|
1045
|
+
this.currentLang = lang;
|
|
1046
|
+
}
|
|
1047
|
+
get activeI18n() {
|
|
1048
|
+
return this.currentLang === 'ar' ? this.arabicI18n : this.englishI18n;
|
|
1049
|
+
}
|
|
1050
|
+
getMonthShortName(month) {
|
|
1051
|
+
return this.activeI18n.getMonthShortName(month);
|
|
1052
|
+
}
|
|
1053
|
+
getMonthFullName(month) {
|
|
1054
|
+
return this.activeI18n.getMonthFullName(month);
|
|
1055
|
+
}
|
|
1056
|
+
getWeekdayLabel(weekday) {
|
|
1057
|
+
return this.activeI18n.getWeekdayLabel(weekday);
|
|
1058
|
+
}
|
|
1059
|
+
getWeekdayShortName(weekday) {
|
|
1060
|
+
return this.activeI18n.getWeekdayShortName(weekday);
|
|
1061
|
+
}
|
|
1062
|
+
getDayAriaLabel(date) {
|
|
1063
|
+
return this.activeI18n.getDayAriaLabel(date);
|
|
1064
|
+
}
|
|
1065
|
+
getYearNumerals(year) {
|
|
1066
|
+
return this.activeI18n.getYearNumerals(year);
|
|
1067
|
+
}
|
|
1068
|
+
getWeekNumerals(weekNumber) {
|
|
1069
|
+
return this.activeI18n.getWeekNumerals(weekNumber);
|
|
1070
|
+
}
|
|
1071
|
+
getDayNumerals(date) {
|
|
1072
|
+
return this.activeI18n.getDayNumerals(date);
|
|
1073
|
+
}
|
|
1074
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
1075
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n });
|
|
1076
|
+
}
|
|
1077
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n, decorators: [{
|
|
1078
|
+
type: Injectable
|
|
1079
|
+
}] });
|
|
1080
|
+
|
|
1081
|
+
class GregorianCalendarComponent {
|
|
1082
|
+
i18n;
|
|
1083
|
+
cdr;
|
|
1084
|
+
model;
|
|
1085
|
+
dateSelected = new EventEmitter();
|
|
1086
|
+
language = 'en';
|
|
1087
|
+
startDate;
|
|
1088
|
+
calendar = new NgbCalendarGregorian();
|
|
1089
|
+
constructor(i18n, cdr) {
|
|
1090
|
+
this.i18n = i18n;
|
|
1091
|
+
this.cdr = cdr;
|
|
1092
|
+
}
|
|
1093
|
+
ngOnChanges(changes) {
|
|
1094
|
+
if (changes['model'] && changes['model'].currentValue) {
|
|
1095
|
+
this.startDate = { ...changes['model'].currentValue };
|
|
1096
|
+
}
|
|
1097
|
+
if (changes['language'] && this.i18n instanceof DynamicGregorianI18n) {
|
|
1098
|
+
this.i18n.setLanguage(this.language);
|
|
1099
|
+
this.cdr.detectChanges();
|
|
1100
|
+
}
|
|
1101
|
+
}
|
|
1102
|
+
onDateChange(date) {
|
|
1103
|
+
this.model = date;
|
|
1104
|
+
this.startDate = { ...date };
|
|
1105
|
+
}
|
|
1106
|
+
isToday(date) {
|
|
1107
|
+
const today = this.calendar.getToday();
|
|
1108
|
+
return date.year === today.year &&
|
|
1109
|
+
date.month === today.month &&
|
|
1110
|
+
date.day === today.day;
|
|
1111
|
+
}
|
|
1112
|
+
isDisabled = () => false;
|
|
1113
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, deps: [{ token: i1$6.NgbDatepickerI18n }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1114
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: GregorianCalendarComponent, isStandalone: true, selector: "app-gregorian-calendar", inputs: { model: "model", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
|
|
1115
|
+
{ provide: NgbCalendar, useClass: NgbCalendarGregorian },
|
|
1116
|
+
{ provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
|
|
1117
|
+
], usesOnChanges: true, ngImport: i0, template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n {{ date.day }}\r\n </span>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1118
|
+
}
|
|
1119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, decorators: [{
|
|
1120
|
+
type: Component,
|
|
1121
|
+
args: [{ selector: "app-gregorian-calendar", standalone: true, imports: [NgbDatepickerModule, FormsModule], providers: [
|
|
1122
|
+
{ provide: NgbCalendar, useClass: NgbCalendarGregorian },
|
|
1123
|
+
{ provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
|
|
1124
|
+
], template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n {{ date.day }}\r\n </span>\r\n</ng-template>\r\n" }]
|
|
1125
|
+
}], ctorParameters: () => [{ type: i1$6.NgbDatepickerI18n }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
|
|
1126
|
+
type: Input
|
|
1127
|
+
}], dateSelected: [{
|
|
1128
|
+
type: Output
|
|
1129
|
+
}], language: [{
|
|
1130
|
+
type: Input
|
|
1131
|
+
}] } });
|
|
1132
|
+
|
|
1133
|
+
class DatePickerSwitcherComponent extends BaseInputComponent {
|
|
1134
|
+
type = 'text';
|
|
1135
|
+
contentType = 'text';
|
|
1136
|
+
size = "small";
|
|
1137
|
+
prefix;
|
|
1138
|
+
rows = 2;
|
|
1139
|
+
cols = 20;
|
|
1140
|
+
autoResize = true;
|
|
1141
|
+
basicInput;
|
|
1142
|
+
noStyle;
|
|
1143
|
+
hideOptionalLabel;
|
|
1144
|
+
inputDirection = 'inherit';
|
|
1145
|
+
variant = 'over';
|
|
1146
|
+
defaultColor = '#DFE0E6';
|
|
1147
|
+
formattedDate = '';
|
|
1148
|
+
openCalender = new EventEmitter();
|
|
1149
|
+
constructor() {
|
|
1150
|
+
super();
|
|
1151
|
+
}
|
|
1152
|
+
ngOnChanges(changes) {
|
|
1153
|
+
if (changes['formattedDate'] && changes['formattedDate'].currentValue) {
|
|
1154
|
+
// Update the FormControl value if parent changes the formattedDate
|
|
1155
|
+
this.control.setValue(changes['formattedDate'].currentValue, { emitEvent: false });
|
|
1156
|
+
}
|
|
1157
|
+
}
|
|
1158
|
+
ngOnInit() {
|
|
1159
|
+
this.control.setValue(this.formattedDate);
|
|
1160
|
+
}
|
|
1161
|
+
clearButtonClick(e) {
|
|
1162
|
+
this.control.setValue(null);
|
|
1163
|
+
}
|
|
1164
|
+
openCalendar(isOpen) {
|
|
1165
|
+
this.openCalender.emit(isOpen);
|
|
1166
|
+
}
|
|
1167
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1168
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerSwitcherComponent, isStandalone: true, selector: "stc-date-picker-switcher", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor", formattedDate: "formattedDate" }, outputs: { openCalender: "openCalender" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"true\" (focus)=\"openCalendar(true)\"\r\n (click)=\"openCalendar(true)\" [pSize]=\"'small'\" style=\"direction: rtl; unicode-bidi: plaintext;\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \" [disabled]=\"disabled\" [name]=\"name\" pInputText\r\n class=\"w-full\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.my-custom-datepicker-panel{display:none!important}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1169
|
+
}
|
|
1170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerSwitcherComponent, decorators: [{
|
|
1171
|
+
type: Component,
|
|
1172
|
+
args: [{ selector: 'stc-date-picker-switcher', standalone: true, imports: [
|
|
1173
|
+
FormsModule,
|
|
1174
|
+
ReactiveFormsModule,
|
|
1175
|
+
NgClass,
|
|
1176
|
+
InputText,
|
|
1177
|
+
DatePickerModule,
|
|
1178
|
+
ValidationErrorsPipe,
|
|
1179
|
+
TranslatePipe,
|
|
1180
|
+
FloatLabelModule,
|
|
1181
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"true\" (focus)=\"openCalendar(true)\"\r\n (click)=\"openCalendar(true)\" [pSize]=\"'small'\" style=\"direction: rtl; unicode-bidi: plaintext;\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \" [disabled]=\"disabled\" [name]=\"name\" pInputText\r\n class=\"w-full\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>\r\n", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.my-custom-datepicker-panel{display:none!important}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
|
|
1182
|
+
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
1183
|
+
type: Input
|
|
1184
|
+
}], contentType: [{
|
|
1185
|
+
type: Input
|
|
1186
|
+
}], size: [{
|
|
1187
|
+
type: Input
|
|
1188
|
+
}], prefix: [{
|
|
1189
|
+
type: Input
|
|
1190
|
+
}], rows: [{
|
|
1191
|
+
type: Input
|
|
1192
|
+
}], cols: [{
|
|
1193
|
+
type: Input
|
|
1194
|
+
}], autoResize: [{
|
|
1195
|
+
type: Input
|
|
1196
|
+
}], basicInput: [{
|
|
1197
|
+
type: Input
|
|
1198
|
+
}], noStyle: [{
|
|
1199
|
+
type: Input
|
|
1200
|
+
}], hideOptionalLabel: [{
|
|
1201
|
+
type: Input
|
|
1202
|
+
}], inputDirection: [{
|
|
1203
|
+
type: Input
|
|
1204
|
+
}], variant: [{
|
|
1205
|
+
type: Input
|
|
1206
|
+
}], defaultColor: [{
|
|
1207
|
+
type: Input
|
|
1208
|
+
}], formattedDate: [{
|
|
1209
|
+
type: Input
|
|
1210
|
+
}], openCalender: [{
|
|
1211
|
+
type: Output
|
|
1212
|
+
}] } });
|
|
1213
|
+
|
|
1214
|
+
class DualCalendarComponent {
|
|
1215
|
+
selectedDate = '';
|
|
1216
|
+
control = new FormControl({ value: null, disabled: false }, []);
|
|
1217
|
+
mode = 'gregorian';
|
|
1218
|
+
gregorianModel;
|
|
1219
|
+
hijriModel;
|
|
1220
|
+
currentLang = 'ar';
|
|
1221
|
+
selectButtonChange = new EventEmitter();
|
|
1222
|
+
isCalendarOpen = false;
|
|
1223
|
+
calendarContainer;
|
|
1224
|
+
constructor() { }
|
|
1225
|
+
onDocumentClick(event) {
|
|
1226
|
+
if (!this.calendarContainer)
|
|
1227
|
+
return;
|
|
1228
|
+
const clickedInside = this.calendarContainer.nativeElement.contains(event.target);
|
|
1229
|
+
if (!clickedInside) {
|
|
1230
|
+
this.isCalendarOpen = false;
|
|
1231
|
+
}
|
|
1232
|
+
}
|
|
1233
|
+
onSelectGregorian(date) {
|
|
1234
|
+
this.gregorianModel = date;
|
|
1235
|
+
const m = moment(`${date.year}-${date.month}-${date.day}`, 'YYYY-M-D');
|
|
1236
|
+
this.hijriModel = {
|
|
1237
|
+
year: +m.format('iYYYY'),
|
|
1238
|
+
month: +m.format('iM'),
|
|
1239
|
+
day: +m.format('iD')
|
|
1240
|
+
};
|
|
1241
|
+
this.selectedDate = this.formatHijri(m);
|
|
1242
|
+
this.isCalendarOpen = false;
|
|
1243
|
+
}
|
|
1244
|
+
onSelectHijri(date) {
|
|
1245
|
+
this.hijriModel = date;
|
|
1246
|
+
const m = moment(`${date.year}-${date.month}-${date.day}`, 'iYYYY-iM-iD');
|
|
1247
|
+
this.gregorianModel = {
|
|
1248
|
+
year: +m.format('YYYY'),
|
|
1249
|
+
month: +m.format('M'),
|
|
1250
|
+
day: +m.format('D')
|
|
1251
|
+
};
|
|
1252
|
+
this.selectedDate = this.formatHijri(m);
|
|
1253
|
+
this.isCalendarOpen = false;
|
|
1254
|
+
}
|
|
1255
|
+
showCalender(isOpen) {
|
|
1256
|
+
this.isCalendarOpen = isOpen;
|
|
1257
|
+
}
|
|
1258
|
+
formatHijri(m) {
|
|
1259
|
+
const hijriDay = m.format('iD');
|
|
1260
|
+
const hijriMonth = getHijriMonthName(this.currentLang, +m.format('iM'));
|
|
1261
|
+
const gregorianDay = m.format('D');
|
|
1262
|
+
const gregorianMonth = getGregorianMonthName(this.currentLang, +m.format('M'));
|
|
1263
|
+
const gregorianYear = m.format('YYYY');
|
|
1264
|
+
const hijriYear = m.format('iYYYY');
|
|
1265
|
+
return `${gregorianDay} ${gregorianMonth} ${gregorianYear} - ${hijriDay} ${hijriMonth} ${hijriYear}`;
|
|
1266
|
+
}
|
|
1267
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1268
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DualCalendarComponent, isStandalone: true, selector: "app-dual-calendar", inputs: { control: "control" }, outputs: { selectButtonChange: "selectButtonChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
1269
|
+
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
|
|
1270
|
+
], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], ngImport: i0, template: "<div class=\"calender-content \" #calendarContainer>\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"'Select Date'\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n\r\n <!-- calender.html -->\r\n <div dir=\"rtl\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\" >\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">\u0646\u0648\u0639 \u0627\u0644\u062A\u0642\u0648\u064A\u0645</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" (click)=\" mode='gregorian'\">\r\n \u0627\u0644\u0645\u064A\u0644\u0627\u062F\u064A\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" (click)=\" mode='hijri'\">\r\n \u0647\u062C\u0631\u064A\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n\r\n</div>\r\n", styles: [".calendar-wrapper{font-family:Tajawal,sans-serif;max-width:375px;padding:15px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative;padding-top:10px}.calendar-wrapper{position:absolute;top:100%;left:0;width:100%;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: HijriCalendarComponent, selector: "app-hijri-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "component", type: DatePickerSwitcherComponent, selector: "stc-date-picker-switcher", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "formattedDate"], outputs: ["openCalender"] }, { kind: "component", type: GregorianCalendarComponent, selector: "app-gregorian-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }], animations: [
|
|
1271
|
+
trigger('slideDown', [
|
|
1272
|
+
state('closed', style({
|
|
1273
|
+
height: '0px',
|
|
1274
|
+
opacity: 0,
|
|
1275
|
+
overflow: 'hidden'
|
|
1276
|
+
})),
|
|
1277
|
+
state('open', style({
|
|
1278
|
+
height: '*',
|
|
1279
|
+
opacity: 1,
|
|
1280
|
+
overflow: 'hidden'
|
|
1281
|
+
})),
|
|
1282
|
+
transition('closed <=> open', [
|
|
1283
|
+
animate('300ms ease')
|
|
1284
|
+
])
|
|
1285
|
+
])
|
|
1286
|
+
], encapsulation: i0.ViewEncapsulation.None });
|
|
1287
|
+
}
|
|
1288
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, decorators: [{
|
|
1289
|
+
type: Component,
|
|
1290
|
+
args: [{ selector: 'app-dual-calendar', animations: [
|
|
1291
|
+
trigger('slideDown', [
|
|
1292
|
+
state('closed', style({
|
|
1293
|
+
height: '0px',
|
|
1294
|
+
opacity: 0,
|
|
1295
|
+
overflow: 'hidden'
|
|
1296
|
+
})),
|
|
1297
|
+
state('open', style({
|
|
1298
|
+
height: '*',
|
|
1299
|
+
opacity: 1,
|
|
1300
|
+
overflow: 'hidden'
|
|
1301
|
+
})),
|
|
1302
|
+
transition('closed <=> open', [
|
|
1303
|
+
animate('300ms ease')
|
|
1304
|
+
])
|
|
1305
|
+
])
|
|
1306
|
+
], imports: [
|
|
1307
|
+
NgbDatepickerModule,
|
|
1308
|
+
FormsModule,
|
|
1309
|
+
FormsModule,
|
|
1310
|
+
ReactiveFormsModule,
|
|
1311
|
+
DatePickerModule,
|
|
1312
|
+
FloatLabelModule,
|
|
1313
|
+
HijriCalendarComponent,
|
|
1314
|
+
DatePickerSwitcherComponent,
|
|
1315
|
+
GregorianCalendarComponent
|
|
1316
|
+
], providers: [
|
|
1317
|
+
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
|
|
1318
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content \" #calendarContainer>\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"'Select Date'\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n\r\n <!-- calender.html -->\r\n <div dir=\"rtl\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\" >\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">\u0646\u0648\u0639 \u0627\u0644\u062A\u0642\u0648\u064A\u0645</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" (click)=\" mode='gregorian'\">\r\n \u0627\u0644\u0645\u064A\u0644\u0627\u062F\u064A\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" (click)=\" mode='hijri'\">\r\n \u0647\u062C\u0631\u064A\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n\r\n</div>\r\n", styles: [".calendar-wrapper{font-family:Tajawal,sans-serif;max-width:375px;padding:15px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative;padding-top:10px}.calendar-wrapper{position:absolute;top:100%;left:0;width:100%;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important}\n"] }]
|
|
1319
|
+
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
1320
|
+
type: Input
|
|
1321
|
+
}], selectButtonChange: [{
|
|
1322
|
+
type: Output
|
|
1323
|
+
}], calendarContainer: [{
|
|
1324
|
+
type: ViewChild,
|
|
1325
|
+
args: ['calendarContainer']
|
|
1326
|
+
}], onDocumentClick: [{
|
|
1327
|
+
type: HostListener,
|
|
1328
|
+
args: ['document:click', ['$event']]
|
|
1329
|
+
}] } });
|
|
1330
|
+
|
|
763
1331
|
class DynamicFormComponent {
|
|
764
1332
|
dynamicFormData;
|
|
765
1333
|
// Generic field change outputs (optional for consumers)
|
|
@@ -778,10 +1346,10 @@ class DynamicFormComponent {
|
|
|
778
1346
|
this.inputsMap = this.dynamicFormData?.inputsMap;
|
|
779
1347
|
this.inputsNames = Object.keys(this.inputsMap || {});
|
|
780
1348
|
}
|
|
781
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
782
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1349
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1350
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, outputs: { selectButtonChange: "selectButtonChange", selectChange: "selectChange", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.HIJRI_DATE_PICKER) {\r\n <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\" ></app-dual-calendar>\r\n }\r\n\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n }\r\n @case (fieldType.INPUT) {\r\n <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? true\"\r\n [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n @if(inputsMap[inputName].maxLength){\r\n <small class=\"text-sm text-gray-600 self-end\">\r\n {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n <span>\r\n / {{ inputsMap[inputName].maxLength}}\r\n </span>\r\n </small>\r\n }\r\n </stc-input>\r\n }\r\n @case (fieldType.SELECT) {\r\n <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"/>\r\n }\r\n @case (fieldType.SWITCH) {\r\n <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n [checked]=\"getFormControl(inputName, formGroup).value\"\r\n (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n }\r\n @case (fieldType.AUTO_COMPLETE) {\r\n <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col-span-12\">\r\n <small class=\"p-error text-red-700\">\r\n @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n track error) {\r\n {{ error }}\r\n }\r\n </small>\r\n </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "component", type: DualCalendarComponent, selector: "app-dual-calendar", inputs: ["control"], outputs: ["selectButtonChange"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "size", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
|
|
783
1351
|
}
|
|
784
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
785
1353
|
type: Component,
|
|
786
1354
|
args: [{ selector: 'app-dynamic-form', standalone: true, imports: [
|
|
787
1355
|
CommonModule,
|
|
@@ -790,11 +1358,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
790
1358
|
ValidationErrorsPipe,
|
|
791
1359
|
TranslateModule,
|
|
792
1360
|
SelectButtonComponent,
|
|
1361
|
+
DualCalendarComponent,
|
|
793
1362
|
InputComponent,
|
|
794
1363
|
SelectComponent,
|
|
795
1364
|
AutoCompleteComponent,
|
|
796
1365
|
SwitchComponent,
|
|
797
|
-
], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n }\r\n @case (fieldType.INPUT) {\r\n <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? true\"\r\n [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n @if(inputsMap[inputName].maxLength){\r\n <small class=\"text-sm text-gray-600 self-end\">\r\n {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n <span>\r\n / {{ inputsMap[inputName].maxLength}}\r\n </span>\r\n </small>\r\n }\r\n </stc-input>\r\n }\r\n @case (fieldType.SELECT) {\r\n <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"
|
|
1366
|
+
], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.HIJRI_DATE_PICKER) {\r\n <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\" ></app-dual-calendar>\r\n }\r\n\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n }\r\n @case (fieldType.INPUT) {\r\n <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? true\"\r\n [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n @if(inputsMap[inputName].maxLength){\r\n <small class=\"text-sm text-gray-600 self-end\">\r\n {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n <span>\r\n / {{ inputsMap[inputName].maxLength}}\r\n </span>\r\n </small>\r\n }\r\n </stc-input>\r\n }\r\n @case (fieldType.SELECT) {\r\n <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"/>\r\n }\r\n @case (fieldType.SWITCH) {\r\n <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n [checked]=\"getFormControl(inputName, formGroup).value\"\r\n (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n }\r\n @case (fieldType.AUTO_COMPLETE) {\r\n <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col-span-12\">\r\n <small class=\"p-error text-red-700\">\r\n @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n track error) {\r\n {{ error }}\r\n }\r\n </small>\r\n </div>\r\n</form>\r\n" }]
|
|
798
1367
|
}], propDecorators: { dynamicFormData: [{
|
|
799
1368
|
type: Input,
|
|
800
1369
|
args: [{ required: true }]
|
|
@@ -838,10 +1407,10 @@ class ConfirmationDialogComponent extends DynamicDialogRef {
|
|
|
838
1407
|
close() {
|
|
839
1408
|
this._ref.close(false);
|
|
840
1409
|
}
|
|
841
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
842
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1410
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1411
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirm-dialog", providers: [DialogService, DynamicDialogStyle], usesInheritance: true, ngImport: i0, template: "@if (dynamicDialogConfig.data) {\r\n<div class=\"confirmation-dialog\">\r\n <div class=\"dialog-wrapper\">\r\n @if (dynamicDialogConfig.data) {\r\n <div class=\"confirmation-dialog__content my-4\">\r\n @if (dynamicDialogConfig.data.dialogIcon) {\r\n <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n }\r\n <p class=\"confirmation-dialog__message text-xl mb-2\">\r\n {{ dynamicDialogConfig.data.message }}\r\n </p>\r\n @if (dynamicDialogConfig.data.hint) {\r\n <p class=\"confirmation-dialog__hint font-normal text-base\">\r\n {{ dynamicDialogConfig.data.hint }}\r\n </p>\r\n }\r\n @if (dynamicDialogConfig.data.inputForm) {\r\n <app-dynamic-form [dynamicFormData]=\"dialogFormData\"></app-dynamic-form>\r\n }\r\n </div>\r\n }\r\n <div class=\"confirmation-dialog__actions flex gap-2 mt-4\">\r\n <app-button [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\"\r\n [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\" [severity]=\"'primary'\"\r\n [id]=\"dynamicDialogConfig.data.confirmBtnId\" [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n [label]=\"dynamicDialogConfig.data.confirmBtnLabel\"\r\n [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\" [styleClass]=\"'confirmation-btn'\"\r\n (click)=\"submit()\" />\r\n <app-button [title]=\"dynamicDialogConfig.data?.closeLabel || ('actions.cancel' | translate)\"\r\n [severity]=\"'primary'\" variant=\"outlined\" [label]=\"dynamicDialogConfig.data.cancelBtnLabel\"\r\n [id]=\"dynamicDialogConfig.data.cancelBtnId\" [styleClass]=\"'cancel-btn confirmation-btn cancel-btn'\"\r\n (click)=\"close()\" />\r\n </div>\r\n </div>\r\n\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["dynamicFormData"], outputs: ["selectButtonChange", "selectChange", "switchChange", "autoCompleteSearch", "autoCompleteSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
843
1412
|
}
|
|
844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
845
1414
|
type: Component,
|
|
846
1415
|
args: [{ selector: 'app-confirm-dialog', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
|
|
847
1416
|
AppButtonComponent,
|
|
@@ -860,10 +1429,10 @@ class ReadMoreComponent {
|
|
|
860
1429
|
toggleReadMore() {
|
|
861
1430
|
this.isExpanded = !this.isExpanded;
|
|
862
1431
|
}
|
|
863
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
864
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1432
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ReadMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1433
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ReadMoreComponent, isStandalone: true, selector: "app-read-more", inputs: { text: "text", styleClass: "styleClass", maxCharacters: "maxCharacters" }, ngImport: i0, template: "<p [class]=\"styleClass\">\r\n {{ isExpanded ? text : (text | slice : 0 : maxCharacters) }}\r\n @if (text.length > maxCharacters && !isExpanded) {\r\n <span>...</span>\r\n }\r\n @if (isExpanded) {\r\n <span>\r\n {{ text | slice : maxCharacters + 1 : text.length }}\r\n </span>\r\n }\r\n <br>\r\n @if (text.length > maxCharacters) {\r\n <span class=\"text-primary_light cursor-pointer\" (click)=\"toggleReadMore()\">\r\n {{ isExpanded ? ('less' | translate) : ('more' | translate) }}\r\n </span>\r\n }\r\n</p>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: SlicePipe, name: "slice" }] });
|
|
865
1434
|
}
|
|
866
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ReadMoreComponent, decorators: [{
|
|
867
1436
|
type: Component,
|
|
868
1437
|
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" }]
|
|
869
1438
|
}], propDecorators: { text: [{
|
|
@@ -882,10 +1451,10 @@ class AppAccordionComponent {
|
|
|
882
1451
|
title;
|
|
883
1452
|
contentBorderTop = true;
|
|
884
1453
|
accordionPanelBorder = true;
|
|
885
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
886
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
1454
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1455
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AppAccordionComponent, isStandalone: true, selector: "app-accordion", inputs: { iconName: "iconName", iconClass: "iconClass", iconPathCount: "iconPathCount", title: "title", contentBorderTop: "contentBorderTop", accordionPanelBorder: "accordionPanelBorder" }, ngImport: i0, template: "<p-accordion value=\"0\">\r\n <p-accordion-panel value=\"0\" [class.!border-0]=\"!accordionPanelBorder\">\r\n <p-accordion-header>\r\n <span class=\"flex items-center gap-2 w-full\">\r\n <app-ico-moon-card [iconClass]=\"'text-[24px] text-secondary'\" [iconName]=\"'font-icon-'+iconName\" />\r\n <span class=\"font-bold whitespace-nowrap\">{{title}}</span>\r\n </span>\r\n </p-accordion-header>\r\n <p-accordion-content>\r\n <div [ngClass]=\"{'border-t-2 border-gray-light pt-2': contentBorderTop, }\">\r\n <ng-content></ng-content>\r\n </div>\r\n </p-accordion-content>\r\n </p-accordion-panel>\r\n</p-accordion>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$4.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i2$4.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i2$4.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i2$4.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: IcoMoonIconComponent, selector: "app-ico-moon-card", inputs: ["iconName", "iconClass", "iconPathCount"] }] });
|
|
887
1456
|
}
|
|
888
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1457
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppAccordionComponent, decorators: [{
|
|
889
1458
|
type: Component,
|
|
890
1459
|
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" }]
|
|
891
1460
|
}], propDecorators: { iconName: [{
|
|
@@ -912,10 +1481,10 @@ class UserAutocompleteCardComponent {
|
|
|
912
1481
|
onDelete() {
|
|
913
1482
|
this.delete.emit(this.userData);
|
|
914
1483
|
}
|
|
915
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
916
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1484
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UserAutocompleteCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1485
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UserAutocompleteCardComponent, isStandalone: true, selector: "app-user-autocomplete-card", inputs: { userData: "userData", explicitRole: "explicitRole", showDeleteAction: "showDeleteAction" }, outputs: { select: "select", delete: "delete" }, ngImport: i0, template: "<div class=\"flex gap-2 items-center justify-between p-4 rounded mb-4 border border-dotted border-gray-300 bg-gray-100\">\r\n <div class=\"flex gap-4 items-center\">\r\n <img [alt]=\"userData.name\" [src]=\"userData.profileImage\" class=\"rounded-full object-cover w-[48px] h-[48px]\" />\r\n <div class=\"flex flex-col justify-end\">\r\n <h4 class=\"font-bold text-[12px] text-gray-800 truncate max-w-[135px] dir-ltr\">\r\n {{ userData.name }}\r\n </h4>\r\n <p class=\"text-[12px] text-gray-700\">{{ explicitRole ? explicitRole : userData.position.name }}</p>\r\n </div>\r\n </div>\r\n <div class=\"flex-1 flex flex-col items-end\">\r\n <p class=\"text-[12px] text-purple-700 truncate max-w-[90px] dir-ltr\">{{ userData.email }}</p>\r\n <p class=\"text-[12px] text-gray-600 dir-ltr\">{{ userData.contact.mobile }}</p>\r\n </div>\r\n @if (showDeleteAction){\r\n <div class=\"flex gap-1 flex-nowrap\">\r\n <app-button (clickEmitter)=\"onDelete()\" [rounded]=\"true\" [size]=\"'large'\" [text]=\"true\" icon=\"font-icon-trash\"/>\r\n </div>\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
917
1486
|
}
|
|
918
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UserAutocompleteCardComponent, decorators: [{
|
|
919
1488
|
type: Component,
|
|
920
1489
|
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" }]
|
|
921
1490
|
}], propDecorators: { select: [{
|
|
@@ -1033,13 +1602,13 @@ class AppBreadcrumbComponent {
|
|
|
1033
1602
|
}
|
|
1034
1603
|
return undefined;
|
|
1035
1604
|
}
|
|
1036
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1037
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1605
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppBreadcrumbComponent, deps: [{ token: i1$7.ActivatedRoute }, { token: i1$7.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
1606
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AppBreadcrumbComponent, isStandalone: true, selector: "app-breadcrumb", inputs: { items: "items" }, ngImport: i0, template: "@if(isShown) {\r\n<nav class=\"flex gap-x-3 text-[12px] w-full items-center mb-5\">\r\n <div class=\"card flex justify-center\">\r\n <p-breadcrumb [model]=\"items\"></p-breadcrumb>\r\n </div>\r\n</nav>\r\n}\r\n", styles: [".p-breadcrumb-list li:first-child a{@apply text-secondary;}.p-breadcrumb-list .p-breadcrumb-separator{transform:scale(.7);display:none}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-link{padding:0 4px}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label{@apply text-light_red relative;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:hover{@apply text-light_red;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:before{content:\"/\";@apply inline-block absolute text-gray-900;inset-inline-end:-9px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: RouterModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1038
1607
|
}
|
|
1039
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1608
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AppBreadcrumbComponent, decorators: [{
|
|
1040
1609
|
type: Component,
|
|
1041
1610
|
args: [{ selector: 'app-breadcrumb', standalone: true, imports: [CommonModule, Breadcrumb, RouterModule], encapsulation: ViewEncapsulation.None, template: "@if(isShown) {\r\n<nav class=\"flex gap-x-3 text-[12px] w-full items-center mb-5\">\r\n <div class=\"card flex justify-center\">\r\n <p-breadcrumb [model]=\"items\"></p-breadcrumb>\r\n </div>\r\n</nav>\r\n}\r\n", styles: [".p-breadcrumb-list li:first-child a{@apply text-secondary;}.p-breadcrumb-list .p-breadcrumb-separator{transform:scale(.7);display:none}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-link{padding:0 4px}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label{@apply text-light_red relative;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:hover{@apply text-light_red;}.p-breadcrumb-item:not(:last-of-type) .p-breadcrumb-item-label:before{content:\"/\";@apply inline-block absolute text-gray-900;inset-inline-end:-9px}\n"] }]
|
|
1042
|
-
}], ctorParameters: () => [{ type: i1$
|
|
1611
|
+
}], ctorParameters: () => [{ type: i1$7.ActivatedRoute }, { type: i1$7.Router }], propDecorators: { items: [{
|
|
1043
1612
|
type: Input
|
|
1044
1613
|
}] } });
|
|
1045
1614
|
|
|
@@ -1071,10 +1640,10 @@ class DataInjectorPipe {
|
|
|
1071
1640
|
transform(data) {
|
|
1072
1641
|
return createCustomInjector(this.injector, SIDEBAR_DATA, data);
|
|
1073
1642
|
}
|
|
1074
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1075
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.
|
|
1643
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1644
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: DataInjectorPipe, isStandalone: true, name: "dataInjector" });
|
|
1076
1645
|
}
|
|
1077
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataInjectorPipe, decorators: [{
|
|
1078
1647
|
type: Pipe,
|
|
1079
1648
|
args: [{
|
|
1080
1649
|
name: 'dataInjector',
|
|
@@ -1101,10 +1670,10 @@ class SideBarDynamicComponent {
|
|
|
1101
1670
|
// reset Sidebar token
|
|
1102
1671
|
createCustomInjector(this.parentInjector, SIDEBAR_DATA, null);
|
|
1103
1672
|
}
|
|
1104
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1105
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1673
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideBarDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1674
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SideBarDynamicComponent, isStandalone: true, selector: "app-side-bar-dynamic", ngImport: i0, template: "<p-drawer (onHide)=\"dynamicSidebarService.close()\" [(visible)]=\"sidebarConfig.visible\"\r\n [closable]=\"sidebarConfig.closable\" [closeOnEscape]=\"sidebarConfig.closeOnEscape\"\r\n [dismissible]=\"sidebarConfig.dismissible\" [ngClass]=\"{ show: sidebarConfig.show }\" [position]=\"'left'\" appendTo=\"body\"\r\n id=\"main-drawer\"\r\n styleClass=\"p-drawer-{{ sidebarConfig.sidebarSize }} custom-content bg-white {{ sidebarConfig.styleClass }}\">\r\n <ng-template pTemplate=\"header\">{{ sidebarConfig.title }}</ng-template>\r\n <ng-template pTemplate=\"content\">\r\n <ng-container [ngComponentOutletInjector]=\"dynamicSidebarService.contentComponentData | dataInjector\"\r\n [ngComponentOutlet]=\"dynamicSidebarService.contentComponentRef\"></ng-container>\r\n </ng-template>\r\n @if (sidebarConfig.showSaveBtn || sidebarConfig.showSaveAndMoreBtn || sidebarConfig.showCancelBtn) {\r\n <ng-template pTemplate=\"footer\">\r\n <section class=\"flex justify-between bg-gray-200 py-4\" id=\"sidebar-footer\">\r\n <div class=\"flex gap-2\">\r\n @if (sidebarConfig.showSaveBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.submit(true)\"\r\n [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n [icon]=\"sidebarConfig!.actions!.save!.icon || 'font-icon-plus'\"\r\n [iconPos]=\"sidebarConfig!.actions!.save!.iconPos || 'right'\"\r\n [styleClass]=\"sidebarConfig!.actions!.save!.style || 'danger'\"\r\n [title]=\"sidebarConfig!.actions!.save!.title || ('actions.save' | translate)\"\r\n [variant]=\"sidebarConfig!.actions!.save!.variant\" />\r\n }\r\n @if (sidebarConfig.showSaveAndMoreBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.submit()\"\r\n [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n [icon]=\"sidebarConfig!.actions!.saveAndMore!.icon || 'font-icon-plus'\"\r\n [iconPos]=\"sidebarConfig!.actions!.saveAndMore!.iconPos || 'right'\"\r\n [styleClass]=\"sidebarConfig!.actions!.saveAndMore!.style || 'danger'\"\r\n [title]=\"sidebarConfig!.actions!.saveAndMore!.title || ('actions.save_and_and_more' | translate)\"\r\n [variant]=\"sidebarConfig!.actions!.saveAndMore!.variant\" />\r\n\r\n }\r\n </div>\r\n @if (sidebarConfig.showCancelBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.cancel()\" [styleClass]=\"'secondary'\"\r\n [title]=\"'actions.cancel' | translate\" />\r\n }\r\n </section>\r\n </ng-template>\r\n }\r\n</p-drawer>", styles: [".sidebar.show{min-width:550px}\n"], dependencies: [{ kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "pipe", type: DataInjectorPipe, name: "dataInjector" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1106
1675
|
}
|
|
1107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1676
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideBarDynamicComponent, decorators: [{
|
|
1108
1677
|
type: Component,
|
|
1109
1678
|
args: [{ selector: "app-side-bar-dynamic", standalone: true, imports: [Drawer, NgClass, NgComponentOutlet, PrimeTemplate, DataInjectorPipe, AppButtonComponent, TranslatePipe], template: "<p-drawer (onHide)=\"dynamicSidebarService.close()\" [(visible)]=\"sidebarConfig.visible\"\r\n [closable]=\"sidebarConfig.closable\" [closeOnEscape]=\"sidebarConfig.closeOnEscape\"\r\n [dismissible]=\"sidebarConfig.dismissible\" [ngClass]=\"{ show: sidebarConfig.show }\" [position]=\"'left'\" appendTo=\"body\"\r\n id=\"main-drawer\"\r\n styleClass=\"p-drawer-{{ sidebarConfig.sidebarSize }} custom-content bg-white {{ sidebarConfig.styleClass }}\">\r\n <ng-template pTemplate=\"header\">{{ sidebarConfig.title }}</ng-template>\r\n <ng-template pTemplate=\"content\">\r\n <ng-container [ngComponentOutletInjector]=\"dynamicSidebarService.contentComponentData | dataInjector\"\r\n [ngComponentOutlet]=\"dynamicSidebarService.contentComponentRef\"></ng-container>\r\n </ng-template>\r\n @if (sidebarConfig.showSaveBtn || sidebarConfig.showSaveAndMoreBtn || sidebarConfig.showCancelBtn) {\r\n <ng-template pTemplate=\"footer\">\r\n <section class=\"flex justify-between bg-gray-200 py-4\" id=\"sidebar-footer\">\r\n <div class=\"flex gap-2\">\r\n @if (sidebarConfig.showSaveBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.submit(true)\"\r\n [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n [icon]=\"sidebarConfig!.actions!.save!.icon || 'font-icon-plus'\"\r\n [iconPos]=\"sidebarConfig!.actions!.save!.iconPos || 'right'\"\r\n [styleClass]=\"sidebarConfig!.actions!.save!.style || 'danger'\"\r\n [title]=\"sidebarConfig!.actions!.save!.title || ('actions.save' | translate)\"\r\n [variant]=\"sidebarConfig!.actions!.save!.variant\" />\r\n }\r\n @if (sidebarConfig.showSaveAndMoreBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.submit()\"\r\n [disabled]=\"dynamicSidebarService.isButtonDisabled()\"\r\n [icon]=\"sidebarConfig!.actions!.saveAndMore!.icon || 'font-icon-plus'\"\r\n [iconPos]=\"sidebarConfig!.actions!.saveAndMore!.iconPos || 'right'\"\r\n [styleClass]=\"sidebarConfig!.actions!.saveAndMore!.style || 'danger'\"\r\n [title]=\"sidebarConfig!.actions!.saveAndMore!.title || ('actions.save_and_and_more' | translate)\"\r\n [variant]=\"sidebarConfig!.actions!.saveAndMore!.variant\" />\r\n\r\n }\r\n </div>\r\n @if (sidebarConfig.showCancelBtn) {\r\n <app-button (clickEmitter)=\"dynamicSidebarService.cancel()\" [styleClass]=\"'secondary'\"\r\n [title]=\"'actions.cancel' | translate\" />\r\n }\r\n </section>\r\n </ng-template>\r\n }\r\n</p-drawer>", styles: [".sidebar.show{min-width:550px}\n"] }]
|
|
1110
1679
|
}] });
|
|
@@ -1223,10 +1792,10 @@ class DynamicSidebarService {
|
|
|
1223
1792
|
dismissible: true
|
|
1224
1793
|
};
|
|
1225
1794
|
}
|
|
1226
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1227
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1795
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarService, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1796
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarService, providedIn: "root" });
|
|
1228
1797
|
}
|
|
1229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1798
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarService, decorators: [{
|
|
1230
1799
|
type: Injectable,
|
|
1231
1800
|
args: [{
|
|
1232
1801
|
providedIn: "root"
|
|
@@ -1249,18 +1818,21 @@ class ConfirmationDialogService {
|
|
|
1249
1818
|
styleClass: 'confirmation-dialog-wrapper',
|
|
1250
1819
|
breakpoints: data.breakpoints,
|
|
1251
1820
|
});
|
|
1821
|
+
if (!ref) {
|
|
1822
|
+
return of(false); // or EMPTY / throwError — depending on your logic
|
|
1823
|
+
}
|
|
1252
1824
|
// Emit true/false when dialog closes
|
|
1253
1825
|
return ref.onClose.pipe(filter$1((res) => res !== undefined), map((res) => !!res));
|
|
1254
1826
|
}
|
|
1255
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1256
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1827
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogService, deps: [{ token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1828
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogService, providedIn: 'root' });
|
|
1257
1829
|
}
|
|
1258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1830
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogService, decorators: [{
|
|
1259
1831
|
type: Injectable,
|
|
1260
1832
|
args: [{
|
|
1261
1833
|
providedIn: 'root',
|
|
1262
1834
|
}]
|
|
1263
|
-
}], ctorParameters: () => [{ type: i1$
|
|
1835
|
+
}], ctorParameters: () => [{ type: i1$8.DialogService }] });
|
|
1264
1836
|
|
|
1265
1837
|
class BottomSheetComponent {
|
|
1266
1838
|
show = false;
|
|
@@ -1271,10 +1843,10 @@ class BottomSheetComponent {
|
|
|
1271
1843
|
this.show = false;
|
|
1272
1844
|
this.onHide.emit(false);
|
|
1273
1845
|
}
|
|
1274
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1275
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1846
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1847
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: BottomSheetComponent, isStandalone: true, selector: "app-bottom-sheet", inputs: { show: "show", contentTemplate: "contentTemplate" }, outputs: { onHide: "onHide", onShow: "onShow" }, ngImport: i0, template: "<p-drawer\r\n (onHide)=\"hideBottomSheet()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"false\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'bottom'\"\r\n appendTo=\"body\"\r\n >\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"band\"></div>\r\n </ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.band{background-color:#dfe0e6;width:40px;height:4px;border-radius:24px;display:block}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500;justify-content:center;color:#090d0f;font-size:20px;flex-direction:column}.p-drawer-content{padding:0!important;margin:0!important}\n"], dependencies: [{ kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1276
1848
|
}
|
|
1277
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1849
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BottomSheetComponent, decorators: [{
|
|
1278
1850
|
type: Component,
|
|
1279
1851
|
args: [{ selector: "app-bottom-sheet", standalone: true, imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet, TooltipModule], encapsulation: ViewEncapsulation.None, template: "<p-drawer\r\n (onHide)=\"hideBottomSheet()\"\r\n (onShow)=\"onShow.emit($event)\"\r\n [(visible)]=\"show\"\r\n [closable]=\"false\"\r\n [ngClass]=\"{ show: show }\"\r\n [position]=\"'bottom'\"\r\n appendTo=\"body\"\r\n >\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"band\"></div>\r\n </ng-template>\r\n @if (contentTemplate) {\r\n <ng-template pTemplate=\"content\">\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </ng-template>\r\n }\r\n</p-drawer>\r\n", styles: [".sidebar.show{@apply min-w-[550px];}.band{background-color:#dfe0e6;width:40px;height:4px;border-radius:24px;display:block}.p-drawer-header,.p-drawer-footer{background-color:var(--gray-100)}.p-drawer-header{--p-drawer-header-padding: .75rem var(--p-overlay-modal-padding);font-weight:500;justify-content:center;color:#090d0f;font-size:20px;flex-direction:column}.p-drawer-content{padding:0!important;margin:0!important}\n"] }]
|
|
1280
1852
|
}], propDecorators: { show: [{
|
|
@@ -1335,10 +1907,10 @@ class DynamicSidebarComponent {
|
|
|
1335
1907
|
ngOnDestroy() {
|
|
1336
1908
|
this.destroy();
|
|
1337
1909
|
}
|
|
1338
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1339
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
1910
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1911
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DynamicSidebarComponent, isStandalone: true, selector: "app-dynamic-sidebar", inputs: { component: "component", data: "data", title: "title", actions: "actions", sidebarSize: "sidebarSize", closable: "closable", closeOnEscape: "closeOnEscape", dismissible: "dismissible", position: "position", styleClass: "styleClass", disabled: "disabled" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<p-drawer\r\n [(visible)]=\"show\"\r\n [position]=\"position\"\r\n appendTo=\"body\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n (onHide)=\"handleClose()\"\r\n [position]=\"'left'\"\r\n [styleClass]=\"'p-drawer-' + sidebarSize + ' custom-content bg-white ' + styleClass\">\r\n <ng-template pTemplate=\"header\">\r\n <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n </ng-template>\r\n <ng-template pTemplate=\"content\">\r\n <ng-template #contentContainer></ng-template>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"flex gap-4 mt-4\">\r\n <div class=\"flex-auto\">\r\n <app-button (click)=\"handleSubmit()\"\r\n [icon]=\"actions?.save?.icon\"\r\n [iconPos]=\"actions?.save?.iconPos || 'right'\"\r\n [styleClass]=\"(actions?.save?.style || 'danger') + ' w-full'\"\r\n [label]=\"actions?.save?.title || ('actions.submit' | translate)\"\r\n [variant]=\"actions?.save?.variant\"\r\n />\r\n </div>\r\n <app-button (click)=\"handleClose()\" severity=\"danger\" variant=\"outlined\"\r\n [label]=\"actions?.cancel?.title || ('actions.cancel' | translate)\" />\r\n </div>\r\n </ng-template>\r\n</p-drawer>\r\n", styles: [".flex-auto{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1$9.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1340
1912
|
}
|
|
1341
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarComponent, decorators: [{
|
|
1342
1914
|
type: Component,
|
|
1343
1915
|
args: [{ selector: "app-dynamic-sidebar", standalone: true, imports: [CommonModule, TranslatePipe, DrawerModule, TooltipModule, AppButtonComponent], template: "<p-drawer\r\n [(visible)]=\"show\"\r\n [position]=\"position\"\r\n appendTo=\"body\"\r\n [closable]=\"closable\"\r\n [closeOnEscape]=\"closeOnEscape\"\r\n [dismissible]=\"dismissible\"\r\n (onHide)=\"handleClose()\"\r\n [position]=\"'left'\"\r\n [styleClass]=\"'p-drawer-' + sidebarSize + ' custom-content bg-white ' + styleClass\">\r\n <ng-template pTemplate=\"header\">\r\n <p class=\"truncate\" [pTooltip]=\"title\">{{ title }}</p>\r\n </ng-template>\r\n <ng-template pTemplate=\"content\">\r\n <ng-template #contentContainer></ng-template>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"flex gap-4 mt-4\">\r\n <div class=\"flex-auto\">\r\n <app-button (click)=\"handleSubmit()\"\r\n [icon]=\"actions?.save?.icon\"\r\n [iconPos]=\"actions?.save?.iconPos || 'right'\"\r\n [styleClass]=\"(actions?.save?.style || 'danger') + ' w-full'\"\r\n [label]=\"actions?.save?.title || ('actions.submit' | translate)\"\r\n [variant]=\"actions?.save?.variant\"\r\n />\r\n </div>\r\n <app-button (click)=\"handleClose()\" severity=\"danger\" variant=\"outlined\"\r\n [label]=\"actions?.cancel?.title || ('actions.cancel' | translate)\" />\r\n </div>\r\n </ng-template>\r\n</p-drawer>\r\n", styles: [".flex-auto{flex:1 1 auto}\n"] }]
|
|
1344
1916
|
}], propDecorators: { component: [{
|
|
@@ -1400,10 +1972,10 @@ class DynamicSidebarV2Service {
|
|
|
1400
1972
|
this.sidebarRef = undefined;
|
|
1401
1973
|
}
|
|
1402
1974
|
}
|
|
1403
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1404
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1975
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarV2Service, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1976
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarV2Service, providedIn: 'root' });
|
|
1405
1977
|
}
|
|
1406
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1978
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicSidebarV2Service, decorators: [{
|
|
1407
1979
|
type: Injectable,
|
|
1408
1980
|
args: [{ providedIn: 'root' }]
|
|
1409
1981
|
}] });
|
|
@@ -1412,5 +1984,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
1412
1984
|
* Generated bundle index. Do not edit.
|
|
1413
1985
|
*/
|
|
1414
1986
|
|
|
1415
|
-
export { AppAccordionComponent, AppBreadcrumbComponent, AppButtonComponent, AppDropdownMenuComponent, AppTabsComponent, AutoCompleteComponent, BasicErrorKeysEnum, BottomSheetComponent, ConfirmationDialogComponent, ConfirmationDialogService, DatePickerComponent, DynamicFormComponent, DynamicSidebarService, DynamicSidebarV2Service, ErrorsWithValuesKeysEnum, FormFieldTypeEnum, FormUtils, FormValidationService, IcoMoonIconComponent, InputComponent, ReadMoreComponent, SelectButtonComponent, SelectComponent, SideBarComponent, SidebarConfigDefaults, SwitchComponent, UserAutocompleteCardComponent, UserInfoComponent, ValidationErrorsPipe };
|
|
1987
|
+
export { AppAccordionComponent, AppBreadcrumbComponent, AppButtonComponent, AppDropdownMenuComponent, AppTabsComponent, AutoCompleteComponent, BasicErrorKeysEnum, BottomSheetComponent, ConfirmationDialogComponent, ConfirmationDialogService, DatePickerComponent, DualCalendarComponent, DynamicFormComponent, DynamicSidebarService, DynamicSidebarV2Service, ErrorsWithValuesKeysEnum, FormFieldTypeEnum, FormUtils, FormValidationService, IcoMoonIconComponent, InputComponent, ReadMoreComponent, SelectButtonComponent, SelectComponent, SideBarComponent, SidebarConfigDefaults, SwitchComponent, UserAutocompleteCardComponent, UserInfoComponent, ValidationErrorsPipe };
|
|
1416
1988
|
//# sourceMappingURL=corp-products-ui-components.mjs.map
|