@vallift/ngl 21.0.5 → 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 +534 -529
- package/fesm2022/vallift-ngl.mjs.map +1 -1
- package/package.json +5 -4
- package/types/vallift-ngl.d.ts +12 -9
package/fesm2022/vallift-ngl.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, Injectable, signal, input, output, Component, ElementRef, DOCUMENT, Renderer2, EventEmitter, Output, RendererFactory2, HostListener, Directive, computed,
|
|
2
|
+
import { InjectionToken, inject, Injectable, signal, input, output, Component, Input, ElementRef, DOCUMENT, Renderer2, EventEmitter, Output, RendererFactory2, HostListener, Directive, computed, ChangeDetectorRef, model, ViewChild, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, Inject, Pipe, ContentChildren, ChangeDetectionStrategy, effect, viewChild } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common/http';
|
|
4
4
|
import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
|
|
5
5
|
import { retry, throwError, Subject, debounceTime, fromEvent, filter as filter$1, take, of } from 'rxjs';
|
|
@@ -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
|
|
@@ -617,36 +617,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
617
617
|
}], propDecorators: { borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }] } });
|
|
618
618
|
|
|
619
619
|
class AppSvgIconComponent {
|
|
620
|
-
src
|
|
621
|
-
stretch =
|
|
622
|
-
size =
|
|
623
|
-
svgStyle =
|
|
624
|
-
|
|
625
|
-
|
|
620
|
+
src;
|
|
621
|
+
stretch = false;
|
|
622
|
+
size = 20;
|
|
623
|
+
svgStyle = {};
|
|
624
|
+
getStyle() {
|
|
625
|
+
return { ...this.svgStyle, 'width.px': this.size, 'height.px': this.size };
|
|
626
|
+
}
|
|
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"] }] });
|
|
626
629
|
}
|
|
627
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
630
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AppSvgIconComponent, decorators: [{
|
|
628
631
|
type: Component,
|
|
629
632
|
args: [{ selector: 'app-svg-icon', standalone: true, imports: [
|
|
630
633
|
SvgIconComponent
|
|
631
|
-
], template: "<svg-icon [src]=\"src
|
|
632
|
-
}], propDecorators: { src: [{
|
|
634
|
+
], template: "<svg-icon [src]=\"src\" [stretch]=\"stretch\" [svgStyle]=\"getStyle()\">\n</svg-icon>\n" }]
|
|
635
|
+
}], propDecorators: { src: [{
|
|
636
|
+
type: Input
|
|
637
|
+
}], stretch: [{
|
|
638
|
+
type: Input
|
|
639
|
+
}], size: [{
|
|
640
|
+
type: Input
|
|
641
|
+
}], svgStyle: [{
|
|
642
|
+
type: Input
|
|
643
|
+
}] } });
|
|
633
644
|
|
|
634
645
|
class ButtonComponent {
|
|
635
646
|
elementRef = inject(ElementRef);
|
|
636
647
|
document = inject(DOCUMENT);
|
|
637
648
|
renderer = inject(Renderer2);
|
|
638
|
-
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
639
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
640
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
641
|
-
appearance = input('primary', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
642
|
-
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
643
|
-
iconSize = input(18, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
|
|
644
|
-
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
|
|
645
|
-
iconColor = input(null, ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
|
|
646
|
-
buttonColor = input('bg-primary-500', ...(ngDevMode ? [{ debugName: "buttonColor" }] : []));
|
|
647
|
-
outlineColor = input('border-primary-500', ...(ngDevMode ? [{ debugName: "outlineColor" }] : []));
|
|
648
|
-
textButtonColor = input('text-primary-500', ...(ngDevMode ? [{ debugName: "textButtonColor" }] : []));
|
|
649
|
-
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 */ []));
|
|
650
661
|
buttonClick = new EventEmitter();
|
|
651
662
|
formGroupDirective = inject(FormGroupDirective, { optional: true });
|
|
652
663
|
getButtonClass() {
|
|
@@ -719,10 +730,10 @@ class ButtonComponent {
|
|
|
719
730
|
formGroup.markAllAsTouched();
|
|
720
731
|
formGroup.markAsPristine();
|
|
721
732
|
}
|
|
722
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
723
|
-
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"] }] });
|
|
724
735
|
}
|
|
725
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
726
737
|
type: Component,
|
|
727
738
|
args: [{ selector: 'app-button', standalone: true, imports: [
|
|
728
739
|
NgClass,
|
|
@@ -742,10 +753,10 @@ class AlertDialogComponent {
|
|
|
742
753
|
onYesClicked() {
|
|
743
754
|
this.dialogRef.close(true);
|
|
744
755
|
}
|
|
745
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
746
|
-
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"] }] });
|
|
747
758
|
}
|
|
748
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
759
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AlertDialogComponent, decorators: [{
|
|
749
760
|
type: Component,
|
|
750
761
|
args: [{ selector: 'app-alert-dialog', standalone: true, imports: [
|
|
751
762
|
ButtonComponent,
|
|
@@ -955,10 +966,10 @@ class OverlayService {
|
|
|
955
966
|
});
|
|
956
967
|
return dialogRef;
|
|
957
968
|
}
|
|
958
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
959
|
-
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' });
|
|
960
971
|
}
|
|
961
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
972
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: OverlayService, decorators: [{
|
|
962
973
|
type: Injectable,
|
|
963
974
|
args: [{
|
|
964
975
|
providedIn: 'root'
|
|
@@ -1018,10 +1029,10 @@ class UnsavedAwareDirective {
|
|
|
1018
1029
|
$event.returnValue = 'You have unsaved changes! Do you really want to leave?';
|
|
1019
1030
|
}
|
|
1020
1031
|
}
|
|
1021
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1022
|
-
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 });
|
|
1023
1034
|
}
|
|
1024
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UnsavedAwareDirective, decorators: [{
|
|
1025
1036
|
type: Directive,
|
|
1026
1037
|
args: [{
|
|
1027
1038
|
selector: 'form[unSavedAware]'
|
|
@@ -1137,22 +1148,22 @@ var TemplateResolverArrayUtil;
|
|
|
1137
1148
|
})(TemplateResolverArrayUtil || (TemplateResolverArrayUtil = {}));
|
|
1138
1149
|
|
|
1139
1150
|
class NoDataComponent {
|
|
1140
|
-
size = input(250, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1141
|
-
message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
|
|
1142
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1143
|
-
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: [""] });
|
|
1144
1155
|
}
|
|
1145
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NoDataComponent, decorators: [{
|
|
1146
1157
|
type: Component,
|
|
1147
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" }]
|
|
1148
1159
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } });
|
|
1149
1160
|
|
|
1150
1161
|
class NoDataTableComponent {
|
|
1151
|
-
message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
|
|
1152
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1153
|
-
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"] }] });
|
|
1154
1165
|
}
|
|
1155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NoDataTableComponent, decorators: [{
|
|
1156
1167
|
type: Component,
|
|
1157
1168
|
args: [{ selector: 'app-no-data-table', standalone: true, imports: [
|
|
1158
1169
|
NoDataComponent
|
|
@@ -1160,22 +1171,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1160
1171
|
}], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
|
|
1161
1172
|
|
|
1162
1173
|
class ShimmerComponent {
|
|
1163
|
-
type = input('grid', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
1164
|
-
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 */ []));
|
|
1165
1176
|
loop = computed(() => {
|
|
1166
1177
|
return Array(this.count()).fill(1).map((x, i) => i);
|
|
1167
|
-
}, ...(ngDevMode ? [{ debugName: "loop" }] : []));
|
|
1168
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1169
|
-
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: [""] });
|
|
1170
1181
|
}
|
|
1171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ShimmerComponent, decorators: [{
|
|
1172
1183
|
type: Component,
|
|
1173
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" }]
|
|
1174
1185
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }] } });
|
|
1175
1186
|
|
|
1176
1187
|
class PaginationComponent {
|
|
1177
|
-
totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
|
|
1178
|
-
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 */ []));
|
|
1179
1190
|
pageSize = 25; // Default page size
|
|
1180
1191
|
pageChange = output();
|
|
1181
1192
|
currentPage = 1;
|
|
@@ -1219,10 +1230,10 @@ class PaginationComponent {
|
|
|
1219
1230
|
emitPageChange() {
|
|
1220
1231
|
this.pageChange.emit({ pageNumber: this.currentPage, pageSize: this.pageSize });
|
|
1221
1232
|
}
|
|
1222
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1223
|
-
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"] }] });
|
|
1224
1235
|
}
|
|
1225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1226
1237
|
type: Component,
|
|
1227
1238
|
args: [{ selector: 'app-pagination', standalone: true, imports: [
|
|
1228
1239
|
FormsModule,
|
|
@@ -1233,10 +1244,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1233
1244
|
}], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
|
|
1234
1245
|
|
|
1235
1246
|
class BaseTableComponent {
|
|
1236
|
-
pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
1237
|
-
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
|
|
1238
|
-
isHorizontallyScrollable = input(false, ...(ngDevMode ? [{ debugName: "isHorizontallyScrollable" }] : []));
|
|
1239
|
-
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 */ []));
|
|
1240
1251
|
pageChange = output();
|
|
1241
1252
|
ngAfterViewInit() {
|
|
1242
1253
|
this.pageChange.emit({ pageNumber: 1, pageSize: this.pageSize() });
|
|
@@ -1244,10 +1255,10 @@ class BaseTableComponent {
|
|
|
1244
1255
|
onPageChange(event) {
|
|
1245
1256
|
this.pageChange.emit(event);
|
|
1246
1257
|
}
|
|
1247
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1248
|
-
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"] }] });
|
|
1249
1260
|
}
|
|
1250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseTableComponent, decorators: [{
|
|
1251
1262
|
type: Component,
|
|
1252
1263
|
args: [{ selector: 'app-base-table', standalone: true, imports: [
|
|
1253
1264
|
NoDataTableComponent,
|
|
@@ -1391,10 +1402,10 @@ class SortableTableDirective {
|
|
|
1391
1402
|
this.renderer.setStyle(svgIcon, 'fill', 'black');
|
|
1392
1403
|
}
|
|
1393
1404
|
}
|
|
1394
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1395
|
-
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 });
|
|
1396
1407
|
}
|
|
1397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SortableTableDirective, decorators: [{
|
|
1398
1409
|
type: Directive,
|
|
1399
1410
|
args: [{
|
|
1400
1411
|
selector: '[sortableTable]',
|
|
@@ -1446,10 +1457,10 @@ class ResizableColumnDirective {
|
|
|
1446
1457
|
document.removeEventListener('mousemove', this.resizeColumnHandler);
|
|
1447
1458
|
document.removeEventListener('mouseup', this.stopResizeHandler);
|
|
1448
1459
|
}
|
|
1449
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1450
|
-
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 });
|
|
1451
1462
|
}
|
|
1452
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1463
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ResizableColumnDirective, decorators: [{
|
|
1453
1464
|
type: Directive,
|
|
1454
1465
|
args: [{
|
|
1455
1466
|
selector: '[appResizableColumn]',
|
|
@@ -1513,10 +1524,10 @@ class TableResizableColumnsDirective {
|
|
|
1513
1524
|
// Add mousedown listener to the resize handle (div)
|
|
1514
1525
|
this.renderer.listen(resizeDiv, 'mousedown', startResize);
|
|
1515
1526
|
}
|
|
1516
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1517
|
-
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 });
|
|
1518
1529
|
}
|
|
1519
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableResizableColumnsDirective, decorators: [{
|
|
1520
1531
|
type: Directive,
|
|
1521
1532
|
args: [{
|
|
1522
1533
|
selector: '[appTableResizableColumns]',
|
|
@@ -1566,10 +1577,10 @@ class BreadcrumbComponent {
|
|
|
1566
1577
|
navigate(route) {
|
|
1567
1578
|
this.router.navigate([route]);
|
|
1568
1579
|
}
|
|
1569
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1570
|
-
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"] }] });
|
|
1571
1582
|
}
|
|
1572
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1583
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
1573
1584
|
type: Component,
|
|
1574
1585
|
args: [{ selector: 'app-breadcrumb', standalone: true, imports: [
|
|
1575
1586
|
NgClass
|
|
@@ -1577,10 +1588,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1577
1588
|
}] });
|
|
1578
1589
|
|
|
1579
1590
|
class CloseButtonComponent {
|
|
1580
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1581
|
-
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: [""] });
|
|
1582
1593
|
}
|
|
1583
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1594
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CloseButtonComponent, decorators: [{
|
|
1584
1595
|
type: Component,
|
|
1585
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" }]
|
|
1586
1597
|
}] });
|
|
@@ -1944,10 +1955,10 @@ class ColorConverterService {
|
|
|
1944
1955
|
const rgbHex = cleanHex.length === 8 ? cleanHex.slice(0, 6) : cleanHex;
|
|
1945
1956
|
return `#${rgbHex.toUpperCase()}`;
|
|
1946
1957
|
}
|
|
1947
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1948
|
-
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' });
|
|
1949
1960
|
}
|
|
1950
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1961
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ColorConverterService, decorators: [{
|
|
1951
1962
|
type: Injectable,
|
|
1952
1963
|
args: [{
|
|
1953
1964
|
providedIn: 'root'
|
|
@@ -2043,10 +2054,10 @@ class ColorPickerSliderDirective {
|
|
|
2043
2054
|
this.valueChanged.emit({ x: x, y: y, v: x / width, rgX: this.rgX });
|
|
2044
2055
|
}
|
|
2045
2056
|
}
|
|
2046
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2047
|
-
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 });
|
|
2048
2059
|
}
|
|
2049
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2060
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ColorPickerSliderDirective, decorators: [{
|
|
2050
2061
|
type: Directive,
|
|
2051
2062
|
args: [{
|
|
2052
2063
|
selector: '[colorPickerSlider]',
|
|
@@ -2071,8 +2082,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2071
2082
|
}] } });
|
|
2072
2083
|
|
|
2073
2084
|
class ColorPickerComponent extends BaseControlValueAccessorV3 {
|
|
2074
|
-
hexColor = input('#00FF00F8', ...(ngDevMode ? [{ debugName: "hexColor" }] : []));
|
|
2075
|
-
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 */ []));
|
|
2076
2087
|
additionalColors = input([
|
|
2077
2088
|
// Gray shades
|
|
2078
2089
|
'#FFFFFF', // White
|
|
@@ -2119,38 +2130,38 @@ class ColorPickerComponent extends BaseControlValueAccessorV3 {
|
|
|
2119
2130
|
'#D0C9FF', // Lavender
|
|
2120
2131
|
'#FFB7B2', // Blush pink
|
|
2121
2132
|
'#F1C0E8', // Light magenta
|
|
2122
|
-
], ...(ngDevMode ? [{ debugName: "additionalColors" }] : []));
|
|
2123
|
-
enableAlpha = input(true, ...(ngDevMode ? [{ debugName: "enableAlpha" }] : []));
|
|
2133
|
+
], ...(ngDevMode ? [{ debugName: "additionalColors" }] : /* istanbul ignore next */ []));
|
|
2134
|
+
enableAlpha = input(true, ...(ngDevMode ? [{ debugName: "enableAlpha" }] : /* istanbul ignore next */ []));
|
|
2124
2135
|
controls = "default";
|
|
2125
2136
|
colorChanged = new EventEmitter(false);
|
|
2126
2137
|
onAlphaChange = new EventEmitter(false);
|
|
2127
2138
|
closeColorPicker = new EventEmitter();
|
|
2128
2139
|
color = new Hsva(0, 1, 1, 1);
|
|
2129
|
-
COLOR_PICKER_HEIGHT = signal(140, ...(ngDevMode ? [{ debugName: "COLOR_PICKER_HEIGHT" }] : []));
|
|
2130
|
-
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 */ []));
|
|
2131
2142
|
converterService = inject(ColorConverterService);
|
|
2132
2143
|
cdr = inject(ChangeDetectorRef);
|
|
2133
|
-
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 */ []));
|
|
2134
2145
|
outputColor;
|
|
2135
|
-
selectedColor = signal("#000000", ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
|
|
2136
|
-
sliderDimMax = signal(new SliderDimension(0, 1, 1, 1), ...(ngDevMode ? [{ debugName: "sliderDimMax" }] : []));
|
|
2137
|
-
slider = signal(new SliderPosition(0, 1, 1, 1), ...(ngDevMode ? [{ debugName: "slider" }] : []));
|
|
2138
|
-
hueSliderColor = signal(null, ...(ngDevMode ? [{ debugName: "hueSliderColor" }] : []));
|
|
2139
|
-
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 */ []));
|
|
2140
2151
|
hueSlider;
|
|
2141
2152
|
alphaSlider;
|
|
2142
2153
|
height = computed(() => {
|
|
2143
2154
|
return `${this.COLOR_PICKER_HEIGHT()}px`;
|
|
2144
|
-
}, ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
2155
|
+
}, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
2145
2156
|
width = computed(() => {
|
|
2146
2157
|
return `${this.COLOR_PICKER_WIDTH()}px`;
|
|
2147
|
-
}, ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
2158
|
+
}, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
2148
2159
|
// height = signal(`${this.COLOR_PICKER_HEIGHT()}px`);
|
|
2149
2160
|
// width = signal(`${this.COLOR_PICKER_WIDTH()}px`);
|
|
2150
|
-
isTooltip = signal(false, ...(ngDevMode ? [{ debugName: "isTooltip" }] : []));
|
|
2161
|
+
isTooltip = signal(false, ...(ngDevMode ? [{ debugName: "isTooltip" }] : /* istanbul ignore next */ []));
|
|
2151
2162
|
format = ColorFormats.HEX;
|
|
2152
|
-
hexColorValue = model('', ...(ngDevMode ? [{ debugName: "hexColorValue" }] : []));
|
|
2153
|
-
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 */ []));
|
|
2154
2165
|
click(event) {
|
|
2155
2166
|
if (this.isOutside(event)) {
|
|
2156
2167
|
// this.emitClose('cancel');
|
|
@@ -2304,10 +2315,10 @@ class ColorPickerComponent extends BaseControlValueAccessorV3 {
|
|
|
2304
2315
|
onColorSelected(color) {
|
|
2305
2316
|
this.setHexColor(color);
|
|
2306
2317
|
}
|
|
2307
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2308
|
-
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"] }] });
|
|
2309
2320
|
}
|
|
2310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
2311
2322
|
type: Component,
|
|
2312
2323
|
args: [{ selector: 'app-color-picker', standalone: true, imports: [
|
|
2313
2324
|
ColorPickerSliderDirective,
|
|
@@ -2434,10 +2445,10 @@ class ColorPickerDirective {
|
|
|
2434
2445
|
ngOnDestroy() {
|
|
2435
2446
|
this.closeColorPicker();
|
|
2436
2447
|
}
|
|
2437
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2438
|
-
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 });
|
|
2439
2450
|
}
|
|
2440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ColorPickerDirective, decorators: [{
|
|
2441
2452
|
type: Directive,
|
|
2442
2453
|
args: [{
|
|
2443
2454
|
selector: '[appColorPicker]',
|
|
@@ -2457,10 +2468,10 @@ class OverlayContextMenuComponent {
|
|
|
2457
2468
|
this.dialogRef.close(action.actionKey);
|
|
2458
2469
|
$event.stopPropagation();
|
|
2459
2470
|
}
|
|
2460
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2461
|
-
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"] }] });
|
|
2462
2473
|
}
|
|
2463
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: OverlayContextMenuComponent, decorators: [{
|
|
2464
2475
|
type: Component,
|
|
2465
2476
|
args: [{ selector: 'app-overlay-context-menu', imports: [
|
|
2466
2477
|
AppSvgIconComponent,
|
|
@@ -2471,8 +2482,8 @@ class ContextMenuButtonComponent {
|
|
|
2471
2482
|
trigger;
|
|
2472
2483
|
overlay = inject(Overlay);
|
|
2473
2484
|
dialog = inject(Dialog);
|
|
2474
|
-
actions = input(...(ngDevMode ? [undefined, { debugName: "actions" }] : []));
|
|
2475
|
-
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 */ []));
|
|
2476
2487
|
onActionClicked = output();
|
|
2477
2488
|
basePanelClass = ['bg-white', 'shadow-2'];
|
|
2478
2489
|
dialogRef;
|
|
@@ -2555,10 +2566,10 @@ class ContextMenuButtonComponent {
|
|
|
2555
2566
|
this.onActionClicked.emit(actionKey);
|
|
2556
2567
|
});
|
|
2557
2568
|
}
|
|
2558
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2559
|
-
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: [""] });
|
|
2560
2571
|
}
|
|
2561
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2572
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ContextMenuButtonComponent, decorators: [{
|
|
2562
2573
|
type: Component,
|
|
2563
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" }]
|
|
2564
2575
|
}], propDecorators: { trigger: [{
|
|
@@ -2567,10 +2578,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2567
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"] }] } });
|
|
2568
2579
|
|
|
2569
2580
|
class ContextMenuIconComponent {
|
|
2570
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2571
|
-
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: [""] });
|
|
2572
2583
|
}
|
|
2573
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ContextMenuIconComponent, decorators: [{
|
|
2574
2585
|
type: Component,
|
|
2575
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" }]
|
|
2576
2587
|
}] });
|
|
@@ -2581,10 +2592,10 @@ class TableCustomComponent {
|
|
|
2581
2592
|
rowPosition;
|
|
2582
2593
|
isLastRow = false;
|
|
2583
2594
|
actionPerformed = output();
|
|
2584
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2585
|
-
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: [""] });
|
|
2586
2597
|
}
|
|
2587
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableCustomComponent, decorators: [{
|
|
2588
2599
|
type: Component,
|
|
2589
2600
|
args: [{ selector: 'lib-table-custom-component', imports: [], template: "" }]
|
|
2590
2601
|
}], propDecorators: { rowData: [{
|
|
@@ -2598,16 +2609,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2598
2609
|
}], actionPerformed: [{ type: i0.Output, args: ["actionPerformed"] }] } });
|
|
2599
2610
|
|
|
2600
2611
|
class StatusBadgeComponent {
|
|
2601
|
-
status = input.required(...(ngDevMode ? [{ debugName: "status" }] : []));
|
|
2602
|
-
backgroundColorClass = input.required(...(ngDevMode ? [{ debugName: "backgroundColorClass" }] : []));
|
|
2603
|
-
indicatorColor = input(...(ngDevMode ? [undefined, { debugName: "indicatorColor" }] : []));
|
|
2604
|
-
textColorClass = input.required(...(ngDevMode ? [{ debugName: "textColorClass" }] : []));
|
|
2605
|
-
borderColorClass = input.required(...(ngDevMode ? [{ debugName: "borderColorClass" }] : []));
|
|
2606
|
-
isUpperCase = input(false, ...(ngDevMode ? [{ debugName: "isUpperCase" }] : []));
|
|
2607
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2608
|
-
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"] }] });
|
|
2609
2620
|
}
|
|
2610
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2621
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StatusBadgeComponent, decorators: [{
|
|
2611
2622
|
type: Component,
|
|
2612
2623
|
args: [{ selector: 'app-status-badge', imports: [
|
|
2613
2624
|
NgClass
|
|
@@ -2615,8 +2626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2615
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 }] }] } });
|
|
2616
2627
|
|
|
2617
2628
|
class CheckboxComponent extends BaseControlValueAccessorV3 {
|
|
2618
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
2619
|
-
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
2629
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
2630
|
+
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
2620
2631
|
ngOnInit() {
|
|
2621
2632
|
this.id.set(this.getId());
|
|
2622
2633
|
}
|
|
@@ -2642,10 +2653,10 @@ class CheckboxComponent extends BaseControlValueAccessorV3 {
|
|
|
2642
2653
|
this.onCheckboxSelected($event, true);
|
|
2643
2654
|
}
|
|
2644
2655
|
}
|
|
2645
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2646
|
-
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"] }] });
|
|
2647
2658
|
}
|
|
2648
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2649
2660
|
type: Component,
|
|
2650
2661
|
args: [{ selector: 'app-checkbox', standalone: true, imports: [
|
|
2651
2662
|
ReactiveFormsModule,
|
|
@@ -2688,10 +2699,10 @@ class HumanizeFormMessagesPipe {
|
|
|
2688
2699
|
: 'Invalid field';
|
|
2689
2700
|
return message;
|
|
2690
2701
|
}
|
|
2691
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2692
|
-
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" });
|
|
2693
2704
|
}
|
|
2694
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2705
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HumanizeFormMessagesPipe, decorators: [{
|
|
2695
2706
|
type: Pipe,
|
|
2696
2707
|
args: [{ standalone: true, name: 'humanizeFormMessages' }]
|
|
2697
2708
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -2700,14 +2711,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2700
2711
|
}] }] });
|
|
2701
2712
|
|
|
2702
2713
|
class BaseInputComponent {
|
|
2703
|
-
title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
2704
|
-
isRequiredField = input(false, ...(ngDevMode ? [{ debugName: "isRequiredField" }] : []));
|
|
2705
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
2706
|
-
inputType = input('text', ...(ngDevMode ? [{ debugName: "inputType" }] : []));
|
|
2707
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2708
|
-
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"] }] });
|
|
2709
2720
|
}
|
|
2710
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2721
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseInputComponent, decorators: [{
|
|
2711
2722
|
type: Component,
|
|
2712
2723
|
args: [{ selector: 'app-base-input', standalone: true, imports: [
|
|
2713
2724
|
NgClass
|
|
@@ -2715,24 +2726,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2715
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 }] }] } });
|
|
2716
2727
|
|
|
2717
2728
|
class TextInputComponent extends BaseControlValueAccessor {
|
|
2718
|
-
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
2719
|
-
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
2720
|
-
viewType = input('text', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
|
|
2721
|
-
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
2722
|
-
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
|
|
2723
|
-
actionIcon = input(...(ngDevMode ? [undefined, { debugName: "actionIcon" }] : []));
|
|
2724
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
2725
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
2726
|
-
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
2727
|
-
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
2728
|
-
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
|
|
2729
|
-
mask = input(null, ...(ngDevMode ? [{ debugName: "mask" }] : []));
|
|
2730
|
-
debounceSearchEnabled = input(true, ...(ngDevMode ? [{ debugName: "debounceSearchEnabled" }] : []));
|
|
2731
|
-
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 */ []));
|
|
2732
2743
|
inputRef;
|
|
2733
2744
|
changeValue = output();
|
|
2734
2745
|
actionIconClicked = output();
|
|
2735
|
-
isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
|
|
2746
|
+
isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
|
|
2736
2747
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
2737
2748
|
searchSubject = new Subject();
|
|
2738
2749
|
constructor() {
|
|
@@ -2804,10 +2815,10 @@ class TextInputComponent extends BaseControlValueAccessor {
|
|
|
2804
2815
|
this.onTouched();
|
|
2805
2816
|
this.isFocused.set(false);
|
|
2806
2817
|
}
|
|
2807
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2808
|
-
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" }] });
|
|
2809
2820
|
}
|
|
2810
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2821
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
2811
2822
|
type: Component,
|
|
2812
2823
|
args: [{ selector: 'app-text-input', standalone: true, imports: [
|
|
2813
2824
|
NgClass,
|
|
@@ -2824,10 +2835,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2824
2835
|
}], changeValue: [{ type: i0.Output, args: ["changeValue"] }], actionIconClicked: [{ type: i0.Output, args: ["actionIconClicked"] }] } });
|
|
2825
2836
|
|
|
2826
2837
|
class TextButtonSmall {
|
|
2827
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2828
|
-
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: [""] });
|
|
2829
2840
|
}
|
|
2830
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextButtonSmall, decorators: [{
|
|
2831
2842
|
type: Component,
|
|
2832
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" }]
|
|
2833
2844
|
}] });
|
|
@@ -2835,9 +2846,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2835
2846
|
class DynamicRendererComponent {
|
|
2836
2847
|
component;
|
|
2837
2848
|
rowData;
|
|
2838
|
-
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
|
|
2839
|
-
rowPosition = input(...(ngDevMode ? [undefined, { debugName: "rowPosition" }] : []));
|
|
2840
|
-
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 */ []));
|
|
2841
2852
|
actionPerformed = output();
|
|
2842
2853
|
container;
|
|
2843
2854
|
componentRef;
|
|
@@ -2870,10 +2881,10 @@ class DynamicRendererComponent {
|
|
|
2870
2881
|
ngOnDestroy() {
|
|
2871
2882
|
this.actionSubscription?.unsubscribe();
|
|
2872
2883
|
}
|
|
2873
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2874
|
-
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: [""] });
|
|
2875
2886
|
}
|
|
2876
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicRendererComponent, decorators: [{
|
|
2877
2888
|
type: Component,
|
|
2878
2889
|
args: [{ selector: 'app-dynamic-renderer', imports: [], template: "<ng-container #container></ng-container>\n" }]
|
|
2879
2890
|
}], propDecorators: { component: [{
|
|
@@ -2887,17 +2898,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2887
2898
|
|
|
2888
2899
|
class DataTableComponent extends BaseControlValueAccessorV3 {
|
|
2889
2900
|
headerComponents;
|
|
2890
|
-
columnDefs = input.required(...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
|
|
2891
|
-
state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
2892
|
-
pageSize = input(50, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
2893
|
-
enableHorizontallyScrollable = input(false, ...(ngDevMode ? [{ debugName: "enableHorizontallyScrollable" }] : []));
|
|
2894
|
-
enableResizableColumns = input(false, ...(ngDevMode ? [{ debugName: "enableResizableColumns" }] : []));
|
|
2895
|
-
enableClickableRows = input(false, ...(ngDevMode ? [{ debugName: "enableClickableRows" }] : []));
|
|
2896
|
-
expandableComponent = input(...(ngDevMode ? [undefined, { debugName: "expandableComponent" }] : []));
|
|
2897
|
-
enableColumnsConfig = input(false, ...(ngDevMode ? [{ debugName: "enableColumnsConfig" }] : []));
|
|
2898
|
-
filterComponent = input(...(ngDevMode ? [undefined, { debugName: "filterComponent" }] : []));
|
|
2899
|
-
enableSearch = input(true, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
|
|
2900
|
-
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 */ []));
|
|
2901
2912
|
pageChange = output();
|
|
2902
2913
|
sortChanged = output();
|
|
2903
2914
|
tableStateChanged = output();
|
|
@@ -3076,7 +3087,7 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
|
|
|
3076
3087
|
};
|
|
3077
3088
|
this.onActionPerformed.emit(tableActionEvent);
|
|
3078
3089
|
}
|
|
3079
|
-
expandedRowIndex = signal(null, ...(ngDevMode ? [{ debugName: "expandedRowIndex" }] : []));
|
|
3090
|
+
expandedRowIndex = signal(null, ...(ngDevMode ? [{ debugName: "expandedRowIndex" }] : /* istanbul ignore next */ []));
|
|
3080
3091
|
onRowExpandedClicked(i) {
|
|
3081
3092
|
if (this.expandedRowIndex() == i) {
|
|
3082
3093
|
this.expandedRowIndex.set(null);
|
|
@@ -3094,10 +3105,10 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
|
|
|
3094
3105
|
onRowActionPerformed($event) {
|
|
3095
3106
|
this.onActionPerformed.emit($event);
|
|
3096
3107
|
}
|
|
3097
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3098
|
-
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" }] });
|
|
3099
3110
|
}
|
|
3100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
3101
3112
|
type: Component,
|
|
3102
3113
|
args: [{ selector: 'app-data-table', standalone: true, imports: [
|
|
3103
3114
|
PaginationComponent,
|
|
@@ -3127,10 +3138,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3127
3138
|
|
|
3128
3139
|
class EnvBannerComponent {
|
|
3129
3140
|
config = inject(NGL_CONFIG);
|
|
3130
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3131
|
-
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"] });
|
|
3132
3143
|
}
|
|
3133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EnvBannerComponent, decorators: [{
|
|
3134
3145
|
type: Component,
|
|
3135
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"] }]
|
|
3136
3147
|
}] });
|
|
@@ -3162,10 +3173,10 @@ class OpenFloatingMenuDirective {
|
|
|
3162
3173
|
});
|
|
3163
3174
|
}
|
|
3164
3175
|
}
|
|
3165
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3166
|
-
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 });
|
|
3167
3178
|
}
|
|
3168
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3179
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: OpenFloatingMenuDirective, decorators: [{
|
|
3169
3180
|
type: Directive,
|
|
3170
3181
|
args: [{
|
|
3171
3182
|
selector: '[libOpenFloatingMenu]',
|
|
@@ -3186,12 +3197,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3186
3197
|
}] } });
|
|
3187
3198
|
|
|
3188
3199
|
class ListviewComponent {
|
|
3189
|
-
state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
3190
|
-
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
|
|
3191
|
-
pageSize = input(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
3192
|
-
component = input.required(...(ngDevMode ? [{ debugName: "component" }] : []));
|
|
3193
|
-
enableSearch = input(true, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
|
|
3194
|
-
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 */ []));
|
|
3195
3206
|
onStateChanged = output();
|
|
3196
3207
|
onActionPerformed = output();
|
|
3197
3208
|
searchText = '';
|
|
@@ -3232,10 +3243,10 @@ class ListviewComponent {
|
|
|
3232
3243
|
onRowAction($event) {
|
|
3233
3244
|
this.onActionPerformed.emit($event);
|
|
3234
3245
|
}
|
|
3235
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3236
|
-
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"] }] });
|
|
3237
3248
|
}
|
|
3238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ListviewComponent, decorators: [{
|
|
3239
3250
|
type: Component,
|
|
3240
3251
|
args: [{ selector: 'app-listview', imports: [
|
|
3241
3252
|
InfiniteScrollDirective,
|
|
@@ -3247,17 +3258,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3247
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"] }] } });
|
|
3248
3259
|
|
|
3249
3260
|
class LoaderService {
|
|
3250
|
-
loadingCount = signal(0, ...(ngDevMode ? [{ debugName: "loadingCount" }] : []));
|
|
3261
|
+
loadingCount = signal(0, ...(ngDevMode ? [{ debugName: "loadingCount" }] : /* istanbul ignore next */ []));
|
|
3251
3262
|
show() {
|
|
3252
3263
|
this.loadingCount.update((current) => current + 1);
|
|
3253
3264
|
}
|
|
3254
3265
|
hide() {
|
|
3255
3266
|
this.loadingCount.update((current) => current - 1);
|
|
3256
3267
|
}
|
|
3257
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3258
|
-
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' });
|
|
3259
3270
|
}
|
|
3260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LoaderService, decorators: [{
|
|
3261
3272
|
type: Injectable,
|
|
3262
3273
|
args: [{
|
|
3263
3274
|
providedIn: 'root'
|
|
@@ -3266,10 +3277,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3266
3277
|
|
|
3267
3278
|
class LoaderComponent {
|
|
3268
3279
|
loaderService = inject(LoaderService);
|
|
3269
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3270
|
-
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"] }] });
|
|
3271
3282
|
}
|
|
3272
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
3273
3284
|
type: Component,
|
|
3274
3285
|
args: [{ selector: 'app-loader', standalone: true, imports: [
|
|
3275
3286
|
SpinnerComponent
|
|
@@ -3277,12 +3288,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3277
3288
|
}] });
|
|
3278
3289
|
|
|
3279
3290
|
class NetworkImageComponent {
|
|
3280
|
-
placeholderImage = input(...(ngDevMode ? [undefined, { debugName: "placeholderImage" }] : []));
|
|
3281
|
-
imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : []));
|
|
3282
|
-
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 */ []));
|
|
3283
3294
|
placeHolderUrl = computed(() => {
|
|
3284
3295
|
return this.placeholderImage() ?? 'assets/images/background/restaurant-placeholder.png';
|
|
3285
|
-
}, ...(ngDevMode ? [{ debugName: "placeHolderUrl" }] : []));
|
|
3296
|
+
}, ...(ngDevMode ? [{ debugName: "placeHolderUrl" }] : /* istanbul ignore next */ []));
|
|
3286
3297
|
sourceUrl = computed(() => {
|
|
3287
3298
|
if (this.imageUrl()) {
|
|
3288
3299
|
return this.imageUrl();
|
|
@@ -3290,14 +3301,14 @@ class NetworkImageComponent {
|
|
|
3290
3301
|
else {
|
|
3291
3302
|
return this.placeholderImage() ?? 'assets/images/background/restaurant-placeholder.png';
|
|
3292
3303
|
}
|
|
3293
|
-
}, ...(ngDevMode ? [{ debugName: "sourceUrl" }] : []));
|
|
3304
|
+
}, ...(ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []));
|
|
3294
3305
|
handleImageError() {
|
|
3295
3306
|
this.isError.update((c) => true);
|
|
3296
3307
|
}
|
|
3297
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3298
|
-
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: [""] });
|
|
3299
3310
|
}
|
|
3300
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NetworkImageComponent, decorators: [{
|
|
3301
3312
|
type: Component,
|
|
3302
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" }]
|
|
3303
3314
|
}], propDecorators: { placeholderImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderImage", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }] } });
|
|
@@ -3306,10 +3317,10 @@ class BaseOverlayComponent {
|
|
|
3306
3317
|
container;
|
|
3307
3318
|
actionsDiv;
|
|
3308
3319
|
actionsContainerDiv;
|
|
3309
|
-
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
3310
|
-
showTitle = input(true, ...(ngDevMode ? [{ debugName: "showTitle" }] : []));
|
|
3311
|
-
showBackButton = input(false, ...(ngDevMode ? [{ debugName: "showBackButton" }] : []));
|
|
3312
|
-
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 */ []));
|
|
3313
3324
|
onBackClicked = output();
|
|
3314
3325
|
renderer = inject(Renderer2);
|
|
3315
3326
|
dialogRef = inject((DialogRef));
|
|
@@ -3329,10 +3340,10 @@ class BaseOverlayComponent {
|
|
|
3329
3340
|
onCloseClicked() {
|
|
3330
3341
|
this.dialogRef.close();
|
|
3331
3342
|
}
|
|
3332
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3333
|
-
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"] }] });
|
|
3334
3345
|
}
|
|
3335
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3346
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BaseOverlayComponent, decorators: [{
|
|
3336
3347
|
type: Component,
|
|
3337
3348
|
args: [{ selector: 'app-base-overlay', imports: [
|
|
3338
3349
|
NgClass
|
|
@@ -3349,8 +3360,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3349
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"] }] } });
|
|
3350
3361
|
|
|
3351
3362
|
class OverlayWizardUtils {
|
|
3352
|
-
uiState = signal([], ...(ngDevMode ? [{ debugName: "uiState" }] : []));
|
|
3353
|
-
wizard = signal([], ...(ngDevMode ? [{ debugName: "wizard" }] : []));
|
|
3363
|
+
uiState = signal([], ...(ngDevMode ? [{ debugName: "uiState" }] : /* istanbul ignore next */ []));
|
|
3364
|
+
wizard = signal([], ...(ngDevMode ? [{ debugName: "wizard" }] : /* istanbul ignore next */ []));
|
|
3354
3365
|
showBackButton() {
|
|
3355
3366
|
return this.uiState().length > 1;
|
|
3356
3367
|
}
|
|
@@ -3400,7 +3411,7 @@ class OverlayWizardUtils {
|
|
|
3400
3411
|
class ResponsiveHelperComponent {
|
|
3401
3412
|
config = inject(NGL_CONFIG);
|
|
3402
3413
|
document = inject(DOCUMENT);
|
|
3403
|
-
screenWidth = signal(0, ...(ngDevMode ? [{ debugName: "screenWidth" }] : []));
|
|
3414
|
+
screenWidth = signal(0, ...(ngDevMode ? [{ debugName: "screenWidth" }] : /* istanbul ignore next */ []));
|
|
3404
3415
|
constructor() {
|
|
3405
3416
|
this.screenWidth.set(this.document.documentElement.clientWidth);
|
|
3406
3417
|
}
|
|
@@ -3410,10 +3421,10 @@ class ResponsiveHelperComponent {
|
|
|
3410
3421
|
onResize(event) {
|
|
3411
3422
|
this.screenWidth.set(this.document.documentElement.clientWidth);
|
|
3412
3423
|
}
|
|
3413
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3414
|
-
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: [""] });
|
|
3415
3426
|
}
|
|
3416
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3427
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ResponsiveHelperComponent, decorators: [{
|
|
3417
3428
|
type: Component,
|
|
3418
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" }]
|
|
3419
3430
|
}], ctorParameters: () => [], propDecorators: { onResize: [{
|
|
@@ -3425,7 +3436,7 @@ class SvgUrlIconComponent {
|
|
|
3425
3436
|
http;
|
|
3426
3437
|
sanitizer;
|
|
3427
3438
|
svgIcon = null;
|
|
3428
|
-
svgUrl = input.required(...(ngDevMode ? [{ debugName: "svgUrl" }] : []));
|
|
3439
|
+
svgUrl = input.required(...(ngDevMode ? [{ debugName: "svgUrl" }] : /* istanbul ignore next */ []));
|
|
3429
3440
|
constructor(http, sanitizer) {
|
|
3430
3441
|
this.http = http;
|
|
3431
3442
|
this.sanitizer = sanitizer;
|
|
@@ -3437,10 +3448,10 @@ class SvgUrlIconComponent {
|
|
|
3437
3448
|
console.error('Failed to load SVG:', error);
|
|
3438
3449
|
});
|
|
3439
3450
|
}
|
|
3440
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3441
|
-
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: [""] });
|
|
3442
3453
|
}
|
|
3443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3454
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SvgUrlIconComponent, decorators: [{
|
|
3444
3455
|
type: Component,
|
|
3445
3456
|
args: [{ selector: 'app-svg-url-icon', standalone: true, imports: [], template: "<div [innerHTML]=\"svgIcon\"></div>\n" }]
|
|
3446
3457
|
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2.DomSanitizer }], propDecorators: { svgUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgUrl", required: true }] }] } });
|
|
@@ -3516,10 +3527,10 @@ class ToastService {
|
|
|
3516
3527
|
duration: duration
|
|
3517
3528
|
});
|
|
3518
3529
|
}
|
|
3519
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3520
|
-
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' });
|
|
3521
3532
|
}
|
|
3522
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3533
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastService, decorators: [{
|
|
3523
3534
|
type: Injectable,
|
|
3524
3535
|
args: [{
|
|
3525
3536
|
providedIn: 'root'
|
|
@@ -3531,10 +3542,10 @@ class ToastCloseButtonComponent {
|
|
|
3531
3542
|
onCloseClick() {
|
|
3532
3543
|
this.closeEvent.emit();
|
|
3533
3544
|
}
|
|
3534
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3535
|
-
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: [""] });
|
|
3536
3547
|
}
|
|
3537
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3548
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastCloseButtonComponent, decorators: [{
|
|
3538
3549
|
type: Component,
|
|
3539
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" }]
|
|
3540
3551
|
}], propDecorators: { closeEvent: [{
|
|
@@ -3547,7 +3558,7 @@ class ToastComponent {
|
|
|
3547
3558
|
title;
|
|
3548
3559
|
message;
|
|
3549
3560
|
duration;
|
|
3550
|
-
themeType = input('light', ...(ngDevMode ? [{ debugName: "themeType" }] : []));
|
|
3561
|
+
themeType = input('light', ...(ngDevMode ? [{ debugName: "themeType" }] : /* istanbul ignore next */ []));
|
|
3551
3562
|
themeClass = computed(() => {
|
|
3552
3563
|
let classes = '';
|
|
3553
3564
|
switch (this.themeType()) {
|
|
@@ -3559,7 +3570,7 @@ class ToastComponent {
|
|
|
3559
3570
|
break;
|
|
3560
3571
|
}
|
|
3561
3572
|
return classes;
|
|
3562
|
-
}, ...(ngDevMode ? [{ debugName: "themeClass" }] : []));
|
|
3573
|
+
}, ...(ngDevMode ? [{ debugName: "themeClass" }] : /* istanbul ignore next */ []));
|
|
3563
3574
|
ToastType = ToastType;
|
|
3564
3575
|
ngOnInit() {
|
|
3565
3576
|
this.show();
|
|
@@ -3574,10 +3585,10 @@ class ToastComponent {
|
|
|
3574
3585
|
}
|
|
3575
3586
|
ngOnDestroy() {
|
|
3576
3587
|
}
|
|
3577
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3578
|
-
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"] }] });
|
|
3579
3590
|
}
|
|
3580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastComponent, decorators: [{
|
|
3581
3592
|
type: Component,
|
|
3582
3593
|
args: [{ selector: 'app-toast', standalone: true, imports: [
|
|
3583
3594
|
ToastCloseButtonComponent,
|
|
@@ -3598,7 +3609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3598
3609
|
class ToasterComponent {
|
|
3599
3610
|
toastService;
|
|
3600
3611
|
cdr;
|
|
3601
|
-
themeType = input('light', ...(ngDevMode ? [{ debugName: "themeType" }] : []));
|
|
3612
|
+
themeType = input('light', ...(ngDevMode ? [{ debugName: "themeType" }] : /* istanbul ignore next */ []));
|
|
3602
3613
|
currentToasts = [];
|
|
3603
3614
|
constructor(toastService, cdr) {
|
|
3604
3615
|
this.toastService = toastService;
|
|
@@ -3618,10 +3629,10 @@ class ToasterComponent {
|
|
|
3618
3629
|
this.currentToasts.splice(index, 1);
|
|
3619
3630
|
this.cdr.detectChanges();
|
|
3620
3631
|
}
|
|
3621
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3622
|
-
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 });
|
|
3623
3634
|
}
|
|
3624
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToasterComponent, decorators: [{
|
|
3625
3636
|
type: Component,
|
|
3626
3637
|
args: [{ selector: 'app-toaster', standalone: true, imports: [
|
|
3627
3638
|
ToastComponent
|
|
@@ -3631,10 +3642,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3631
3642
|
class TooltipComponent {
|
|
3632
3643
|
text = '';
|
|
3633
3644
|
tooltipClass = [];
|
|
3634
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3635
|
-
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"] }] });
|
|
3636
3647
|
}
|
|
3637
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3648
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
3638
3649
|
type: Component,
|
|
3639
3650
|
args: [{ selector: 'lib-tooltip', imports: [
|
|
3640
3651
|
NgClass
|
|
@@ -3653,22 +3664,16 @@ class TooltipDirective {
|
|
|
3653
3664
|
longPressTimeout = null;
|
|
3654
3665
|
// tooltipText = input<string>('');
|
|
3655
3666
|
libTooltip = '';
|
|
3656
|
-
tooltipPosition = input('bottom', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
|
|
3657
|
-
tooltipClass = input({ alias: 'tooltipClass' }, ...(ngDevMode ? [{ debugName: "tooltipClass" }] : []));
|
|
3658
|
-
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 */ []));
|
|
3659
3669
|
constructor() {
|
|
3660
3670
|
effect(() => {
|
|
3661
3671
|
this.hideTooltip();
|
|
3662
3672
|
});
|
|
3663
3673
|
}
|
|
3664
3674
|
showTooltip() {
|
|
3665
|
-
if (this.
|
|
3675
|
+
if (this.overlayRef?.hasAttached())
|
|
3666
3676
|
return;
|
|
3667
|
-
}
|
|
3668
|
-
if (this.overlayRef?.hasAttached()) {
|
|
3669
|
-
return;
|
|
3670
|
-
}
|
|
3671
|
-
;
|
|
3672
3677
|
const position = this.getPosition(this.tooltipPosition());
|
|
3673
3678
|
const positionStrategy = this.positionBuilder
|
|
3674
3679
|
.flexibleConnectedTo(this.elementRef)
|
|
@@ -3754,10 +3759,10 @@ class TooltipDirective {
|
|
|
3754
3759
|
}
|
|
3755
3760
|
this.hideTooltip();
|
|
3756
3761
|
}
|
|
3757
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3758
|
-
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 });
|
|
3759
3764
|
}
|
|
3760
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3765
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
3761
3766
|
type: Directive,
|
|
3762
3767
|
args: [{
|
|
3763
3768
|
selector: '[libTooltip]',
|
|
@@ -3765,7 +3770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3765
3770
|
}]
|
|
3766
3771
|
}], ctorParameters: () => [], propDecorators: { libTooltip: [{
|
|
3767
3772
|
type: Input
|
|
3768
|
-
}], 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: [{
|
|
3769
3774
|
type: HostListener,
|
|
3770
3775
|
args: ['mouseenter']
|
|
3771
3776
|
}], onMouseLeave: [{
|
|
@@ -3803,10 +3808,10 @@ class ClickOutsideDirective {
|
|
|
3803
3808
|
let isInside = elementToCheck === this.element.nativeElement || this.element.nativeElement.contains(elementToCheck);
|
|
3804
3809
|
return isInside;
|
|
3805
3810
|
}
|
|
3806
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3807
|
-
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 });
|
|
3808
3813
|
}
|
|
3809
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3814
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
3810
3815
|
type: Directive,
|
|
3811
3816
|
args: [{
|
|
3812
3817
|
selector: '[clickOutside]',
|
|
@@ -3850,10 +3855,10 @@ class InvalidControlScrollDirective {
|
|
|
3850
3855
|
return null;
|
|
3851
3856
|
}
|
|
3852
3857
|
}
|
|
3853
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3854
|
-
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 });
|
|
3855
3860
|
}
|
|
3856
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: InvalidControlScrollDirective, decorators: [{
|
|
3857
3862
|
type: Directive,
|
|
3858
3863
|
args: [{
|
|
3859
3864
|
selector: '[appInvalidControlScroll]',
|
|
@@ -3903,10 +3908,10 @@ class InvalidControlScrollContainerDirective {
|
|
|
3903
3908
|
return absoluteControlElTop - labelOffset;
|
|
3904
3909
|
}
|
|
3905
3910
|
}
|
|
3906
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3907
|
-
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 });
|
|
3908
3913
|
}
|
|
3909
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3914
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: InvalidControlScrollContainerDirective, decorators: [{
|
|
3910
3915
|
type: Directive,
|
|
3911
3916
|
args: [{
|
|
3912
3917
|
selector: '[appInvalidControlScrollContainer]',
|
|
@@ -3963,15 +3968,15 @@ class FormValidationUtils {
|
|
|
3963
3968
|
}
|
|
3964
3969
|
|
|
3965
3970
|
class AppErrorComponent {
|
|
3966
|
-
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
3967
|
-
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
3971
|
+
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
|
|
3972
|
+
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
3968
3973
|
get hasErrors() {
|
|
3969
3974
|
return (this.control() && this.control()?.touched && this.control()?.errors) ?? false;
|
|
3970
3975
|
}
|
|
3971
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3972
|
-
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" }] });
|
|
3973
3978
|
}
|
|
3974
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3979
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AppErrorComponent, decorators: [{
|
|
3975
3980
|
type: Component,
|
|
3976
3981
|
args: [{ selector: 'app-error', imports: [
|
|
3977
3982
|
HumanizeFormMessagesPipe
|
|
@@ -3979,13 +3984,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3979
3984
|
}], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }] } });
|
|
3980
3985
|
|
|
3981
3986
|
class DatePickerComponent extends BaseControlValueAccessorV3 {
|
|
3982
|
-
minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
|
|
3983
|
-
maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
|
|
3984
|
-
allowOnlyPast = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyPast" }] : []));
|
|
3985
|
-
allowOnlyFuture = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyFuture" }] : []));
|
|
3986
|
-
allowToday = input(false, ...(ngDevMode ? [{ debugName: "allowToday" }] : []));
|
|
3987
|
-
disabledDays = input([], ...(ngDevMode ? [{ debugName: "disabledDays" }] : []));
|
|
3988
|
-
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 */ []));
|
|
3989
3994
|
dateSelected = output();
|
|
3990
3995
|
// days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
3991
3996
|
days = [
|
|
@@ -4011,7 +4016,7 @@ class DatePickerComponent extends BaseControlValueAccessorV3 {
|
|
|
4011
4016
|
'Nov',
|
|
4012
4017
|
'Dec'
|
|
4013
4018
|
];
|
|
4014
|
-
uiMode = signal('date', ...(ngDevMode ? [{ debugName: "uiMode" }] : []));
|
|
4019
|
+
uiMode = signal('date', ...(ngDevMode ? [{ debugName: "uiMode" }] : /* istanbul ignore next */ []));
|
|
4015
4020
|
activeMonth;
|
|
4016
4021
|
activeYear;
|
|
4017
4022
|
selectedDate;
|
|
@@ -4219,10 +4224,10 @@ class DatePickerComponent extends BaseControlValueAccessorV3 {
|
|
|
4219
4224
|
getLastYear() {
|
|
4220
4225
|
return this.years[this.years.length - 1].value;
|
|
4221
4226
|
}
|
|
4222
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4223
|
-
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"] }] });
|
|
4224
4229
|
}
|
|
4225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
4226
4231
|
type: Component,
|
|
4227
4232
|
args: [{ selector: 'app-date-picker', imports: [
|
|
4228
4233
|
NgClass
|
|
@@ -4235,10 +4240,10 @@ class DatePickerOverlayComponent {
|
|
|
4235
4240
|
onDateSelected($event) {
|
|
4236
4241
|
this.dialogRef.close($event);
|
|
4237
4242
|
}
|
|
4238
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4239
|
-
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"] }] });
|
|
4240
4245
|
}
|
|
4241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4246
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DatePickerOverlayComponent, decorators: [{
|
|
4242
4247
|
type: Component,
|
|
4243
4248
|
args: [{ selector: 'app-date-picker-overlay', imports: [
|
|
4244
4249
|
DatePickerComponent
|
|
@@ -4274,21 +4279,21 @@ var InputDateFormat;
|
|
|
4274
4279
|
})(InputDateFormat || (InputDateFormat = {}));
|
|
4275
4280
|
class DateInputComponent extends BaseControlValueAccessorV3 {
|
|
4276
4281
|
trigger;
|
|
4277
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
4278
|
-
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
|
|
4279
|
-
showDatePickerIcon = input(true, ...(ngDevMode ? [{ debugName: "showDatePickerIcon" }] : []));
|
|
4280
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
4281
|
-
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
|
|
4282
|
-
minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
|
|
4283
|
-
maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
|
|
4284
|
-
allowOnlyPast = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyPast" }] : []));
|
|
4285
|
-
allowOnlyFuture = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyFuture" }] : []));
|
|
4286
|
-
disabledDays = input([], ...(ngDevMode ? [{ debugName: "disabledDays" }] : []));
|
|
4287
|
-
disabledDates = input([], ...(ngDevMode ? [{ debugName: "disabledDates" }] : []));
|
|
4288
|
-
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 */ []));
|
|
4289
4294
|
overlayService = inject(OverlayService);
|
|
4290
|
-
isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
|
|
4291
|
-
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 */ []));
|
|
4292
4297
|
subscription;
|
|
4293
4298
|
ngOnDestroy() {
|
|
4294
4299
|
this.subscription?.unsubscribe();
|
|
@@ -4423,10 +4428,10 @@ class DateInputComponent extends BaseControlValueAccessorV3 {
|
|
|
4423
4428
|
const yyyy = date.getFullYear();
|
|
4424
4429
|
return this.inputDateFormat() === InputDateFormat.mmddyyyy ? `${mm}/${dd}/${yyyy}` : `${dd}/${mm}/${yyyy}`;
|
|
4425
4430
|
}
|
|
4426
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4427
|
-
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" }] });
|
|
4428
4433
|
}
|
|
4429
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4434
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
4430
4435
|
type: Component,
|
|
4431
4436
|
args: [{ selector: 'app-date-input', standalone: true, imports: [
|
|
4432
4437
|
HumanizeFormMessagesPipe,
|
|
@@ -4443,11 +4448,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
4443
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 }] }] } });
|
|
4444
4449
|
|
|
4445
4450
|
class DateRangePickerComponent extends BaseControlValueAccessorV3 {
|
|
4446
|
-
minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
|
|
4447
|
-
maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
|
|
4448
|
-
allowOnlyPast = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyPast" }] : []));
|
|
4449
|
-
allowOnlyFuture = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyFuture" }] : []));
|
|
4450
|
-
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 */ []));
|
|
4451
4456
|
dateRangeSelected = output();
|
|
4452
4457
|
days = [
|
|
4453
4458
|
{ day: 'sunday', displayName: 'Su' },
|
|
@@ -4472,7 +4477,7 @@ class DateRangePickerComponent extends BaseControlValueAccessorV3 {
|
|
|
4472
4477
|
'Nov',
|
|
4473
4478
|
'Dec'
|
|
4474
4479
|
];
|
|
4475
|
-
uiMode = signal('date', ...(ngDevMode ? [{ debugName: "uiMode" }] : []));
|
|
4480
|
+
uiMode = signal('date', ...(ngDevMode ? [{ debugName: "uiMode" }] : /* istanbul ignore next */ []));
|
|
4476
4481
|
activeMonth;
|
|
4477
4482
|
activeYear;
|
|
4478
4483
|
startDate;
|
|
@@ -4723,10 +4728,10 @@ class DateRangePickerComponent extends BaseControlValueAccessorV3 {
|
|
|
4723
4728
|
this.hoveredDate = null;
|
|
4724
4729
|
this.onValueChange(null);
|
|
4725
4730
|
}
|
|
4726
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
4727
|
-
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"] }] });
|
|
4728
4733
|
}
|
|
4729
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
4734
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
4730
4735
|
type: Component,
|
|
4731
4736
|
args: [{ selector: 'app-date-range-picker', imports: [
|
|
4732
4737
|
NgClass
|
|
@@ -4737,38 +4742,38 @@ class DropdownComponent extends BaseControlValueAccessorV2 {
|
|
|
4737
4742
|
cdr = inject(ChangeDetectorRef);
|
|
4738
4743
|
renderer = inject(Renderer2);
|
|
4739
4744
|
overlay = inject(Overlay);
|
|
4740
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
4741
|
-
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
4742
|
-
placeholder = input('Select', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
4743
|
-
prefixIconPath = input(...(ngDevMode ? [undefined, { debugName: "prefixIconPath" }] : []));
|
|
4744
|
-
isTitlePrefix = input(false, ...(ngDevMode ? [{ debugName: "isTitlePrefix" }] : []));
|
|
4745
|
-
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : []));
|
|
4746
|
-
displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : []));
|
|
4747
|
-
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
4748
|
-
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 */ []));
|
|
4749
4754
|
// identifier = input<string>();
|
|
4750
|
-
noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : []));
|
|
4751
|
-
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
|
|
4752
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
4753
|
-
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
|
|
4754
|
-
enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
|
|
4755
|
-
addActionText = input(...(ngDevMode ? [undefined, { debugName: "addActionText" }] : []));
|
|
4756
|
-
minimumPopupWidth = input(250, ...(ngDevMode ? [{ debugName: "minimumPopupWidth" }] : []));
|
|
4757
|
-
noBorder = input(false, ...(ngDevMode ? [{ debugName: "noBorder" }] : []));
|
|
4758
|
-
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
4759
|
-
highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
|
|
4760
|
-
selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
|
|
4761
|
-
dropUp = signal(false, ...(ngDevMode ? [{ debugName: "dropUp" }] : []));
|
|
4762
|
-
dropdownWidth = signal(300, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
|
|
4763
|
-
filteredList = signal([], ...(ngDevMode ? [{ debugName: "filteredList" }] : []));
|
|
4764
|
-
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 */ []));
|
|
4765
4770
|
valueChanged = output();
|
|
4766
4771
|
addActionClicked = output();
|
|
4767
4772
|
dropdownButton;
|
|
4768
4773
|
dropdown;
|
|
4769
4774
|
dropdownListContainer;
|
|
4770
4775
|
dropdownList;
|
|
4771
|
-
searchField = viewChild('searchField', ...(ngDevMode ? [{ debugName: "searchField" }] : []));
|
|
4776
|
+
searchField = viewChild('searchField', ...(ngDevMode ? [{ debugName: "searchField" }] : /* istanbul ignore next */ []));
|
|
4772
4777
|
scrollStrategy = this.overlay.scrollStrategies.block();
|
|
4773
4778
|
ngOnChanges(changes) {
|
|
4774
4779
|
let value = this.actualValue;
|
|
@@ -5028,10 +5033,10 @@ class DropdownComponent extends BaseControlValueAccessorV2 {
|
|
|
5028
5033
|
return current === value;
|
|
5029
5034
|
});
|
|
5030
5035
|
}
|
|
5031
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5032
|
-
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" }] });
|
|
5033
5038
|
}
|
|
5034
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5039
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
5035
5040
|
type: Component,
|
|
5036
5041
|
args: [{ selector: 'app-dropdown', standalone: true, imports: [
|
|
5037
5042
|
ReactiveFormsModule,
|
|
@@ -5059,15 +5064,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
5059
5064
|
}] } });
|
|
5060
5065
|
|
|
5061
5066
|
class FileUploaderComponent extends BaseControlValueAccessor {
|
|
5062
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
5063
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
5064
|
-
isRequired = input(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
5065
|
-
uploading = input(false, ...(ngDevMode ? [{ debugName: "uploading" }] : []));
|
|
5066
|
-
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 */ []));
|
|
5067
5072
|
fileSelected = output();
|
|
5068
5073
|
fileRemoved = output();
|
|
5069
|
-
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
5070
|
-
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 */ []));
|
|
5071
5076
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
5072
5077
|
constructor() {
|
|
5073
5078
|
super();
|
|
@@ -5131,10 +5136,10 @@ class FileUploaderComponent extends BaseControlValueAccessor {
|
|
|
5131
5136
|
return fileName ? decodeURIComponent(fileName) : '';
|
|
5132
5137
|
}
|
|
5133
5138
|
}
|
|
5134
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5135
|
-
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" }] });
|
|
5136
5141
|
}
|
|
5137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FileUploaderComponent, decorators: [{
|
|
5138
5143
|
type: Component,
|
|
5139
5144
|
args: [{ selector: 'app-file-uploader', standalone: true, imports: [
|
|
5140
5145
|
SpinnerComponent,
|
|
@@ -5150,35 +5155,35 @@ class MultiSelectDropdownComponent extends BaseControlValueAccessor {
|
|
|
5150
5155
|
cdr = inject(ChangeDetectorRef);
|
|
5151
5156
|
renderer = inject(Renderer2);
|
|
5152
5157
|
overlay = inject(Overlay);
|
|
5153
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
5154
|
-
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
5155
|
-
placeholder = input('Select', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
5156
|
-
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : []));
|
|
5157
|
-
displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : []));
|
|
5158
|
-
value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
5159
|
-
identifier = input(SharedConstants.inputIdentifier, ...(ngDevMode ? [{ debugName: "identifier" }] : []));
|
|
5160
|
-
searchKeyMatch = input(...(ngDevMode ? [undefined, { debugName: "searchKeyMatch" }] : []));
|
|
5161
|
-
noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : []));
|
|
5162
|
-
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
|
|
5163
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
5164
|
-
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
|
|
5165
|
-
enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch" }] : []));
|
|
5166
|
-
addActionText = input(...(ngDevMode ? [undefined, { debugName: "addActionText" }] : []));
|
|
5167
|
-
minimumPopupWidth = input(250, ...(ngDevMode ? [{ debugName: "minimumPopupWidth" }] : []));
|
|
5168
|
-
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 */ []));
|
|
5169
5174
|
valueChanged = output();
|
|
5170
5175
|
addActionClicked = output();
|
|
5171
|
-
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
5172
|
-
highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
|
|
5173
|
-
dropUp = signal(false, ...(ngDevMode ? [{ debugName: "dropUp" }] : []));
|
|
5174
|
-
dropdownWidth = signal(300, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
|
|
5175
|
-
selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
|
|
5176
|
-
filteredList = signal([], ...(ngDevMode ? [{ debugName: "filteredList" }] : []));
|
|
5177
|
-
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 */ []));
|
|
5178
5183
|
dropdownButton;
|
|
5179
5184
|
dropdownListContainer;
|
|
5180
5185
|
dropdownList;
|
|
5181
|
-
searchField = viewChild('searchField', ...(ngDevMode ? [{ debugName: "searchField" }] : []));
|
|
5186
|
+
searchField = viewChild('searchField', ...(ngDevMode ? [{ debugName: "searchField" }] : /* istanbul ignore next */ []));
|
|
5182
5187
|
scrollStrategy = this.overlay.scrollStrategies.block();
|
|
5183
5188
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
5184
5189
|
MultiSelectDropdownAppearance = MultiSelectDropdownAppearance;
|
|
@@ -5496,10 +5501,10 @@ class MultiSelectDropdownComponent extends BaseControlValueAccessor {
|
|
|
5496
5501
|
onAddActionClicked() {
|
|
5497
5502
|
this.addActionClicked.emit();
|
|
5498
5503
|
}
|
|
5499
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5500
|
-
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" }] });
|
|
5501
5506
|
}
|
|
5502
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MultiSelectDropdownComponent, decorators: [{
|
|
5503
5508
|
type: Component,
|
|
5504
5509
|
args: [{ selector: 'app-multi-select-dropdown', standalone: true, imports: [
|
|
5505
5510
|
BaseInputComponent,
|
|
@@ -5530,31 +5535,31 @@ var MultiSelectDropdownAppearance;
|
|
|
5530
5535
|
})(MultiSelectDropdownAppearance || (MultiSelectDropdownAppearance = {}));
|
|
5531
5536
|
|
|
5532
5537
|
class MultiSelectionFieldComponent extends BaseControlValueAccessor {
|
|
5533
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
5534
|
-
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
5535
|
-
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : []));
|
|
5536
|
-
displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : []));
|
|
5537
|
-
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
|
|
5538
|
-
dynamicIconPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconPath" }] : []));
|
|
5539
|
-
imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : []));
|
|
5540
|
-
dynamicImageUrlPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicImageUrlPath" }] : []));
|
|
5541
|
-
value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
5542
|
-
identifier = input(SharedConstants.inputIdentifier, ...(ngDevMode ? [{ debugName: "identifier" }] : []));
|
|
5543
|
-
noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : []));
|
|
5544
|
-
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
|
|
5545
|
-
iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
|
|
5546
|
-
dynamicIconColor = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconColor" }] : []));
|
|
5547
|
-
customActionText = input(...(ngDevMode ? [undefined, { debugName: "customActionText" }] : []));
|
|
5548
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
5549
|
-
itemWidth = input(null, ...(ngDevMode ? [{ debugName: "itemWidth" }] : []));
|
|
5550
|
-
isItemCentered = input(false, ...(ngDevMode ? [{ debugName: "isItemCentered" }] : []));
|
|
5551
|
-
showSelectionTickMark = input(true, ...(ngDevMode ? [{ debugName: "showSelectionTickMark" }] : []));
|
|
5552
|
-
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 */ []));
|
|
5553
5558
|
valueChanged = output();
|
|
5554
5559
|
onCustomActionClicked = output();
|
|
5555
|
-
showAll = signal(false, ...(ngDevMode ? [{ debugName: "showAll" }] : []));
|
|
5556
|
-
selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
|
|
5557
|
-
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 */ []));
|
|
5558
5563
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
5559
5564
|
constructor() {
|
|
5560
5565
|
super();
|
|
@@ -5785,10 +5790,10 @@ class MultiSelectionFieldComponent extends BaseControlValueAccessor {
|
|
|
5785
5790
|
break;
|
|
5786
5791
|
}
|
|
5787
5792
|
}
|
|
5788
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5789
|
-
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" }] });
|
|
5790
5795
|
}
|
|
5791
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5796
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MultiSelectionFieldComponent, decorators: [{
|
|
5792
5797
|
type: Component,
|
|
5793
5798
|
args: [{ selector: 'app-multi-selection-field', standalone: true, imports: [
|
|
5794
5799
|
BaseInputComponent,
|
|
@@ -5815,10 +5820,10 @@ class NumberInputComponent extends BaseControlValueAccessorV2 {
|
|
|
5815
5820
|
}
|
|
5816
5821
|
text(someType) {
|
|
5817
5822
|
}
|
|
5818
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5819
|
-
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"] }] });
|
|
5820
5825
|
}
|
|
5821
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5826
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
5822
5827
|
type: Component,
|
|
5823
5828
|
args: [{ selector: 'app-number-input', standalone: true, imports: [
|
|
5824
5829
|
ButtonComponent
|
|
@@ -5826,22 +5831,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
5826
5831
|
}], propDecorators: { valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
|
|
5827
5832
|
|
|
5828
5833
|
class PhoneNumberInputComponent {
|
|
5829
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5830
|
-
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: [""] });
|
|
5831
5836
|
}
|
|
5832
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5837
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
|
|
5833
5838
|
type: Component,
|
|
5834
5839
|
args: [{ selector: 'app-phone-number-input', imports: [], template: "" }]
|
|
5835
5840
|
}] });
|
|
5836
5841
|
|
|
5837
5842
|
class RadioButtonComponent extends BaseControlValueAccessor {
|
|
5838
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
5839
|
-
groupName = input.required(...(ngDevMode ? [{ debugName: "groupName" }] : []));
|
|
5840
|
-
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
5841
|
-
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 */ []));
|
|
5842
5847
|
valueChanged = new EventEmitter();
|
|
5843
5848
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
5844
|
-
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
5849
|
+
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
5845
5850
|
constructor() {
|
|
5846
5851
|
super();
|
|
5847
5852
|
if (this.ngControl) {
|
|
@@ -5871,10 +5876,10 @@ class RadioButtonComponent extends BaseControlValueAccessor {
|
|
|
5871
5876
|
const randomNumber = Math.floor(1000 + Math.random() * 9000);
|
|
5872
5877
|
return `radio-button-${randomNumber.toString()}`;
|
|
5873
5878
|
}
|
|
5874
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5875
|
-
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"] }] });
|
|
5876
5881
|
}
|
|
5877
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
5878
5883
|
type: Component,
|
|
5879
5884
|
args: [{ selector: 'app-radio-button', standalone: true, imports: [
|
|
5880
5885
|
ReactiveFormsModule
|
|
@@ -5884,13 +5889,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
5884
5889
|
}], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }] } });
|
|
5885
5890
|
|
|
5886
5891
|
class SingleItemPickerInputComponent extends BaseControlValueAccessor {
|
|
5887
|
-
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
5888
|
-
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
5889
|
-
display = input.required(...(ngDevMode ? [{ debugName: "display" }] : []));
|
|
5890
|
-
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
5891
|
-
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 */ []));
|
|
5892
5897
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
5893
|
-
isPopUpOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPopUpOpen" }] : []));
|
|
5898
|
+
isPopUpOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPopUpOpen" }] : /* istanbul ignore next */ []));
|
|
5894
5899
|
valueChanged = new EventEmitter();
|
|
5895
5900
|
constructor() {
|
|
5896
5901
|
super();
|
|
@@ -5939,10 +5944,10 @@ class SingleItemPickerInputComponent extends BaseControlValueAccessor {
|
|
|
5939
5944
|
togglePopup() {
|
|
5940
5945
|
this.isPopUpOpen.update(p => !p);
|
|
5941
5946
|
}
|
|
5942
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
5943
|
-
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" }] });
|
|
5944
5949
|
}
|
|
5945
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
5950
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SingleItemPickerInputComponent, decorators: [{
|
|
5946
5951
|
type: Component,
|
|
5947
5952
|
args: [{ selector: 'app-single-item-picker-input', standalone: true, imports: [
|
|
5948
5953
|
AppSvgIconComponent,
|
|
@@ -5954,31 +5959,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
5954
5959
|
}] } });
|
|
5955
5960
|
|
|
5956
5961
|
class SingleSelectionFieldComponent extends BaseControlValueAccessor {
|
|
5957
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
5958
|
-
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
5959
|
-
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : []));
|
|
5960
|
-
displayTemplate = input(...(ngDevMode ? [undefined, { debugName: "displayTemplate" }] : []));
|
|
5961
|
-
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
|
|
5962
|
-
dynamicIconPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconPath" }] : []));
|
|
5963
|
-
imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : []));
|
|
5964
|
-
dynamicImageUrlPath = input(...(ngDevMode ? [undefined, { debugName: "dynamicImageUrlPath" }] : []));
|
|
5965
|
-
iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
|
|
5966
|
-
dynamicIconColor = input(...(ngDevMode ? [undefined, { debugName: "dynamicIconColor" }] : []));
|
|
5967
|
-
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
5968
|
-
noDataMessage = input(...(ngDevMode ? [undefined, { debugName: "noDataMessage" }] : []));
|
|
5969
|
-
state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
|
|
5970
|
-
customActionText = input(...(ngDevMode ? [undefined, { debugName: "customActionText" }] : []));
|
|
5971
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
5972
|
-
itemWidth = input(null, ...(ngDevMode ? [{ debugName: "itemWidth" }] : []));
|
|
5973
|
-
isItemCentered = input(false, ...(ngDevMode ? [{ debugName: "isItemCentered" }] : []));
|
|
5974
|
-
showSelectionTickMark = input(true, ...(ngDevMode ? [{ debugName: "showSelectionTickMark" }] : []));
|
|
5975
|
-
itemPlacement = input('start', ...(ngDevMode ? [{ debugName: "itemPlacement" }] : []));
|
|
5976
|
-
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 */ []));
|
|
5977
5982
|
valueChanged = output();
|
|
5978
5983
|
onCustomActionClicked = output();
|
|
5979
|
-
selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
|
|
5980
|
-
showAll = signal(false, ...(ngDevMode ? [{ debugName: "showAll" }] : []));
|
|
5981
|
-
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 */ []));
|
|
5982
5987
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
5983
5988
|
constructor() {
|
|
5984
5989
|
super();
|
|
@@ -6098,10 +6103,10 @@ class SingleSelectionFieldComponent extends BaseControlValueAccessor {
|
|
|
6098
6103
|
break;
|
|
6099
6104
|
}
|
|
6100
6105
|
}
|
|
6101
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6102
|
-
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" }] });
|
|
6103
6108
|
}
|
|
6104
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SingleSelectionFieldComponent, decorators: [{
|
|
6105
6110
|
type: Component,
|
|
6106
6111
|
args: [{ selector: 'app-single-selection-field', standalone: true, imports: [
|
|
6107
6112
|
BaseInputComponent,
|
|
@@ -6115,11 +6120,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
6115
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"] }] } });
|
|
6116
6121
|
|
|
6117
6122
|
class SwitchComponent extends BaseControlValueAccessor {
|
|
6118
|
-
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
6119
|
-
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
6123
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
6124
|
+
id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
6120
6125
|
valueChanged = new EventEmitter();
|
|
6121
6126
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
6122
|
-
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
6127
|
+
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
6123
6128
|
constructor() {
|
|
6124
6129
|
super();
|
|
6125
6130
|
if (this.ngControl) {
|
|
@@ -6149,10 +6154,10 @@ class SwitchComponent extends BaseControlValueAccessor {
|
|
|
6149
6154
|
const randomNumber = Math.floor(1000 + Math.random() * 9000);
|
|
6150
6155
|
return `checkbox-${randomNumber.toString()}`;
|
|
6151
6156
|
}
|
|
6152
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6153
|
-
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 }] });
|
|
6154
6159
|
}
|
|
6155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
6156
6161
|
type: Component,
|
|
6157
6162
|
args: [{ selector: 'app-switch', standalone: true, imports: [
|
|
6158
6163
|
ReactiveFormsModule
|
|
@@ -6162,15 +6167,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
6162
6167
|
}], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }] } });
|
|
6163
6168
|
|
|
6164
6169
|
class TextAreaInputComponent extends BaseControlValueAccessor {
|
|
6165
|
-
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
6166
|
-
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
6167
|
-
viewType = input('text', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
|
|
6168
|
-
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
6169
|
-
fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
6170
|
-
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
6171
|
-
rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
6172
|
-
errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
6173
|
-
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 */ []));
|
|
6174
6179
|
changeValue = output();
|
|
6175
6180
|
ngControl = inject(NgControl, { optional: true, self: true });
|
|
6176
6181
|
constructor() {
|
|
@@ -6192,10 +6197,10 @@ class TextAreaInputComponent extends BaseControlValueAccessor {
|
|
|
6192
6197
|
}
|
|
6193
6198
|
onWriteValue(obj) {
|
|
6194
6199
|
}
|
|
6195
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6196
|
-
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" }] });
|
|
6197
6202
|
}
|
|
6198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextAreaInputComponent, decorators: [{
|
|
6199
6204
|
type: Component,
|
|
6200
6205
|
args: [{ selector: 'app-text-area-input', standalone: true, imports: [
|
|
6201
6206
|
ReactiveFormsModule,
|
|
@@ -6206,20 +6211,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
6206
6211
|
|
|
6207
6212
|
class TimePickerComponent extends BaseControlValueAccessorV2 {
|
|
6208
6213
|
overlay = inject(Overlay);
|
|
6209
|
-
iconSrc = input(...(ngDevMode ? [undefined, { debugName: "iconSrc" }] : []));
|
|
6210
|
-
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
6211
|
-
showErrorSpace = input(false, ...(ngDevMode ? [{ debugName: "showErrorSpace" }] : []));
|
|
6212
|
-
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 */ []));
|
|
6213
6218
|
valueChanged = output();
|
|
6214
6219
|
scrollStrategy = this.overlay.scrollStrategies.block();
|
|
6215
|
-
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
6216
|
-
errorMessages = signal({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
6217
|
-
enableApplyActions = signal(false, ...(ngDevMode ? [{ debugName: "enableApplyActions" }] : []));
|
|
6218
|
-
hours = signal(12, ...(ngDevMode ? [{ debugName: "hours" }] : []));
|
|
6219
|
-
minutes = signal(0, ...(ngDevMode ? [{ debugName: "minutes" }] : []));
|
|
6220
|
-
period = signal('AM', ...(ngDevMode ? [{ debugName: "period" }] : []));
|
|
6221
|
-
is24HourFormat = signal(false, ...(ngDevMode ? [{ debugName: "is24HourFormat" }] : []));
|
|
6222
|
-
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 */ []));
|
|
6223
6228
|
handleHourUpdate = false;
|
|
6224
6229
|
previousValidHours = 12;
|
|
6225
6230
|
previousValidMinutes = 0;
|
|
@@ -6394,10 +6399,10 @@ class TimePickerComponent extends BaseControlValueAccessorV2 {
|
|
|
6394
6399
|
onClickOutside() {
|
|
6395
6400
|
this.isOpen.set(false);
|
|
6396
6401
|
}
|
|
6397
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6398
|
-
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" }] });
|
|
6399
6404
|
}
|
|
6400
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
6401
6406
|
type: Component,
|
|
6402
6407
|
args: [{ selector: 'app-time-picker', standalone: true, imports: [
|
|
6403
6408
|
NgClass,
|
|
@@ -6616,10 +6621,10 @@ class NglService {
|
|
|
6616
6621
|
getBaseUrl() {
|
|
6617
6622
|
return this.config.baseApiUrl;
|
|
6618
6623
|
}
|
|
6619
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
6620
|
-
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' });
|
|
6621
6626
|
}
|
|
6622
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
6627
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NglService, decorators: [{
|
|
6623
6628
|
type: Injectable,
|
|
6624
6629
|
args: [{
|
|
6625
6630
|
providedIn: 'root'
|