@vallift/ngl 20.0.2 → 21.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/vallift-ngl.mjs
CHANGED
|
@@ -149,10 +149,10 @@ class BaseApiService {
|
|
|
149
149
|
return this.baseUrl + url;
|
|
150
150
|
}
|
|
151
151
|
}
|
|
152
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
153
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
152
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BaseApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
153
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BaseApiService, providedIn: 'root' });
|
|
154
154
|
}
|
|
155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BaseApiService, decorators: [{
|
|
156
156
|
type: Injectable,
|
|
157
157
|
args: [{
|
|
158
158
|
providedIn: 'root'
|
|
@@ -400,10 +400,10 @@ class BaseControlValueAccessorV3 {
|
|
|
400
400
|
}
|
|
401
401
|
return false;
|
|
402
402
|
}
|
|
403
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
404
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
403
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BaseControlValueAccessorV3, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
404
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: BaseControlValueAccessorV3, isStandalone: true, selector: "ng-component", inputs: { errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: '', isInline: true });
|
|
405
405
|
}
|
|
406
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BaseControlValueAccessorV3, decorators: [{
|
|
407
407
|
type: Component,
|
|
408
408
|
args: [{
|
|
409
409
|
imports: [],
|
|
@@ -606,10 +606,10 @@ class PaginationState {
|
|
|
606
606
|
|
|
607
607
|
class SpinnerComponent {
|
|
608
608
|
borderColor = input('border-primary-500', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
|
|
609
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
610
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
609
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
610
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: SpinnerComponent, isStandalone: true, selector: "app-spinner", inputs: { borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-primary-500 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]\"\n [ngClass]=\"borderColor()\"\n role=\"status\">\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
611
611
|
}
|
|
612
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
612
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
613
613
|
type: Component,
|
|
614
614
|
args: [{ selector: 'app-spinner', standalone: true, imports: [
|
|
615
615
|
NgClass
|
|
@@ -624,10 +624,10 @@ class AppSvgIconComponent {
|
|
|
624
624
|
getStyle() {
|
|
625
625
|
return { ...this.svgStyle, 'width.px': this.size, 'height.px': this.size };
|
|
626
626
|
}
|
|
627
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
628
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
627
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AppSvgIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: AppSvgIconComponent, isStandalone: true, selector: "app-svg-icon", inputs: { src: "src", stretch: "stretch", size: "size", svgStyle: "svgStyle" }, ngImport: i0, template: "<svg-icon [src]=\"src\" [stretch]=\"stretch\" [svgStyle]=\"getStyle()\">\n</svg-icon>\n", styles: [""], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }] });
|
|
629
629
|
}
|
|
630
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
630
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AppSvgIconComponent, decorators: [{
|
|
631
631
|
type: Component,
|
|
632
632
|
args: [{ selector: 'app-svg-icon', standalone: true, imports: [
|
|
633
633
|
SvgIconComponent
|
|
@@ -730,10 +730,10 @@ class ButtonComponent {
|
|
|
730
730
|
formGroup.markAllAsTouched();
|
|
731
731
|
formGroup.markAsPristine();
|
|
732
732
|
}
|
|
733
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
734
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
733
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
734
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, buttonColor: { classPropertyName: "buttonColor", publicName: "buttonColor", isSignal: true, isRequired: false, transformFunction: null }, outlineColor: { classPropertyName: "outlineColor", publicName: "outlineColor", isSignal: true, isRequired: false, transformFunction: null }, textButtonColor: { classPropertyName: "textButtonColor", publicName: "textButtonColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n (click)=\"onClick()\"\n [type]=\"type()\"\n class=\"relative whitespace-nowrap\"\n [ngClass]=\"getButtonClass()\">\n\n @if (iconSrc()) {\n <app-svg-icon [src]=\"iconSrc()!\" [size]=\"iconSize()\" class=\"mr-3\"\n [ngClass]=\"loading() ? 'text-transparent' : getIconClass()\"></app-svg-icon>\n }\n\n <app-spinner class=\"w-min absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"\n [borderColor]=\"loading() ? getLoaderColor() : 'border-transparent'\"></app-spinner>\n\n <div [ngClass]=\"loading() ? 'text-transparent' : 'text-body2'\">\n <ng-content></ng-content>\n </div>\n\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }] });
|
|
735
735
|
}
|
|
736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
737
737
|
type: Component,
|
|
738
738
|
args: [{ selector: 'app-button', standalone: true, imports: [
|
|
739
739
|
NgClass,
|
|
@@ -753,10 +753,10 @@ class AlertDialogComponent {
|
|
|
753
753
|
onYesClicked() {
|
|
754
754
|
this.dialogRef.close(true);
|
|
755
755
|
}
|
|
756
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
757
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
756
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
757
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: AlertDialogComponent, isStandalone: true, selector: "app-alert-dialog", ngImport: i0, template: "<div class=\"flex flex-col gap-2 text-start px-4 py-3\">\n <p class=\"text-body1 text-error\">{{ data.title }}</p>\n <p class=\"text-body2\">{{ data.message }}</p>\n <div class=\"flex justify-end gap-4 mt-3\">\n <app-button appearance=\"outline\" (click)=\"onNoClicked()\">Cancel\n </app-button>\n <app-button buttonColor=\"bg-primary-500\"\n (click)=\"onYesClicked()\">Yes\n </app-button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["type", "disabled", "fullWidth", "appearance", "loading", "iconSize", "iconSrc", "iconColor", "buttonColor", "outlineColor", "textButtonColor", "size"], outputs: ["buttonClick"] }] });
|
|
758
758
|
}
|
|
759
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
759
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AlertDialogComponent, decorators: [{
|
|
760
760
|
type: Component,
|
|
761
761
|
args: [{ selector: 'app-alert-dialog', standalone: true, imports: [
|
|
762
762
|
ButtonComponent,
|
|
@@ -966,10 +966,10 @@ class OverlayService {
|
|
|
966
966
|
});
|
|
967
967
|
return dialogRef;
|
|
968
968
|
}
|
|
969
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
970
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
969
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
970
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OverlayService, providedIn: 'root' });
|
|
971
971
|
}
|
|
972
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
972
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OverlayService, decorators: [{
|
|
973
973
|
type: Injectable,
|
|
974
974
|
args: [{
|
|
975
975
|
providedIn: 'root'
|
|
@@ -1029,10 +1029,10 @@ class UnsavedAwareDirective {
|
|
|
1029
1029
|
$event.returnValue = 'You have unsaved changes! Do you really want to leave?';
|
|
1030
1030
|
}
|
|
1031
1031
|
}
|
|
1032
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1033
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1032
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UnsavedAwareDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1033
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: UnsavedAwareDirective, isStandalone: true, selector: "form[unSavedAware]", host: { listeners: { "window:beforeunload": "unloadNotification($event)" } }, ngImport: i0 });
|
|
1034
1034
|
}
|
|
1035
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UnsavedAwareDirective, decorators: [{
|
|
1036
1036
|
type: Directive,
|
|
1037
1037
|
args: [{
|
|
1038
1038
|
selector: 'form[unSavedAware]'
|
|
@@ -1150,20 +1150,20 @@ var TemplateResolverArrayUtil;
|
|
|
1150
1150
|
class NoDataComponent {
|
|
1151
1151
|
size = input(250, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1152
1152
|
message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
|
|
1153
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1154
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1153
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1154
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NoDataComponent, isStandalone: true, selector: "app-no-data", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"inline-flex flex-col gap-3 items-center justify-center\">\n <svg class=\"svg-icon text-neutral-200 h-16 w-16\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M19 20H4C2.89 20 2 19.1 2 18V6C2 4.89 2.89 4 4 4H10L12 6H19C19.5304 6 20.0391 6.21071 20.4142 6.58579C20.7893 6.96086 21 7.46957 21 8H4V18L6.14 10H23.21L20.93 18.5C20.7 19.37 19.92 20 19 20Z\"\n fill=\"currentColor\"/>\n </svg>\n <p class=\"text-body2 text-neutral-500\">{{ message() }}</p>\n</div>\n", styles: [""] });
|
|
1155
1155
|
}
|
|
1156
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NoDataComponent, decorators: [{
|
|
1157
1157
|
type: Component,
|
|
1158
1158
|
args: [{ selector: 'app-no-data', standalone: true, imports: [], template: "<div class=\"inline-flex flex-col gap-3 items-center justify-center\">\n <svg class=\"svg-icon text-neutral-200 h-16 w-16\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M19 20H4C2.89 20 2 19.1 2 18V6C2 4.89 2.89 4 4 4H10L12 6H19C19.5304 6 20.0391 6.21071 20.4142 6.58579C20.7893 6.96086 21 7.46957 21 8H4V18L6.14 10H23.21L20.93 18.5C20.7 19.37 19.92 20 19 20Z\"\n fill=\"currentColor\"/>\n </svg>\n <p class=\"text-body2 text-neutral-500\">{{ message() }}</p>\n</div>\n" }]
|
|
1159
1159
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } });
|
|
1160
1160
|
|
|
1161
1161
|
class NoDataTableComponent {
|
|
1162
1162
|
message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
|
|
1163
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1163
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NoDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NoDataTableComponent, isStandalone: true, selector: "app-no-data-table", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<tbody class=\"bg-white text-center py-14\">\n<tr>\n <td colspan=\"10\">\n <div class=\"py-14\">\n <app-no-data class=\"\" [message]=\"message() ?? 'No data found'\"></app-no-data>\n </div>\n </td>\n</tr>\n</tbody>\n", styles: [""], dependencies: [{ kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["size", "message"] }] });
|
|
1165
1165
|
}
|
|
1166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NoDataTableComponent, decorators: [{
|
|
1167
1167
|
type: Component,
|
|
1168
1168
|
args: [{ selector: 'app-no-data-table', standalone: true, imports: [
|
|
1169
1169
|
NoDataComponent
|
|
@@ -1176,10 +1176,10 @@ class ShimmerComponent {
|
|
|
1176
1176
|
loop = computed(() => {
|
|
1177
1177
|
return Array(this.count()).fill(1).map((x, i) => i);
|
|
1178
1178
|
}, ...(ngDevMode ? [{ debugName: "loop" }] : []));
|
|
1179
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1180
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ShimmerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ShimmerComponent, isStandalone: true, selector: "app-shimmer", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (type()) {\n @case ('grid') {\n <div class=\"space-y-5 rounded-2xl bg-white/1 animate-pulse\">\n <div class=\"h-24 rounded-lg bg-neutral-400/10\"></div>\n <div class=\"space-y-3\">\n <div class=\"h-3 w-3/5 rounded-lg bg-neutral-400/10\"></div>\n <div class=\"h-3 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n <div class=\"h-3 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n </div>\n </div>\n }\n @case ('list') {\n <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n <div class=\"w-24 rounded-lg bg-neutral-400/10\"></div>\n <div class=\"flex flex-col gap-3 w-full\">\n <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n <div class=\"h-2 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n </div>\n </div>\n }\n @case ('single-line') {\n <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n <div class=\"flex flex-col gap-3 w-full\">\n <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n </div>\n </div>\n }\n @case ('multiline') {\n <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n <div class=\"flex flex-col gap-3 w-full\">\n <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n </div>\n </div>\n }\n}\n\n\n", styles: [""] });
|
|
1181
1181
|
}
|
|
1182
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ShimmerComponent, decorators: [{
|
|
1183
1183
|
type: Component,
|
|
1184
1184
|
args: [{ selector: 'app-shimmer', standalone: true, imports: [], template: "@switch (type()) {\n @case ('grid') {\n <div class=\"space-y-5 rounded-2xl bg-white/1 animate-pulse\">\n <div class=\"h-24 rounded-lg bg-neutral-400/10\"></div>\n <div class=\"space-y-3\">\n <div class=\"h-3 w-3/5 rounded-lg bg-neutral-400/10\"></div>\n <div class=\"h-3 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n <div class=\"h-3 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n </div>\n </div>\n }\n @case ('list') {\n <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n <div class=\"w-24 rounded-lg bg-neutral-400/10\"></div>\n <div class=\"flex flex-col gap-3 w-full\">\n <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n <div class=\"h-2 w-2/5 rounded-lg bg-neutral-400/15\"></div>\n </div>\n </div>\n }\n @case ('single-line') {\n <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n <div class=\"flex flex-col gap-3 w-full\">\n <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n </div>\n </div>\n }\n @case ('multiline') {\n <div class=\"flex gap-3 rounded-2xl bg-white/1 animate-pulse\">\n <div class=\"flex flex-col gap-3 w-full\">\n <div class=\"h-3 w-full rounded-lg bg-neutral-400/10\"></div>\n <div class=\"h-2 w-4/5 rounded-lg bg-neutral-400/15\"></div>\n </div>\n </div>\n }\n}\n\n\n" }]
|
|
1185
1185
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }] } });
|
|
@@ -1230,10 +1230,10 @@ class PaginationComponent {
|
|
|
1230
1230
|
emitPageChange() {
|
|
1231
1231
|
this.pageChange.emit({ pageNumber: this.currentPage, pageSize: this.pageSize });
|
|
1232
1232
|
}
|
|
1233
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1234
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1233
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1234
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PaginationComponent, isStandalone: true, selector: "app-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"flex w-full items-center justify-between p-4 bg-white border-t border-neutral-50\">\n <div>\n <!-- Showing items text -->\n <p class=\"text-sm text-gray-700 text-nowrap\">\n Showing <span class=\"font-semibold\">{{ startItem }}</span> to <span class=\"font-semibold\">{{ endItem }}</span>\n of <span class=\"font-semibold\">{{ totalItems() }}</span> results\n </p>\n </div>\n\n <div class=\"flex items-center space-x-4\">\n\n <span class=\"text-body2\">Items per page:</span>\n\n <div class=\"relative inline-block border rounded p-2 text-caption\">\n <select [(ngModel)]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\"\n class=\"\">\n @for (size of pageSizeOptions(); track size) {\n <option [value]=\"size\">{{ size }}</option>\n }\n </select>\n </div>\n\n <span class=\"text-caption\">{{ startItem }} - {{ endItem }} of {{ totalItems() }}</span>\n\n <button\n class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n [ngClass]=\"{ 'opacity-50': currentPage === 1 }\"\n [disabled]=\"currentPage === 1\"\n (click)=\"goToFirstPage()\">\n <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M18.41 16.59L13.82 12L18.41 7.41L17 6L11 12L17 18L18.41 16.59ZM6 6H8V18H6V6Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n\n <button\n class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n [ngClass]=\"{ 'opacity-50': currentPage === 1 }\"\n [disabled]=\"currentPage === 1\"\n (click)=\"goToPreviousPage()\">\n <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"black\"/>\n </svg>\n </button>\n\n <button\n class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n [ngClass]=\"{ 'opacity-50': currentPage === totalPages }\"\n [disabled]=\"currentPage === totalPages\"\n (click)=\"goToNextPage()\">\n <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M8.59 16.58L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.58Z\" fill=\"black\"/>\n </svg>\n </button>\n\n <button\n class=\"px-2 py-1 text-neutral-500 rounded disabled:text-neutral-500 disabled:cursor-not-allowed\"\n [ngClass]=\"{ 'opacity-50': currentPage === totalPages }\"\n [disabled]=\"currentPage === totalPages\"\n (click)=\"goToLastPage()\">\n <svg class=\"text-neutral-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z\" fill=\"black\"/>\n </svg>\n </button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1235
1235
|
}
|
|
1236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1237
1237
|
type: Component,
|
|
1238
1238
|
args: [{ selector: 'app-pagination', standalone: true, imports: [
|
|
1239
1239
|
FormsModule,
|
|
@@ -1255,10 +1255,10 @@ class BaseTableComponent {
|
|
|
1255
1255
|
onPageChange(event) {
|
|
1256
1256
|
this.pageChange.emit(event);
|
|
1257
1257
|
}
|
|
1258
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1259
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1258
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BaseTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1259
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, isHorizontallyScrollable: { classPropertyName: "isHorizontallyScrollable", publicName: "isHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"bg-white rounded-lg h-full\">\n <table class=\"w-full h-full min-w-full bg-white\" [ngClass]=\"isHorizontallyScrollable() ? 'overflow-x-auto' : ''\">\n\n <!-- Table header-->\n <thead class=\"sticky top-0 bg-white z-10\">\n <tr class=\"text-overline text-neutral-500 text-nowrap h-min\">\n <ng-content select=\"[head]\"></ng-content>\n </tr>\n <tr>\n <th colspan=\"100\">\n <div class=\"border-b border-neutral-200\"></div>\n </th>\n </tr>\n </thead>\n\n <!-- List Items-->\n <tbody class=\"h-min\">\n <ng-content select=\"[body]\"></ng-content>\n </tbody>\n\n <!-- Shimmer-->\n @if (state()?.loading()) {\n <tbody class=\"bg-white text-center py-14\">\n <tr>\n <td colspan=\"100\" class=\"h-min\">\n <div class=\"flex flex-col gap-10 px-6 py-8\">\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n </div>\n </td>\n </tr>\n </tbody>\n }\n\n <!-- No Table Indicator-->\n @if (state()?.success() && (state()?.response()?.data ?? []).length <= 0) {\n <tbody>\n <tr>\n <td colspan=\"1000\">\n <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n <app-no-data-table></app-no-data-table>\n </div>\n </td>\n </tr>\n </tbody>\n }\n\n <tbody class=\"h-full\"></tbody>\n\n\n <!-- Paginator-->\n <tbody class=\"bottom-0 sticky\">\n <tr>\n <td colspan=\"100\">\n <div class=\"bg-white w-full\">\n <app-pagination\n class=\"w-full\"\n [pageSize]=\"itemsPerPage()\"\n [totalItems]=\"state()?.response()?.totalCount ?? 0\"\n (pageChange)=\"onPageChange($event)\">\n </app-pagination>\n </div>\n </td>\n </tr>\n </tbody>\n\n </table>\n</div>\n\n\n<!--Example-->\n<!-- <app-base-table appTableResizableColumns sortableTable [state]=\"driverListState\">-->\n<!-- <ng-container head>-->\n<!-- <th class=\"p-4 text-left\">FULL NAME</th>-->\n<!-- <th class=\"p-4 text-center \">CONTACT</th>-->\n<!-- <th class=\"p-4 text-center \">HIRED DATA</th>-->\n<!-- <!– <th class=\"p-4 text-center \">LICENSE EXPIRING</th>–>-->\n<!-- <th class=\"p-4 text-center \">STATUS</th>-->\n<!-- <th class=\"p-4 text-center \"></th>-->\n<!-- </ng-container>-->\n\n<!-- <ng-container body>-->\n<!-- @for (item of driverListState.response()?.data; track item; ) {-->\n<!-- <tr class=\"border-b border-neutral-100 w-full\">-->\n<!-- <td class=\"px-4 py-2 text-left\">-->\n<!-- <div class=\"flex flex-col gap-2\">-->\n<!-- <span class=\"text-body2 text-neutral-800\">{{ item.fullName }}</span>-->\n<!-- <span class=\"text-caption text-neutral-500\">{{ item.code }}</span>-->\n<!-- </div>-->\n<!-- </td>-->\n<!-- <td class=\"px-4 py-2 text-center\">-->\n<!-- <div class=\"flex flex-col gap-2\">-->\n<!-- <span class=\"text-body2 text-info-500\">{{ item.email }}</span>-->\n<!-- <span class=\"text-body2 text-neutral-500\">{{ item.phoneNumber }}</span>-->\n<!-- </div>-->\n<!-- </td>-->\n<!-- <td class=\"px-4 text-body2 text-center\">{{ item.hiredDate | date:'MMM d, y' }}</td>-->\n<!-- <!– <td class=\"px-4 text-body2 text-center\">{{ item.licenseExpiringDate |date:'MMM d, y h:mm a' }}</td>–>-->\n<!-- <td class=\"px-4\">-->\n<!-- <div class=\"flex justify-center\">-->\n<!-- <app-driver-status-badge [driver]=\"item\"></app-driver-status-badge>-->\n<!-- </div>-->\n<!-- </td>-->\n<!-- <td class=\"p-4 cursor-pointer items-center\">-->\n<!-- <div class=\"flex justify-center items-center\">-->\n<!-- <app-button (click)=\"onViewDriverClicked(item)\" appearance=\"textType\" textButtonColor=\"text-info-500\">-->\n<!-- View-->\n<!-- </app-button>-->\n<!-- <app-context-menu-icon></app-context-menu-icon>-->\n<!-- </div>-->\n<!-- </td>-->\n<!-- </tr>-->\n<!-- }-->\n<!-- </ng-container>-->\n<!-- </app-base-table>-->\n", styles: [""], dependencies: [{ kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }] });
|
|
1260
1260
|
}
|
|
1261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BaseTableComponent, decorators: [{
|
|
1262
1262
|
type: Component,
|
|
1263
1263
|
args: [{ selector: 'app-base-table', standalone: true, imports: [
|
|
1264
1264
|
NoDataTableComponent,
|
|
@@ -1402,10 +1402,10 @@ class SortableTableDirective {
|
|
|
1402
1402
|
this.renderer.setStyle(svgIcon, 'fill', 'black');
|
|
1403
1403
|
}
|
|
1404
1404
|
}
|
|
1405
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1406
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1405
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SortableTableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1406
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: SortableTableDirective, isStandalone: true, selector: "[sortableTable]", outputs: { sortChange: "sortChange" }, ngImport: i0 });
|
|
1407
1407
|
}
|
|
1408
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SortableTableDirective, decorators: [{
|
|
1409
1409
|
type: Directive,
|
|
1410
1410
|
args: [{
|
|
1411
1411
|
selector: '[sortableTable]',
|
|
@@ -1457,10 +1457,10 @@ class ResizableColumnDirective {
|
|
|
1457
1457
|
document.removeEventListener('mousemove', this.resizeColumnHandler);
|
|
1458
1458
|
document.removeEventListener('mouseup', this.stopResizeHandler);
|
|
1459
1459
|
}
|
|
1460
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1461
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1460
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ResizableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1461
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: ResizableColumnDirective, isStandalone: true, selector: "[appResizableColumn]", ngImport: i0 });
|
|
1462
1462
|
}
|
|
1463
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1463
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ResizableColumnDirective, decorators: [{
|
|
1464
1464
|
type: Directive,
|
|
1465
1465
|
args: [{
|
|
1466
1466
|
selector: '[appResizableColumn]',
|
|
@@ -1524,10 +1524,10 @@ class TableResizableColumnsDirective {
|
|
|
1524
1524
|
// Add mousedown listener to the resize handle (div)
|
|
1525
1525
|
this.renderer.listen(resizeDiv, 'mousedown', startResize);
|
|
1526
1526
|
}
|
|
1527
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1528
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1527
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TableResizableColumnsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1528
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: TableResizableColumnsDirective, isStandalone: true, selector: "[appTableResizableColumns]", inputs: { applyResizableColumn: ["appTableResizableColumns", "applyResizableColumn"] }, ngImport: i0 });
|
|
1529
1529
|
}
|
|
1530
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TableResizableColumnsDirective, decorators: [{
|
|
1531
1531
|
type: Directive,
|
|
1532
1532
|
args: [{
|
|
1533
1533
|
selector: '[appTableResizableColumns]',
|
|
@@ -1577,10 +1577,10 @@ class BreadcrumbComponent {
|
|
|
1577
1577
|
navigate(route) {
|
|
1578
1578
|
this.router.navigate([route]);
|
|
1579
1579
|
}
|
|
1580
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1581
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1580
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1581
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: BreadcrumbComponent, isStandalone: true, selector: "app-breadcrumb", ngImport: i0, template: "<div class=\"flex items-center\">\n @for (breadcrumb of breadcrumbs; track i; let last = $last; let i = $index) {\n <div class=\"flex items-center\">\n\n <span (click)=\"!last ? navigate(breadcrumb.route!) : null\"\n class=\"text-caption cursor-pointer px-2.5 py-1.5 rounded-full transition-all duration-500\"\n [ngClass]=\"[last ? 'text-black font-medium' : 'text-neutral-500 hover:bg-neutral-200/80']\">\n {{ breadcrumb.title }}\n </span>\n\n @if (!last) {\n <span class=\"mx-2 text-caption text-neutral-400\">\n <svg class=\"w-[16px] h-[16px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n <path d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\" fill=\"currentColor\"/>\n </svg>\n </span>\n }\n </div>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1582
1582
|
}
|
|
1583
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1583
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
1584
1584
|
type: Component,
|
|
1585
1585
|
args: [{ selector: 'app-breadcrumb', standalone: true, imports: [
|
|
1586
1586
|
NgClass
|
|
@@ -1588,10 +1588,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
1588
1588
|
}] });
|
|
1589
1589
|
|
|
1590
1590
|
class CloseButtonComponent {
|
|
1591
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1592
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1591
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1592
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: CloseButtonComponent, isStandalone: true, selector: "app-close-button", ngImport: i0, template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n <svg class=\"w-12 h-12 text-neutral-800\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-window-close\" viewBox=\"0 0 24 24\">\n <path\n fill=\"currentColor\"\n d=\"M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z\"/>\n </svg>\n\n</p>\n", styles: [""] });
|
|
1593
1593
|
}
|
|
1594
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1594
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CloseButtonComponent, decorators: [{
|
|
1595
1595
|
type: Component,
|
|
1596
1596
|
args: [{ selector: 'app-close-button', standalone: true, imports: [], template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n <svg class=\"w-12 h-12 text-neutral-800\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-window-close\" viewBox=\"0 0 24 24\">\n <path\n fill=\"currentColor\"\n d=\"M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z\"/>\n </svg>\n\n</p>\n" }]
|
|
1597
1597
|
}] });
|
|
@@ -1955,10 +1955,10 @@ class ColorConverterService {
|
|
|
1955
1955
|
const rgbHex = cleanHex.length === 8 ? cleanHex.slice(0, 6) : cleanHex;
|
|
1956
1956
|
return `#${rgbHex.toUpperCase()}`;
|
|
1957
1957
|
}
|
|
1958
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1959
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1958
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorConverterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1959
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorConverterService, providedIn: 'root' });
|
|
1960
1960
|
}
|
|
1961
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1961
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorConverterService, decorators: [{
|
|
1962
1962
|
type: Injectable,
|
|
1963
1963
|
args: [{
|
|
1964
1964
|
providedIn: 'root'
|
|
@@ -2054,10 +2054,10 @@ class ColorPickerSliderDirective {
|
|
|
2054
2054
|
this.valueChanged.emit({ x: x, y: y, v: x / width, rgX: this.rgX });
|
|
2055
2055
|
}
|
|
2056
2056
|
}
|
|
2057
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2058
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2057
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorPickerSliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2058
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: ColorPickerSliderDirective, isStandalone: true, selector: "[colorPickerSlider]", inputs: { rgX: "rgX", rgY: "rgY" }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", valueChanged: "valueChanged" }, host: { listeners: { "mousedown": "mouseDown($event)", "touchstart": "touchStart($event)" } }, ngImport: i0 });
|
|
2059
2059
|
}
|
|
2060
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2060
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorPickerSliderDirective, decorators: [{
|
|
2061
2061
|
type: Directive,
|
|
2062
2062
|
args: [{
|
|
2063
2063
|
selector: '[colorPickerSlider]',
|
|
@@ -2315,10 +2315,10 @@ class ColorPickerComponent extends BaseControlValueAccessorV3 {
|
|
|
2315
2315
|
onColorSelected(color) {
|
|
2316
2316
|
this.setHexColor(color);
|
|
2317
2317
|
}
|
|
2318
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2319
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2318
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ColorPickerComponent, isStandalone: true, selector: "app-color-picker", inputs: { hexColor: { classPropertyName: "hexColor", publicName: "hexColor", isSignal: true, isRequired: false, transformFunction: null }, enableAdditionalColor: { classPropertyName: "enableAdditionalColor", publicName: "enableAdditionalColor", isSignal: true, isRequired: false, transformFunction: null }, additionalColors: { classPropertyName: "additionalColors", publicName: "additionalColors", isSignal: true, isRequired: false, transformFunction: null }, enableAlpha: { classPropertyName: "enableAlpha", publicName: "enableAlpha", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: false, isRequired: false, transformFunction: null }, hexColorValue: { classPropertyName: "hexColorValue", publicName: "hexColorValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged", onAlphaChange: "onAlphaChange", closeColorPicker: "closeColorPicker", hexColorValue: "hexColorValueChange" }, host: { listeners: { "document:mousedown": "click($event)" } }, viewQueries: [{ propertyName: "hueSlider", first: true, predicate: ["hueSlider"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n <div [style.width]=\"width()\">\n\n <!--Saturation and Lightness-->\n <div\n class=\"sl\"\n [style.height]=\"height()\"\n [style.width]=\"width()\"\n colorPickerSlider\n [rgX]=\"1\"\n [rgY]=\"1\"\n (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n [style.background-color]=\"hueSliderColor()\">\n\n <!--Saturation & Lightness pointer-->\n <div\n class=\"sl-pointer absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white\"\n [style.left.px]=\"slider().s\"\n [style.top.px]=\"slider().v\">\n </div>\n\n </div>\n\n <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n <!--Selected Color-->\n <div class=\"flex gap-5 items-center\">\n\n <!-- <div class=\"relative\">-->\n <!-- <div class=\"selected-color-background\"></div>-->\n <!-- <div-->\n <!-- class=\"h-10 w-10 rounded-xl selected-color\"-->\n <!-- [style.background-color]=\"selectedColor()\">-->\n <!-- </div>-->\n <!-- </div>-->\n\n\n <div class=\"flex flex-col w-full gap-4\">\n <div #hueSlider\n class=\"hue\"\n colorPickerSlider\n (valueChanged)=\"onSliderChange('hue', $event)\"\n [rgX]=\"1\">\n <div class=\"hue-pointer absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300\"\n [style.left.px]=\"slider().h\"></div>\n </div>\n\n @if(enableAlpha()) {\n <div #alphaSlider\n class=\"alpha\"\n colorPickerSlider\n [rgX]=\"1\"\n (valueChanged)=\"onSliderChange('alpha', $event)\">\n <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n <div class=\"alpha-pointer\"\n [style.left.px]=\"slider().a\"></div>\n </div>\n }\n </div>\n\n </div>\n\n <div class=\"flex items-center gap-3\">\n <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n </div>\n @if (isTooltip()) {\n <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n (click)=\"onApplyCLicked()\">Apply\n </div>\n }\n </div>\n </div>\n\n </div>\n\n @if(enableAdditionalColor()) {\n <div class=\"mt-4\">\n @for (row of getColorRows(); let $isLast = $last; track $index) {\n <div class=\"grid grid-cols-8 gap-2 mb-1\">\n @for (color of row; track $index) {\n <div\n (click)=\"onColorSelected(color)\"\n class=\"h-6 w-6 rounded cursor-pointer border border-gray-200\"\n [style.background-color]=\"color\">\n </div>\n }\n </div>\n\n <!-- Separator line unless it's the last row -->\n @if (!$isLast) {\n <div class=\"h-[1px] bg-gray-100 my-2.5 w-full\"></div>\n }\n }\n </div>\n }\n\n\n</div>\n\n\n\n", styles: [".sl{@apply rounded;direction:ltr;cursor:crosshair;position:relative;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}.hue{direction:ltr;height:14px;width:100%;border:none;border-radius:100px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f,red)}.alpha{direction:ltr;position:relative;width:100%;height:14px;border:none;border-radius:100px;cursor:pointer;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.alpha-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{@apply h-10 w-10 rounded-xl;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.selected-color{position:absolute;@apply h-10 w-10 shadow-md;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: ColorPickerSliderDirective, selector: "[colorPickerSlider]", inputs: ["rgX", "rgY"], outputs: ["dragEnd", "dragStart", "valueChanged"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2320
2320
|
}
|
|
2321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
2322
2322
|
type: Component,
|
|
2323
2323
|
args: [{ selector: 'app-color-picker', standalone: true, imports: [
|
|
2324
2324
|
ColorPickerSliderDirective,
|
|
@@ -2445,10 +2445,10 @@ class ColorPickerDirective {
|
|
|
2445
2445
|
ngOnDestroy() {
|
|
2446
2446
|
this.closeColorPicker();
|
|
2447
2447
|
}
|
|
2448
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2449
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2448
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2449
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: ColorPickerDirective, isStandalone: true, selector: "[appColorPicker]", outputs: { colorChanged: "colorChanged" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
2450
2450
|
}
|
|
2451
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorPickerDirective, decorators: [{
|
|
2452
2452
|
type: Directive,
|
|
2453
2453
|
args: [{
|
|
2454
2454
|
selector: '[appColorPicker]',
|
|
@@ -2468,10 +2468,10 @@ class OverlayContextMenuComponent {
|
|
|
2468
2468
|
this.dialogRef.close(action.actionKey);
|
|
2469
2469
|
$event.stopPropagation();
|
|
2470
2470
|
}
|
|
2471
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2472
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2471
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OverlayContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2472
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OverlayContextMenuComponent, isStandalone: true, selector: "app-overlay-context-menu", ngImport: i0, template: "<div class=\"flex flex-col gap-2 min-w-[200px] py-2\">\n @for (action of actions; track action.actionKey) {\n <div (click)=\"_onActionClicked($event, action)\"\n class=\"flex items-center gap-3 py-3 px-3 hover:bg-neutral-100/80 cursor-pointer\">\n @if (action.iconPath != null && action.iconPath != '') {\n <app-svg-icon class=\"text-neutral-600\" [src]=\"action.iconPath\" [size]=\"20\"></app-svg-icon>\n }\n <span class=\"text-caption text-neutral-600 font-normal\">{{ action.label }}</span>\n </div>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }] });
|
|
2473
2473
|
}
|
|
2474
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OverlayContextMenuComponent, decorators: [{
|
|
2475
2475
|
type: Component,
|
|
2476
2476
|
args: [{ selector: 'app-overlay-context-menu', imports: [
|
|
2477
2477
|
AppSvgIconComponent,
|
|
@@ -2566,10 +2566,10 @@ class ContextMenuButtonComponent {
|
|
|
2566
2566
|
this.onActionClicked.emit(actionKey);
|
|
2567
2567
|
});
|
|
2568
2568
|
}
|
|
2569
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2570
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
2569
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ContextMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2570
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: ContextMenuButtonComponent, isStandalone: true, selector: "app-context-menu-button", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, positionPreference: { classPropertyName: "positionPreference", publicName: "positionPreference", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onActionClicked: "onActionClicked" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }], ngImport: i0, template: "<div #trigger (click)=\"onMenuClicked()\" class=\"flex w-min h-min justify-center items-center p-2 rounded-full hover:bg-neutral-100 cursor-pointer transition-all duration-300\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"size-6 text-neutral-500\">\n <path d=\"M12 16C12.5304 16 13.0391 16.2107 13.4142 16.5858C13.7893 16.9609 14 17.4696 14 18C14 18.5304 13.7893 19.0391 13.4142 19.4142C13.0391 19.7893 12.5304 20 12 20C11.4696 20 10.9609 19.7893 10.5858 19.4142C10.2107 19.0391 10 18.5304 10 18C10 17.4696 10.2107 16.9609 10.5858 16.5858C10.9609 16.2107 11.4696 16 12 16ZM12 10C12.5304 10 13.0391 10.2107 13.4142 10.5858C13.7893 10.9609 14 11.4696 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10ZM12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6C14 6.53043 13.7893 7.03914 13.4142 7.41421C13.0391 7.78929 12.5304 8 12 8C11.4696 8 10.9609 7.78929 10.5858 7.41421C10.2107 7.03914 10 6.53043 10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4Z\" fill=\"currentColor\"/>\n </svg>\n</div>\n", styles: [""] });
|
|
2571
2571
|
}
|
|
2572
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2572
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ContextMenuButtonComponent, decorators: [{
|
|
2573
2573
|
type: Component,
|
|
2574
2574
|
args: [{ selector: 'app-context-menu-button', imports: [], standalone: true, template: "<div #trigger (click)=\"onMenuClicked()\" class=\"flex w-min h-min justify-center items-center p-2 rounded-full hover:bg-neutral-100 cursor-pointer transition-all duration-300\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"size-6 text-neutral-500\">\n <path d=\"M12 16C12.5304 16 13.0391 16.2107 13.4142 16.5858C13.7893 16.9609 14 17.4696 14 18C14 18.5304 13.7893 19.0391 13.4142 19.4142C13.0391 19.7893 12.5304 20 12 20C11.4696 20 10.9609 19.7893 10.5858 19.4142C10.2107 19.0391 10 18.5304 10 18C10 17.4696 10.2107 16.9609 10.5858 16.5858C10.9609 16.2107 11.4696 16 12 16ZM12 10C12.5304 10 13.0391 10.2107 13.4142 10.5858C13.7893 10.9609 14 11.4696 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10ZM12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6C14 6.53043 13.7893 7.03914 13.4142 7.41421C13.0391 7.78929 12.5304 8 12 8C11.4696 8 10.9609 7.78929 10.5858 7.41421C10.2107 7.03914 10 6.53043 10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4Z\" fill=\"currentColor\"/>\n </svg>\n</div>\n" }]
|
|
2575
2575
|
}], propDecorators: { trigger: [{
|
|
@@ -2578,10 +2578,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
2578
2578
|
}], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], positionPreference: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionPreference", required: false }] }], onActionClicked: [{ type: i0.Output, args: ["onActionClicked"] }] } });
|
|
2579
2579
|
|
|
2580
2580
|
class ContextMenuIconComponent {
|
|
2581
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2582
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2581
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ContextMenuIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2582
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: ContextMenuIconComponent, isStandalone: true, selector: "app-context-menu-icon", ngImport: i0, template: "<div class=\"flex w-min h-min justify-center items-center p-2 rounded-full hover:bg-neutral-100 cursor-pointer transition-all duration-300\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"size-6 text-neutral-500\">\n <path d=\"M12 16C12.5304 16 13.0391 16.2107 13.4142 16.5858C13.7893 16.9609 14 17.4696 14 18C14 18.5304 13.7893 19.0391 13.4142 19.4142C13.0391 19.7893 12.5304 20 12 20C11.4696 20 10.9609 19.7893 10.5858 19.4142C10.2107 19.0391 10 18.5304 10 18C10 17.4696 10.2107 16.9609 10.5858 16.5858C10.9609 16.2107 11.4696 16 12 16ZM12 10C12.5304 10 13.0391 10.2107 13.4142 10.5858C13.7893 10.9609 14 11.4696 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10ZM12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6C14 6.53043 13.7893 7.03914 13.4142 7.41421C13.0391 7.78929 12.5304 8 12 8C11.4696 8 10.9609 7.78929 10.5858 7.41421C10.2107 7.03914 10 6.53043 10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4Z\" fill=\"currentColor\"/>\n </svg>\n</div>\n", styles: [""] });
|
|
2583
2583
|
}
|
|
2584
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ContextMenuIconComponent, decorators: [{
|
|
2585
2585
|
type: Component,
|
|
2586
2586
|
args: [{ selector: 'app-context-menu-icon', standalone: true, imports: [], template: "<div class=\"flex w-min h-min justify-center items-center p-2 rounded-full hover:bg-neutral-100 cursor-pointer transition-all duration-300\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"size-6 text-neutral-500\">\n <path d=\"M12 16C12.5304 16 13.0391 16.2107 13.4142 16.5858C13.7893 16.9609 14 17.4696 14 18C14 18.5304 13.7893 19.0391 13.4142 19.4142C13.0391 19.7893 12.5304 20 12 20C11.4696 20 10.9609 19.7893 10.5858 19.4142C10.2107 19.0391 10 18.5304 10 18C10 17.4696 10.2107 16.9609 10.5858 16.5858C10.9609 16.2107 11.4696 16 12 16ZM12 10C12.5304 10 13.0391 10.2107 13.4142 10.5858C13.7893 10.9609 14 11.4696 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10ZM12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6C14 6.53043 13.7893 7.03914 13.4142 7.41421C13.0391 7.78929 12.5304 8 12 8C11.4696 8 10.9609 7.78929 10.5858 7.41421C10.2107 7.03914 10 6.53043 10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4Z\" fill=\"currentColor\"/>\n </svg>\n</div>\n" }]
|
|
2587
2587
|
}] });
|
|
@@ -2592,10 +2592,10 @@ class TableCustomComponent {
|
|
|
2592
2592
|
rowPosition;
|
|
2593
2593
|
isLastRow = false;
|
|
2594
2594
|
actionPerformed = output();
|
|
2595
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2596
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2595
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TableCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2596
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: TableCustomComponent, isStandalone: true, selector: "lib-table-custom-component", inputs: { rowData: "rowData", data: "data", rowPosition: "rowPosition", isLastRow: "isLastRow" }, outputs: { actionPerformed: "actionPerformed" }, ngImport: i0, template: "", styles: [""] });
|
|
2597
2597
|
}
|
|
2598
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TableCustomComponent, decorators: [{
|
|
2599
2599
|
type: Component,
|
|
2600
2600
|
args: [{ selector: 'lib-table-custom-component', imports: [], template: "" }]
|
|
2601
2601
|
}], propDecorators: { rowData: [{
|
|
@@ -2615,10 +2615,10 @@ class StatusBadgeComponent {
|
|
|
2615
2615
|
textColorClass = input.required(...(ngDevMode ? [{ debugName: "textColorClass" }] : []));
|
|
2616
2616
|
borderColorClass = input.required(...(ngDevMode ? [{ debugName: "borderColorClass" }] : []));
|
|
2617
2617
|
isUpperCase = input(false, ...(ngDevMode ? [{ debugName: "isUpperCase" }] : []));
|
|
2618
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2619
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2618
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2619
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: StatusBadgeComponent, isStandalone: true, selector: "app-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, backgroundColorClass: { classPropertyName: "backgroundColorClass", publicName: "backgroundColorClass", isSignal: true, isRequired: true, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, textColorClass: { classPropertyName: "textColorClass", publicName: "textColorClass", isSignal: true, isRequired: true, transformFunction: null }, borderColorClass: { classPropertyName: "borderColorClass", publicName: "borderColorClass", isSignal: true, isRequired: true, transformFunction: null }, isUpperCase: { classPropertyName: "isUpperCase", publicName: "isUpperCase", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex px-2.5 py-1.5 border items-center rounded-full gap-2\"\n [ngClass]=\"[backgroundColorClass() ?? 'bg-neutral-50', borderColorClass() ?? '']\">\n @if(indicatorColor()) {\n <span class=\"h-[6px] w-[6px] rounded-full\" [ngClass]=\"indicatorColor() ?? 'bg-neutral-500'\"></span>\n }\n <span class=\"text-overline\"\n [ngClass]=\"[textColorClass() ?? 'text-neutral-500', isUpperCase() ? 'uppercase' : '']\">{{ status() ?? 'Unknown' }}</span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2620
2620
|
}
|
|
2621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2621
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StatusBadgeComponent, decorators: [{
|
|
2622
2622
|
type: Component,
|
|
2623
2623
|
args: [{ selector: 'app-status-badge', imports: [
|
|
2624
2624
|
NgClass
|
|
@@ -2653,10 +2653,10 @@ class CheckboxComponent extends BaseControlValueAccessorV3 {
|
|
|
2653
2653
|
this.onCheckboxSelected($event, true);
|
|
2654
2654
|
}
|
|
2655
2655
|
}
|
|
2656
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2657
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2656
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2657
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: CheckboxComponent, isStandalone: true, selector: "app-checkbox", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex items-center gap-3\">\n <label class=\"relative flex items-center rounded-full cursor-pointer py-3\" [for]=\"id()\">\n <input type=\"checkbox\"\n (change)=\"onCheckboxSelected($event)\"\n [formControl]=\"formControl\"\n class=\"before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-sm border-2 border-neutral-600 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-primary-200 before:opacity-0 before:transition-opacity checked:border-primary-500 checked:bg-primary-500 checked:before:bg-neutral-900\"\n [id]=\"id()\"\n (keydown)=\"handleKeydown($event)\"/>\n <span\n class=\"absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 20 20\" fill=\"currentColor\"\n stroke=\"currentColor\" stroke-width=\"1\">\n <path fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\"></path>\n </svg>\n </span>\n </label>\n @if(title()) {\n <label class=\"m-0 text-body2 cursor-pointer select-none\" [for]=\"id()\">{{ title() }}</label>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
2658
2658
|
}
|
|
2659
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2660
2660
|
type: Component,
|
|
2661
2661
|
args: [{ selector: 'app-checkbox', standalone: true, imports: [
|
|
2662
2662
|
ReactiveFormsModule,
|
|
@@ -2699,10 +2699,10 @@ class HumanizeFormMessagesPipe {
|
|
|
2699
2699
|
: 'Invalid field';
|
|
2700
2700
|
return message;
|
|
2701
2701
|
}
|
|
2702
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2703
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
2702
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: HumanizeFormMessagesPipe, deps: [{ token: FORM_ERRORS }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2703
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: HumanizeFormMessagesPipe, isStandalone: true, name: "humanizeFormMessages" });
|
|
2704
2704
|
}
|
|
2705
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2705
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: HumanizeFormMessagesPipe, decorators: [{
|
|
2706
2706
|
type: Pipe,
|
|
2707
2707
|
args: [{ standalone: true, name: 'humanizeFormMessages' }]
|
|
2708
2708
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -2715,10 +2715,10 @@ class BaseInputComponent {
|
|
|
2715
2715
|
isRequiredField = input(false, ...(ngDevMode ? [{ debugName: "isRequiredField" }] : []));
|
|
2716
2716
|
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
2717
2717
|
inputType = input('text', ...(ngDevMode ? [{ debugName: "inputType" }] : []));
|
|
2718
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2719
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2718
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2719
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: BaseInputComponent, isStandalone: true, selector: "app-base-input", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isRequiredField: { classPropertyName: "isRequiredField", publicName: "isRequiredField", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"app-form-control inline-flex items-center cursor-pointer select-none\"\n [ngClass]=\"fullWidth() ? 'w-full' : ''\">\n <div class=\"flex gap-6 items-center w-full\">\n <div class=\"flex flex-col justify-center gap-2 w-full\">\n @if (title()) {\n <div class=\"flex gap-1\">\n <span class=\"text-body2 text-nowrap text-primary-900\">{{ title() }}</span>\n @if (isRequiredField()) {\n <span class=\"text-body2 text-error-600\">*</span>\n }\n </div>\n }\n <ng-content class=\"w-full\" select=\"[input]\"></ng-content>\n\n <ng-content select=\"[error]\"></ng-content>\n\n </div>\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2720
2720
|
}
|
|
2721
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2721
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BaseInputComponent, decorators: [{
|
|
2722
2722
|
type: Component,
|
|
2723
2723
|
args: [{ selector: 'app-base-input', standalone: true, imports: [
|
|
2724
2724
|
NgClass
|
|
@@ -2815,10 +2815,10 @@ class TextInputComponent extends BaseControlValueAccessor {
|
|
|
2815
2815
|
this.onTouched();
|
|
2816
2816
|
this.isFocused.set(false);
|
|
2817
2817
|
}
|
|
2818
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2819
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2818
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2819
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, debounceSearchEnabled: { classPropertyName: "debounceSearchEnabled", publicName: "debounceSearchEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", actionIconClicked: "actionIconClicked" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n @if (iconSrc()) {\n <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n }\n\n <!-- <p>{{ formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n <input\n #inputRef\n [mask]=\"mask()\"\n class=\"placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n [class.text-neutral-400]=\"formControl.disabled\"\n [class.disabled-placeholder]=\"formControl.disabled\"\n [style.height]=\"sizeMap[size()]\"\n [formControl]=\"formControl\"\n [ngClass]=\"getClass()\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (input)=\"onValueChange($event)\">\n\n @if (actionIcon()) {\n <div (click)=\"onActionClicked()\"\n class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n </app-svg-icon>\n </div>\n }\n </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n <div class=\"mt-1\">\n <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n </div>\n} @else {\n @if (showErrorSpace()) {\n <div class=\"mt-1\">\n <span class=\"text-caption text-transparent\">.</span>\n </div>\n }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
2820
2820
|
}
|
|
2821
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2821
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
2822
2822
|
type: Component,
|
|
2823
2823
|
args: [{ selector: 'app-text-input', standalone: true, imports: [
|
|
2824
2824
|
NgClass,
|
|
@@ -2835,10 +2835,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
2835
2835
|
}], changeValue: [{ type: i0.Output, args: ["changeValue"] }], actionIconClicked: [{ type: i0.Output, args: ["actionIconClicked"] }] } });
|
|
2836
2836
|
|
|
2837
2837
|
class TextButtonSmall {
|
|
2838
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2839
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2838
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TextButtonSmall, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2839
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: TextButtonSmall, isStandalone: true, selector: "app-text-button-small", ngImport: i0, template: "<span class=\"text-body2 cursor-pointer py-2 px-4 text-info-500 hover:bg-info-50 rounded-full transition-all duration-300\">\n <ng-content></ng-content>\n</span>\n", styles: [""] });
|
|
2840
2840
|
}
|
|
2841
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TextButtonSmall, decorators: [{
|
|
2842
2842
|
type: Component,
|
|
2843
2843
|
args: [{ selector: 'app-text-button-small', standalone: true, imports: [], template: "<span class=\"text-body2 cursor-pointer py-2 px-4 text-info-500 hover:bg-info-50 rounded-full transition-all duration-300\">\n <ng-content></ng-content>\n</span>\n" }]
|
|
2844
2844
|
}] });
|
|
@@ -2881,10 +2881,10 @@ class DynamicRendererComponent {
|
|
|
2881
2881
|
ngOnDestroy() {
|
|
2882
2882
|
this.actionSubscription?.unsubscribe();
|
|
2883
2883
|
}
|
|
2884
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2885
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
2884
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: DynamicRendererComponent, isStandalone: true, selector: "app-dynamic-renderer", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: false, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowPosition: { classPropertyName: "rowPosition", publicName: "rowPosition", isSignal: true, isRequired: false, transformFunction: null }, isLastRow: { classPropertyName: "isLastRow", publicName: "isLastRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionPerformed: "actionPerformed" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #container></ng-container>\n", styles: [""] });
|
|
2886
2886
|
}
|
|
2887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicRendererComponent, decorators: [{
|
|
2888
2888
|
type: Component,
|
|
2889
2889
|
args: [{ selector: 'app-dynamic-renderer', imports: [], template: "<ng-container #container></ng-container>\n" }]
|
|
2890
2890
|
}], propDecorators: { component: [{
|
|
@@ -3105,10 +3105,10 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
|
|
|
3105
3105
|
onRowActionPerformed($event) {
|
|
3106
3106
|
this.onActionPerformed.emit($event);
|
|
3107
3107
|
}
|
|
3108
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3109
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DataTableComponent, isStandalone: true, selector: "app-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n @if (enableSearch() || headerComponents.length > 0) {\n <div class=\"flex px-6 py-5 border-b border-neutral-100 justify-between\">\n @if (enableSearch()) {\n <app-text-input [iconSrc]=\"'assets/icons/search.svg'\"\n placeholder=\"Search...\"\n type=\"search\"\n [fullWidth]=\"false\"\n (changeValue)=\"onSearchTextChanged($event)\">\n </app-text-input>\n }\n <div>\n <ng-content></ng-content>\n </div>\n </div>\n }\n\n <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n <table class=\"h-min w-full\"\n [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n [appTableResizableColumns]=\"enableResizableColumns()\">\n\n <!-- Table header-->\n <thead class=\"sticky top-0 bg-white z-10\">\n <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n @if (expandableComponent()) {\n <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n }\n\n @for (column of columnDefs(); track column) {\n @let isColumnVisible = column.visible || column.visible == undefined || false;\n @if (isColumnVisible) {\n <th\n [attr.data-sortable-key]=\"column.sortKey\"\n class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n [ngClass]=\"getThTrClass(column)\">\n {{ column.title }}\n </th>\n }\n }\n\n @if (enableColumnsConfig()) {\n <th\n class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n <div\n #columnsConfigTriggerElement\n (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path\n d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n </th>\n }\n\n </tr>\n </thead>\n\n <!-- List Items-->\n <tbody class=\"h-min\">\n <ng-content select=\"[body]\"></ng-content>\n </tbody>\n\n <!-- Shimmer-->\n @if (state().initialLoading()) {\n <tbody class=\"bg-white text-center py-14\">\n <tr>\n <td colspan=\"100\" class=\"h-min\">\n <div class=\"flex flex-col gap-6 px-6 py-4\">\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n </div>\n </td>\n </tr>\n </tbody>\n }\n\n <!-- No Table Indicator-->\n @if (state().success() && (state().response()?.data ?? []).length <= 0) {\n <tbody>\n <tr>\n <td colspan=\"1000\">\n <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n <app-no-data-table></app-no-data-table>\n </div>\n </td>\n </tr>\n </tbody>\n }\n\n @if ((state().response()?.data ?? []).length > 0) {\n <tbody class=\"\">\n @for (item of state().response()?.data ?? []; track i; let i = $index) {\n <tr (click)=\"_onRowClicked(item)\"\n [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n @if (expandableComponent()) {\n <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n <div\n (click)=\"onRowExpandedClicked(i)\"\n class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n </td>\n }\n\n @for (column of columnDefs(); track column) {\n\n @let isColumnVisible = column.visible || column.visible == undefined || false;\n @if (isColumnVisible) {\n <td\n class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n [ngClass]=\"[getThTrClass(column)]\">\n\n @switch (column.type) {\n @default {\n <span class=\"text-body2 text-neutral-700\"\n [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n }\n @case ('text') {\n <span class=\"text-body2 text-neutral-700 text-nowrap\"\n [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n }\n @case ('date') {\n <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path\n d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n fill=\"currentColor\"/>\n </svg>\n }\n\n @let date = getPropertyValue(item, column);\n @if (date && date != 'null') {\n <span\n class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n }\n </div>\n }\n @case ('badge') {\n @let badgeProperty = getBadgeProperty(item, column);\n <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n [isUpperCase]=\"true\"\n [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n </app-status-badge>\n </div>\n }\n @case ('custom') {\n @if (column.component) {\n <div class=\"flex items-center\">\n <app-dynamic-renderer\n [component]=\"column.component\"\n [rowData]=\"item\"\n [data]=\"column.customConfig?.data\"\n [rowPosition]=\"$index + 1\"\n [isLastRow]=\"$last\"\n (actionPerformed)=\"onRowActionPerformed($event)\">\n </app-dynamic-renderer>\n </div>\n }\n }\n @case ('actions') {\n\n <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n @if (column.actionsConfig?.iconActions) {\n @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n <div\n (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n <!-- <app-svg-icon class=\"text-neutral-500\"-->\n <!-- [matTooltip]=\"iconAction.label\"-->\n <!-- matTooltipClass=\"mt-2\"-->\n <!-- [src]=\"iconAction.iconPath\"-->\n <!-- [size]=\"20\"></app-svg-icon>-->\n <app-svg-icon class=\"text-neutral-500\"\n [src]=\"iconAction.iconPath\"\n [size]=\"20\"></app-svg-icon>\n </div>\n }\n }\n @if (column.actionsConfig?.threeDotMenuActions) {\n <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n }\n\n @if (column.actionsConfig?.textMenuActions) {\n @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n <app-text-button-small\n (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n </app-text-button-small>\n }\n }\n\n @if (column.actionsConfig?.components) {\n <div class=\"flex items-center\">\n @for (component of (column.actionsConfig?.components ?? []); track $index) {\n <app-dynamic-renderer\n [component]=\"component\"\n [rowData]=\"item\"\n [data]=\"column.customConfig?.data\"\n [rowPosition]=\"$index + 1\"\n [isLastRow]=\"$last\"\n (actionPerformed)=\"onRowActionPerformed($event)\">\n </app-dynamic-renderer>\n }\n </div>\n }\n\n </div>\n\n }\n\n }\n\n </td>\n }\n\n }\n\n @if (enableColumnsConfig()) {\n <td\n class=\"px-1 py-3 border-b border-gray-100 w-min\">\n </td>\n }\n </tr>\n\n @if (expandableComponent()) {\n @if (i == expandedRowIndex()) {\n <tr class=\"transition-all duration-700\">\n <td colspan=\"100\">\n <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n <app-dynamic-renderer\n [component]=\"expandableComponent()\"\n [rowData]=\"item\"\n (actionPerformed)=\"onCellActionPerformed($event)\">\n </app-dynamic-renderer>\n </div>\n\n </td>\n </tr>\n }\n }\n\n }\n\n </tbody>\n }\n\n <tbody class=\"h-full\"></tbody>\n\n\n </table>\n </div>\n\n <app-pagination\n [pageSize]=\"pageSize()\"\n [totalItems]=\"state().response()?.totalCount ?? 0\"\n (pageChange)=\"onPageChange($event)\">\n </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n <div\n class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n <div class=\"flex flex-col overflow-y-scroll\">\n @for (column of columnDefs(); track column; let index = $index) {\n @if (column.type != 'actions') {\n <div class=\"grow flex items-center min-w-[200px] px-1\">\n @let isColumnVisible = column.visible || column.visible == undefined || false;\n <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n </div>\n }\n }\n </div>\n\n <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
3108
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DataTableComponent, isStandalone: true, selector: "app-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n @if (enableSearch() || headerComponents.length > 0) {\n <div class=\"flex px-6 py-5 border-b border-neutral-100 justify-between\">\n @if (enableSearch()) {\n <app-text-input [iconSrc]=\"'assets/icons/search.svg'\"\n placeholder=\"Search...\"\n type=\"search\"\n [fullWidth]=\"false\"\n (changeValue)=\"onSearchTextChanged($event)\">\n </app-text-input>\n }\n <div>\n <ng-content></ng-content>\n </div>\n </div>\n }\n\n <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n <table class=\"h-min w-full\"\n [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n [appTableResizableColumns]=\"enableResizableColumns()\">\n\n <!-- Table header-->\n <thead class=\"sticky top-0 bg-white z-10\">\n <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n @if (expandableComponent()) {\n <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n }\n\n @for (column of columnDefs(); track column) {\n @let isColumnVisible = column.visible || column.visible == undefined || false;\n @if (isColumnVisible) {\n <th\n [attr.data-sortable-key]=\"column.sortKey\"\n class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n [ngClass]=\"getThTrClass(column)\">\n {{ column.title }}\n </th>\n }\n }\n\n @if (enableColumnsConfig()) {\n <th\n class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n <div\n #columnsConfigTriggerElement\n (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path\n d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n </th>\n }\n\n </tr>\n </thead>\n\n <!-- List Items-->\n <tbody class=\"h-min\">\n <ng-content select=\"[body]\"></ng-content>\n </tbody>\n\n <!-- Shimmer-->\n @if (state().initialLoading()) {\n <tbody class=\"bg-white text-center py-14\">\n <tr>\n <td colspan=\"100\" class=\"h-min\">\n <div class=\"flex flex-col gap-6 px-6 py-4\">\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n </div>\n </td>\n </tr>\n </tbody>\n }\n\n <!-- No Table Indicator-->\n @if (state().success() && (state().response()?.data ?? []).length <= 0) {\n <tbody>\n <tr>\n <td colspan=\"1000\">\n <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n <app-no-data-table></app-no-data-table>\n </div>\n </td>\n </tr>\n </tbody>\n }\n\n @if ((state().response()?.data ?? []).length > 0) {\n <tbody class=\"\">\n @for (item of state().response()?.data ?? []; track i; let i = $index) {\n <tr (click)=\"_onRowClicked(item)\"\n [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n @if (expandableComponent()) {\n <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n <div\n (click)=\"onRowExpandedClicked(i)\"\n class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n </td>\n }\n\n @for (column of columnDefs(); track column) {\n\n @let isColumnVisible = column.visible || column.visible == undefined || false;\n @if (isColumnVisible) {\n <td\n class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n [ngClass]=\"[getThTrClass(column)]\">\n\n @switch (column.type) {\n @default {\n <span class=\"text-body2 text-neutral-700\"\n [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n }\n @case ('text') {\n <span class=\"text-body2 text-neutral-700 text-nowrap\"\n [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n }\n @case ('date') {\n <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path\n d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n fill=\"currentColor\"/>\n </svg>\n }\n\n @let date = getPropertyValue(item, column);\n @if (date && date != 'null') {\n <span\n class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n }\n </div>\n }\n @case ('badge') {\n @let badgeProperty = getBadgeProperty(item, column);\n <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n [isUpperCase]=\"true\"\n [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n </app-status-badge>\n </div>\n }\n @case ('custom') {\n @if (column.component) {\n <div class=\"flex items-center\">\n <app-dynamic-renderer\n [component]=\"column.component\"\n [rowData]=\"item\"\n [data]=\"column.customConfig?.data\"\n [rowPosition]=\"$index + 1\"\n [isLastRow]=\"$last\"\n (actionPerformed)=\"onRowActionPerformed($event)\">\n </app-dynamic-renderer>\n </div>\n }\n }\n @case ('actions') {\n\n <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n @if (column.actionsConfig?.iconActions) {\n @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n <div\n (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n <!-- <app-svg-icon class=\"text-neutral-500\"-->\n <!-- [matTooltip]=\"iconAction.label\"-->\n <!-- matTooltipClass=\"mt-2\"-->\n <!-- [src]=\"iconAction.iconPath\"-->\n <!-- [size]=\"20\"></app-svg-icon>-->\n <app-svg-icon class=\"text-neutral-500\"\n [src]=\"iconAction.iconPath\"\n [size]=\"20\"></app-svg-icon>\n </div>\n }\n }\n @if (column.actionsConfig?.threeDotMenuActions) {\n <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n }\n\n @if (column.actionsConfig?.textMenuActions) {\n @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n <app-text-button-small\n (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n </app-text-button-small>\n }\n }\n\n @if (column.actionsConfig?.components) {\n <div class=\"flex items-center\">\n @for (component of (column.actionsConfig?.components ?? []); track $index) {\n <app-dynamic-renderer\n [component]=\"component\"\n [rowData]=\"item\"\n [data]=\"column.customConfig?.data\"\n [rowPosition]=\"$index + 1\"\n [isLastRow]=\"$last\"\n (actionPerformed)=\"onRowActionPerformed($event)\">\n </app-dynamic-renderer>\n }\n </div>\n }\n\n </div>\n\n }\n\n }\n\n </td>\n }\n\n }\n\n @if (enableColumnsConfig()) {\n <td\n class=\"px-1 py-3 border-b border-gray-100 w-min\">\n </td>\n }\n </tr>\n\n @if (expandableComponent()) {\n @if (i == expandedRowIndex()) {\n <tr class=\"transition-all duration-700\">\n <td colspan=\"100\">\n <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n <app-dynamic-renderer\n [component]=\"expandableComponent()\"\n [rowData]=\"item\"\n (actionPerformed)=\"onCellActionPerformed($event)\">\n </app-dynamic-renderer>\n </div>\n\n </td>\n </tr>\n }\n }\n\n }\n\n </tbody>\n }\n\n <tbody class=\"h-full\"></tbody>\n\n\n </table>\n </div>\n\n <app-pagination\n [pageSize]=\"pageSize()\"\n [totalItems]=\"state().response()?.totalCount ?? 0\"\n (pageChange)=\"onPageChange($event)\">\n </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n <div\n class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n <div class=\"flex flex-col overflow-y-scroll\">\n @for (column of columnDefs(); track column; let index = $index) {\n @if (column.type != 'actions') {\n <div class=\"grow flex items-center min-w-[200px] px-1\">\n @let isColumnVisible = column.visible || column.visible == undefined || false;\n <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n </div>\n }\n }\n </div>\n\n <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
3110
3110
|
}
|
|
3111
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
3112
3112
|
type: Component,
|
|
3113
3113
|
args: [{ selector: 'app-data-table', standalone: true, imports: [
|
|
3114
3114
|
PaginationComponent,
|
|
@@ -3138,10 +3138,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
3138
3138
|
|
|
3139
3139
|
class EnvBannerComponent {
|
|
3140
3140
|
config = inject(NGL_CONFIG);
|
|
3141
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EnvBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EnvBannerComponent, isStandalone: true, selector: "app-env-banner", ngImport: i0, template: "@if(config.enableDevTools) {\n <div\n class=\"banner fixed top-6 left-0 bg-black bg-opacity-80 text-xs text-white transform -rotate-45 translate-y-1/4 -translate-x-1/4 w-36 text-center px-1 py-1\">\n DEV\n </div>\n}\n", styles: [".banner{z-index:10000}\n"] });
|
|
3143
3143
|
}
|
|
3144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EnvBannerComponent, decorators: [{
|
|
3145
3145
|
type: Component,
|
|
3146
3146
|
args: [{ selector: 'app-env-banner', standalone: true, imports: [], template: "@if(config.enableDevTools) {\n <div\n class=\"banner fixed top-6 left-0 bg-black bg-opacity-80 text-xs text-white transform -rotate-45 translate-y-1/4 -translate-x-1/4 w-36 text-center px-1 py-1\">\n DEV\n </div>\n}\n", styles: [".banner{z-index:10000}\n"] }]
|
|
3147
3147
|
}] });
|
|
@@ -3173,10 +3173,10 @@ class OpenFloatingMenuDirective {
|
|
|
3173
3173
|
});
|
|
3174
3174
|
}
|
|
3175
3175
|
}
|
|
3176
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3177
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3176
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OpenFloatingMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3177
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: OpenFloatingMenuDirective, isStandalone: true, selector: "[libOpenFloatingMenu]", inputs: { component: ["libOpenFloatingMenu", "component"], floatingMenuPositionPreference: "floatingMenuPositionPreference", floatingMenuData: "floatingMenuData" }, outputs: { onFloatingMenuActionPerformed: "onFloatingMenuActionPerformed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
3178
3178
|
}
|
|
3179
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3179
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OpenFloatingMenuDirective, decorators: [{
|
|
3180
3180
|
type: Directive,
|
|
3181
3181
|
args: [{
|
|
3182
3182
|
selector: '[libOpenFloatingMenu]',
|
|
@@ -3243,10 +3243,10 @@ class ListviewComponent {
|
|
|
3243
3243
|
onRowAction($event) {
|
|
3244
3244
|
this.onActionPerformed.emit($event);
|
|
3245
3245
|
}
|
|
3246
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3247
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListviewComponent, isStandalone: true, selector: "app-listview", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, enableSearchFullWidth: { classPropertyName: "enableSearchFullWidth", publicName: "enableSearchFullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStateChanged: "onStateChanged", onActionPerformed: "onActionPerformed" }, ngImport: i0, template: "<div class=\"h-full flex flex-col gap-4\">\n\n @if (enableSearch()) {\n <app-text-input\n title=\"Search...\"\n [iconSrc]=\"'assets/icons/search.svg'\"\n placeholder=\"Search...\"\n type=\"search\"\n [fullWidth]=\"enableSearchFullWidth()\"\n (changeValue)=\"onSearchTextChanged($event)\">\n </app-text-input>\n }\n\n @if (state().success() && state().items().length <= 0) {\n <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n <app-no-data-table></app-no-data-table>\n </div>\n }\n\n @if (state().items().length > 0) {\n <div class=\"flex flex-col overflow-auto\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n (scrolled)=\"onScroll()\">\n @for (item of state().items(); track $index) {\n <app-dynamic-renderer\n [component]=\"component()\"\n [rowData]=\"item\"\n [data]=\"data()\"\n [rowPosition]=\"$index\"\n [isLastRow]=\"$last\"\n (actionPerformed)=\"onRowAction($event)\">\n </app-dynamic-renderer>\n }\n </div>\n }\n\n <!-- Shimmer-->\n @if (state().loading()) {\n <div class=\"flex flex-col gap-6 py-4\">\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n <app-shimmer type=\"multiline\"></app-shimmer>\n </div>\n }\n\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }] });
|
|
3248
3248
|
}
|
|
3249
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListviewComponent, decorators: [{
|
|
3250
3250
|
type: Component,
|
|
3251
3251
|
args: [{ selector: 'app-listview', imports: [
|
|
3252
3252
|
InfiniteScrollDirective,
|
|
@@ -3265,10 +3265,10 @@ class LoaderService {
|
|
|
3265
3265
|
hide() {
|
|
3266
3266
|
this.loadingCount.update((current) => current - 1);
|
|
3267
3267
|
}
|
|
3268
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3269
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3268
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3269
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LoaderService, providedIn: 'root' });
|
|
3270
3270
|
}
|
|
3271
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LoaderService, decorators: [{
|
|
3272
3272
|
type: Injectable,
|
|
3273
3273
|
args: [{
|
|
3274
3274
|
providedIn: 'root'
|
|
@@ -3277,10 +3277,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
3277
3277
|
|
|
3278
3278
|
class LoaderComponent {
|
|
3279
3279
|
loaderService = inject(LoaderService);
|
|
3280
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3281
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3280
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3281
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: LoaderComponent, isStandalone: true, selector: "app-loader", ngImport: i0, template: "@if (loaderService.loadingCount() > 0) {\n <div class=\"fixed left-1/2 top-1/2 py-3 px-5 shadow-2 bg-white loader rounded-md\">\n <app-spinner></app-spinner>\n </div>\n}\n", styles: [".loader{z-index:10000}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }] });
|
|
3282
3282
|
}
|
|
3283
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
3284
3284
|
type: Component,
|
|
3285
3285
|
args: [{ selector: 'app-loader', standalone: true, imports: [
|
|
3286
3286
|
SpinnerComponent
|
|
@@ -3305,10 +3305,10 @@ class NetworkImageComponent {
|
|
|
3305
3305
|
handleImageError() {
|
|
3306
3306
|
this.isError.update((c) => true);
|
|
3307
3307
|
}
|
|
3308
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3309
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3308
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NetworkImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3309
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NetworkImageComponent, isStandalone: true, selector: "lib-network-image", inputs: { placeholderImage: { classPropertyName: "placeholderImage", publicName: "placeholderImage", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isError()) {\n <img\n [src]=\"placeHolderUrl()\"\n class=\"object-cover w-full h-full transition-all duration-200 transform group-hover:scale-105\" alt=\"Image\">\n} @else {\n <img\n [src]=\"sourceUrl()\"\n (error)=\"handleImageError()\" alt=\"\"\n class=\"object-cover w-full h-full transition-all duration-200 transform group-hover:scale-105\">\n}\n", styles: [""] });
|
|
3310
3310
|
}
|
|
3311
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NetworkImageComponent, decorators: [{
|
|
3312
3312
|
type: Component,
|
|
3313
3313
|
args: [{ selector: 'lib-network-image', standalone: true, imports: [], template: "@if (isError()) {\n <img\n [src]=\"placeHolderUrl()\"\n class=\"object-cover w-full h-full transition-all duration-200 transform group-hover:scale-105\" alt=\"Image\">\n} @else {\n <img\n [src]=\"sourceUrl()\"\n (error)=\"handleImageError()\" alt=\"\"\n class=\"object-cover w-full h-full transition-all duration-200 transform group-hover:scale-105\">\n}\n" }]
|
|
3314
3314
|
}], propDecorators: { placeholderImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderImage", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }] } });
|
|
@@ -3340,10 +3340,10 @@ class BaseOverlayComponent {
|
|
|
3340
3340
|
onCloseClicked() {
|
|
3341
3341
|
this.dialogRef.close();
|
|
3342
3342
|
}
|
|
3343
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3344
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3343
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BaseOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3344
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: BaseOverlayComponent, isStandalone: true, selector: "app-base-overlay", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, enableDefaultLayout: { classPropertyName: "enableDefaultLayout", publicName: "enableDefaultLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBackClicked: "onBackClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "actionsDiv", first: true, predicate: ["actions"], descendants: true }, { propertyName: "actionsContainerDiv", first: true, predicate: ["actionsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"base-overlay flex flex-col rounded-3xl h-full overflow-hidden bg-white relative\">\n\n @if (enableDefaultLayout()) {\n @if (showTitle()) {\n <div class=\"flex justify-center items-center px-3 py-6 border-b border-neutral-200\">\n\n @if (showBackButton()) {\n <div class=\"absolute left-3 rounded-full p-3 cursor-pointer hover:bg-neutral-50 transition-all duration-500\"\n (click)=\"goBack()\">\n <svg class=\"w-[18px] h-[18px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path d=\"M20 11V13H8.00003L13.5 18.5L12.08 19.92L4.16003 12L12.08 4.07996L13.5 5.49996L8.00003 11H20Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n }\n\n <span class=\"text-body1\">{{ title() }}</span>\n <div class=\"absolute right-3 rounded-lg p-2 border border-neutral-300 cursor-pointer hover:bg-neutral-50\"\n (click)=\"onCloseClicked()\">\n <svg class=\"w-[18px] h-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n }\n }\n\n <div class=\"flex-1 min-h-0 overflow-y-auto\" [ngClass]=\"enableDefaultLayout() ? 'px-5 py-4' : ''\">\n <ng-content select=\"[body]\">\n <ng-container #container></ng-container>\n </ng-content>\n </div>\n\n\n @if (enableDefaultLayout()) {\n <div #actionsContainer class=\"actions-container border-t px-4 py-4\">\n <div #actions class=\"w-full\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </div>\n }\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3345
3345
|
}
|
|
3346
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3346
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BaseOverlayComponent, decorators: [{
|
|
3347
3347
|
type: Component,
|
|
3348
3348
|
args: [{ selector: 'app-base-overlay', imports: [
|
|
3349
3349
|
NgClass
|
|
@@ -3421,10 +3421,10 @@ class ResponsiveHelperComponent {
|
|
|
3421
3421
|
onResize(event) {
|
|
3422
3422
|
this.screenWidth.set(this.document.documentElement.clientWidth);
|
|
3423
3423
|
}
|
|
3424
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3425
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3424
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ResponsiveHelperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3425
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ResponsiveHelperComponent, isStandalone: true, selector: "app-responsive-helper", host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "@if (config.enableDevTools) {\n <div\n class=\"fixed bottom-5 left-5 align-middle font-medium sm:block space-x-2 select-none pointer-events-none\">\n <div\n class=\"hidden sm:inline-flex sm:flex-col py-1 px-3 bg-black bg-opacity-50 text-white rounded-md text-caption pointer-events-none\">\n <!-- <span class=\"block sm:hidden\">mob</span>-->\n <span class=\"hidden sm:block md:hidden\">sm</span>\n <span class=\"hidden md:block lg:hidden\">md</span>\n <span class=\"hidden lg:block xl:hidden\">lg</span>\n <span class=\"hidden xl:block 2xl:hidden\">xl</span>\n <span class=\"hidden 2xl:block\">2xl</span>\n </div>\n\n <span\n class=\"text-caption py-1 px-3 bg-black text-white rounded-md bg-opacity-50 select-none pointer-events-none\">{{ screenWidth() }}\n px</span>\n </div>\n}\n", styles: [""] });
|
|
3426
3426
|
}
|
|
3427
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3427
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ResponsiveHelperComponent, decorators: [{
|
|
3428
3428
|
type: Component,
|
|
3429
3429
|
args: [{ selector: 'app-responsive-helper', standalone: true, imports: [], template: "@if (config.enableDevTools) {\n <div\n class=\"fixed bottom-5 left-5 align-middle font-medium sm:block space-x-2 select-none pointer-events-none\">\n <div\n class=\"hidden sm:inline-flex sm:flex-col py-1 px-3 bg-black bg-opacity-50 text-white rounded-md text-caption pointer-events-none\">\n <!-- <span class=\"block sm:hidden\">mob</span>-->\n <span class=\"hidden sm:block md:hidden\">sm</span>\n <span class=\"hidden md:block lg:hidden\">md</span>\n <span class=\"hidden lg:block xl:hidden\">lg</span>\n <span class=\"hidden xl:block 2xl:hidden\">xl</span>\n <span class=\"hidden 2xl:block\">2xl</span>\n </div>\n\n <span\n class=\"text-caption py-1 px-3 bg-black text-white rounded-md bg-opacity-50 select-none pointer-events-none\">{{ screenWidth() }}\n px</span>\n </div>\n}\n" }]
|
|
3430
3430
|
}], ctorParameters: () => [], propDecorators: { onResize: [{
|
|
@@ -3448,10 +3448,10 @@ class SvgUrlIconComponent {
|
|
|
3448
3448
|
console.error('Failed to load SVG:', error);
|
|
3449
3449
|
});
|
|
3450
3450
|
}
|
|
3451
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3452
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
3451
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SvgUrlIconComponent, deps: [{ token: i1$1.HttpClient }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
3452
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: SvgUrlIconComponent, isStandalone: true, selector: "app-svg-url-icon", inputs: { svgUrl: { classPropertyName: "svgUrl", publicName: "svgUrl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [innerHTML]=\"svgIcon\"></div>\n", styles: [""] });
|
|
3453
3453
|
}
|
|
3454
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3454
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SvgUrlIconComponent, decorators: [{
|
|
3455
3455
|
type: Component,
|
|
3456
3456
|
args: [{ selector: 'app-svg-url-icon', standalone: true, imports: [], template: "<div [innerHTML]=\"svgIcon\"></div>\n" }]
|
|
3457
3457
|
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2.DomSanitizer }], propDecorators: { svgUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgUrl", required: true }] }] } });
|
|
@@ -3527,10 +3527,10 @@ class ToastService {
|
|
|
3527
3527
|
duration: duration
|
|
3528
3528
|
});
|
|
3529
3529
|
}
|
|
3530
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3531
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3530
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3531
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
3532
3532
|
}
|
|
3533
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3533
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToastService, decorators: [{
|
|
3534
3534
|
type: Injectable,
|
|
3535
3535
|
args: [{
|
|
3536
3536
|
providedIn: 'root'
|
|
@@ -3542,10 +3542,10 @@ class ToastCloseButtonComponent {
|
|
|
3542
3542
|
onCloseClick() {
|
|
3543
3543
|
this.closeEvent.emit();
|
|
3544
3544
|
}
|
|
3545
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3546
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3545
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToastCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3546
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: ToastCloseButtonComponent, isStandalone: true, selector: "app-toast-close-button", outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<div class=\"p-1 text-neutral-400 rounded-full hover:bg-neutral-50 hover:cursor-pointer\" (click)=\"onCloseClick()\">\n <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"close\">\n <path id=\"Vector\" d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\" fill=\"currentColor\"/>\n </g>\n </svg>\n</div>\n", styles: [""] });
|
|
3547
3547
|
}
|
|
3548
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3548
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToastCloseButtonComponent, decorators: [{
|
|
3549
3549
|
type: Component,
|
|
3550
3550
|
args: [{ selector: 'app-toast-close-button', standalone: true, imports: [], template: "<div class=\"p-1 text-neutral-400 rounded-full hover:bg-neutral-50 hover:cursor-pointer\" (click)=\"onCloseClick()\">\n <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"close\">\n <path id=\"Vector\" d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\" fill=\"currentColor\"/>\n </g>\n </svg>\n</div>\n" }]
|
|
3551
3551
|
}], propDecorators: { closeEvent: [{
|
|
@@ -3585,10 +3585,10 @@ class ToastComponent {
|
|
|
3585
3585
|
}
|
|
3586
3586
|
ngOnDestroy() {
|
|
3587
3587
|
}
|
|
3588
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3589
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3588
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3589
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ToastComponent, isStandalone: true, selector: "app-toast", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: false, isRequired: false, transformFunction: null }, themeType: { classPropertyName: "themeType", publicName: "themeType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disposeEvent: "disposeEvent" }, ngImport: i0, template: "<div class=\"shadow-2 border border-neutral-200 px-3 py-3 mb-5 min-w-72 max-w-80 rounded-md z-50\" [ngClass]=\"themeClass()\">\n <div class=\"flex items-center gap-3\">\n <div class=\"flex justify-center items-center h-6 w-6\">\n @switch (type) {\n @case (ToastType.success) {\n <svg height=\"18\" width=\"18\" class=\"text-green-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\">\n <path\n d=\"M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z\"\n fill=\"currentColor\"/>\n </svg>\n }\n @case (ToastType.error) {\n <svg height=\"18\" width=\"18\" class=\"text-red-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM14.59 8L12 10.59L9.41 8L8 9.41L10.59 12L8 14.59L9.41 16L12 13.41L14.59 16L16 14.59L13.41 12L16 9.41L14.59 8Z\"\n fill=\"currentColor\"/>\n </svg>\n }\n @case (ToastType.info) {\n <svg height=\"18\" width=\"18\" class=\"text-blue-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11 9H13V7H11M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM11 17H13V11H11V17Z\"\n fill=\"currentColor\"/>\n </svg>\n }\n @case (ToastType.warning) {\n <svg height=\"18\" width=\"18\" class=\"text-amber-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"currentColor\">\n <path\n d=\"M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM14.59 8L12 10.59L9.41 8L8 9.41L10.59 12L8 14.59L9.41 16L12 13.41L14.59 16L16 14.59L13.41 12L16 9.41L14.59 8Z\"\n fill=\"currentColor\"/>\n </svg>\n }\n }\n </div>\n\n <div class=\"flex flex-col gap-2\">\n @if (title) {\n <p class=\"text-body1\">{{ title }}</p>\n }\n <p class=\"text-body2 text-neutral-400\">{{ message }}</p>\n </div>\n <div class=\"flex-grow\"></div>\n\n <app-toast-close-button (closeEvent)=\"hide()\"></app-toast-close-button>\n\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ToastCloseButtonComponent, selector: "app-toast-close-button", outputs: ["closeEvent"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3590
3590
|
}
|
|
3591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToastComponent, decorators: [{
|
|
3592
3592
|
type: Component,
|
|
3593
3593
|
args: [{ selector: 'app-toast', standalone: true, imports: [
|
|
3594
3594
|
ToastCloseButtonComponent,
|
|
@@ -3629,10 +3629,10 @@ class ToasterComponent {
|
|
|
3629
3629
|
this.currentToasts.splice(index, 1);
|
|
3630
3630
|
this.cdr.detectChanges();
|
|
3631
3631
|
}
|
|
3632
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3633
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3632
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToasterComponent, deps: [{ token: ToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3633
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ToasterComponent, isStandalone: true, selector: "app-toaster", inputs: { themeType: { classPropertyName: "themeType", publicName: "themeType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"toaster fixed top-1 right-1 px-3 py-2\">\n @for (toast of currentToasts; track toast; let i = $index) {\n <div>\n <app-toast\n [type]=\"toast.type\"\n [title]=\"toast.title\"\n [message]=\"toast.message\"\n [duration]=\"toast.duration\"\n (disposeEvent)=\"dispose(i)\"\n [themeType]=\"toast.themeType ?? 'light'\"\n ></app-toast>\n </div>\n }\n</div>\n", styles: [".toaster{z-index:2000}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "app-toast", inputs: ["type", "title", "message", "duration", "themeType"], outputs: ["disposeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3634
3634
|
}
|
|
3635
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToasterComponent, decorators: [{
|
|
3636
3636
|
type: Component,
|
|
3637
3637
|
args: [{ selector: 'app-toaster', standalone: true, imports: [
|
|
3638
3638
|
ToastComponent
|
|
@@ -3642,10 +3642,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
3642
3642
|
class TooltipComponent {
|
|
3643
3643
|
text = '';
|
|
3644
3644
|
tooltipClass = [];
|
|
3645
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3646
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3645
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3646
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text", tooltipClass: "tooltipClass" }, ngImport: i0, template: "<div class=\"bg-gray-800 text-white text-xs px-3 py-1 rounded shadow-lg max-w-xs whitespace-nowrap z-50\"\n [ngClass]=\"tooltipClass\">\n {{ text }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3647
3647
|
}
|
|
3648
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3648
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
3649
3649
|
type: Component,
|
|
3650
3650
|
args: [{ selector: 'lib-tooltip', imports: [
|
|
3651
3651
|
NgClass
|
|
@@ -3759,10 +3759,10 @@ class TooltipDirective {
|
|
|
3759
3759
|
}
|
|
3760
3760
|
this.hideTooltip();
|
|
3761
3761
|
}
|
|
3762
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3763
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
3762
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3763
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: TooltipDirective, isStandalone: true, selector: "[libTooltip]", inputs: { libTooltip: { classPropertyName: "libTooltip", publicName: "libTooltip", isSignal: false, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "tooltipClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "touchcancel": "onTouchEnd()" } }, ngImport: i0 });
|
|
3764
3764
|
}
|
|
3765
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3765
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
3766
3766
|
type: Directive,
|
|
3767
3767
|
args: [{
|
|
3768
3768
|
selector: '[libTooltip]',
|
|
@@ -3808,10 +3808,10 @@ class ClickOutsideDirective {
|
|
|
3808
3808
|
let isInside = elementToCheck === this.element.nativeElement || this.element.nativeElement.contains(elementToCheck);
|
|
3809
3809
|
return isInside;
|
|
3810
3810
|
}
|
|
3811
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3812
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3811
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3812
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
|
|
3813
3813
|
}
|
|
3814
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3814
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
3815
3815
|
type: Directive,
|
|
3816
3816
|
args: [{
|
|
3817
3817
|
selector: '[clickOutside]',
|
|
@@ -3855,10 +3855,10 @@ class InvalidControlScrollDirective {
|
|
|
3855
3855
|
return null;
|
|
3856
3856
|
}
|
|
3857
3857
|
}
|
|
3858
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3859
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3858
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: InvalidControlScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3859
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: InvalidControlScrollDirective, isStandalone: true, selector: "[appInvalidControlScroll]", host: { listeners: { "ngSubmit": "onSubmit()" } }, ngImport: i0 });
|
|
3860
3860
|
}
|
|
3861
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: InvalidControlScrollDirective, decorators: [{
|
|
3862
3862
|
type: Directive,
|
|
3863
3863
|
args: [{
|
|
3864
3864
|
selector: '[appInvalidControlScroll]',
|
|
@@ -3908,10 +3908,10 @@ class InvalidControlScrollContainerDirective {
|
|
|
3908
3908
|
return absoluteControlElTop - labelOffset;
|
|
3909
3909
|
}
|
|
3910
3910
|
}
|
|
3911
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3912
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3911
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: InvalidControlScrollContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3912
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: InvalidControlScrollContainerDirective, isStandalone: true, selector: "[appInvalidControlScrollContainer]", host: { listeners: { "ngSubmit": "onSubmit()" } }, ngImport: i0 });
|
|
3913
3913
|
}
|
|
3914
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3914
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: InvalidControlScrollContainerDirective, decorators: [{
|
|
3915
3915
|
type: Directive,
|
|
3916
3916
|
args: [{
|
|
3917
3917
|
selector: '[appInvalidControlScrollContainer]',
|
|
@@ -3973,10 +3973,10 @@ class AppErrorComponent {
|
|
|
3973
3973
|
get hasErrors() {
|
|
3974
3974
|
return (this.control() && this.control()?.touched && this.control()?.errors) ?? false;
|
|
3975
3975
|
}
|
|
3976
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3977
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3976
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AppErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3977
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AppErrorComponent, isStandalone: true, selector: "app-error", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (control()?.errors && hasErrors) {\n <div class=\"flex mt-1\">\n <span class=\"text-caption text-red-500\">\n {{ control()?.errors! | humanizeFormMessages: errorMessages() }}\n </span>\n </div>\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
3978
3978
|
}
|
|
3979
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3979
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AppErrorComponent, decorators: [{
|
|
3980
3980
|
type: Component,
|
|
3981
3981
|
args: [{ selector: 'app-error', imports: [
|
|
3982
3982
|
HumanizeFormMessagesPipe
|
|
@@ -4224,10 +4224,10 @@ class DatePickerComponent extends BaseControlValueAccessorV3 {
|
|
|
4224
4224
|
getLastYear() {
|
|
4225
4225
|
return this.years[this.years.length - 1].value;
|
|
4226
4226
|
}
|
|
4227
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4228
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4227
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4228
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"flex flex-col gap-3 bg-white rounded-md border border-neutral-100 min-h-96 px-3 py-3 shadow-1 select-none w-min\">\n\n <div class=\"flex items-center justify-between w-[280px]\">\n\n <div (click)=\"onYearSelectionPressed()\"\n class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-neutral-100 rounded-full cursor-pointer\">\n @switch (uiMode()) {\n @case ('date') {\n <span class=\"text-caption text-neutral-900 uppercase\">{{ getMMMYYYY() }}</span>\n <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\"/>\n </svg>\n }\n @case ('month') {\n <span class=\"text-caption text-neutral-900 uppercase\">{{ activeYear }}</span>\n }\n @case ('year') {\n <span class=\"text-caption text-neutral-900 uppercase\">{{ getFirstYear() }} - {{ getLastYear() }}</span>\n <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\"/>\n </svg>\n }\n }\n\n </div>\n\n <div class=\"flex items-center gap-2\">\n\n <div (click)=\"previousMonthPressed()\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n\n <div (click)=\"nextMonthPressed()\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"black\"/>\n </svg>\n </div>\n\n </div>\n\n </div>\n\n @if (uiMode() == 'date') {\n <div class=\"grid grid-cols-7 text-xs text-center text-gray-900 gap-y-1\">\n @for (day of days; track day) {\n <span\n class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg\">{{ day.displayName }}</span>\n }\n\n @for (blankDay of blankDays; track blankDay) {\n <span\n class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-transparent\"></span>\n }\n\n @for (day of daysOfMonth; track day) {\n <span (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n [ngClass]=\"{\n 'text-neutral-400' : !day.isEnabled,\n '!bg-primary-500 !text-white': isSelected(day.value),\n 'today-and-selected bg-primary-500 text-white': isToday(day.value) && isSelected(day.value),\n 'border border-primary-500 text-primary-900': isToday(day.value),\n 'not-today-not-selected text-gray-700 hover:bg-primary-50': !isToday(day.value) && !isSelected(day.value) && day.isEnabled,\n 'not-today-selected text-gray-700 hover:bg-primary-500': !isToday(day.value) && isSelected(day.value),\n }\"\n class=\"flex items-center justify-center w-[40px] h-[40px] text-gray-700 rounded-lg select-none cursor-pointer\">{{ day.value }}</span>\n }\n </div>\n }\n\n @if (uiMode() == 'month') {\n <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n @for (month of months; track month; let i = $index) {\n <span (click)=\"onMonthSelected(i)\"\n [ngClass]=\"isMonthEnabled(i) ? '' : 'text-neutral-400'\"\n class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg uppercase\">{{ month }}</span>\n }\n </div>\n }\n\n\n @if (uiMode() == 'year') {\n <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n @for (year of years; track year; let i = $index) {\n <span (click)=\"year.isEnabled ? onYearSelected(year.value) : null\"\n [ngClass]=\"{\n 'text-neutral-400' : !year.isEnabled,\n }\"\n class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg\">{{ year.value }}</span>\n }\n </div>\n }\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
4229
4229
|
}
|
|
4230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
4231
4231
|
type: Component,
|
|
4232
4232
|
args: [{ selector: 'app-date-picker', imports: [
|
|
4233
4233
|
NgClass
|
|
@@ -4240,10 +4240,10 @@ class DatePickerOverlayComponent {
|
|
|
4240
4240
|
onDateSelected($event) {
|
|
4241
4241
|
this.dialogRef.close($event);
|
|
4242
4242
|
}
|
|
4243
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4243
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DatePickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: DatePickerOverlayComponent, isStandalone: true, selector: "app-date-picker-overlay", ngImport: i0, template: "<app-date-picker [minDate]=\"data.minDate\"\n [maxDate]=\"data.maxDate\"\n [allowOnlyPast]=\"data.allowOnlyPast\"\n [allowOnlyFuture]=\"data.allowOnlyFuture\"\n [disabledDays]=\"data.disabledDays\"\n [disabledDates]=\"data.disabledDates\"\n (dateSelected)=\"onDateSelected($event)\">\n</app-date-picker>\n", styles: [""], dependencies: [{ kind: "component", type: DatePickerComponent, selector: "app-date-picker", inputs: ["minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateSelected"] }] });
|
|
4245
4245
|
}
|
|
4246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4246
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DatePickerOverlayComponent, decorators: [{
|
|
4247
4247
|
type: Component,
|
|
4248
4248
|
args: [{ selector: 'app-date-picker-overlay', imports: [
|
|
4249
4249
|
DatePickerComponent
|
|
@@ -4428,10 +4428,10 @@ class DateInputComponent extends BaseControlValueAccessorV3 {
|
|
|
4428
4428
|
const yyyy = date.getFullYear();
|
|
4429
4429
|
return this.inputDateFormat() === InputDateFormat.mmddyyyy ? `${mm}/${dd}/${yyyy}` : `${dd}/${mm}/${yyyy}`;
|
|
4430
4430
|
}
|
|
4431
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4432
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4431
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4432
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DateInputComponent, isStandalone: true, selector: "app-date-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, showDatePickerIcon: { classPropertyName: "showDatePickerIcon", publicName: "showDatePickerIcon", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, inputDateFormat: { classPropertyName: "inputDateFormat", publicName: "inputDateFormat", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n @if (iconSrc()) {\n <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n }\n\n\n <!-- <p>{{ formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n <input\n [mask]=\"'00/00/0000'\"\n [showMaskTyped]=\"isFocused()\"\n class=\"w-full h-[46px] placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n [class.text-neutral-400]=\"formControl.disabled\"\n [class.disabled-placeholder]=\"formControl.disabled\"\n [(ngModel)]=\"textInputValue\"\n (focus)=\"onFocus()\"\n [ngClass]=\"getClass()\"\n [placeholder]=\"placeHolder\"\n (blur)=\"onBlur()\"\n (input)=\"onInputChanged($event)\">\n\n\n <div #trigger (click)=\"onDatePickerIconClicked()\"\n class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"\n class=\"w-[18px] h-[18px] text-neutral-500\">\n <path\n d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n\n </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n <div class=\"mt-1\">\n <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n </div>\n} @else {\n @if (showErrorSpace()) {\n <div class=\"flex mt-1\">\n <span class=\"text-caption text-transparent\">.</span>\n </div>\n }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
4433
4433
|
}
|
|
4434
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4434
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
4435
4435
|
type: Component,
|
|
4436
4436
|
args: [{ selector: 'app-date-input', standalone: true, imports: [
|
|
4437
4437
|
HumanizeFormMessagesPipe,
|
|
@@ -4728,10 +4728,10 @@ class DateRangePickerComponent extends BaseControlValueAccessorV3 {
|
|
|
4728
4728
|
this.hoveredDate = null;
|
|
4729
4729
|
this.onValueChange(null);
|
|
4730
4730
|
}
|
|
4731
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4732
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4731
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DateRangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4732
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DateRangePickerComponent, isStandalone: true, selector: "app-date-range-picker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateRangeSelected: "dateRangeSelected" }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"flex flex-col gap-3 bg-white rounded-md border border-neutral-100 min-h-96 px-3 py-3 shadow-1 select-none\">\n\n <div class=\"grow flex flex-col gap-3 w-[280px]\">\n\n <div class=\"flex items-center justify-between\">\n\n <div (click)=\"onYearSelectionPressed()\"\n class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-neutral-100 rounded-full cursor-pointer\">\n @switch (uiMode()) {\n @case ('date') {\n <span class=\"text-caption text-neutral-900 uppercase\">{{ getMMMYYYY() }}</span>\n <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\"/>\n </svg>\n }\n @case ('month') {\n <span class=\"text-caption text-neutral-900 uppercase\">{{ activeYear }}</span>\n }\n @case ('year') {\n <span class=\"text-caption text-neutral-900 uppercase\">{{ getFirstYear() }} - {{ getLastYear() }}</span>\n <svg class=\"h-[18px] w-[18px] text-neutral-900\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\"/>\n </svg>\n }\n }\n\n </div>\n\n <div class=\"flex items-center gap-2\">\n\n <div (click)=\"previousMonthPressed()\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n\n <div (click)=\"nextMonthPressed()\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-neutral-100 cursor-pointer select-none\">\n <svg class=\"h-[24px] w-[24px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"black\"/>\n </svg>\n </div>\n\n </div>\n\n </div>\n <div class=\"flex gap-3\">\n <span (click)=\"resetSelection()\"\n class=\"text-overline px-2 py-1.5 rounded-md transition-all duration-300 bg-info-50 cursor-pointer select-none text-info-500\">Today</span>\n </div>\n\n @if (uiMode() == 'date') {\n <div class=\"grid grid-cols-7 gap-y-1 text-xs text-center text-gray-900\">\n @for (day of days; track day) {\n <span class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg\">{{ day.displayName }}</span>\n }\n\n @for (blankDay of blankDays; track blankDay) {\n <span class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-transparent\"></span>\n }\n\n @for (day of daysOfMonth; track day) {\n <span (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n (mouseover)=\"onDayHovered(day.value)\"\n [ngClass]=\"{\n 'text-neutral-400' : !day.isEnabled,\n 'border rounded-lg border-primary-500 text-primary-900': isToday(day.value) && !isSelectionStartDate(day.value) && !isSelectionEndDate(day.value),\n 'bg-primary-500 rounded-tl-lg rounded-bl-lg text-white': isSelectionStartDate(day.value),\n 'bg-primary-500 !rounded-tr-lg !rounded-br-lg text-white': isSelectionEndDate(day.value),\n 'bg-primary-50 text-primary-900': isDateInSelectionRange(day.value),\n 'border-t border-b border-r rounded-tr-lg rounded-br-lg border-dashed border-gray-500 bg-neutral-100 text-primary-900': isDateHovered(day.value),\n '!border-t !border-b !border-r-none !border-dashed !border-gray-500 !text-primary-900': isDateInHoveredRange(day.value),\n }\"\n class=\"flex items-center justify-center w-[40px] h-[40px] text-gray-700 select-none cursor-pointer\">{{ day.value }}</span>\n }\n </div>\n }\n\n @if (uiMode() == 'month') {\n <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n @for (month of months; track month; let i = $index) {\n <span (click)=\"onMonthSelected(i)\"\n [ngClass]=\"isMonthEnabled(i) ? '' : 'text-neutral-400'\"\n class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg uppercase\">{{ month }}</span>\n }\n </div>\n }\n\n\n @if (uiMode() == 'year') {\n <div class=\"grid grid-cols-4 text-xs text-center text-gray-900\">\n @for (year of years; track year; let i = $index) {\n <span (click)=\"year.isEnabled ? onYearSelected(year.value) : null\"\n [ngClass]=\"{\n 'text-neutral-400' : !year.isEnabled,\n }\"\n class=\"flex items-center px-2 py-2.5 justify-center cursor-pointer select-none hover:bg-neutral-100 rounded-lg\">{{ year.value }}</span>\n }\n </div>\n }\n </div>\n\n\n <div class=\"flex items-center justify-end\">\n <span (click)=\"resetSelection()\"\n class=\"text-overline px-2 py-2 rounded-md transition-all duration-300 hover:bg-info-50 cursor-pointer select-none text-info-500\">Reset</span>\n </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
4733
4733
|
}
|
|
4734
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4734
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
4735
4735
|
type: Component,
|
|
4736
4736
|
args: [{ selector: 'app-date-range-picker', imports: [
|
|
4737
4737
|
NgClass
|
|
@@ -5033,10 +5033,10 @@ class DropdownComponent extends BaseControlValueAccessorV2 {
|
|
|
5033
5033
|
return current === value;
|
|
5034
5034
|
});
|
|
5035
5035
|
}
|
|
5036
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5037
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: DropdownComponent, isStandalone: true, selector: "app-dropdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, prefixIconPath: { classPropertyName: "prefixIconPath", publicName: "prefixIconPath", isSignal: true, isRequired: false, transformFunction: null }, isTitlePrefix: { classPropertyName: "isTitlePrefix", publicName: "isTitlePrefix", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchKeyMatch: { classPropertyName: "searchKeyMatch", publicName: "searchKeyMatch", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, addActionText: { classPropertyName: "addActionText", publicName: "addActionText", isSignal: true, isRequired: false, transformFunction: null }, minimumPopupWidth: { classPropertyName: "minimumPopupWidth", publicName: "minimumPopupWidth", isSignal: true, isRequired: false, transformFunction: null }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", addActionClicked: "addActionClicked" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["searchField"], descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "dropdownListContainer", first: true, predicate: ["dropdownListContainer"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-input [title]=\"isTitlePrefix() ? null : title()\" [fullWidth]=\"fullWidth()\" (keydown)=\"handleKeydown($event)\"\n [isRequiredField]=\"hasRequiredValidator()\">\n <div #dropdownButton input class=\"relative inline text-left min-w-28 w-full\">\n\n <button #dropdown (click)=\"toggleDropdown()\"\n type=\"button\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"isOpen()\"\n class=\"h-[46px] flex items-center gap-3 w-full px-3 py-2 text-sm justify-between font-medium text-gray-700 bg-white rounded-md transition-all duration-300\"\n [ngClass]=\"getButtonClass()\">\n\n <div class=\"flex items-center gap-3 w-full\">\n @if(prefixIconPath()) {\n <app-svg-icon [size]=\"18\" [src]=\"prefixIconPath()!\"></app-svg-icon>\n }\n @if (isTitlePrefix()) {\n <span class=\"text-body2 text-neutral-500 whitespace-nowrap\">{{ title() }}:</span>\n }\n <span class=\"w-full text-body2 text-left truncate overflow-hidden text-ellipsis ... line-clamp-2\"\n [ngClass]=\"((formControl.value != null && formControl.value != '') || (selectedItem() != null && selectedItem() != '')) ? 'text-black' : 'text-gray-400'\">{{ getDisplayString(selectedItem()) || getDisplayString(getSelectedItem()) || placeholder() }}</span>\n </div>\n\n <svg class=\"-mr-1 h-[20px] w-[20px] text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M7.41 8.57996L12 13.17L16.59 8.57996L18 9.99996L12 16L6 9.99996L7.41 8.57996Z\"\n fill=\"currentColor\"/>\n </svg>\n </button>\n\n <ng-template cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"onClickOutside()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},\n {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <div #dropdownListContainer\n class=\"flex flex-col rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-clip\">\n @if (enableSearch()) {\n <div class=\"relative flex items-center w-full text-neutral-400 bg-white border border-b border-neutral-200\">\n <svg class=\"absolute pointer-events-none ml-3 text-neutral-400 w-[20px] h-[20px]\"\n viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.59 15.41 11.11 16 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z\"\n fill=\"currentColor\"/>\n </svg>\n\n <input (input)=\"filterList($event)\" (keydown)=\"handleKeydown($event)\" #searchField\n class=\"h-[46px] pr-3 pl-10 placeholder-neutral-400 text-black border-none outline-none focus:border-none w-full\">\n\n <div\n class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full cursor-pointer\"\n (click)=\"onClearSearchClicked()\">\n <svg class=\"h-[16px] w-[16px] text-neutral-400\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path\n d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n }\n\n @if (addActionText()) {\n <div class=\"flex gap-3 px-4 py-4 bg-neutral-50 w-full cursor-pointer border-b border-neutral-100\"\n (click)=\"onAddActionClicked()\">\n <svg class=\"text-primary-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\" fill=\"currentColor\"/>\n </svg>\n <span class=\"text-body2 text-primary-500\">{{ addActionText() }}</span>\n </div>\n }\n\n <div #dropdownList class=\"overflow-y-scroll scrollbar scrollbar-thumb-gray-500 scrollbar-track-gray-300\"\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"options-menu\" tabindex=\"-1\"\n [style.width.px]=\"dropdownWidth()\">\n\n @for (item of filteredList(); track item; let i = $index) {\n <span class=\"text-gray-700 block px-4 py-3 text-sm hover:bg-neutral-100 cursor-pointer\"\n [ngClass]=\"(highlightedIndex() == i) ? 'bg-neutral-200' : 'bg-neutral-50'\" role=\"menuitem\"\n tabindex=\"-1\" (click)=\"onItemClicked(item)\">{{ getDisplayString(item) }}</span>\n } @empty {\n <span class=\"text-gray-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n }\n </div>\n </div>\n </ng-template>\n\n </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n <div class=\"mb-3\">\n <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n </div>\n} @else {\n @if (showErrorSpace()) {\n <div class=\"mb-3\">\n <span class=\"text-caption text-transparent\">.</span>\n </div>\n }\n}\n", styles: [".scrollbar::-webkit-scrollbar{@apply w-1;}.scrollbar::-webkit-scrollbar-thumb{@apply bg-primary-200 rounded-full;}.scrollbar::-webkit-scrollbar-track{@apply bg-primary-50 bg-opacity-80;}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
5036
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5037
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DropdownComponent, isStandalone: true, selector: "app-dropdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, prefixIconPath: { classPropertyName: "prefixIconPath", publicName: "prefixIconPath", isSignal: true, isRequired: false, transformFunction: null }, isTitlePrefix: { classPropertyName: "isTitlePrefix", publicName: "isTitlePrefix", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchKeyMatch: { classPropertyName: "searchKeyMatch", publicName: "searchKeyMatch", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, addActionText: { classPropertyName: "addActionText", publicName: "addActionText", isSignal: true, isRequired: false, transformFunction: null }, minimumPopupWidth: { classPropertyName: "minimumPopupWidth", publicName: "minimumPopupWidth", isSignal: true, isRequired: false, transformFunction: null }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", addActionClicked: "addActionClicked" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["searchField"], descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "dropdownListContainer", first: true, predicate: ["dropdownListContainer"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-input [title]=\"isTitlePrefix() ? null : title()\" [fullWidth]=\"fullWidth()\" (keydown)=\"handleKeydown($event)\"\n [isRequiredField]=\"hasRequiredValidator()\">\n <div #dropdownButton input class=\"relative inline text-left min-w-28 w-full\">\n\n <button #dropdown (click)=\"toggleDropdown()\"\n type=\"button\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"isOpen()\"\n class=\"h-[46px] flex items-center gap-3 w-full px-3 py-2 text-sm justify-between font-medium text-gray-700 bg-white rounded-md transition-all duration-300\"\n [ngClass]=\"getButtonClass()\">\n\n <div class=\"flex items-center gap-3 w-full\">\n @if(prefixIconPath()) {\n <app-svg-icon [size]=\"18\" [src]=\"prefixIconPath()!\"></app-svg-icon>\n }\n @if (isTitlePrefix()) {\n <span class=\"text-body2 text-neutral-500 whitespace-nowrap\">{{ title() }}:</span>\n }\n <span class=\"w-full text-body2 text-left truncate overflow-hidden text-ellipsis ... line-clamp-2\"\n [ngClass]=\"((formControl.value != null && formControl.value != '') || (selectedItem() != null && selectedItem() != '')) ? 'text-black' : 'text-gray-400'\">{{ getDisplayString(selectedItem()) || getDisplayString(getSelectedItem()) || placeholder() }}</span>\n </div>\n\n <svg class=\"-mr-1 h-[20px] w-[20px] text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M7.41 8.57996L12 13.17L16.59 8.57996L18 9.99996L12 16L6 9.99996L7.41 8.57996Z\"\n fill=\"currentColor\"/>\n </svg>\n </button>\n\n <ng-template cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"onClickOutside()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},\n {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <div #dropdownListContainer\n class=\"flex flex-col rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-clip\">\n @if (enableSearch()) {\n <div class=\"relative flex items-center w-full text-neutral-400 bg-white border border-b border-neutral-200\">\n <svg class=\"absolute pointer-events-none ml-3 text-neutral-400 w-[20px] h-[20px]\"\n viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.59 15.41 11.11 16 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z\"\n fill=\"currentColor\"/>\n </svg>\n\n <input (input)=\"filterList($event)\" (keydown)=\"handleKeydown($event)\" #searchField\n class=\"h-[46px] pr-3 pl-10 placeholder-neutral-400 text-black border-none outline-none focus:border-none w-full\">\n\n <div\n class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full cursor-pointer\"\n (click)=\"onClearSearchClicked()\">\n <svg class=\"h-[16px] w-[16px] text-neutral-400\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path\n d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n }\n\n @if (addActionText()) {\n <div class=\"flex gap-3 px-4 py-4 bg-neutral-50 w-full cursor-pointer border-b border-neutral-100\"\n (click)=\"onAddActionClicked()\">\n <svg class=\"text-primary-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\" fill=\"currentColor\"/>\n </svg>\n <span class=\"text-body2 text-primary-500\">{{ addActionText() }}</span>\n </div>\n }\n\n <div #dropdownList class=\"overflow-y-scroll scrollbar scrollbar-thumb-gray-500 scrollbar-track-gray-300\"\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"options-menu\" tabindex=\"-1\"\n [style.width.px]=\"dropdownWidth()\">\n\n @for (item of filteredList(); track item; let i = $index) {\n <span class=\"text-gray-700 block px-4 py-3 text-sm hover:bg-neutral-100 cursor-pointer\"\n [ngClass]=\"(highlightedIndex() == i) ? 'bg-neutral-200' : 'bg-neutral-50'\" role=\"menuitem\"\n tabindex=\"-1\" (click)=\"onItemClicked(item)\">{{ getDisplayString(item) }}</span>\n } @empty {\n <span class=\"text-gray-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n }\n </div>\n </div>\n </ng-template>\n\n </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n <div class=\"mb-3\">\n <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n </div>\n} @else {\n @if (showErrorSpace()) {\n <div class=\"mb-3\">\n <span class=\"text-caption text-transparent\">.</span>\n </div>\n }\n}\n", styles: [".scrollbar::-webkit-scrollbar{@apply w-1;}.scrollbar::-webkit-scrollbar-thumb{@apply bg-primary-200 rounded-full;}.scrollbar::-webkit-scrollbar-track{@apply bg-primary-50 bg-opacity-80;}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
5038
5038
|
}
|
|
5039
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5039
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
5040
5040
|
type: Component,
|
|
5041
5041
|
args: [{ selector: 'app-dropdown', standalone: true, imports: [
|
|
5042
5042
|
ReactiveFormsModule,
|
|
@@ -5136,10 +5136,10 @@ class FileUploaderComponent extends BaseControlValueAccessor {
|
|
|
5136
5136
|
return fileName ? decodeURIComponent(fileName) : '';
|
|
5137
5137
|
}
|
|
5138
5138
|
}
|
|
5139
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5140
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5139
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5140
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FileUploaderComponent, isStandalone: true, selector: "app-file-uploader", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected", fileRemoved: "fileRemoved" }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"flex items-center rounded border-2 border-dashed border-info-300 px-4 py-4 gap-2 cursor-pointer\">\n <div class=\"flex flex-row items-center gap-2 w-full\">\n <div class=\"flex items-center gap-2 grow\">\n <label [for]=\"id()\" class=\"flex items-center gap-3 text-caption cursor-pointer grow\">\n <svg viewBox=\"0 0 24 24\" class=\"h-[24px] w-[24px] text-neutral-500\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M16.5 6V17.5C16.5 18.5609 16.0786 19.5783 15.3284 20.3284C14.5783 21.0786 13.5609 21.5 12.5 21.5C11.4391 21.5 10.4217 21.0786 9.67157 20.3284C8.92143 19.5783 8.5 18.5609 8.5 17.5V5C8.5 4.33696 8.76339 3.70107 9.23223 3.23223C9.70107 2.76339 10.337 2.5 11 2.5C11.663 2.5 12.2989 2.76339 12.7678 3.23223C13.2366 3.70107 13.5 4.33696 13.5 5V15.5C13.5 15.7652 13.3946 16.0196 13.2071 16.2071C13.0196 16.3946 12.7652 16.5 12.5 16.5C12.2348 16.5 11.9804 16.3946 11.7929 16.2071C11.6054 16.0196 11.5 15.7652 11.5 15.5V6H10V15.5C10 16.163 10.2634 16.7989 10.7322 17.2678C11.2011 17.7366 11.837 18 12.5 18C13.163 18 13.7989 17.7366 14.2678 17.2678C14.7366 16.7989 15 16.163 15 15.5V5C15 3.93913 14.5786 2.92172 13.8284 2.17157C13.0783 1.42143 12.0609 1 11 1C9.93913 1 8.92172 1.42143 8.17157 2.17157C7.42143 2.92172 7 3.93913 7 5V17.5C7 18.9587 7.57946 20.3576 8.61091 21.3891C9.64236 22.4205 11.0413 23 12.5 23C13.9587 23 15.3576 22.4205 16.3891 21.3891C17.4205 20.3576 18 18.9587 18 17.5V6H16.5Z\"\n fill=\"currentColor\"/>\n </svg>\n <span class=\"text-caption text-neutral-900\">{{ label() }}</span>\n @if (hasRequiredValidator() || isRequired()) {\n <span class=\"text-caption text-error-500\">*</span>\n }\n </label>\n </div>\n\n @if (formControl.value || selectedFile()) {\n <div class=\"flex gap-3 items-center\">\n <span class=\"text-body2 text-info-500 px-2 underline\"\n (click)=\"onViewFileClicked()\">{{ formControl.value?.name || getFileNameFromUrl(formControl.value) || selectedFile()?.name }}</span>\n @if (!uploading()) {\n <div class=\"flex items-center gap-1 cursor-pointer\" (click)=\"onRemoveFileClicked()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-[16px] w-[16px] text-error-500 underline\"\n viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n fill=\"currentColor\"/>\n </svg>\n <span class=\"text-caption underline text-red-500\">Remove</span>\n </div>\n }\n </div>\n }\n\n @if (uploading()) {\n <app-spinner></app-spinner>\n }\n\n </div>\n <input type=\"file\" [id]=\"id()\" (change)=\"onFileChange($event)\" hidden/>\n</div>\n\n@if (formControl.errors && hasErrors) {\n <div class=\"mt-1\">\n <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n </div>\n}\n\n", styles: [""], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
5141
5141
|
}
|
|
5142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FileUploaderComponent, decorators: [{
|
|
5143
5143
|
type: Component,
|
|
5144
5144
|
args: [{ selector: 'app-file-uploader', standalone: true, imports: [
|
|
5145
5145
|
SpinnerComponent,
|
|
@@ -5501,10 +5501,10 @@ class MultiSelectDropdownComponent extends BaseControlValueAccessor {
|
|
|
5501
5501
|
onAddActionClicked() {
|
|
5502
5502
|
this.addActionClicked.emit();
|
|
5503
5503
|
}
|
|
5504
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5505
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: MultiSelectDropdownComponent, isStandalone: true, selector: "app-multi-select-dropdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, searchKeyMatch: { classPropertyName: "searchKeyMatch", publicName: "searchKeyMatch", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, addActionText: { classPropertyName: "addActionText", publicName: "addActionText", isSignal: true, isRequired: false, transformFunction: null }, minimumPopupWidth: { classPropertyName: "minimumPopupWidth", publicName: "minimumPopupWidth", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", addActionClicked: "addActionClicked" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["searchField"], descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, static: true }, { propertyName: "dropdownListContainer", first: true, predicate: ["dropdownListContainer"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" (keydown)=\"handleKeydown($event)\"\n [isRequiredField]=\"hasRequiredValidator()\">\n\n <div #dropdownButton input class=\"relative inline-block text-left min-w-52\">\n <div>\n <button (click)=\"toggleDropdown()\"\n type=\"button\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"isOpen()\"\n class=\"h-[46px] inline-flex items-center w-full px-4 py-2 text-sm justify-between font-medium text-gray-700 bg-white border-none outline-none border-gray-300 ring-1 focus:ring-2 ring-neutral-300 focus:ring-primary-500 rounded-md shadow-1 focus:border-none focus:outline-none transition-all duration-300\">\n @switch (appearance()) {\n @case (MultiSelectDropdownAppearance.standard) {\n <span class=\"text-body1 text-left overflow-ellipsis\"\n [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ ((selectedItems().length > 0 || formControl.value?.length > 0) ? (selectedItems().length || formControl.value?.length) + ' Selected' : placeholder()) }}</span>\n }\n @case (MultiSelectDropdownAppearance.csv) {\n <div class=\"flex flex-wrap gap-2 w-full\">\n <span class=\"text-body1 text-left w-full truncate overflow-ellipsis\"\n [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ getCsv() ?? placeholder() }}</span>\n </div>\n }\n @default {\n <span class=\"text-body1 text-left overflow-ellipsis\"\n [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ ((selectedItems().length > 0 || formControl.value?.length > 0) ? (selectedItems().length || formControl.value?.length) + ' Selected' : placeholder()) }}</span>\n }\n }\n <div class=\"flex items-center gap-2 -mr-1\">\n <svg class=\"h-[20px] w-[20px] text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M7.41 8.57996L12 13.17L16.59 8.57996L18 9.99996L12 16L6 9.99996L7.41 8.57996Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n\n </button>\n </div>\n </div>\n\n <ng-template cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n (overlayOutsideClick)=\"onClickOutside()\"\n [cdkConnectedOverlayPositions]=\"[\n {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},\n {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <div #dropdownListContainer\n class=\"flex flex-col rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-clip\">\n\n @if (enableSearch()) {\n <div class=\"relative flex items-center w-full text-neutral-400 bg-white border border-b border-neutral-200\">\n <svg class=\"absolute pointer-events-none ml-3 text-neutral-400 w-[20px] h-[20px]\"\n viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.59 15.41 11.11 16 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z\"\n fill=\"currentColor\"/>\n </svg>\n\n <input (input)=\"filterList($event)\" (keydown)=\"handleKeydown($event)\" #searchField\n class=\"h-[46px] pr-3 pl-10 placeholder-neutral-400 text-black border-none outline-none focus:border-none w-full\">\n\n <div\n class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full cursor-pointer\"\n (click)=\"onClearSearchClicked()\">\n <svg class=\"h-[16px] w-[16px] text-neutral-400\" xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path\n d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n }\n\n @if(addActionText()) {\n <div class=\"flex gap-3 px-4 py-4 bg-neutral-50 w-full cursor-pointer border-b border-neutral-100\" (click)=\"onAddActionClicked()\">\n <svg class=\"text-primary-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\" fill=\"currentColor\"/>\n </svg>\n <span class=\"text-body2 text-primary-500\">{{ addActionText() }}</span>\n </div>\n }\n\n <div class=\"flex items-center justify-between px-4 py-4 bg-neutral-50\">\n <span class=\"text-overline text-blue-500 cursor-pointer\"\n (click)=\"onSelectAllClicked()\">SELECT ALL</span>\n <span class=\"text-overline text-blue-500 cursor-pointer\"\n (click)=\"onClearSelectionClicked()\">CLEAR</span>\n </div>\n\n <div #dropdownList class=\"overflow-y-scroll scrollbar scrollbar-thumb-gray-500 scrollbar-track-gray-300\"\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"options-menu\" tabindex=\"-1\"\n [style.width.px]=\"dropdownWidth()\">\n\n @for (item of filteredList(); track item; let i = $index) {\n <div (click)=\"onItemClicked(item)\"\n class=\"flex gap-2 items-center px-2 hover:bg-neutral-100 cursor-pointer\"\n [ngClass]=\"{\n 'bg-neutral-200': (highlightedIndex() == i),\n 'bg-primary-50': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n 'bg-opacity-30': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n }\"\n role=\"menuitem\"\n tabindex=\"-1\">\n <app-checkbox\n [ngModel]=\"isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item)\"></app-checkbox>\n <span class=\"text-gray-700 block text-sm\">{{ getDisplayString(item) }}</span>\n </div>\n } @empty {\n <span class=\"text-gray-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n }\n </div>\n </div>\n </ng-template>\n\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n <div class=\"mb-3\">\n <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n </div>\n} @else {\n @if (showErrorSpace()) {\n <div class=\"mb-3\">\n <span class=\"text-caption text-transparent\">.</span>\n </div>\n }\n}\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
5504
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MultiSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5505
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MultiSelectDropdownComponent, isStandalone: true, selector: "app-multi-select-dropdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, searchKeyMatch: { classPropertyName: "searchKeyMatch", publicName: "searchKeyMatch", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, addActionText: { classPropertyName: "addActionText", publicName: "addActionText", isSignal: true, isRequired: false, transformFunction: null }, minimumPopupWidth: { classPropertyName: "minimumPopupWidth", publicName: "minimumPopupWidth", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", addActionClicked: "addActionClicked" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["searchField"], descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, static: true }, { propertyName: "dropdownListContainer", first: true, predicate: ["dropdownListContainer"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" (keydown)=\"handleKeydown($event)\"\n [isRequiredField]=\"hasRequiredValidator()\">\n\n <div #dropdownButton input class=\"relative inline-block text-left min-w-52\">\n <div>\n <button (click)=\"toggleDropdown()\"\n type=\"button\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"isOpen()\"\n class=\"h-[46px] inline-flex items-center w-full px-4 py-2 text-sm justify-between font-medium text-gray-700 bg-white border-none outline-none border-gray-300 ring-1 focus:ring-2 ring-neutral-300 focus:ring-primary-500 rounded-md shadow-1 focus:border-none focus:outline-none transition-all duration-300\">\n @switch (appearance()) {\n @case (MultiSelectDropdownAppearance.standard) {\n <span class=\"text-body1 text-left overflow-ellipsis\"\n [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ ((selectedItems().length > 0 || formControl.value?.length > 0) ? (selectedItems().length || formControl.value?.length) + ' Selected' : placeholder()) }}</span>\n }\n @case (MultiSelectDropdownAppearance.csv) {\n <div class=\"flex flex-wrap gap-2 w-full\">\n <span class=\"text-body1 text-left w-full truncate overflow-ellipsis\"\n [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ getCsv() ?? placeholder() }}</span>\n </div>\n }\n @default {\n <span class=\"text-body1 text-left overflow-ellipsis\"\n [ngClass]=\"((formControl.value != null && formControl.value?.length > 0) || selectedItems().length > 0) ? 'text-black' : 'text-gray-400'\">{{ ((selectedItems().length > 0 || formControl.value?.length > 0) ? (selectedItems().length || formControl.value?.length) + ' Selected' : placeholder()) }}</span>\n }\n }\n <div class=\"flex items-center gap-2 -mr-1\">\n <svg class=\"h-[20px] w-[20px] text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M7.41 8.57996L12 13.17L16.59 8.57996L18 9.99996L12 16L6 9.99996L7.41 8.57996Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n\n </button>\n </div>\n </div>\n\n <ng-template cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n (overlayOutsideClick)=\"onClickOutside()\"\n [cdkConnectedOverlayPositions]=\"[\n {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},\n {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <div #dropdownListContainer\n class=\"flex flex-col rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-clip\">\n\n @if (enableSearch()) {\n <div class=\"relative flex items-center w-full text-neutral-400 bg-white border border-b border-neutral-200\">\n <svg class=\"absolute pointer-events-none ml-3 text-neutral-400 w-[20px] h-[20px]\"\n viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.5 3C11.2239 3 12.8772 3.68482 14.0962 4.90381C15.3152 6.12279 16 7.77609 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.59 15.41 11.11 16 9.5 16C7.77609 16 6.12279 15.3152 4.90381 14.0962C3.68482 12.8772 3 11.2239 3 9.5C3 7.77609 3.68482 6.12279 4.90381 4.90381C6.12279 3.68482 7.77609 3 9.5 3ZM9.5 5C7 5 5 7 5 9.5C5 12 7 14 9.5 14C12 14 14 12 14 9.5C14 7 12 5 9.5 5Z\"\n fill=\"currentColor\"/>\n </svg>\n\n <input (input)=\"filterList($event)\" (keydown)=\"handleKeydown($event)\" #searchField\n class=\"h-[46px] pr-3 pl-10 placeholder-neutral-400 text-black border-none outline-none focus:border-none w-full\">\n\n <div\n class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full cursor-pointer\"\n (click)=\"onClearSearchClicked()\">\n <svg class=\"h-[16px] w-[16px] text-neutral-400\" xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path\n d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n }\n\n @if(addActionText()) {\n <div class=\"flex gap-3 px-4 py-4 bg-neutral-50 w-full cursor-pointer border-b border-neutral-100\" (click)=\"onAddActionClicked()\">\n <svg class=\"text-primary-500 h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\" fill=\"currentColor\"/>\n </svg>\n <span class=\"text-body2 text-primary-500\">{{ addActionText() }}</span>\n </div>\n }\n\n <div class=\"flex items-center justify-between px-4 py-4 bg-neutral-50\">\n <span class=\"text-overline text-blue-500 cursor-pointer\"\n (click)=\"onSelectAllClicked()\">SELECT ALL</span>\n <span class=\"text-overline text-blue-500 cursor-pointer\"\n (click)=\"onClearSelectionClicked()\">CLEAR</span>\n </div>\n\n <div #dropdownList class=\"overflow-y-scroll scrollbar scrollbar-thumb-gray-500 scrollbar-track-gray-300\"\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"options-menu\" tabindex=\"-1\"\n [style.width.px]=\"dropdownWidth()\">\n\n @for (item of filteredList(); track item; let i = $index) {\n <div (click)=\"onItemClicked(item)\"\n class=\"flex gap-2 items-center px-2 hover:bg-neutral-100 cursor-pointer\"\n [ngClass]=\"{\n 'bg-neutral-200': (highlightedIndex() == i),\n 'bg-primary-50': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n 'bg-opacity-30': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n }\"\n role=\"menuitem\"\n tabindex=\"-1\">\n <app-checkbox\n [ngModel]=\"isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item)\"></app-checkbox>\n <span class=\"text-gray-700 block text-sm\">{{ getDisplayString(item) }}</span>\n </div>\n } @empty {\n <span class=\"text-gray-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n }\n </div>\n </div>\n </ng-template>\n\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n <div class=\"mb-3\">\n <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n </div>\n} @else {\n @if (showErrorSpace()) {\n <div class=\"mb-3\">\n <span class=\"text-caption text-transparent\">.</span>\n </div>\n }\n}\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
5506
5506
|
}
|
|
5507
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MultiSelectDropdownComponent, decorators: [{
|
|
5508
5508
|
type: Component,
|
|
5509
5509
|
args: [{ selector: 'app-multi-select-dropdown', standalone: true, imports: [
|
|
5510
5510
|
BaseInputComponent,
|
|
@@ -5790,10 +5790,10 @@ class MultiSelectionFieldComponent extends BaseControlValueAccessor {
|
|
|
5790
5790
|
break;
|
|
5791
5791
|
}
|
|
5792
5792
|
}
|
|
5793
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5794
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5793
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MultiSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5794
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MultiSelectionFieldComponent, isStandalone: true, selector: "app-multi-selection-field", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconPath: { classPropertyName: "dynamicIconPath", publicName: "dynamicIconPath", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, dynamicImageUrlPath: { classPropertyName: "dynamicImageUrlPath", publicName: "dynamicImageUrlPath", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconColor: { classPropertyName: "dynamicIconColor", publicName: "dynamicIconColor", isSignal: true, isRequired: false, transformFunction: null }, customActionText: { classPropertyName: "customActionText", publicName: "customActionText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, isItemCentered: { classPropertyName: "isItemCentered", publicName: "isItemCentered", isSignal: true, isRequired: false, transformFunction: null }, showSelectionTickMark: { classPropertyName: "showSelectionTickMark", publicName: "showSelectionTickMark", isSignal: true, isRequired: false, transformFunction: null }, maximumDisplayItems: { classPropertyName: "maximumDisplayItems", publicName: "maximumDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", onCustomActionClicked: "onCustomActionClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n <div input class=\"flex flex-wrap justify-start gap-3\">\n\n @for (item of getVisibleItems(); track item; let index = $index) {\n <div class=\"relative flex items-center rounded-lg px-4 py-2 gap-3 cursor-pointer border-2 border-neutral-300\"\n tabindex=\"0\"\n (keydown)=\"handleKeydown($event, item)\"\n [ngStyle]=\"{ 'width': itemWidth() ? itemWidth() + 'px' : null }\"\n (click)=\"onItemClicked(item)\"\n [ngClass]=\"{\n 'border-primary-600': isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item),\n 'justify-center': isItemCentered()\n }\">\n\n\n @if ((isItemExistInFormControl(item) || isItemExistInNormalSelectionList(item)) && showSelectionTickMark()) {\n <div class=\"absolute -top-[8px] -right-[8px]\">\n <svg class=\"h-[18px] w-[18px] text-primary-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path\n d=\"M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n fill=\"white\"/>\n <path\n d=\"M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n }\n\n @if (getDynamicIcon(item)) {\n @switch (getImageType(item)) {\n @case ('url') {\n <img class=\"object-contain\" height=\"20px\" width=\"20px\" [src]=\"getDynamicIcon(item)\" alt=\"\">\n }\n @case ('svg') {\n <app-svg-icon [src]=\"getDynamicIcon(item)!\" [size]=\"18\"\n [ngStyle]=\"{'color': getDynamicIconColor(item)}\"></app-svg-icon>\n }\n }\n }\n <p\n class=\"text-caption text-center text-black overflow-hidden text-ellipsis whitespace-nowrap\">{{ getDisplayString(item) }}</p>\n </div>\n }\n\n @if (showMoreButton()) {\n <span\n (click)=\"showAllItems()\"\n class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-info-500\">\n More\n </span>\n }\n\n @if (showLessButton()) {\n <span\n (click)=\"shrinkItems()\"\n class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-error-500\">\n Less\n </span>\n }\n\n @if (customActionText()) {\n <div (click)=\"customActionClicked()\"\n class=\"flex items-center rounded-lg px-3 py-3 gap-4 cursor-pointer bg-primary-500\">\n <p class=\"text-caption text-white\">{{ customActionText() }}</p>\n </div>\n }\n\n @if (state()?.success() && items().length <= 0) {\n <p class=\"text-caption text-red-700\">{{ noDataMessage() ?? 'No data found' }}</p>\n }\n\n @if ((state()?.failed()) && items().length <= 0) {\n <p\n class=\"text-caption text-red-700\">{{ (state()?.error() != null || state()?.error() != '') ? state()?.error() : noDataMessage() ?? 'No data found' }}</p>\n }\n\n @if (state()?.loading()) {\n <app-shimmer class=\"w-full\" type=\"multiline\"></app-shimmer>\n }\n </div>\n\n <div error>\n @if (formControl.errors && hasErrors) {\n <p class=\"text-caption text-red-500\">\n {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n </p>\n }\n </div>\n</app-base-input>\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
5795
5795
|
}
|
|
5796
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5796
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MultiSelectionFieldComponent, decorators: [{
|
|
5797
5797
|
type: Component,
|
|
5798
5798
|
args: [{ selector: 'app-multi-selection-field', standalone: true, imports: [
|
|
5799
5799
|
BaseInputComponent,
|
|
@@ -5820,10 +5820,10 @@ class NumberInputComponent extends BaseControlValueAccessorV2 {
|
|
|
5820
5820
|
}
|
|
5821
5821
|
text(someType) {
|
|
5822
5822
|
}
|
|
5823
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5824
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5823
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5824
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: NumberInputComponent, isStandalone: true, selector: "app-number-input", outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<!--<pre> {{ formValue() | json }}</pre>-->\n<app-button (click)=\"increment()\">Increment</app-button>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["type", "disabled", "fullWidth", "appearance", "loading", "iconSize", "iconSrc", "iconColor", "buttonColor", "outlineColor", "textButtonColor", "size"], outputs: ["buttonClick"] }] });
|
|
5825
5825
|
}
|
|
5826
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5826
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
5827
5827
|
type: Component,
|
|
5828
5828
|
args: [{ selector: 'app-number-input', standalone: true, imports: [
|
|
5829
5829
|
ButtonComponent
|
|
@@ -5831,10 +5831,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
5831
5831
|
}], propDecorators: { valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
|
|
5832
5832
|
|
|
5833
5833
|
class PhoneNumberInputComponent {
|
|
5834
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5835
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5834
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PhoneNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5835
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: PhoneNumberInputComponent, isStandalone: true, selector: "app-phone-number-input", ngImport: i0, template: "", styles: [""] });
|
|
5836
5836
|
}
|
|
5837
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5837
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
|
|
5838
5838
|
type: Component,
|
|
5839
5839
|
args: [{ selector: 'app-phone-number-input', imports: [], template: "" }]
|
|
5840
5840
|
}] });
|
|
@@ -5876,10 +5876,10 @@ class RadioButtonComponent extends BaseControlValueAccessor {
|
|
|
5876
5876
|
const randomNumber = Math.floor(1000 + Math.random() * 9000);
|
|
5877
5877
|
return `radio-button-${randomNumber.toString()}`;
|
|
5878
5878
|
}
|
|
5879
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5880
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5879
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5880
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: RadioButtonComponent, isStandalone: true, selector: "app-radio-button", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex items-center gap-3\">\n <label class=\"relative align-baseline flex items-center rounded-full cursor-pointer\" [for]=\"id()\">\n @if(ngControl?.name) {\n <input type=\"radio\"\n [name]=\"groupName()\"\n [value]=\"value()\"\n [attr.name]=\"groupName()\"\n [attr.value]=\"value()\"\n [formControl]=\"formControl\"\n (change)=\"onRadioSelected($event)\"\n class=\"before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-neutral-600 text-neutral-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-primary-200 before:opacity-0 before:transition-opacity checked:border-primary-500 checked:before:bg-primary-500 hover:before:opacity-10\"\n [id]=\"id()\"/>\n } @else {\n <input type=\"radio\"\n [name]=\"groupName()\"\n [value]=\"value()\"\n [attr.name]=\"groupName()\"\n [attr.value]=\"value()\"\n [disabled]=\"formControl.disabled\"\n [checked]=\"formControl.value\"\n (change)=\"onRadioSelected($event)\"\n class=\"before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-neutral-600 text-neutral-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-primary-200 before:opacity-0 before:transition-opacity checked:border-primary-500 checked:before:bg-primary-500 hover:before:opacity-10\"\n [id]=\"id()\"/>\n }\n\n <span\n class=\"absolute text-primary-500 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-2.5 w-2.5\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <circle data-name=\"ellipse\" cx=\"8\" cy=\"8\" r=\"8\"></circle>\n </svg>\n </span>\n </label>\n @if(title()) {\n <label class=\"text-body2 cursor-pointer select-none\" [for]=\"id()\">{{ title() }}</label>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
5881
5881
|
}
|
|
5882
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
5883
5883
|
type: Component,
|
|
5884
5884
|
args: [{ selector: 'app-radio-button', standalone: true, imports: [
|
|
5885
5885
|
ReactiveFormsModule
|
|
@@ -5944,10 +5944,10 @@ class SingleItemPickerInputComponent extends BaseControlValueAccessor {
|
|
|
5944
5944
|
togglePopup() {
|
|
5945
5945
|
this.isPopUpOpen.update(p => !p);
|
|
5946
5946
|
}
|
|
5947
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5948
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5947
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SingleItemPickerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5948
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SingleItemPickerInputComponent, isStandalone: true, selector: "app-single-item-picker-input", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex-inline relative hover:bg-neutral-50 py-2 px-4 rounded-lg select-none cursor-pointer\"\n (clickOutside)=\"outsideClicked()\">\n <div class=\"flex gap-4 items-center\" (click)=\"togglePopup()\">\n <div class=\"flex flex-col gap-2\">\n <p class=\"text-body2 text-neutral-500\">{{ title() }}</p>\n <p class=\"text-caption sm:text-body2\">{{ (formControl.value != null && formControl.value != '') ? getProperty(formControl.value) : '-' }}</p>\n </div>\n <app-svg-icon src=\"assets/icons/chevron-down.svg\" class=\"text-neutral-400\" [size]=\"12\"></app-svg-icon>\n </div>\n @if (isPopUpOpen()) {\n <div class=\"absolute z-50 mt-6 min-w-72 transform -translate-x-1/3 rounded-md bg-white shadow-2 p-3 max-h-60 overflow-y-scroll\">\n <div class=\"flex flex-col gap-2\">\n <p class=\"text-body2 text-neutral-600\">Time</p>\n <div class=\"grid grid-cols-3 w-full gap-2\">\n @for (item of items(); track item) {\n <div class=\"inline-flex justify-center items-center cursor-pointer\" (click)=\"onItemClicked(item)\">\n <p\n class=\"text-caption hover:border-primary-500 border-2 border-neutral-200 hover:border-2 p-2 rounded\">{{ getProperty(item) }}</p>\n </div>\n }\n </div>\n @if(items().length <= 0) {\n <span class=\"text-neutral-400 block px-4 py-4 text-sm select-none\" role=\"menuitem\" tabindex=\"-1\">No options available</span>\n }\n </div>\n </div>\n }\n</div>\n\n<div>\n @if (formControl.errors && hasErrors) {\n <p class=\"text-caption text-red-500\">\n {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n </p>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
5949
5949
|
}
|
|
5950
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5950
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SingleItemPickerInputComponent, decorators: [{
|
|
5951
5951
|
type: Component,
|
|
5952
5952
|
args: [{ selector: 'app-single-item-picker-input', standalone: true, imports: [
|
|
5953
5953
|
AppSvgIconComponent,
|
|
@@ -6103,10 +6103,10 @@ class SingleSelectionFieldComponent extends BaseControlValueAccessor {
|
|
|
6103
6103
|
break;
|
|
6104
6104
|
}
|
|
6105
6105
|
}
|
|
6106
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SingleSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SingleSelectionFieldComponent, isStandalone: true, selector: "app-single-selection-field", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, displayTemplate: { classPropertyName: "displayTemplate", publicName: "displayTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconPath: { classPropertyName: "dynamicIconPath", publicName: "dynamicIconPath", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, dynamicImageUrlPath: { classPropertyName: "dynamicImageUrlPath", publicName: "dynamicImageUrlPath", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, dynamicIconColor: { classPropertyName: "dynamicIconColor", publicName: "dynamicIconColor", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, customActionText: { classPropertyName: "customActionText", publicName: "customActionText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, isItemCentered: { classPropertyName: "isItemCentered", publicName: "isItemCentered", isSignal: true, isRequired: false, transformFunction: null }, showSelectionTickMark: { classPropertyName: "showSelectionTickMark", publicName: "showSelectionTickMark", isSignal: true, isRequired: false, transformFunction: null }, itemPlacement: { classPropertyName: "itemPlacement", publicName: "itemPlacement", isSignal: true, isRequired: false, transformFunction: null }, maximumDisplayItems: { classPropertyName: "maximumDisplayItems", publicName: "maximumDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", onCustomActionClicked: "onCustomActionClicked" }, usesInheritance: true, ngImport: i0, template: "<app-base-input [title]=\"title()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n <div input class=\"flex flex-wrap gap-3\"\n [ngClass]=\"[\n itemPlacement() == 'start' ? 'justify-start' : '',\n itemPlacement() == 'space-between' ? 'justify-between' : '']\">\n\n @for (item of getVisibleItems(); track item) {\n <div\n class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border-2 border-neutral-300\"\n tabindex=\"0\"\n (keydown)=\"handleKeydown($event, item)\"\n [ngStyle]=\"{ 'width': itemWidth() ? itemWidth() + 'px' : null }\"\n (click)=\"onItemClicked(item)\"\n [ngClass]=\"{\n 'border-primary-600': getPropertyId(item) == formControl.value || selectedItem() == item,\n 'justify-center': isItemCentered()\n }\">\n\n @if ((getPropertyId(item) == formControl.value || selectedItem() == item) && showSelectionTickMark()) {\n <div class=\"absolute -top-[8px] -right-[8px]\">\n <svg class=\"h-[18px] w-[18px] text-primary-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n fill=\"none\">\n <path\n d=\"M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n fill=\"white\"/>\n <path\n d=\"M10 17L5 12L6.41 10.58L10 14.17L17.59 6.58L19 8M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z\"\n fill=\"currentColor\"/>\n </svg>\n </div>\n }\n\n @if (getDynamicIcon(item)) {\n @switch (getImageType(item)) {\n @case ('url') {\n <img class=\"object-contain\" height=\"20px\" width=\"20px\" [src]=\"getDynamicIcon(item)\" alt=\"\">\n }\n @case ('svg') {\n <app-svg-icon [src]=\"getDynamicIcon(item)!\" [size]=\"18\"\n [ngStyle]=\"{'color': getDynamicIconColor(item)}\"></app-svg-icon>\n }\n }\n }\n <p\n class=\"w-full text-caption text-center text-black overflow-hidden text-ellipsis whitespace-nowrap\">{{ getDisplayString(item) }}</p>\n <ng-content select=\"[post]\"></ng-content>\n </div>\n }\n\n @if (showMoreButton()) {\n <span\n (click)=\"showAllItems()\"\n class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-info-500\">\n More\n </span>\n }\n\n @if (showLessButton()) {\n <span\n (click)=\"shrinkItems()\"\n class=\"relative flex items-center justify-center rounded-lg px-3 py-3 gap-4 cursor-pointer border border-neutral-200 text-error-500\">\n Less\n </span>\n }\n\n @if (customActionText()) {\n <div (click)=\"customActionClicked()\"\n class=\"flex items-center rounded-lg px-3 py-3 gap-4 cursor-pointer bg-primary-500\">\n <p class=\"text-caption text-white\">{{ customActionText() }}</p>\n </div>\n }\n\n @if ((state()?.success()) && items().length <= 0) {\n <p class=\"text-caption text-red-700\">{{ noDataMessage() ?? 'No data found' }}</p>\n }\n\n @if ((state()?.error()) && items().length <= 0) {\n <p\n class=\"text-caption text-red-700\">{{ (state()?.error() != null || state()?.error() != '') ? state()?.error() : noDataMessage() ?? 'No data found' }}</p>\n }\n\n @if (state()?.loading()) {\n <app-shimmer class=\"w-full\" type=\"multiline\"></app-shimmer>\n }\n </div>\n\n <div error>\n @if (formControl.errors && hasErrors) {\n <p class=\"text-caption text-red-500\">\n {{ formControl.errors | humanizeFormMessages: errorMessages() }}\n </p>\n }\n </div>\n</app-base-input>\n\n", styles: [""], dependencies: [{ kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
6108
6108
|
}
|
|
6109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SingleSelectionFieldComponent, decorators: [{
|
|
6110
6110
|
type: Component,
|
|
6111
6111
|
args: [{ selector: 'app-single-selection-field', standalone: true, imports: [
|
|
6112
6112
|
BaseInputComponent,
|
|
@@ -6154,10 +6154,10 @@ class SwitchComponent extends BaseControlValueAccessor {
|
|
|
6154
6154
|
const randomNumber = Math.floor(1000 + Math.random() * 9000);
|
|
6155
6155
|
return `checkbox-${randomNumber.toString()}`;
|
|
6156
6156
|
}
|
|
6157
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6158
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6157
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6158
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SwitchComponent, isStandalone: true, selector: "app-switch", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<!--<label for=\"toggle\" class=\"flex items-center cursor-pointer\">-->\n<!-- <div class=\"relative\">-->\n<!-- <input id=\"toggle\" type=\"checkbox\" class=\"sr-only peer\" [checked]=\"checked()\" (change)=\"toggleSwitch()\">-->\n<!-- <div class=\"w-16 h-8 bg-gray-100 rounded-full shadow-inner\"></div>-->\n<!-- <span-->\n<!-- class=\"absolute left-1 top-1 w-2/5 h-4/5 bg-primary-500 rounded-full peer-checked:bg-primary-500 peer-checked:left-8 transition-all duration-300\"></span>-->\n<!-- </div>-->\n<!-- <div class=\"ml-3 text-gray-700 font-medium\">Toggle</div>-->\n<!--</label>-->\n\n<!--<div class=\"flex items-center cursor-pointer\">-->\n<!-- <label id=\"id()\" class=\"flex items-center m-0\">-->\n<!-- <div class=\"relative\">-->\n<!-- <input [id]=\"id()\" type=\"checkbox\" class=\"sr-only peer\"-->\n<!-- [checked]=\"formControl.value\"-->\n<!-- (change)=\"onSwitchSelected($event)\">-->\n<!-- <div class=\"w-16 h-8 bg-gray-100 peer-checked:bg-primary-50 rounded-full shadow-inner\"></div>-->\n<!-- <span-->\n<!-- class=\"w-2/5 h-4/5 bg-primary-500 absolute rounded-full left-1 top-1 peer-checked:bg-primary-500 transition-all duration-300\"-->\n<!-- [ngClass]=\"formControl.value ? 'translate-x-7' : 'translate-x-0'\">-->\n<!-- </span>-->\n<!-- </div>-->\n<!-- @if (title()) {-->\n<!-- <label class=\"text-body2 cursor-pointer select-none\" [for]=\"id()\">{{ title() }}</label>-->\n<!-- }-->\n<!-- </label>-->\n<!--</div>-->\n\n\n<div class=\"flex items-center\">\n <label [for]=\"id()\" class=\"flex m-0 items-center cursor-pointer\">\n <!-- Toggle Switch -->\n <div class=\"relative\">\n <input type=\"checkbox\" [id]=\"id()\" [name]=\"id()\"\n class=\"sr-only\"\n [disabled]=\"formControl.disabled\"\n [checked]=\"formControl.value\"\n (change)=\"onSwitchSelected($event)\"/>\n <div class=\"toggle-bg peer-checked:bg-primary-500\">\n <div class=\"dot\">\n </div>\n </div>\n </div>\n @if (title()) {\n <span class=\"toggle-label text-sm text-gray-700\">{{ title() }}</span>\n }\n </label>\n</div>\n", styles: [".toggle-bg{position:relative;display:inline-block;width:56px;height:32px;background-color:#d1d5db;border-radius:16px;transition:background-color .3s ease}.toggle-bg .dot{position:absolute;top:2px;left:2px;width:28px;height:28px;background-color:#fff;border-radius:50%;transition:transform .3s ease}input:checked+.toggle-bg .dot{transform:translate(24px)}.toggle-label{margin-left:.5rem;font-size:.875rem;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
6159
6159
|
}
|
|
6160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
6161
6161
|
type: Component,
|
|
6162
6162
|
args: [{ selector: 'app-switch', standalone: true, imports: [
|
|
6163
6163
|
ReactiveFormsModule
|
|
@@ -6197,10 +6197,10 @@ class TextAreaInputComponent extends BaseControlValueAccessor {
|
|
|
6197
6197
|
}
|
|
6198
6198
|
onWriteValue(obj) {
|
|
6199
6199
|
}
|
|
6200
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6201
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6200
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TextAreaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6201
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TextAreaInputComponent, isStandalone: true, selector: "app-text-area-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue" }, usesInheritance: true, ngImport: i0, template: "<app-base-input [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n <textarea\n class=\"w-full p-2 placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition duration-300\"\n [formControl]=\"formControl\"\n\n [rows]=\"rows()\"\n [placeholder]=\"placeholder()\"\n (blur)=\"onTouched()\"\n (input)=\"onValueChange($event)\">\n </textarea>\n </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n <div class=\"mt-1\">\n <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n </div>\n} @else {\n @if (showErrorSpace()) {\n <div class=\"mt-1\">\n <span class=\"text-caption text-transparent\">.</span>\n </div>\n }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
6202
6202
|
}
|
|
6203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TextAreaInputComponent, decorators: [{
|
|
6204
6204
|
type: Component,
|
|
6205
6205
|
args: [{ selector: 'app-text-area-input', standalone: true, imports: [
|
|
6206
6206
|
ReactiveFormsModule,
|
|
@@ -6399,10 +6399,10 @@ class TimePickerComponent extends BaseControlValueAccessorV2 {
|
|
|
6399
6399
|
onClickOutside() {
|
|
6400
6400
|
this.isOpen.set(false);
|
|
6401
6401
|
}
|
|
6402
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6403
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6402
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6403
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TimePickerComponent, isStandalone: true, selector: "app-time-picker", inputs: { iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, showTimePickerIcon: { classPropertyName: "showTimePickerIcon", publicName: "showTimePickerIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, usesInheritance: true, ngImport: i0, template: "<app-base-input>\n <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n @if (iconSrc()) {\n <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n }\n\n\n <!-- <p>{{ formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n <input\n [mask]=\"'00:00'\"\n [showMaskTyped]=\"isFocused()\"\n class=\"h-[46px] placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n [class.text-neutral-400]=\"formControl.disabled\"\n [class.disabled-placeholder]=\"formControl.disabled\"\n [formControl]=\"formControl\"\n (focus)=\"onFocus()\"\n [ngClass]=\"getClass()\"\n [placeholder]=\"'HH:MM'\"\n (blur)=\"onBlur()\">\n\n\n @if (showTimePickerIcon()) {\n <div #timePickerIcon (click)=\"onTimePickerIconClick()\" class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n\n <svg class=\"w-[18px] h-[18px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n }\n\n <ng-template cdkPortal>\n\n </ng-template>\n\n<!-- <ng-template cdkConnectedOverlay-->\n<!-- [cdkConnectedOverlayOrigin]=\"timePickerIcon\"-->\n<!-- [cdkConnectedOverlayOpen]=\"isOpen()\"-->\n<!-- (overlayOutsideClick)=\"onClickOutside()\"-->\n<!-- [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"-->\n<!-- [cdkConnectedOverlayPositions]=\"[-->\n<!-- {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},-->\n<!-- {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}-->\n<!-- ]\"-->\n<!-- [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"-->\n<!-- [cdkConnectedOverlayOffsetY]=\"10\">-->\n<!-- </ng-template>-->\n </div>\n\n\n</app-base-input>\n\n<div class=\"flex flex-col gap-3\">\n <div class=\"flex items-center\">\n <app-checkbox title=\"24H\" (valueChanged)=\"toggle24HourFormat($event)\"></app-checkbox>\n </div>\n\n <div class=\"flex items-center gap-6\">\n <!-- Hour Controls -->\n <div class=\"flex flex-col items-center gap-2\">\n <div (click)=\"onHourUpClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n\n <input class=\"text-center text-body2 border-none outline-none appearance-none w-[30px] select-none\"\n [value]=\"getFormattedHours()\"\n (blur)=\"validateHours($event)\"\n type=\"number\">\n\n <div (click)=\"onHourDownClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n\n <span class=\"text-body1 select-none\">:</span>\n\n <!-- Minute Controls -->\n <div class=\"flex flex-col items-center gap-2\">\n <div (click)=\"onMinuteUpClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n\n <input class=\"text-center text-body2 border-none outline-none appearance-none w-[30px] select-none\"\n [value]=\"getFormattedMinutes()\"\n (blur)=\"validateMinutes($event)\"\n type=\"number\">\n\n <div (click)=\"onMinuteDownClicked()\" class=\"p-2 rounded-full text-neutral-600 hover:bg-neutral-100 transition-all duration-300\">\n <svg class=\"size-[24px] cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n\n <!-- AM/PM Toggle (Hide when 24-hour is selected) -->\n @if(!is24HourFormat()) {\n <div class=\"flex gap-3\">\n <span class=\"px-2 py-1 rounded-md text-blue-500 text-caption cursor-pointer hover:bg-neutral-100 select-none\"\n [ngClass]=\"period() === 'AM' ? 'bg-primary-500 hover:bg-primary-500 text-white' : ''\"\n (click)=\"togglePeriod()\">AM</span>\n <span class=\"px-2 py-1 rounded-md text-blue-500 text-caption cursor-pointer hover:bg-neutral-100 select-none\"\n [ngClass]=\"period() === 'PM' ? 'bg-primary-500 hover:bg-primary-500 text-white' : ''\"\n (click)=\"togglePeriod()\">PM</span>\n </div>\n }\n </div>\n\n @if(enableApplyActions()) {\n <div class=\"flex items-center justify-between\">\n <button class=\"py-2 text-primary-500 rounded-md transition-all duration-300\">Cancel</button>\n <button class=\"px-4 py-2 text-white bg-primary-500 rounded-md hover:bg-primary-600 transition-all duration-300\">Apply</button>\n </div>\n }\n</div>\n\n@if (formControl.errors && hasErrors) {\n <div class=\"mb-3\">\n <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n </div>\n} @else {\n @if (showErrorSpace()) {\n <div class=\"mb-3\">\n <span class=\"text-caption text-transparent\">.</span>\n </div>\n }\n}\n", styles: ["@tailwind utilities;@layer utilities{input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{@apply appearance-none;}input[type=number]{-moz-appearance:textfield}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }] });
|
|
6404
6404
|
}
|
|
6405
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
6406
6406
|
type: Component,
|
|
6407
6407
|
args: [{ selector: 'app-time-picker', standalone: true, imports: [
|
|
6408
6408
|
NgClass,
|
|
@@ -6621,10 +6621,10 @@ class NglService {
|
|
|
6621
6621
|
getBaseUrl() {
|
|
6622
6622
|
return this.config.baseApiUrl;
|
|
6623
6623
|
}
|
|
6624
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6625
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
6624
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NglService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
6625
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NglService, providedIn: 'root' });
|
|
6626
6626
|
}
|
|
6627
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6627
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NglService, decorators: [{
|
|
6628
6628
|
type: Injectable,
|
|
6629
6629
|
args: [{
|
|
6630
6630
|
providedIn: 'root'
|