@vallift/ngl 21.0.4 → 21.0.6
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 +516 -522
- package/fesm2022/vallift-ngl.mjs.map +1 -1
- package/package.json +5 -4
- package/types/vallift-ngl.d.ts +2 -3
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: "21.
|
|
153
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
152
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
153
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseApiService, providedIn: 'root' });
|
|
154
154
|
}
|
|
155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseApiService, decorators: [{
|
|
156
156
|
type: Injectable,
|
|
157
157
|
args: [{
|
|
158
158
|
providedIn: 'root'
|
|
@@ -160,8 +160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
160
160
|
}], ctorParameters: () => [] });
|
|
161
161
|
|
|
162
162
|
class BaseControlValueAccessor {
|
|
163
|
-
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
164
|
-
touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
163
|
+
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
164
|
+
touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
165
165
|
formControl = new FormControl();
|
|
166
166
|
writeToInherited = false;
|
|
167
167
|
get hasErrors() {
|
|
@@ -202,10 +202,10 @@ class BaseControlValueAccessor {
|
|
|
202
202
|
}
|
|
203
203
|
|
|
204
204
|
class BaseControlValueAccessorV2 {
|
|
205
|
-
controlValue = signal(null, ...(ngDevMode ? [{ debugName: "controlValue" }] : []));
|
|
205
|
+
controlValue = signal(null, ...(ngDevMode ? [{ debugName: "controlValue" }] : /* istanbul ignore next */ []));
|
|
206
206
|
actualValue;
|
|
207
|
-
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
208
|
-
touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
207
|
+
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
208
|
+
touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
209
209
|
formControl = new FormControl();
|
|
210
210
|
writeToInherited = false;
|
|
211
211
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
@@ -336,10 +336,10 @@ function getDynamicTypeStructure(obj) {
|
|
|
336
336
|
}
|
|
337
337
|
|
|
338
338
|
class BaseControlValueAccessorV3 {
|
|
339
|
-
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
339
|
+
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
340
340
|
valueChanged = output();
|
|
341
|
-
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
342
|
-
touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
341
|
+
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
342
|
+
touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
343
343
|
formControl = new FormControl();
|
|
344
344
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
345
345
|
actualValue;
|
|
@@ -400,10 +400,10 @@ class BaseControlValueAccessorV3 {
|
|
|
400
400
|
}
|
|
401
401
|
return false;
|
|
402
402
|
}
|
|
403
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
404
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
403
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseControlValueAccessorV3, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
404
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", 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: "21.
|
|
406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseControlValueAccessorV3, decorators: [{
|
|
407
407
|
type: Component,
|
|
408
408
|
args: [{
|
|
409
409
|
imports: [],
|
|
@@ -412,13 +412,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
412
412
|
}], ctorParameters: () => [], propDecorators: { errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
|
|
413
413
|
|
|
414
414
|
class State {
|
|
415
|
-
responseSignal = signal(null, ...(ngDevMode ? [{ debugName: "responseSignal" }] : []));
|
|
416
|
-
initialLoadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "initialLoadingSignal" }] : []));
|
|
417
|
-
loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : []));
|
|
418
|
-
successSignal = signal(false, ...(ngDevMode ? [{ debugName: "successSignal" }] : []));
|
|
419
|
-
failedSignal = signal(false, ...(ngDevMode ? [{ debugName: "failedSignal" }] : []));
|
|
420
|
-
errorSignal = signal(null, ...(ngDevMode ? [{ debugName: "errorSignal" }] : []));
|
|
421
|
-
stateSignal = signal(null, ...(ngDevMode ? [{ debugName: "stateSignal" }] : []));
|
|
415
|
+
responseSignal = signal(null, ...(ngDevMode ? [{ debugName: "responseSignal" }] : /* istanbul ignore next */ []));
|
|
416
|
+
initialLoadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "initialLoadingSignal" }] : /* istanbul ignore next */ []));
|
|
417
|
+
loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : /* istanbul ignore next */ []));
|
|
418
|
+
successSignal = signal(false, ...(ngDevMode ? [{ debugName: "successSignal" }] : /* istanbul ignore next */ []));
|
|
419
|
+
failedSignal = signal(false, ...(ngDevMode ? [{ debugName: "failedSignal" }] : /* istanbul ignore next */ []));
|
|
420
|
+
errorSignal = signal(null, ...(ngDevMode ? [{ debugName: "errorSignal" }] : /* istanbul ignore next */ []));
|
|
421
|
+
stateSignal = signal(null, ...(ngDevMode ? [{ debugName: "stateSignal" }] : /* istanbul ignore next */ []));
|
|
422
422
|
response = this.responseSignal.asReadonly();
|
|
423
423
|
initialLoading = this.initialLoadingSignal.asReadonly();
|
|
424
424
|
loading = this.loadingSignal.asReadonly();
|
|
@@ -528,23 +528,23 @@ var RequestState;
|
|
|
528
528
|
// }
|
|
529
529
|
|
|
530
530
|
class PaginationState {
|
|
531
|
-
responseSignal = signal(null, ...(ngDevMode ? [{ debugName: "responseSignal" }] : []));
|
|
532
|
-
loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : []));
|
|
533
|
-
successSignal = signal(false, ...(ngDevMode ? [{ debugName: "successSignal" }] : []));
|
|
534
|
-
failedSignal = signal(false, ...(ngDevMode ? [{ debugName: "failedSignal" }] : []));
|
|
535
|
-
errorSignal = signal(null, ...(ngDevMode ? [{ debugName: "errorSignal" }] : []));
|
|
536
|
-
stateSignal = signal(null, ...(ngDevMode ? [{ debugName: "stateSignal" }] : []));
|
|
531
|
+
responseSignal = signal(null, ...(ngDevMode ? [{ debugName: "responseSignal" }] : /* istanbul ignore next */ []));
|
|
532
|
+
loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : /* istanbul ignore next */ []));
|
|
533
|
+
successSignal = signal(false, ...(ngDevMode ? [{ debugName: "successSignal" }] : /* istanbul ignore next */ []));
|
|
534
|
+
failedSignal = signal(false, ...(ngDevMode ? [{ debugName: "failedSignal" }] : /* istanbul ignore next */ []));
|
|
535
|
+
errorSignal = signal(null, ...(ngDevMode ? [{ debugName: "errorSignal" }] : /* istanbul ignore next */ []));
|
|
536
|
+
stateSignal = signal(null, ...(ngDevMode ? [{ debugName: "stateSignal" }] : /* istanbul ignore next */ []));
|
|
537
537
|
response = this.responseSignal.asReadonly();
|
|
538
538
|
loading = this.loadingSignal.asReadonly();
|
|
539
539
|
success = this.successSignal.asReadonly();
|
|
540
540
|
failed = this.failedSignal.asReadonly();
|
|
541
541
|
error = this.errorSignal.asReadonly();
|
|
542
542
|
state = this.stateSignal.asReadonly();
|
|
543
|
-
items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
544
|
-
pageNumber = signal(0, ...(ngDevMode ? [{ debugName: "pageNumber" }] : []));
|
|
545
|
-
pageSize = signal(25, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
546
|
-
totalRecords = signal(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
|
|
547
|
-
totalPages = signal(0, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
|
|
543
|
+
items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
544
|
+
pageNumber = signal(0, ...(ngDevMode ? [{ debugName: "pageNumber" }] : /* istanbul ignore next */ []));
|
|
545
|
+
pageSize = signal(25, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
546
|
+
totalRecords = signal(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
|
|
547
|
+
totalPages = signal(0, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
|
|
548
548
|
constructor() {
|
|
549
549
|
this.stateSignal.set(RequestState.idle);
|
|
550
550
|
}
|
|
@@ -605,11 +605,11 @@ class PaginationState {
|
|
|
605
605
|
}
|
|
606
606
|
|
|
607
607
|
class SpinnerComponent {
|
|
608
|
-
borderColor = input('border-primary-500', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
|
|
609
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
610
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
608
|
+
borderColor = input('border-primary-500', ...(ngDevMode ? [{ debugName: "borderColor" }] : /* istanbul ignore next */ []));
|
|
609
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
610
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", 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: "21.
|
|
612
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
628
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
627
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AppSvgIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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: "21.
|
|
630
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AppSvgIconComponent, decorators: [{
|
|
631
631
|
type: Component,
|
|
632
632
|
args: [{ selector: 'app-svg-icon', standalone: true, imports: [
|
|
633
633
|
SvgIconComponent
|
|
@@ -646,18 +646,18 @@ class ButtonComponent {
|
|
|
646
646
|
elementRef = inject(ElementRef);
|
|
647
647
|
document = inject(DOCUMENT);
|
|
648
648
|
renderer = inject(Renderer2);
|
|
649
|
-
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
650
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
651
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
652
|
-
appearance = input('primary', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
653
|
-
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
654
|
-
iconSize = input(18, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
|
|
655
|
-
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
|
|
656
|
-
iconColor = input(null, ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
|
|
657
|
-
buttonColor = input('bg-primary-500', ...(ngDevMode ? [{ debugName: "buttonColor" }] : []));
|
|
658
|
-
outlineColor = input('border-primary-500', ...(ngDevMode ? [{ debugName: "outlineColor" }] : []));
|
|
659
|
-
textButtonColor = input('text-primary-500', ...(ngDevMode ? [{ debugName: "textButtonColor" }] : []));
|
|
660
|
-
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
649
|
+
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
650
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
651
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
652
|
+
appearance = input('primary', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
653
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
654
|
+
iconSize = input(18, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
655
|
+
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : /* istanbul ignore next */ []));
|
|
656
|
+
iconColor = input(null, ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
|
|
657
|
+
buttonColor = input('bg-primary-500', ...(ngDevMode ? [{ debugName: "buttonColor" }] : /* istanbul ignore next */ []));
|
|
658
|
+
outlineColor = input('border-primary-500', ...(ngDevMode ? [{ debugName: "outlineColor" }] : /* istanbul ignore next */ []));
|
|
659
|
+
textButtonColor = input('text-primary-500', ...(ngDevMode ? [{ debugName: "textButtonColor" }] : /* istanbul ignore next */ []));
|
|
660
|
+
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
661
661
|
buttonClick = new EventEmitter();
|
|
662
662
|
formGroupDirective = inject(FormGroupDirective, { optional: true });
|
|
663
663
|
getButtonClass() {
|
|
@@ -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: "21.
|
|
734
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
733
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
734
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
757
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
756
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
757
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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: "21.
|
|
759
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
970
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
969
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
970
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: OverlayService, providedIn: 'root' });
|
|
971
971
|
}
|
|
972
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
972
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
1033
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
1032
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnsavedAwareDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1033
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", 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: "21.
|
|
1035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnsavedAwareDirective, decorators: [{
|
|
1036
1036
|
type: Directive,
|
|
1037
1037
|
args: [{
|
|
1038
1038
|
selector: 'form[unSavedAware]'
|
|
@@ -1148,22 +1148,22 @@ var TemplateResolverArrayUtil;
|
|
|
1148
1148
|
})(TemplateResolverArrayUtil || (TemplateResolverArrayUtil = {}));
|
|
1149
1149
|
|
|
1150
1150
|
class NoDataComponent {
|
|
1151
|
-
size = input(250, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1152
|
-
message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
|
|
1153
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1154
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
1151
|
+
size = input(250, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1152
|
+
message = input.required(...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
1153
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1154
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", 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: "21.
|
|
1156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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
|
-
message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
|
|
1163
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
1162
|
+
message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : /* istanbul ignore next */ []));
|
|
1163
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NoDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", 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: "21.
|
|
1166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NoDataTableComponent, decorators: [{
|
|
1167
1167
|
type: Component,
|
|
1168
1168
|
args: [{ selector: 'app-no-data-table', standalone: true, imports: [
|
|
1169
1169
|
NoDataComponent
|
|
@@ -1171,22 +1171,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1171
1171
|
}], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
|
|
1172
1172
|
|
|
1173
1173
|
class ShimmerComponent {
|
|
1174
|
-
type = input('grid', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
1175
|
-
count = input(1, ...(ngDevMode ? [{ debugName: "count" }] : []));
|
|
1174
|
+
type = input('grid', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
1175
|
+
count = input(1, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
|
|
1176
1176
|
loop = computed(() => {
|
|
1177
1177
|
return Array(this.count()).fill(1).map((x, i) => i);
|
|
1178
|
-
}, ...(ngDevMode ? [{ debugName: "loop" }] : []));
|
|
1179
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1180
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1178
|
+
}, ...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
|
|
1179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ShimmerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
1182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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 }] }] } });
|
|
1186
1186
|
|
|
1187
1187
|
class PaginationComponent {
|
|
1188
|
-
totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
|
|
1189
|
-
pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
|
|
1188
|
+
totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
|
|
1189
|
+
pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
|
|
1190
1190
|
pageSize = 25; // Default page size
|
|
1191
1191
|
pageChange = output();
|
|
1192
1192
|
currentPage = 1;
|
|
@@ -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: "21.
|
|
1234
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1233
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1234
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
1236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1237
1237
|
type: Component,
|
|
1238
1238
|
args: [{ selector: 'app-pagination', standalone: true, imports: [
|
|
1239
1239
|
FormsModule,
|
|
@@ -1244,10 +1244,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1244
1244
|
}], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
|
|
1245
1245
|
|
|
1246
1246
|
class BaseTableComponent {
|
|
1247
|
-
pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
1248
|
-
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
|
|
1249
|
-
isHorizontallyScrollable = input(false, ...(ngDevMode ? [{ debugName: "isHorizontallyScrollable" }] : []));
|
|
1250
|
-
itemsPerPage = input(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : []));
|
|
1247
|
+
pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
1248
|
+
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : /* istanbul ignore next */ []));
|
|
1249
|
+
isHorizontallyScrollable = input(false, ...(ngDevMode ? [{ debugName: "isHorizontallyScrollable" }] : /* istanbul ignore next */ []));
|
|
1250
|
+
itemsPerPage = input(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : /* istanbul ignore next */ []));
|
|
1251
1251
|
pageChange = output();
|
|
1252
1252
|
ngAfterViewInit() {
|
|
1253
1253
|
this.pageChange.emit({ pageNumber: 1, pageSize: this.pageSize() });
|
|
@@ -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: "21.
|
|
1259
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1258
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1259
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
1261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
1406
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
1405
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", 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.2.8", type: SortableTableDirective, isStandalone: true, selector: "[sortableTable]", outputs: { sortChange: "sortChange" }, ngImport: i0 });
|
|
1407
1407
|
}
|
|
1408
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
1461
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
1460
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ResizableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1461
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: ResizableColumnDirective, isStandalone: true, selector: "[appResizableColumn]", ngImport: i0 });
|
|
1462
1462
|
}
|
|
1463
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1463
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
1528
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
1527
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableResizableColumnsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1528
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: TableResizableColumnsDirective, isStandalone: true, selector: "[appTableResizableColumns]", inputs: { applyResizableColumn: ["appTableResizableColumns", "applyResizableColumn"] }, ngImport: i0 });
|
|
1529
1529
|
}
|
|
1530
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
1581
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1580
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1581
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
1583
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.0.3", ngImpor
|
|
|
1588
1588
|
}] });
|
|
1589
1589
|
|
|
1590
1590
|
class CloseButtonComponent {
|
|
1591
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1592
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
1591
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1592
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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: "21.
|
|
1594
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
1959
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
1958
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ColorConverterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1959
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ColorConverterService, providedIn: 'root' });
|
|
1960
1960
|
}
|
|
1961
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1961
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
2058
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
2057
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ColorPickerSliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2058
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", 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: "21.
|
|
2060
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ColorPickerSliderDirective, decorators: [{
|
|
2061
2061
|
type: Directive,
|
|
2062
2062
|
args: [{
|
|
2063
2063
|
selector: '[colorPickerSlider]',
|
|
@@ -2082,8 +2082,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2082
2082
|
}] } });
|
|
2083
2083
|
|
|
2084
2084
|
class ColorPickerComponent extends BaseControlValueAccessorV3 {
|
|
2085
|
-
hexColor = input('#00FF00F8', ...(ngDevMode ? [{ debugName: "hexColor" }] : []));
|
|
2086
|
-
enableAdditionalColor = input(false, ...(ngDevMode ? [{ debugName: "enableAdditionalColor" }] : []));
|
|
2085
|
+
hexColor = input('#00FF00F8', ...(ngDevMode ? [{ debugName: "hexColor" }] : /* istanbul ignore next */ []));
|
|
2086
|
+
enableAdditionalColor = input(false, ...(ngDevMode ? [{ debugName: "enableAdditionalColor" }] : /* istanbul ignore next */ []));
|
|
2087
2087
|
additionalColors = input([
|
|
2088
2088
|
// Gray shades
|
|
2089
2089
|
'#FFFFFF', // White
|
|
@@ -2130,38 +2130,38 @@ class ColorPickerComponent extends BaseControlValueAccessorV3 {
|
|
|
2130
2130
|
'#D0C9FF', // Lavender
|
|
2131
2131
|
'#FFB7B2', // Blush pink
|
|
2132
2132
|
'#F1C0E8', // Light magenta
|
|
2133
|
-
], ...(ngDevMode ? [{ debugName: "additionalColors" }] : []));
|
|
2134
|
-
enableAlpha = input(true, ...(ngDevMode ? [{ debugName: "enableAlpha" }] : []));
|
|
2133
|
+
], ...(ngDevMode ? [{ debugName: "additionalColors" }] : /* istanbul ignore next */ []));
|
|
2134
|
+
enableAlpha = input(true, ...(ngDevMode ? [{ debugName: "enableAlpha" }] : /* istanbul ignore next */ []));
|
|
2135
2135
|
controls = "default";
|
|
2136
2136
|
colorChanged = new EventEmitter(false);
|
|
2137
2137
|
onAlphaChange = new EventEmitter(false);
|
|
2138
2138
|
closeColorPicker = new EventEmitter();
|
|
2139
2139
|
color = new Hsva(0, 1, 1, 1);
|
|
2140
|
-
COLOR_PICKER_HEIGHT = signal(140, ...(ngDevMode ? [{ debugName: "COLOR_PICKER_HEIGHT" }] : []));
|
|
2141
|
-
COLOR_PICKER_WIDTH = signal(250, ...(ngDevMode ? [{ debugName: "COLOR_PICKER_WIDTH" }] : []));
|
|
2140
|
+
COLOR_PICKER_HEIGHT = signal(140, ...(ngDevMode ? [{ debugName: "COLOR_PICKER_HEIGHT" }] : /* istanbul ignore next */ []));
|
|
2141
|
+
COLOR_PICKER_WIDTH = signal(250, ...(ngDevMode ? [{ debugName: "COLOR_PICKER_WIDTH" }] : /* istanbul ignore next */ []));
|
|
2142
2142
|
converterService = inject(ColorConverterService);
|
|
2143
2143
|
cdr = inject(ChangeDetectorRef);
|
|
2144
|
-
hsva = signal(new Hsva(0, 1, 1, 1), ...(ngDevMode ? [{ debugName: "hsva" }] : []));
|
|
2144
|
+
hsva = signal(new Hsva(0, 1, 1, 1), ...(ngDevMode ? [{ debugName: "hsva" }] : /* istanbul ignore next */ []));
|
|
2145
2145
|
outputColor;
|
|
2146
|
-
selectedColor = signal("#000000", ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
|
|
2147
|
-
sliderDimMax = signal(new SliderDimension(0, 1, 1, 1), ...(ngDevMode ? [{ debugName: "sliderDimMax" }] : []));
|
|
2148
|
-
slider = signal(new SliderPosition(0, 1, 1, 1), ...(ngDevMode ? [{ debugName: "slider" }] : []));
|
|
2149
|
-
hueSliderColor = signal(null, ...(ngDevMode ? [{ debugName: "hueSliderColor" }] : []));
|
|
2150
|
-
alphaSliderColor = signal(null, ...(ngDevMode ? [{ debugName: "alphaSliderColor" }] : []));
|
|
2146
|
+
selectedColor = signal("#000000", ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
|
|
2147
|
+
sliderDimMax = signal(new SliderDimension(0, 1, 1, 1), ...(ngDevMode ? [{ debugName: "sliderDimMax" }] : /* istanbul ignore next */ []));
|
|
2148
|
+
slider = signal(new SliderPosition(0, 1, 1, 1), ...(ngDevMode ? [{ debugName: "slider" }] : /* istanbul ignore next */ []));
|
|
2149
|
+
hueSliderColor = signal(null, ...(ngDevMode ? [{ debugName: "hueSliderColor" }] : /* istanbul ignore next */ []));
|
|
2150
|
+
alphaSliderColor = signal(null, ...(ngDevMode ? [{ debugName: "alphaSliderColor" }] : /* istanbul ignore next */ []));
|
|
2151
2151
|
hueSlider;
|
|
2152
2152
|
alphaSlider;
|
|
2153
2153
|
height = computed(() => {
|
|
2154
2154
|
return `${this.COLOR_PICKER_HEIGHT()}px`;
|
|
2155
|
-
}, ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
2155
|
+
}, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
2156
2156
|
width = computed(() => {
|
|
2157
2157
|
return `${this.COLOR_PICKER_WIDTH()}px`;
|
|
2158
|
-
}, ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
2158
|
+
}, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
2159
2159
|
// height = signal(`${this.COLOR_PICKER_HEIGHT()}px`);
|
|
2160
2160
|
// width = signal(`${this.COLOR_PICKER_WIDTH()}px`);
|
|
2161
|
-
isTooltip = signal(false, ...(ngDevMode ? [{ debugName: "isTooltip" }] : []));
|
|
2161
|
+
isTooltip = signal(false, ...(ngDevMode ? [{ debugName: "isTooltip" }] : /* istanbul ignore next */ []));
|
|
2162
2162
|
format = ColorFormats.HEX;
|
|
2163
|
-
hexColorValue = model('', ...(ngDevMode ? [{ debugName: "hexColorValue" }] : []));
|
|
2164
|
-
alphaValue = signal(1, ...(ngDevMode ? [{ debugName: "alphaValue" }] : []));
|
|
2163
|
+
hexColorValue = model('', ...(ngDevMode ? [{ debugName: "hexColorValue" }] : /* istanbul ignore next */ []));
|
|
2164
|
+
alphaValue = signal(1, ...(ngDevMode ? [{ debugName: "alphaValue" }] : /* istanbul ignore next */ []));
|
|
2165
2165
|
click(event) {
|
|
2166
2166
|
if (this.isOutside(event)) {
|
|
2167
2167
|
// this.emitClose('cancel');
|
|
@@ -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: "21.
|
|
2319
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2318
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
2321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
2449
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
2448
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2449
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", 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: "21.
|
|
2451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
2472
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2471
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: OverlayContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2472
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
2474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: OverlayContextMenuComponent, decorators: [{
|
|
2475
2475
|
type: Component,
|
|
2476
2476
|
args: [{ selector: 'app-overlay-context-menu', imports: [
|
|
2477
2477
|
AppSvgIconComponent,
|
|
@@ -2482,8 +2482,8 @@ class ContextMenuButtonComponent {
|
|
|
2482
2482
|
trigger;
|
|
2483
2483
|
overlay = inject(Overlay);
|
|
2484
2484
|
dialog = inject(Dialog);
|
|
2485
|
-
actions = input(...(ngDevMode ? [undefined, { debugName: "actions" }] : []));
|
|
2486
|
-
positionPreference = input('bottomCenter', ...(ngDevMode ? [{ debugName: "positionPreference" }] : []));
|
|
2485
|
+
actions = input(...(ngDevMode ? [undefined, { debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
2486
|
+
positionPreference = input('bottomCenter', ...(ngDevMode ? [{ debugName: "positionPreference" }] : /* istanbul ignore next */ []));
|
|
2487
2487
|
onActionClicked = output();
|
|
2488
2488
|
basePanelClass = ['bg-white', 'shadow-2'];
|
|
2489
2489
|
dialogRef;
|
|
@@ -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: "21.
|
|
2570
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
2569
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ContextMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2570
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", 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: "21.
|
|
2572
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.0.3", ngImpor
|
|
|
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: "21.
|
|
2582
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
2581
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ContextMenuIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2582
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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: "21.
|
|
2584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
2596
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
2595
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2596
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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: "21.
|
|
2598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableCustomComponent, decorators: [{
|
|
2599
2599
|
type: Component,
|
|
2600
2600
|
args: [{ selector: 'lib-table-custom-component', imports: [], template: "" }]
|
|
2601
2601
|
}], propDecorators: { rowData: [{
|
|
@@ -2609,16 +2609,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2609
2609
|
}], actionPerformed: [{ type: i0.Output, args: ["actionPerformed"] }] } });
|
|
2610
2610
|
|
|
2611
2611
|
class StatusBadgeComponent {
|
|
2612
|
-
status = input.required(...(ngDevMode ? [{ debugName: "status" }] : []));
|
|
2613
|
-
backgroundColorClass = input.required(...(ngDevMode ? [{ debugName: "backgroundColorClass" }] : []));
|
|
2614
|
-
indicatorColor = input(...(ngDevMode ? [undefined, { debugName: "indicatorColor" }] : []));
|
|
2615
|
-
textColorClass = input.required(...(ngDevMode ? [{ debugName: "textColorClass" }] : []));
|
|
2616
|
-
borderColorClass = input.required(...(ngDevMode ? [{ debugName: "borderColorClass" }] : []));
|
|
2617
|
-
isUpperCase = input(false, ...(ngDevMode ? [{ debugName: "isUpperCase" }] : []));
|
|
2618
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2619
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2612
|
+
status = input.required(...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
|
|
2613
|
+
backgroundColorClass = input.required(...(ngDevMode ? [{ debugName: "backgroundColorClass" }] : /* istanbul ignore next */ []));
|
|
2614
|
+
indicatorColor = input(...(ngDevMode ? [undefined, { debugName: "indicatorColor" }] : /* istanbul ignore next */ []));
|
|
2615
|
+
textColorClass = input.required(...(ngDevMode ? [{ debugName: "textColorClass" }] : /* istanbul ignore next */ []));
|
|
2616
|
+
borderColorClass = input.required(...(ngDevMode ? [{ debugName: "borderColorClass" }] : /* istanbul ignore next */ []));
|
|
2617
|
+
isUpperCase = input(false, ...(ngDevMode ? [{ debugName: "isUpperCase" }] : /* istanbul ignore next */ []));
|
|
2618
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2619
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
2621
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StatusBadgeComponent, decorators: [{
|
|
2622
2622
|
type: Component,
|
|
2623
2623
|
args: [{ selector: 'app-status-badge', imports: [
|
|
2624
2624
|
NgClass
|
|
@@ -2626,8 +2626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2626
2626
|
}], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }], backgroundColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColorClass", required: true }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], textColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColorClass", required: true }] }], borderColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColorClass", required: true }] }], isUpperCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "isUpperCase", required: false }] }] } });
|
|
2627
2627
|
|
|
2628
2628
|
class CheckboxComponent extends BaseControlValueAccessorV3 {
|
|
2629
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
2630
|
-
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
2629
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
2630
|
+
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
2631
2631
|
ngOnInit() {
|
|
2632
2632
|
this.id.set(this.getId());
|
|
2633
2633
|
}
|
|
@@ -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: "21.
|
|
2657
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2656
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2657
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
2659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
2703
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.
|
|
2702
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HumanizeFormMessagesPipe, deps: [{ token: FORM_ERRORS }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2703
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: HumanizeFormMessagesPipe, isStandalone: true, name: "humanizeFormMessages" });
|
|
2704
2704
|
}
|
|
2705
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2705
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HumanizeFormMessagesPipe, decorators: [{
|
|
2706
2706
|
type: Pipe,
|
|
2707
2707
|
args: [{ standalone: true, name: 'humanizeFormMessages' }]
|
|
2708
2708
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -2711,14 +2711,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2711
2711
|
}] }] });
|
|
2712
2712
|
|
|
2713
2713
|
class BaseInputComponent {
|
|
2714
|
-
title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
2715
|
-
isRequiredField = input(false, ...(ngDevMode ? [{ debugName: "isRequiredField" }] : []));
|
|
2716
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
2717
|
-
inputType = input('text', ...(ngDevMode ? [{ debugName: "inputType" }] : []));
|
|
2718
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2719
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2714
|
+
title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
2715
|
+
isRequiredField = input(false, ...(ngDevMode ? [{ debugName: "isRequiredField" }] : /* istanbul ignore next */ []));
|
|
2716
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
2717
|
+
inputType = input('text', ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
|
|
2718
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2719
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
2721
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseInputComponent, decorators: [{
|
|
2722
2722
|
type: Component,
|
|
2723
2723
|
args: [{ selector: 'app-base-input', standalone: true, imports: [
|
|
2724
2724
|
NgClass
|
|
@@ -2726,24 +2726,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2726
2726
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isRequiredField: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRequiredField", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }] } });
|
|
2727
2727
|
|
|
2728
2728
|
class TextInputComponent extends BaseControlValueAccessor {
|
|
2729
|
-
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
2730
|
-
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
2731
|
-
viewType = input('text', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
|
|
2732
|
-
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
2733
|
-
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
|
|
2734
|
-
actionIcon = input(...(ngDevMode ? [undefined, { debugName: "actionIcon" }] : []));
|
|
2735
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
2736
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
2737
|
-
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
2738
|
-
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
2739
|
-
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
|
|
2740
|
-
mask = input(null, ...(ngDevMode ? [{ debugName: "mask" }] : []));
|
|
2741
|
-
debounceSearchEnabled = input(true, ...(ngDevMode ? [{ debugName: "debounceSearchEnabled" }] : []));
|
|
2742
|
-
autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus" }] : []));
|
|
2729
|
+
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
2730
|
+
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
2731
|
+
viewType = input('text', ...(ngDevMode ? [{ debugName: "viewType" }] : /* istanbul ignore next */ []));
|
|
2732
|
+
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2733
|
+
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : /* istanbul ignore next */ []));
|
|
2734
|
+
actionIcon = input(...(ngDevMode ? [undefined, { debugName: "actionIcon" }] : /* istanbul ignore next */ []));
|
|
2735
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2736
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
2737
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2738
|
+
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
2739
|
+
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : /* istanbul ignore next */ []));
|
|
2740
|
+
mask = input(null, ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
|
|
2741
|
+
debounceSearchEnabled = input(true, ...(ngDevMode ? [{ debugName: "debounceSearchEnabled" }] : /* istanbul ignore next */ []));
|
|
2742
|
+
autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
|
|
2743
2743
|
inputRef;
|
|
2744
2744
|
changeValue = output();
|
|
2745
2745
|
actionIconClicked = output();
|
|
2746
|
-
isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
|
|
2746
|
+
isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
|
|
2747
2747
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
2748
2748
|
searchSubject = new Subject();
|
|
2749
2749
|
constructor() {
|
|
@@ -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: "21.
|
|
2819
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2818
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2819
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
2821
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.0.3", ngImpor
|
|
|
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: "21.
|
|
2839
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
2838
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextButtonSmall, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2839
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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: "21.
|
|
2841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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
|
}] });
|
|
@@ -2846,9 +2846,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2846
2846
|
class DynamicRendererComponent {
|
|
2847
2847
|
component;
|
|
2848
2848
|
rowData;
|
|
2849
|
-
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
|
|
2850
|
-
rowPosition = input(...(ngDevMode ? [undefined, { debugName: "rowPosition" }] : []));
|
|
2851
|
-
isLastRow = input(false, ...(ngDevMode ? [{ debugName: "isLastRow" }] : []));
|
|
2849
|
+
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
|
|
2850
|
+
rowPosition = input(...(ngDevMode ? [undefined, { debugName: "rowPosition" }] : /* istanbul ignore next */ []));
|
|
2851
|
+
isLastRow = input(false, ...(ngDevMode ? [{ debugName: "isLastRow" }] : /* istanbul ignore next */ []));
|
|
2852
2852
|
actionPerformed = output();
|
|
2853
2853
|
container;
|
|
2854
2854
|
componentRef;
|
|
@@ -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: "21.
|
|
2885
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
2884
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", 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: "21.
|
|
2887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: [{
|
|
@@ -2898,17 +2898,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2898
2898
|
|
|
2899
2899
|
class DataTableComponent extends BaseControlValueAccessorV3 {
|
|
2900
2900
|
headerComponents;
|
|
2901
|
-
columnDefs = input.required(...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
|
|
2902
|
-
state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
2903
|
-
pageSize = input(50, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
2904
|
-
enableHorizontallyScrollable = input(false, ...(ngDevMode ? [{ debugName: "enableHorizontallyScrollable" }] : []));
|
|
2905
|
-
enableResizableColumns = input(false, ...(ngDevMode ? [{ debugName: "enableResizableColumns" }] : []));
|
|
2906
|
-
enableClickableRows = input(false, ...(ngDevMode ? [{ debugName: "enableClickableRows" }] : []));
|
|
2907
|
-
expandableComponent = input(...(ngDevMode ? [undefined, { debugName: "expandableComponent" }] : []));
|
|
2908
|
-
enableColumnsConfig = input(false, ...(ngDevMode ? [{ debugName: "enableColumnsConfig" }] : []));
|
|
2909
|
-
filterComponent = input(...(ngDevMode ? [undefined, { debugName: "filterComponent" }] : []));
|
|
2910
|
-
enableSearch = input(true, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
|
|
2911
|
-
disableInitialLoad = input(false, ...(ngDevMode ? [{ debugName: "disableInitialLoad" }] : []));
|
|
2901
|
+
columnDefs = input.required(...(ngDevMode ? [{ debugName: "columnDefs" }] : /* istanbul ignore next */ []));
|
|
2902
|
+
state = input.required(...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
2903
|
+
pageSize = input(50, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
2904
|
+
enableHorizontallyScrollable = input(false, ...(ngDevMode ? [{ debugName: "enableHorizontallyScrollable" }] : /* istanbul ignore next */ []));
|
|
2905
|
+
enableResizableColumns = input(false, ...(ngDevMode ? [{ debugName: "enableResizableColumns" }] : /* istanbul ignore next */ []));
|
|
2906
|
+
enableClickableRows = input(false, ...(ngDevMode ? [{ debugName: "enableClickableRows" }] : /* istanbul ignore next */ []));
|
|
2907
|
+
expandableComponent = input(...(ngDevMode ? [undefined, { debugName: "expandableComponent" }] : /* istanbul ignore next */ []));
|
|
2908
|
+
enableColumnsConfig = input(false, ...(ngDevMode ? [{ debugName: "enableColumnsConfig" }] : /* istanbul ignore next */ []));
|
|
2909
|
+
filterComponent = input(...(ngDevMode ? [undefined, { debugName: "filterComponent" }] : /* istanbul ignore next */ []));
|
|
2910
|
+
enableSearch = input(true, ...(ngDevMode ? [{ debugName: "enableSearch" }] : /* istanbul ignore next */ []));
|
|
2911
|
+
disableInitialLoad = input(false, ...(ngDevMode ? [{ debugName: "disableInitialLoad" }] : /* istanbul ignore next */ []));
|
|
2912
2912
|
pageChange = output();
|
|
2913
2913
|
sortChanged = output();
|
|
2914
2914
|
tableStateChanged = output();
|
|
@@ -3087,7 +3087,7 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
|
|
|
3087
3087
|
};
|
|
3088
3088
|
this.onActionPerformed.emit(tableActionEvent);
|
|
3089
3089
|
}
|
|
3090
|
-
expandedRowIndex = signal(null, ...(ngDevMode ? [{ debugName: "expandedRowIndex" }] : []));
|
|
3090
|
+
expandedRowIndex = signal(null, ...(ngDevMode ? [{ debugName: "expandedRowIndex" }] : /* istanbul ignore next */ []));
|
|
3091
3091
|
onRowExpandedClicked(i) {
|
|
3092
3092
|
if (this.expandedRowIndex() == i) {
|
|
3093
3093
|
this.expandedRowIndex.set(null);
|
|
@@ -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: "21.
|
|
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" }] });
|
|
3108
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
3111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.0.3", ngImpor
|
|
|
3138
3138
|
|
|
3139
3139
|
class EnvBannerComponent {
|
|
3140
3140
|
config = inject(NGL_CONFIG);
|
|
3141
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EnvBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
3144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
3177
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
3176
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: OpenFloatingMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3177
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", 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: "21.
|
|
3179
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: OpenFloatingMenuDirective, decorators: [{
|
|
3180
3180
|
type: Directive,
|
|
3181
3181
|
args: [{
|
|
3182
3182
|
selector: '[libOpenFloatingMenu]',
|
|
@@ -3197,12 +3197,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3197
3197
|
}] } });
|
|
3198
3198
|
|
|
3199
3199
|
class ListviewComponent {
|
|
3200
|
-
state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
3201
|
-
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
|
|
3202
|
-
pageSize = input(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
3203
|
-
component = input.required(...(ngDevMode ? [{ debugName: "component" }] : []));
|
|
3204
|
-
enableSearch = input(true, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
|
|
3205
|
-
enableSearchFullWidth = input(true, ...(ngDevMode ? [{ debugName: "enableSearchFullWidth" }] : []));
|
|
3200
|
+
state = input.required(...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
3201
|
+
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
|
|
3202
|
+
pageSize = input(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
3203
|
+
component = input.required(...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
|
|
3204
|
+
enableSearch = input(true, ...(ngDevMode ? [{ debugName: "enableSearch" }] : /* istanbul ignore next */ []));
|
|
3205
|
+
enableSearchFullWidth = input(true, ...(ngDevMode ? [{ debugName: "enableSearchFullWidth" }] : /* istanbul ignore next */ []));
|
|
3206
3206
|
onStateChanged = output();
|
|
3207
3207
|
onActionPerformed = output();
|
|
3208
3208
|
searchText = '';
|
|
@@ -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: "21.
|
|
3247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ListviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3247
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
3249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ListviewComponent, decorators: [{
|
|
3250
3250
|
type: Component,
|
|
3251
3251
|
args: [{ selector: 'app-listview', imports: [
|
|
3252
3252
|
InfiniteScrollDirective,
|
|
@@ -3258,17 +3258,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3258
3258
|
}], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], enableSearchFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearchFullWidth", required: false }] }], onStateChanged: [{ type: i0.Output, args: ["onStateChanged"] }], onActionPerformed: [{ type: i0.Output, args: ["onActionPerformed"] }] } });
|
|
3259
3259
|
|
|
3260
3260
|
class LoaderService {
|
|
3261
|
-
loadingCount = signal(0, ...(ngDevMode ? [{ debugName: "loadingCount" }] : []));
|
|
3261
|
+
loadingCount = signal(0, ...(ngDevMode ? [{ debugName: "loadingCount" }] : /* istanbul ignore next */ []));
|
|
3262
3262
|
show() {
|
|
3263
3263
|
this.loadingCount.update((current) => current + 1);
|
|
3264
3264
|
}
|
|
3265
3265
|
hide() {
|
|
3266
3266
|
this.loadingCount.update((current) => current - 1);
|
|
3267
3267
|
}
|
|
3268
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3269
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
3268
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3269
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LoaderService, providedIn: 'root' });
|
|
3270
3270
|
}
|
|
3271
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.0.3", ngImpor
|
|
|
3277
3277
|
|
|
3278
3278
|
class LoaderComponent {
|
|
3279
3279
|
loaderService = inject(LoaderService);
|
|
3280
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3281
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3280
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3281
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
3283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
3284
3284
|
type: Component,
|
|
3285
3285
|
args: [{ selector: 'app-loader', standalone: true, imports: [
|
|
3286
3286
|
SpinnerComponent
|
|
@@ -3288,12 +3288,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3288
3288
|
}] });
|
|
3289
3289
|
|
|
3290
3290
|
class NetworkImageComponent {
|
|
3291
|
-
placeholderImage = input(...(ngDevMode ? [undefined, { debugName: "placeholderImage" }] : []));
|
|
3292
|
-
imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : []));
|
|
3293
|
-
isError = signal(false, ...(ngDevMode ? [{ debugName: "isError" }] : []));
|
|
3291
|
+
placeholderImage = input(...(ngDevMode ? [undefined, { debugName: "placeholderImage" }] : /* istanbul ignore next */ []));
|
|
3292
|
+
imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
3293
|
+
isError = signal(false, ...(ngDevMode ? [{ debugName: "isError" }] : /* istanbul ignore next */ []));
|
|
3294
3294
|
placeHolderUrl = computed(() => {
|
|
3295
3295
|
return this.placeholderImage() ?? 'assets/images/background/restaurant-placeholder.png';
|
|
3296
|
-
}, ...(ngDevMode ? [{ debugName: "placeHolderUrl" }] : []));
|
|
3296
|
+
}, ...(ngDevMode ? [{ debugName: "placeHolderUrl" }] : /* istanbul ignore next */ []));
|
|
3297
3297
|
sourceUrl = computed(() => {
|
|
3298
3298
|
if (this.imageUrl()) {
|
|
3299
3299
|
return this.imageUrl();
|
|
@@ -3301,14 +3301,14 @@ class NetworkImageComponent {
|
|
|
3301
3301
|
else {
|
|
3302
3302
|
return this.placeholderImage() ?? 'assets/images/background/restaurant-placeholder.png';
|
|
3303
3303
|
}
|
|
3304
|
-
}, ...(ngDevMode ? [{ debugName: "sourceUrl" }] : []));
|
|
3304
|
+
}, ...(ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []));
|
|
3305
3305
|
handleImageError() {
|
|
3306
3306
|
this.isError.update((c) => true);
|
|
3307
3307
|
}
|
|
3308
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3309
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3308
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NetworkImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3309
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
3311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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 }] }] } });
|
|
@@ -3317,10 +3317,10 @@ class BaseOverlayComponent {
|
|
|
3317
3317
|
container;
|
|
3318
3318
|
actionsDiv;
|
|
3319
3319
|
actionsContainerDiv;
|
|
3320
|
-
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
3321
|
-
showTitle = input(true, ...(ngDevMode ? [{ debugName: "showTitle" }] : []));
|
|
3322
|
-
showBackButton = input(false, ...(ngDevMode ? [{ debugName: "showBackButton" }] : []));
|
|
3323
|
-
enableDefaultLayout = input(true, ...(ngDevMode ? [{ debugName: "enableDefaultLayout" }] : []));
|
|
3320
|
+
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3321
|
+
showTitle = input(true, ...(ngDevMode ? [{ debugName: "showTitle" }] : /* istanbul ignore next */ []));
|
|
3322
|
+
showBackButton = input(false, ...(ngDevMode ? [{ debugName: "showBackButton" }] : /* istanbul ignore next */ []));
|
|
3323
|
+
enableDefaultLayout = input(true, ...(ngDevMode ? [{ debugName: "enableDefaultLayout" }] : /* istanbul ignore next */ []));
|
|
3324
3324
|
onBackClicked = output();
|
|
3325
3325
|
renderer = inject(Renderer2);
|
|
3326
3326
|
dialogRef = inject((DialogRef));
|
|
@@ -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: "21.
|
|
3344
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3343
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3344
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
3346
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseOverlayComponent, decorators: [{
|
|
3347
3347
|
type: Component,
|
|
3348
3348
|
args: [{ selector: 'app-base-overlay', imports: [
|
|
3349
3349
|
NgClass
|
|
@@ -3360,8 +3360,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3360
3360
|
}], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], showBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackButton", required: false }] }], enableDefaultLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDefaultLayout", required: false }] }], onBackClicked: [{ type: i0.Output, args: ["onBackClicked"] }] } });
|
|
3361
3361
|
|
|
3362
3362
|
class OverlayWizardUtils {
|
|
3363
|
-
uiState = signal([], ...(ngDevMode ? [{ debugName: "uiState" }] : []));
|
|
3364
|
-
wizard = signal([], ...(ngDevMode ? [{ debugName: "wizard" }] : []));
|
|
3363
|
+
uiState = signal([], ...(ngDevMode ? [{ debugName: "uiState" }] : /* istanbul ignore next */ []));
|
|
3364
|
+
wizard = signal([], ...(ngDevMode ? [{ debugName: "wizard" }] : /* istanbul ignore next */ []));
|
|
3365
3365
|
showBackButton() {
|
|
3366
3366
|
return this.uiState().length > 1;
|
|
3367
3367
|
}
|
|
@@ -3411,7 +3411,7 @@ class OverlayWizardUtils {
|
|
|
3411
3411
|
class ResponsiveHelperComponent {
|
|
3412
3412
|
config = inject(NGL_CONFIG);
|
|
3413
3413
|
document = inject(DOCUMENT);
|
|
3414
|
-
screenWidth = signal(0, ...(ngDevMode ? [{ debugName: "screenWidth" }] : []));
|
|
3414
|
+
screenWidth = signal(0, ...(ngDevMode ? [{ debugName: "screenWidth" }] : /* istanbul ignore next */ []));
|
|
3415
3415
|
constructor() {
|
|
3416
3416
|
this.screenWidth.set(this.document.documentElement.clientWidth);
|
|
3417
3417
|
}
|
|
@@ -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: "21.
|
|
3425
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3424
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ResponsiveHelperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3425
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
3427
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: [{
|
|
@@ -3436,7 +3436,7 @@ class SvgUrlIconComponent {
|
|
|
3436
3436
|
http;
|
|
3437
3437
|
sanitizer;
|
|
3438
3438
|
svgIcon = null;
|
|
3439
|
-
svgUrl = input.required(...(ngDevMode ? [{ debugName: "svgUrl" }] : []));
|
|
3439
|
+
svgUrl = input.required(...(ngDevMode ? [{ debugName: "svgUrl" }] : /* istanbul ignore next */ []));
|
|
3440
3440
|
constructor(http, sanitizer) {
|
|
3441
3441
|
this.http = http;
|
|
3442
3442
|
this.sanitizer = sanitizer;
|
|
@@ -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: "21.
|
|
3452
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
3451
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", 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.2.8", 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: "21.
|
|
3454
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
3531
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
3530
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3531
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
3532
3532
|
}
|
|
3533
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3533
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.
|
|
3546
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
3545
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3546
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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: "21.
|
|
3548
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: [{
|
|
@@ -3558,7 +3558,7 @@ class ToastComponent {
|
|
|
3558
3558
|
title;
|
|
3559
3559
|
message;
|
|
3560
3560
|
duration;
|
|
3561
|
-
themeType = input('light', ...(ngDevMode ? [{ debugName: "themeType" }] : []));
|
|
3561
|
+
themeType = input('light', ...(ngDevMode ? [{ debugName: "themeType" }] : /* istanbul ignore next */ []));
|
|
3562
3562
|
themeClass = computed(() => {
|
|
3563
3563
|
let classes = '';
|
|
3564
3564
|
switch (this.themeType()) {
|
|
@@ -3570,7 +3570,7 @@ class ToastComponent {
|
|
|
3570
3570
|
break;
|
|
3571
3571
|
}
|
|
3572
3572
|
return classes;
|
|
3573
|
-
}, ...(ngDevMode ? [{ debugName: "themeClass" }] : []));
|
|
3573
|
+
}, ...(ngDevMode ? [{ debugName: "themeClass" }] : /* istanbul ignore next */ []));
|
|
3574
3574
|
ToastType = ToastType;
|
|
3575
3575
|
ngOnInit() {
|
|
3576
3576
|
this.show();
|
|
@@ -3585,10 +3585,10 @@ class ToastComponent {
|
|
|
3585
3585
|
}
|
|
3586
3586
|
ngOnDestroy() {
|
|
3587
3587
|
}
|
|
3588
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3589
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3588
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3589
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: "21.
|
|
3591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastComponent, decorators: [{
|
|
3592
3592
|
type: Component,
|
|
3593
3593
|
args: [{ selector: 'app-toast', standalone: true, imports: [
|
|
3594
3594
|
ToastCloseButtonComponent,
|
|
@@ -3609,7 +3609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3609
3609
|
class ToasterComponent {
|
|
3610
3610
|
toastService;
|
|
3611
3611
|
cdr;
|
|
3612
|
-
themeType = input('light', ...(ngDevMode ? [{ debugName: "themeType" }] : []));
|
|
3612
|
+
themeType = input('light', ...(ngDevMode ? [{ debugName: "themeType" }] : /* istanbul ignore next */ []));
|
|
3613
3613
|
currentToasts = [];
|
|
3614
3614
|
constructor(toastService, cdr) {
|
|
3615
3615
|
this.toastService = toastService;
|
|
@@ -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: "21.
|
|
3633
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3632
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", 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.2.8", 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: "21.
|
|
3635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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: "21.0.3", ngImpor
|
|
|
3642
3642
|
class TooltipComponent {
|
|
3643
3643
|
text = '';
|
|
3644
3644
|
tooltipClass = [];
|
|
3645
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3646
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
3645
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3646
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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: "21.
|
|
3648
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
3649
3649
|
type: Component,
|
|
3650
3650
|
args: [{ selector: 'lib-tooltip', imports: [
|
|
3651
3651
|
NgClass
|
|
@@ -3664,22 +3664,16 @@ class TooltipDirective {
|
|
|
3664
3664
|
longPressTimeout = null;
|
|
3665
3665
|
// tooltipText = input<string>('');
|
|
3666
3666
|
libTooltip = '';
|
|
3667
|
-
tooltipPosition = input('bottom', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
|
|
3668
|
-
tooltipClass = input({ alias: 'tooltipClass' }, ...(ngDevMode ? [{ debugName: "tooltipClass" }] : []));
|
|
3669
|
-
tooltipDisabled = input(false, ...(ngDevMode ? [{ debugName: "tooltipDisabled" }] : []));
|
|
3667
|
+
tooltipPosition = input('bottom', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
|
|
3668
|
+
tooltipClass = input({ alias: 'tooltipClass' }, ...(ngDevMode ? [{ debugName: "tooltipClass" }] : /* istanbul ignore next */ []));
|
|
3670
3669
|
constructor() {
|
|
3671
3670
|
effect(() => {
|
|
3672
3671
|
this.hideTooltip();
|
|
3673
3672
|
});
|
|
3674
3673
|
}
|
|
3675
3674
|
showTooltip() {
|
|
3676
|
-
if (this.
|
|
3675
|
+
if (this.overlayRef?.hasAttached())
|
|
3677
3676
|
return;
|
|
3678
|
-
}
|
|
3679
|
-
if (this.overlayRef?.hasAttached()) {
|
|
3680
|
-
return;
|
|
3681
|
-
}
|
|
3682
|
-
;
|
|
3683
3677
|
const position = this.getPosition(this.tooltipPosition());
|
|
3684
3678
|
const positionStrategy = this.positionBuilder
|
|
3685
3679
|
.flexibleConnectedTo(this.elementRef)
|
|
@@ -3765,10 +3759,10 @@ class TooltipDirective {
|
|
|
3765
3759
|
}
|
|
3766
3760
|
this.hideTooltip();
|
|
3767
3761
|
}
|
|
3768
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3769
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.
|
|
3762
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3763
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", 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 });
|
|
3770
3764
|
}
|
|
3771
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3765
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
3772
3766
|
type: Directive,
|
|
3773
3767
|
args: [{
|
|
3774
3768
|
selector: '[libTooltip]',
|
|
@@ -3776,7 +3770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3776
3770
|
}]
|
|
3777
3771
|
}], ctorParameters: () => [], propDecorators: { libTooltip: [{
|
|
3778
3772
|
type: Input
|
|
3779
|
-
}], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClass", required: false }] }],
|
|
3773
|
+
}], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClass", required: false }] }], onMouseEnter: [{
|
|
3780
3774
|
type: HostListener,
|
|
3781
3775
|
args: ['mouseenter']
|
|
3782
3776
|
}], onMouseLeave: [{
|
|
@@ -3814,10 +3808,10 @@ class ClickOutsideDirective {
|
|
|
3814
3808
|
let isInside = elementToCheck === this.element.nativeElement || this.element.nativeElement.contains(elementToCheck);
|
|
3815
3809
|
return isInside;
|
|
3816
3810
|
}
|
|
3817
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3818
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
3811
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3812
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
|
|
3819
3813
|
}
|
|
3820
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3814
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
3821
3815
|
type: Directive,
|
|
3822
3816
|
args: [{
|
|
3823
3817
|
selector: '[clickOutside]',
|
|
@@ -3861,10 +3855,10 @@ class InvalidControlScrollDirective {
|
|
|
3861
3855
|
return null;
|
|
3862
3856
|
}
|
|
3863
3857
|
}
|
|
3864
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3865
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
3858
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: InvalidControlScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3859
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: InvalidControlScrollDirective, isStandalone: true, selector: "[appInvalidControlScroll]", host: { listeners: { "ngSubmit": "onSubmit()" } }, ngImport: i0 });
|
|
3866
3860
|
}
|
|
3867
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: InvalidControlScrollDirective, decorators: [{
|
|
3868
3862
|
type: Directive,
|
|
3869
3863
|
args: [{
|
|
3870
3864
|
selector: '[appInvalidControlScroll]',
|
|
@@ -3914,10 +3908,10 @@ class InvalidControlScrollContainerDirective {
|
|
|
3914
3908
|
return absoluteControlElTop - labelOffset;
|
|
3915
3909
|
}
|
|
3916
3910
|
}
|
|
3917
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3918
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
3911
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: InvalidControlScrollContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3912
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: InvalidControlScrollContainerDirective, isStandalone: true, selector: "[appInvalidControlScrollContainer]", host: { listeners: { "ngSubmit": "onSubmit()" } }, ngImport: i0 });
|
|
3919
3913
|
}
|
|
3920
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3914
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: InvalidControlScrollContainerDirective, decorators: [{
|
|
3921
3915
|
type: Directive,
|
|
3922
3916
|
args: [{
|
|
3923
3917
|
selector: '[appInvalidControlScrollContainer]',
|
|
@@ -3974,15 +3968,15 @@ class FormValidationUtils {
|
|
|
3974
3968
|
}
|
|
3975
3969
|
|
|
3976
3970
|
class AppErrorComponent {
|
|
3977
|
-
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
3978
|
-
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
3971
|
+
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
|
|
3972
|
+
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
3979
3973
|
get hasErrors() {
|
|
3980
3974
|
return (this.control() && this.control()?.touched && this.control()?.errors) ?? false;
|
|
3981
3975
|
}
|
|
3982
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3983
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3976
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AppErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3977
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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" }] });
|
|
3984
3978
|
}
|
|
3985
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3979
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AppErrorComponent, decorators: [{
|
|
3986
3980
|
type: Component,
|
|
3987
3981
|
args: [{ selector: 'app-error', imports: [
|
|
3988
3982
|
HumanizeFormMessagesPipe
|
|
@@ -3990,13 +3984,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3990
3984
|
}], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }] } });
|
|
3991
3985
|
|
|
3992
3986
|
class DatePickerComponent extends BaseControlValueAccessorV3 {
|
|
3993
|
-
minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
|
|
3994
|
-
maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
|
|
3995
|
-
allowOnlyPast = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyPast" }] : []));
|
|
3996
|
-
allowOnlyFuture = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyFuture" }] : []));
|
|
3997
|
-
allowToday = input(false, ...(ngDevMode ? [{ debugName: "allowToday" }] : []));
|
|
3998
|
-
disabledDays = input([], ...(ngDevMode ? [{ debugName: "disabledDays" }] : []));
|
|
3999
|
-
disabledDates = input([], ...(ngDevMode ? [{ debugName: "disabledDates" }] : []));
|
|
3987
|
+
minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
3988
|
+
maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
3989
|
+
allowOnlyPast = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyPast" }] : /* istanbul ignore next */ []));
|
|
3990
|
+
allowOnlyFuture = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyFuture" }] : /* istanbul ignore next */ []));
|
|
3991
|
+
allowToday = input(false, ...(ngDevMode ? [{ debugName: "allowToday" }] : /* istanbul ignore next */ []));
|
|
3992
|
+
disabledDays = input([], ...(ngDevMode ? [{ debugName: "disabledDays" }] : /* istanbul ignore next */ []));
|
|
3993
|
+
disabledDates = input([], ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
|
|
4000
3994
|
dateSelected = output();
|
|
4001
3995
|
// days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
4002
3996
|
days = [
|
|
@@ -4022,7 +4016,7 @@ class DatePickerComponent extends BaseControlValueAccessorV3 {
|
|
|
4022
4016
|
'Nov',
|
|
4023
4017
|
'Dec'
|
|
4024
4018
|
];
|
|
4025
|
-
uiMode = signal('date', ...(ngDevMode ? [{ debugName: "uiMode" }] : []));
|
|
4019
|
+
uiMode = signal('date', ...(ngDevMode ? [{ debugName: "uiMode" }] : /* istanbul ignore next */ []));
|
|
4026
4020
|
activeMonth;
|
|
4027
4021
|
activeYear;
|
|
4028
4022
|
selectedDate;
|
|
@@ -4230,10 +4224,10 @@ class DatePickerComponent extends BaseControlValueAccessorV3 {
|
|
|
4230
4224
|
getLastYear() {
|
|
4231
4225
|
return this.years[this.years.length - 1].value;
|
|
4232
4226
|
}
|
|
4233
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4234
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
4227
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4228
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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"] }] });
|
|
4235
4229
|
}
|
|
4236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
4237
4231
|
type: Component,
|
|
4238
4232
|
args: [{ selector: 'app-date-picker', imports: [
|
|
4239
4233
|
NgClass
|
|
@@ -4246,10 +4240,10 @@ class DatePickerOverlayComponent {
|
|
|
4246
4240
|
onDateSelected($event) {
|
|
4247
4241
|
this.dialogRef.close($event);
|
|
4248
4242
|
}
|
|
4249
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4250
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
4243
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DatePickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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"] }] });
|
|
4251
4245
|
}
|
|
4252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4246
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DatePickerOverlayComponent, decorators: [{
|
|
4253
4247
|
type: Component,
|
|
4254
4248
|
args: [{ selector: 'app-date-picker-overlay', imports: [
|
|
4255
4249
|
DatePickerComponent
|
|
@@ -4285,21 +4279,21 @@ var InputDateFormat;
|
|
|
4285
4279
|
})(InputDateFormat || (InputDateFormat = {}));
|
|
4286
4280
|
class DateInputComponent extends BaseControlValueAccessorV3 {
|
|
4287
4281
|
trigger;
|
|
4288
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
4289
|
-
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
|
|
4290
|
-
showDatePickerIcon = input(true, ...(ngDevMode ? [{ debugName: "showDatePickerIcon" }] : []));
|
|
4291
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
4292
|
-
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
|
|
4293
|
-
minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
|
|
4294
|
-
maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
|
|
4295
|
-
allowOnlyPast = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyPast" }] : []));
|
|
4296
|
-
allowOnlyFuture = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyFuture" }] : []));
|
|
4297
|
-
disabledDays = input([], ...(ngDevMode ? [{ debugName: "disabledDays" }] : []));
|
|
4298
|
-
disabledDates = input([], ...(ngDevMode ? [{ debugName: "disabledDates" }] : []));
|
|
4299
|
-
inputDateFormat = input(InputDateFormat.mmddyyyy, ...(ngDevMode ? [{ debugName: "inputDateFormat" }] : []));
|
|
4282
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
4283
|
+
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : /* istanbul ignore next */ []));
|
|
4284
|
+
showDatePickerIcon = input(true, ...(ngDevMode ? [{ debugName: "showDatePickerIcon" }] : /* istanbul ignore next */ []));
|
|
4285
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
4286
|
+
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : /* istanbul ignore next */ []));
|
|
4287
|
+
minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
4288
|
+
maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
4289
|
+
allowOnlyPast = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyPast" }] : /* istanbul ignore next */ []));
|
|
4290
|
+
allowOnlyFuture = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyFuture" }] : /* istanbul ignore next */ []));
|
|
4291
|
+
disabledDays = input([], ...(ngDevMode ? [{ debugName: "disabledDays" }] : /* istanbul ignore next */ []));
|
|
4292
|
+
disabledDates = input([], ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
|
|
4293
|
+
inputDateFormat = input(InputDateFormat.mmddyyyy, ...(ngDevMode ? [{ debugName: "inputDateFormat" }] : /* istanbul ignore next */ []));
|
|
4300
4294
|
overlayService = inject(OverlayService);
|
|
4301
|
-
isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
|
|
4302
|
-
textInputValue = signal(null, ...(ngDevMode ? [{ debugName: "textInputValue" }] : []));
|
|
4295
|
+
isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
|
|
4296
|
+
textInputValue = signal(null, ...(ngDevMode ? [{ debugName: "textInputValue" }] : /* istanbul ignore next */ []));
|
|
4303
4297
|
subscription;
|
|
4304
4298
|
ngOnDestroy() {
|
|
4305
4299
|
this.subscription?.unsubscribe();
|
|
@@ -4434,10 +4428,10 @@ class DateInputComponent extends BaseControlValueAccessorV3 {
|
|
|
4434
4428
|
const yyyy = date.getFullYear();
|
|
4435
4429
|
return this.inputDateFormat() === InputDateFormat.mmddyyyy ? `${mm}/${dd}/${yyyy}` : `${dd}/${mm}/${yyyy}`;
|
|
4436
4430
|
}
|
|
4437
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4438
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
4431
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4432
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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" }] });
|
|
4439
4433
|
}
|
|
4440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4434
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
4441
4435
|
type: Component,
|
|
4442
4436
|
args: [{ selector: 'app-date-input', standalone: true, imports: [
|
|
4443
4437
|
HumanizeFormMessagesPipe,
|
|
@@ -4454,11 +4448,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
4454
4448
|
}], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], showDatePickerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDatePickerIcon", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], showErrorSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorSpace", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], allowOnlyPast: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyPast", required: false }] }], allowOnlyFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyFuture", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], inputDateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDateFormat", required: false }] }] } });
|
|
4455
4449
|
|
|
4456
4450
|
class DateRangePickerComponent extends BaseControlValueAccessorV3 {
|
|
4457
|
-
minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
|
|
4458
|
-
maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
|
|
4459
|
-
allowOnlyPast = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyPast" }] : []));
|
|
4460
|
-
allowOnlyFuture = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyFuture" }] : []));
|
|
4461
|
-
allowToday = input(false, ...(ngDevMode ? [{ debugName: "allowToday" }] : []));
|
|
4451
|
+
minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
4452
|
+
maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
4453
|
+
allowOnlyPast = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyPast" }] : /* istanbul ignore next */ []));
|
|
4454
|
+
allowOnlyFuture = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyFuture" }] : /* istanbul ignore next */ []));
|
|
4455
|
+
allowToday = input(false, ...(ngDevMode ? [{ debugName: "allowToday" }] : /* istanbul ignore next */ []));
|
|
4462
4456
|
dateRangeSelected = output();
|
|
4463
4457
|
days = [
|
|
4464
4458
|
{ day: 'sunday', displayName: 'Su' },
|
|
@@ -4483,7 +4477,7 @@ class DateRangePickerComponent extends BaseControlValueAccessorV3 {
|
|
|
4483
4477
|
'Nov',
|
|
4484
4478
|
'Dec'
|
|
4485
4479
|
];
|
|
4486
|
-
uiMode = signal('date', ...(ngDevMode ? [{ debugName: "uiMode" }] : []));
|
|
4480
|
+
uiMode = signal('date', ...(ngDevMode ? [{ debugName: "uiMode" }] : /* istanbul ignore next */ []));
|
|
4487
4481
|
activeMonth;
|
|
4488
4482
|
activeYear;
|
|
4489
4483
|
startDate;
|
|
@@ -4734,10 +4728,10 @@ class DateRangePickerComponent extends BaseControlValueAccessorV3 {
|
|
|
4734
4728
|
this.hoveredDate = null;
|
|
4735
4729
|
this.onValueChange(null);
|
|
4736
4730
|
}
|
|
4737
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4738
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
4731
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DateRangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4732
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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"] }] });
|
|
4739
4733
|
}
|
|
4740
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4734
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
4741
4735
|
type: Component,
|
|
4742
4736
|
args: [{ selector: 'app-date-range-picker', imports: [
|
|
4743
4737
|
NgClass
|
|
@@ -4748,38 +4742,38 @@ class DropdownComponent extends BaseControlValueAccessorV2 {
|
|
|
4748
4742
|
cdr = inject(ChangeDetectorRef);
|
|
4749
4743
|
renderer = inject(Renderer2);
|
|
4750
4744
|
overlay = inject(Overlay);
|
|
4751
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
4752
|
-
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
4753
|
-
placeholder = input('Select', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
4754
|
-
prefixIconPath = input(...(ngDevMode ? [undefined, { debugName: "prefixIconPath" }] : []));
|
|
4755
|
-
isTitlePrefix = input(false, ...(ngDevMode ? [{ debugName: "isTitlePrefix" }] : []));
|
|
4756
|
-
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : []));
|
|
4757
|
-
displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : []));
|
|
4758
|
-
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
4759
|
-
searchKeyMatch = input(...(ngDevMode ? [undefined, { debugName: "searchKeyMatch" }] : []));
|
|
4745
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
4746
|
+
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
4747
|
+
placeholder = input('Select', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
4748
|
+
prefixIconPath = input(...(ngDevMode ? [undefined, { debugName: "prefixIconPath" }] : /* istanbul ignore next */ []));
|
|
4749
|
+
isTitlePrefix = input(false, ...(ngDevMode ? [{ debugName: "isTitlePrefix" }] : /* istanbul ignore next */ []));
|
|
4750
|
+
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : /* istanbul ignore next */ []));
|
|
4751
|
+
displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : /* istanbul ignore next */ []));
|
|
4752
|
+
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
4753
|
+
searchKeyMatch = input(...(ngDevMode ? [undefined, { debugName: "searchKeyMatch" }] : /* istanbul ignore next */ []));
|
|
4760
4754
|
// identifier = input<string>();
|
|
4761
|
-
noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : []));
|
|
4762
|
-
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
|
|
4763
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
4764
|
-
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
|
|
4765
|
-
enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
|
|
4766
|
-
addActionText = input(...(ngDevMode ? [undefined, { debugName: "addActionText" }] : []));
|
|
4767
|
-
minimumPopupWidth = input(250, ...(ngDevMode ? [{ debugName: "minimumPopupWidth" }] : []));
|
|
4768
|
-
noBorder = input(false, ...(ngDevMode ? [{ debugName: "noBorder" }] : []));
|
|
4769
|
-
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
4770
|
-
highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
|
|
4771
|
-
selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
|
|
4772
|
-
dropUp = signal(false, ...(ngDevMode ? [{ debugName: "dropUp" }] : []));
|
|
4773
|
-
dropdownWidth = signal(300, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
|
|
4774
|
-
filteredList = signal([], ...(ngDevMode ? [{ debugName: "filteredList" }] : []));
|
|
4775
|
-
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
4755
|
+
noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : /* istanbul ignore next */ []));
|
|
4756
|
+
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : /* istanbul ignore next */ []));
|
|
4757
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
4758
|
+
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : /* istanbul ignore next */ []));
|
|
4759
|
+
enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch" }] : /* istanbul ignore next */ []));
|
|
4760
|
+
addActionText = input(...(ngDevMode ? [undefined, { debugName: "addActionText" }] : /* istanbul ignore next */ []));
|
|
4761
|
+
minimumPopupWidth = input(250, ...(ngDevMode ? [{ debugName: "minimumPopupWidth" }] : /* istanbul ignore next */ []));
|
|
4762
|
+
noBorder = input(false, ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
|
|
4763
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
4764
|
+
highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
|
|
4765
|
+
selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
|
|
4766
|
+
dropUp = signal(false, ...(ngDevMode ? [{ debugName: "dropUp" }] : /* istanbul ignore next */ []));
|
|
4767
|
+
dropdownWidth = signal(300, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
|
|
4768
|
+
filteredList = signal([], ...(ngDevMode ? [{ debugName: "filteredList" }] : /* istanbul ignore next */ []));
|
|
4769
|
+
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
4776
4770
|
valueChanged = output();
|
|
4777
4771
|
addActionClicked = output();
|
|
4778
4772
|
dropdownButton;
|
|
4779
4773
|
dropdown;
|
|
4780
4774
|
dropdownListContainer;
|
|
4781
4775
|
dropdownList;
|
|
4782
|
-
searchField = viewChild('searchField', ...(ngDevMode ? [{ debugName: "searchField" }] : []));
|
|
4776
|
+
searchField = viewChild('searchField', ...(ngDevMode ? [{ debugName: "searchField" }] : /* istanbul ignore next */ []));
|
|
4783
4777
|
scrollStrategy = this.overlay.scrollStrategies.block();
|
|
4784
4778
|
ngOnChanges(changes) {
|
|
4785
4779
|
let value = this.actualValue;
|
|
@@ -5039,10 +5033,10 @@ class DropdownComponent extends BaseControlValueAccessorV2 {
|
|
|
5039
5033
|
return current === value;
|
|
5040
5034
|
});
|
|
5041
5035
|
}
|
|
5042
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5043
|
-
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" }] });
|
|
5036
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5037
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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" }] });
|
|
5044
5038
|
}
|
|
5045
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5039
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
5046
5040
|
type: Component,
|
|
5047
5041
|
args: [{ selector: 'app-dropdown', standalone: true, imports: [
|
|
5048
5042
|
ReactiveFormsModule,
|
|
@@ -5070,15 +5064,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
5070
5064
|
}] } });
|
|
5071
5065
|
|
|
5072
5066
|
class FileUploaderComponent extends BaseControlValueAccessor {
|
|
5073
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
5074
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
5075
|
-
isRequired = input(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
5076
|
-
uploading = input(false, ...(ngDevMode ? [{ debugName: "uploading" }] : []));
|
|
5077
|
-
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
5067
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
5068
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
5069
|
+
isRequired = input(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
|
|
5070
|
+
uploading = input(false, ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
|
|
5071
|
+
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
5078
5072
|
fileSelected = output();
|
|
5079
5073
|
fileRemoved = output();
|
|
5080
|
-
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
5081
|
-
selectedFile = signal(null, ...(ngDevMode ? [{ debugName: "selectedFile" }] : []));
|
|
5074
|
+
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
5075
|
+
selectedFile = signal(null, ...(ngDevMode ? [{ debugName: "selectedFile" }] : /* istanbul ignore next */ []));
|
|
5082
5076
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
5083
5077
|
constructor() {
|
|
5084
5078
|
super();
|
|
@@ -5142,10 +5136,10 @@ class FileUploaderComponent extends BaseControlValueAccessor {
|
|
|
5142
5136
|
return fileName ? decodeURIComponent(fileName) : '';
|
|
5143
5137
|
}
|
|
5144
5138
|
}
|
|
5145
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5146
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
5139
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5140
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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" }] });
|
|
5147
5141
|
}
|
|
5148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FileUploaderComponent, decorators: [{
|
|
5149
5143
|
type: Component,
|
|
5150
5144
|
args: [{ selector: 'app-file-uploader', standalone: true, imports: [
|
|
5151
5145
|
SpinnerComponent,
|
|
@@ -5161,35 +5155,35 @@ class MultiSelectDropdownComponent extends BaseControlValueAccessor {
|
|
|
5161
5155
|
cdr = inject(ChangeDetectorRef);
|
|
5162
5156
|
renderer = inject(Renderer2);
|
|
5163
5157
|
overlay = inject(Overlay);
|
|
5164
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
5165
|
-
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
5166
|
-
placeholder = input('Select', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
5167
|
-
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : []));
|
|
5168
|
-
displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : []));
|
|
5169
|
-
value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
5170
|
-
identifier = input(SharedConstants.inputIdentifier, ...(ngDevMode ? [{ debugName: "identifier" }] : []));
|
|
5171
|
-
searchKeyMatch = input(...(ngDevMode ? [undefined, { debugName: "searchKeyMatch" }] : []));
|
|
5172
|
-
noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : []));
|
|
5173
|
-
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
|
|
5174
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
5175
|
-
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
|
|
5176
|
-
enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
|
|
5177
|
-
addActionText = input(...(ngDevMode ? [undefined, { debugName: "addActionText" }] : []));
|
|
5178
|
-
minimumPopupWidth = input(250, ...(ngDevMode ? [{ debugName: "minimumPopupWidth" }] : []));
|
|
5179
|
-
appearance = input(MultiSelectDropdownAppearance.standard, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
5158
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
5159
|
+
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
5160
|
+
placeholder = input('Select', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
5161
|
+
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : /* istanbul ignore next */ []));
|
|
5162
|
+
displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : /* istanbul ignore next */ []));
|
|
5163
|
+
value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
5164
|
+
identifier = input(SharedConstants.inputIdentifier, ...(ngDevMode ? [{ debugName: "identifier" }] : /* istanbul ignore next */ []));
|
|
5165
|
+
searchKeyMatch = input(...(ngDevMode ? [undefined, { debugName: "searchKeyMatch" }] : /* istanbul ignore next */ []));
|
|
5166
|
+
noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : /* istanbul ignore next */ []));
|
|
5167
|
+
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : /* istanbul ignore next */ []));
|
|
5168
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
5169
|
+
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : /* istanbul ignore next */ []));
|
|
5170
|
+
enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch" }] : /* istanbul ignore next */ []));
|
|
5171
|
+
addActionText = input(...(ngDevMode ? [undefined, { debugName: "addActionText" }] : /* istanbul ignore next */ []));
|
|
5172
|
+
minimumPopupWidth = input(250, ...(ngDevMode ? [{ debugName: "minimumPopupWidth" }] : /* istanbul ignore next */ []));
|
|
5173
|
+
appearance = input(MultiSelectDropdownAppearance.standard, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
5180
5174
|
valueChanged = output();
|
|
5181
5175
|
addActionClicked = output();
|
|
5182
|
-
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
5183
|
-
highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
|
|
5184
|
-
dropUp = signal(false, ...(ngDevMode ? [{ debugName: "dropUp" }] : []));
|
|
5185
|
-
dropdownWidth = signal(300, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
|
|
5186
|
-
selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
|
|
5187
|
-
filteredList = signal([], ...(ngDevMode ? [{ debugName: "filteredList" }] : []));
|
|
5188
|
-
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
5176
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
5177
|
+
highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
|
|
5178
|
+
dropUp = signal(false, ...(ngDevMode ? [{ debugName: "dropUp" }] : /* istanbul ignore next */ []));
|
|
5179
|
+
dropdownWidth = signal(300, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
|
|
5180
|
+
selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
|
|
5181
|
+
filteredList = signal([], ...(ngDevMode ? [{ debugName: "filteredList" }] : /* istanbul ignore next */ []));
|
|
5182
|
+
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
5189
5183
|
dropdownButton;
|
|
5190
5184
|
dropdownListContainer;
|
|
5191
5185
|
dropdownList;
|
|
5192
|
-
searchField = viewChild('searchField', ...(ngDevMode ? [{ debugName: "searchField" }] : []));
|
|
5186
|
+
searchField = viewChild('searchField', ...(ngDevMode ? [{ debugName: "searchField" }] : /* istanbul ignore next */ []));
|
|
5193
5187
|
scrollStrategy = this.overlay.scrollStrategies.block();
|
|
5194
5188
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
5195
5189
|
MultiSelectDropdownAppearance = MultiSelectDropdownAppearance;
|
|
@@ -5507,10 +5501,10 @@ class MultiSelectDropdownComponent extends BaseControlValueAccessor {
|
|
|
5507
5501
|
onAddActionClicked() {
|
|
5508
5502
|
this.addActionClicked.emit();
|
|
5509
5503
|
}
|
|
5510
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5511
|
-
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" }] });
|
|
5504
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MultiSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5505
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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" }] });
|
|
5512
5506
|
}
|
|
5513
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MultiSelectDropdownComponent, decorators: [{
|
|
5514
5508
|
type: Component,
|
|
5515
5509
|
args: [{ selector: 'app-multi-select-dropdown', standalone: true, imports: [
|
|
5516
5510
|
BaseInputComponent,
|
|
@@ -5541,31 +5535,31 @@ var MultiSelectDropdownAppearance;
|
|
|
5541
5535
|
})(MultiSelectDropdownAppearance || (MultiSelectDropdownAppearance = {}));
|
|
5542
5536
|
|
|
5543
5537
|
class MultiSelectionFieldComponent extends BaseControlValueAccessor {
|
|
5544
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
5545
|
-
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
5546
|
-
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : []));
|
|
5547
|
-
displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : []));
|
|
5548
|
-
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
|
|
5549
|
-
dynamicIconPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconPath" }] : []));
|
|
5550
|
-
imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : []));
|
|
5551
|
-
dynamicImageUrlPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicImageUrlPath" }] : []));
|
|
5552
|
-
value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
5553
|
-
identifier = input(SharedConstants.inputIdentifier, ...(ngDevMode ? [{ debugName: "identifier" }] : []));
|
|
5554
|
-
noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : []));
|
|
5555
|
-
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
|
|
5556
|
-
iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
|
|
5557
|
-
dynamicIconColor = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconColor" }] : []));
|
|
5558
|
-
customActionText = input(...(ngDevMode ? [undefined, { debugName: "customActionText" }] : []));
|
|
5559
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
5560
|
-
itemWidth = input(null, ...(ngDevMode ? [{ debugName: "itemWidth" }] : []));
|
|
5561
|
-
isItemCentered = input(false, ...(ngDevMode ? [{ debugName: "isItemCentered" }] : []));
|
|
5562
|
-
showSelectionTickMark = input(true, ...(ngDevMode ? [{ debugName: "showSelectionTickMark" }] : []));
|
|
5563
|
-
maximumDisplayItems = input(null, ...(ngDevMode ? [{ debugName: "maximumDisplayItems" }] : []));
|
|
5538
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
5539
|
+
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
5540
|
+
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : /* istanbul ignore next */ []));
|
|
5541
|
+
displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : /* istanbul ignore next */ []));
|
|
5542
|
+
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : /* istanbul ignore next */ []));
|
|
5543
|
+
dynamicIconPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconPath" }] : /* istanbul ignore next */ []));
|
|
5544
|
+
imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
5545
|
+
dynamicImageUrlPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicImageUrlPath" }] : /* istanbul ignore next */ []));
|
|
5546
|
+
value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
5547
|
+
identifier = input(SharedConstants.inputIdentifier, ...(ngDevMode ? [{ debugName: "identifier" }] : /* istanbul ignore next */ []));
|
|
5548
|
+
noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : /* istanbul ignore next */ []));
|
|
5549
|
+
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : /* istanbul ignore next */ []));
|
|
5550
|
+
iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : /* istanbul ignore next */ []));
|
|
5551
|
+
dynamicIconColor = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconColor" }] : /* istanbul ignore next */ []));
|
|
5552
|
+
customActionText = input(...(ngDevMode ? [undefined, { debugName: "customActionText" }] : /* istanbul ignore next */ []));
|
|
5553
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
5554
|
+
itemWidth = input(null, ...(ngDevMode ? [{ debugName: "itemWidth" }] : /* istanbul ignore next */ []));
|
|
5555
|
+
isItemCentered = input(false, ...(ngDevMode ? [{ debugName: "isItemCentered" }] : /* istanbul ignore next */ []));
|
|
5556
|
+
showSelectionTickMark = input(true, ...(ngDevMode ? [{ debugName: "showSelectionTickMark" }] : /* istanbul ignore next */ []));
|
|
5557
|
+
maximumDisplayItems = input(null, ...(ngDevMode ? [{ debugName: "maximumDisplayItems" }] : /* istanbul ignore next */ []));
|
|
5564
5558
|
valueChanged = output();
|
|
5565
5559
|
onCustomActionClicked = output();
|
|
5566
|
-
showAll = signal(false, ...(ngDevMode ? [{ debugName: "showAll" }] : []));
|
|
5567
|
-
selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
|
|
5568
|
-
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
5560
|
+
showAll = signal(false, ...(ngDevMode ? [{ debugName: "showAll" }] : /* istanbul ignore next */ []));
|
|
5561
|
+
selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
|
|
5562
|
+
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
5569
5563
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
5570
5564
|
constructor() {
|
|
5571
5565
|
super();
|
|
@@ -5796,10 +5790,10 @@ class MultiSelectionFieldComponent extends BaseControlValueAccessor {
|
|
|
5796
5790
|
break;
|
|
5797
5791
|
}
|
|
5798
5792
|
}
|
|
5799
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5800
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
5793
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MultiSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5794
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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" }] });
|
|
5801
5795
|
}
|
|
5802
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5796
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MultiSelectionFieldComponent, decorators: [{
|
|
5803
5797
|
type: Component,
|
|
5804
5798
|
args: [{ selector: 'app-multi-selection-field', standalone: true, imports: [
|
|
5805
5799
|
BaseInputComponent,
|
|
@@ -5826,10 +5820,10 @@ class NumberInputComponent extends BaseControlValueAccessorV2 {
|
|
|
5826
5820
|
}
|
|
5827
5821
|
text(someType) {
|
|
5828
5822
|
}
|
|
5829
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
5823
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5824
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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"] }] });
|
|
5831
5825
|
}
|
|
5832
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5826
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
5833
5827
|
type: Component,
|
|
5834
5828
|
args: [{ selector: 'app-number-input', standalone: true, imports: [
|
|
5835
5829
|
ButtonComponent
|
|
@@ -5837,22 +5831,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
5837
5831
|
}], propDecorators: { valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
|
|
5838
5832
|
|
|
5839
5833
|
class PhoneNumberInputComponent {
|
|
5840
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5841
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
5834
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PhoneNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5835
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: PhoneNumberInputComponent, isStandalone: true, selector: "app-phone-number-input", ngImport: i0, template: "", styles: [""] });
|
|
5842
5836
|
}
|
|
5843
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5837
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
|
|
5844
5838
|
type: Component,
|
|
5845
5839
|
args: [{ selector: 'app-phone-number-input', imports: [], template: "" }]
|
|
5846
5840
|
}] });
|
|
5847
5841
|
|
|
5848
5842
|
class RadioButtonComponent extends BaseControlValueAccessor {
|
|
5849
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
5850
|
-
groupName = input.required(...(ngDevMode ? [{ debugName: "groupName" }] : []));
|
|
5851
|
-
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
5852
|
-
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
5843
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
5844
|
+
groupName = input.required(...(ngDevMode ? [{ debugName: "groupName" }] : /* istanbul ignore next */ []));
|
|
5845
|
+
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
5846
|
+
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
5853
5847
|
valueChanged = new EventEmitter();
|
|
5854
5848
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
5855
|
-
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
5849
|
+
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
5856
5850
|
constructor() {
|
|
5857
5851
|
super();
|
|
5858
5852
|
if (this.ngControl) {
|
|
@@ -5882,10 +5876,10 @@ class RadioButtonComponent extends BaseControlValueAccessor {
|
|
|
5882
5876
|
const randomNumber = Math.floor(1000 + Math.random() * 9000);
|
|
5883
5877
|
return `radio-button-${randomNumber.toString()}`;
|
|
5884
5878
|
}
|
|
5885
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5886
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
5879
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5880
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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"] }] });
|
|
5887
5881
|
}
|
|
5888
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
5889
5883
|
type: Component,
|
|
5890
5884
|
args: [{ selector: 'app-radio-button', standalone: true, imports: [
|
|
5891
5885
|
ReactiveFormsModule
|
|
@@ -5895,13 +5889,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
5895
5889
|
}], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }] } });
|
|
5896
5890
|
|
|
5897
5891
|
class SingleItemPickerInputComponent extends BaseControlValueAccessor {
|
|
5898
|
-
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
5899
|
-
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
5900
|
-
display = input.required(...(ngDevMode ? [{ debugName: "display" }] : []));
|
|
5901
|
-
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
5902
|
-
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
5892
|
+
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
5893
|
+
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
5894
|
+
display = input.required(...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
|
|
5895
|
+
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
5896
|
+
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
5903
5897
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
5904
|
-
isPopUpOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPopUpOpen" }] : []));
|
|
5898
|
+
isPopUpOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPopUpOpen" }] : /* istanbul ignore next */ []));
|
|
5905
5899
|
valueChanged = new EventEmitter();
|
|
5906
5900
|
constructor() {
|
|
5907
5901
|
super();
|
|
@@ -5950,10 +5944,10 @@ class SingleItemPickerInputComponent extends BaseControlValueAccessor {
|
|
|
5950
5944
|
togglePopup() {
|
|
5951
5945
|
this.isPopUpOpen.update(p => !p);
|
|
5952
5946
|
}
|
|
5953
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5954
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
5947
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SingleItemPickerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5948
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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" }] });
|
|
5955
5949
|
}
|
|
5956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5950
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SingleItemPickerInputComponent, decorators: [{
|
|
5957
5951
|
type: Component,
|
|
5958
5952
|
args: [{ selector: 'app-single-item-picker-input', standalone: true, imports: [
|
|
5959
5953
|
AppSvgIconComponent,
|
|
@@ -5965,31 +5959,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
5965
5959
|
}] } });
|
|
5966
5960
|
|
|
5967
5961
|
class SingleSelectionFieldComponent extends BaseControlValueAccessor {
|
|
5968
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
5969
|
-
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
5970
|
-
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : []));
|
|
5971
|
-
displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : []));
|
|
5972
|
-
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
|
|
5973
|
-
dynamicIconPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconPath" }] : []));
|
|
5974
|
-
imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : []));
|
|
5975
|
-
dynamicImageUrlPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicImageUrlPath" }] : []));
|
|
5976
|
-
iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
|
|
5977
|
-
dynamicIconColor = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconColor" }] : []));
|
|
5978
|
-
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
5979
|
-
noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : []));
|
|
5980
|
-
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
|
|
5981
|
-
customActionText = input(...(ngDevMode ? [undefined, { debugName: "customActionText" }] : []));
|
|
5982
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
5983
|
-
itemWidth = input(null, ...(ngDevMode ? [{ debugName: "itemWidth" }] : []));
|
|
5984
|
-
isItemCentered = input(false, ...(ngDevMode ? [{ debugName: "isItemCentered" }] : []));
|
|
5985
|
-
showSelectionTickMark = input(true, ...(ngDevMode ? [{ debugName: "showSelectionTickMark" }] : []));
|
|
5986
|
-
itemPlacement = input('start', ...(ngDevMode ? [{ debugName: "itemPlacement" }] : []));
|
|
5987
|
-
maximumDisplayItems = input(null, ...(ngDevMode ? [{ debugName: "maximumDisplayItems" }] : []));
|
|
5962
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
5963
|
+
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
5964
|
+
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : /* istanbul ignore next */ []));
|
|
5965
|
+
displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : /* istanbul ignore next */ []));
|
|
5966
|
+
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : /* istanbul ignore next */ []));
|
|
5967
|
+
dynamicIconPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconPath" }] : /* istanbul ignore next */ []));
|
|
5968
|
+
imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
5969
|
+
dynamicImageUrlPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicImageUrlPath" }] : /* istanbul ignore next */ []));
|
|
5970
|
+
iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : /* istanbul ignore next */ []));
|
|
5971
|
+
dynamicIconColor = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconColor" }] : /* istanbul ignore next */ []));
|
|
5972
|
+
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
5973
|
+
noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : /* istanbul ignore next */ []));
|
|
5974
|
+
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : /* istanbul ignore next */ []));
|
|
5975
|
+
customActionText = input(...(ngDevMode ? [undefined, { debugName: "customActionText" }] : /* istanbul ignore next */ []));
|
|
5976
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
5977
|
+
itemWidth = input(null, ...(ngDevMode ? [{ debugName: "itemWidth" }] : /* istanbul ignore next */ []));
|
|
5978
|
+
isItemCentered = input(false, ...(ngDevMode ? [{ debugName: "isItemCentered" }] : /* istanbul ignore next */ []));
|
|
5979
|
+
showSelectionTickMark = input(true, ...(ngDevMode ? [{ debugName: "showSelectionTickMark" }] : /* istanbul ignore next */ []));
|
|
5980
|
+
itemPlacement = input('start', ...(ngDevMode ? [{ debugName: "itemPlacement" }] : /* istanbul ignore next */ []));
|
|
5981
|
+
maximumDisplayItems = input(null, ...(ngDevMode ? [{ debugName: "maximumDisplayItems" }] : /* istanbul ignore next */ []));
|
|
5988
5982
|
valueChanged = output();
|
|
5989
5983
|
onCustomActionClicked = output();
|
|
5990
|
-
selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
|
|
5991
|
-
showAll = signal(false, ...(ngDevMode ? [{ debugName: "showAll" }] : []));
|
|
5992
|
-
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
5984
|
+
selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
|
|
5985
|
+
showAll = signal(false, ...(ngDevMode ? [{ debugName: "showAll" }] : /* istanbul ignore next */ []));
|
|
5986
|
+
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
5993
5987
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
5994
5988
|
constructor() {
|
|
5995
5989
|
super();
|
|
@@ -6109,10 +6103,10 @@ class SingleSelectionFieldComponent extends BaseControlValueAccessor {
|
|
|
6109
6103
|
break;
|
|
6110
6104
|
}
|
|
6111
6105
|
}
|
|
6112
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6113
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
6106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SingleSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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" }] });
|
|
6114
6108
|
}
|
|
6115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SingleSelectionFieldComponent, decorators: [{
|
|
6116
6110
|
type: Component,
|
|
6117
6111
|
args: [{ selector: 'app-single-selection-field', standalone: true, imports: [
|
|
6118
6112
|
BaseInputComponent,
|
|
@@ -6126,11 +6120,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
6126
6120
|
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], displayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayTemplate", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], dynamicIconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicIconPath", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], dynamicImageUrlPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicImageUrlPath", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], dynamicIconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicIconColor", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], customActionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActionText", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], itemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemWidth", required: false }] }], isItemCentered: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemCentered", required: false }] }], showSelectionTickMark: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionTickMark", required: false }] }], itemPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemPlacement", required: false }] }], maximumDisplayItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumDisplayItems", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], onCustomActionClicked: [{ type: i0.Output, args: ["onCustomActionClicked"] }] } });
|
|
6127
6121
|
|
|
6128
6122
|
class SwitchComponent extends BaseControlValueAccessor {
|
|
6129
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
6130
|
-
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
6123
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
6124
|
+
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
6131
6125
|
valueChanged = new EventEmitter();
|
|
6132
6126
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
6133
|
-
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
6127
|
+
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
6134
6128
|
constructor() {
|
|
6135
6129
|
super();
|
|
6136
6130
|
if (this.ngControl) {
|
|
@@ -6160,10 +6154,10 @@ class SwitchComponent extends BaseControlValueAccessor {
|
|
|
6160
6154
|
const randomNumber = Math.floor(1000 + Math.random() * 9000);
|
|
6161
6155
|
return `checkbox-${randomNumber.toString()}`;
|
|
6162
6156
|
}
|
|
6163
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
6157
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6158
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 }] });
|
|
6165
6159
|
}
|
|
6166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
6167
6161
|
type: Component,
|
|
6168
6162
|
args: [{ selector: 'app-switch', standalone: true, imports: [
|
|
6169
6163
|
ReactiveFormsModule
|
|
@@ -6173,15 +6167,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
6173
6167
|
}], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }] } });
|
|
6174
6168
|
|
|
6175
6169
|
class TextAreaInputComponent extends BaseControlValueAccessor {
|
|
6176
|
-
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
6177
|
-
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
6178
|
-
viewType = input('text', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
|
|
6179
|
-
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
6180
|
-
fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
6181
|
-
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
6182
|
-
rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
6183
|
-
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
6184
|
-
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
|
|
6170
|
+
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
6171
|
+
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
6172
|
+
viewType = input('text', ...(ngDevMode ? [{ debugName: "viewType" }] : /* istanbul ignore next */ []));
|
|
6173
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
6174
|
+
fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
6175
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
6176
|
+
rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
6177
|
+
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
6178
|
+
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : /* istanbul ignore next */ []));
|
|
6185
6179
|
changeValue = output();
|
|
6186
6180
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
6187
6181
|
constructor() {
|
|
@@ -6203,10 +6197,10 @@ class TextAreaInputComponent extends BaseControlValueAccessor {
|
|
|
6203
6197
|
}
|
|
6204
6198
|
onWriteValue(obj) {
|
|
6205
6199
|
}
|
|
6206
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6207
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
6200
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextAreaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6201
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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" }] });
|
|
6208
6202
|
}
|
|
6209
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextAreaInputComponent, decorators: [{
|
|
6210
6204
|
type: Component,
|
|
6211
6205
|
args: [{ selector: 'app-text-area-input', standalone: true, imports: [
|
|
6212
6206
|
ReactiveFormsModule,
|
|
@@ -6217,20 +6211,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
6217
6211
|
|
|
6218
6212
|
class TimePickerComponent extends BaseControlValueAccessorV2 {
|
|
6219
6213
|
overlay = inject(Overlay);
|
|
6220
|
-
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
|
|
6221
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
6222
|
-
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
|
|
6223
|
-
showTimePickerIcon = input(true, ...(ngDevMode ? [{ debugName: "showTimePickerIcon" }] : []));
|
|
6214
|
+
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : /* istanbul ignore next */ []));
|
|
6215
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
6216
|
+
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : /* istanbul ignore next */ []));
|
|
6217
|
+
showTimePickerIcon = input(true, ...(ngDevMode ? [{ debugName: "showTimePickerIcon" }] : /* istanbul ignore next */ []));
|
|
6224
6218
|
valueChanged = output();
|
|
6225
6219
|
scrollStrategy = this.overlay.scrollStrategies.block();
|
|
6226
|
-
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
6227
|
-
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
6228
|
-
enableApplyActions = signal(false, ...(ngDevMode ? [{ debugName: "enableApplyActions" }] : []));
|
|
6229
|
-
hours = signal(12, ...(ngDevMode ? [{ debugName: "hours" }] : []));
|
|
6230
|
-
minutes = signal(0, ...(ngDevMode ? [{ debugName: "minutes" }] : []));
|
|
6231
|
-
period = signal('AM', ...(ngDevMode ? [{ debugName: "period" }] : []));
|
|
6232
|
-
is24HourFormat = signal(false, ...(ngDevMode ? [{ debugName: "is24HourFormat" }] : []));
|
|
6233
|
-
isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
|
|
6220
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
6221
|
+
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
6222
|
+
enableApplyActions = signal(false, ...(ngDevMode ? [{ debugName: "enableApplyActions" }] : /* istanbul ignore next */ []));
|
|
6223
|
+
hours = signal(12, ...(ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []));
|
|
6224
|
+
minutes = signal(0, ...(ngDevMode ? [{ debugName: "minutes" }] : /* istanbul ignore next */ []));
|
|
6225
|
+
period = signal('AM', ...(ngDevMode ? [{ debugName: "period" }] : /* istanbul ignore next */ []));
|
|
6226
|
+
is24HourFormat = signal(false, ...(ngDevMode ? [{ debugName: "is24HourFormat" }] : /* istanbul ignore next */ []));
|
|
6227
|
+
isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
|
|
6234
6228
|
handleHourUpdate = false;
|
|
6235
6229
|
previousValidHours = 12;
|
|
6236
6230
|
previousValidMinutes = 0;
|
|
@@ -6405,10 +6399,10 @@ class TimePickerComponent extends BaseControlValueAccessorV2 {
|
|
|
6405
6399
|
onClickOutside() {
|
|
6406
6400
|
this.isOpen.set(false);
|
|
6407
6401
|
}
|
|
6408
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6409
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
6402
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6403
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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" }] });
|
|
6410
6404
|
}
|
|
6411
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
6412
6406
|
type: Component,
|
|
6413
6407
|
args: [{ selector: 'app-time-picker', standalone: true, imports: [
|
|
6414
6408
|
NgClass,
|
|
@@ -6627,10 +6621,10 @@ class NglService {
|
|
|
6627
6621
|
getBaseUrl() {
|
|
6628
6622
|
return this.config.baseApiUrl;
|
|
6629
6623
|
}
|
|
6630
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6631
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
6624
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NglService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
6625
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NglService, providedIn: 'root' });
|
|
6632
6626
|
}
|
|
6633
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6627
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NglService, decorators: [{
|
|
6634
6628
|
type: Injectable,
|
|
6635
6629
|
args: [{
|
|
6636
6630
|
providedIn: 'root'
|