@vallift/ngl 22.0.53 → 22.0.56
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 +343 -343
- package/fesm2022/vallift-ngl.mjs.map +1 -1
- package/package.json +1 -1
- package/types/vallift-ngl.d.ts +7 -7
package/fesm2022/vallift-ngl.mjs
CHANGED
|
@@ -172,10 +172,10 @@ class BaseApiService {
|
|
|
172
172
|
return this.baseUrl + url;
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
176
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
175
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
176
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseApiService, providedIn: 'root' });
|
|
177
177
|
}
|
|
178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseApiService, decorators: [{
|
|
179
179
|
type: Injectable,
|
|
180
180
|
args: [{
|
|
181
181
|
providedIn: 'root'
|
|
@@ -431,10 +431,10 @@ class BaseControlValueAccessorV3 {
|
|
|
431
431
|
}
|
|
432
432
|
return false;
|
|
433
433
|
}
|
|
434
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
435
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
434
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseControlValueAccessorV3, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
435
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", 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 });
|
|
436
436
|
}
|
|
437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseControlValueAccessorV3, decorators: [{
|
|
438
438
|
type: Component,
|
|
439
439
|
args: [{
|
|
440
440
|
imports: [],
|
|
@@ -704,10 +704,10 @@ class PaginationState {
|
|
|
704
704
|
class SpinnerComponent {
|
|
705
705
|
borderColor = input('border-primary-500', /* @ts-ignore */
|
|
706
706
|
...(ngDevMode ? [{ debugName: "borderColor" }] : /* istanbul ignore next */ []));
|
|
707
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
708
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
707
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
708
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", 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"] }] });
|
|
709
709
|
}
|
|
710
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
711
711
|
type: Component,
|
|
712
712
|
args: [{ selector: 'app-spinner', standalone: true, imports: [
|
|
713
713
|
NgClass
|
|
@@ -722,10 +722,10 @@ class AppSvgIconComponent {
|
|
|
722
722
|
getStyle() {
|
|
723
723
|
return { ...this.svgStyle, 'width.px': this.size, 'height.px': this.size };
|
|
724
724
|
}
|
|
725
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
726
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
725
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AppSvgIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
726
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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"] }] });
|
|
727
727
|
}
|
|
728
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
728
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AppSvgIconComponent, decorators: [{
|
|
729
729
|
type: Component,
|
|
730
730
|
args: [{ selector: 'app-svg-icon', standalone: true, imports: [SvgIconComponent], template: "<svg-icon [src]=\"src\" [stretch]=\"stretch\" [svgStyle]=\"getStyle()\">\n</svg-icon>\n" }]
|
|
731
731
|
}], propDecorators: { src: [{
|
|
@@ -838,10 +838,10 @@ class ButtonComponent {
|
|
|
838
838
|
formGroup.markAllAsTouched();
|
|
839
839
|
formGroup.markAsPristine();
|
|
840
840
|
}
|
|
841
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
842
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
841
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
842
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 cursor-pointer\"\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"] }] });
|
|
843
843
|
}
|
|
844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
844
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
845
845
|
type: Component,
|
|
846
846
|
args: [{ selector: 'app-button', standalone: true, imports: [
|
|
847
847
|
NgClass,
|
|
@@ -861,10 +861,10 @@ class AlertDialogComponent {
|
|
|
861
861
|
onYesClicked() {
|
|
862
862
|
this.dialogRef.close(true);
|
|
863
863
|
}
|
|
864
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
865
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
864
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
865
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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"] }] });
|
|
866
866
|
}
|
|
867
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
867
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AlertDialogComponent, decorators: [{
|
|
868
868
|
type: Component,
|
|
869
869
|
args: [{ selector: 'app-alert-dialog', standalone: true, imports: [
|
|
870
870
|
ButtonComponent,
|
|
@@ -1100,10 +1100,10 @@ class OverlayService {
|
|
|
1100
1100
|
});
|
|
1101
1101
|
return dialogRef;
|
|
1102
1102
|
}
|
|
1103
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1104
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
1103
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1104
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OverlayService, providedIn: 'root' });
|
|
1105
1105
|
}
|
|
1106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OverlayService, decorators: [{
|
|
1107
1107
|
type: Injectable,
|
|
1108
1108
|
args: [{
|
|
1109
1109
|
providedIn: 'root'
|
|
@@ -1163,10 +1163,10 @@ class UnsavedAwareDirective {
|
|
|
1163
1163
|
$event.returnValue = 'You have unsaved changes! Do you really want to leave?';
|
|
1164
1164
|
}
|
|
1165
1165
|
}
|
|
1166
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1167
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
1166
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnsavedAwareDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1167
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: UnsavedAwareDirective, isStandalone: true, selector: "form[unSavedAware]", host: { listeners: { "window:beforeunload": "unloadNotification($event)" } }, ngImport: i0 });
|
|
1168
1168
|
}
|
|
1169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnsavedAwareDirective, decorators: [{
|
|
1170
1170
|
type: Directive,
|
|
1171
1171
|
args: [{
|
|
1172
1172
|
selector: 'form[unSavedAware]'
|
|
@@ -1288,10 +1288,10 @@ class NoDataComponent {
|
|
|
1288
1288
|
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1289
1289
|
message = input.required(/* @ts-ignore */
|
|
1290
1290
|
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
1291
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1292
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1291
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1292
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NoDataComponent, isStandalone: true, selector: "app-no-data", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 @if (icon() !== 'none') {\n\n <svg class=\"h-8 w-8 text-neutral-300\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-inbox-outline\" viewBox=\"0 0 24 24\"><path d=\"M19 3H5A2 2 0 0 0 3 5V19A2 2 0 0 0 5 21H19A2 2 0 0 0 21 19V5A2 2 0 0 0 19 3M5 19V17H8.13A4.13 4.13 0 0 0 9.4 19M19 19H14.6A4.13 4.13 0 0 0 15.87 17H19M19 15H14V16A2 2 0 0 1 10 16V15H5V5H19Z\" /></svg>\n }\n <p class=\"text-body2 text-neutral-500\">{{ message() }}</p>\n</div>\n", styles: [""] });
|
|
1293
1293
|
}
|
|
1294
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1294
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NoDataComponent, decorators: [{
|
|
1295
1295
|
type: Component,
|
|
1296
1296
|
args: [{ selector: 'app-no-data', standalone: true, imports: [], template: "<div class=\"inline-flex flex-col gap-3 items-center justify-center\">\n @if (icon() !== 'none') {\n\n <svg class=\"h-8 w-8 text-neutral-300\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-inbox-outline\" viewBox=\"0 0 24 24\"><path d=\"M19 3H5A2 2 0 0 0 3 5V19A2 2 0 0 0 5 21H19A2 2 0 0 0 21 19V5A2 2 0 0 0 19 3M5 19V17H8.13A4.13 4.13 0 0 0 9.4 19M19 19H14.6A4.13 4.13 0 0 0 15.87 17H19M19 15H14V16A2 2 0 0 1 10 16V15H5V5H19Z\" /></svg>\n }\n <p class=\"text-body2 text-neutral-500\">{{ message() }}</p>\n</div>\n" }]
|
|
1297
1297
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } });
|
|
@@ -1299,10 +1299,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
1299
1299
|
class NoDataTableComponent {
|
|
1300
1300
|
message = input(/* @ts-ignore */
|
|
1301
1301
|
...(ngDevMode ? [undefined, { debugName: "message" }] : /* istanbul ignore next */ []));
|
|
1302
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1303
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
1302
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NoDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1303
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", 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 results 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", "icon", "message"] }] });
|
|
1304
1304
|
}
|
|
1305
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NoDataTableComponent, decorators: [{
|
|
1306
1306
|
type: Component,
|
|
1307
1307
|
args: [{ selector: 'app-no-data-table', standalone: true, imports: [
|
|
1308
1308
|
NoDataComponent
|
|
@@ -1320,10 +1320,10 @@ class ShimmerComponent {
|
|
|
1320
1320
|
.map((_, i) => i);
|
|
1321
1321
|
}, /* @ts-ignore */
|
|
1322
1322
|
...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
|
|
1323
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1324
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1323
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShimmerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1324
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 @case ('table-cell') {\n <div class=\"h-4 w-full rounded bg-neutral-200/50 animate-pulse\" aria-hidden=\"true\"></div>\n }\n}\n\n\n", styles: [""] });
|
|
1325
1325
|
}
|
|
1326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ShimmerComponent, decorators: [{
|
|
1327
1327
|
type: Component,
|
|
1328
1328
|
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 @case ('table-cell') {\n <div class=\"h-4 w-full rounded bg-neutral-200/50 animate-pulse\" aria-hidden=\"true\"></div>\n }\n}\n\n\n" }]
|
|
1329
1329
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }] } });
|
|
@@ -1382,10 +1382,10 @@ class PaginationComponent {
|
|
|
1382
1382
|
emitPageChange() {
|
|
1383
1383
|
this.pageChange.emit({ pageNumber: this.currentPage, pageSize: this.pageSize });
|
|
1384
1384
|
}
|
|
1385
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1386
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1385
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1386
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div\n class=\"flex w-full items-center justify-between border-t border-neutral-50 bg-white\"\n [class.p-4]=\"type() !== 'compact'\"\n [class.px-4]=\"type() === 'compact'\"\n [class.py-3]=\"type() === 'compact'\">\n <div>\n <p class=\"text-nowrap text-sm text-neutral-600\">\n Showing {{ startItem }}-{{ endItem }} of {{ totalItems() }}\n </p>\n </div>\n\n <div class=\"flex items-center space-x-4\">\n @if (type() !== 'compact') {\n <span class=\"text-body2\">Items per page:</span>\n }\n\n <div class=\"relative inline-block rounded-md border border-neutral-200 px-2 py-1.5 text-caption\">\n <select\n #pageSizeSelect\n [(ngModel)]=\"pageSize\"\n (ngModelChange)=\"changePageSize($event, pageSizeSelect)\"\n class=\"bg-transparent outline-none ring-0 focus:outline-none focus:ring-0\">\n @for (size of pageSizeOptions(); track size) {\n <option [value]=\"size\">{{ size }}</option>\n }\n </select>\n </div>\n\n @if (type() !== 'compact') {\n <button\n type=\"button\"\n class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n [disabled]=\"currentPage === 1\"\n (click)=\"goToFirstPage()\">\n <svg class=\"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\n <button\n type=\"button\"\n class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n [disabled]=\"currentPage === 1\"\n (click)=\"goToPreviousPage()\">\n <svg class=\"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=\"currentColor\"/>\n </svg>\n </button>\n\n <button\n type=\"button\"\n class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n [disabled]=\"currentPage >= totalPages\"\n (click)=\"goToNextPage()\">\n <svg class=\"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=\"currentColor\"/>\n </svg>\n </button>\n\n @if (type() !== 'compact') {\n <button\n type=\"button\"\n class=\"rounded px-2 py-1 text-neutral-900 disabled:cursor-not-allowed disabled:text-neutral-300\"\n [disabled]=\"currentPage >= totalPages\"\n (click)=\"goToLastPage()\">\n <svg class=\"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=\"currentColor\"/>\n </svg>\n </button>\n }\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]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[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"] }] });
|
|
1387
1387
|
}
|
|
1388
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1388
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1389
1389
|
type: Component,
|
|
1390
1390
|
args: [{ selector: 'app-pagination', standalone: true, imports: [
|
|
1391
1391
|
FormsModule,
|
|
@@ -1426,10 +1426,10 @@ class BaseTableComponent {
|
|
|
1426
1426
|
getTotalCount() {
|
|
1427
1427
|
return getListResponseTotalCount(this.state()?.response(), this.listResponse);
|
|
1428
1428
|
}
|
|
1429
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1430
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1429
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1430
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", isSignal: true, isRequired: false, transformFunction: null }, skeletonColumnCount: { classPropertyName: "skeletonColumnCount", publicName: "skeletonColumnCount", 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 aria-busy=\"true\" aria-live=\"polite\">\n @for (row of skeletonRows(); track row) {\n <tr class=\"border-b border-neutral-100\">\n @for (column of skeletonColumns(); track column) {\n <td class=\"px-4 py-3\">\n <app-shimmer type=\"table-cell\" />\n </td>\n }\n </tr>\n }\n </tbody>\n }\n\n <!-- No Table Indicator-->\n @if (state()?.success() && getRows().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]=\"getTotalCount()\"\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", "type", "pageSize"], outputs: ["pageChange"] }] });
|
|
1431
1431
|
}
|
|
1432
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1432
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseTableComponent, decorators: [{
|
|
1433
1433
|
type: Component,
|
|
1434
1434
|
args: [{ selector: 'app-base-table', standalone: true, imports: [NoDataTableComponent, ShimmerComponent, NgClass, PaginationComponent], 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 aria-busy=\"true\" aria-live=\"polite\">\n @for (row of skeletonRows(); track row) {\n <tr class=\"border-b border-neutral-100\">\n @for (column of skeletonColumns(); track column) {\n <td class=\"px-4 py-3\">\n <app-shimmer type=\"table-cell\" />\n </td>\n }\n </tr>\n }\n </tbody>\n }\n\n <!-- No Table Indicator-->\n @if (state()?.success() && getRows().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]=\"getTotalCount()\"\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" }]
|
|
1435
1435
|
}], propDecorators: { pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], isHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHorizontallyScrollable", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], skeletonRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRowCount", required: false }] }], skeletonColumnCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonColumnCount", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
|
|
@@ -1568,10 +1568,10 @@ class SortableTableDirective {
|
|
|
1568
1568
|
this.renderer.setStyle(svgIcon, 'fill', 'black');
|
|
1569
1569
|
}
|
|
1570
1570
|
}
|
|
1571
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1572
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
1571
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SortableTableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1572
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: SortableTableDirective, isStandalone: true, selector: "[sortableTable]", outputs: { sortChange: "sortChange" }, ngImport: i0 });
|
|
1573
1573
|
}
|
|
1574
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1574
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SortableTableDirective, decorators: [{
|
|
1575
1575
|
type: Directive,
|
|
1576
1576
|
args: [{
|
|
1577
1577
|
selector: '[sortableTable]',
|
|
@@ -1623,10 +1623,10 @@ class ResizableColumnDirective {
|
|
|
1623
1623
|
document.removeEventListener('mousemove', this.resizeColumnHandler);
|
|
1624
1624
|
document.removeEventListener('mouseup', this.stopResizeHandler);
|
|
1625
1625
|
}
|
|
1626
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1627
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
1626
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ResizableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1627
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: ResizableColumnDirective, isStandalone: true, selector: "[appResizableColumn]", ngImport: i0 });
|
|
1628
1628
|
}
|
|
1629
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1629
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ResizableColumnDirective, decorators: [{
|
|
1630
1630
|
type: Directive,
|
|
1631
1631
|
args: [{
|
|
1632
1632
|
selector: '[appResizableColumn]',
|
|
@@ -1690,10 +1690,10 @@ class TableResizableColumnsDirective {
|
|
|
1690
1690
|
// Add mousedown listener to the resize handle (div)
|
|
1691
1691
|
this.renderer.listen(resizeDiv, 'mousedown', startResize);
|
|
1692
1692
|
}
|
|
1693
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1694
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
1693
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TableResizableColumnsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1694
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TableResizableColumnsDirective, isStandalone: true, selector: "[appTableResizableColumns]", inputs: { applyResizableColumn: ["appTableResizableColumns", "applyResizableColumn"] }, ngImport: i0 });
|
|
1695
1695
|
}
|
|
1696
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1696
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TableResizableColumnsDirective, decorators: [{
|
|
1697
1697
|
type: Directive,
|
|
1698
1698
|
args: [{
|
|
1699
1699
|
selector: '[appTableResizableColumns]',
|
|
@@ -1743,10 +1743,10 @@ class BreadcrumbComponent {
|
|
|
1743
1743
|
navigate(route) {
|
|
1744
1744
|
this.router.navigate([route]);
|
|
1745
1745
|
}
|
|
1746
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1747
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1747
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }] });
|
|
1748
1748
|
}
|
|
1749
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
1750
1750
|
type: Component,
|
|
1751
1751
|
args: [{ selector: 'app-breadcrumb', standalone: true, imports: [
|
|
1752
1752
|
NgClass
|
|
@@ -1754,10 +1754,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
1754
1754
|
}] });
|
|
1755
1755
|
|
|
1756
1756
|
class CloseButtonComponent {
|
|
1757
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1758
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
1757
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1758
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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: [""] });
|
|
1759
1759
|
}
|
|
1760
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1760
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CloseButtonComponent, decorators: [{
|
|
1761
1761
|
type: Component,
|
|
1762
1762
|
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" }]
|
|
1763
1763
|
}] });
|
|
@@ -2121,10 +2121,10 @@ class ColorConverterService {
|
|
|
2121
2121
|
const rgbHex = cleanHex.length === 8 ? cleanHex.slice(0, 6) : cleanHex;
|
|
2122
2122
|
return `#${rgbHex.toUpperCase()}`;
|
|
2123
2123
|
}
|
|
2124
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2125
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
2124
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ColorConverterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2125
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ColorConverterService, providedIn: 'root' });
|
|
2126
2126
|
}
|
|
2127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2127
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ColorConverterService, decorators: [{
|
|
2128
2128
|
type: Injectable,
|
|
2129
2129
|
args: [{
|
|
2130
2130
|
providedIn: 'root'
|
|
@@ -2223,10 +2223,10 @@ class ColorPickerSliderDirective {
|
|
|
2223
2223
|
this.valueChanged.emit({ x: x, y: y, v: x / width, rgX: this.rgX });
|
|
2224
2224
|
}
|
|
2225
2225
|
}
|
|
2226
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2227
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
2226
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ColorPickerSliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2227
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: ColorPickerSliderDirective, isStandalone: true, selector: "[colorPickerSlider]", inputs: { rgX: "rgX", rgY: "rgY" }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", valueChanged: "valueChanged" }, host: { listeners: { "touchstart": "touchStart($event)" } }, ngImport: i0 });
|
|
2228
2228
|
}
|
|
2229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ColorPickerSliderDirective, decorators: [{
|
|
2230
2230
|
type: Directive,
|
|
2231
2231
|
args: [{
|
|
2232
2232
|
selector: '[colorPickerSlider]',
|
|
@@ -2498,10 +2498,10 @@ class ColorPickerComponent extends BaseControlValueAccessorV3 {
|
|
|
2498
2498
|
onColorSelected(color) {
|
|
2499
2499
|
this.setHexColor(color);
|
|
2500
2500
|
}
|
|
2501
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2502
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2501
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2502
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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{border-radius:.25rem;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{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;height:24px;width:24px;border-radius:9999px;border:1px solid #d4d4d4;box-shadow:0 1px 3px #0000001a}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{height:40px;width:40px;border-radius:.75rem;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;height:40px;width:40px;top:0;left:0;box-shadow:0 4px 6px #0000001a}\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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"] }] });
|
|
2503
2503
|
}
|
|
2504
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2504
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
2505
2505
|
type: Component,
|
|
2506
2506
|
args: [{ selector: 'app-color-picker', standalone: true, imports: [
|
|
2507
2507
|
ColorPickerSliderDirective,
|
|
@@ -2612,10 +2612,10 @@ class ColorPickerDirective {
|
|
|
2612
2612
|
ngOnDestroy() {
|
|
2613
2613
|
this.closeColorPicker();
|
|
2614
2614
|
}
|
|
2615
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2616
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
2615
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2616
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: ColorPickerDirective, isStandalone: true, selector: "[appColorPicker]", inputs: { initialHexColor: { classPropertyName: "initialHexColor", publicName: "initialHexColor", isSignal: true, isRequired: false, transformFunction: null }, enableAlpha: { classPropertyName: "enableAlpha", publicName: "enableAlpha", isSignal: true, isRequired: false, transformFunction: null }, enableAdditionalColor: { classPropertyName: "enableAdditionalColor", publicName: "enableAdditionalColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged", pickerClosed: "pickerClosed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
2617
2617
|
}
|
|
2618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2618
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ColorPickerDirective, decorators: [{
|
|
2619
2619
|
type: Directive,
|
|
2620
2620
|
args: [{
|
|
2621
2621
|
selector: '[appColorPicker]',
|
|
@@ -2633,10 +2633,10 @@ class OverlayContextMenuComponent {
|
|
|
2633
2633
|
this.dialogRef.close(action.actionKey);
|
|
2634
2634
|
$event.stopPropagation();
|
|
2635
2635
|
}
|
|
2636
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2637
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2636
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OverlayContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2637
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }] });
|
|
2638
2638
|
}
|
|
2639
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2639
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OverlayContextMenuComponent, decorators: [{
|
|
2640
2640
|
type: Component,
|
|
2641
2641
|
args: [{ selector: 'app-overlay-context-menu', imports: [
|
|
2642
2642
|
AppSvgIconComponent,
|
|
@@ -2733,10 +2733,10 @@ class ContextMenuButtonComponent {
|
|
|
2733
2733
|
this.onActionClicked.emit(actionKey);
|
|
2734
2734
|
});
|
|
2735
2735
|
}
|
|
2736
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2737
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
2736
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ContextMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2737
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", 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: [""] });
|
|
2738
2738
|
}
|
|
2739
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2739
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ContextMenuButtonComponent, decorators: [{
|
|
2740
2740
|
type: Component,
|
|
2741
2741
|
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" }]
|
|
2742
2742
|
}], propDecorators: { trigger: [{
|
|
@@ -2745,10 +2745,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
2745
2745
|
}], 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"] }] } });
|
|
2746
2746
|
|
|
2747
2747
|
class ContextMenuIconComponent {
|
|
2748
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2749
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
2748
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ContextMenuIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2749
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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: [""] });
|
|
2750
2750
|
}
|
|
2751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2751
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ContextMenuIconComponent, decorators: [{
|
|
2752
2752
|
type: Component,
|
|
2753
2753
|
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" }]
|
|
2754
2754
|
}] });
|
|
@@ -2759,10 +2759,10 @@ class TableCustomComponent {
|
|
|
2759
2759
|
rowPosition;
|
|
2760
2760
|
isLastRow = false;
|
|
2761
2761
|
actionPerformed = output();
|
|
2762
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2763
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
2762
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TableCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2763
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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: [""] });
|
|
2764
2764
|
}
|
|
2765
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2765
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TableCustomComponent, decorators: [{
|
|
2766
2766
|
type: Component,
|
|
2767
2767
|
args: [{ selector: 'lib-table-custom-component', imports: [], template: "" }]
|
|
2768
2768
|
}], propDecorators: { rowData: [{
|
|
@@ -2788,10 +2788,10 @@ class StatusBadgeComponent {
|
|
|
2788
2788
|
...(ngDevMode ? [{ debugName: "borderColorClass" }] : /* istanbul ignore next */ []));
|
|
2789
2789
|
isUpperCase = input(false, /* @ts-ignore */
|
|
2790
2790
|
...(ngDevMode ? [{ debugName: "isUpperCase" }] : /* istanbul ignore next */ []));
|
|
2791
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2792
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2791
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2792
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }] });
|
|
2793
2793
|
}
|
|
2794
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2794
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StatusBadgeComponent, decorators: [{
|
|
2795
2795
|
type: Component,
|
|
2796
2796
|
args: [{ selector: 'app-status-badge', imports: [
|
|
2797
2797
|
NgClass
|
|
@@ -2828,10 +2828,10 @@ class CheckboxComponent extends BaseControlValueAccessorV3 {
|
|
|
2828
2828
|
this.onCheckboxSelected($event, true);
|
|
2829
2829
|
}
|
|
2830
2830
|
}
|
|
2831
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2832
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2831
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2832
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[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"] }] });
|
|
2833
2833
|
}
|
|
2834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2834
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2835
2835
|
type: Component,
|
|
2836
2836
|
args: [{ selector: 'app-checkbox', standalone: true, imports: [
|
|
2837
2837
|
ReactiveFormsModule,
|
|
@@ -2874,10 +2874,10 @@ class HumanizeFormMessagesPipe {
|
|
|
2874
2874
|
: 'Invalid field';
|
|
2875
2875
|
return message;
|
|
2876
2876
|
}
|
|
2877
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2878
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.
|
|
2877
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: HumanizeFormMessagesPipe, deps: [{ token: FORM_ERRORS }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2878
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: HumanizeFormMessagesPipe, isStandalone: true, name: "humanizeFormMessages" });
|
|
2879
2879
|
}
|
|
2880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: HumanizeFormMessagesPipe, decorators: [{
|
|
2881
2881
|
type: Pipe,
|
|
2882
2882
|
args: [{ standalone: true, name: 'humanizeFormMessages' }]
|
|
2883
2883
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -2894,10 +2894,10 @@ class BaseInputComponent {
|
|
|
2894
2894
|
...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
2895
2895
|
inputType = input('text', /* @ts-ignore */
|
|
2896
2896
|
...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
|
|
2897
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2898
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2897
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2898
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }] });
|
|
2899
2899
|
}
|
|
2900
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2900
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseInputComponent, decorators: [{
|
|
2901
2901
|
type: Component,
|
|
2902
2902
|
args: [{ selector: 'app-base-input', standalone: true, imports: [
|
|
2903
2903
|
NgClass
|
|
@@ -3009,10 +3009,10 @@ class TextInputComponent extends BaseControlValueAccessor {
|
|
|
3009
3009
|
this.onTouched();
|
|
3010
3010
|
this.isFocused.set(false);
|
|
3011
3011
|
}
|
|
3012
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3013
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
3012
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3013
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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" }] });
|
|
3014
3014
|
}
|
|
3015
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3015
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
3016
3016
|
type: Component,
|
|
3017
3017
|
args: [{ selector: 'app-text-input', standalone: true, imports: [
|
|
3018
3018
|
NgClass,
|
|
@@ -3029,10 +3029,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
3029
3029
|
}], changeValue: [{ type: i0.Output, args: ["changeValue"] }], actionIconClicked: [{ type: i0.Output, args: ["actionIconClicked"] }] } });
|
|
3030
3030
|
|
|
3031
3031
|
class TextButtonSmall {
|
|
3032
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3033
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
3032
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TextButtonSmall, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3033
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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: [""] });
|
|
3034
3034
|
}
|
|
3035
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TextButtonSmall, decorators: [{
|
|
3036
3036
|
type: Component,
|
|
3037
3037
|
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" }]
|
|
3038
3038
|
}] });
|
|
@@ -3078,10 +3078,10 @@ class DynamicRendererComponent {
|
|
|
3078
3078
|
ngOnDestroy() {
|
|
3079
3079
|
this.actionSubscription?.unsubscribe();
|
|
3080
3080
|
}
|
|
3081
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3082
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
3081
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DynamicRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3082
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", 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: [""] });
|
|
3083
3083
|
}
|
|
3084
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3084
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DynamicRendererComponent, decorators: [{
|
|
3085
3085
|
type: Component,
|
|
3086
3086
|
args: [{ selector: 'app-dynamic-renderer', imports: [], template: "<ng-container #container></ng-container>\n" }]
|
|
3087
3087
|
}], propDecorators: { component: [{
|
|
@@ -3347,10 +3347,10 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
|
|
|
3347
3347
|
onRowActionPerformed($event) {
|
|
3348
3348
|
this.onActionPerformed.emit($event);
|
|
3349
3349
|
}
|
|
3350
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3351
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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 }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", 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 }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", 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: "toolbarContent", first: true, predicate: ["toolbarContent"], descendants: true }, { 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 <div\n class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n [class.hidden]=\"!showToolbar()\">\n @if (enableSearch()) {\n <app-text-input class=\"shrink-0\"\n [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 #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n <ng-content></ng-content>\n </div>\n </div>\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().loading()) {\n <tbody aria-busy=\"true\" aria-live=\"polite\">\n @for (row of skeletonRows(); track row) {\n <tr class=\"border-b border-gray-100\">\n @if (expandableComponent()) {\n <td class=\"px-4 py-3\">\n <app-shimmer type=\"table-cell\" />\n </td>\n }\n\n @for (column of columnDefs(); track column) {\n @let isColumnVisible = column.visible || column.visible == undefined || false;\n @if (isColumnVisible) {\n <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n <app-shimmer type=\"table-cell\" />\n </td>\n }\n }\n\n @if (enableColumnsConfig()) {\n <td class=\"px-1 py-3\"></td>\n }\n </tr>\n }\n </tbody>\n }\n\n <!-- No Table Indicator-->\n @if (!state().loading() && state().success() && getRows().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().loading() && getRows().length > 0) {\n <tbody class=\"\">\n @for (item of getRows(); 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 [pageSizeOptions]=\"pageSizeOptions()\"\n [totalItems]=\"getTotalCount()\"\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", "type", "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" }] });
|
|
3350
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3351
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", 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 }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", 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: "toolbarContent", first: true, predicate: ["toolbarContent"], descendants: true }, { 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 <div\n class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n [class.hidden]=\"!showToolbar()\">\n @if (enableSearch()) {\n <app-text-input class=\"shrink-0\"\n [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 #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n <ng-content></ng-content>\n </div>\n </div>\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().loading()) {\n <tbody aria-busy=\"true\" aria-live=\"polite\">\n @for (row of skeletonRows(); track row) {\n <tr class=\"border-b border-gray-100\">\n @if (expandableComponent()) {\n <td class=\"px-4 py-3\">\n <app-shimmer type=\"table-cell\" />\n </td>\n }\n\n @for (column of columnDefs(); track column) {\n @let isColumnVisible = column.visible || column.visible == undefined || false;\n @if (isColumnVisible) {\n <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n <app-shimmer type=\"table-cell\" />\n </td>\n }\n }\n\n @if (enableColumnsConfig()) {\n <td class=\"px-1 py-3\"></td>\n }\n </tr>\n }\n </tbody>\n }\n\n <!-- No Table Indicator-->\n @if (!state().loading() && state().success() && getRows().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().loading() && getRows().length > 0) {\n <tbody class=\"\">\n @for (item of getRows(); 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 [pageSizeOptions]=\"pageSizeOptions()\"\n [totalItems]=\"getTotalCount()\"\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", "type", "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" }] });
|
|
3352
3352
|
}
|
|
3353
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3353
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
3354
3354
|
type: Component,
|
|
3355
3355
|
args: [{ selector: 'app-data-table', standalone: true, imports: [
|
|
3356
3356
|
PaginationComponent,
|
|
@@ -3436,10 +3436,10 @@ class TooltipComponent {
|
|
|
3436
3436
|
this.hideFallbackTimeout = null;
|
|
3437
3437
|
}
|
|
3438
3438
|
}
|
|
3439
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3440
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
3439
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3440
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text", tooltipClass: "tooltipClass", hideDurationMs: "hideDurationMs" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelRef"], descendants: true }], ngImport: i0, template: "<div\n #panelRef\n class=\"tooltip-panel bg-gray-800 text-white text-xs px-3 py-1 rounded shadow-lg max-w-xs whitespace-nowrap z-50\"\n [class.tooltip-panel--visible]=\"visible()\"\n [class.tooltip-panel--hiding]=\"isHiding()\"\n [ngClass]=\"tooltipClass\">\n {{ text }}\n</div>\n", styles: [".tooltip-panel{opacity:0;transform:scale(.95) translateY(4px);transition:opacity .12s ease-out,transform .12s ease-out}.tooltip-panel--visible{opacity:1;transform:scale(1) translateY(0)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3441
3441
|
}
|
|
3442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
3443
3443
|
type: Component,
|
|
3444
3444
|
args: [{ selector: 'lib-tooltip', imports: [NgClass], template: "<div\n #panelRef\n class=\"tooltip-panel bg-gray-800 text-white text-xs px-3 py-1 rounded shadow-lg max-w-xs whitespace-nowrap z-50\"\n [class.tooltip-panel--visible]=\"visible()\"\n [class.tooltip-panel--hiding]=\"isHiding()\"\n [ngClass]=\"tooltipClass\">\n {{ text }}\n</div>\n", styles: [".tooltip-panel{opacity:0;transform:scale(.95) translateY(4px);transition:opacity .12s ease-out,transform .12s ease-out}.tooltip-panel--visible{opacity:1;transform:scale(1) translateY(0)}\n"] }]
|
|
3445
3445
|
}], propDecorators: { text: [{
|
|
@@ -3601,10 +3601,10 @@ class TooltipDirective {
|
|
|
3601
3601
|
}
|
|
3602
3602
|
void this.hideTooltipAnimated();
|
|
3603
3603
|
}
|
|
3604
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3605
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
3604
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3605
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", 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 }, tooltipShowDelay: { classPropertyName: "tooltipShowDelay", publicName: "tooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipHideDuration: { classPropertyName: "tooltipHideDuration", publicName: "tooltipHideDuration", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "touchcancel": "onTouchEnd()" } }, ngImport: i0 });
|
|
3606
3606
|
}
|
|
3607
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3607
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
3608
3608
|
type: Directive,
|
|
3609
3609
|
args: [{
|
|
3610
3610
|
selector: '[libTooltip]',
|
|
@@ -3634,10 +3634,10 @@ class HintIcon {
|
|
|
3634
3634
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
3635
3635
|
size = input(14, /* @ts-ignore */
|
|
3636
3636
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3637
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3638
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
3637
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: HintIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3638
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: HintIcon, isStandalone: true, selector: "lib-hint-icon", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n class=\"inline-flex items-center text-role-caption hover:text-primary-hover cursor-pointer\"\n [libTooltip]=\"hint()\"\n tooltipPosition=\"top\"\n role=\"img\"\n tabindex=\"0\"\n [attr.aria-label]=\"hint()\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"size()\"\n [style.height.px]=\"size()\"\n aria-hidden=\"true\">\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,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z\" />\n </svg>\n</span>\n", dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[libTooltip]", inputs: ["libTooltip", "tooltipPosition", "tooltipClass", "tooltipShowDelay", "tooltipHideDuration"] }] });
|
|
3639
3639
|
}
|
|
3640
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: HintIcon, decorators: [{
|
|
3641
3641
|
type: Component,
|
|
3642
3642
|
args: [{ selector: 'lib-hint-icon', imports: [TooltipDirective], template: "<span\n class=\"inline-flex items-center text-role-caption hover:text-primary-hover cursor-pointer\"\n [libTooltip]=\"hint()\"\n tooltipPosition=\"top\"\n role=\"img\"\n tabindex=\"0\"\n [attr.aria-label]=\"hint()\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"size()\"\n [style.height.px]=\"size()\"\n aria-hidden=\"true\">\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,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z\" />\n </svg>\n</span>\n" }]
|
|
3643
3643
|
}], propDecorators: { hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
@@ -3659,10 +3659,10 @@ class BaseSignalInput {
|
|
|
3659
3659
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
3660
3660
|
inputId = input(null, /* @ts-ignore */
|
|
3661
3661
|
...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
3662
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3663
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
3662
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseSignalInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3663
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: BaseSignalInput, isStandalone: true, selector: "lib-base-signal-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showExternalLabel: { classPropertyName: "showExternalLabel", publicName: "showExternalLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "showRequired", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col\">\n @if (label() && showExternalLabel()) {\n <label\n class=\"text-body2 mb-2.5 flex items-center gap-0.5\"\n [class.text-role-disabled]=\"disabled()\"\n [attr.for]=\"inputId()\">\n <span>{{ label() }}</span>\n @if (showRequired()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </label>\n }\n\n <ng-content select=\"[input]\"></ng-content>\n\n <div\n class=\"grid transition-[grid-template-rows,margin-top] duration-300 ease-in-out\"\n [ngClass]=\"showError() ? 'grid-rows-[1fr] mt-2' : 'grid-rows-[0fr] mt-0'\">\n <p\n class=\"overflow-hidden min-h-0 text-caption text-error transition-[opacity,transform] duration-300 ease-in-out\"\n [class.opacity-0]=\"!showError()\"\n [class.opacity-100]=\"showError()\"\n [class.-translate-y-1]=\"!showError()\"\n [class.translate-y-0]=\"showError()\"\n [attr.role]=\"showError() ? 'alert' : null\"\n [attr.aria-hidden]=\"!showError()\">\n {{ showError() ? (errorMessage() ?? '') : '' }}\n </p>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
3664
3664
|
}
|
|
3665
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseSignalInput, decorators: [{
|
|
3666
3666
|
type: Component,
|
|
3667
3667
|
args: [{ selector: 'lib-base-signal-input', imports: [NgClass, HintIcon], template: "<div class=\"flex flex-col\">\n @if (label() && showExternalLabel()) {\n <label\n class=\"text-body2 mb-2.5 flex items-center gap-0.5\"\n [class.text-role-disabled]=\"disabled()\"\n [attr.for]=\"inputId()\">\n <span>{{ label() }}</span>\n @if (showRequired()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </label>\n }\n\n <ng-content select=\"[input]\"></ng-content>\n\n <div\n class=\"grid transition-[grid-template-rows,margin-top] duration-300 ease-in-out\"\n [ngClass]=\"showError() ? 'grid-rows-[1fr] mt-2' : 'grid-rows-[0fr] mt-0'\">\n <p\n class=\"overflow-hidden min-h-0 text-caption text-error transition-[opacity,transform] duration-300 ease-in-out\"\n [class.opacity-0]=\"!showError()\"\n [class.opacity-100]=\"showError()\"\n [class.-translate-y-1]=\"!showError()\"\n [class.translate-y-0]=\"showError()\"\n [attr.role]=\"showError() ? 'alert' : null\"\n [attr.aria-hidden]=\"!showError()\">\n {{ showError() ? (errorMessage() ?? '') : '' }}\n </p>\n </div>\n</div>\n" }]
|
|
3668
3668
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showExternalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExternalLabel", required: false }] }], showRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequired", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
|
|
@@ -4006,10 +4006,10 @@ class BaseFormControl {
|
|
|
4006
4006
|
this.touch.emit();
|
|
4007
4007
|
}
|
|
4008
4008
|
}
|
|
4009
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4010
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
4009
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4010
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: BaseFormControl, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", isFocused: "isFocusedChange" }, ngImport: i0 });
|
|
4011
4011
|
}
|
|
4012
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4012
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseFormControl, decorators: [{
|
|
4013
4013
|
type: Directive
|
|
4014
4014
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], isFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocused", required: false }] }, { type: i0.Output, args: ["isFocusedChange"] }] } });
|
|
4015
4015
|
|
|
@@ -4019,10 +4019,10 @@ class BaseSignalTextInputControl extends BaseFormControl {
|
|
|
4019
4019
|
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
4020
4020
|
size = input(this.nglConfig?.input?.size ?? DEFAULT_NGL_INPUT_CONFIG.size, /* @ts-ignore */
|
|
4021
4021
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
4022
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4023
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
4022
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseSignalTextInputControl, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
4023
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: BaseSignalTextInputControl, isStandalone: true, inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
|
|
4024
4024
|
}
|
|
4025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseSignalTextInputControl, decorators: [{
|
|
4026
4026
|
type: Directive
|
|
4027
4027
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
4028
4028
|
|
|
@@ -4172,10 +4172,10 @@ class SignalTextField extends BaseSignalTextInputControl {
|
|
|
4172
4172
|
this.valueChange.emit(val);
|
|
4173
4173
|
}
|
|
4174
4174
|
}
|
|
4175
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4176
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTextField, isStandalone: true, selector: "lib-signal-text-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, maskPattern: { classPropertyName: "maskPattern", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n <input\n #inputRef\n class=\"h-full w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [type]=\"inputType()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.pattern]=\"pattern()[0]?.source ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
4175
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTextField, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4176
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalTextField, isStandalone: true, selector: "lib-signal-text-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, maskPattern: { classPropertyName: "maskPattern", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n <input\n #inputRef\n class=\"h-full w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [type]=\"inputType()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.pattern]=\"pattern()[0]?.source ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
4177
4177
|
}
|
|
4178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTextField, decorators: [{
|
|
4179
4179
|
type: Component,
|
|
4180
4180
|
args: [{ selector: 'lib-signal-text-field', imports: [AppSvgIconComponent, BaseSignalInput, HintIcon, NgxMaskDirective], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n <input\n #inputRef\n class=\"h-full w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [type]=\"inputType()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.pattern]=\"pattern()[0]?.source ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
4181
4181
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }], maskPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
|
|
@@ -4438,10 +4438,10 @@ class SignalDataTableComponent extends BaseControlValueAccessorV3 {
|
|
|
4438
4438
|
onRowActionPerformed($event) {
|
|
4439
4439
|
this.onActionPerformed.emit($event);
|
|
4440
4440
|
}
|
|
4441
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4442
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDataTableComponent, isStandalone: true, selector: "app-signal-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 }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", 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 }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", 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: "toolbarContent", first: true, predicate: ["toolbarContent"], descendants: true }, { 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 <div\n class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n [class.hidden]=\"!showToolbar()\">\n @if (enableSearch()) {\n <lib-signal-text-field\n class=\"shrink-0\"\n [inputType]=\"'search'\"\n [placeholder]=\"'Search...'\"\n [prefixIcon]=\"'assets/icons/search.svg'\"\n [debounceValueChange]=\"true\"\n (valueChange)=\"onSearchTextChanged($event)\">\n </lib-signal-text-field>\n }\n <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n <ng-content></ng-content>\n </div>\n </div>\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().loading()) {\n <tbody aria-busy=\"true\" aria-live=\"polite\">\n @for (row of skeletonRows(); track row) {\n <tr class=\"border-b border-gray-100\">\n @if (expandableComponent()) {\n <td class=\"px-4 py-3\">\n <app-shimmer type=\"table-cell\" />\n </td>\n }\n\n @for (column of columnDefs(); track column) {\n @let isColumnVisible = column.visible || column.visible == undefined || false;\n @if (isColumnVisible) {\n <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n <app-shimmer type=\"table-cell\" />\n </td>\n }\n }\n\n @if (enableColumnsConfig()) {\n <td class=\"px-1 py-3\"></td>\n }\n </tr>\n }\n </tbody>\n }\n\n <!-- No Table Indicator-->\n @if (!state().loading() && state().success() && getRows().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().loading() && getRows().length > 0) {\n <tbody class=\"\">\n @for (item of getRows(); 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 [pageSizeOptions]=\"pageSizeOptions()\"\n [totalItems]=\"getTotalCount()\"\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", "type", "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: SignalTextField, selector: "lib-signal-text-field", inputs: ["label", "placeholder", "hint", "inputType", "mask", "prefixText", "prefixIcon", "postfixText", "postfixIcon", "enablePrefixBackground", "enablePostfixBackground", "id", "fieldName", "autocomplete", "minLength", "maxLength", "pattern", "showClearButton", "debounceValueChange", "debounceMs"], outputs: ["valueChange", "enter", "clear", "keyDown", "postfixIconClick"] }, { 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" }] });
|
|
4441
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalDataTableComponent, isStandalone: true, selector: "app-signal-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 }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", 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 }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", 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: "toolbarContent", first: true, predicate: ["toolbarContent"], descendants: true }, { 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 <div\n class=\"flex items-center gap-3 px-6 py-5 border-b border-neutral-100\"\n [class.hidden]=\"!showToolbar()\">\n @if (enableSearch()) {\n <lib-signal-text-field\n class=\"shrink-0\"\n [inputType]=\"'search'\"\n [placeholder]=\"'Search...'\"\n [prefixIcon]=\"'assets/icons/search.svg'\"\n [debounceValueChange]=\"true\"\n (valueChange)=\"onSearchTextChanged($event)\">\n </lib-signal-text-field>\n }\n <div #toolbarContent class=\"flex items-center gap-2 empty:hidden\">\n <ng-content></ng-content>\n </div>\n </div>\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().loading()) {\n <tbody aria-busy=\"true\" aria-live=\"polite\">\n @for (row of skeletonRows(); track row) {\n <tr class=\"border-b border-gray-100\">\n @if (expandableComponent()) {\n <td class=\"px-4 py-3\">\n <app-shimmer type=\"table-cell\" />\n </td>\n }\n\n @for (column of columnDefs(); track column) {\n @let isColumnVisible = column.visible || column.visible == undefined || false;\n @if (isColumnVisible) {\n <td class=\"px-4 py-3\" [ngClass]=\"getThTrClass(column)\">\n <app-shimmer type=\"table-cell\" />\n </td>\n }\n }\n\n @if (enableColumnsConfig()) {\n <td class=\"px-1 py-3\"></td>\n }\n </tr>\n }\n </tbody>\n }\n\n <!-- No Table Indicator-->\n @if (!state().loading() && state().success() && getRows().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().loading() && getRows().length > 0) {\n <tbody class=\"\">\n @for (item of getRows(); 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 [pageSizeOptions]=\"pageSizeOptions()\"\n [totalItems]=\"getTotalCount()\"\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", "type", "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: SignalTextField, selector: "lib-signal-text-field", inputs: ["label", "placeholder", "hint", "inputType", "mask", "prefixText", "prefixIcon", "postfixText", "postfixIcon", "enablePrefixBackground", "enablePostfixBackground", "id", "fieldName", "autocomplete", "minLength", "maxLength", "pattern", "showClearButton", "debounceValueChange", "debounceMs"], outputs: ["valueChange", "enter", "clear", "keyDown", "postfixIconClick"] }, { 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" }] });
|
|
4443
4443
|
}
|
|
4444
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4444
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDataTableComponent, decorators: [{
|
|
4445
4445
|
type: Component,
|
|
4446
4446
|
args: [{ selector: 'app-signal-data-table', standalone: true, imports: [
|
|
4447
4447
|
PaginationComponent,
|
|
@@ -4474,10 +4474,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
4474
4474
|
|
|
4475
4475
|
class EnvBannerComponent {
|
|
4476
4476
|
config = inject(NGL_CONFIG);
|
|
4477
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4478
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
4477
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: EnvBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4478
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] });
|
|
4479
4479
|
}
|
|
4480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4480
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: EnvBannerComponent, decorators: [{
|
|
4481
4481
|
type: Component,
|
|
4482
4482
|
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"] }]
|
|
4483
4483
|
}] });
|
|
@@ -4509,10 +4509,10 @@ class OpenFloatingMenuDirective {
|
|
|
4509
4509
|
});
|
|
4510
4510
|
}
|
|
4511
4511
|
}
|
|
4512
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4513
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
4512
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OpenFloatingMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4513
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: OpenFloatingMenuDirective, isStandalone: true, selector: "[libOpenFloatingMenu]", inputs: { component: ["libOpenFloatingMenu", "component"], floatingMenuPositionPreference: "floatingMenuPositionPreference", floatingMenuData: "floatingMenuData" }, outputs: { onFloatingMenuActionPerformed: "onFloatingMenuActionPerformed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
4514
4514
|
}
|
|
4515
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4515
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OpenFloatingMenuDirective, decorators: [{
|
|
4516
4516
|
type: Directive,
|
|
4517
4517
|
args: [{
|
|
4518
4518
|
selector: '[libOpenFloatingMenu]',
|
|
@@ -4936,10 +4936,10 @@ class InfiniteScrollDirective {
|
|
|
4936
4936
|
this.disposeScroller.unsubscribe();
|
|
4937
4937
|
}
|
|
4938
4938
|
}
|
|
4939
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4940
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
4939
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InfiniteScrollDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4940
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: InfiniteScrollDirective, isStandalone: true, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: { infiniteScrollDistance: "infiniteScrollDistance", infiniteScrollUpDistance: "infiniteScrollUpDistance", infiniteScrollThrottle: "infiniteScrollThrottle", infiniteScrollDisabled: "infiniteScrollDisabled", infiniteScrollContainer: "infiniteScrollContainer", scrollWindow: "scrollWindow", immediateCheck: "immediateCheck", horizontal: "horizontal", alwaysCallback: "alwaysCallback", fromRoot: "fromRoot" }, outputs: { scrolled: "scrolled", scrolledUp: "scrolledUp" }, usesOnChanges: true, ngImport: i0 });
|
|
4941
4941
|
}
|
|
4942
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InfiniteScrollDirective, decorators: [{
|
|
4943
4943
|
type: Directive,
|
|
4944
4944
|
args: [{
|
|
4945
4945
|
selector: '[infiniteScroll], [infinite-scroll], [data-infinite-scroll]',
|
|
@@ -5027,10 +5027,10 @@ class ListviewComponent {
|
|
|
5027
5027
|
onRowAction($event) {
|
|
5028
5028
|
this.onActionPerformed.emit($event);
|
|
5029
5029
|
}
|
|
5030
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5031
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
5030
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ListviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5031
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }] });
|
|
5032
5032
|
}
|
|
5033
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ListviewComponent, decorators: [{
|
|
5034
5034
|
type: Component,
|
|
5035
5035
|
args: [{ selector: 'app-listview', imports: [
|
|
5036
5036
|
InfiniteScrollDirective,
|
|
@@ -5050,10 +5050,10 @@ class LoaderService {
|
|
|
5050
5050
|
hide() {
|
|
5051
5051
|
this.loadingCount.update((current) => current - 1);
|
|
5052
5052
|
}
|
|
5053
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5054
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
5053
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5054
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LoaderService, providedIn: 'root' });
|
|
5055
5055
|
}
|
|
5056
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5056
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LoaderService, decorators: [{
|
|
5057
5057
|
type: Injectable,
|
|
5058
5058
|
args: [{
|
|
5059
5059
|
providedIn: 'root'
|
|
@@ -5062,10 +5062,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
5062
5062
|
|
|
5063
5063
|
class LoaderComponent {
|
|
5064
5064
|
loaderService = inject(LoaderService);
|
|
5065
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5066
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
5065
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5066
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }] });
|
|
5067
5067
|
}
|
|
5068
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
5069
5069
|
type: Component,
|
|
5070
5070
|
args: [{ selector: 'app-loader', standalone: true, imports: [
|
|
5071
5071
|
SpinnerComponent
|
|
@@ -5095,10 +5095,10 @@ class NetworkImageComponent {
|
|
|
5095
5095
|
handleImageError() {
|
|
5096
5096
|
this.isError.update((c) => true);
|
|
5097
5097
|
}
|
|
5098
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5099
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
5098
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NetworkImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5099
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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: [""] });
|
|
5100
5100
|
}
|
|
5101
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NetworkImageComponent, decorators: [{
|
|
5102
5102
|
type: Component,
|
|
5103
5103
|
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" }]
|
|
5104
5104
|
}], propDecorators: { placeholderImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderImage", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }] } });
|
|
@@ -5141,10 +5141,10 @@ class BaseOverlayComponent {
|
|
|
5141
5141
|
onCloseClicked() {
|
|
5142
5142
|
this.dialogRef.close();
|
|
5143
5143
|
}
|
|
5144
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
5144
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5145
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: BaseOverlayComponent, isStandalone: true, selector: "app-base-overlay", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showHeaderBorder: { classPropertyName: "showHeaderBorder", publicName: "showHeaderBorder", isSignal: true, isRequired: false, transformFunction: null }, showActionsBorder: { classPropertyName: "showActionsBorder", publicName: "showActionsBorder", 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 relative flex max-h-full min-h-0 flex-col overflow-hidden rounded-3xl bg-white\">\n\n @if (enableDefaultLayout()) {\n @if (showTitle()) {\n <div\n class=\"flex shrink-0 items-start gap-2 px-5 py-4\"\n [class.border-b]=\"showHeaderBorder()\"\n [class.border-neutral-200]=\"showHeaderBorder()\">\n\n @if (showBackButton()) {\n <button\n type=\"button\"\n class=\"shrink-0 cursor-pointer rounded-full p-2 text-neutral-600 transition-colors hover:bg-neutral-50\"\n (click)=\"goBack()\"\n aria-label=\"Back\">\n <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" 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 </button>\n }\n\n <div class=\"min-w-0 flex-1 pt-0.5\">\n <div class=\"text-h6 text-role-body\">{{ title() }}</div>\n @if (description()) {\n <p class=\"mt-1.5 text-body2 text-neutral-500 text-role-caption\">{{ description() }}</p>\n }\n </div>\n\n <button\n type=\"button\"\n class=\"shrink-0 cursor-pointer rounded-lg p-2 text-neutral-600 transition-colors hover:bg-neutral-50\"\n (click)=\"onCloseClicked()\"\n aria-label=\"Close\">\n <svg class=\"h-[18px] w-[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 </button>\n </div>\n }\n }\n\n <div\n class=\"min-h-0 flex-1 overflow-y-auto overscroll-y-contain\"\n [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\n #actionsContainer\n class=\"actions-container shrink-0 px-4 py-4\"\n [class.border-t]=\"showActionsBorder()\"\n [class.border-neutral-200]=\"showActionsBorder()\">\n <div #actions class=\"w-full\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </div>\n }\n\n</div>\n", styles: [":host{display:block;max-height:100%;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
5146
5146
|
}
|
|
5147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseOverlayComponent, decorators: [{
|
|
5148
5148
|
type: Component,
|
|
5149
5149
|
args: [{ selector: 'app-base-overlay', imports: [
|
|
5150
5150
|
NgClass
|
|
@@ -5225,10 +5225,10 @@ class ResponsiveHelperComponent {
|
|
|
5225
5225
|
onResize(event) {
|
|
5226
5226
|
this.screenWidth.set(this.document.documentElement.clientWidth);
|
|
5227
5227
|
}
|
|
5228
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5229
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
5228
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ResponsiveHelperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5229
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: ResponsiveHelperComponent, isStandalone: true, selector: "app-responsive-helper", host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "@if (config.enableDevTools) {\n <div\n class=\"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: [""] });
|
|
5230
5230
|
}
|
|
5231
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ResponsiveHelperComponent, decorators: [{
|
|
5232
5232
|
type: Component,
|
|
5233
5233
|
args: [{ selector: 'app-responsive-helper', standalone: true, imports: [], template: "@if (config.enableDevTools) {\n <div\n class=\"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" }]
|
|
5234
5234
|
}], ctorParameters: () => [], propDecorators: { onResize: [{
|
|
@@ -5253,10 +5253,10 @@ class SvgUrlIconComponent {
|
|
|
5253
5253
|
console.error('Failed to load SVG:', error);
|
|
5254
5254
|
});
|
|
5255
5255
|
}
|
|
5256
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
5256
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SvgUrlIconComponent, deps: [{ token: i1$1.HttpClient }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
5257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", 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: [""] });
|
|
5258
5258
|
}
|
|
5259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SvgUrlIconComponent, decorators: [{
|
|
5260
5260
|
type: Component,
|
|
5261
5261
|
args: [{ selector: 'app-svg-url-icon', standalone: true, imports: [], template: "<div [innerHTML]=\"svgIcon\"></div>\n" }]
|
|
5262
5262
|
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2.DomSanitizer }], propDecorators: { svgUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgUrl", required: true }] }] } });
|
|
@@ -5332,10 +5332,10 @@ class ToastService {
|
|
|
5332
5332
|
duration: duration
|
|
5333
5333
|
});
|
|
5334
5334
|
}
|
|
5335
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5336
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
5335
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5336
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
5337
5337
|
}
|
|
5338
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5338
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ToastService, decorators: [{
|
|
5339
5339
|
type: Injectable,
|
|
5340
5340
|
args: [{
|
|
5341
5341
|
providedIn: 'root'
|
|
@@ -5347,10 +5347,10 @@ class ToastCloseButtonComponent {
|
|
|
5347
5347
|
onCloseClick() {
|
|
5348
5348
|
this.closeEvent.emit();
|
|
5349
5349
|
}
|
|
5350
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5351
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
5350
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ToastCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5351
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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: [""] });
|
|
5352
5352
|
}
|
|
5353
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5353
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ToastCloseButtonComponent, decorators: [{
|
|
5354
5354
|
type: Component,
|
|
5355
5355
|
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" }]
|
|
5356
5356
|
}], propDecorators: { closeEvent: [{
|
|
@@ -5392,10 +5392,10 @@ class ToastComponent {
|
|
|
5392
5392
|
}
|
|
5393
5393
|
ngOnDestroy() {
|
|
5394
5394
|
}
|
|
5395
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5396
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
5395
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5396
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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\n class=\"toast-panel mb-3 flex min-w-72 max-w-96 items-center gap-3 rounded-full border border-neutral-100 bg-white px-4 py-3 shadow-[0_8px_24px_rgb(15_23_42/0.10)]\"\n [ngClass]=\"themeClass()\">\n <div class=\"flex shrink-0 items-center justify-center\">\n @switch (type) {\n @case (ToastType.success) {\n <div class=\"flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-white\">\n <svg height=\"18\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\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 </div>\n }\n @case (ToastType.error) {\n <div class=\"flex h-8 w-8 items-center justify-center rounded-full bg-red-500 text-white\">\n <svg height=\"18\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\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 </div>\n }\n @case (ToastType.info) {\n <div class=\"flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-white\">\n <svg height=\"18\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\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 </div>\n }\n @case (ToastType.warning) {\n <div class=\"flex h-8 w-8 items-center justify-center rounded-full bg-amber-500 text-white\">\n <svg height=\"18\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\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 </div>\n }\n }\n </div>\n\n <div class=\"min-w-0 flex-1 flex flex-col gap-0.5\">\n @if (title) {\n <p class=\"truncate text-sm font-semibold text-neutral-900\">{{ title }}</p>\n }\n @if (message) {\n <p\n class=\"text-sm\"\n [class.truncate]=\"!!title\"\n [class.text-neutral-500]=\"!!title\"\n [class.font-semibold]=\"!title\"\n [class.text-neutral-900]=\"!title\">\n {{ message }}\n </p>\n }\n </div>\n\n <app-toast-close-button (closeEvent)=\"hide()\"></app-toast-close-button>\n</div>\n", styles: ["@keyframes toast-slide-in{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}:host{display:block}.toast-panel{animation:toast-slide-in .25s ease-out}.toast-panel.bg-black{background-color:#111827;border-color:#1f2937;color:#f9fafb}.toast-panel.bg-black .text-neutral-900{color:#f9fafb}.toast-panel.bg-black .text-neutral-500{color:#9ca3af}\n"], dependencies: [{ kind: "component", type: ToastCloseButtonComponent, selector: "app-toast-close-button", outputs: ["closeEvent"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
5397
5397
|
}
|
|
5398
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ToastComponent, decorators: [{
|
|
5399
5399
|
type: Component,
|
|
5400
5400
|
args: [{ selector: 'app-toast', standalone: true, imports: [
|
|
5401
5401
|
ToastCloseButtonComponent,
|
|
@@ -5437,10 +5437,10 @@ class ToasterComponent {
|
|
|
5437
5437
|
this.currentToasts.splice(index, 1);
|
|
5438
5438
|
this.cdr.detectChanges();
|
|
5439
5439
|
}
|
|
5440
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5441
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
5440
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ToasterComponent, deps: [{ token: ToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5441
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 class=\"toaster-item\">\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:10050;pointer-events:none}.toaster-item{pointer-events:auto}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "app-toast", inputs: ["type", "title", "message", "duration", "themeType"], outputs: ["disposeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5442
5442
|
}
|
|
5443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5443
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ToasterComponent, decorators: [{
|
|
5444
5444
|
type: Component,
|
|
5445
5445
|
args: [{ selector: 'app-toaster', standalone: true, imports: [
|
|
5446
5446
|
ToastComponent
|
|
@@ -5468,10 +5468,10 @@ class ClickOutsideDirective {
|
|
|
5468
5468
|
let isInside = elementToCheck === this.element.nativeElement || this.element.nativeElement.contains(elementToCheck);
|
|
5469
5469
|
return isInside;
|
|
5470
5470
|
}
|
|
5471
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5472
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
5471
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
5472
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
|
|
5473
5473
|
}
|
|
5474
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
5475
5475
|
type: Directive,
|
|
5476
5476
|
args: [{
|
|
5477
5477
|
selector: '[clickOutside]',
|
|
@@ -5515,10 +5515,10 @@ class InvalidControlScrollDirective {
|
|
|
5515
5515
|
return null;
|
|
5516
5516
|
}
|
|
5517
5517
|
}
|
|
5518
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5519
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
5518
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InvalidControlScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
5519
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: InvalidControlScrollDirective, isStandalone: true, selector: "[appInvalidControlScroll]", host: { listeners: { "ngSubmit": "onSubmit()" } }, ngImport: i0 });
|
|
5520
5520
|
}
|
|
5521
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5521
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InvalidControlScrollDirective, decorators: [{
|
|
5522
5522
|
type: Directive,
|
|
5523
5523
|
args: [{
|
|
5524
5524
|
selector: '[appInvalidControlScroll]',
|
|
@@ -5568,10 +5568,10 @@ class InvalidControlScrollContainerDirective {
|
|
|
5568
5568
|
return absoluteControlElTop - labelOffset;
|
|
5569
5569
|
}
|
|
5570
5570
|
}
|
|
5571
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5572
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
5571
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InvalidControlScrollContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
5572
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: InvalidControlScrollContainerDirective, isStandalone: true, selector: "[appInvalidControlScrollContainer]", host: { listeners: { "ngSubmit": "onSubmit()" } }, ngImport: i0 });
|
|
5573
5573
|
}
|
|
5574
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5574
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InvalidControlScrollContainerDirective, decorators: [{
|
|
5575
5575
|
type: Directive,
|
|
5576
5576
|
args: [{
|
|
5577
5577
|
selector: '[appInvalidControlScrollContainer]',
|
|
@@ -5635,10 +5635,10 @@ class AppErrorComponent {
|
|
|
5635
5635
|
get hasErrors() {
|
|
5636
5636
|
return (this.control() && this.control()?.touched && this.control()?.errors) ?? false;
|
|
5637
5637
|
}
|
|
5638
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5639
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
5638
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AppErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5639
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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" }] });
|
|
5640
5640
|
}
|
|
5641
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5641
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AppErrorComponent, decorators: [{
|
|
5642
5642
|
type: Component,
|
|
5643
5643
|
args: [{ selector: 'app-error', imports: [
|
|
5644
5644
|
HumanizeFormMessagesPipe
|
|
@@ -5894,10 +5894,10 @@ class DatePickerComponent extends BaseControlValueAccessorV3 {
|
|
|
5894
5894
|
getLastYear() {
|
|
5895
5895
|
return this.years[this.years.length - 1].value;
|
|
5896
5896
|
}
|
|
5897
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5898
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
5897
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5898
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }] });
|
|
5899
5899
|
}
|
|
5900
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5900
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
5901
5901
|
type: Component,
|
|
5902
5902
|
args: [{ selector: 'app-date-picker', imports: [
|
|
5903
5903
|
NgClass
|
|
@@ -5910,10 +5910,10 @@ class DatePickerOverlayComponent {
|
|
|
5910
5910
|
onDateSelected($event) {
|
|
5911
5911
|
this.dialogRef.close($event);
|
|
5912
5912
|
}
|
|
5913
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5914
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
5913
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DatePickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5914
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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"] }] });
|
|
5915
5915
|
}
|
|
5916
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5916
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DatePickerOverlayComponent, decorators: [{
|
|
5917
5917
|
type: Component,
|
|
5918
5918
|
args: [{ selector: 'app-date-picker-overlay', imports: [
|
|
5919
5919
|
DatePickerComponent
|
|
@@ -6112,10 +6112,10 @@ class DateInputComponent extends BaseControlValueAccessorV3 {
|
|
|
6112
6112
|
const yyyy = date.getFullYear();
|
|
6113
6113
|
return this.inputDateFormat() === InputDateFormat.mmddyyyy ? `${mm}/${dd}/${yyyy}` : `${dd}/${mm}/${yyyy}`;
|
|
6114
6114
|
}
|
|
6115
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
6116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
6115
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DateInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6116
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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" }] });
|
|
6117
6117
|
}
|
|
6118
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6118
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
6119
6119
|
type: Component,
|
|
6120
6120
|
args: [{ selector: 'app-date-input', standalone: true, imports: [
|
|
6121
6121
|
HumanizeFormMessagesPipe,
|
|
@@ -6418,10 +6418,10 @@ class DateRangePickerComponent extends BaseControlValueAccessorV3 {
|
|
|
6418
6418
|
this.hoveredDate = null;
|
|
6419
6419
|
this.onValueChange(null);
|
|
6420
6420
|
}
|
|
6421
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
6422
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
6421
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DateRangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6422
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }] });
|
|
6423
6423
|
}
|
|
6424
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
6425
6425
|
type: Component,
|
|
6426
6426
|
args: [{ selector: 'app-date-range-picker', imports: [
|
|
6427
6427
|
NgClass
|
|
@@ -6748,10 +6748,10 @@ class DropdownComponent extends BaseControlValueAccessorV2 {
|
|
|
6748
6748
|
return current === value;
|
|
6749
6749
|
});
|
|
6750
6750
|
}
|
|
6751
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
6752
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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{width:4px}.scrollbar::-webkit-scrollbar-thumb{background-color:#bfdbfe;border-radius:9999px}.scrollbar::-webkit-scrollbar-track{background-color:#eff6ffcc}\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" }] });
|
|
6751
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6752
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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{width:4px}.scrollbar::-webkit-scrollbar-thumb{background-color:#bfdbfe;border-radius:9999px}.scrollbar::-webkit-scrollbar-track{background-color:#eff6ffcc}\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" }] });
|
|
6753
6753
|
}
|
|
6754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
6755
6755
|
type: Component,
|
|
6756
6756
|
args: [{ selector: 'app-dropdown', standalone: true, imports: [
|
|
6757
6757
|
ReactiveFormsModule,
|
|
@@ -6858,10 +6858,10 @@ class FileUploaderComponent extends BaseControlValueAccessor {
|
|
|
6858
6858
|
return fileName ? decodeURIComponent(fileName) : '';
|
|
6859
6859
|
}
|
|
6860
6860
|
}
|
|
6861
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
6862
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
6861
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6862
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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" }] });
|
|
6863
6863
|
}
|
|
6864
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FileUploaderComponent, decorators: [{
|
|
6865
6865
|
type: Component,
|
|
6866
6866
|
args: [{ selector: 'app-file-uploader', standalone: true, imports: [
|
|
6867
6867
|
SpinnerComponent,
|
|
@@ -7247,10 +7247,10 @@ class MultiSelectDropdownComponent extends BaseControlValueAccessor {
|
|
|
7247
7247
|
onAddActionClicked() {
|
|
7248
7248
|
this.addActionClicked.emit();
|
|
7249
7249
|
}
|
|
7250
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
7251
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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" }] });
|
|
7250
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MultiSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7251
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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" }] });
|
|
7252
7252
|
}
|
|
7253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
7253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MultiSelectDropdownComponent, decorators: [{
|
|
7254
7254
|
type: Component,
|
|
7255
7255
|
args: [{ selector: 'app-multi-select-dropdown', standalone: true, imports: [
|
|
7256
7256
|
BaseInputComponent,
|
|
@@ -7559,10 +7559,10 @@ class MultiSelectionFieldComponent extends BaseControlValueAccessor {
|
|
|
7559
7559
|
break;
|
|
7560
7560
|
}
|
|
7561
7561
|
}
|
|
7562
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
7563
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
7562
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MultiSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7563
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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" }] });
|
|
7564
7564
|
}
|
|
7565
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
7565
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MultiSelectionFieldComponent, decorators: [{
|
|
7566
7566
|
type: Component,
|
|
7567
7567
|
args: [{ selector: 'app-multi-selection-field', standalone: true, imports: [
|
|
7568
7568
|
BaseInputComponent,
|
|
@@ -7589,10 +7589,10 @@ class NumberInputComponent extends BaseControlValueAccessorV2 {
|
|
|
7589
7589
|
}
|
|
7590
7590
|
text(someType) {
|
|
7591
7591
|
}
|
|
7592
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
7593
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
7592
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7593
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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"] }] });
|
|
7594
7594
|
}
|
|
7595
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
7595
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
7596
7596
|
type: Component,
|
|
7597
7597
|
args: [{ selector: 'app-number-input', standalone: true, imports: [
|
|
7598
7598
|
ButtonComponent
|
|
@@ -7600,10 +7600,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
7600
7600
|
}], propDecorators: { valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
|
|
7601
7601
|
|
|
7602
7602
|
class PhoneNumberInputComponent {
|
|
7603
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
7604
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
7603
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: PhoneNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7604
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: PhoneNumberInputComponent, isStandalone: true, selector: "app-phone-number-input", ngImport: i0, template: "", styles: [""] });
|
|
7605
7605
|
}
|
|
7606
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
7606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
|
|
7607
7607
|
type: Component,
|
|
7608
7608
|
args: [{ selector: 'app-phone-number-input', imports: [], template: "" }]
|
|
7609
7609
|
}] });
|
|
@@ -7650,10 +7650,10 @@ class RadioButtonComponent extends BaseControlValueAccessor {
|
|
|
7650
7650
|
const randomNumber = Math.floor(1000 + Math.random() * 9000);
|
|
7651
7651
|
return `radio-button-${randomNumber.toString()}`;
|
|
7652
7652
|
}
|
|
7653
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
7654
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
7653
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7654
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[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"] }] });
|
|
7655
7655
|
}
|
|
7656
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
7656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
7657
7657
|
type: Component,
|
|
7658
7658
|
args: [{ selector: 'app-radio-button', standalone: true, imports: [
|
|
7659
7659
|
ReactiveFormsModule
|
|
@@ -7724,10 +7724,10 @@ class SingleItemPickerInputComponent extends BaseControlValueAccessor {
|
|
|
7724
7724
|
togglePopup() {
|
|
7725
7725
|
this.isPopUpOpen.update(p => !p);
|
|
7726
7726
|
}
|
|
7727
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
7728
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
7727
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SingleItemPickerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7728
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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" }] });
|
|
7729
7729
|
}
|
|
7730
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
7730
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SingleItemPickerInputComponent, decorators: [{
|
|
7731
7731
|
type: Component,
|
|
7732
7732
|
args: [{ selector: 'app-single-item-picker-input', standalone: true, imports: [
|
|
7733
7733
|
AppSvgIconComponent,
|
|
@@ -7906,10 +7906,10 @@ class SingleSelectionFieldComponent extends BaseControlValueAccessor {
|
|
|
7906
7906
|
break;
|
|
7907
7907
|
}
|
|
7908
7908
|
}
|
|
7909
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
7910
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
7909
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SingleSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7910
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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" }] });
|
|
7911
7911
|
}
|
|
7912
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
7912
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SingleSelectionFieldComponent, decorators: [{
|
|
7913
7913
|
type: Component,
|
|
7914
7914
|
args: [{ selector: 'app-single-selection-field', standalone: true, imports: [
|
|
7915
7915
|
BaseInputComponent,
|
|
@@ -7960,10 +7960,10 @@ class SwitchComponent extends BaseControlValueAccessor {
|
|
|
7960
7960
|
const randomNumber = Math.floor(1000 + Math.random() * 9000);
|
|
7961
7961
|
return `checkbox-${randomNumber.toString()}`;
|
|
7962
7962
|
}
|
|
7963
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
7964
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
7963
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7964
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 }] });
|
|
7965
7965
|
}
|
|
7966
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
7966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
7967
7967
|
type: Component,
|
|
7968
7968
|
args: [{ selector: 'app-switch', standalone: true, imports: [
|
|
7969
7969
|
ReactiveFormsModule
|
|
@@ -8012,10 +8012,10 @@ class TextAreaInputComponent extends BaseControlValueAccessor {
|
|
|
8012
8012
|
}
|
|
8013
8013
|
onWriteValue(obj) {
|
|
8014
8014
|
}
|
|
8015
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
8016
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
8015
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TextAreaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8016
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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" }] });
|
|
8017
8017
|
}
|
|
8018
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
8018
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TextAreaInputComponent, decorators: [{
|
|
8019
8019
|
type: Component,
|
|
8020
8020
|
args: [{ selector: 'app-text-area-input', standalone: true, imports: [
|
|
8021
8021
|
ReactiveFormsModule,
|
|
@@ -8226,10 +8226,10 @@ class TimePickerComponent extends BaseControlValueAccessorV2 {
|
|
|
8226
8226
|
onClickOutside() {
|
|
8227
8227
|
this.isOpen.set(false);
|
|
8228
8228
|
}
|
|
8229
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
8230
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
8229
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
8230
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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" }] });
|
|
8231
8231
|
}
|
|
8232
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
8232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
8233
8233
|
type: Component,
|
|
8234
8234
|
args: [{ selector: 'app-time-picker', standalone: true, imports: [
|
|
8235
8235
|
NgClass,
|
|
@@ -8561,10 +8561,10 @@ class SignalNumberField extends BaseSignalTextInputControl {
|
|
|
8561
8561
|
this.valueChange.emit(val);
|
|
8562
8562
|
}
|
|
8563
8563
|
}
|
|
8564
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
8565
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalNumberField, isStandalone: true, selector: "lib-signal-number-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, numberMin: { classPropertyName: "numberMin", publicName: "numberMin", isSignal: true, isRequired: false, transformFunction: null }, numberMax: { classPropertyName: "numberMax", publicName: "numberMax", isSignal: true, isRequired: false, transformFunction: null }, numberStep: { classPropertyName: "numberStep", publicName: "numberStep", isSignal: true, isRequired: false, transformFunction: null }, hideSpinButtons: { classPropertyName: "hideSpinButtons", publicName: "hideSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, host: { properties: { "class.hide-number-spin": "hideSpinButtons()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n <input\n #inputRef\n class=\"h-full w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n type=\"number\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"numberInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.min]=\"numberMin() ?? null\"\n [attr.max]=\"numberMax() ?? null\"\n [attr.step]=\"numberStep() ?? null\"\n [attr.inputmode]=\"inputMode()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: [":host(.hide-number-spin) input[type=number]::-webkit-inner-spin-button,:host(.hide-number-spin) input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}:host(.hide-number-spin) input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
8564
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalNumberField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8565
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalNumberField, isStandalone: true, selector: "lib-signal-number-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, numberMin: { classPropertyName: "numberMin", publicName: "numberMin", isSignal: true, isRequired: false, transformFunction: null }, numberMax: { classPropertyName: "numberMax", publicName: "numberMax", isSignal: true, isRequired: false, transformFunction: null }, numberStep: { classPropertyName: "numberStep", publicName: "numberStep", isSignal: true, isRequired: false, transformFunction: null }, hideSpinButtons: { classPropertyName: "hideSpinButtons", publicName: "hideSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, host: { properties: { "class.hide-number-spin": "hideSpinButtons()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n <input\n #inputRef\n class=\"h-full w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n type=\"number\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"numberInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.min]=\"numberMin() ?? null\"\n [attr.max]=\"numberMax() ?? null\"\n [attr.step]=\"numberStep() ?? null\"\n [attr.inputmode]=\"inputMode()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: [":host(.hide-number-spin) input[type=number]::-webkit-inner-spin-button,:host(.hide-number-spin) input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}:host(.hide-number-spin) input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
8566
8566
|
}
|
|
8567
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
8567
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalNumberField, decorators: [{
|
|
8568
8568
|
type: Component,
|
|
8569
8569
|
args: [{ selector: 'lib-signal-number-field', imports: [AppSvgIconComponent, BaseSignalInput, HintIcon], host: {
|
|
8570
8570
|
'[class.hide-number-spin]': 'hideSpinButtons()',
|
|
@@ -9077,10 +9077,10 @@ class SignalPhoneCountryPanelComponent {
|
|
|
9077
9077
|
const index = list.findIndex((country) => country.id === selected?.id);
|
|
9078
9078
|
this.highlightedIndex.set(index >= 0 ? index : list.length > 0 ? 0 : -1);
|
|
9079
9079
|
}
|
|
9080
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
9081
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
9080
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalPhoneCountryPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9081
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalPhoneCountryPanelComponent, isStandalone: true, selector: "lib-signal-phone-country-panel", inputs: { countries: { classPropertyName: "countries", publicName: "countries", isSignal: true, isRequired: false, transformFunction: null }, selectedCountry: { classPropertyName: "selectedCountry", publicName: "selectedCountry", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, listboxLabelledBy: { classPropertyName: "listboxLabelledBy", publicName: "listboxLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { countrySelected: "countrySelected", dismissed: "dismissed" }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["searchField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"flex flex-col rounded-xl bg-page border border-default shadow-lg overflow-hidden focus:outline-none\"\n [id]=\"panelId()\"\n [style.width.px]=\"panelWidth() ?? 320\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"listboxLabelledBy()\"\n (keydown)=\"onPanelKeyDown($event)\">\n <div class=\"relative flex items-center w-full border-b border-default\">\n <svg\n class=\"absolute pointer-events-none ml-3 text-role-caption\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n\n <input\n #searchField\n type=\"text\"\n aria-label=\"Search countries\"\n placeholder=\"Search...\"\n class=\"h-11 pr-10 pl-10 text-body2 text-role-body placeholder:text-role-placeholder border-0 outline-none bg-transparent w-full\"\n (input)=\"onSearchInput($event)\" />\n\n @if (searchQuery()) {\n <button\n type=\"button\"\n aria-label=\"Clear search\"\n class=\"absolute right-2 p-1.5 flex justify-center items-center hover:bg-page-secondary rounded-full cursor-pointer text-role-caption\"\n (click)=\"onClearSearch($event)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize() - 4\"\n [style.height.px]=\"iconSize() - 4\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n </div>\n\n <div class=\"max-h-60 overflow-y-auto\">\n @for (country of filteredCountries(); track country.id; let i = $index) {\n <button\n type=\"button\"\n role=\"option\"\n class=\"block w-full px-4 py-3 text-left text-body2 transition-colors duration-200 cursor-pointer\"\n [class.bg-page-secondary]=\"highlightedIndex() === i\"\n [class.text-primary]=\"isCountrySelected(country)\"\n [class.text-role-body]=\"!isCountrySelected(country)\"\n [class.hover:bg-page-secondary]=\"true\"\n [attr.aria-selected]=\"isCountrySelected(country)\"\n (click)=\"countrySelected.emit(country)\">\n {{ getDisplayLabel(country) }}\n </button>\n } @empty {\n <span class=\"block px-4 py-4 text-body2 text-role-placeholder select-none\">\n {{ noOptionsMessage() }}\n </span>\n }\n </div>\n</div>\n" });
|
|
9082
9082
|
}
|
|
9083
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
9083
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalPhoneCountryPanelComponent, decorators: [{
|
|
9084
9084
|
type: Component,
|
|
9085
9085
|
args: [{ selector: 'lib-signal-phone-country-panel', template: "<div\n class=\"flex flex-col rounded-xl bg-page border border-default shadow-lg overflow-hidden focus:outline-none\"\n [id]=\"panelId()\"\n [style.width.px]=\"panelWidth() ?? 320\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"listboxLabelledBy()\"\n (keydown)=\"onPanelKeyDown($event)\">\n <div class=\"relative flex items-center w-full border-b border-default\">\n <svg\n class=\"absolute pointer-events-none ml-3 text-role-caption\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n\n <input\n #searchField\n type=\"text\"\n aria-label=\"Search countries\"\n placeholder=\"Search...\"\n class=\"h-11 pr-10 pl-10 text-body2 text-role-body placeholder:text-role-placeholder border-0 outline-none bg-transparent w-full\"\n (input)=\"onSearchInput($event)\" />\n\n @if (searchQuery()) {\n <button\n type=\"button\"\n aria-label=\"Clear search\"\n class=\"absolute right-2 p-1.5 flex justify-center items-center hover:bg-page-secondary rounded-full cursor-pointer text-role-caption\"\n (click)=\"onClearSearch($event)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize() - 4\"\n [style.height.px]=\"iconSize() - 4\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n </div>\n\n <div class=\"max-h-60 overflow-y-auto\">\n @for (country of filteredCountries(); track country.id; let i = $index) {\n <button\n type=\"button\"\n role=\"option\"\n class=\"block w-full px-4 py-3 text-left text-body2 transition-colors duration-200 cursor-pointer\"\n [class.bg-page-secondary]=\"highlightedIndex() === i\"\n [class.text-primary]=\"isCountrySelected(country)\"\n [class.text-role-body]=\"!isCountrySelected(country)\"\n [class.hover:bg-page-secondary]=\"true\"\n [attr.aria-selected]=\"isCountrySelected(country)\"\n (click)=\"countrySelected.emit(country)\">\n {{ getDisplayLabel(country) }}\n </button>\n } @empty {\n <span class=\"block px-4 py-4 text-body2 text-role-placeholder select-none\">\n {{ noOptionsMessage() }}\n </span>\n }\n </div>\n</div>\n" }]
|
|
9086
9086
|
}], propDecorators: { countries: [{ type: i0.Input, args: [{ isSignal: true, alias: "countries", required: false }] }], selectedCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountry", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], listboxLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "listboxLabelledBy", required: false }] }], panelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelId", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], countrySelected: [{ type: i0.Output, args: ["countrySelected"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], searchField: [{ type: i0.ViewChild, args: ['searchField', { isSignal: true }] }] } });
|
|
@@ -9338,10 +9338,10 @@ class SignalPhoneNumberField extends BaseSignalTextInputControl {
|
|
|
9338
9338
|
this.valueChange.emit(val);
|
|
9339
9339
|
}
|
|
9340
9340
|
}
|
|
9341
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
9342
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalPhoneNumberField, isStandalone: true, selector: "lib-signal-phone-number-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, phoneNumbers: { classPropertyName: "phoneNumbers", publicName: "phoneNumbers", isSignal: true, isRequired: false, transformFunction: null }, defaultCountryId: { classPropertyName: "defaultCountryId", publicName: "defaultCountryId", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", countryChange: "countryChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "countryButton", first: true, predicate: ["countryButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n <button\n #countryButton\n type=\"button\"\n class=\"flex shrink-0 items-center gap-1 self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption cursor-pointer transition-colors duration-200 ease-in-out hover:bg-page-secondary/80 disabled:cursor-not-allowed\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isCountryPickerOpen() && !showError() && !disabled()\"\n [id]=\"countryButtonId()\"\n [disabled]=\"disabled()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isCountryPickerOpen()\"\n [attr.aria-controls]=\"countryButtonId() + '-panel'\"\n (click)=\"toggleCountryPicker()\"\n (keydown)=\"onCountryButtonKeyDown($event)\">\n <span class=\"text-base leading-none\" aria-hidden=\"true\">{{ selectedCountry().flag }}</span>\n <span>+{{ selectedCountry().dialCode }}</span>\n <span\n class=\"flex items-center justify-center\"\n [class.rotate-180]=\"isCountryPickerOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </button>\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"tel\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [mask]=\"activeMask()\"\n [showMaskTyped]=\"isFocused()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"nationalInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.inputmode]=\"'tel'\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (hasAbsoluteClear() || showInFieldHint()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"countryButton\"\n [cdkConnectedOverlayOpen]=\"isCountryPickerOpen()\"\n (overlayOutsideClick)=\"closeCountryPicker()\"\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]=\"repositionScrollStrategy\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-phone-country-panel\n [panelId]=\"countryButtonId() + '-panel'\"\n [countries]=\"countries()\"\n [selectedCountry]=\"selectedCountry()\"\n [iconSize]=\"iconSize()\"\n [panelWidth]=\"countryPanelWidth()\"\n [listboxLabelledBy]=\"countryButtonId()\"\n (countrySelected)=\"onCountrySelected($event)\"\n (dismissed)=\"closeCountryPicker()\" />\n </ng-template>\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { 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: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { 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: "component", type: SignalPhoneCountryPanelComponent, selector: "lib-signal-phone-country-panel", inputs: ["countries", "selectedCountry", "iconSize", "panelWidth", "listboxLabelledBy", "panelId", "noOptionsMessage"], outputs: ["countrySelected", "dismissed"] }] });
|
|
9341
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalPhoneNumberField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalPhoneNumberField, isStandalone: true, selector: "lib-signal-phone-number-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, phoneNumbers: { classPropertyName: "phoneNumbers", publicName: "phoneNumbers", isSignal: true, isRequired: false, transformFunction: null }, defaultCountryId: { classPropertyName: "defaultCountryId", publicName: "defaultCountryId", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", countryChange: "countryChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "countryButton", first: true, predicate: ["countryButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n <button\n #countryButton\n type=\"button\"\n class=\"flex shrink-0 items-center gap-1 self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption cursor-pointer transition-colors duration-200 ease-in-out hover:bg-page-secondary/80 disabled:cursor-not-allowed\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isCountryPickerOpen() && !showError() && !disabled()\"\n [id]=\"countryButtonId()\"\n [disabled]=\"disabled()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isCountryPickerOpen()\"\n [attr.aria-controls]=\"countryButtonId() + '-panel'\"\n (click)=\"toggleCountryPicker()\"\n (keydown)=\"onCountryButtonKeyDown($event)\">\n <span class=\"text-base leading-none\" aria-hidden=\"true\">{{ selectedCountry().flag }}</span>\n <span>+{{ selectedCountry().dialCode }}</span>\n <span\n class=\"flex items-center justify-center\"\n [class.rotate-180]=\"isCountryPickerOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </button>\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"tel\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [mask]=\"activeMask()\"\n [showMaskTyped]=\"isFocused()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"nationalInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.inputmode]=\"'tel'\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (hasAbsoluteClear() || showInFieldHint()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"countryButton\"\n [cdkConnectedOverlayOpen]=\"isCountryPickerOpen()\"\n (overlayOutsideClick)=\"closeCountryPicker()\"\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]=\"repositionScrollStrategy\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-phone-country-panel\n [panelId]=\"countryButtonId() + '-panel'\"\n [countries]=\"countries()\"\n [selectedCountry]=\"selectedCountry()\"\n [iconSize]=\"iconSize()\"\n [panelWidth]=\"countryPanelWidth()\"\n [listboxLabelledBy]=\"countryButtonId()\"\n (countrySelected)=\"onCountrySelected($event)\"\n (dismissed)=\"closeCountryPicker()\" />\n </ng-template>\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { 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: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { 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: "component", type: SignalPhoneCountryPanelComponent, selector: "lib-signal-phone-country-panel", inputs: ["countries", "selectedCountry", "iconSize", "panelWidth", "listboxLabelledBy", "panelId", "noOptionsMessage"], outputs: ["countrySelected", "dismissed"] }] });
|
|
9343
9343
|
}
|
|
9344
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
9344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalPhoneNumberField, decorators: [{
|
|
9345
9345
|
type: Component,
|
|
9346
9346
|
args: [{ selector: 'lib-signal-phone-number-field', imports: [
|
|
9347
9347
|
BaseSignalInput,
|
|
@@ -9491,10 +9491,10 @@ class SignalTextarea extends BaseSignalTextInputControl {
|
|
|
9491
9491
|
this.valueChange.emit(val);
|
|
9492
9492
|
}
|
|
9493
9493
|
}
|
|
9494
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
9495
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
9494
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9495
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalTextarea, isStandalone: true, selector: "lib-signal-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", clear: "clear", keyDown: "keyDown" }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-start w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline' && resize() === 'none'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline' || resize() !== 'none'\"\n [class]=\"appearanceWrapperClasses()\">\n <div class=\"relative flex min-w-0 flex-1 items-start\">\n <textarea\n #textareaRef\n class=\"w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"textareaSizeClasses() + ' ' + horizontalPaddingClasses() + ' ' + textareaResizeClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [rows]=\"rows()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"></textarea>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showInFieldHint() || showClear()) {\n <div\n class=\"absolute right-0 flex items-center gap-0.5\"\n [class]=\"absoluteTrailingTopClasses()\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (showClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
9496
9496
|
}
|
|
9497
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
9497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTextarea, decorators: [{
|
|
9498
9498
|
type: Component,
|
|
9499
9499
|
args: [{ selector: 'lib-signal-textarea', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-start w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline' && resize() === 'none'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline' || resize() !== 'none'\"\n [class]=\"appearanceWrapperClasses()\">\n <div class=\"relative flex min-w-0 flex-1 items-start\">\n <textarea\n #textareaRef\n class=\"w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"textareaSizeClasses() + ' ' + horizontalPaddingClasses() + ' ' + textareaResizeClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [rows]=\"rows()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"></textarea>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showInFieldHint() || showClear()) {\n <div\n class=\"absolute right-0 flex items-center gap-0.5\"\n [class]=\"absoluteTrailingTopClasses()\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (showClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9500
9500
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], textareaRef: [{
|
|
@@ -9604,12 +9604,12 @@ class SignalCheckbox extends BaseFormControl {
|
|
|
9604
9604
|
this.setValue(nextValue);
|
|
9605
9605
|
this.valueChange.emit(nextValue);
|
|
9606
9606
|
}
|
|
9607
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
9608
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
9607
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9608
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalCheckbox, isStandalone: true, selector: "lib-signal-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indeterminate: "indeterminateChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "checkboxRef", first: true, predicate: ["checkboxRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"checkboxId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"relative inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"checkboxId()\">\n <input\n #checkboxRef\n type=\"checkbox\"\n class=\"sr-only\"\n [id]=\"checkboxId()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : isChecked()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isActive() && !showError()\"\n [class.bg-surface-primary]=\"isActive() && !showError()\"\n [class.border-default]=\"!isActive() && !showError()\"\n [class.border-error]=\"showError()\"\n [class.group-hover:border-primary-hover]=\"isInteractive() && !showError()\"\n [class.group-hover:shadow-sm]=\"isInteractive()\"\n [class.group-hover:scale-105]=\"isInteractive()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n [class]=\"checkmarkSizeClasses()\"\n [class.opacity-0]=\"!isChecked() || isIndeterminate()\"\n [class.opacity-100]=\"isChecked() && !isIndeterminate()\">\n <path\n 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\" />\n </svg>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n [class]=\"checkmarkSizeClasses()\"\n [class.opacity-0]=\"!isIndeterminate()\"\n [class.opacity-100]=\"isIndeterminate()\">\n <path\n d=\"M4 10h12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\" />\n </svg>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"checkboxId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
9609
9609
|
}
|
|
9610
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
9610
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalCheckbox, decorators: [{
|
|
9611
9611
|
type: Component,
|
|
9612
|
-
args: [{ selector: 'lib-signal-checkbox', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"checkboxId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"checkboxId()\">\n <input\n #checkboxRef\n type=\"checkbox\"\n class=\"sr-only\"\n [id]=\"checkboxId()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : isChecked()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isActive() && !showError()\"\n [class.bg-surface-primary]=\"isActive() && !showError()\"\n [class.border-default]=\"!isActive() && !showError()\"\n [class.border-error]=\"showError()\"\n [class.group-hover:border-primary-hover]=\"isInteractive() && !showError()\"\n [class.group-hover:shadow-sm]=\"isInteractive()\"\n [class.group-hover:scale-105]=\"isInteractive()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n [class]=\"checkmarkSizeClasses()\"\n [class.opacity-0]=\"!isChecked() || isIndeterminate()\"\n [class.opacity-100]=\"isChecked() && !isIndeterminate()\">\n <path\n 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\" />\n </svg>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n [class]=\"checkmarkSizeClasses()\"\n [class.opacity-0]=\"!isIndeterminate()\"\n [class.opacity-100]=\"isIndeterminate()\">\n <path\n d=\"M4 10h12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\" />\n </svg>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"checkboxId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9612
|
+
args: [{ selector: 'lib-signal-checkbox', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"checkboxId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"relative inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"checkboxId()\">\n <input\n #checkboxRef\n type=\"checkbox\"\n class=\"sr-only\"\n [id]=\"checkboxId()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : isChecked()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isActive() && !showError()\"\n [class.bg-surface-primary]=\"isActive() && !showError()\"\n [class.border-default]=\"!isActive() && !showError()\"\n [class.border-error]=\"showError()\"\n [class.group-hover:border-primary-hover]=\"isInteractive() && !showError()\"\n [class.group-hover:shadow-sm]=\"isInteractive()\"\n [class.group-hover:scale-105]=\"isInteractive()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n [class]=\"checkmarkSizeClasses()\"\n [class.opacity-0]=\"!isChecked() || isIndeterminate()\"\n [class.opacity-100]=\"isChecked() && !isIndeterminate()\">\n <path\n 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\" />\n </svg>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n [class]=\"checkmarkSizeClasses()\"\n [class.opacity-0]=\"!isIndeterminate()\"\n [class.opacity-100]=\"isIndeterminate()\">\n <path\n d=\"M4 10h12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\" />\n </svg>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"checkboxId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9613
9613
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], checkboxRef: [{
|
|
9614
9614
|
type: ViewChild,
|
|
9615
9615
|
args: ['checkboxRef']
|
|
@@ -9756,12 +9756,12 @@ class SignalRadio extends BaseFormControl {
|
|
|
9756
9756
|
}
|
|
9757
9757
|
this.valueChange.emit(selected);
|
|
9758
9758
|
}
|
|
9759
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
9760
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
9759
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalRadio, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9760
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalRadio, isStandalone: true, selector: "lib-signal-radio", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"!inGroup() && showRequiredIndicator()\"\n [showError]=\"!inGroup() && showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"effectiveDisabled()\"\n [inputId]=\"radioId()\">\n\n <div\n input\n class=\"group flex items-center gap-3\"\n [class.w-full]=\"!inGroup()\">\n <label\n class=\"relative inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"effectiveReadonly() && !effectiveDisabled()\"\n [class.cursor-not-allowed]=\"effectiveDisabled()\"\n [class.opacity-70]=\"effectiveDisabled()\"\n [for]=\"radioId()\">\n <input\n type=\"radio\"\n class=\"sr-only\"\n [id]=\"radioId()\"\n [name]=\"effectiveGroupName()\"\n [checked]=\"isSelected()\"\n [disabled]=\"effectiveDisabled()\"\n [attr.aria-readonly]=\"effectiveReadonly() || null\"\n [attr.aria-checked]=\"isSelected()\"\n [attr.aria-required]=\"!inGroup() && showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"effectiveShowError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isSelected() && !effectiveShowError()\"\n [class.border-default]=\"!isSelected() && !effectiveShowError()\"\n [class.border-error]=\"effectiveShowError()\"\n [class.group-hover:border-primary-hover]=\"isInteractive() && !effectiveShowError()\"\n [class.group-hover:shadow-sm]=\"isInteractive()\"\n [class.group-hover:scale-105]=\"isInteractive()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !effectiveShowError()\"\n [class.ring-error-subtle]=\"isFocused() && effectiveShowError()\">\n <div\n class=\"rounded-full bg-surface-primary transition-opacity duration-200\"\n [class]=\"dotSizeClasses()\"\n [class.opacity-0]=\"!isSelected()\"\n [class.opacity-100]=\"isSelected()\"></div>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"radioId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (!inGroup() && showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
9761
9761
|
}
|
|
9762
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
9762
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalRadio, decorators: [{
|
|
9763
9763
|
type: Component,
|
|
9764
|
-
args: [{ selector: 'lib-signal-radio', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"!inGroup() && showRequiredIndicator()\"\n [showError]=\"!inGroup() && showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"effectiveDisabled()\"\n [inputId]=\"radioId()\">\n\n <div\n input\n class=\"group flex items-center gap-3\"\n [class.w-full]=\"!inGroup()\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"effectiveReadonly() && !effectiveDisabled()\"\n [class.cursor-not-allowed]=\"effectiveDisabled()\"\n [class.opacity-70]=\"effectiveDisabled()\"\n [for]=\"radioId()\">\n <input\n type=\"radio\"\n class=\"sr-only\"\n [id]=\"radioId()\"\n [name]=\"effectiveGroupName()\"\n [checked]=\"isSelected()\"\n [disabled]=\"effectiveDisabled()\"\n [attr.aria-readonly]=\"effectiveReadonly() || null\"\n [attr.aria-checked]=\"isSelected()\"\n [attr.aria-required]=\"!inGroup() && showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"effectiveShowError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isSelected() && !effectiveShowError()\"\n [class.border-default]=\"!isSelected() && !effectiveShowError()\"\n [class.border-error]=\"effectiveShowError()\"\n [class.group-hover:border-primary-hover]=\"isInteractive() && !effectiveShowError()\"\n [class.group-hover:shadow-sm]=\"isInteractive()\"\n [class.group-hover:scale-105]=\"isInteractive()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !effectiveShowError()\"\n [class.ring-error-subtle]=\"isFocused() && effectiveShowError()\">\n <div\n class=\"rounded-full bg-surface-primary transition-opacity duration-200\"\n [class]=\"dotSizeClasses()\"\n [class.opacity-0]=\"!isSelected()\"\n [class.opacity-100]=\"isSelected()\"></div>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"radioId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (!inGroup() && showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9764
|
+
args: [{ selector: 'lib-signal-radio', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"!inGroup() && showRequiredIndicator()\"\n [showError]=\"!inGroup() && showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"effectiveDisabled()\"\n [inputId]=\"radioId()\">\n\n <div\n input\n class=\"group flex items-center gap-3\"\n [class.w-full]=\"!inGroup()\">\n <label\n class=\"relative inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"effectiveReadonly() && !effectiveDisabled()\"\n [class.cursor-not-allowed]=\"effectiveDisabled()\"\n [class.opacity-70]=\"effectiveDisabled()\"\n [for]=\"radioId()\">\n <input\n type=\"radio\"\n class=\"sr-only\"\n [id]=\"radioId()\"\n [name]=\"effectiveGroupName()\"\n [checked]=\"isSelected()\"\n [disabled]=\"effectiveDisabled()\"\n [attr.aria-readonly]=\"effectiveReadonly() || null\"\n [attr.aria-checked]=\"isSelected()\"\n [attr.aria-required]=\"!inGroup() && showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"effectiveShowError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isSelected() && !effectiveShowError()\"\n [class.border-default]=\"!isSelected() && !effectiveShowError()\"\n [class.border-error]=\"effectiveShowError()\"\n [class.group-hover:border-primary-hover]=\"isInteractive() && !effectiveShowError()\"\n [class.group-hover:shadow-sm]=\"isInteractive()\"\n [class.group-hover:scale-105]=\"isInteractive()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !effectiveShowError()\"\n [class.ring-error-subtle]=\"isFocused() && effectiveShowError()\">\n <div\n class=\"rounded-full bg-surface-primary transition-opacity duration-200\"\n [class]=\"dotSizeClasses()\"\n [class.opacity-0]=\"!isSelected()\"\n [class.opacity-100]=\"isSelected()\"></div>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"radioId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (!inGroup() && showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9765
9765
|
}], propDecorators: { groupName: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupName", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
9766
9766
|
|
|
9767
9767
|
let nextGroupId = 0;
|
|
@@ -9815,10 +9815,10 @@ class SignalRadioGroup extends BaseFormControl {
|
|
|
9815
9815
|
this.touch.emit();
|
|
9816
9816
|
}
|
|
9817
9817
|
}
|
|
9818
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
9819
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
9818
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalRadioGroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9819
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalRadioGroup, isStandalone: true, selector: "lib-signal-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [{ provide: SIGNAL_RADIO_GROUP, useExisting: SignalRadioGroup }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"true\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"groupLabelId()\">\n\n <div\n input\n role=\"radiogroup\"\n [class]=\"orientationClasses()\"\n [attr.aria-labelledby]=\"label() ? groupLabelId() : null\"\n [attr.aria-invalid]=\"showError() || null\"\n (focusout)=\"onGroupFocusOut($event)\">\n @if (hasOptions()) {\n @for (option of options(); track option.value) {\n <lib-signal-radio\n [optionValue]=\"option.value\"\n [label]=\"option.label\"\n [hint]=\"option.hint ?? ''\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !!option.disabled\" />\n }\n } @else {\n <ng-content />\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: SignalRadio, selector: "lib-signal-radio", inputs: ["groupName", "optionValue", "label", "hint", "id", "size"], outputs: ["valueChange"] }] });
|
|
9820
9820
|
}
|
|
9821
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
9821
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalRadioGroup, decorators: [{
|
|
9822
9822
|
type: Component,
|
|
9823
9823
|
args: [{ selector: 'lib-signal-radio-group', imports: [BaseSignalInput, SignalRadio], providers: [{ provide: SIGNAL_RADIO_GROUP, useExisting: SignalRadioGroup }], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"true\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"groupLabelId()\">\n\n <div\n input\n role=\"radiogroup\"\n [class]=\"orientationClasses()\"\n [attr.aria-labelledby]=\"label() ? groupLabelId() : null\"\n [attr.aria-invalid]=\"showError() || null\"\n (focusout)=\"onGroupFocusOut($event)\">\n @if (hasOptions()) {\n @for (option of options(); track option.value) {\n <lib-signal-radio\n [optionValue]=\"option.value\"\n [label]=\"option.label\"\n [hint]=\"option.hint ?? ''\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !!option.disabled\" />\n }\n } @else {\n <ng-content />\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9824
9824
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], groupName: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupName", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
@@ -9915,12 +9915,12 @@ class SignalSwitch extends BaseFormControl {
|
|
|
9915
9915
|
this.setValue(nextValue);
|
|
9916
9916
|
this.valueChange.emit(nextValue);
|
|
9917
9917
|
}
|
|
9918
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
9919
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
9918
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalSwitch, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9919
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalSwitch, isStandalone: true, selector: "lib-signal-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"switchId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"relative inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"switchId()\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"sr-only\"\n [id]=\"switchId()\"\n [checked]=\"isOn()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-checked]=\"isOn()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"trackClasses()\"\n [class.bg-page-secondary]=\"!isOn() && !showError()\"\n [class.bg-surface-primary]=\"isOn() && !showError()\"\n [class.bg-surface-error-subtle]=\"showError()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\">\n <div\n [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
9920
9920
|
}
|
|
9921
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
9921
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalSwitch, decorators: [{
|
|
9922
9922
|
type: Component,
|
|
9923
|
-
args: [{ selector: 'lib-signal-switch', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"switchId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"switchId()\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"sr-only\"\n [id]=\"switchId()\"\n [checked]=\"isOn()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-checked]=\"isOn()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"trackClasses()\"\n [class.bg-page-secondary]=\"!isOn() && !showError()\"\n [class.bg-surface-primary]=\"isOn() && !showError()\"\n [class.bg-surface-error-subtle]=\"showError()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\">\n <div\n [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9923
|
+
args: [{ selector: 'lib-signal-switch', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"switchId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"relative inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"switchId()\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"sr-only\"\n [id]=\"switchId()\"\n [checked]=\"isOn()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-checked]=\"isOn()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"trackClasses()\"\n [class.bg-page-secondary]=\"!isOn() && !showError()\"\n [class.bg-surface-primary]=\"isOn() && !showError()\"\n [class.bg-surface-error-subtle]=\"showError()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\">\n <div\n [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9924
9924
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
9925
9925
|
|
|
9926
9926
|
function getPathValue(obj, path) {
|
|
@@ -10132,10 +10132,10 @@ class SignalDropdownPanelComponent {
|
|
|
10132
10132
|
});
|
|
10133
10133
|
this.highlightedIndex.set(index >= 0 ? index : list.length > 0 ? 0 : -1);
|
|
10134
10134
|
}
|
|
10135
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
10136
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
10135
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDropdownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10136
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalDropdownPanelComponent, isStandalone: true, selector: "lib-signal-dropdown-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, listboxLabelledBy: { classPropertyName: "listboxLabelledBy", publicName: "listboxLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", dismissed: "dismissed" }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["searchField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"flex flex-col rounded-xl bg-page border border-default shadow-lg overflow-hidden focus:outline-none\"\n [class.w-full]=\"fullWidth()\"\n [style.width.px]=\"!fullWidth() && dropdownWidth() ? dropdownWidth() : null\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"listboxLabelledBy()\"\n (keydown)=\"onPanelKeyDown($event)\">\n <div class=\"relative flex items-center w-full border-b border-default\">\n <svg\n class=\"absolute pointer-events-none ml-3 text-role-caption\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n\n <input\n #searchField\n type=\"text\"\n aria-label=\"Search options\"\n placeholder=\"Search...\"\n class=\"h-11 pr-10 pl-10 text-body2 text-role-body placeholder:text-role-placeholder border-0 outline-none bg-transparent w-full\"\n (input)=\"onSearchInput($event)\" />\n\n @if (searchQuery()) {\n <button\n type=\"button\"\n aria-label=\"Clear search\"\n class=\"absolute right-2 p-1.5 flex justify-center items-center hover:bg-page-secondary rounded-full cursor-pointer text-role-caption\"\n (click)=\"onClearSearch($event)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize() - 4\"\n [style.height.px]=\"iconSize() - 4\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n </div>\n\n <div class=\"max-h-60 overflow-y-auto\">\n @for (item of filteredList(); track getItemValue(item); let i = $index) {\n <button\n type=\"button\"\n role=\"option\"\n class=\"block w-full px-4 py-3 text-left text-body2 transition-colors duration-200 cursor-pointer\"\n [class.bg-page-secondary]=\"highlightedIndex() === i\"\n [class.text-primary]=\"isItemSelected(item)\"\n [class.text-role-body]=\"!isItemSelected(item)\"\n [class.hover:bg-page-secondary]=\"true\"\n [attr.aria-selected]=\"isItemSelected(item)\"\n (click)=\"itemSelected.emit(item)\">\n {{ getDisplayString(item) }}\n </button>\n } @empty {\n <span class=\"block px-4 py-4 text-body2 text-role-placeholder select-none\">\n {{ noOptionsMessage() }}\n </span>\n }\n </div>\n</div>\n" });
|
|
10137
10137
|
}
|
|
10138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
10138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDropdownPanelComponent, decorators: [{
|
|
10139
10139
|
type: Component,
|
|
10140
10140
|
args: [{ selector: 'lib-signal-dropdown-panel', template: "<div\n class=\"flex flex-col rounded-xl bg-page border border-default shadow-lg overflow-hidden focus:outline-none\"\n [class.w-full]=\"fullWidth()\"\n [style.width.px]=\"!fullWidth() && dropdownWidth() ? dropdownWidth() : null\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"listboxLabelledBy()\"\n (keydown)=\"onPanelKeyDown($event)\">\n <div class=\"relative flex items-center w-full border-b border-default\">\n <svg\n class=\"absolute pointer-events-none ml-3 text-role-caption\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n\n <input\n #searchField\n type=\"text\"\n aria-label=\"Search options\"\n placeholder=\"Search...\"\n class=\"h-11 pr-10 pl-10 text-body2 text-role-body placeholder:text-role-placeholder border-0 outline-none bg-transparent w-full\"\n (input)=\"onSearchInput($event)\" />\n\n @if (searchQuery()) {\n <button\n type=\"button\"\n aria-label=\"Clear search\"\n class=\"absolute right-2 p-1.5 flex justify-center items-center hover:bg-page-secondary rounded-full cursor-pointer text-role-caption\"\n (click)=\"onClearSearch($event)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize() - 4\"\n [style.height.px]=\"iconSize() - 4\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n </div>\n\n <div class=\"max-h-60 overflow-y-auto\">\n @for (item of filteredList(); track getItemValue(item); let i = $index) {\n <button\n type=\"button\"\n role=\"option\"\n class=\"block w-full px-4 py-3 text-left text-body2 transition-colors duration-200 cursor-pointer\"\n [class.bg-page-secondary]=\"highlightedIndex() === i\"\n [class.text-primary]=\"isItemSelected(item)\"\n [class.text-role-body]=\"!isItemSelected(item)\"\n [class.hover:bg-page-secondary]=\"true\"\n [attr.aria-selected]=\"isItemSelected(item)\"\n (click)=\"itemSelected.emit(item)\">\n {{ getDisplayString(item) }}\n </button>\n } @empty {\n <span class=\"block px-4 py-4 text-body2 text-role-placeholder select-none\">\n {{ noOptionsMessage() }}\n </span>\n }\n </div>\n</div>\n" }]
|
|
10141
10141
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], valuePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePath", required: false }] }], displayPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayPath", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], listboxLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "listboxLabelledBy", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], searchField: [{ type: i0.ViewChild, args: ['searchField', { isSignal: true }] }] } });
|
|
@@ -10149,10 +10149,10 @@ class SignalDropdownPanelOverlayComponent {
|
|
|
10149
10149
|
onDismissed() {
|
|
10150
10150
|
this.dialogRef.close();
|
|
10151
10151
|
}
|
|
10152
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
10153
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
10152
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDropdownPanelOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10153
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalDropdownPanelOverlayComponent, isStandalone: true, selector: "lib-signal-dropdown-panel-overlay", ngImport: i0, template: "<div class=\"relative flex flex-col gap-3 p-1\">\n <div class=\"relative flex items-start justify-between gap-2 px-2 pt-1 min-h-[2.5rem]\">\n @if (data.label) {\n <h2 class=\"text-role-title text-role-body pr-10\">{{ data.label }}</h2>\n }\n <button\n type=\"button\"\n aria-label=\"Close\"\n class=\"absolute top-1 right-1 p-2 flex items-center justify-center rounded-full hover:bg-page-secondary cursor-pointer text-role-caption transition-colors\"\n (click)=\"onDismissed()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"data.iconSize\"\n [style.height.px]=\"data.iconSize\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n </div>\n\n <lib-signal-dropdown-panel\n [items]=\"data.items\"\n [valuePath]=\"data.valuePath\"\n [displayPath]=\"data.displayPath\"\n [displayValue]=\"data.displayValue\"\n [noOptionsMessage]=\"data.noOptionsMessage\"\n [selectedItem]=\"data.selectedItem\"\n [iconSize]=\"data.iconSize\"\n [fullWidth]=\"true\"\n (itemSelected)=\"onItemSelected($event)\"\n (dismissed)=\"onDismissed()\" />\n</div>\n", dependencies: [{ kind: "component", type: SignalDropdownPanelComponent, selector: "lib-signal-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedItem", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["itemSelected", "dismissed"] }] });
|
|
10154
10154
|
}
|
|
10155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
10155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDropdownPanelOverlayComponent, decorators: [{
|
|
10156
10156
|
type: Component,
|
|
10157
10157
|
args: [{ selector: 'lib-signal-dropdown-panel-overlay', imports: [SignalDropdownPanelComponent], template: "<div class=\"relative flex flex-col gap-3 p-1\">\n <div class=\"relative flex items-start justify-between gap-2 px-2 pt-1 min-h-[2.5rem]\">\n @if (data.label) {\n <h2 class=\"text-role-title text-role-body pr-10\">{{ data.label }}</h2>\n }\n <button\n type=\"button\"\n aria-label=\"Close\"\n class=\"absolute top-1 right-1 p-2 flex items-center justify-center rounded-full hover:bg-page-secondary cursor-pointer text-role-caption transition-colors\"\n (click)=\"onDismissed()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"data.iconSize\"\n [style.height.px]=\"data.iconSize\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n </div>\n\n <lib-signal-dropdown-panel\n [items]=\"data.items\"\n [valuePath]=\"data.valuePath\"\n [displayPath]=\"data.displayPath\"\n [displayValue]=\"data.displayValue\"\n [noOptionsMessage]=\"data.noOptionsMessage\"\n [selectedItem]=\"data.selectedItem\"\n [iconSize]=\"data.iconSize\"\n [fullWidth]=\"true\"\n (itemSelected)=\"onItemSelected($event)\"\n (dismissed)=\"onDismissed()\" />\n</div>\n" }]
|
|
10158
10158
|
}] });
|
|
@@ -10496,10 +10496,10 @@ class SignalDropdown extends BaseSignalTextInputControl {
|
|
|
10496
10496
|
this.valueChange.emit(val);
|
|
10497
10497
|
}
|
|
10498
10498
|
}
|
|
10499
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
10500
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDropdown, isStandalone: true, selector: "lib-signal-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #dropdownButton\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n #peerInputRef\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"inputId()\"\n [value]=\"peerInputValue()\" />\n }\n\n <button\n #triggerButton\n type=\"button\"\n class=\"relative h-full w-full text-left transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n [class.text-role-body]=\"hasSelection() && !disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (click)=\"toggleDropdown()\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur($event)\"\n (keydown)=\"onTriggerKeyDown($event)\">\n {{ triggerDisplayText() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggleDropdown()\"\n class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n <span\n class=\"flex items-center justify-center p-2 pointer-events-none\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeDropdown()\"\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 <lib-signal-dropdown-panel\n [items]=\"items()\"\n [valuePath]=\"valuePath()\"\n [displayPath]=\"displayPath()\"\n [displayValue]=\"displayValue()\"\n [noOptionsMessage]=\"noOptionsMessage()\"\n [selectedItem]=\"selectedItem()\"\n [iconSize]=\"iconSize()\"\n [dropdownWidth]=\"dropdownWidth()\"\n [listboxLabelledBy]=\"inputId()\"\n (itemSelected)=\"onItemSelected($event)\"\n (dismissed)=\"closeDropdown()\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { 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: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDropdownPanelComponent, selector: "lib-signal-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedItem", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["itemSelected", "dismissed"] }] });
|
|
10499
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10500
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalDropdown, isStandalone: true, selector: "lib-signal-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #dropdownButton\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n #peerInputRef\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"inputId()\"\n [value]=\"peerInputValue()\" />\n }\n\n <button\n #triggerButton\n type=\"button\"\n class=\"relative h-full w-full text-left transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n [class.text-role-body]=\"hasSelection() && !disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (click)=\"toggleDropdown()\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur($event)\"\n (keydown)=\"onTriggerKeyDown($event)\">\n {{ triggerDisplayText() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggleDropdown()\"\n class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n <span\n class=\"flex items-center justify-center p-2 pointer-events-none\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeDropdown()\"\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 <lib-signal-dropdown-panel\n [items]=\"items()\"\n [valuePath]=\"valuePath()\"\n [displayPath]=\"displayPath()\"\n [displayValue]=\"displayValue()\"\n [noOptionsMessage]=\"noOptionsMessage()\"\n [selectedItem]=\"selectedItem()\"\n [iconSize]=\"iconSize()\"\n [dropdownWidth]=\"dropdownWidth()\"\n [listboxLabelledBy]=\"inputId()\"\n (itemSelected)=\"onItemSelected($event)\"\n (dismissed)=\"closeDropdown()\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { 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: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDropdownPanelComponent, selector: "lib-signal-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedItem", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["itemSelected", "dismissed"] }] });
|
|
10501
10501
|
}
|
|
10502
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
10502
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDropdown, decorators: [{
|
|
10503
10503
|
type: Component,
|
|
10504
10504
|
args: [{ selector: 'lib-signal-dropdown', imports: [
|
|
10505
10505
|
AppSvgIconComponent,
|
|
@@ -10686,10 +10686,10 @@ class SignalMultiSelectDropdownPanelComponent {
|
|
|
10686
10686
|
const firstSelectedIndex = list.findIndex((item) => this.isItemSelected(item));
|
|
10687
10687
|
this.highlightedIndex.set(firstSelectedIndex >= 0 ? firstSelectedIndex : list.length > 0 ? 0 : -1);
|
|
10688
10688
|
}
|
|
10689
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
10690
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
10689
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalMultiSelectDropdownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10690
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalMultiSelectDropdownPanelComponent, isStandalone: true, selector: "lib-signal-multi-select-dropdown-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, listboxLabelledBy: { classPropertyName: "listboxLabelledBy", publicName: "listboxLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dismissed: "dismissed" }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["searchField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"flex flex-col rounded-xl bg-page border border-default shadow-lg overflow-hidden focus:outline-none\"\n [class.w-full]=\"fullWidth()\"\n [style.width.px]=\"!fullWidth() && dropdownWidth() ? dropdownWidth() : null\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-labelledby]=\"listboxLabelledBy()\"\n (keydown)=\"onPanelKeyDown($event)\">\n <div class=\"relative flex items-center w-full border-b border-default\">\n <svg\n class=\"absolute pointer-events-none ml-3 text-role-caption\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n\n <input\n #searchField\n type=\"text\"\n aria-label=\"Search options\"\n placeholder=\"Search...\"\n class=\"h-11 pr-10 pl-10 text-body2 text-role-body placeholder:text-role-placeholder border-0 outline-none bg-transparent w-full\"\n (input)=\"onSearchInput($event)\" />\n\n @if (searchQuery()) {\n <button\n type=\"button\"\n aria-label=\"Clear search\"\n class=\"absolute right-2 p-1.5 flex justify-center items-center hover:bg-page-secondary rounded-full cursor-pointer text-role-caption\"\n (click)=\"onClearSearch($event)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize() - 4\"\n [style.height.px]=\"iconSize() - 4\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n </div>\n\n @if (showSelectAll()) {\n <div class=\"flex items-center justify-between border-b border-default bg-page-secondary px-4 py-3\">\n <button\n type=\"button\"\n class=\"text-caption text-primary hover:text-primary-hover cursor-pointer\"\n (click)=\"onSelectAll()\">\n {{ selectAllLabel() }}\n </button>\n <button\n type=\"button\"\n class=\"text-caption text-primary hover:text-primary-hover cursor-pointer\"\n (click)=\"onClearAll()\">\n {{ clearAllLabel() }}\n </button>\n </div>\n }\n\n <div class=\"max-h-60 overflow-y-auto\">\n @for (item of filteredList(); track getItemValue(item); let i = $index) {\n <button\n type=\"button\"\n role=\"option\"\n class=\"flex w-full items-center gap-3 px-4 py-3 text-left text-body2 transition-colors duration-200 cursor-pointer\"\n [class.bg-page-secondary]=\"highlightedIndex() === i\"\n [class.text-primary]=\"isItemSelected(item)\"\n [class.text-role-body]=\"!isItemSelected(item)\"\n [class.hover:bg-page-secondary]=\"true\"\n [attr.aria-selected]=\"isItemSelected(item)\"\n (click)=\"onItemToggled(item)\">\n <span\n class=\"relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm border-2 transition-all duration-200\"\n [class.border-primary]=\"isItemSelected(item)\"\n [class.bg-surface-primary]=\"isItemSelected(item)\"\n [class.border-default]=\"!isItemSelected(item)\"\n aria-hidden=\"true\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n class=\"pointer-events-none absolute h-3.5 w-3.5 text-white transition-opacity duration-200\"\n [class.opacity-0]=\"!isItemSelected(item)\"\n [class.opacity-100]=\"isItemSelected(item)\">\n <path\n 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\" />\n </svg>\n </span>\n <span class=\"min-w-0 truncate\">{{ getDisplayString(item) }}</span>\n </button>\n } @empty {\n <span class=\"block px-4 py-4 text-body2 text-role-placeholder select-none\">\n {{ noOptionsMessage() }}\n </span>\n }\n </div>\n</div>\n" });
|
|
10691
10691
|
}
|
|
10692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
10692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalMultiSelectDropdownPanelComponent, decorators: [{
|
|
10693
10693
|
type: Component,
|
|
10694
10694
|
args: [{ selector: 'lib-signal-multi-select-dropdown-panel', template: "<div\n class=\"flex flex-col rounded-xl bg-page border border-default shadow-lg overflow-hidden focus:outline-none\"\n [class.w-full]=\"fullWidth()\"\n [style.width.px]=\"!fullWidth() && dropdownWidth() ? dropdownWidth() : null\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-labelledby]=\"listboxLabelledBy()\"\n (keydown)=\"onPanelKeyDown($event)\">\n <div class=\"relative flex items-center w-full border-b border-default\">\n <svg\n class=\"absolute pointer-events-none ml-3 text-role-caption\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n\n <input\n #searchField\n type=\"text\"\n aria-label=\"Search options\"\n placeholder=\"Search...\"\n class=\"h-11 pr-10 pl-10 text-body2 text-role-body placeholder:text-role-placeholder border-0 outline-none bg-transparent w-full\"\n (input)=\"onSearchInput($event)\" />\n\n @if (searchQuery()) {\n <button\n type=\"button\"\n aria-label=\"Clear search\"\n class=\"absolute right-2 p-1.5 flex justify-center items-center hover:bg-page-secondary rounded-full cursor-pointer text-role-caption\"\n (click)=\"onClearSearch($event)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize() - 4\"\n [style.height.px]=\"iconSize() - 4\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n </div>\n\n @if (showSelectAll()) {\n <div class=\"flex items-center justify-between border-b border-default bg-page-secondary px-4 py-3\">\n <button\n type=\"button\"\n class=\"text-caption text-primary hover:text-primary-hover cursor-pointer\"\n (click)=\"onSelectAll()\">\n {{ selectAllLabel() }}\n </button>\n <button\n type=\"button\"\n class=\"text-caption text-primary hover:text-primary-hover cursor-pointer\"\n (click)=\"onClearAll()\">\n {{ clearAllLabel() }}\n </button>\n </div>\n }\n\n <div class=\"max-h-60 overflow-y-auto\">\n @for (item of filteredList(); track getItemValue(item); let i = $index) {\n <button\n type=\"button\"\n role=\"option\"\n class=\"flex w-full items-center gap-3 px-4 py-3 text-left text-body2 transition-colors duration-200 cursor-pointer\"\n [class.bg-page-secondary]=\"highlightedIndex() === i\"\n [class.text-primary]=\"isItemSelected(item)\"\n [class.text-role-body]=\"!isItemSelected(item)\"\n [class.hover:bg-page-secondary]=\"true\"\n [attr.aria-selected]=\"isItemSelected(item)\"\n (click)=\"onItemToggled(item)\">\n <span\n class=\"relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm border-2 transition-all duration-200\"\n [class.border-primary]=\"isItemSelected(item)\"\n [class.bg-surface-primary]=\"isItemSelected(item)\"\n [class.border-default]=\"!isItemSelected(item)\"\n aria-hidden=\"true\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n class=\"pointer-events-none absolute h-3.5 w-3.5 text-white transition-opacity duration-200\"\n [class.opacity-0]=\"!isItemSelected(item)\"\n [class.opacity-100]=\"isItemSelected(item)\">\n <path\n 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\" />\n </svg>\n </span>\n <span class=\"min-w-0 truncate\">{{ getDisplayString(item) }}</span>\n </button>\n } @empty {\n <span class=\"block px-4 py-4 text-body2 text-role-placeholder select-none\">\n {{ noOptionsMessage() }}\n </span>\n }\n </div>\n</div>\n" }]
|
|
10695
10695
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], valuePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePath", required: false }] }], displayPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayPath", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], listboxLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "listboxLabelledBy", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], searchField: [{ type: i0.ViewChild, args: ['searchField', { isSignal: true }] }] } });
|
|
@@ -10706,10 +10706,10 @@ class SignalMultiSelectDropdownPanelOverlayComponent {
|
|
|
10706
10706
|
onDismissed() {
|
|
10707
10707
|
this.dialogRef.close();
|
|
10708
10708
|
}
|
|
10709
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
10710
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
10709
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalMultiSelectDropdownPanelOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10710
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalMultiSelectDropdownPanelOverlayComponent, isStandalone: true, selector: "lib-signal-multi-select-dropdown-panel-overlay", ngImport: i0, template: "<div class=\"relative flex flex-col gap-3 p-1\">\n <div class=\"relative flex items-start justify-between gap-2 px-2 pt-1 min-h-[2.5rem]\">\n @if (data.label) {\n <h2 class=\"text-role-title text-role-body pr-10\">{{ data.label }}</h2>\n }\n <button\n type=\"button\"\n aria-label=\"Close\"\n class=\"absolute top-1 right-1 p-2 flex items-center justify-center rounded-full hover:bg-page-secondary cursor-pointer text-role-caption transition-colors\"\n (click)=\"onDismissed()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"data.iconSize\"\n [style.height.px]=\"data.iconSize\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n </div>\n\n <lib-signal-multi-select-dropdown-panel\n [items]=\"data.items\"\n [valuePath]=\"data.valuePath\"\n [displayPath]=\"data.displayPath\"\n [displayValue]=\"data.displayValue\"\n [noOptionsMessage]=\"data.noOptionsMessage\"\n [selectedValues]=\"selectedValues()\"\n [showSelectAll]=\"data.showSelectAll\"\n [selectAllLabel]=\"data.selectAllLabel\"\n [clearAllLabel]=\"data.clearAllLabel\"\n [iconSize]=\"data.iconSize\"\n [fullWidth]=\"true\"\n (valueChange)=\"onValueChange($event)\"\n (dismissed)=\"onDismissed()\" />\n\n <div class=\"px-2 pb-1.5 pt-1 border-t border-default\">\n <button\n type=\"button\"\n class=\"w-full rounded-xl bg-surface-primary !text-primary-on-color text-caption font-medium py-2 hover:bg-surface-primary-hover transition-colors cursor-pointer\"\n (click)=\"onDismissed()\">\n {{ data.okLabel }}\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: SignalMultiSelectDropdownPanelComponent, selector: "lib-signal-multi-select-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedValues", "showSelectAll", "selectAllLabel", "clearAllLabel", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["valueChange", "dismissed"] }] });
|
|
10711
10711
|
}
|
|
10712
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
10712
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalMultiSelectDropdownPanelOverlayComponent, decorators: [{
|
|
10713
10713
|
type: Component,
|
|
10714
10714
|
args: [{ selector: 'lib-signal-multi-select-dropdown-panel-overlay', imports: [SignalMultiSelectDropdownPanelComponent], template: "<div class=\"relative flex flex-col gap-3 p-1\">\n <div class=\"relative flex items-start justify-between gap-2 px-2 pt-1 min-h-[2.5rem]\">\n @if (data.label) {\n <h2 class=\"text-role-title text-role-body pr-10\">{{ data.label }}</h2>\n }\n <button\n type=\"button\"\n aria-label=\"Close\"\n class=\"absolute top-1 right-1 p-2 flex items-center justify-center rounded-full hover:bg-page-secondary cursor-pointer text-role-caption transition-colors\"\n (click)=\"onDismissed()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"data.iconSize\"\n [style.height.px]=\"data.iconSize\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n </div>\n\n <lib-signal-multi-select-dropdown-panel\n [items]=\"data.items\"\n [valuePath]=\"data.valuePath\"\n [displayPath]=\"data.displayPath\"\n [displayValue]=\"data.displayValue\"\n [noOptionsMessage]=\"data.noOptionsMessage\"\n [selectedValues]=\"selectedValues()\"\n [showSelectAll]=\"data.showSelectAll\"\n [selectAllLabel]=\"data.selectAllLabel\"\n [clearAllLabel]=\"data.clearAllLabel\"\n [iconSize]=\"data.iconSize\"\n [fullWidth]=\"true\"\n (valueChange)=\"onValueChange($event)\"\n (dismissed)=\"onDismissed()\" />\n\n <div class=\"px-2 pb-1.5 pt-1 border-t border-default\">\n <button\n type=\"button\"\n class=\"w-full rounded-xl bg-surface-primary !text-primary-on-color text-caption font-medium py-2 hover:bg-surface-primary-hover transition-colors cursor-pointer\"\n (click)=\"onDismissed()\">\n {{ data.okLabel }}\n </button>\n </div>\n</div>\n" }]
|
|
10715
10715
|
}] });
|
|
@@ -11104,10 +11104,10 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
|
|
|
11104
11104
|
this.valueChange.emit(val);
|
|
11105
11105
|
}
|
|
11106
11106
|
}
|
|
11107
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
11108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalMultiSelectDropdown, isStandalone: true, selector: "lib-signal-multi-select-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, selectionDisplay: { classPropertyName: "selectionDisplay", publicName: "selectionDisplay", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, mobileOkLabel: { classPropertyName: "mobileOkLabel", publicName: "mobileOkLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #dropdownButton\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n #peerInputRef\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"inputId()\"\n [value]=\"peerInputValue()\" />\n }\n\n <button\n #triggerButton\n type=\"button\"\n class=\"h-full text-left transition outline-none bg-transparent border-0 rounded-none cursor-pointer\"\n [class.absolute]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.inset-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.z-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.relative]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n [class.w-full]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n [class.truncate]=\"selectionDisplay() !== 'chips'\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n [class.text-role-body]=\"hasSelection() && !disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (click)=\"toggleDropdown()\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur($event)\"\n (keydown)=\"onTriggerKeyDown($event)\">\n @if (!(selectionDisplay() === 'chips' && hasSelection())) {\n {{ triggerDisplayText() }}\n }\n </button>\n\n @if (selectionDisplay() === 'chips' && hasSelection()) {\n <div class=\"relative z-10 flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 pointer-events-none\">\n @for (item of selectedItems(); track getItemValue(item)) {\n <span\n class=\"inline-flex max-w-full items-center gap-1 rounded-full bg-page-secondary px-2 py-0.5 text-caption text-role-body\">\n <span class=\"truncate\">{{ getDisplayString(item) }}</span>\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Remove\"\n class=\"pointer-events-auto inline-flex shrink-0 items-center justify-center rounded-full text-role-caption hover:text-primary-hover\"\n (click)=\"onRemoveItem(item, $event)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"h-3.5 w-3.5\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n </span>\n }\n </div>\n }\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggleDropdown()\"\n class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n <span\n class=\"flex items-center justify-center p-2 pointer-events-none\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeDropdown()\"\n (overlayOutsideClick)=\"closeDropdown()\"\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 <lib-signal-multi-select-dropdown-panel\n [items]=\"items()\"\n [valuePath]=\"valuePath()\"\n [displayPath]=\"displayPath()\"\n [displayValue]=\"displayValue()\"\n [noOptionsMessage]=\"noOptionsMessage()\"\n [selectedValues]=\"currentValues()\"\n [showSelectAll]=\"showSelectAll()\"\n [selectAllLabel]=\"selectAllLabel()\"\n [clearAllLabel]=\"clearAllLabel()\"\n [iconSize]=\"iconSize()\"\n [dropdownWidth]=\"dropdownWidth()\"\n [listboxLabelledBy]=\"inputId()\"\n (valueChange)=\"applyValue($event)\"\n (dismissed)=\"closeDropdown()\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { 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: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalMultiSelectDropdownPanelComponent, selector: "lib-signal-multi-select-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedValues", "showSelectAll", "selectAllLabel", "clearAllLabel", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["valueChange", "dismissed"] }] });
|
|
11107
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalMultiSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11108
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalMultiSelectDropdown, isStandalone: true, selector: "lib-signal-multi-select-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, selectionDisplay: { classPropertyName: "selectionDisplay", publicName: "selectionDisplay", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, mobileOkLabel: { classPropertyName: "mobileOkLabel", publicName: "mobileOkLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #dropdownButton\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n #peerInputRef\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"inputId()\"\n [value]=\"peerInputValue()\" />\n }\n\n <button\n #triggerButton\n type=\"button\"\n class=\"h-full text-left transition outline-none bg-transparent border-0 rounded-none cursor-pointer\"\n [class.absolute]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.inset-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.z-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.relative]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n [class.w-full]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n [class.truncate]=\"selectionDisplay() !== 'chips'\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n [class.text-role-body]=\"hasSelection() && !disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (click)=\"toggleDropdown()\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur($event)\"\n (keydown)=\"onTriggerKeyDown($event)\">\n @if (!(selectionDisplay() === 'chips' && hasSelection())) {\n {{ triggerDisplayText() }}\n }\n </button>\n\n @if (selectionDisplay() === 'chips' && hasSelection()) {\n <div class=\"relative z-10 flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 pointer-events-none\">\n @for (item of selectedItems(); track getItemValue(item)) {\n <span\n class=\"inline-flex max-w-full items-center gap-1 rounded-full bg-page-secondary px-2 py-0.5 text-caption text-role-body\">\n <span class=\"truncate\">{{ getDisplayString(item) }}</span>\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Remove\"\n class=\"pointer-events-auto inline-flex shrink-0 items-center justify-center rounded-full text-role-caption hover:text-primary-hover\"\n (click)=\"onRemoveItem(item, $event)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"h-3.5 w-3.5\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n </span>\n }\n </div>\n }\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggleDropdown()\"\n class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n <span\n class=\"flex items-center justify-center p-2 pointer-events-none\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeDropdown()\"\n (overlayOutsideClick)=\"closeDropdown()\"\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 <lib-signal-multi-select-dropdown-panel\n [items]=\"items()\"\n [valuePath]=\"valuePath()\"\n [displayPath]=\"displayPath()\"\n [displayValue]=\"displayValue()\"\n [noOptionsMessage]=\"noOptionsMessage()\"\n [selectedValues]=\"currentValues()\"\n [showSelectAll]=\"showSelectAll()\"\n [selectAllLabel]=\"selectAllLabel()\"\n [clearAllLabel]=\"clearAllLabel()\"\n [iconSize]=\"iconSize()\"\n [dropdownWidth]=\"dropdownWidth()\"\n [listboxLabelledBy]=\"inputId()\"\n (valueChange)=\"applyValue($event)\"\n (dismissed)=\"closeDropdown()\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { 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: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalMultiSelectDropdownPanelComponent, selector: "lib-signal-multi-select-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedValues", "showSelectAll", "selectAllLabel", "clearAllLabel", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["valueChange", "dismissed"] }] });
|
|
11109
11109
|
}
|
|
11110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
11110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalMultiSelectDropdown, decorators: [{
|
|
11111
11111
|
type: Component,
|
|
11112
11112
|
args: [{ selector: 'lib-signal-multi-select-dropdown', imports: [
|
|
11113
11113
|
AppSvgIconComponent,
|
|
@@ -11598,10 +11598,10 @@ class SignalDatePicker extends BaseFormControl {
|
|
|
11598
11598
|
this.valueChange.emit(val);
|
|
11599
11599
|
}
|
|
11600
11600
|
}
|
|
11601
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
11602
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
11601
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11602
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalDatePicker, isStandalone: true, selector: "lib-signal-date-picker", inputs: { embedded: { classPropertyName: "embedded", publicName: "embedded", 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 }, 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 }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected" }, usesInheritance: true, ngImport: i0, template: "<div\n role=\"application\"\n aria-label=\"Date picker\"\n class=\"flex flex-col gap-3 min-h-96 px-3 py-3 select-none w-min\"\n [class.rounded-xl]=\"!embedded()\"\n [class.bg-page]=\"!embedded()\"\n [class.border]=\"!embedded()\"\n [class.border-default]=\"!embedded()\"\n [class.shadow-lg]=\"!embedded()\"\n [class.opacity-60]=\"disabled()\"\n [class.pointer-events-none]=\"disabled()\">\n\n <div class=\"flex items-center justify-between w-[280px]\">\n <button\n type=\"button\"\n class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-page-secondary rounded-full cursor-pointer text-role-body transition-colors duration-200\"\n [attr.aria-label]=\"uiMode() === 'date' ? 'Select year' : uiMode() === 'month' ? 'Select year range' : 'Back to calendar'\"\n (click)=\"onYearSelectionPressed()\">\n @switch (uiMode()) {\n @case ('date') {\n <span class=\"text-caption uppercase\">{{ monthYearLabel() }}</span>\n <svg\n class=\"h-[18px] w-[18px] text-role-body\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\" />\n </svg>\n }\n @case ('month') {\n <span class=\"text-caption uppercase\">{{ activeYear() }}</span>\n }\n @case ('year') {\n <span class=\"text-caption uppercase\">{{ yearRangeLabel() }}</span>\n <svg\n class=\"h-[18px] w-[18px] text-role-body\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\" />\n </svg>\n }\n }\n </button>\n\n <div class=\"flex items-center gap-2\">\n <button\n type=\"button\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-page-secondary select-none text-role-caption transition-colors duration-200\"\n [class.cursor-pointer]=\"canNavigatePrevious()\"\n [class.cursor-not-allowed]=\"!canNavigatePrevious()\"\n [class.opacity-40]=\"!canNavigatePrevious()\"\n [disabled]=\"!canNavigatePrevious() || disabled()\"\n [attr.aria-label]=\"previousNavLabel()\"\n (click)=\"previousPressed()\">\n <svg\n class=\"h-[24px] w-[24px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n\n <button\n type=\"button\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-page-secondary cursor-pointer select-none text-role-caption transition-colors duration-200\"\n [attr.aria-label]=\"nextNavLabel()\"\n (click)=\"nextPressed()\">\n <svg\n class=\"h-[24px] w-[24px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n </div>\n </div>\n\n @if (uiMode() === 'date') {\n <div role=\"grid\" class=\"grid grid-cols-7 text-xs text-center gap-y-1\">\n @for (day of weekdayHeaders; track day.day) {\n <span\n role=\"columnheader\"\n class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-role-body\">\n {{ day.displayName }}\n </span>\n }\n\n @for (blankDay of blankDays(); track blankDay) {\n <span\n role=\"presentation\"\n class=\"flex items-center justify-center w-[40px] h-[40px] rounded-lg text-transparent\"\n aria-hidden=\"true\"></span>\n }\n\n @for (day of daysOfMonth(); track day.value; let i = $index) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.data-day-index]=\"i\"\n [attr.aria-label]=\"monthLabels[activeMonth()] + ' ' + day.value + ', ' + activeYear()\"\n [attr.aria-selected]=\"isDaySelected(day.value)\"\n [attr.aria-disabled]=\"!day.isEnabled\"\n [disabled]=\"!day.isEnabled || disabled()\"\n [tabIndex]=\"getDayTabIndex(i)\"\n class=\"flex items-center justify-center w-[40px] h-[40px] rounded-lg select-none transition-colors duration-200\"\n [class.text-role-disabled]=\"!day.isEnabled\"\n [class.font-semibold]=\"isDaySelected(day.value)\"\n [class.bg-surface-primary]=\"isDaySelected(day.value)\"\n [class.text-primary-on-color]=\"isDaySelected(day.value)\"\n [class.border]=\"isDayToday(day.value) && !isDaySelected(day.value)\"\n [class.border-primary]=\"isDayToday(day.value) && !isDaySelected(day.value)\"\n [class.text-role-body]=\"day.isEnabled && !isDaySelected(day.value)\"\n [class.hover:bg-page-secondary]=\"day.isEnabled && !isDaySelected(day.value)\"\n [class.cursor-pointer]=\"day.isEnabled\"\n [class.cursor-not-allowed]=\"!day.isEnabled\"\n (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n (keydown)=\"onDayKeyDown($event, i)\"\n (focus)=\"onDayFocus(i)\"\n (blur)=\"onDayBlur()\">\n {{ day.value }}\n </button>\n }\n </div>\n }\n\n @if (uiMode() === 'month') {\n <div role=\"grid\" class=\"grid grid-cols-4 text-xs text-center text-role-body\">\n @for (month of monthLabels; track month; let i = $index) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.aria-label]=\"month + ' ' + activeYear()\"\n [disabled]=\"!isMonthSelectable(i) || disabled()\"\n class=\"flex items-center px-2 py-2.5 justify-center select-none rounded-lg uppercase transition-colors duration-200\"\n [class.text-role-disabled]=\"!isMonthSelectable(i)\"\n [class.hover:bg-page-secondary]=\"isMonthSelectable(i)\"\n [class.cursor-pointer]=\"isMonthSelectable(i)\"\n [class.cursor-not-allowed]=\"!isMonthSelectable(i)\"\n (click)=\"onMonthSelected(i)\">\n {{ month }}\n </button>\n }\n </div>\n }\n\n @if (uiMode() === 'year') {\n <div role=\"grid\" class=\"grid grid-cols-4 text-xs text-center text-role-body\">\n @for (year of years(); track year.value) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.aria-label]=\"year.value.toString()\"\n [disabled]=\"!year.isEnabled || disabled()\"\n class=\"flex items-center px-2 py-2.5 justify-center select-none rounded-lg transition-colors duration-200\"\n [class.text-role-disabled]=\"!year.isEnabled\"\n [class.hover:bg-page-secondary]=\"year.isEnabled\"\n [class.cursor-pointer]=\"year.isEnabled\"\n [class.cursor-not-allowed]=\"!year.isEnabled\"\n (click)=\"year.isEnabled ? onYearSelected(year.value) : null\">\n {{ year.value }}\n </button>\n }\n </div>\n }\n</div>\n" });
|
|
11603
11603
|
}
|
|
11604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
11604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDatePicker, decorators: [{
|
|
11605
11605
|
type: Component,
|
|
11606
11606
|
args: [{ selector: 'lib-signal-date-picker', template: "<div\n role=\"application\"\n aria-label=\"Date picker\"\n class=\"flex flex-col gap-3 min-h-96 px-3 py-3 select-none w-min\"\n [class.rounded-xl]=\"!embedded()\"\n [class.bg-page]=\"!embedded()\"\n [class.border]=\"!embedded()\"\n [class.border-default]=\"!embedded()\"\n [class.shadow-lg]=\"!embedded()\"\n [class.opacity-60]=\"disabled()\"\n [class.pointer-events-none]=\"disabled()\">\n\n <div class=\"flex items-center justify-between w-[280px]\">\n <button\n type=\"button\"\n class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-page-secondary rounded-full cursor-pointer text-role-body transition-colors duration-200\"\n [attr.aria-label]=\"uiMode() === 'date' ? 'Select year' : uiMode() === 'month' ? 'Select year range' : 'Back to calendar'\"\n (click)=\"onYearSelectionPressed()\">\n @switch (uiMode()) {\n @case ('date') {\n <span class=\"text-caption uppercase\">{{ monthYearLabel() }}</span>\n <svg\n class=\"h-[18px] w-[18px] text-role-body\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\" />\n </svg>\n }\n @case ('month') {\n <span class=\"text-caption uppercase\">{{ activeYear() }}</span>\n }\n @case ('year') {\n <span class=\"text-caption uppercase\">{{ yearRangeLabel() }}</span>\n <svg\n class=\"h-[18px] w-[18px] text-role-body\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\" />\n </svg>\n }\n }\n </button>\n\n <div class=\"flex items-center gap-2\">\n <button\n type=\"button\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-page-secondary select-none text-role-caption transition-colors duration-200\"\n [class.cursor-pointer]=\"canNavigatePrevious()\"\n [class.cursor-not-allowed]=\"!canNavigatePrevious()\"\n [class.opacity-40]=\"!canNavigatePrevious()\"\n [disabled]=\"!canNavigatePrevious() || disabled()\"\n [attr.aria-label]=\"previousNavLabel()\"\n (click)=\"previousPressed()\">\n <svg\n class=\"h-[24px] w-[24px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n\n <button\n type=\"button\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-page-secondary cursor-pointer select-none text-role-caption transition-colors duration-200\"\n [attr.aria-label]=\"nextNavLabel()\"\n (click)=\"nextPressed()\">\n <svg\n class=\"h-[24px] w-[24px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n </div>\n </div>\n\n @if (uiMode() === 'date') {\n <div role=\"grid\" class=\"grid grid-cols-7 text-xs text-center gap-y-1\">\n @for (day of weekdayHeaders; track day.day) {\n <span\n role=\"columnheader\"\n class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-role-body\">\n {{ day.displayName }}\n </span>\n }\n\n @for (blankDay of blankDays(); track blankDay) {\n <span\n role=\"presentation\"\n class=\"flex items-center justify-center w-[40px] h-[40px] rounded-lg text-transparent\"\n aria-hidden=\"true\"></span>\n }\n\n @for (day of daysOfMonth(); track day.value; let i = $index) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.data-day-index]=\"i\"\n [attr.aria-label]=\"monthLabels[activeMonth()] + ' ' + day.value + ', ' + activeYear()\"\n [attr.aria-selected]=\"isDaySelected(day.value)\"\n [attr.aria-disabled]=\"!day.isEnabled\"\n [disabled]=\"!day.isEnabled || disabled()\"\n [tabIndex]=\"getDayTabIndex(i)\"\n class=\"flex items-center justify-center w-[40px] h-[40px] rounded-lg select-none transition-colors duration-200\"\n [class.text-role-disabled]=\"!day.isEnabled\"\n [class.font-semibold]=\"isDaySelected(day.value)\"\n [class.bg-surface-primary]=\"isDaySelected(day.value)\"\n [class.text-primary-on-color]=\"isDaySelected(day.value)\"\n [class.border]=\"isDayToday(day.value) && !isDaySelected(day.value)\"\n [class.border-primary]=\"isDayToday(day.value) && !isDaySelected(day.value)\"\n [class.text-role-body]=\"day.isEnabled && !isDaySelected(day.value)\"\n [class.hover:bg-page-secondary]=\"day.isEnabled && !isDaySelected(day.value)\"\n [class.cursor-pointer]=\"day.isEnabled\"\n [class.cursor-not-allowed]=\"!day.isEnabled\"\n (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n (keydown)=\"onDayKeyDown($event, i)\"\n (focus)=\"onDayFocus(i)\"\n (blur)=\"onDayBlur()\">\n {{ day.value }}\n </button>\n }\n </div>\n }\n\n @if (uiMode() === 'month') {\n <div role=\"grid\" class=\"grid grid-cols-4 text-xs text-center text-role-body\">\n @for (month of monthLabels; track month; let i = $index) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.aria-label]=\"month + ' ' + activeYear()\"\n [disabled]=\"!isMonthSelectable(i) || disabled()\"\n class=\"flex items-center px-2 py-2.5 justify-center select-none rounded-lg uppercase transition-colors duration-200\"\n [class.text-role-disabled]=\"!isMonthSelectable(i)\"\n [class.hover:bg-page-secondary]=\"isMonthSelectable(i)\"\n [class.cursor-pointer]=\"isMonthSelectable(i)\"\n [class.cursor-not-allowed]=\"!isMonthSelectable(i)\"\n (click)=\"onMonthSelected(i)\">\n {{ month }}\n </button>\n }\n </div>\n }\n\n @if (uiMode() === 'year') {\n <div role=\"grid\" class=\"grid grid-cols-4 text-xs text-center text-role-body\">\n @for (year of years(); track year.value) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.aria-label]=\"year.value.toString()\"\n [disabled]=\"!year.isEnabled || disabled()\"\n class=\"flex items-center px-2 py-2.5 justify-center select-none rounded-lg transition-colors duration-200\"\n [class.text-role-disabled]=\"!year.isEnabled\"\n [class.hover:bg-page-secondary]=\"year.isEnabled\"\n [class.cursor-pointer]=\"year.isEnabled\"\n [class.cursor-not-allowed]=\"!year.isEnabled\"\n (click)=\"year.isEnabled ? onYearSelected(year.value) : null\">\n {{ year.value }}\n </button>\n }\n </div>\n }\n</div>\n" }]
|
|
11607
11607
|
}], ctorParameters: () => [], propDecorators: { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", 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 }] }], allowToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToday", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }] } });
|
|
@@ -11690,10 +11690,10 @@ class SignalDateFieldPanelComponent {
|
|
|
11690
11690
|
disabledDates = input([], /* @ts-ignore */
|
|
11691
11691
|
...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
|
|
11692
11692
|
dateSelected = output();
|
|
11693
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
11694
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
11693
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateFieldPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11694
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SignalDateFieldPanelComponent, isStandalone: true, selector: "lib-signal-date-field-panel", inputs: { embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", 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 }, 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" }, ngImport: i0, template: "<lib-signal-date-picker\n [embedded]=\"embedded()\"\n [value]=\"selectedDate()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n [debounceValueChange]=\"false\"\n (dateSelected)=\"dateSelected.emit($event)\" />\n", dependencies: [{ kind: "component", type: SignalDatePicker, selector: "lib-signal-date-picker", inputs: ["embedded", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates", "debounceValueChange", "debounceMs"], outputs: ["valueChange", "dateSelected"] }] });
|
|
11695
11695
|
}
|
|
11696
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
11696
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateFieldPanelComponent, decorators: [{
|
|
11697
11697
|
type: Component,
|
|
11698
11698
|
args: [{ selector: 'lib-signal-date-field-panel', imports: [SignalDatePicker], template: "<lib-signal-date-picker\n [embedded]=\"embedded()\"\n [value]=\"selectedDate()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n [debounceValueChange]=\"false\"\n (dateSelected)=\"dateSelected.emit($event)\" />\n" }]
|
|
11699
11699
|
}], propDecorators: { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", 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 }] }], allowToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToday", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }] } });
|
|
@@ -11707,10 +11707,10 @@ class SignalDateFieldPanelOverlayComponent {
|
|
|
11707
11707
|
onDismissed() {
|
|
11708
11708
|
this.dialogRef.close();
|
|
11709
11709
|
}
|
|
11710
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
11711
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
11710
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateFieldPanelOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11711
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalDateFieldPanelOverlayComponent, isStandalone: true, selector: "lib-signal-date-field-panel-overlay", ngImport: i0, template: "<div class=\"flex flex-col gap-2 p-2\">\n <div class=\"flex items-center justify-between gap-2 px-1\">\n @if (data.label) {\n <span class=\"text-caption text-role-body\">{{ data.label }}</span>\n }\n <button\n type=\"button\"\n aria-label=\"Close\"\n class=\"p-2 flex items-center justify-center rounded-full hover:bg-page-secondary cursor-pointer text-role-caption transition-colors shrink-0\"\n (click)=\"onDismissed()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"data.iconSize\"\n [style.height.px]=\"data.iconSize\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n </div>\n\n <lib-signal-date-field-panel\n [embedded]=\"true\"\n [selectedDate]=\"data.selectedDate\"\n [minDate]=\"data.minDate\"\n [maxDate]=\"data.maxDate\"\n [allowOnlyPast]=\"data.allowOnlyPast\"\n [allowOnlyFuture]=\"data.allowOnlyFuture\"\n [allowToday]=\"data.allowToday\"\n [disabledDays]=\"data.disabledDays\"\n [disabledDates]=\"data.disabledDates\"\n (dateSelected)=\"onDateSelected($event)\" />\n</div>\n", dependencies: [{ kind: "component", type: SignalDateFieldPanelComponent, selector: "lib-signal-date-field-panel", inputs: ["embedded", "selectedDate", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateSelected"] }] });
|
|
11712
11712
|
}
|
|
11713
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
11713
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateFieldPanelOverlayComponent, decorators: [{
|
|
11714
11714
|
type: Component,
|
|
11715
11715
|
args: [{ selector: 'lib-signal-date-field-panel-overlay', imports: [SignalDateFieldPanelComponent], template: "<div class=\"flex flex-col gap-2 p-2\">\n <div class=\"flex items-center justify-between gap-2 px-1\">\n @if (data.label) {\n <span class=\"text-caption text-role-body\">{{ data.label }}</span>\n }\n <button\n type=\"button\"\n aria-label=\"Close\"\n class=\"p-2 flex items-center justify-center rounded-full hover:bg-page-secondary cursor-pointer text-role-caption transition-colors shrink-0\"\n (click)=\"onDismissed()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"data.iconSize\"\n [style.height.px]=\"data.iconSize\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n </div>\n\n <lib-signal-date-field-panel\n [embedded]=\"true\"\n [selectedDate]=\"data.selectedDate\"\n [minDate]=\"data.minDate\"\n [maxDate]=\"data.maxDate\"\n [allowOnlyPast]=\"data.allowOnlyPast\"\n [allowOnlyFuture]=\"data.allowOnlyFuture\"\n [allowToday]=\"data.allowToday\"\n [disabledDays]=\"data.disabledDays\"\n [disabledDates]=\"data.disabledDates\"\n (dateSelected)=\"onDateSelected($event)\" />\n</div>\n" }]
|
|
11716
11716
|
}] });
|
|
@@ -12042,10 +12042,10 @@ class SignalDateField extends BaseSignalTextInputControl {
|
|
|
12042
12042
|
this.valueChange.emit(val);
|
|
12043
12043
|
}
|
|
12044
12044
|
}
|
|
12045
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
12046
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDateField, isStandalone: true, selector: "lib-signal-date-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", 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 }, 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: { valueChange: "valueChange", dateSelected: "dateSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"date\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n [value]=\"dateInputValue()\"\n [min]=\"nativeMinDate()\"\n [max]=\"nativeMaxDate()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeCalendar()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-date-field-panel\n [selectedDate]=\"value()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n (dateSelected)=\"onDatePicked($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=date]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { 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: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDateFieldPanelComponent, selector: "lib-signal-date-field-panel", inputs: ["embedded", "selectedDate", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateSelected"] }] });
|
|
12045
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12046
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalDateField, isStandalone: true, selector: "lib-signal-date-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", 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 }, 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: { valueChange: "valueChange", dateSelected: "dateSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"date\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n [value]=\"dateInputValue()\"\n [min]=\"nativeMinDate()\"\n [max]=\"nativeMaxDate()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeCalendar()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-date-field-panel\n [selectedDate]=\"value()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n (dateSelected)=\"onDatePicked($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=date]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { 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: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDateFieldPanelComponent, selector: "lib-signal-date-field-panel", inputs: ["embedded", "selectedDate", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateSelected"] }] });
|
|
12047
12047
|
}
|
|
12048
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
12048
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateField, decorators: [{
|
|
12049
12049
|
type: Component,
|
|
12050
12050
|
args: [{ selector: 'lib-signal-date-field', imports: [
|
|
12051
12051
|
AppSvgIconComponent,
|
|
@@ -12506,10 +12506,10 @@ class SignalDateRangePicker extends BaseFormControl {
|
|
|
12506
12506
|
this.valueChange.emit(val);
|
|
12507
12507
|
}
|
|
12508
12508
|
}
|
|
12509
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
12510
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDateRangePicker, isStandalone: true, selector: "lib-signal-date-range-picker", inputs: { embedded: { classPropertyName: "embedded", publicName: "embedded", 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 }, 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 }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateRangeSelected: "dateRangeSelected" }, usesInheritance: true, ngImport: i0, template: "<div\n role=\"application\"\n aria-label=\"Date range picker\"\n class=\"flex flex-col gap-3 min-h-96 px-3 py-3 select-none w-min\"\n [class.rounded-xl]=\"!embedded()\"\n [class.bg-page]=\"!embedded()\"\n [class.border]=\"!embedded()\"\n [class.border-default]=\"!embedded()\"\n [class.shadow-lg]=\"!embedded()\"\n [class.opacity-60]=\"disabled()\"\n [class.pointer-events-none]=\"disabled()\">\n\n <div class=\"flex items-center justify-between w-[280px]\">\n <button\n type=\"button\"\n class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-page-secondary rounded-full cursor-pointer text-role-body transition-colors duration-200\"\n [attr.aria-label]=\"uiMode() === 'date' ? 'Select year' : uiMode() === 'month' ? 'Select year range' : 'Back to calendar'\"\n (click)=\"onYearSelectionPressed()\">\n @switch (uiMode()) {\n @case ('date') {\n <span class=\"text-caption uppercase\">{{ monthYearLabel() }}</span>\n <svg\n class=\"h-[18px] w-[18px] text-role-body\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\" />\n </svg>\n }\n @case ('month') {\n <span class=\"text-caption uppercase\">{{ activeYear() }}</span>\n }\n @case ('year') {\n <span class=\"text-caption uppercase\">{{ yearRangeLabel() }}</span>\n <svg\n class=\"h-[18px] w-[18px] text-role-body\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\" />\n </svg>\n }\n }\n </button>\n\n <div class=\"flex items-center gap-2\">\n <button\n type=\"button\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-page-secondary select-none text-role-caption transition-colors duration-200\"\n [class.cursor-pointer]=\"canNavigatePrevious()\"\n [class.cursor-not-allowed]=\"!canNavigatePrevious()\"\n [class.opacity-40]=\"!canNavigatePrevious()\"\n [disabled]=\"!canNavigatePrevious() || disabled()\"\n [attr.aria-label]=\"previousNavLabel()\"\n (click)=\"previousPressed()\">\n <svg\n class=\"h-[24px] w-[24px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n\n <button\n type=\"button\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-page-secondary cursor-pointer select-none text-role-caption transition-colors duration-200\"\n [attr.aria-label]=\"nextNavLabel()\"\n (click)=\"nextPressed()\">\n <svg\n class=\"h-[24px] w-[24px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n </div>\n </div>\n\n @if (uiMode() === 'date') {\n <div role=\"grid\" class=\"grid grid-cols-7 text-xs text-center gap-y-1\">\n @for (day of weekdayHeaders; track day.day) {\n <span\n role=\"columnheader\"\n class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-role-body\">\n {{ day.displayName }}\n </span>\n }\n\n @for (blankDay of blankDays(); track blankDay) {\n <span\n role=\"presentation\"\n class=\"flex items-center justify-center w-[40px] h-[40px] rounded-lg text-transparent\"\n aria-hidden=\"true\"></span>\n }\n\n @for (day of daysOfMonth(); track day.value; let i = $index) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.data-day-index]=\"i\"\n [attr.aria-label]=\"monthLabels[activeMonth()] + ' ' + day.value + ', ' + activeYear()\"\n [attr.aria-selected]=\"isDayRangeStart(day.value) || isDayRangeEnd(day.value)\"\n [attr.aria-disabled]=\"!day.isEnabled\"\n [disabled]=\"!day.isEnabled || disabled()\"\n [tabIndex]=\"getDayTabIndex(i)\"\n class=\"flex items-center justify-center w-[40px] h-[40px] select-none transition-colors duration-200\"\n [class.text-role-disabled]=\"!day.isEnabled\"\n [class.font-semibold]=\"isDayRangeStart(day.value) || isDayRangeEnd(day.value)\"\n [class.bg-surface-primary]=\"isDayRangeStart(day.value) || isDayRangeEnd(day.value)\"\n [class.text-primary-on-color]=\"isDayRangeStart(day.value) || isDayRangeEnd(day.value)\"\n [class.rounded-tl-lg]=\"isDayRangeStart(day.value)\"\n [class.rounded-bl-lg]=\"isDayRangeStart(day.value)\"\n [class.rounded-tr-lg]=\"isDayRangeEnd(day.value)\"\n [class.rounded-br-lg]=\"isDayRangeEnd(day.value)\"\n [class.rounded-lg]=\"isDayToday(day.value) && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value) && !isDayInSelectedRange(day.value) && !isDayInHoveredRange(day.value)\"\n [class.border]=\"isDayToday(day.value) && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value)\"\n [class.border-primary]=\"isDayToday(day.value) && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value)\"\n [class.bg-surface-primary-subtle]=\"isDayInSelectedRange(day.value) || isDayInHoveredRange(day.value)\"\n [class.text-role-body]=\"day.isEnabled && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value)\"\n [class.border-t]=\"isDayHoverEndpoint(day.value)\"\n [class.border-b]=\"isDayHoverEndpoint(day.value)\"\n [class.border-r]=\"isDayHoverEndpoint(day.value)\"\n [class.border-dashed]=\"isDayHoverEndpoint(day.value)\"\n [class.border-default]=\"isDayHoverEndpoint(day.value)\"\n [class.bg-page-secondary]=\"isDayHoverEndpoint(day.value)\"\n [class.hover:bg-page-secondary]=\"day.isEnabled && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value) && !isDayInSelectedRange(day.value)\"\n [class.cursor-pointer]=\"day.isEnabled\"\n [class.cursor-not-allowed]=\"!day.isEnabled\"\n (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n (mouseenter)=\"day.isEnabled ? onDayHovered(day.value) : null\"\n (mouseleave)=\"onDayHoverLeft()\"\n (keydown)=\"onDayKeyDown($event, i)\"\n (focus)=\"onDayFocus(i)\"\n (blur)=\"onDayBlur()\">\n {{ day.value }}\n </button>\n }\n </div>\n }\n\n @if (uiMode() === 'month') {\n <div role=\"grid\" class=\"grid grid-cols-4 text-xs text-center text-role-body\">\n @for (month of monthLabels; track month; let i = $index) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.aria-label]=\"month + ' ' + activeYear()\"\n [disabled]=\"!isMonthSelectable(i) || disabled()\"\n class=\"flex items-center px-2 py-2.5 justify-center select-none rounded-lg uppercase transition-colors duration-200\"\n [class.text-role-disabled]=\"!isMonthSelectable(i)\"\n [class.hover:bg-page-secondary]=\"isMonthSelectable(i)\"\n [class.cursor-pointer]=\"isMonthSelectable(i)\"\n [class.cursor-not-allowed]=\"!isMonthSelectable(i)\"\n (click)=\"onMonthSelected(i)\">\n {{ month }}\n </button>\n }\n </div>\n }\n\n @if (uiMode() === 'year') {\n <div role=\"grid\" class=\"grid grid-cols-4 text-xs text-center text-role-body\">\n @for (year of years(); track year.value) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.aria-label]=\"year.value.toString()\"\n [disabled]=\"!year.isEnabled || disabled()\"\n class=\"flex items-center px-2 py-2.5 justify-center select-none rounded-lg transition-colors duration-200\"\n [class.text-role-disabled]=\"!year.isEnabled\"\n [class.hover:bg-page-secondary]=\"year.isEnabled\"\n [class.cursor-pointer]=\"year.isEnabled\"\n [class.cursor-not-allowed]=\"!year.isEnabled\"\n (click)=\"year.isEnabled ? onYearSelected(year.value) : null\">\n {{ year.value }}\n </button>\n }\n </div>\n }\n\n <div class=\"flex items-center justify-end w-[280px]\">\n <button\n type=\"button\"\n class=\"text-overline px-2 py-2 rounded-md transition-all duration-300 hover:bg-page-secondary cursor-pointer select-none text-primary\"\n (click)=\"clearSelection()\">\n Clear\n </button>\n </div>\n</div>\n" });
|
|
12509
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12510
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalDateRangePicker, isStandalone: true, selector: "lib-signal-date-range-picker", inputs: { embedded: { classPropertyName: "embedded", publicName: "embedded", 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 }, 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 }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateRangeSelected: "dateRangeSelected" }, usesInheritance: true, ngImport: i0, template: "<div\n role=\"application\"\n aria-label=\"Date range picker\"\n class=\"flex flex-col gap-3 min-h-96 px-3 py-3 select-none w-min\"\n [class.rounded-xl]=\"!embedded()\"\n [class.bg-page]=\"!embedded()\"\n [class.border]=\"!embedded()\"\n [class.border-default]=\"!embedded()\"\n [class.shadow-lg]=\"!embedded()\"\n [class.opacity-60]=\"disabled()\"\n [class.pointer-events-none]=\"disabled()\">\n\n <div class=\"flex items-center justify-between w-[280px]\">\n <button\n type=\"button\"\n class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-page-secondary rounded-full cursor-pointer text-role-body transition-colors duration-200\"\n [attr.aria-label]=\"uiMode() === 'date' ? 'Select year' : uiMode() === 'month' ? 'Select year range' : 'Back to calendar'\"\n (click)=\"onYearSelectionPressed()\">\n @switch (uiMode()) {\n @case ('date') {\n <span class=\"text-caption uppercase\">{{ monthYearLabel() }}</span>\n <svg\n class=\"h-[18px] w-[18px] text-role-body\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\" />\n </svg>\n }\n @case ('month') {\n <span class=\"text-caption uppercase\">{{ activeYear() }}</span>\n }\n @case ('year') {\n <span class=\"text-caption uppercase\">{{ yearRangeLabel() }}</span>\n <svg\n class=\"h-[18px] w-[18px] text-role-body\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\" />\n </svg>\n }\n }\n </button>\n\n <div class=\"flex items-center gap-2\">\n <button\n type=\"button\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-page-secondary select-none text-role-caption transition-colors duration-200\"\n [class.cursor-pointer]=\"canNavigatePrevious()\"\n [class.cursor-not-allowed]=\"!canNavigatePrevious()\"\n [class.opacity-40]=\"!canNavigatePrevious()\"\n [disabled]=\"!canNavigatePrevious() || disabled()\"\n [attr.aria-label]=\"previousNavLabel()\"\n (click)=\"previousPressed()\">\n <svg\n class=\"h-[24px] w-[24px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n\n <button\n type=\"button\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-page-secondary cursor-pointer select-none text-role-caption transition-colors duration-200\"\n [attr.aria-label]=\"nextNavLabel()\"\n (click)=\"nextPressed()\">\n <svg\n class=\"h-[24px] w-[24px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n </div>\n </div>\n\n @if (uiMode() === 'date') {\n <div role=\"grid\" class=\"grid grid-cols-7 text-xs text-center gap-y-1\">\n @for (day of weekdayHeaders; track day.day) {\n <span\n role=\"columnheader\"\n class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-role-body\">\n {{ day.displayName }}\n </span>\n }\n\n @for (blankDay of blankDays(); track blankDay) {\n <span\n role=\"presentation\"\n class=\"flex items-center justify-center w-[40px] h-[40px] rounded-lg text-transparent\"\n aria-hidden=\"true\"></span>\n }\n\n @for (day of daysOfMonth(); track day.value; let i = $index) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.data-day-index]=\"i\"\n [attr.aria-label]=\"monthLabels[activeMonth()] + ' ' + day.value + ', ' + activeYear()\"\n [attr.aria-selected]=\"isDayRangeStart(day.value) || isDayRangeEnd(day.value)\"\n [attr.aria-disabled]=\"!day.isEnabled\"\n [disabled]=\"!day.isEnabled || disabled()\"\n [tabIndex]=\"getDayTabIndex(i)\"\n class=\"flex items-center justify-center w-[40px] h-[40px] select-none transition-colors duration-200\"\n [class.text-role-disabled]=\"!day.isEnabled\"\n [class.font-semibold]=\"isDayRangeStart(day.value) || isDayRangeEnd(day.value)\"\n [class.bg-surface-primary]=\"isDayRangeStart(day.value) || isDayRangeEnd(day.value)\"\n [class.text-primary-on-color]=\"isDayRangeStart(day.value) || isDayRangeEnd(day.value)\"\n [class.rounded-tl-lg]=\"isDayRangeStart(day.value)\"\n [class.rounded-bl-lg]=\"isDayRangeStart(day.value)\"\n [class.rounded-tr-lg]=\"isDayRangeEnd(day.value)\"\n [class.rounded-br-lg]=\"isDayRangeEnd(day.value)\"\n [class.rounded-lg]=\"isDayToday(day.value) && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value) && !isDayInSelectedRange(day.value) && !isDayInHoveredRange(day.value)\"\n [class.border]=\"isDayToday(day.value) && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value)\"\n [class.border-primary]=\"isDayToday(day.value) && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value)\"\n [class.bg-surface-primary-subtle]=\"isDayInSelectedRange(day.value) || isDayInHoveredRange(day.value)\"\n [class.text-role-body]=\"day.isEnabled && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value)\"\n [class.border-t]=\"isDayHoverEndpoint(day.value)\"\n [class.border-b]=\"isDayHoverEndpoint(day.value)\"\n [class.border-r]=\"isDayHoverEndpoint(day.value)\"\n [class.border-dashed]=\"isDayHoverEndpoint(day.value)\"\n [class.border-default]=\"isDayHoverEndpoint(day.value)\"\n [class.bg-page-secondary]=\"isDayHoverEndpoint(day.value)\"\n [class.hover:bg-page-secondary]=\"day.isEnabled && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value) && !isDayInSelectedRange(day.value)\"\n [class.cursor-pointer]=\"day.isEnabled\"\n [class.cursor-not-allowed]=\"!day.isEnabled\"\n (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n (mouseenter)=\"day.isEnabled ? onDayHovered(day.value) : null\"\n (mouseleave)=\"onDayHoverLeft()\"\n (keydown)=\"onDayKeyDown($event, i)\"\n (focus)=\"onDayFocus(i)\"\n (blur)=\"onDayBlur()\">\n {{ day.value }}\n </button>\n }\n </div>\n }\n\n @if (uiMode() === 'month') {\n <div role=\"grid\" class=\"grid grid-cols-4 text-xs text-center text-role-body\">\n @for (month of monthLabels; track month; let i = $index) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.aria-label]=\"month + ' ' + activeYear()\"\n [disabled]=\"!isMonthSelectable(i) || disabled()\"\n class=\"flex items-center px-2 py-2.5 justify-center select-none rounded-lg uppercase transition-colors duration-200\"\n [class.text-role-disabled]=\"!isMonthSelectable(i)\"\n [class.hover:bg-page-secondary]=\"isMonthSelectable(i)\"\n [class.cursor-pointer]=\"isMonthSelectable(i)\"\n [class.cursor-not-allowed]=\"!isMonthSelectable(i)\"\n (click)=\"onMonthSelected(i)\">\n {{ month }}\n </button>\n }\n </div>\n }\n\n @if (uiMode() === 'year') {\n <div role=\"grid\" class=\"grid grid-cols-4 text-xs text-center text-role-body\">\n @for (year of years(); track year.value) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.aria-label]=\"year.value.toString()\"\n [disabled]=\"!year.isEnabled || disabled()\"\n class=\"flex items-center px-2 py-2.5 justify-center select-none rounded-lg transition-colors duration-200\"\n [class.text-role-disabled]=\"!year.isEnabled\"\n [class.hover:bg-page-secondary]=\"year.isEnabled\"\n [class.cursor-pointer]=\"year.isEnabled\"\n [class.cursor-not-allowed]=\"!year.isEnabled\"\n (click)=\"year.isEnabled ? onYearSelected(year.value) : null\">\n {{ year.value }}\n </button>\n }\n </div>\n }\n\n <div class=\"flex items-center justify-end w-[280px]\">\n <button\n type=\"button\"\n class=\"text-overline px-2 py-2 rounded-md transition-all duration-300 hover:bg-page-secondary cursor-pointer select-none text-primary\"\n (click)=\"clearSelection()\">\n Clear\n </button>\n </div>\n</div>\n" });
|
|
12511
12511
|
}
|
|
12512
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
12512
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateRangePicker, decorators: [{
|
|
12513
12513
|
type: Component,
|
|
12514
12514
|
args: [{ selector: 'lib-signal-date-range-picker', template: "<div\n role=\"application\"\n aria-label=\"Date range picker\"\n class=\"flex flex-col gap-3 min-h-96 px-3 py-3 select-none w-min\"\n [class.rounded-xl]=\"!embedded()\"\n [class.bg-page]=\"!embedded()\"\n [class.border]=\"!embedded()\"\n [class.border-default]=\"!embedded()\"\n [class.shadow-lg]=\"!embedded()\"\n [class.opacity-60]=\"disabled()\"\n [class.pointer-events-none]=\"disabled()\">\n\n <div class=\"flex items-center justify-between w-[280px]\">\n <button\n type=\"button\"\n class=\"flex items-center gap-1 px-2.5 py-2 hover:bg-page-secondary rounded-full cursor-pointer text-role-body transition-colors duration-200\"\n [attr.aria-label]=\"uiMode() === 'date' ? 'Select year' : uiMode() === 'month' ? 'Select year range' : 'Back to calendar'\"\n (click)=\"onYearSelectionPressed()\">\n @switch (uiMode()) {\n @case ('date') {\n <span class=\"text-caption uppercase\">{{ monthYearLabel() }}</span>\n <svg\n class=\"h-[18px] w-[18px] text-role-body\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M7 10L12 15L17 10H7Z\" fill=\"currentColor\" />\n </svg>\n }\n @case ('month') {\n <span class=\"text-caption uppercase\">{{ activeYear() }}</span>\n }\n @case ('year') {\n <span class=\"text-caption uppercase\">{{ yearRangeLabel() }}</span>\n <svg\n class=\"h-[18px] w-[18px] text-role-body\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M7 15L12 10L17 15H7Z\" fill=\"currentColor\" />\n </svg>\n }\n }\n </button>\n\n <div class=\"flex items-center gap-2\">\n <button\n type=\"button\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-page-secondary select-none text-role-caption transition-colors duration-200\"\n [class.cursor-pointer]=\"canNavigatePrevious()\"\n [class.cursor-not-allowed]=\"!canNavigatePrevious()\"\n [class.opacity-40]=\"!canNavigatePrevious()\"\n [disabled]=\"!canNavigatePrevious() || disabled()\"\n [attr.aria-label]=\"previousNavLabel()\"\n (click)=\"previousPressed()\">\n <svg\n class=\"h-[24px] w-[24px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M15.41 16.58L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n\n <button\n type=\"button\"\n class=\"flex items-center justify-center h-[36px] w-[36px] rounded-full hover:bg-page-secondary cursor-pointer select-none text-role-caption transition-colors duration-200\"\n [attr.aria-label]=\"nextNavLabel()\"\n (click)=\"nextPressed()\">\n <svg\n class=\"h-[24px] w-[24px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path d=\"M8.58997 16.58L13.17 12L8.58997 7.41L9.99997 6L16 12L9.99997 18L8.58997 16.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n </div>\n </div>\n\n @if (uiMode() === 'date') {\n <div role=\"grid\" class=\"grid grid-cols-7 text-xs text-center gap-y-1\">\n @for (day of weekdayHeaders; track day.day) {\n <span\n role=\"columnheader\"\n class=\"flex items-center justify-center w-[40px] h-[40px] font-semibold rounded-lg text-role-body\">\n {{ day.displayName }}\n </span>\n }\n\n @for (blankDay of blankDays(); track blankDay) {\n <span\n role=\"presentation\"\n class=\"flex items-center justify-center w-[40px] h-[40px] rounded-lg text-transparent\"\n aria-hidden=\"true\"></span>\n }\n\n @for (day of daysOfMonth(); track day.value; let i = $index) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.data-day-index]=\"i\"\n [attr.aria-label]=\"monthLabels[activeMonth()] + ' ' + day.value + ', ' + activeYear()\"\n [attr.aria-selected]=\"isDayRangeStart(day.value) || isDayRangeEnd(day.value)\"\n [attr.aria-disabled]=\"!day.isEnabled\"\n [disabled]=\"!day.isEnabled || disabled()\"\n [tabIndex]=\"getDayTabIndex(i)\"\n class=\"flex items-center justify-center w-[40px] h-[40px] select-none transition-colors duration-200\"\n [class.text-role-disabled]=\"!day.isEnabled\"\n [class.font-semibold]=\"isDayRangeStart(day.value) || isDayRangeEnd(day.value)\"\n [class.bg-surface-primary]=\"isDayRangeStart(day.value) || isDayRangeEnd(day.value)\"\n [class.text-primary-on-color]=\"isDayRangeStart(day.value) || isDayRangeEnd(day.value)\"\n [class.rounded-tl-lg]=\"isDayRangeStart(day.value)\"\n [class.rounded-bl-lg]=\"isDayRangeStart(day.value)\"\n [class.rounded-tr-lg]=\"isDayRangeEnd(day.value)\"\n [class.rounded-br-lg]=\"isDayRangeEnd(day.value)\"\n [class.rounded-lg]=\"isDayToday(day.value) && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value) && !isDayInSelectedRange(day.value) && !isDayInHoveredRange(day.value)\"\n [class.border]=\"isDayToday(day.value) && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value)\"\n [class.border-primary]=\"isDayToday(day.value) && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value)\"\n [class.bg-surface-primary-subtle]=\"isDayInSelectedRange(day.value) || isDayInHoveredRange(day.value)\"\n [class.text-role-body]=\"day.isEnabled && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value)\"\n [class.border-t]=\"isDayHoverEndpoint(day.value)\"\n [class.border-b]=\"isDayHoverEndpoint(day.value)\"\n [class.border-r]=\"isDayHoverEndpoint(day.value)\"\n [class.border-dashed]=\"isDayHoverEndpoint(day.value)\"\n [class.border-default]=\"isDayHoverEndpoint(day.value)\"\n [class.bg-page-secondary]=\"isDayHoverEndpoint(day.value)\"\n [class.hover:bg-page-secondary]=\"day.isEnabled && !isDayRangeStart(day.value) && !isDayRangeEnd(day.value) && !isDayInSelectedRange(day.value)\"\n [class.cursor-pointer]=\"day.isEnabled\"\n [class.cursor-not-allowed]=\"!day.isEnabled\"\n (click)=\"day.isEnabled ? onDaySelected(day.value) : null\"\n (mouseenter)=\"day.isEnabled ? onDayHovered(day.value) : null\"\n (mouseleave)=\"onDayHoverLeft()\"\n (keydown)=\"onDayKeyDown($event, i)\"\n (focus)=\"onDayFocus(i)\"\n (blur)=\"onDayBlur()\">\n {{ day.value }}\n </button>\n }\n </div>\n }\n\n @if (uiMode() === 'month') {\n <div role=\"grid\" class=\"grid grid-cols-4 text-xs text-center text-role-body\">\n @for (month of monthLabels; track month; let i = $index) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.aria-label]=\"month + ' ' + activeYear()\"\n [disabled]=\"!isMonthSelectable(i) || disabled()\"\n class=\"flex items-center px-2 py-2.5 justify-center select-none rounded-lg uppercase transition-colors duration-200\"\n [class.text-role-disabled]=\"!isMonthSelectable(i)\"\n [class.hover:bg-page-secondary]=\"isMonthSelectable(i)\"\n [class.cursor-pointer]=\"isMonthSelectable(i)\"\n [class.cursor-not-allowed]=\"!isMonthSelectable(i)\"\n (click)=\"onMonthSelected(i)\">\n {{ month }}\n </button>\n }\n </div>\n }\n\n @if (uiMode() === 'year') {\n <div role=\"grid\" class=\"grid grid-cols-4 text-xs text-center text-role-body\">\n @for (year of years(); track year.value) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [attr.aria-label]=\"year.value.toString()\"\n [disabled]=\"!year.isEnabled || disabled()\"\n class=\"flex items-center px-2 py-2.5 justify-center select-none rounded-lg transition-colors duration-200\"\n [class.text-role-disabled]=\"!year.isEnabled\"\n [class.hover:bg-page-secondary]=\"year.isEnabled\"\n [class.cursor-pointer]=\"year.isEnabled\"\n [class.cursor-not-allowed]=\"!year.isEnabled\"\n (click)=\"year.isEnabled ? onYearSelected(year.value) : null\">\n {{ year.value }}\n </button>\n }\n </div>\n }\n\n <div class=\"flex items-center justify-end w-[280px]\">\n <button\n type=\"button\"\n class=\"text-overline px-2 py-2 rounded-md transition-all duration-300 hover:bg-page-secondary cursor-pointer select-none text-primary\"\n (click)=\"clearSelection()\">\n Clear\n </button>\n </div>\n</div>\n" }]
|
|
12515
12515
|
}], ctorParameters: () => [], propDecorators: { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", 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 }] }], allowToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToday", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateRangeSelected: [{ type: i0.Output, args: ["dateRangeSelected"] }] } });
|
|
@@ -12583,10 +12583,10 @@ class SignalDateRangeFieldPanelComponent {
|
|
|
12583
12583
|
disabledDates = input([], /* @ts-ignore */
|
|
12584
12584
|
...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
|
|
12585
12585
|
dateRangeSelected = output();
|
|
12586
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
12587
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
12586
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateRangeFieldPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12587
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SignalDateRangeFieldPanelComponent, isStandalone: true, selector: "lib-signal-date-range-field-panel", inputs: { embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, selectedRange: { classPropertyName: "selectedRange", publicName: "selectedRange", 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 }, 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: { dateRangeSelected: "dateRangeSelected" }, ngImport: i0, template: "<lib-signal-date-range-picker\n [embedded]=\"embedded()\"\n [value]=\"selectedRange()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n [debounceValueChange]=\"false\"\n (dateRangeSelected)=\"dateRangeSelected.emit($event)\" />\n", dependencies: [{ kind: "component", type: SignalDateRangePicker, selector: "lib-signal-date-range-picker", inputs: ["embedded", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates", "debounceValueChange", "debounceMs"], outputs: ["valueChange", "dateRangeSelected"] }] });
|
|
12588
12588
|
}
|
|
12589
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
12589
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateRangeFieldPanelComponent, decorators: [{
|
|
12590
12590
|
type: Component,
|
|
12591
12591
|
args: [{ selector: 'lib-signal-date-range-field-panel', imports: [SignalDateRangePicker], template: "<lib-signal-date-range-picker\n [embedded]=\"embedded()\"\n [value]=\"selectedRange()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n [debounceValueChange]=\"false\"\n (dateRangeSelected)=\"dateRangeSelected.emit($event)\" />\n" }]
|
|
12592
12592
|
}], propDecorators: { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], selectedRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRange", 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 }] }], allowToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToday", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], dateRangeSelected: [{ type: i0.Output, args: ["dateRangeSelected"] }] } });
|
|
@@ -12600,10 +12600,10 @@ class SignalDateRangeFieldPanelOverlayComponent {
|
|
|
12600
12600
|
onDismissed() {
|
|
12601
12601
|
this.dialogRef.close();
|
|
12602
12602
|
}
|
|
12603
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
12604
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
12603
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateRangeFieldPanelOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12604
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalDateRangeFieldPanelOverlayComponent, isStandalone: true, selector: "lib-signal-date-range-field-panel-overlay", ngImport: i0, template: "<div class=\"flex flex-col gap-2 p-2\">\n <div class=\"flex items-center justify-between gap-2 px-1\">\n @if (data.label) {\n <span class=\"text-caption text-role-body\">{{ data.label }}</span>\n }\n <button\n type=\"button\"\n aria-label=\"Close\"\n class=\"p-2 flex items-center justify-center rounded-full hover:bg-page-secondary cursor-pointer text-role-caption transition-colors shrink-0\"\n (click)=\"onDismissed()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"data.iconSize\"\n [style.height.px]=\"data.iconSize\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n </div>\n\n <lib-signal-date-range-field-panel\n [embedded]=\"true\"\n [selectedRange]=\"data.selectedRange\"\n [minDate]=\"data.minDate\"\n [maxDate]=\"data.maxDate\"\n [allowOnlyPast]=\"data.allowOnlyPast\"\n [allowOnlyFuture]=\"data.allowOnlyFuture\"\n [allowToday]=\"data.allowToday\"\n [disabledDays]=\"data.disabledDays\"\n [disabledDates]=\"data.disabledDates\"\n (dateRangeSelected)=\"onDateRangeSelected($event)\" />\n</div>\n", dependencies: [{ kind: "component", type: SignalDateRangeFieldPanelComponent, selector: "lib-signal-date-range-field-panel", inputs: ["embedded", "selectedRange", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateRangeSelected"] }] });
|
|
12605
12605
|
}
|
|
12606
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
12606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateRangeFieldPanelOverlayComponent, decorators: [{
|
|
12607
12607
|
type: Component,
|
|
12608
12608
|
args: [{ selector: 'lib-signal-date-range-field-panel-overlay', imports: [SignalDateRangeFieldPanelComponent], template: "<div class=\"flex flex-col gap-2 p-2\">\n <div class=\"flex items-center justify-between gap-2 px-1\">\n @if (data.label) {\n <span class=\"text-caption text-role-body\">{{ data.label }}</span>\n }\n <button\n type=\"button\"\n aria-label=\"Close\"\n class=\"p-2 flex items-center justify-center rounded-full hover:bg-page-secondary cursor-pointer text-role-caption transition-colors shrink-0\"\n (click)=\"onDismissed()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"data.iconSize\"\n [style.height.px]=\"data.iconSize\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n </div>\n\n <lib-signal-date-range-field-panel\n [embedded]=\"true\"\n [selectedRange]=\"data.selectedRange\"\n [minDate]=\"data.minDate\"\n [maxDate]=\"data.maxDate\"\n [allowOnlyPast]=\"data.allowOnlyPast\"\n [allowOnlyFuture]=\"data.allowOnlyFuture\"\n [allowToday]=\"data.allowToday\"\n [disabledDays]=\"data.disabledDays\"\n [disabledDates]=\"data.disabledDates\"\n (dateRangeSelected)=\"onDateRangeSelected($event)\" />\n</div>\n" }]
|
|
12609
12609
|
}] });
|
|
@@ -12936,10 +12936,10 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
|
|
|
12936
12936
|
this.valueChange.emit(val);
|
|
12937
12937
|
}
|
|
12938
12938
|
}
|
|
12939
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
12940
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDateRangeField, isStandalone: true, selector: "lib-signal-date-range-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", 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 }, 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: { valueChange: "valueChange", dateRangeSelected: "dateRangeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"text\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n mask=\"00/00/0000 - 00/00/0000\"\n [showMaskTyped]=\"isFocused()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : (placeholder() || maskPlaceholder())\"\n [value]=\"textInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeCalendar()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-date-range-field-panel\n [selectedRange]=\"value()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n (dateRangeSelected)=\"onRangePicked($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { 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: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { 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: "component", type: SignalDateRangeFieldPanelComponent, selector: "lib-signal-date-range-field-panel", inputs: ["embedded", "selectedRange", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateRangeSelected"] }] });
|
|
12939
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateRangeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12940
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalDateRangeField, isStandalone: true, selector: "lib-signal-date-range-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", 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 }, 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: { valueChange: "valueChange", dateRangeSelected: "dateRangeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"text\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n mask=\"00/00/0000 - 00/00/0000\"\n [showMaskTyped]=\"isFocused()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : (placeholder() || maskPlaceholder())\"\n [value]=\"textInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeCalendar()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-date-range-field-panel\n [selectedRange]=\"value()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n (dateRangeSelected)=\"onRangePicked($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { 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: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { 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: "component", type: SignalDateRangeFieldPanelComponent, selector: "lib-signal-date-range-field-panel", inputs: ["embedded", "selectedRange", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateRangeSelected"] }] });
|
|
12941
12941
|
}
|
|
12942
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
12942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateRangeField, decorators: [{
|
|
12943
12943
|
type: Component,
|
|
12944
12944
|
args: [{ selector: 'lib-signal-date-range-field', imports: [
|
|
12945
12945
|
AppSvgIconComponent,
|
|
@@ -13305,10 +13305,10 @@ class SignalTimePicker extends BaseFormControl {
|
|
|
13305
13305
|
this.valueChange.emit(val);
|
|
13306
13306
|
}
|
|
13307
13307
|
}
|
|
13308
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
13309
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
13308
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13309
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalTimePicker, isStandalone: true, selector: "lib-signal-time-picker", inputs: { timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", timeSelected: "timeSelected" }, usesInheritance: true, ngImport: i0, template: "<div\n role=\"application\"\n aria-label=\"Time picker\"\n class=\"flex flex-col gap-3 px-4 py-4 select-none w-min\"\n [class.rounded-xl]=\"!embedded()\"\n [class.bg-page]=\"!embedded()\"\n [class.border]=\"!embedded()\"\n [class.border-default]=\"!embedded()\"\n [class.shadow-lg]=\"!embedded()\"\n [class.opacity-60]=\"disabled()\"\n [class.pointer-events-none]=\"disabled()\">\n\n @if (!embedded()) {\n <div class=\"flex items-center gap-2\">\n <span class=\"text-caption text-role-caption\">24H</span>\n <button\n type=\"button\"\n role=\"switch\"\n class=\"px-2.5 py-1 rounded-md text-overline transition-colors duration-200\"\n [class.bg-surface-primary]=\"is24HourFormat()\"\n [class.text-primary-on-color]=\"is24HourFormat()\"\n [class.text-primary]=\"!is24HourFormat()\"\n [class.hover:bg-page-secondary]=\"!is24HourFormat()\"\n [attr.aria-checked]=\"is24HourFormat()\"\n [attr.aria-label]=\"is24HourFormat() ? 'Switch to 12 hour format' : 'Switch to 24 hour format'\"\n (click)=\"toggle24HourFormat(!is24HourFormat())\">\n {{ is24HourFormat() ? 'On' : 'Off' }}\n </button>\n </div>\n }\n\n <div class=\"flex items-center gap-6\">\n <div class=\"flex flex-col items-center gap-2\">\n <button\n type=\"button\"\n aria-label=\"Increase hour\"\n class=\"p-2 rounded-full text-role-caption hover:bg-page-secondary transition-colors duration-200\"\n (click)=\"onHourUp()\">\n <svg class=\"size-[24px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z\" fill=\"currentColor\" />\n </svg>\n </button>\n\n <input\n class=\"text-center text-role-body border-none outline-none appearance-none w-[36px] select-none bg-transparent\"\n [value]=\"formattedHours()\"\n (blur)=\"validateHours($event)\"\n (keydown)=\"onHourKeyDown($event)\"\n type=\"number\"\n aria-label=\"Hour\" />\n\n <button\n type=\"button\"\n aria-label=\"Decrease hour\"\n class=\"p-2 rounded-full text-role-caption hover:bg-page-secondary transition-colors duration-200\"\n (click)=\"onHourDown()\">\n <svg class=\"size-[24px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n </div>\n\n <span class=\"text-role-body select-none\" aria-hidden=\"true\">:</span>\n\n <div class=\"flex flex-col items-center gap-2\">\n <button\n type=\"button\"\n aria-label=\"Increase minute\"\n class=\"p-2 rounded-full text-role-caption hover:bg-page-secondary transition-colors duration-200\"\n (click)=\"onMinuteUp()\">\n <svg class=\"size-[24px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z\" fill=\"currentColor\" />\n </svg>\n </button>\n\n <input\n class=\"text-center text-role-body border-none outline-none appearance-none w-[36px] select-none bg-transparent\"\n [value]=\"formattedMinutes()\"\n (blur)=\"validateMinutes($event)\"\n (keydown)=\"onMinuteKeyDown($event)\"\n type=\"number\"\n aria-label=\"Minute\" />\n\n <button\n type=\"button\"\n aria-label=\"Decrease minute\"\n class=\"p-2 rounded-full text-role-caption hover:bg-page-secondary transition-colors duration-200\"\n (click)=\"onMinuteDown()\">\n <svg class=\"size-[24px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n </div>\n\n @if (!is24HourFormat()) {\n <div class=\"flex gap-2\" role=\"group\" aria-label=\"Select AM or PM\">\n <button\n type=\"button\"\n class=\"px-2.5 py-1 rounded-md text-overline transition-colors duration-200\"\n [class.bg-surface-primary]=\"period() === 'AM'\"\n [class.text-primary-on-color]=\"period() === 'AM'\"\n [class.text-primary]=\"period() !== 'AM'\"\n [class.hover:bg-page-secondary]=\"period() !== 'AM'\"\n [attr.aria-pressed]=\"period() === 'AM'\"\n (click)=\"setPeriod('AM')\">\n AM\n </button>\n <button\n type=\"button\"\n class=\"px-2.5 py-1 rounded-md text-overline transition-colors duration-200\"\n [class.bg-surface-primary]=\"period() === 'PM'\"\n [class.text-primary-on-color]=\"period() === 'PM'\"\n [class.text-primary]=\"period() !== 'PM'\"\n [class.hover:bg-page-secondary]=\"period() !== 'PM'\"\n [attr.aria-pressed]=\"period() === 'PM'\"\n (click)=\"setPeriod('PM')\">\n PM\n </button>\n </div>\n }\n </div>\n</div>\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] });
|
|
13310
13310
|
}
|
|
13311
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
13311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTimePicker, decorators: [{
|
|
13312
13312
|
type: Component,
|
|
13313
13313
|
args: [{ selector: 'lib-signal-time-picker', template: "<div\n role=\"application\"\n aria-label=\"Time picker\"\n class=\"flex flex-col gap-3 px-4 py-4 select-none w-min\"\n [class.rounded-xl]=\"!embedded()\"\n [class.bg-page]=\"!embedded()\"\n [class.border]=\"!embedded()\"\n [class.border-default]=\"!embedded()\"\n [class.shadow-lg]=\"!embedded()\"\n [class.opacity-60]=\"disabled()\"\n [class.pointer-events-none]=\"disabled()\">\n\n @if (!embedded()) {\n <div class=\"flex items-center gap-2\">\n <span class=\"text-caption text-role-caption\">24H</span>\n <button\n type=\"button\"\n role=\"switch\"\n class=\"px-2.5 py-1 rounded-md text-overline transition-colors duration-200\"\n [class.bg-surface-primary]=\"is24HourFormat()\"\n [class.text-primary-on-color]=\"is24HourFormat()\"\n [class.text-primary]=\"!is24HourFormat()\"\n [class.hover:bg-page-secondary]=\"!is24HourFormat()\"\n [attr.aria-checked]=\"is24HourFormat()\"\n [attr.aria-label]=\"is24HourFormat() ? 'Switch to 12 hour format' : 'Switch to 24 hour format'\"\n (click)=\"toggle24HourFormat(!is24HourFormat())\">\n {{ is24HourFormat() ? 'On' : 'Off' }}\n </button>\n </div>\n }\n\n <div class=\"flex items-center gap-6\">\n <div class=\"flex flex-col items-center gap-2\">\n <button\n type=\"button\"\n aria-label=\"Increase hour\"\n class=\"p-2 rounded-full text-role-caption hover:bg-page-secondary transition-colors duration-200\"\n (click)=\"onHourUp()\">\n <svg class=\"size-[24px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z\" fill=\"currentColor\" />\n </svg>\n </button>\n\n <input\n class=\"text-center text-role-body border-none outline-none appearance-none w-[36px] select-none bg-transparent\"\n [value]=\"formattedHours()\"\n (blur)=\"validateHours($event)\"\n (keydown)=\"onHourKeyDown($event)\"\n type=\"number\"\n aria-label=\"Hour\" />\n\n <button\n type=\"button\"\n aria-label=\"Decrease hour\"\n class=\"p-2 rounded-full text-role-caption hover:bg-page-secondary transition-colors duration-200\"\n (click)=\"onHourDown()\">\n <svg class=\"size-[24px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n </div>\n\n <span class=\"text-role-body select-none\" aria-hidden=\"true\">:</span>\n\n <div class=\"flex flex-col items-center gap-2\">\n <button\n type=\"button\"\n aria-label=\"Increase minute\"\n class=\"p-2 rounded-full text-role-caption hover:bg-page-secondary transition-colors duration-200\"\n (click)=\"onMinuteUp()\">\n <svg class=\"size-[24px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z\" fill=\"currentColor\" />\n </svg>\n </button>\n\n <input\n class=\"text-center text-role-body border-none outline-none appearance-none w-[36px] select-none bg-transparent\"\n [value]=\"formattedMinutes()\"\n (blur)=\"validateMinutes($event)\"\n (keydown)=\"onMinuteKeyDown($event)\"\n type=\"number\"\n aria-label=\"Minute\" />\n\n <button\n type=\"button\"\n aria-label=\"Decrease minute\"\n class=\"p-2 rounded-full text-role-caption hover:bg-page-secondary transition-colors duration-200\"\n (click)=\"onMinuteDown()\">\n <svg class=\"size-[24px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\" />\n </svg>\n </button>\n </div>\n\n @if (!is24HourFormat()) {\n <div class=\"flex gap-2\" role=\"group\" aria-label=\"Select AM or PM\">\n <button\n type=\"button\"\n class=\"px-2.5 py-1 rounded-md text-overline transition-colors duration-200\"\n [class.bg-surface-primary]=\"period() === 'AM'\"\n [class.text-primary-on-color]=\"period() === 'AM'\"\n [class.text-primary]=\"period() !== 'AM'\"\n [class.hover:bg-page-secondary]=\"period() !== 'AM'\"\n [attr.aria-pressed]=\"period() === 'AM'\"\n (click)=\"setPeriod('AM')\">\n AM\n </button>\n <button\n type=\"button\"\n class=\"px-2.5 py-1 rounded-md text-overline transition-colors duration-200\"\n [class.bg-surface-primary]=\"period() === 'PM'\"\n [class.text-primary-on-color]=\"period() === 'PM'\"\n [class.text-primary]=\"period() !== 'PM'\"\n [class.hover:bg-page-secondary]=\"period() !== 'PM'\"\n [attr.aria-pressed]=\"period() === 'PM'\"\n (click)=\"setPeriod('PM')\">\n PM\n </button>\n </div>\n }\n </div>\n</div>\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
13314
13314
|
}], ctorParameters: () => [], propDecorators: { timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], timeSelected: [{ type: i0.Output, args: ["timeSelected"] }] } });
|
|
@@ -13362,10 +13362,10 @@ class SignalTimeFieldPanelComponent {
|
|
|
13362
13362
|
this.confirmed.emit({ hours: draft.hours, minutes: draft.minutes });
|
|
13363
13363
|
}
|
|
13364
13364
|
}
|
|
13365
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
13366
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
13365
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTimeFieldPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13366
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SignalTimeFieldPanelComponent, isStandalone: true, selector: "lib-signal-time-field-panel", inputs: { embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, selectedTime: { classPropertyName: "selectedTime", publicName: "selectedTime", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, okLabel: { classPropertyName: "okLabel", publicName: "okLabel", isSignal: true, isRequired: false, transformFunction: null }, draftTime: { classPropertyName: "draftTime", publicName: "draftTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", draftTime: "draftTimeChange" }, ngImport: i0, template: "<div\n class=\"flex flex-col overflow-hidden w-min\"\n [class.rounded-xl]=\"!embedded()\"\n [class.bg-page]=\"!embedded()\"\n [class.border]=\"!embedded()\"\n [class.border-default]=\"!embedded()\"\n [class.shadow-lg]=\"!embedded()\">\n <lib-signal-time-picker\n [embedded]=\"true\"\n [(value)]=\"draftTime\"\n [timeFormat]=\"timeFormat()\"\n [debounceValueChange]=\"false\" />\n\n <div\n class=\"px-3 pb-3 pt-2\"\n [class.border-t]=\"!embedded()\"\n [class.border-default]=\"!embedded()\">\n <button\n type=\"button\"\n class=\"w-full rounded-xl bg-surface-primary !text-primary-on-color text-caption font-medium py-2 hover:bg-surface-primary-hover transition-colors cursor-pointer\"\n (click)=\"onOk()\">\n {{ okLabel() }}\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: SignalTimePicker, selector: "lib-signal-time-picker", inputs: ["timeFormat", "embedded", "debounceValueChange", "debounceMs"], outputs: ["valueChange", "timeSelected"] }] });
|
|
13367
13367
|
}
|
|
13368
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
13368
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTimeFieldPanelComponent, decorators: [{
|
|
13369
13369
|
type: Component,
|
|
13370
13370
|
args: [{ selector: 'lib-signal-time-field-panel', imports: [SignalTimePicker], template: "<div\n class=\"flex flex-col overflow-hidden w-min\"\n [class.rounded-xl]=\"!embedded()\"\n [class.bg-page]=\"!embedded()\"\n [class.border]=\"!embedded()\"\n [class.border-default]=\"!embedded()\"\n [class.shadow-lg]=\"!embedded()\">\n <lib-signal-time-picker\n [embedded]=\"true\"\n [(value)]=\"draftTime\"\n [timeFormat]=\"timeFormat()\"\n [debounceValueChange]=\"false\" />\n\n <div\n class=\"px-3 pb-3 pt-2\"\n [class.border-t]=\"!embedded()\"\n [class.border-default]=\"!embedded()\">\n <button\n type=\"button\"\n class=\"w-full rounded-xl bg-surface-primary !text-primary-on-color text-caption font-medium py-2 hover:bg-surface-primary-hover transition-colors cursor-pointer\"\n (click)=\"onOk()\">\n {{ okLabel() }}\n </button>\n </div>\n</div>\n" }]
|
|
13371
13371
|
}], ctorParameters: () => [], propDecorators: { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], selectedTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTime", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], okLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "okLabel", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], draftTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftTime", required: false }] }, { type: i0.Output, args: ["draftTimeChange"] }] } });
|
|
@@ -13379,10 +13379,10 @@ class SignalTimeFieldPanelOverlayComponent {
|
|
|
13379
13379
|
onDismissed() {
|
|
13380
13380
|
this.dialogRef.close();
|
|
13381
13381
|
}
|
|
13382
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
13383
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
13382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTimeFieldPanelOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalTimeFieldPanelOverlayComponent, isStandalone: true, selector: "lib-signal-time-field-panel-overlay", ngImport: i0, template: "<div class=\"flex flex-col gap-2 p-2\">\n <div class=\"flex items-center justify-between gap-2 px-1\">\n @if (data.label) {\n <span class=\"text-caption text-role-body\">{{ data.label }}</span>\n }\n <button\n type=\"button\"\n aria-label=\"Close\"\n class=\"p-2 flex items-center justify-center rounded-full hover:bg-page-secondary cursor-pointer text-role-caption transition-colors shrink-0\"\n (click)=\"onDismissed()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"data.iconSize\"\n [style.height.px]=\"data.iconSize\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n </div>\n\n <lib-signal-time-field-panel\n [embedded]=\"true\"\n [selectedTime]=\"data.selectedTime\"\n [timeFormat]=\"data.timeFormat\"\n [okLabel]=\"data.okLabel\"\n (confirmed)=\"onConfirmed($event)\" />\n</div>\n", dependencies: [{ kind: "component", type: SignalTimeFieldPanelComponent, selector: "lib-signal-time-field-panel", inputs: ["embedded", "selectedTime", "timeFormat", "okLabel", "draftTime"], outputs: ["confirmed", "draftTimeChange"] }] });
|
|
13384
13384
|
}
|
|
13385
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
13385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTimeFieldPanelOverlayComponent, decorators: [{
|
|
13386
13386
|
type: Component,
|
|
13387
13387
|
args: [{ selector: 'lib-signal-time-field-panel-overlay', imports: [SignalTimeFieldPanelComponent], template: "<div class=\"flex flex-col gap-2 p-2\">\n <div class=\"flex items-center justify-between gap-2 px-1\">\n @if (data.label) {\n <span class=\"text-caption text-role-body\">{{ data.label }}</span>\n }\n <button\n type=\"button\"\n aria-label=\"Close\"\n class=\"p-2 flex items-center justify-center rounded-full hover:bg-page-secondary cursor-pointer text-role-caption transition-colors shrink-0\"\n (click)=\"onDismissed()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"data.iconSize\"\n [style.height.px]=\"data.iconSize\"\n aria-hidden=\"true\">\n <path 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 </svg>\n </button>\n </div>\n\n <lib-signal-time-field-panel\n [embedded]=\"true\"\n [selectedTime]=\"data.selectedTime\"\n [timeFormat]=\"data.timeFormat\"\n [okLabel]=\"data.okLabel\"\n (confirmed)=\"onConfirmed($event)\" />\n</div>\n" }]
|
|
13388
13388
|
}] });
|
|
@@ -13708,10 +13708,10 @@ class SignalTimeField extends BaseSignalTextInputControl {
|
|
|
13708
13708
|
this.valueChange.emit(val);
|
|
13709
13709
|
}
|
|
13710
13710
|
}
|
|
13711
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
13712
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTimeField, isStandalone: true, selector: "lib-signal-time-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showClockIcon: { classPropertyName: "showClockIcon", publicName: "showClockIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, okLabel: { classPropertyName: "okLabel", publicName: "okLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", timeSelected: "timeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"time\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n [value]=\"timeInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showClockIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open time picker\"\n [disabled]=\"disabled()\"\n (click)=\"openClock($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\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\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showClockIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open time picker\"\n [disabled]=\"disabled()\"\n (click)=\"openClock($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\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\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeClock()\"\n (overlayOutsideClick)=\"closeClock()\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-time-field-panel\n [selectedTime]=\"value()\"\n [timeFormat]=\"timeFormat()\"\n [okLabel]=\"okLabel()\"\n (confirmed)=\"onTimeConfirmed($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { 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: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalTimeFieldPanelComponent, selector: "lib-signal-time-field-panel", inputs: ["embedded", "selectedTime", "timeFormat", "okLabel", "draftTime"], outputs: ["confirmed", "draftTimeChange"] }] });
|
|
13711
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTimeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13712
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalTimeField, isStandalone: true, selector: "lib-signal-time-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showClockIcon: { classPropertyName: "showClockIcon", publicName: "showClockIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, okLabel: { classPropertyName: "okLabel", publicName: "okLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", timeSelected: "timeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"time\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n [value]=\"timeInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showClockIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open time picker\"\n [disabled]=\"disabled()\"\n (click)=\"openClock($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\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\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showClockIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open time picker\"\n [disabled]=\"disabled()\"\n (click)=\"openClock($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\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\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeClock()\"\n (overlayOutsideClick)=\"closeClock()\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-time-field-panel\n [selectedTime]=\"value()\"\n [timeFormat]=\"timeFormat()\"\n [okLabel]=\"okLabel()\"\n (confirmed)=\"onTimeConfirmed($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { 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: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalTimeFieldPanelComponent, selector: "lib-signal-time-field-panel", inputs: ["embedded", "selectedTime", "timeFormat", "okLabel", "draftTime"], outputs: ["confirmed", "draftTimeChange"] }] });
|
|
13713
13713
|
}
|
|
13714
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
13714
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTimeField, decorators: [{
|
|
13715
13715
|
type: Component,
|
|
13716
13716
|
args: [{ selector: 'lib-signal-time-field', imports: [
|
|
13717
13717
|
AppSvgIconComponent,
|
|
@@ -14066,10 +14066,10 @@ class SignalOtpField extends BaseFormControl {
|
|
|
14066
14066
|
input.value = value;
|
|
14067
14067
|
}
|
|
14068
14068
|
}
|
|
14069
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
14070
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
14069
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalOtpField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14070
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalOtpField, isStandalone: true, selector: "lib-signal-otp-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, maskMode: { classPropertyName: "maskMode", publicName: "maskMode", isSignal: true, isRequired: false, transformFunction: null }, maskDelayMs: { classPropertyName: "maskDelayMs", publicName: "maskDelayMs", isSignal: true, isRequired: false, transformFunction: null }, obscureChar: { classPropertyName: "obscureChar", publicName: "obscureChar", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", completed: "completed" }, viewQueries: [{ propertyName: "digitInputs", predicate: ["digitInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"!!label()\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n role=\"group\"\n class=\"flex flex-wrap gap-2\"\n [attr.aria-label]=\"label() || 'One-time password'\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\">\n\n @for (index of digitIndices(); track index) {\n <div\n class=\"group\"\n [class]=\"cellClasses(index)\"\n (click)=\"onCellClick(index)\">\n @if (shouldShowOverlay(index)) {\n <span\n class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n aria-hidden=\"true\">\n {{ displayChar(index) }}\n </span>\n }\n\n <input\n #digitInput\n class=\"relative z-10\"\n [class]=\"inputClasses(index)\"\n [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n inputmode=\"numeric\"\n pattern=\"[0-9]*\"\n maxlength=\"1\"\n autocomplete=\"one-time-code\"\n [id]=\"index === 0 ? inputId() : null\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n (input)=\"onInput($event, index)\"\n (keydown)=\"onKeyDown($event, index)\"\n (paste)=\"onPaste($event, index)\"\n (focus)=\"onCellFocus(index)\"\n (blur)=\"onCellBlur()\" />\n </div>\n }\n </div>\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
|
|
14071
14071
|
}
|
|
14072
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
14072
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalOtpField, decorators: [{
|
|
14073
14073
|
type: Component,
|
|
14074
14074
|
args: [{ selector: 'lib-signal-otp-field', imports: [BaseSignalInput], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"!!label()\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n role=\"group\"\n class=\"flex flex-wrap gap-2\"\n [attr.aria-label]=\"label() || 'One-time password'\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\">\n\n @for (index of digitIndices(); track index) {\n <div\n class=\"group\"\n [class]=\"cellClasses(index)\"\n (click)=\"onCellClick(index)\">\n @if (shouldShowOverlay(index)) {\n <span\n class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n aria-hidden=\"true\">\n {{ displayChar(index) }}\n </span>\n }\n\n <input\n #digitInput\n class=\"relative z-10\"\n [class]=\"inputClasses(index)\"\n [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n inputmode=\"numeric\"\n pattern=\"[0-9]*\"\n maxlength=\"1\"\n autocomplete=\"one-time-code\"\n [id]=\"index === 0 ? inputId() : null\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n (input)=\"onInput($event, index)\"\n (keydown)=\"onKeyDown($event, index)\"\n (paste)=\"onPaste($event, index)\"\n (focus)=\"onCellFocus(index)\"\n (blur)=\"onCellBlur()\" />\n </div>\n }\n </div>\n</lib-base-signal-input>\n" }]
|
|
14075
14075
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], maskMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMode", required: false }] }], maskDelayMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskDelayMs", required: false }] }], obscureChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "obscureChar", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], digitInputs: [{
|
|
@@ -14273,10 +14273,10 @@ class SignalRating extends BaseFormControl {
|
|
|
14273
14273
|
this.setValue(clamped);
|
|
14274
14274
|
this.valueChange.emit(clamped);
|
|
14275
14275
|
}
|
|
14276
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
14277
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
14276
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalRating, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
14277
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalRating, isStandalone: true, selector: "lib-signal-rating", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxStars: { classPropertyName: "maxStars", publicName: "maxStars", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"ratingId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <div\n [id]=\"ratingId()\"\n role=\"slider\"\n tabindex=\"0\"\n [class]=\"sliderClasses()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"value() ?? 0\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n (mousemove)=\"onRowMouseMove($event)\"\n (mouseleave)=\"onRowMouseLeave()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\">\n @for (starIndex of starIndices(); track starIndex) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n class=\"inline-flex shrink-0 items-center justify-center rounded-sm p-0.5 transition-transform duration-150 disabled:pointer-events-none\"\n [class.hover:scale-110]=\"isInteractive()\"\n [disabled]=\"!isInteractive()\"\n (click)=\"onStarClick($event, starIndex)\">\n @switch (getStarFillFor(starIndex)) {\n @case ('full') {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"text-primary\"\n [attr.width]=\"iconSize()\"\n [attr.height]=\"iconSize()\"\n aria-hidden=\"true\">\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n </svg>\n }\n @case ('half') {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [attr.width]=\"iconSize()\"\n [attr.height]=\"iconSize()\"\n aria-hidden=\"true\">\n <defs>\n <clipPath [attr.id]=\"'signal-rating-half-' + ratingId() + '-' + starIndex\">\n <rect x=\"0\" y=\"0\" width=\"12\" height=\"24\" />\n </clipPath>\n </defs>\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n fill=\"currentColor\"\n class=\"text-role-placeholder\" />\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n fill=\"currentColor\"\n class=\"text-primary\"\n [attr.clip-path]=\"'url(#signal-rating-half-' + ratingId() + '-' + starIndex + ')'\" />\n </svg>\n }\n @default {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"text-role-placeholder\"\n [attr.width]=\"iconSize()\"\n [attr.height]=\"iconSize()\"\n aria-hidden=\"true\">\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n </svg>\n }\n }\n </button>\n }\n </div>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <span [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </span>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
14278
14278
|
}
|
|
14279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
14279
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalRating, decorators: [{
|
|
14280
14280
|
type: Component,
|
|
14281
14281
|
args: [{ selector: 'lib-signal-rating', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"ratingId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <div\n [id]=\"ratingId()\"\n role=\"slider\"\n tabindex=\"0\"\n [class]=\"sliderClasses()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"value() ?? 0\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n (mousemove)=\"onRowMouseMove($event)\"\n (mouseleave)=\"onRowMouseLeave()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\">\n @for (starIndex of starIndices(); track starIndex) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n class=\"inline-flex shrink-0 items-center justify-center rounded-sm p-0.5 transition-transform duration-150 disabled:pointer-events-none\"\n [class.hover:scale-110]=\"isInteractive()\"\n [disabled]=\"!isInteractive()\"\n (click)=\"onStarClick($event, starIndex)\">\n @switch (getStarFillFor(starIndex)) {\n @case ('full') {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"text-primary\"\n [attr.width]=\"iconSize()\"\n [attr.height]=\"iconSize()\"\n aria-hidden=\"true\">\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n </svg>\n }\n @case ('half') {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [attr.width]=\"iconSize()\"\n [attr.height]=\"iconSize()\"\n aria-hidden=\"true\">\n <defs>\n <clipPath [attr.id]=\"'signal-rating-half-' + ratingId() + '-' + starIndex\">\n <rect x=\"0\" y=\"0\" width=\"12\" height=\"24\" />\n </clipPath>\n </defs>\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n fill=\"currentColor\"\n class=\"text-role-placeholder\" />\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n fill=\"currentColor\"\n class=\"text-primary\"\n [attr.clip-path]=\"'url(#signal-rating-half-' + ratingId() + '-' + starIndex + ')'\" />\n </svg>\n }\n @default {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"text-role-placeholder\"\n [attr.width]=\"iconSize()\"\n [attr.height]=\"iconSize()\"\n aria-hidden=\"true\">\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n </svg>\n }\n }\n </button>\n }\n </div>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <span [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </span>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
14282
14282
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxStars: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxStars", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
@@ -14479,10 +14479,10 @@ class SignalSlider extends BaseFormControl {
|
|
|
14479
14479
|
this.setValue(snapped);
|
|
14480
14480
|
this.valueChange.emit(snapped);
|
|
14481
14481
|
}
|
|
14482
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
14483
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
14482
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
14483
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalSlider, isStandalone: true, selector: "lib-signal-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sliderMin: { classPropertyName: "sliderMin", publicName: "sliderMin", isSignal: true, isRequired: false, transformFunction: null }, sliderMax: { classPropertyName: "sliderMax", publicName: "sliderMax", isSignal: true, isRequired: false, transformFunction: null }, sliderStep: { classPropertyName: "sliderStep", publicName: "sliderStep", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, showValueBubble: { classPropertyName: "showValueBubble", publicName: "showValueBubble", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"true\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"sliderId()\">\n\n <div input class=\"flex w-full items-center gap-3\">\n <div\n #trackRef\n class=\"relative flex-1 touch-none select-none overflow-visible\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-not-allowed]=\"!isInteractive()\"\n [class.opacity-70]=\"disabled()\"\n (pointerdown)=\"onTrackPointerDown($event)\">\n <div\n class=\"relative w-full rounded-full bg-page-secondary\"\n [class]=\"trackHeightClass()\">\n <div\n class=\"absolute inset-y-0 left-0 rounded-full bg-surface-primary\"\n [class.transition-[width]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [style.width.%]=\"visualPercent()\"></div>\n </div>\n\n @if (showValueBubble()) {\n <div\n class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n [class]=\"bubbleOffsetClass()\"\n [class.transition-none]=\"isDragging()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [style.left.%]=\"visualPercent()\">\n <div\n class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n [class.opacity-0]=\"!showBubble()\"\n [class.opacity-100]=\"showBubble()\"\n [class.scale-90]=\"!showBubble()\"\n [class.scale-100]=\"showBubble()\"\n [class.translate-y-0.5]=\"!showBubble()\"\n [class.translate-y-0]=\"showBubble()\"\n [attr.aria-hidden]=\"!showBubble()\">\n {{ bubbleDisplayValue() }}\n </div>\n </div>\n }\n\n <button\n type=\"button\"\n tabindex=\"0\"\n role=\"slider\"\n class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n [class]=\"thumbSizeClass()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\"\n [style.left.%]=\"visualPercent()\"\n [attr.aria-valuemin]=\"effectiveMin()\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"visualDisplayValue()\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [disabled]=\"!isInteractive()\"\n (pointerdown)=\"onThumbPointerDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"></button>\n </div>\n\n @if (showValueLabel()) {\n <span\n class=\"min-w-[2.5rem] shrink-0 text-right text-body2 tabular-nums\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\">\n {{ visualDisplayValue() }}\n </span>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
|
|
14484
14484
|
}
|
|
14485
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
14485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalSlider, decorators: [{
|
|
14486
14486
|
type: Component,
|
|
14487
14487
|
args: [{ selector: 'lib-signal-slider', imports: [BaseSignalInput], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"true\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"sliderId()\">\n\n <div input class=\"flex w-full items-center gap-3\">\n <div\n #trackRef\n class=\"relative flex-1 touch-none select-none overflow-visible\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-not-allowed]=\"!isInteractive()\"\n [class.opacity-70]=\"disabled()\"\n (pointerdown)=\"onTrackPointerDown($event)\">\n <div\n class=\"relative w-full rounded-full bg-page-secondary\"\n [class]=\"trackHeightClass()\">\n <div\n class=\"absolute inset-y-0 left-0 rounded-full bg-surface-primary\"\n [class.transition-[width]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [style.width.%]=\"visualPercent()\"></div>\n </div>\n\n @if (showValueBubble()) {\n <div\n class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n [class]=\"bubbleOffsetClass()\"\n [class.transition-none]=\"isDragging()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [style.left.%]=\"visualPercent()\">\n <div\n class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n [class.opacity-0]=\"!showBubble()\"\n [class.opacity-100]=\"showBubble()\"\n [class.scale-90]=\"!showBubble()\"\n [class.scale-100]=\"showBubble()\"\n [class.translate-y-0.5]=\"!showBubble()\"\n [class.translate-y-0]=\"showBubble()\"\n [attr.aria-hidden]=\"!showBubble()\">\n {{ bubbleDisplayValue() }}\n </div>\n </div>\n }\n\n <button\n type=\"button\"\n tabindex=\"0\"\n role=\"slider\"\n class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n [class]=\"thumbSizeClass()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\"\n [style.left.%]=\"visualPercent()\"\n [attr.aria-valuemin]=\"effectiveMin()\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"visualDisplayValue()\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [disabled]=\"!isInteractive()\"\n (pointerdown)=\"onThumbPointerDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"></button>\n </div>\n\n @if (showValueLabel()) {\n <span\n class=\"min-w-[2.5rem] shrink-0 text-right text-body2 tabular-nums\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\">\n {{ visualDisplayValue() }}\n </span>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
14488
14488
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sliderMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMin", required: false }] }], sliderMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMax", required: false }] }], sliderStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderStep", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabel", required: false }] }], showValueBubble: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueBubble", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], trackRef: [{
|
|
@@ -14756,10 +14756,10 @@ class SignalRangeSlider extends BaseFormControl {
|
|
|
14756
14756
|
this.setValue(next);
|
|
14757
14757
|
this.valueChange.emit(next);
|
|
14758
14758
|
}
|
|
14759
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
14760
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
14759
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalRangeSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
14760
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalRangeSlider, isStandalone: true, selector: "lib-signal-range-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sliderMin: { classPropertyName: "sliderMin", publicName: "sliderMin", isSignal: true, isRequired: false, transformFunction: null }, sliderMax: { classPropertyName: "sliderMax", publicName: "sliderMax", isSignal: true, isRequired: false, transformFunction: null }, sliderStep: { classPropertyName: "sliderStep", publicName: "sliderStep", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, showValueBubble: { classPropertyName: "showValueBubble", publicName: "showValueBubble", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"true\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"sliderId()\">\n\n <div input class=\"flex w-full items-center gap-3\">\n <div\n #trackRef\n role=\"group\"\n class=\"relative flex-1 touch-none select-none overflow-visible\"\n [attr.aria-label]=\"label() || 'Range slider'\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-not-allowed]=\"!isInteractive()\"\n [class.opacity-70]=\"disabled()\"\n (pointerdown)=\"onTrackPointerDown($event)\">\n <div\n class=\"relative w-full rounded-full bg-page-secondary\"\n [class]=\"trackHeightClass()\">\n <div\n class=\"absolute inset-y-0 rounded-full bg-surface-primary\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.transition-[width]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [style.left.%]=\"visualStartPercent()\"\n [style.width.%]=\"visualActiveWidthPercent()\"></div>\n </div>\n\n @if (showValueBubble()) {\n <div\n class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n [class]=\"bubbleOffsetClass()\"\n [class.transition-none]=\"isDragging()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [style.left.%]=\"bubblePercent()\">\n <div\n class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n [class.opacity-0]=\"!showBubble()\"\n [class.opacity-100]=\"showBubble()\"\n [class.scale-90]=\"!showBubble()\"\n [class.scale-100]=\"showBubble()\"\n [class.translate-y-0.5]=\"!showBubble()\"\n [class.translate-y-0]=\"showBubble()\"\n [attr.aria-hidden]=\"!showBubble()\">\n {{ bubbleDisplayValue() }}\n </div>\n </div>\n }\n\n <button\n type=\"button\"\n tabindex=\"0\"\n role=\"slider\"\n aria-hidden=\"false\"\n class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n [class]=\"thumbSizeClass()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [class.ring-4]=\"isFocused() && focusedThumb() === 'start'\"\n [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'start' && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'start' && showError()\"\n [class.z-20]=\"activeThumb() === 'start'\"\n [style.left.%]=\"visualStartPercent()\"\n [attr.aria-valuemin]=\"effectiveMin()\"\n [attr.aria-valuemax]=\"visualDisplayRange().end\"\n [attr.aria-valuenow]=\"visualDisplayRange().start\"\n [attr.aria-valuetext]=\"'Start ' + visualDisplayRange().start\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [disabled]=\"!isInteractive()\"\n (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n (focus)=\"onThumbFocus('start')\"\n (blur)=\"onThumbBlur($event)\"\n (keydown)=\"onThumbKeyDown($event, 'start')\"></button>\n\n <button\n type=\"button\"\n tabindex=\"0\"\n role=\"slider\"\n aria-hidden=\"false\"\n class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n [class]=\"thumbSizeClass()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [class.ring-4]=\"isFocused() && focusedThumb() === 'end'\"\n [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'end' && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'end' && showError()\"\n [class.z-20]=\"activeThumb() === 'end'\"\n [style.left.%]=\"visualEndPercent()\"\n [attr.aria-valuemin]=\"visualDisplayRange().start\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"visualDisplayRange().end\"\n [attr.aria-valuetext]=\"'End ' + visualDisplayRange().end\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [disabled]=\"!isInteractive()\"\n (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n (focus)=\"onThumbFocus('end')\"\n (blur)=\"onThumbBlur($event)\"\n (keydown)=\"onThumbKeyDown($event, 'end')\"></button>\n </div>\n\n @if (showValueLabel()) {\n <span\n class=\"min-w-[4.5rem] shrink-0 text-right text-body2 tabular-nums\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\">\n {{ visualDisplayRange().start }}\u2013{{ visualDisplayRange().end }}\n </span>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
|
|
14761
14761
|
}
|
|
14762
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
14762
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalRangeSlider, decorators: [{
|
|
14763
14763
|
type: Component,
|
|
14764
14764
|
args: [{ selector: 'lib-signal-range-slider', imports: [BaseSignalInput], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"true\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"sliderId()\">\n\n <div input class=\"flex w-full items-center gap-3\">\n <div\n #trackRef\n role=\"group\"\n class=\"relative flex-1 touch-none select-none overflow-visible\"\n [attr.aria-label]=\"label() || 'Range slider'\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-not-allowed]=\"!isInteractive()\"\n [class.opacity-70]=\"disabled()\"\n (pointerdown)=\"onTrackPointerDown($event)\">\n <div\n class=\"relative w-full rounded-full bg-page-secondary\"\n [class]=\"trackHeightClass()\">\n <div\n class=\"absolute inset-y-0 rounded-full bg-surface-primary\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.transition-[width]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [style.left.%]=\"visualStartPercent()\"\n [style.width.%]=\"visualActiveWidthPercent()\"></div>\n </div>\n\n @if (showValueBubble()) {\n <div\n class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n [class]=\"bubbleOffsetClass()\"\n [class.transition-none]=\"isDragging()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [style.left.%]=\"bubblePercent()\">\n <div\n class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n [class.opacity-0]=\"!showBubble()\"\n [class.opacity-100]=\"showBubble()\"\n [class.scale-90]=\"!showBubble()\"\n [class.scale-100]=\"showBubble()\"\n [class.translate-y-0.5]=\"!showBubble()\"\n [class.translate-y-0]=\"showBubble()\"\n [attr.aria-hidden]=\"!showBubble()\">\n {{ bubbleDisplayValue() }}\n </div>\n </div>\n }\n\n <button\n type=\"button\"\n tabindex=\"0\"\n role=\"slider\"\n aria-hidden=\"false\"\n class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n [class]=\"thumbSizeClass()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [class.ring-4]=\"isFocused() && focusedThumb() === 'start'\"\n [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'start' && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'start' && showError()\"\n [class.z-20]=\"activeThumb() === 'start'\"\n [style.left.%]=\"visualStartPercent()\"\n [attr.aria-valuemin]=\"effectiveMin()\"\n [attr.aria-valuemax]=\"visualDisplayRange().end\"\n [attr.aria-valuenow]=\"visualDisplayRange().start\"\n [attr.aria-valuetext]=\"'Start ' + visualDisplayRange().start\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [disabled]=\"!isInteractive()\"\n (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n (focus)=\"onThumbFocus('start')\"\n (blur)=\"onThumbBlur($event)\"\n (keydown)=\"onThumbKeyDown($event, 'start')\"></button>\n\n <button\n type=\"button\"\n tabindex=\"0\"\n role=\"slider\"\n aria-hidden=\"false\"\n class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n [class]=\"thumbSizeClass()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [class.ring-4]=\"isFocused() && focusedThumb() === 'end'\"\n [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'end' && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'end' && showError()\"\n [class.z-20]=\"activeThumb() === 'end'\"\n [style.left.%]=\"visualEndPercent()\"\n [attr.aria-valuemin]=\"visualDisplayRange().start\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"visualDisplayRange().end\"\n [attr.aria-valuetext]=\"'End ' + visualDisplayRange().end\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [disabled]=\"!isInteractive()\"\n (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n (focus)=\"onThumbFocus('end')\"\n (blur)=\"onThumbBlur($event)\"\n (keydown)=\"onThumbKeyDown($event, 'end')\"></button>\n </div>\n\n @if (showValueLabel()) {\n <span\n class=\"min-w-[4.5rem] shrink-0 text-right text-body2 tabular-nums\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\">\n {{ visualDisplayRange().start }}\u2013{{ visualDisplayRange().end }}\n </span>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
14765
14765
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sliderMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMin", required: false }] }], sliderMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMax", required: false }] }], sliderStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderStep", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabel", required: false }] }], showValueBubble: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueBubble", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], trackRef: [{
|
|
@@ -14832,10 +14832,10 @@ class SignalColorField extends BaseSignalTextInputControl {
|
|
|
14832
14832
|
this.setValue(nextValue);
|
|
14833
14833
|
this.valueChange.emit(nextValue);
|
|
14834
14834
|
}
|
|
14835
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
14836
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
14835
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalColorField, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
14836
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalColorField, isStandalone: true, selector: "lib-signal-color-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"colorInputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class.opacity-70]=\"disabled()\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"colorInputId()\"\n [value]=\"displayHex()\" />\n }\n\n <button\n type=\"button\"\n class=\"relative h-full w-full text-left font-mono transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : colorInputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (click)=\"openColorPicker()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n {{ displayHex() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n <span class=\"relative mr-3 h-7 w-7 shrink-0\">\n <span\n aria-hidden=\"true\"\n class=\"block h-7 w-7 rounded-full border border-default\"\n [style.background-color]=\"resolvedColor()\"></span>\n\n <input\n #colorInputRef\n type=\"color\"\n class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n [class.cursor-default]=\"readonly()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.pointer-events-none]=\"!isInteractive()\"\n [value]=\"resolvedColor()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n </span>\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
|
|
14837
14837
|
}
|
|
14838
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
14838
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalColorField, decorators: [{
|
|
14839
14839
|
type: Component,
|
|
14840
14840
|
args: [{ selector: 'lib-signal-color-field', imports: [BaseSignalInput], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"colorInputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class.opacity-70]=\"disabled()\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"colorInputId()\"\n [value]=\"displayHex()\" />\n }\n\n <button\n type=\"button\"\n class=\"relative h-full w-full text-left font-mono transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : colorInputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (click)=\"openColorPicker()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n {{ displayHex() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n <span class=\"relative mr-3 h-7 w-7 shrink-0\">\n <span\n aria-hidden=\"true\"\n class=\"block h-7 w-7 rounded-full border border-default\"\n [style.background-color]=\"resolvedColor()\"></span>\n\n <input\n #colorInputRef\n type=\"color\"\n class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n [class.cursor-default]=\"readonly()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.pointer-events-none]=\"!isInteractive()\"\n [value]=\"resolvedColor()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n </span>\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
14841
14841
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], colorInputRef: [{
|
|
@@ -15113,10 +15113,10 @@ function validateSignalForm(signalForm) {
|
|
|
15113
15113
|
|
|
15114
15114
|
class SignalFormDirective {
|
|
15115
15115
|
fieldTree = input.required({ ...(ngDevMode ? { debugName: "fieldTree" } : /* istanbul ignore next */ {}), alias: 'signalForm' });
|
|
15116
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
15117
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
15116
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
15117
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: SignalFormDirective, isStandalone: true, selector: "form[signalForm]", inputs: { fieldTree: { classPropertyName: "fieldTree", publicName: "signalForm", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
15118
15118
|
}
|
|
15119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
15119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalFormDirective, decorators: [{
|
|
15120
15120
|
type: Directive,
|
|
15121
15121
|
args: [{
|
|
15122
15122
|
selector: 'form[signalForm]',
|
|
@@ -15203,10 +15203,10 @@ class SignalButton {
|
|
|
15203
15203
|
}
|
|
15204
15204
|
this.clicked.emit();
|
|
15205
15205
|
}
|
|
15206
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
15207
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
15206
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15207
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalButton, isStandalone: true, selector: "lib-signal-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"cursor-pointer\"\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [class]=\"buttonClasses()\"\n [attr.aria-busy]=\"loading() || null\"\n (click)=\"onClick($event)\">\n @if (iconSrc()) {\n <app-svg-icon\n [src]=\"iconSrc()!\"\n [size]=\"iconSize()\"\n [class]=\"iconClasses() + (loading() ? ' invisible' : '')\" />\n }\n\n <span [class.invisible]=\"loading()\">\n <ng-content />\n </span>\n\n @if (loading()) {\n <app-spinner\n class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"\n [borderColor]=\"spinnerBorderClass()\" />\n }\n</button>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }] });
|
|
15208
15208
|
}
|
|
15209
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
15209
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalButton, decorators: [{
|
|
15210
15210
|
type: Component,
|
|
15211
15211
|
args: [{ selector: 'lib-signal-button', imports: [AppSvgIconComponent, SpinnerComponent], template: "<button\n class=\"cursor-pointer\"\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [class]=\"buttonClasses()\"\n [attr.aria-busy]=\"loading() || null\"\n (click)=\"onClick($event)\">\n @if (iconSrc()) {\n <app-svg-icon\n [src]=\"iconSrc()!\"\n [size]=\"iconSize()\"\n [class]=\"iconClasses() + (loading() ? ' invisible' : '')\" />\n }\n\n <span [class.invisible]=\"loading()\">\n <ng-content />\n </span>\n\n @if (loading()) {\n <app-spinner\n class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"\n [borderColor]=\"spinnerBorderClass()\" />\n }\n</button>\n" }]
|
|
15212
15212
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
@@ -15224,10 +15224,10 @@ class SignalError {
|
|
|
15224
15224
|
...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
|
|
15225
15225
|
errorMessage = computed(() => getSignalValidationErrorMessage(this.fieldState().errors(), this.signalFormErrors), /* @ts-ignore */
|
|
15226
15226
|
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
15227
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
15228
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
15227
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalError, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15228
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SignalError, isStandalone: true, selector: "lib-signal-error", inputs: { formField: { classPropertyName: "formField", publicName: "formField", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"grid transition-[grid-template-rows,margin-top] duration-300 ease-in-out\"\n [ngClass]=\"showError() ? 'grid-rows-[1fr] mt-2' : 'grid-rows-[0fr] mt-0'\">\n <p\n class=\"overflow-hidden min-h-0 text-caption text-error transition-[opacity,transform] duration-300 ease-in-out\"\n [class.opacity-0]=\"!showError()\"\n [class.opacity-100]=\"showError()\"\n [class.-translate-y-1]=\"!showError()\"\n [class.translate-y-0]=\"showError()\"\n [attr.role]=\"showError() ? 'alert' : null\"\n [attr.aria-hidden]=\"!showError()\">\n {{ showError() ? (errorMessage() ?? '') : '' }}\n </p>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
15229
15229
|
}
|
|
15230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
15230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalError, decorators: [{
|
|
15231
15231
|
type: Component,
|
|
15232
15232
|
args: [{ selector: 'lib-signal-error', imports: [NgClass], template: "<div\n class=\"grid transition-[grid-template-rows,margin-top] duration-300 ease-in-out\"\n [ngClass]=\"showError() ? 'grid-rows-[1fr] mt-2' : 'grid-rows-[0fr] mt-0'\">\n <p\n class=\"overflow-hidden min-h-0 text-caption text-error transition-[opacity,transform] duration-300 ease-in-out\"\n [class.opacity-0]=\"!showError()\"\n [class.opacity-100]=\"showError()\"\n [class.-translate-y-1]=\"!showError()\"\n [class.translate-y-0]=\"showError()\"\n [attr.role]=\"showError() ? 'alert' : null\"\n [attr.aria-hidden]=\"!showError()\">\n {{ showError() ? (errorMessage() ?? '') : '' }}\n </p>\n</div>\n" }]
|
|
15233
15233
|
}], propDecorators: { formField: [{ type: i0.Input, args: [{ isSignal: true, alias: "formField", required: true }] }] } });
|
|
@@ -15436,10 +15436,10 @@ class NglService {
|
|
|
15436
15436
|
getBaseUrl() {
|
|
15437
15437
|
return this.config.baseApiUrl;
|
|
15438
15438
|
}
|
|
15439
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
15440
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
15439
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NglService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
15440
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NglService, providedIn: 'root' });
|
|
15441
15441
|
}
|
|
15442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
15442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NglService, decorators: [{
|
|
15443
15443
|
type: Injectable,
|
|
15444
15444
|
args: [{
|
|
15445
15445
|
providedIn: 'root'
|
|
@@ -15516,10 +15516,10 @@ class ThemeService {
|
|
|
15516
15516
|
root.style.colorScheme = shouldUseDark ? 'dark' : 'light';
|
|
15517
15517
|
this.activeTheme.set(shouldUseDark ? 'dark' : 'light');
|
|
15518
15518
|
}
|
|
15519
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
15520
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
15519
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
15520
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ThemeService, providedIn: 'root' });
|
|
15521
15521
|
}
|
|
15522
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
15522
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ThemeService, decorators: [{
|
|
15523
15523
|
type: Injectable,
|
|
15524
15524
|
args: [{
|
|
15525
15525
|
providedIn: 'root',
|
|
@@ -15530,11 +15530,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
15530
15530
|
* @deprecated Import InfiniteScrollDirective instead
|
|
15531
15531
|
*/
|
|
15532
15532
|
class InfiniteScrollModule {
|
|
15533
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
15534
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
15535
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
15533
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
15534
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: InfiniteScrollModule, imports: [InfiniteScrollDirective], exports: [InfiniteScrollDirective] });
|
|
15535
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InfiniteScrollModule });
|
|
15536
15536
|
}
|
|
15537
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
15537
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InfiniteScrollModule, decorators: [{
|
|
15538
15538
|
type: NgModule,
|
|
15539
15539
|
args: [{
|
|
15540
15540
|
exports: [InfiniteScrollDirective],
|