springest 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +132 -1
- package/fesm2022/springest.mjs +660 -132
- package/fesm2022/springest.mjs.map +1 -1
- package/package.json +1 -1
- package/types/springest.d.ts +350 -49
- package/types/springest.d.ts.map +1 -1
package/fesm2022/springest.mjs
CHANGED
|
@@ -1,35 +1,47 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ChangeDetectionStrategy, Component,
|
|
2
|
+
import { input, ChangeDetectionStrategy, Component, computed, signal, inject, effect, model, output, ContentChild, ViewChild, linkedSignal, viewChild, ElementRef, contentChild, TemplateRef, Input, Directive, forwardRef, ContentChildren, Injectable, DestroyRef } from '@angular/core';
|
|
3
3
|
import { Avatar } from 'primeng/avatar';
|
|
4
4
|
import { OverlayBadge } from 'primeng/overlaybadge';
|
|
5
5
|
import * as i1 from 'primeng/button';
|
|
6
6
|
import { ButtonModule } from 'primeng/button';
|
|
7
7
|
import * as i1$2 from '@angular/forms';
|
|
8
|
-
import { FormsModule, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
8
|
+
import { AbstractControl, FormsModule, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
9
9
|
import * as i1$1 from 'primeng/datepicker';
|
|
10
10
|
import { DatePickerModule } from 'primeng/datepicker';
|
|
11
11
|
import * as i2 from 'primeng/floatlabel';
|
|
12
12
|
import { FloatLabelModule, FloatLabel } from 'primeng/floatlabel';
|
|
13
|
+
import * as i3 from '@ngx-translate/core';
|
|
14
|
+
import { TranslateService, TranslateModule } from '@ngx-translate/core';
|
|
13
15
|
import { UIChart } from 'primeng/chart';
|
|
14
|
-
import * as i1$
|
|
16
|
+
import * as i1$4 from 'primeng/table';
|
|
15
17
|
import { TableModule } from 'primeng/table';
|
|
16
|
-
import * as i1$
|
|
17
|
-
import {
|
|
18
|
-
import * as i1$
|
|
19
|
-
import { NgTemplateOutlet, DatePipe, CommonModule } from '@angular/common';
|
|
20
|
-
import { startWith } from 'rxjs/operators';
|
|
21
|
-
import { merge } from 'rxjs';
|
|
22
|
-
import * as i1$4 from 'primeng/inputtext';
|
|
18
|
+
import * as i1$9 from '@angular/common';
|
|
19
|
+
import { NgTemplateOutlet, DatePipe, DOCUMENT, CommonModule } from '@angular/common';
|
|
20
|
+
import * as i1$3 from 'primeng/inputtext';
|
|
23
21
|
import { InputTextModule } from 'primeng/inputtext';
|
|
24
22
|
import { form, required, FormField } from '@angular/forms/signals';
|
|
25
23
|
import * as i2$1 from 'primeng/api';
|
|
24
|
+
import { MessageService } from 'primeng/api';
|
|
26
25
|
import { Select } from 'primeng/select';
|
|
27
|
-
import * as i1$
|
|
26
|
+
import * as i1$5 from 'primeng/checkbox';
|
|
28
27
|
import { CheckboxModule } from 'primeng/checkbox';
|
|
29
28
|
import { Password } from 'primeng/password';
|
|
30
29
|
import { MultiSelect } from 'primeng/multiselect';
|
|
31
|
-
import * as
|
|
30
|
+
import * as i1$6 from 'primeng/textarea';
|
|
31
|
+
import { TextareaModule } from 'primeng/textarea';
|
|
32
|
+
import * as i2$2 from 'primeng/toggleswitch';
|
|
33
|
+
import { ToggleSwitch, ToggleSwitchModule } from 'primeng/toggleswitch';
|
|
34
|
+
import * as i2$3 from 'primeng/selectbutton';
|
|
35
|
+
import { SelectButtonModule } from 'primeng/selectbutton';
|
|
36
|
+
import * as i1$7 from 'primeng/dialog';
|
|
37
|
+
import { DialogModule } from 'primeng/dialog';
|
|
38
|
+
import * as i1$8 from 'primeng/paginator';
|
|
39
|
+
import { PaginatorModule } from 'primeng/paginator';
|
|
40
|
+
import * as i2$4 from 'primeng/stepper';
|
|
32
41
|
import { StepperModule } from 'primeng/stepper';
|
|
42
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
43
|
+
import { Toast } from 'primeng/toast';
|
|
44
|
+
import { BehaviorSubject } from 'rxjs';
|
|
33
45
|
|
|
34
46
|
class AvatarComponent {
|
|
35
47
|
constructor() {
|
|
@@ -68,17 +80,129 @@ class ButtonComponent {
|
|
|
68
80
|
this.badgeSeverity = input('warn', ...(ngDevMode ? [{ debugName: "badgeSeverity" }] : /* istanbul ignore next */ []));
|
|
69
81
|
this.size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
70
82
|
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
83
|
+
this.aria = input({}, ...(ngDevMode ? [{ debugName: "aria" }] : /* istanbul ignore next */ []));
|
|
84
|
+
this.passThrough = computed(() => ({ root: { ...this.aria(), 'aria-busy': this.loading() ? 'true' : undefined } }), ...(ngDevMode ? [{ debugName: "passThrough" }] : /* istanbul ignore next */ []));
|
|
71
85
|
}
|
|
72
86
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
73
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"default-button\">\n <p-button\n [class]=\"className()\"\n [type]=\"type()\"\n [label]=\"label()\"\n [style]=\"style()\"\n [disabled]=\"disabled()\"\n [icon]=\"icon()\"\n [size]=\"size()\"\n [iconPos]=\"iconPos()\"\n [styleClass]=\"styleClass()\"\n [badgeSeverity]=\"badgeSeverity()\"\n >\n </p-button>\n</div>\n", styles: [":host{display:inline-flex}.default-button{display:inline-flex}:host ::ng-deep .p-button{width:auto;min-width:8rem;justify-content:center;border-radius:.8rem;border:1px solid #2563eb;background:#2563eb;color:#fff;font-weight:600;box-shadow:0 1px 2px #0f172a14;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}:host ::ng-deep .p-button:not(:disabled):hover{background:#1d4ed8;border-color:#1d4ed8;box-shadow:0 10px 20px #2563eb33}:host ::ng-deep .p-button:not(:disabled):focus-visible{box-shadow:0 0 0 .25rem #3b82f633}:host ::ng-deep .p-button:disabled{background:#cbd5e1;border-color:#cbd5e1;color:#64748b}:host ::ng-deep .p-button.p-button-icon-only{min-width:2.5rem;width:2.5rem;height:2.5rem;padding:0;border-color:#cbd5e1;background:#fff;color:#2563eb;box-shadow:none}:host ::ng-deep .p-button.p-button-icon-only:not(:disabled):hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
87
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, aria: { classPropertyName: "aria", publicName: "aria", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"default-button\" [class.default-button_vertical]=\"iconPos() === 'top' || iconPos() === 'bottom'\">\n <p-button\n [class]=\"className()\"\n [type]=\"type()\"\n [label]=\"label()\"\n [style]=\"style()\"\n [disabled]=\"disabled() || loading()\"\n [loading]=\"loading()\"\n [rounded]=\"rounded()\"\n [pt]=\"passThrough()\"\n [icon]=\"icon()\"\n [size]=\"size()\"\n [iconPos]=\"iconPos()\"\n [styleClass]=\"styleClass()\"\n [badgeSeverity]=\"badgeSeverity()\"\n >\n <span class=\"default-button__content\" [style.order]=\"iconPos() === 'left' || iconPos() === 'top' ? 1 : -1\"><ng-content></ng-content></span>\n </p-button>\n</div>\n", styles: [":host{display:inline-flex}.default-button{display:inline-flex}:host ::ng-deep .default-button__content:empty{display:none}:host ::ng-deep .default-button_vertical .p-button:has(.default-button__content:not(:empty)){flex-direction:column}:host ::ng-deep .p-button{width:auto;min-width:8rem;justify-content:center;border-radius:.8rem;border:1px solid #2563eb;background:#2563eb;color:#fff;font-weight:600;box-shadow:0 1px 2px #0f172a14;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}:host ::ng-deep .p-button:not(:disabled):hover{background:#1d4ed8;border-color:#1d4ed8;box-shadow:0 10px 20px #2563eb33}:host ::ng-deep .p-button:not(:disabled):focus-visible{box-shadow:0 0 0 .25rem #3b82f633}:host ::ng-deep .p-button:disabled{background:#cbd5e1;border-color:#cbd5e1;color:#64748b}:host ::ng-deep .p-button.p-button-icon-only:not(:has(.default-button__content:not(:empty))){min-width:2.5rem;width:2.5rem;height:2.5rem;padding:0;border-color:#cbd5e1;background:#fff;color:#2563eb;box-shadow:none}:host ::ng-deep .p-button.p-button-icon-only:not(:has(.default-button__content:not(:empty))):not(:disabled):hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
74
88
|
}
|
|
75
89
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
76
90
|
type: Component,
|
|
77
|
-
args: [{ selector: 'app-button', imports: [ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"default-button\">\n <p-button\n [class]=\"className()\"\n [type]=\"type()\"\n [label]=\"label()\"\n [style]=\"style()\"\n [disabled]=\"disabled()\"\n [icon]=\"icon()\"\n [size]=\"size()\"\n [iconPos]=\"iconPos()\"\n [styleClass]=\"styleClass()\"\n [badgeSeverity]=\"badgeSeverity()\"\n >\n </p-button>\n</div>\n", styles: [":host{display:inline-flex}.default-button{display:inline-flex}:host ::ng-deep .p-button{width:auto;min-width:8rem;justify-content:center;border-radius:.8rem;border:1px solid #2563eb;background:#2563eb;color:#fff;font-weight:600;box-shadow:0 1px 2px #0f172a14;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}:host ::ng-deep .p-button:not(:disabled):hover{background:#1d4ed8;border-color:#1d4ed8;box-shadow:0 10px 20px #2563eb33}:host ::ng-deep .p-button:not(:disabled):focus-visible{box-shadow:0 0 0 .25rem #3b82f633}:host ::ng-deep .p-button:disabled{background:#cbd5e1;border-color:#cbd5e1;color:#64748b}:host ::ng-deep .p-button.p-button-icon-only{min-width:2.5rem;width:2.5rem;height:2.5rem;padding:0;border-color:#cbd5e1;background:#fff;color:#2563eb;box-shadow:none}:host ::ng-deep .p-button.p-button-icon-only:not(:disabled):hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}\n"] }]
|
|
78
|
-
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], badgeSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSeverity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
|
|
91
|
+
args: [{ selector: 'app-button', imports: [ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"default-button\" [class.default-button_vertical]=\"iconPos() === 'top' || iconPos() === 'bottom'\">\n <p-button\n [class]=\"className()\"\n [type]=\"type()\"\n [label]=\"label()\"\n [style]=\"style()\"\n [disabled]=\"disabled() || loading()\"\n [loading]=\"loading()\"\n [rounded]=\"rounded()\"\n [pt]=\"passThrough()\"\n [icon]=\"icon()\"\n [size]=\"size()\"\n [iconPos]=\"iconPos()\"\n [styleClass]=\"styleClass()\"\n [badgeSeverity]=\"badgeSeverity()\"\n >\n <span class=\"default-button__content\" [style.order]=\"iconPos() === 'left' || iconPos() === 'top' ? 1 : -1\"><ng-content></ng-content></span>\n </p-button>\n</div>\n", styles: [":host{display:inline-flex}.default-button{display:inline-flex}:host ::ng-deep .default-button__content:empty{display:none}:host ::ng-deep .default-button_vertical .p-button:has(.default-button__content:not(:empty)){flex-direction:column}:host ::ng-deep .p-button{width:auto;min-width:8rem;justify-content:center;border-radius:.8rem;border:1px solid #2563eb;background:#2563eb;color:#fff;font-weight:600;box-shadow:0 1px 2px #0f172a14;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}:host ::ng-deep .p-button:not(:disabled):hover{background:#1d4ed8;border-color:#1d4ed8;box-shadow:0 10px 20px #2563eb33}:host ::ng-deep .p-button:not(:disabled):focus-visible{box-shadow:0 0 0 .25rem #3b82f633}:host ::ng-deep .p-button:disabled{background:#cbd5e1;border-color:#cbd5e1;color:#64748b}:host ::ng-deep .p-button.p-button-icon-only:not(:has(.default-button__content:not(:empty))){min-width:2.5rem;width:2.5rem;height:2.5rem;padding:0;border-color:#cbd5e1;background:#fff;color:#2563eb;box-shadow:none}:host ::ng-deep .p-button.p-button-icon-only:not(:has(.default-button__content:not(:empty))):not(:disabled):hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}\n"] }]
|
|
92
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], badgeSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSeverity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], aria: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria", required: false }] }] } });
|
|
79
93
|
|
|
94
|
+
let nextFieldId = 0;
|
|
95
|
+
class FormFieldComponent {
|
|
96
|
+
constructor() {
|
|
97
|
+
this.controlRevision = signal(0, ...(ngDevMode ? [{ debugName: "controlRevision" }] : /* istanbul ignore next */ []));
|
|
98
|
+
this.translate = inject(TranslateService, { optional: true });
|
|
99
|
+
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
100
|
+
this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
101
|
+
this.isInline = input(true, ...(ngDevMode ? [{ debugName: "isInline" }] : /* istanbul ignore next */ []));
|
|
102
|
+
this.showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
|
|
103
|
+
this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
104
|
+
this.patternError = input(...(ngDevMode ? [undefined, { debugName: "patternError" }] : /* istanbul ignore next */ []));
|
|
105
|
+
this.submitted = input(false, ...(ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []));
|
|
106
|
+
this.errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
107
|
+
this.controlId = input(`springest-field-${++nextFieldId}`, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
|
|
108
|
+
this.labelId = computed(() => `${this.controlId()}-label`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
|
|
109
|
+
this.errorId = computed(() => `${this.controlId()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
110
|
+
effect(onCleanup => {
|
|
111
|
+
const control = this.field();
|
|
112
|
+
if (control instanceof AbstractControl) {
|
|
113
|
+
const subscription = control.events.subscribe(() => this.controlRevision.update(revision => revision + 1));
|
|
114
|
+
onCleanup(() => subscription.unsubscribe());
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
hasError() {
|
|
119
|
+
this.controlRevision();
|
|
120
|
+
const control = this.field();
|
|
121
|
+
if (control instanceof AbstractControl)
|
|
122
|
+
return control.invalid && (control.touched || this.submitted());
|
|
123
|
+
const state = this.getSignalFieldState(control);
|
|
124
|
+
return !!state && state.invalid() && (state.touched() || this.submitted());
|
|
125
|
+
}
|
|
126
|
+
get errorKey() {
|
|
127
|
+
this.controlRevision();
|
|
128
|
+
const control = this.field();
|
|
129
|
+
if (control instanceof AbstractControl)
|
|
130
|
+
return Object.keys(control.errors ?? {})[0] ?? null;
|
|
131
|
+
const kind = this.getSignalFieldState(control)?.errors()[0]?.kind;
|
|
132
|
+
return kind === 'minLength' ? 'minlength' : kind === 'maxLength' ? 'maxlength' : kind ?? null;
|
|
133
|
+
}
|
|
134
|
+
get errorValue() {
|
|
135
|
+
this.controlRevision();
|
|
136
|
+
const control = this.field();
|
|
137
|
+
return control instanceof AbstractControl
|
|
138
|
+
? control.errors?.[this.errorKey ?? '']
|
|
139
|
+
: this.getSignalFieldState(control)?.errors()[0];
|
|
140
|
+
}
|
|
141
|
+
get errorMessage() {
|
|
142
|
+
const key = this.errorKey;
|
|
143
|
+
if (!key)
|
|
144
|
+
return '';
|
|
145
|
+
const data = this.errorValue;
|
|
146
|
+
const error = data && typeof data === 'object' ? data : {};
|
|
147
|
+
const override = this.errorMessages()[error.kind ?? key] ?? this.errorMessages()[key];
|
|
148
|
+
if (override !== undefined)
|
|
149
|
+
return typeof override === 'function' ? override(error) : override;
|
|
150
|
+
if (error.message)
|
|
151
|
+
return error.message;
|
|
152
|
+
switch (key) {
|
|
153
|
+
case 'required': {
|
|
154
|
+
const translated = this.translate?.instant('ERRORS.FIELD_REQUIRED');
|
|
155
|
+
return translated && translated !== 'ERRORS.FIELD_REQUIRED' ? translated : 'Required field';
|
|
156
|
+
}
|
|
157
|
+
case 'email': return 'Invalid email';
|
|
158
|
+
case 'minlength': return `At least ${error.minLength ?? error.requiredLength} characters`;
|
|
159
|
+
case 'maxlength': return `No more than ${error.maxLength ?? error.requiredLength} characters`;
|
|
160
|
+
case 'min': return `Minimum ${error.min}`;
|
|
161
|
+
case 'max': return `Maximum ${error.max}`;
|
|
162
|
+
case 'pattern': return this.patternError() ?? 'Pattern does not match';
|
|
163
|
+
case 'parse': return 'Invalid value';
|
|
164
|
+
default: return typeof data === 'string' ? data : 'Invalid value';
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
describedBy(existing) {
|
|
168
|
+
return [...new Set([...(existing?.split(/\s+/).filter(Boolean) ?? []), ...(this.hasError() ? [this.errorId()] : [])])].join(' ') || undefined;
|
|
169
|
+
}
|
|
170
|
+
labelledBy(existing) {
|
|
171
|
+
return [...new Set([...(existing?.split(/\s+/).filter(Boolean) ?? []), ...(this.showLabel() && this.label() ? [this.labelId()] : [])])].join(' ') || undefined;
|
|
172
|
+
}
|
|
173
|
+
getSignalFieldState(value) {
|
|
174
|
+
const candidate = typeof value === 'function' ? value() : value;
|
|
175
|
+
if (!candidate || typeof candidate !== 'object')
|
|
176
|
+
return null;
|
|
177
|
+
const state = candidate;
|
|
178
|
+
return typeof state.invalid === 'function' && typeof state.touched === 'function' && typeof state.errors === 'function'
|
|
179
|
+
? state : null;
|
|
180
|
+
}
|
|
181
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
182
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FormFieldComponent, isStandalone: true, selector: "app-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isInline: { classPropertyName: "isInline", publicName: "isInline", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, patternError: { classPropertyName: "patternError", publicName: "patternError", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"form-field\" [class.form-field_error]=\"hasError()\" [class.form-field_inline]=\"isInline()\">\n @if (showLabel()) {\n <label class=\"form-field__label\" [id]=\"labelId()\" [for]=\"controlId()\">\n <span class=\"form-field__label-text\">{{ label() }}</span>\n @if (required()) { <span class=\"form-field__req\" aria-hidden=\"true\">*</span> }\n </label>\n }\n <div class=\"form-field__control\">\n <ng-content></ng-content>\n @if (hasError()) {\n <div class=\"form-field__error\" [id]=\"errorId()\" aria-live=\"polite\">{{ errorMessage }}</div>\n }\n </div>\n</div>\r\n", styles: [".form-field{padding-bottom:8px}.form-field__label{display:block;margin:.25rem 0 0}.form-field__label-text{color:#475569;font-size:.92rem;font-weight:600}.form-field__control{display:block}.form-field__error{opacity:0;font-size:.78rem;color:#b91c1c;position:static;margin-top:.35rem}.form-field__error span{display:block}.form-field_error .form-field__error{opacity:1}.form-field .form-field__warning{font-size:12px;color:#c8741f;position:static;margin-top:.35rem}.form-field .form-field__warning span{display:block}.form-field_inline{display:flex}.form-field_inline>.form-field__label{align-self:flex-start;flex:1 0 auto;padding-right:1.1em;padding-top:.85rem}.form-field_inline>.form-field__control{width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
183
|
+
}
|
|
184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
185
|
+
type: Component,
|
|
186
|
+
args: [{ selector: 'app-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-field\" [class.form-field_error]=\"hasError()\" [class.form-field_inline]=\"isInline()\">\n @if (showLabel()) {\n <label class=\"form-field__label\" [id]=\"labelId()\" [for]=\"controlId()\">\n <span class=\"form-field__label-text\">{{ label() }}</span>\n @if (required()) { <span class=\"form-field__req\" aria-hidden=\"true\">*</span> }\n </label>\n }\n <div class=\"form-field__control\">\n <ng-content></ng-content>\n @if (hasError()) {\n <div class=\"form-field__error\" [id]=\"errorId()\" aria-live=\"polite\">{{ errorMessage }}</div>\n }\n </div>\n</div>\r\n", styles: [".form-field{padding-bottom:8px}.form-field__label{display:block;margin:.25rem 0 0}.form-field__label-text{color:#475569;font-size:.92rem;font-weight:600}.form-field__control{display:block}.form-field__error{opacity:0;font-size:.78rem;color:#b91c1c;position:static;margin-top:.35rem}.form-field__error span{display:block}.form-field_error .form-field__error{opacity:1}.form-field .form-field__warning{font-size:12px;color:#c8741f;position:static;margin-top:.35rem}.form-field .form-field__warning span{display:block}.form-field_inline{display:flex}.form-field_inline>.form-field__label{align-self:flex-start;flex:1 0 auto;padding-right:1.1em;padding-top:.85rem}.form-field_inline>.form-field__control{width:100%}\n"] }]
|
|
187
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], isInline: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInline", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], patternError: [{ type: i0.Input, args: [{ isSignal: true, alias: "patternError", required: false }] }], submitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitted", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }] } });
|
|
188
|
+
|
|
189
|
+
let nextId$8 = 0;
|
|
80
190
|
class CalendarComponent {
|
|
81
191
|
constructor() {
|
|
192
|
+
this.formField = inject(FormFieldComponent, { optional: true });
|
|
193
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
194
|
+
this.inputId = input(`app-calendar-${++nextId$8}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
195
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
196
|
+
this.ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
|
|
197
|
+
this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
198
|
+
this.ariaInvalid = input(false, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
199
|
+
this.effectiveId = computed(() => this.formField?.controlId() ?? this.inputId(), ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
|
|
200
|
+
this.labelledBy = computed(() => this.formField?.labelledBy(this.ariaLabelledBy()) ?? this.ariaLabelledBy(), ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
|
|
201
|
+
this.inputAria = computed(() => ({
|
|
202
|
+
'aria-describedby': this.formField?.describedBy(this.ariaDescribedBy()) ?? this.ariaDescribedBy(),
|
|
203
|
+
'aria-invalid': this.formField ? this.formField.hasError() : this.ariaInvalid()
|
|
204
|
+
}), ...(ngDevMode ? [{ debugName: "inputAria" }] : /* istanbul ignore next */ []));
|
|
205
|
+
this.passThrough = computed(() => ({ pcInputText: { root: this.inputAria() } }), ...(ngDevMode ? [{ debugName: "passThrough" }] : /* istanbul ignore next */ []));
|
|
82
206
|
this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
83
207
|
this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
84
208
|
this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
@@ -97,12 +221,12 @@ class CalendarComponent {
|
|
|
97
221
|
this.closed.emit();
|
|
98
222
|
}
|
|
99
223
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
100
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: CalendarComponent, isStandalone: true, selector: "global-calendar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", value: "valueChange", changed: "changed", closed: "closed" }, ngImport: i0, template: "<div class=\"app-calendar input-group input-group-sm\">\n <p-floatlabel variant=\"on\">\n <p-datepicker\n [ngModel]=\"value()\"\n (ngModelChange)=\"onChanged($event)\"\n [inputId]=\"
|
|
224
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: CalendarComponent, isStandalone: true, selector: "global-calendar", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", value: "valueChange", changed: "changed", closed: "closed" }, ngImport: i0, template: "<div class=\"app-calendar input-group input-group-sm\">\n <p-floatlabel variant=\"on\">\n <p-datepicker\n [ngModel]=\"value()\"\n (ngModelChange)=\"onChanged($event)\"\n [inputId]=\"effectiveId()\"\n [readonlyInput]=\"readonly()\"\n [showOnFocus]=\"!readonly()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"labelledBy()\"\n [pt]=\"passThrough()\"\n showIcon\n iconDisplay=\"input\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabled]=\"disabled() || readonly()\"\n (onBlur)=\"onClosed()\"\n ></p-datepicker>\n <label [for]=\"effectiveId()\">{{ placeholder() || 'On Label' }}</label>\n </p-floatlabel>\n</div>\n", styles: [":host-context(.form-field_error) .p-datepicker-input{border-color:#dc2626!important}.app-calendar{width:100%}:host ::ng-deep .p-floatlabel{display:block}:host ::ng-deep .p-floatlabel label{color:#64748b}:host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker .p-inputtext,:host ::ng-deep .p-datepicker-input{min-height:2.75rem;width:100%;border:1px solid #cbd5e1;border-radius:.85rem;background:#fff;color:#0f172a;box-shadow:none;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}:host ::ng-deep .p-datepicker .p-inputtext:hover,:host ::ng-deep .p-datepicker-input:hover{border-color:#93c5fd}:host ::ng-deep .p-datepicker .p-inputtext:focus,:host ::ng-deep .p-datepicker-input:focus,:host ::ng-deep .p-datepicker .p-inputtext:focus-visible,:host ::ng-deep .p-datepicker-input:focus-visible{border-color:#3b82f6;box-shadow:0 0 0 .25rem #3b82f629;outline:none}:host ::ng-deep .p-datepicker:has(.p-datepicker-input:focus),:host ::ng-deep .p-datepicker:has(.p-inputtext:focus){border-radius:.85rem}:host ::ng-deep .p-datepicker.p-disabled .p-inputtext,:host ::ng-deep .p-datepicker .p-inputtext:disabled{background:#f8fafc;border-color:#e2e8f0;color:#94a3b8}:host ::ng-deep .p-datepicker-dropdown,:host ::ng-deep .p-datepicker-input-icon-container{color:#64748b}\n"], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i1$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
101
225
|
}
|
|
102
226
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
103
227
|
type: Component,
|
|
104
|
-
args: [{ selector: 'global-calendar', imports: [DatePickerModule, FloatLabelModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"app-calendar input-group input-group-sm\">\n <p-floatlabel variant=\"on\">\n <p-datepicker\n [ngModel]=\"value()\"\n (ngModelChange)=\"onChanged($event)\"\n [inputId]=\"
|
|
105
|
-
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
228
|
+
args: [{ selector: 'global-calendar', imports: [DatePickerModule, FloatLabelModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"app-calendar input-group input-group-sm\">\n <p-floatlabel variant=\"on\">\n <p-datepicker\n [ngModel]=\"value()\"\n (ngModelChange)=\"onChanged($event)\"\n [inputId]=\"effectiveId()\"\n [readonlyInput]=\"readonly()\"\n [showOnFocus]=\"!readonly()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"labelledBy()\"\n [pt]=\"passThrough()\"\n showIcon\n iconDisplay=\"input\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabled]=\"disabled() || readonly()\"\n (onBlur)=\"onClosed()\"\n ></p-datepicker>\n <label [for]=\"effectiveId()\">{{ placeholder() || 'On Label' }}</label>\n </p-floatlabel>\n</div>\n", styles: [":host-context(.form-field_error) .p-datepicker-input{border-color:#dc2626!important}.app-calendar{width:100%}:host ::ng-deep .p-floatlabel{display:block}:host ::ng-deep .p-floatlabel label{color:#64748b}:host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker .p-inputtext,:host ::ng-deep .p-datepicker-input{min-height:2.75rem;width:100%;border:1px solid #cbd5e1;border-radius:.85rem;background:#fff;color:#0f172a;box-shadow:none;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}:host ::ng-deep .p-datepicker .p-inputtext:hover,:host ::ng-deep .p-datepicker-input:hover{border-color:#93c5fd}:host ::ng-deep .p-datepicker .p-inputtext:focus,:host ::ng-deep .p-datepicker-input:focus,:host ::ng-deep .p-datepicker .p-inputtext:focus-visible,:host ::ng-deep .p-datepicker-input:focus-visible{border-color:#3b82f6;box-shadow:0 0 0 .25rem #3b82f629;outline:none}:host ::ng-deep .p-datepicker:has(.p-datepicker-input:focus),:host ::ng-deep .p-datepicker:has(.p-inputtext:focus){border-radius:.85rem}:host ::ng-deep .p-datepicker.p-disabled .p-inputtext,:host ::ng-deep .p-datepicker .p-inputtext:disabled{background:#f8fafc;border-color:#e2e8f0;color:#94a3b8}:host ::ng-deep .p-datepicker-dropdown,:host ::ng-deep .p-datepicker-input-icon-container{color:#64748b}\n"] }]
|
|
229
|
+
}], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
106
230
|
|
|
107
231
|
class ChartsComponent {
|
|
108
232
|
constructor() {
|
|
@@ -119,122 +243,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
119
243
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card flex justify-center\">\n <p-chart type=\"pie\"\n [data]=\"data()\"\n [options]=\"options()\"\n class=\"w-full md:w-[30rem]\"\n />\n</div>\n" }]
|
|
120
244
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
|
|
121
245
|
|
|
122
|
-
|
|
123
|
-
constructor() {
|
|
124
|
-
this.cdr = inject(ChangeDetectorRef);
|
|
125
|
-
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
126
|
-
this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
127
|
-
this.isInline = input(true, ...(ngDevMode ? [{ debugName: "isInline" }] : /* istanbul ignore next */ []));
|
|
128
|
-
this.showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
|
|
129
|
-
this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
130
|
-
this.patternError = input(...(ngDevMode ? [undefined, { debugName: "patternError" }] : /* istanbul ignore next */ []));
|
|
131
|
-
effect(() => {
|
|
132
|
-
const control = this.field();
|
|
133
|
-
if (!this.isAbstractControl(control))
|
|
134
|
-
return;
|
|
135
|
-
const sub = merge(control.statusChanges, control.valueChanges)
|
|
136
|
-
.pipe(startWith(null))
|
|
137
|
-
.subscribe(() => this.cdr.markForCheck());
|
|
138
|
-
return () => sub.unsubscribe();
|
|
139
|
-
});
|
|
140
|
-
effect(() => {
|
|
141
|
-
const fieldState = this.getSignalFieldState(this.field());
|
|
142
|
-
if (!fieldState)
|
|
143
|
-
return;
|
|
144
|
-
fieldState.invalid();
|
|
145
|
-
fieldState.touched();
|
|
146
|
-
fieldState.errors();
|
|
147
|
-
this.cdr.markForCheck();
|
|
148
|
-
});
|
|
149
|
-
}
|
|
150
|
-
hasError() {
|
|
151
|
-
const control = this.field();
|
|
152
|
-
if (this.isAbstractControl(control)) {
|
|
153
|
-
return control.invalid && control.touched;
|
|
154
|
-
}
|
|
155
|
-
const fieldState = this.getSignalFieldState(control);
|
|
156
|
-
return !!fieldState && fieldState.invalid() && fieldState.touched();
|
|
157
|
-
}
|
|
158
|
-
get errorKey() {
|
|
159
|
-
const control = this.field();
|
|
160
|
-
if (this.isAbstractControl(control)) {
|
|
161
|
-
const errs = control.errors ?? null;
|
|
162
|
-
return errs ? Object.keys(errs)[0] : null;
|
|
163
|
-
}
|
|
164
|
-
const fieldState = this.getSignalFieldState(control);
|
|
165
|
-
const firstError = fieldState?.errors()?.[0];
|
|
166
|
-
if (!firstError)
|
|
167
|
-
return null;
|
|
168
|
-
if (firstError.kind === 'minLength')
|
|
169
|
-
return 'minlength';
|
|
170
|
-
if (firstError.kind === 'maxLength')
|
|
171
|
-
return 'maxlength';
|
|
172
|
-
return firstError.kind ?? null;
|
|
173
|
-
}
|
|
174
|
-
get errorValue() {
|
|
175
|
-
const key = this.errorKey;
|
|
176
|
-
if (!key)
|
|
177
|
-
return null;
|
|
178
|
-
const control = this.field();
|
|
179
|
-
if (this.isAbstractControl(control)) {
|
|
180
|
-
return control.errors?.[key] ?? null;
|
|
181
|
-
}
|
|
182
|
-
const fieldState = this.getSignalFieldState(control);
|
|
183
|
-
return fieldState?.errors()?.[0] ?? null;
|
|
184
|
-
}
|
|
185
|
-
isAbstractControl(value) {
|
|
186
|
-
return !!value
|
|
187
|
-
&& typeof value === 'object'
|
|
188
|
-
&& 'valueChanges' in value
|
|
189
|
-
&& 'statusChanges' in value;
|
|
190
|
-
}
|
|
191
|
-
getSignalFieldState(value) {
|
|
192
|
-
const candidate = typeof value === 'function' ? value() : value;
|
|
193
|
-
if (!candidate || typeof candidate !== 'object')
|
|
194
|
-
return null;
|
|
195
|
-
const state = candidate;
|
|
196
|
-
if (typeof state.invalid !== 'function')
|
|
197
|
-
return null;
|
|
198
|
-
if (typeof state.touched !== 'function')
|
|
199
|
-
return null;
|
|
200
|
-
if (typeof state.errors !== 'function')
|
|
201
|
-
return null;
|
|
202
|
-
return state;
|
|
203
|
-
}
|
|
204
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
205
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FormFieldComponent, isStandalone: true, selector: "app-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isInline: { classPropertyName: "isInline", publicName: "isInline", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, patternError: { classPropertyName: "patternError", publicName: "patternError", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"form-field\" [class.form-field_error]=\"hasError()\" [class.form-field_inline]=\"isInline()\">\n @if (showLabel()) {\n <label class=\"form-field__label\">\n <span class=\"form-field__label-text\">{{ label() }}</span>\n @if (required()) {\n <span class=\"form-field__req\">*</span>\n }\n </label>\n }\n\n <div class=\"form-field__control\">\n <ng-content></ng-content>\n\n <div class=\"form-field__error\">\n @if(errorKey; as key) {\n @switch(errorKey) {\n @case(\"min\") {\n <span>Minimum {{errorValue?.min}}</span>\n }\n @case(\"max\") {\n <span>Maximum {{errorValue?.max}}</span>\n }\n @case(\"required\") {\n <span>{{'ERRORS.FIELD_REQUIRED' | translate}}</span>\n }\n @case(\"minlength\") {\n <span>At least {{errorValue?.requiredLength}} characters</span>\n }\n @case(\"maxlength\") {\n <span>No more than {{errorValue?.requiredLength}} characters</span>\n }\n @case(\"startsWith\") {\n <span>{{errorValue}} Test</span>\n }\n @case(\"startsWithParam\") {\n <span>{{errorValue?.message}} Test</span>\n }\n @default {\n @if (key === \"pattern\") {\n <span>\n @if (patternError()) {\n <span>{{patternError()}}</span>\n }\n @if (!patternError()) {\n <span>Pattern does not match</span>\n }\n </span>\n }\n }\n }\n }\n </div>\n </div>\n</div>\n", styles: [".form-field{padding-bottom:8px}.form-field__label{display:block;margin:.25rem 0 0}.form-field__label-text{color:#475569;font-size:.92rem;font-weight:600}.form-field__control{display:block}.form-field__error{opacity:0;font-size:.78rem;color:#b91c1c;position:static;margin-top:.35rem}.form-field__error span{display:block}.form-field_error .form-field__error{opacity:1}.form-field .form-field__warning{font-size:12px;color:#c8741f;position:static;margin-top:.35rem}.form-field .form-field__warning span{display:block}.form-field_inline{display:flex}.form-field_inline>.form-field__label{align-self:flex-start;flex:1 0 auto;padding-right:1.1em;padding-top:.85rem}.form-field_inline>.form-field__control{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
206
|
-
}
|
|
207
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
208
|
-
type: Component,
|
|
209
|
-
args: [{ selector: 'app-form-field', imports: [
|
|
210
|
-
TranslateModule
|
|
211
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-field\" [class.form-field_error]=\"hasError()\" [class.form-field_inline]=\"isInline()\">\n @if (showLabel()) {\n <label class=\"form-field__label\">\n <span class=\"form-field__label-text\">{{ label() }}</span>\n @if (required()) {\n <span class=\"form-field__req\">*</span>\n }\n </label>\n }\n\n <div class=\"form-field__control\">\n <ng-content></ng-content>\n\n <div class=\"form-field__error\">\n @if(errorKey; as key) {\n @switch(errorKey) {\n @case(\"min\") {\n <span>Minimum {{errorValue?.min}}</span>\n }\n @case(\"max\") {\n <span>Maximum {{errorValue?.max}}</span>\n }\n @case(\"required\") {\n <span>{{'ERRORS.FIELD_REQUIRED' | translate}}</span>\n }\n @case(\"minlength\") {\n <span>At least {{errorValue?.requiredLength}} characters</span>\n }\n @case(\"maxlength\") {\n <span>No more than {{errorValue?.requiredLength}} characters</span>\n }\n @case(\"startsWith\") {\n <span>{{errorValue}} Test</span>\n }\n @case(\"startsWithParam\") {\n <span>{{errorValue?.message}} Test</span>\n }\n @default {\n @if (key === \"pattern\") {\n <span>\n @if (patternError()) {\n <span>{{patternError()}}</span>\n }\n @if (!patternError()) {\n <span>Pattern does not match</span>\n }\n </span>\n }\n }\n }\n }\n </div>\n </div>\n</div>\n", styles: [".form-field{padding-bottom:8px}.form-field__label{display:block;margin:.25rem 0 0}.form-field__label-text{color:#475569;font-size:.92rem;font-weight:600}.form-field__control{display:block}.form-field__error{opacity:0;font-size:.78rem;color:#b91c1c;position:static;margin-top:.35rem}.form-field__error span{display:block}.form-field_error .form-field__error{opacity:1}.form-field .form-field__warning{font-size:12px;color:#c8741f;position:static;margin-top:.35rem}.form-field .form-field__warning span{display:block}.form-field_inline{display:flex}.form-field_inline>.form-field__label{align-self:flex-start;flex:1 0 auto;padding-right:1.1em;padding-top:.85rem}.form-field_inline>.form-field__control{width:100%}\n"] }]
|
|
212
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], isInline: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInline", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], patternError: [{ type: i0.Input, args: [{ isSignal: true, alias: "patternError", required: false }] }] } });
|
|
213
|
-
|
|
246
|
+
let nextInputId = 0;
|
|
214
247
|
class BasicInputComponent {
|
|
215
248
|
constructor() {
|
|
249
|
+
this.formField = inject(FormFieldComponent, { optional: true });
|
|
216
250
|
this.placeholder = input("Input some text...", ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
217
251
|
this.labelType = input("in_label", ...(ngDevMode ? [{ debugName: "labelType" }] : /* istanbul ignore next */ []));
|
|
218
252
|
this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
253
|
+
this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
254
|
+
this.min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
|
|
255
|
+
this.max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
|
|
256
|
+
this.step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
|
|
257
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
258
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
259
|
+
this.autocomplete = input(...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
260
|
+
this.lang = input(...(ngDevMode ? [undefined, { debugName: "lang" }] : /* istanbul ignore next */ []));
|
|
261
|
+
this.spellcheck = input(...(ngDevMode ? [undefined, { debugName: "spellcheck" }] : /* istanbul ignore next */ []));
|
|
262
|
+
this.inputId = input(`springest-input-${++nextInputId}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
263
|
+
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
264
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
265
|
+
this.ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
|
|
266
|
+
this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
267
|
+
this.ariaInvalid = input(...(ngDevMode ? [undefined, { debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
268
|
+
this.effectiveId = computed(() => this.formField?.controlId() ?? this.inputId(), ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
|
|
219
269
|
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
220
270
|
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
221
271
|
this.changed = output();
|
|
222
272
|
}
|
|
223
|
-
|
|
224
|
-
const
|
|
273
|
+
onInput(event) {
|
|
274
|
+
const field = event.target;
|
|
275
|
+
const value = (this.type() === 'number' ? (Number.isFinite(field.valueAsNumber) ? field.valueAsNumber : null) : field.value);
|
|
225
276
|
this.value.set(value);
|
|
226
277
|
this.changed.emit(value);
|
|
227
278
|
}
|
|
279
|
+
onKeyup(event) { this.onInput(event); }
|
|
228
280
|
onBlur() {
|
|
229
281
|
this.touched.set(true);
|
|
230
282
|
}
|
|
231
283
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BasicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: BasicInputComponent, isStandalone: true, selector: "app-basic-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", changed: "changed" }, ngImport: i0, template: "<div class=\"basic-input\">\n <p-floatlabel>\n <input\n type=\"
|
|
284
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: BasicInputComponent, isStandalone: true, selector: "app-basic-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", changed: "changed" }, ngImport: i0, template: "<div class=\"basic-input\">\n <p-floatlabel>\n <input\n [type]=\"type()\"\n pInputText\n class=\"app-input\"\n [id]=\"effectiveId()\"\n [disabled]=\"isDisabled() || disabled()\"\n [readOnly]=\"readonly()\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.lang]=\"lang()\"\n [attr.spellcheck]=\"spellcheck()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"formField ? formField.labelledBy(ariaLabelledBy()) : ariaLabelledBy()\"\n [attr.aria-describedby]=\"formField ? formField.describedBy(ariaDescribedBy()) : ariaDescribedBy()\"\n [attr.aria-invalid]=\"formField ? formField.hasError() : ariaInvalid()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [value]=\"value()\"\n />\n <label [for]=\"effectiveId()\">{{label() ?? placeholder()}}</label>\n </p-floatlabel>\n</div>\n\n", styles: [":host-context(.form-field_error) .app-input{border-color:#dc2626!important}:host{display:block;width:100%}.basic-input{width:100%}:host ::ng-deep .p-floatlabel{display:block}:host ::ng-deep .p-floatlabel label{color:#64748b}.app-input{min-height:2.75rem;border:1px solid #cbd5e1;border-radius:.85rem;background-color:#fff;color:#0f172a;width:100%;padding:.85rem .95rem .35rem;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.app-input_disabled{background:#f8fafc;border:1px solid #e2e8f0;color:#94a3b8}:host ::ng-deep .app-input:hover{border-color:#93c5fd}:host ::ng-deep .app-input:focus,:host ::ng-deep .app-input:focus-visible{border-color:#3b82f6;box-shadow:0 0 0 .25rem #3b82f629;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
233
285
|
}
|
|
234
286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BasicInputComponent, decorators: [{
|
|
235
287
|
type: Component,
|
|
236
|
-
args: [{ selector: 'app-basic-input', standalone: true, imports: [InputTextModule, FloatLabel], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"basic-input\">\n <p-floatlabel>\n <input\n type=\"
|
|
237
|
-
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
288
|
+
args: [{ selector: 'app-basic-input', standalone: true, imports: [InputTextModule, FloatLabel], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"basic-input\">\n <p-floatlabel>\n <input\n [type]=\"type()\"\n pInputText\n class=\"app-input\"\n [id]=\"effectiveId()\"\n [disabled]=\"isDisabled() || disabled()\"\n [readOnly]=\"readonly()\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.lang]=\"lang()\"\n [attr.spellcheck]=\"spellcheck()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"formField ? formField.labelledBy(ariaLabelledBy()) : ariaLabelledBy()\"\n [attr.aria-describedby]=\"formField ? formField.describedBy(ariaDescribedBy()) : ariaDescribedBy()\"\n [attr.aria-invalid]=\"formField ? formField.hasError() : ariaInvalid()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [value]=\"value()\"\n />\n <label [for]=\"effectiveId()\">{{label() ?? placeholder()}}</label>\n </p-floatlabel>\n</div>\n\n", styles: [":host-context(.form-field_error) .app-input{border-color:#dc2626!important}:host{display:block;width:100%}.basic-input{width:100%}:host ::ng-deep .p-floatlabel{display:block}:host ::ng-deep .p-floatlabel label{color:#64748b}.app-input{min-height:2.75rem;border:1px solid #cbd5e1;border-radius:.85rem;background-color:#fff;color:#0f172a;width:100%;padding:.85rem .95rem .35rem;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.app-input_disabled{background:#f8fafc;border:1px solid #e2e8f0;color:#94a3b8}:host ::ng-deep .app-input:hover{border-color:#93c5fd}:host ::ng-deep .app-input:focus,:host ::ng-deep .app-input:focus-visible{border-color:#3b82f6;box-shadow:0 0 0 .25rem #3b82f629;outline:none}\n"] }]
|
|
289
|
+
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
238
290
|
|
|
239
291
|
class TableComponent {
|
|
240
292
|
constructor(cd) {
|
|
@@ -409,7 +461,7 @@ class TableComponent {
|
|
|
409
461
|
this.cd.markForCheck();
|
|
410
462
|
}
|
|
411
463
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
412
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceColumns: { classPropertyName: "dataSourceColumns", publicName: "dataSourceColumns", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, msgTooltip: { classPropertyName: "msgTooltip", publicName: "msgTooltip", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, metaKeySelection: { classPropertyName: "metaKeySelection", publicName: "metaKeySelection", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, selectedRowValue: { classPropertyName: "selectedRowValue", publicName: "selectedRowValue", isSignal: true, isRequired: false, transformFunction: null }, showIconSort: { classPropertyName: "showIconSort", publicName: "showIconSort", isSignal: true, isRequired: false, transformFunction: null }, showRowActions: { classPropertyName: "showRowActions", publicName: "showRowActions", isSignal: true, isRequired: false, transformFunction: null }, showIconCondition: { classPropertyName: "showIconCondition", publicName: "showIconCondition", isSignal: true, isRequired: false, transformFunction: null }, showFilterCondition: { classPropertyName: "showFilterCondition", publicName: "showFilterCondition", isSignal: true, isRequired: false, transformFunction: null }, editableFieldName: { classPropertyName: "editableFieldName", publicName: "editableFieldName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectRow: "selectRow", unselectRow: "unselectRow", cellEdit: "cellEdit", rowUpdate: "rowUpdate" }, queries: [{ propertyName: "customCellTemplate", first: true, predicate: ["customCellTemplate"], descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<p-table #table class=\"custom-table\"\n [columns]=\"dataSourceColumns()\"\n [value]=\"enrichedDataSource()\"\n [paginator]=\"paginator()\"\n [scrollable]=\"scrollable()\"\n [resizableColumns]=\"resizableColumns()\"\n [selection]=\"selectedRowValue()\"\n [selectionMode]=\"selectionMode()\"\n [customSort]=\"customSortFun\"\n [rowsPerPageOptions]=\"[10, 25, 100]\"\n (onRowSelect)=\"onSelectedRow($event)\"\n (onRowUnselect)=\"onRowUnselect()\"\n (onSort)=\"onCustomSort($event)\"\n [rows]=\"rows\">\n <ng-template #header let-columns pTemplate=\"header\">\n <tr >\n @for (col of columns; track $index) {\n <th pResizableColumn\n [pSortableColumn]=\"col.field\"\n [hidden]=\"!col.visible\"\n [style]=\"{'min-width': col.minWidth || '100px', 'width': col.width, 'text-align': col.textAlign}\"\n scope=\"col\"\n >\n {{ col.header | translate }}\n @if (showIconSort() && col.field !== showFilterCondition) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n </th>\n }\n\n @if (showRowActions()) {\n <th\n scope=\"col\"\n [attr.id]=\"'actions-col'\"\n [style]=\"{ width: '7%' }\"\n >\n <span class=\"sr-only\">\n {{ 'Action' | translate }}\n </span>\n </th>\n }\n </tr>\n </ng-template>\n <ng-template #body let-rowData let-rowIndex=\"rowIndex\" let-columns=\"columns\" pTemplate=\"body\">\n <tr [pSelectableRow]=\"rowData\"\n [pSelectableRowIndex]=\"rowIndex\"\n >\n @for (col of columns; track $index) {\n <td [style]=\"{'min-width': col.minWidth || '100px', 'width': col.width, 'text-align': col.textAlign}\"\n [hidden]=\"!col.visible\"\n >\n @if (customCellTemplate && col.type === 'especial') {\n <ng-container\n *ngTemplateOutlet=\"customCellTemplate; context: { $implicit: rowData, col: col }\"></ng-container>\n } @else {\n @if (rowData._editing && col.modificable) {\n\n <form (keydown.enter)=\"confirmEdit(rowData)\">\n <app-form-field\n [required]=\"true\"\n [field]=\"initialForm.inputValue\">\n <app-basic-input\n [placeholder]=\"''\"\n [formField]=\"initialForm.inputValue\"\n ></app-basic-input>\n </app-form-field>\n </form>\n\n } @else {\n <ng-container *ngTemplateOutlet=\"\n shouldUseCustomCell(col)\n ? customCell\n : defaultCell;\n context: { $implicit: rowData, col: col }\n \"></ng-container>\n }\n }\n </td>\n }\n\n @if (showRowActions()) {\n <td class=\"action-cell\"\n [attr.headers]=\"'actions-col'\"\n >\n <div class=\"button-cell\">\n @if (!rowData._editing) {\n <app-button (click)=\"startEdit(rowData, rowIndex)\"\n [iconPos]=\"'left'\"\n [icon]=\"'pi pi-pencil'\"\n [disabled]=\"rowData._editing\"\n ></app-button>\n }\n\n @if (rowData._editing) {\n <app-button (click)=\"confirmEdit(rowData)\"\n [iconPos]=\"'left'\"\n [icon]=\"'pi pi-check'\"\n ></app-button>\n <app-button\n (click)=\"cancelEdit(rowData)\"\n [iconPos]=\"'left'\"\n [icon]=\"'pi pi-times'\"\n ></app-button>\n }\n </div>\n </td>\n }\n </tr>\n </ng-template>\n\n <ng-template #customCell let-rowData=\"$implicit\" let-col=\"col\">\n @switch (col.type) {\n @case ('datetime') {\n <span>{{ rowData[col.field] | date:'dd-MM-yyyy HH:mm' }}</span>\n }\n @case ('date-mes') {\n <span>{{ rowData[col.field] | date:'MM-yyyy' }}</span>\n }\n @case ('date') {\n <span>{{ rowData[col.field] }}</span>\n }\n @case ('date-reverse') {\n <span>{{ rowData[col.field] | date:'YYYY-MM-DD' }}</span>\n }\n @case ('decimal') {\n <span>{{ rowData[col.field] }}</span>\n }\n @case ('icon') {\n @if (rowData[col.field] === showIconCondition()) {\n <div>\n <div class=\"tooltip-wrapper\">\n <em [class]=\"iconClass()\"\n [style]=\"{ color: iconColor() }\"></em>\n <span class=\"tooltip-text\">{{ rowData.ToolTipMsg || msgTooltip | translate }}</span>\n </div>\n </div>\n }\n }\n @case ('clickable') {\n <span class=\"clickable\" (click)=\"startEdit(rowData, col.rowIndex)\">{{ rowData[col.field] }}</span>\n }\n }\n </ng-template>\n\n <ng-template #defaultCell let-rowData=\"$implicit\" let-col=\"col\">\n @if (rowData !== null) {\n <span>{{ rowData[col.field] }}</span>\n }\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .app-input{height:1.9rem;color:#495057;width:100%;padding-left:.2rem;margin:-1rem 0rem -1rem -.3rem;background-color:#fff}:host::ng-deep .ui-inputtext{height:2.1rem;color:#495057;width:100%}:host::ng-deep .ui-inputtext:focus{border:1px solid rgb(135,220,55)!important;-webkit-box-shadow:0 0 0 .2rem rgba(72,126,22,.25)!important;box-shadow:0 0 0 .2rem #487e1640!important;outline:none!important}:host::ng-deep .ui-inputtext:hover{border:1px solid rgb(206,212,218)!important}:host::ng-deep .ui-inputtext[disabled]{background:#0000000d;border:1px solid rgba(0,0,0,.18);color:#000}:host ::ng-deep .custom-table{table-layout:auto;width:100%}:host ::ng-deep .custom-table .p-datatable-table-container{border:1px solid #dbe5f0;border-radius:1rem;overflow:hidden}:host ::ng-deep .custom-table .p-datatable-thead>tr>th{padding:.95rem 1rem;background:#f8fafc;border-color:#dbe5f0;color:#334155;font-size:.86rem;font-weight:700}:host ::ng-deep .custom-table .p-datatable-tbody>tr>td{padding:.95rem 1rem;background-color:#fff;border-color:#e2e8f0;color:#0f172a}:host ::ng-deep .custom-table .p-datatable-tbody>tr:nth-child(2n)>td{background:#f8fbff}:host ::ng-deep .custom-table .p-datatable-tbody>tr:hover>td{background:#eff6ff}:host ::ng-deep .custom-table th,:host ::ng-deep .custom-table td{white-space:normal;word-wrap:break-word;overflow-wrap:anywhere;min-width:100px}:host ::ng-deep .custom-table .p-datatable-table-container,:host ::ng-deep .custom-table .ui-table-scrollable-body{overflow-x:auto}.tooltip-wrapper{position:relative;display:inline-block}.tooltip-wrapper .tooltip-text{visibility:hidden;background-color:#0f172a;color:#fff;text-align:center;padding:.45rem .6rem;border-radius:.5rem;position:absolute;z-index:1;left:150%;top:50%;transform:translateY(-50%);white-space:nowrap;opacity:0;transition:opacity .3s}.tooltip-wrapper:hover .tooltip-text{visibility:visible;opacity:1}.action-col,.action-cell{width:7%;text-align:center;white-space:nowrap;background:inherit}.action-col .button-cell,.action-cell .button-cell{display:flex;justify-content:center;gap:.4rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host ::ng-deep .clickable{cursor:pointer;display:block;width:100%;color:#2563eb}:host ::ng-deep .custom-table .p-sortable-column-icon,:host ::ng-deep .custom-table .p-paginator,:host ::ng-deep .custom-table .p-paginator-page,:host ::ng-deep .custom-table .p-paginator-next,:host ::ng-deep .custom-table .p-paginator-prev,:host ::ng-deep .custom-table .p-paginator-first,:host ::ng-deep .custom-table .p-paginator-last{color:#475569}:host ::ng-deep .custom-table .p-paginator{border:none;padding-top:1rem;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i1$5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i1$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["type", "className", "style", "label", "iconPos", "styleClass", "icon", "disabled", "rounded", "badgeSeverity", "size", "loading"] }, { kind: "component", type: FormFieldComponent, selector: "app-form-field", inputs: ["label", "required", "isInline", "showLabel", "field", "patternError"] }, { kind: "component", type: BasicInputComponent, selector: "app-basic-input", inputs: ["placeholder", "labelType", "isDisabled", "value", "touched"], outputs: ["valueChange", "touchedChange", "changed"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
464
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceColumns: { classPropertyName: "dataSourceColumns", publicName: "dataSourceColumns", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, msgTooltip: { classPropertyName: "msgTooltip", publicName: "msgTooltip", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, metaKeySelection: { classPropertyName: "metaKeySelection", publicName: "metaKeySelection", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, selectedRowValue: { classPropertyName: "selectedRowValue", publicName: "selectedRowValue", isSignal: true, isRequired: false, transformFunction: null }, showIconSort: { classPropertyName: "showIconSort", publicName: "showIconSort", isSignal: true, isRequired: false, transformFunction: null }, showRowActions: { classPropertyName: "showRowActions", publicName: "showRowActions", isSignal: true, isRequired: false, transformFunction: null }, showIconCondition: { classPropertyName: "showIconCondition", publicName: "showIconCondition", isSignal: true, isRequired: false, transformFunction: null }, showFilterCondition: { classPropertyName: "showFilterCondition", publicName: "showFilterCondition", isSignal: true, isRequired: false, transformFunction: null }, editableFieldName: { classPropertyName: "editableFieldName", publicName: "editableFieldName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectRow: "selectRow", unselectRow: "unselectRow", cellEdit: "cellEdit", rowUpdate: "rowUpdate" }, queries: [{ propertyName: "customCellTemplate", first: true, predicate: ["customCellTemplate"], descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<p-table #table class=\"custom-table\"\n [columns]=\"dataSourceColumns()\"\n [value]=\"enrichedDataSource()\"\n [paginator]=\"paginator()\"\n [scrollable]=\"scrollable()\"\n [resizableColumns]=\"resizableColumns()\"\n [selection]=\"selectedRowValue()\"\n [selectionMode]=\"selectionMode()\"\n [customSort]=\"customSortFun\"\n [rowsPerPageOptions]=\"[10, 25, 100]\"\n (onRowSelect)=\"onSelectedRow($event)\"\n (onRowUnselect)=\"onRowUnselect()\"\n (onSort)=\"onCustomSort($event)\"\n [rows]=\"rows\">\n <ng-template #header let-columns pTemplate=\"header\">\n <tr >\n @for (col of columns; track $index) {\n <th pResizableColumn\n [pSortableColumn]=\"col.field\"\n [hidden]=\"!col.visible\"\n [style]=\"{'min-width': col.minWidth || '100px', 'width': col.width, 'text-align': col.textAlign}\"\n scope=\"col\"\n >\n {{ col.header | translate }}\n @if (showIconSort() && col.field !== showFilterCondition) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n </th>\n }\n\n @if (showRowActions()) {\n <th\n scope=\"col\"\n [attr.id]=\"'actions-col'\"\n [style]=\"{ width: '7%' }\"\n >\n <span class=\"sr-only\">\n {{ 'Action' | translate }}\n </span>\n </th>\n }\n </tr>\n </ng-template>\n <ng-template #body let-rowData let-rowIndex=\"rowIndex\" let-columns=\"columns\" pTemplate=\"body\">\n <tr [pSelectableRow]=\"rowData\"\n [pSelectableRowIndex]=\"rowIndex\"\n >\n @for (col of columns; track $index) {\n <td [style]=\"{'min-width': col.minWidth || '100px', 'width': col.width, 'text-align': col.textAlign}\"\n [hidden]=\"!col.visible\"\n >\n @if (customCellTemplate && col.type === 'especial') {\n <ng-container\n *ngTemplateOutlet=\"customCellTemplate; context: { $implicit: rowData, col: col }\"></ng-container>\n } @else {\n @if (rowData._editing && col.modificable) {\n\n <form (keydown.enter)=\"confirmEdit(rowData)\">\n <app-form-field\n [required]=\"true\"\n [field]=\"initialForm.inputValue\">\n <app-basic-input\n [placeholder]=\"''\"\n [formField]=\"initialForm.inputValue\"\n ></app-basic-input>\n </app-form-field>\n </form>\n\n } @else {\n <ng-container *ngTemplateOutlet=\"\n shouldUseCustomCell(col)\n ? customCell\n : defaultCell;\n context: { $implicit: rowData, col: col }\n \"></ng-container>\n }\n }\n </td>\n }\n\n @if (showRowActions()) {\n <td class=\"action-cell\"\n [attr.headers]=\"'actions-col'\"\n >\n <div class=\"button-cell\">\n @if (!rowData._editing) {\n <app-button (click)=\"startEdit(rowData, rowIndex)\"\n [iconPos]=\"'left'\"\n [icon]=\"'pi pi-pencil'\"\n [disabled]=\"rowData._editing\"\n ></app-button>\n }\n\n @if (rowData._editing) {\n <app-button (click)=\"confirmEdit(rowData)\"\n [iconPos]=\"'left'\"\n [icon]=\"'pi pi-check'\"\n ></app-button>\n <app-button\n (click)=\"cancelEdit(rowData)\"\n [iconPos]=\"'left'\"\n [icon]=\"'pi pi-times'\"\n ></app-button>\n }\n </div>\n </td>\n }\n </tr>\n </ng-template>\n\n <ng-template #customCell let-rowData=\"$implicit\" let-col=\"col\">\n @switch (col.type) {\n @case ('datetime') {\n <span>{{ rowData[col.field] | date:'dd-MM-yyyy HH:mm' }}</span>\n }\n @case ('date-mes') {\n <span>{{ rowData[col.field] | date:'MM-yyyy' }}</span>\n }\n @case ('date') {\n <span>{{ rowData[col.field] }}</span>\n }\n @case ('date-reverse') {\n <span>{{ rowData[col.field] | date:'YYYY-MM-DD' }}</span>\n }\n @case ('decimal') {\n <span>{{ rowData[col.field] }}</span>\n }\n @case ('icon') {\n @if (rowData[col.field] === showIconCondition()) {\n <div>\n <div class=\"tooltip-wrapper\">\n <em [class]=\"iconClass()\"\n [style]=\"{ color: iconColor() }\"></em>\n <span class=\"tooltip-text\">{{ rowData.ToolTipMsg || msgTooltip | translate }}</span>\n </div>\n </div>\n }\n }\n @case ('clickable') {\n <span class=\"clickable\" (click)=\"startEdit(rowData, col.rowIndex)\">{{ rowData[col.field] }}</span>\n }\n }\n </ng-template>\n\n <ng-template #defaultCell let-rowData=\"$implicit\" let-col=\"col\">\n @if (rowData !== null) {\n <span>{{ rowData[col.field] }}</span>\n }\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .app-input{height:1.9rem;color:#495057;width:100%;padding-left:.2rem;margin:-1rem 0rem -1rem -.3rem;background-color:#fff}:host::ng-deep .ui-inputtext{height:2.1rem;color:#495057;width:100%}:host::ng-deep .ui-inputtext:focus{border:1px solid rgb(135,220,55)!important;-webkit-box-shadow:0 0 0 .2rem rgba(72,126,22,.25)!important;box-shadow:0 0 0 .2rem #487e1640!important;outline:none!important}:host::ng-deep .ui-inputtext:hover{border:1px solid rgb(206,212,218)!important}:host::ng-deep .ui-inputtext[disabled]{background:#0000000d;border:1px solid rgba(0,0,0,.18);color:#000}:host ::ng-deep .custom-table{table-layout:auto;width:100%}:host ::ng-deep .custom-table .p-datatable-table-container{border:1px solid #dbe5f0;border-radius:1rem;overflow:hidden}:host ::ng-deep .custom-table .p-datatable-thead>tr>th{padding:.95rem 1rem;background:#f8fafc;border-color:#dbe5f0;color:#334155;font-size:.86rem;font-weight:700}:host ::ng-deep .custom-table .p-datatable-tbody>tr>td{padding:.95rem 1rem;background-color:#fff;border-color:#e2e8f0;color:#0f172a}:host ::ng-deep .custom-table .p-datatable-tbody>tr:nth-child(2n)>td{background:#f8fbff}:host ::ng-deep .custom-table .p-datatable-tbody>tr:hover>td{background:#eff6ff}:host ::ng-deep .custom-table th,:host ::ng-deep .custom-table td{white-space:normal;word-wrap:break-word;overflow-wrap:anywhere;min-width:100px}:host ::ng-deep .custom-table .p-datatable-table-container,:host ::ng-deep .custom-table .ui-table-scrollable-body{overflow-x:auto}.tooltip-wrapper{position:relative;display:inline-block}.tooltip-wrapper .tooltip-text{visibility:hidden;background-color:#0f172a;color:#fff;text-align:center;padding:.45rem .6rem;border-radius:.5rem;position:absolute;z-index:1;left:150%;top:50%;transform:translateY(-50%);white-space:nowrap;opacity:0;transition:opacity .3s}.tooltip-wrapper:hover .tooltip-text{visibility:visible;opacity:1}.action-col,.action-cell{width:7%;text-align:center;white-space:nowrap;background:inherit}.action-col .button-cell,.action-cell .button-cell{display:flex;justify-content:center;gap:.4rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host ::ng-deep .clickable{cursor:pointer;display:block;width:100%;color:#2563eb}:host ::ng-deep .custom-table .p-sortable-column-icon,:host ::ng-deep .custom-table .p-paginator,:host ::ng-deep .custom-table .p-paginator-page,:host ::ng-deep .custom-table .p-paginator-next,:host ::ng-deep .custom-table .p-paginator-prev,:host ::ng-deep .custom-table .p-paginator-first,:host ::ng-deep .custom-table .p-paginator-last{color:#475569}:host ::ng-deep .custom-table .p-paginator{border:none;padding-top:1rem;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$4.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i1$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i1$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["type", "className", "style", "label", "iconPos", "styleClass", "icon", "disabled", "rounded", "badgeSeverity", "size", "loading", "aria"] }, { kind: "component", type: FormFieldComponent, selector: "app-form-field", inputs: ["label", "required", "isInline", "showLabel", "field", "patternError", "submitted", "errorMessages", "controlId"] }, { kind: "component", type: BasicInputComponent, selector: "app-basic-input", inputs: ["placeholder", "labelType", "isDisabled", "type", "min", "max", "step", "readonly", "disabled", "autocomplete", "lang", "spellcheck", "inputId", "label", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaInvalid", "value", "touched"], outputs: ["valueChange", "touchedChange", "changed"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
413
465
|
}
|
|
414
466
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableComponent, decorators: [{
|
|
415
467
|
type: Component,
|
|
@@ -431,8 +483,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
431
483
|
args: ['customCellTemplate']
|
|
432
484
|
}] } });
|
|
433
485
|
|
|
486
|
+
let nextId$7 = 0;
|
|
434
487
|
class BasicSelectComponent {
|
|
435
488
|
constructor() {
|
|
489
|
+
this.formField = inject(FormFieldComponent, { optional: true });
|
|
490
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
491
|
+
this.inputId = input(`app-select-${++nextId$7}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
492
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
493
|
+
this.ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
|
|
494
|
+
this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
495
|
+
this.ariaInvalid = input(false, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
496
|
+
this.effectiveId = computed(() => this.formField?.controlId() ?? this.inputId(), ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
|
|
497
|
+
this.labelledBy = computed(() => this.formField?.labelledBy(this.ariaLabelledBy()) ?? this.ariaLabelledBy(), ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
|
|
498
|
+
this.inputAria = computed(() => ({
|
|
499
|
+
'aria-describedby': this.formField?.describedBy(this.ariaDescribedBy()) ?? this.ariaDescribedBy(),
|
|
500
|
+
'aria-invalid': this.formField ? this.formField.hasError() : this.ariaInvalid()
|
|
501
|
+
}), ...(ngDevMode ? [{ debugName: "inputAria" }] : /* istanbul ignore next */ []));
|
|
502
|
+
this.passThrough = computed(() => ({ label: this.inputAria() }), ...(ngDevMode ? [{ debugName: "passThrough" }] : /* istanbul ignore next */ []));
|
|
436
503
|
this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
|
|
437
504
|
this.class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : /* istanbul ignore next */ []));
|
|
438
505
|
this.disabledValue = input([], ...(ngDevMode ? [{ debugName: "disabledValue" }] : /* istanbul ignore next */ []));
|
|
@@ -451,11 +518,14 @@ class BasicSelectComponent {
|
|
|
451
518
|
this.changed = output();
|
|
452
519
|
this.showClearState = linkedSignal(() => this.showClear(), ...(ngDevMode ? [{ debugName: "showClearState" }] : /* istanbul ignore next */ []));
|
|
453
520
|
this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
521
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
454
522
|
this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
455
523
|
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
456
524
|
this.closed = output();
|
|
457
525
|
}
|
|
458
526
|
onChanged({ value }) {
|
|
527
|
+
if (this.isDisabled() || this.disabled() || this.readonly())
|
|
528
|
+
return;
|
|
459
529
|
this.value.set(value);
|
|
460
530
|
this.changed.emit(value);
|
|
461
531
|
}
|
|
@@ -464,7 +534,7 @@ class BasicSelectComponent {
|
|
|
464
534
|
this.closed.emit();
|
|
465
535
|
}
|
|
466
536
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BasicSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
467
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: BasicSelectComponent, isStandalone: true, selector: "app-basic-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabledValue: { classPropertyName: "disabledValue", publicName: "disabledValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, lengthTextSelected: { classPropertyName: "lengthTextSelected", publicName: "lengthTextSelected", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, emptyOption: { classPropertyName: "emptyOption", publicName: "emptyOption", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, withIcons: { classPropertyName: "withIcons", publicName: "withIcons", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, nullOrZero: { classPropertyName: "nullOrZero", publicName: "nullOrZero", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", value: "valueChange", touched: "touchedChange", closed: "closed" }, ngImport: i0, template: "<div class=\"select_wrapper\" [class.select_disabled]=\"isDisabled()\">\n <p-floatlabel>\n <p-select\n class=\"select\"\n [options]=\"items()\"\n [disabled]=\"isDisabled()\"\n [placeholder]=\"placeholder()\"\n [resetFilterOnHide]=\"resetFilterOnHide()\"\n [filter]=\"filter()\"\n [showClear]=\"showClearState()\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n [ngModel]=\"value()\"\n (onChange)=\"onChanged($event)\"\n (onBlur)=\"touched.set(true)\"\n (onHide)=\"onClosed()\">\n @if (showIcon()) {\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\">\n <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + value()\" style=\"width: 18px\" alt=\"\"/>\n <div>{{ selectedOption.name }}</div>\n </div>\n </ng-template>\n <ng-template let-country #item>\n <div class=\"flex items-center gap-2\">\n <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + country.code.toLowerCase()\" style=\"width: 18px\" alt=\"\"/>\n <div>{{ country.name }}</div>\n </div>\n </ng-template>\n }\n </p-select>\n <label [for]=\"
|
|
537
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: BasicSelectComponent, isStandalone: true, selector: "app-basic-select", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabledValue: { classPropertyName: "disabledValue", publicName: "disabledValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, lengthTextSelected: { classPropertyName: "lengthTextSelected", publicName: "lengthTextSelected", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, emptyOption: { classPropertyName: "emptyOption", publicName: "emptyOption", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, withIcons: { classPropertyName: "withIcons", publicName: "withIcons", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, nullOrZero: { classPropertyName: "nullOrZero", publicName: "nullOrZero", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", value: "valueChange", touched: "touchedChange", closed: "closed" }, ngImport: i0, template: "<div class=\"select_wrapper\" [class.select_disabled]=\"isDisabled() || disabled() || readonly()\">\n <p-floatlabel>\n <p-select\n class=\"select\"\n [options]=\"items()\"\n [disabled]=\"isDisabled() || disabled() || readonly()\"\n [readonly]=\"readonly()\"\n [inputId]=\"effectiveId()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"labelledBy()\"\n [pt]=\"passThrough()\"\n [placeholder]=\"placeholder()\"\n [resetFilterOnHide]=\"resetFilterOnHide()\"\n [filter]=\"filter()\"\n [showClear]=\"showClearState()\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n [ngModel]=\"value()\"\n (onChange)=\"onChanged($event)\"\n (onBlur)=\"touched.set(true)\"\n (onHide)=\"onClosed()\">\n @if (showIcon()) {\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\">\n <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + value()\" style=\"width: 18px\" alt=\"\"/>\n <div>{{ selectedOption.name }}</div>\n </div>\n </ng-template>\n <ng-template let-country #item>\n <div class=\"flex items-center gap-2\">\n <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + country.code.toLowerCase()\" style=\"width: 18px\" alt=\"\"/>\n <div>{{ country.name }}</div>\n </div>\n </ng-template>\n }\n </p-select>\n <label [for]=\"effectiveId()\">{{placeholder()}}</label>\n </p-floatlabel>\n</div>\n", styles: [".select_wrapper,.select_wrapper .select{width:100%}:host ::ng-deep .p-floatlabel{display:block}:host ::ng-deep .p-floatlabel label{color:#64748b}:host ::ng-deep .p-select{width:100%;min-height:2.75rem;border:1px solid #cbd5e1;border-radius:.85rem;background:#fff;box-shadow:none;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}:host ::ng-deep .p-select:hover{border-color:#93c5fd}:host ::ng-deep .p-select.p-focus{border-color:#3b82f6;box-shadow:0 0 0 .25rem #3b82f629}:host ::ng-deep .p-select-label{color:#0f172a}:host ::ng-deep .p-select-dropdown,:host ::ng-deep .p-select-clear-icon{color:#64748b}:host ::ng-deep .p-select.p-disabled{background:#f8fafc;border-color:#e2e8f0}\n"], dependencies: [{ kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
468
538
|
}
|
|
469
539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BasicSelectComponent, decorators: [{
|
|
470
540
|
type: Component,
|
|
@@ -472,11 +542,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
472
542
|
Select,
|
|
473
543
|
FormsModule,
|
|
474
544
|
FloatLabel
|
|
475
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select_wrapper\" [class.select_disabled]=\"isDisabled()\">\n <p-floatlabel>\n <p-select\n class=\"select\"\n [options]=\"items()\"\n [disabled]=\"isDisabled()\"\n [placeholder]=\"placeholder()\"\n [resetFilterOnHide]=\"resetFilterOnHide()\"\n [filter]=\"filter()\"\n [showClear]=\"showClearState()\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n [ngModel]=\"value()\"\n (onChange)=\"onChanged($event)\"\n (onBlur)=\"touched.set(true)\"\n (onHide)=\"onClosed()\">\n @if (showIcon()) {\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\">\n <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + value()\" style=\"width: 18px\" alt=\"\"/>\n <div>{{ selectedOption.name }}</div>\n </div>\n </ng-template>\n <ng-template let-country #item>\n <div class=\"flex items-center gap-2\">\n <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + country.code.toLowerCase()\" style=\"width: 18px\" alt=\"\"/>\n <div>{{ country.name }}</div>\n </div>\n </ng-template>\n }\n </p-select>\n <label [for]=\"
|
|
476
|
-
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], disabledValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], lengthTextSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "lengthTextSelected", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], emptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOption", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], withIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "withIcons", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], nullOrZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullOrZero", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
545
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select_wrapper\" [class.select_disabled]=\"isDisabled() || disabled() || readonly()\">\n <p-floatlabel>\n <p-select\n class=\"select\"\n [options]=\"items()\"\n [disabled]=\"isDisabled() || disabled() || readonly()\"\n [readonly]=\"readonly()\"\n [inputId]=\"effectiveId()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"labelledBy()\"\n [pt]=\"passThrough()\"\n [placeholder]=\"placeholder()\"\n [resetFilterOnHide]=\"resetFilterOnHide()\"\n [filter]=\"filter()\"\n [showClear]=\"showClearState()\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n [ngModel]=\"value()\"\n (onChange)=\"onChanged($event)\"\n (onBlur)=\"touched.set(true)\"\n (onHide)=\"onClosed()\">\n @if (showIcon()) {\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\">\n <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + value()\" style=\"width: 18px\" alt=\"\"/>\n <div>{{ selectedOption.name }}</div>\n </div>\n </ng-template>\n <ng-template let-country #item>\n <div class=\"flex items-center gap-2\">\n <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + country.code.toLowerCase()\" style=\"width: 18px\" alt=\"\"/>\n <div>{{ country.name }}</div>\n </div>\n </ng-template>\n }\n </p-select>\n <label [for]=\"effectiveId()\">{{placeholder()}}</label>\n </p-floatlabel>\n</div>\n", styles: [".select_wrapper,.select_wrapper .select{width:100%}:host ::ng-deep .p-floatlabel{display:block}:host ::ng-deep .p-floatlabel label{color:#64748b}:host ::ng-deep .p-select{width:100%;min-height:2.75rem;border:1px solid #cbd5e1;border-radius:.85rem;background:#fff;box-shadow:none;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}:host ::ng-deep .p-select:hover{border-color:#93c5fd}:host ::ng-deep .p-select.p-focus{border-color:#3b82f6;box-shadow:0 0 0 .25rem #3b82f629}:host ::ng-deep .p-select-label{color:#0f172a}:host ::ng-deep .p-select-dropdown,:host ::ng-deep .p-select-clear-icon{color:#64748b}:host ::ng-deep .p-select.p-disabled{background:#f8fafc;border-color:#e2e8f0}\n"] }]
|
|
546
|
+
}], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], disabledValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], lengthTextSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "lengthTextSelected", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], emptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOption", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], withIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "withIcons", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], nullOrZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullOrZero", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
477
547
|
|
|
548
|
+
let nextId$6 = 0;
|
|
478
549
|
class CheckboxComponent {
|
|
479
550
|
constructor() {
|
|
551
|
+
this.formField = inject(FormFieldComponent, { optional: true });
|
|
552
|
+
this.inputId = input(`app-checkbox-${++nextId$6}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
553
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
554
|
+
this.ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
|
|
555
|
+
this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
556
|
+
this.ariaInvalid = input(false, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
557
|
+
this.effectiveId = computed(() => this.formField?.controlId() ?? this.inputId(), ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
|
|
558
|
+
this.labelledBy = computed(() => this.formField?.labelledBy(this.ariaLabelledBy()) ?? this.ariaLabelledBy(), ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
|
|
559
|
+
this.inputAria = computed(() => ({
|
|
560
|
+
'aria-describedby': this.formField?.describedBy(this.ariaDescribedBy()) ?? this.ariaDescribedBy(),
|
|
561
|
+
'aria-invalid': this.formField ? this.formField.hasError() : this.ariaInvalid()
|
|
562
|
+
}), ...(ngDevMode ? [{ debugName: "inputAria" }] : /* istanbul ignore next */ []));
|
|
563
|
+
this.passThrough = computed(() => ({ input: this.inputAria() }), ...(ngDevMode ? [{ debugName: "passThrough" }] : /* istanbul ignore next */ []));
|
|
480
564
|
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
481
565
|
this.binary = input(true, ...(ngDevMode ? [{ debugName: "binary" }] : /* istanbul ignore next */ []));
|
|
482
566
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
@@ -493,25 +577,41 @@ class CheckboxComponent {
|
|
|
493
577
|
this.touched.set(true);
|
|
494
578
|
}
|
|
495
579
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
496
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: CheckboxComponent, isStandalone: true, selector: "app-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", changed: "changed" }, ngImport: i0, template: "<div class=\"checkbox-wrapper\">\n <p-checkbox\n [ngModel]=\"value()\"\n [binary]=\"binary()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (ngModelChange)=\"onValueChange($event)\"\n (onBlur)=\"onBlur()\"\n />\n @if (label()) {\n <label class=\"checkbox-label\">{{ label() }}</label>\n }\n</div>\n", styles: ["app-checkbox .checkbox-wrapper{display:flex;align-items:center;gap:8px}app-checkbox .checkbox-wrapper .checkbox-label{color:#334155;font-size:14px;cursor:pointer;-webkit-user-select:none;user-select:none}app-checkbox .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative}app-checkbox .p-checkbox-box{display:flex;align-items:center;justify-content:center;width:20px!important;height:20px!important;border:2px solid #cbd5e1!important;background:#fff!important;border-radius:4px!important;transition:all .2s!important;box-shadow:none!important;outline:none!important}app-checkbox .p-checkbox:not(.p-disabled):hover .p-checkbox-box{border-color:#1e40af!important;background:#f0f7ff!important}app-checkbox .p-checkbox-box.p-highlight{border-color:#1e40af!important;background:#1e40af!important}app-checkbox .p-checkbox:not(.p-disabled):hover .p-checkbox-box.p-highlight{border-color:#1e3a8a!important;background:#1e3a8a!important}app-checkbox .p-checkbox-box.p-focus{outline:2px solid #93c5fd!important;outline-offset:2px!important;box-shadow:none!important}app-checkbox .p-checkbox-icon{display:flex!important;align-items:center!important;justify-content:center!important;width:12px!important;height:12px!important;font-size:12px!important;color:#fff!important;transition:all .2s!important}app-checkbox .p-checkbox.p-disabled .p-checkbox-box{background:#f1f5f9!important;border-color:#e2e8f0!important;opacity:.6!important;cursor:not-allowed!important}app-checkbox .p-checkbox.p-disabled{cursor:not-allowed!important}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i1$
|
|
580
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: CheckboxComponent, isStandalone: true, selector: "app-checkbox", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", changed: "changed" }, ngImport: i0, template: "<div class=\"checkbox-wrapper\">\n <p-checkbox\n [ngModel]=\"value()\"\n [binary]=\"binary()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [inputId]=\"effectiveId()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"labelledBy()\"\n [pt]=\"passThrough()\"\n (ngModelChange)=\"onValueChange($event)\"\n (onBlur)=\"onBlur()\"\n />\n @if (label()) {\n <label class=\"checkbox-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n }\n</div>\n", styles: ["app-checkbox .checkbox-wrapper{display:flex;align-items:center;gap:8px}app-checkbox .checkbox-wrapper .checkbox-label{color:#334155;font-size:14px;cursor:pointer;-webkit-user-select:none;user-select:none}app-checkbox .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative}app-checkbox .p-checkbox-box{display:flex;align-items:center;justify-content:center;width:20px!important;height:20px!important;border:2px solid #cbd5e1!important;background:#fff!important;border-radius:4px!important;transition:all .2s!important;box-shadow:none!important;outline:none!important}app-checkbox .p-checkbox:not(.p-disabled):hover .p-checkbox-box{border-color:#1e40af!important;background:#f0f7ff!important}app-checkbox .p-checkbox-box.p-highlight{border-color:#1e40af!important;background:#1e40af!important}app-checkbox .p-checkbox:not(.p-disabled):hover .p-checkbox-box.p-highlight{border-color:#1e3a8a!important;background:#1e3a8a!important}app-checkbox .p-checkbox-box.p-focus{outline:2px solid #93c5fd!important;outline-offset:2px!important;box-shadow:none!important}app-checkbox .p-checkbox-icon{display:flex!important;align-items:center!important;justify-content:center!important;width:12px!important;height:12px!important;font-size:12px!important;color:#fff!important;transition:all .2s!important}app-checkbox .p-checkbox.p-disabled .p-checkbox-box{background:#f1f5f9!important;border-color:#e2e8f0!important;opacity:.6!important;cursor:not-allowed!important}app-checkbox .p-checkbox.p-disabled{cursor:not-allowed!important}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i1$5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
497
581
|
}
|
|
498
582
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
499
583
|
type: Component,
|
|
500
|
-
args: [{ selector: 'app-checkbox', standalone: true, imports: [CheckboxModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"checkbox-wrapper\">\n <p-checkbox\n [ngModel]=\"value()\"\n [binary]=\"binary()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (ngModelChange)=\"onValueChange($event)\"\n (onBlur)=\"onBlur()\"\n />\n @if (label()) {\n <label class=\"checkbox-label\">{{ label() }}</label>\n }\n</div>\n", styles: ["app-checkbox .checkbox-wrapper{display:flex;align-items:center;gap:8px}app-checkbox .checkbox-wrapper .checkbox-label{color:#334155;font-size:14px;cursor:pointer;-webkit-user-select:none;user-select:none}app-checkbox .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative}app-checkbox .p-checkbox-box{display:flex;align-items:center;justify-content:center;width:20px!important;height:20px!important;border:2px solid #cbd5e1!important;background:#fff!important;border-radius:4px!important;transition:all .2s!important;box-shadow:none!important;outline:none!important}app-checkbox .p-checkbox:not(.p-disabled):hover .p-checkbox-box{border-color:#1e40af!important;background:#f0f7ff!important}app-checkbox .p-checkbox-box.p-highlight{border-color:#1e40af!important;background:#1e40af!important}app-checkbox .p-checkbox:not(.p-disabled):hover .p-checkbox-box.p-highlight{border-color:#1e3a8a!important;background:#1e3a8a!important}app-checkbox .p-checkbox-box.p-focus{outline:2px solid #93c5fd!important;outline-offset:2px!important;box-shadow:none!important}app-checkbox .p-checkbox-icon{display:flex!important;align-items:center!important;justify-content:center!important;width:12px!important;height:12px!important;font-size:12px!important;color:#fff!important;transition:all .2s!important}app-checkbox .p-checkbox.p-disabled .p-checkbox-box{background:#f1f5f9!important;border-color:#e2e8f0!important;opacity:.6!important;cursor:not-allowed!important}app-checkbox .p-checkbox.p-disabled{cursor:not-allowed!important}\n"] }]
|
|
501
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], binary: [{ type: i0.Input, args: [{ isSignal: true, alias: "binary", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
584
|
+
args: [{ selector: 'app-checkbox', standalone: true, imports: [CheckboxModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"checkbox-wrapper\">\n <p-checkbox\n [ngModel]=\"value()\"\n [binary]=\"binary()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [inputId]=\"effectiveId()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"labelledBy()\"\n [pt]=\"passThrough()\"\n (ngModelChange)=\"onValueChange($event)\"\n (onBlur)=\"onBlur()\"\n />\n @if (label()) {\n <label class=\"checkbox-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n }\n</div>\n", styles: ["app-checkbox .checkbox-wrapper{display:flex;align-items:center;gap:8px}app-checkbox .checkbox-wrapper .checkbox-label{color:#334155;font-size:14px;cursor:pointer;-webkit-user-select:none;user-select:none}app-checkbox .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative}app-checkbox .p-checkbox-box{display:flex;align-items:center;justify-content:center;width:20px!important;height:20px!important;border:2px solid #cbd5e1!important;background:#fff!important;border-radius:4px!important;transition:all .2s!important;box-shadow:none!important;outline:none!important}app-checkbox .p-checkbox:not(.p-disabled):hover .p-checkbox-box{border-color:#1e40af!important;background:#f0f7ff!important}app-checkbox .p-checkbox-box.p-highlight{border-color:#1e40af!important;background:#1e40af!important}app-checkbox .p-checkbox:not(.p-disabled):hover .p-checkbox-box.p-highlight{border-color:#1e3a8a!important;background:#1e3a8a!important}app-checkbox .p-checkbox-box.p-focus{outline:2px solid #93c5fd!important;outline-offset:2px!important;box-shadow:none!important}app-checkbox .p-checkbox-icon{display:flex!important;align-items:center!important;justify-content:center!important;width:12px!important;height:12px!important;font-size:12px!important;color:#fff!important;transition:all .2s!important}app-checkbox .p-checkbox.p-disabled .p-checkbox-box{background:#f1f5f9!important;border-color:#e2e8f0!important;opacity:.6!important;cursor:not-allowed!important}app-checkbox .p-checkbox.p-disabled{cursor:not-allowed!important}\n"] }]
|
|
585
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], binary: [{ type: i0.Input, args: [{ isSignal: true, alias: "binary", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
502
586
|
|
|
587
|
+
let nextId$5 = 0;
|
|
503
588
|
class PasswordInputComponent {
|
|
504
589
|
constructor() {
|
|
590
|
+
this.formField = inject(FormFieldComponent, { optional: true });
|
|
591
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
592
|
+
this.inputId = input(`app-password-${++nextId$5}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
593
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
594
|
+
this.ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
|
|
595
|
+
this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
596
|
+
this.ariaInvalid = input(false, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
597
|
+
this.effectiveId = computed(() => this.formField?.controlId() ?? this.inputId(), ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
|
|
598
|
+
this.labelledBy = computed(() => this.formField?.labelledBy(this.ariaLabelledBy()) ?? this.ariaLabelledBy(), ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
|
|
599
|
+
this.inputAria = computed(() => ({
|
|
600
|
+
'aria-describedby': this.formField?.describedBy(this.ariaDescribedBy()) ?? this.ariaDescribedBy(),
|
|
601
|
+
'aria-invalid': this.formField ? this.formField.hasError() : this.ariaInvalid()
|
|
602
|
+
}), ...(ngDevMode ? [{ debugName: "inputAria" }] : /* istanbul ignore next */ []));
|
|
603
|
+
this.passThrough = computed(() => ({ pcInputText: { root: { ...this.inputAria(), readonly: this.readonly() ? '' : undefined } } }), ...(ngDevMode ? [{ debugName: "passThrough" }] : /* istanbul ignore next */ []));
|
|
505
604
|
this.placeholder = input("Input your password...", ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
506
605
|
this.labelType = input("in_label", ...(ngDevMode ? [{ debugName: "labelType" }] : /* istanbul ignore next */ []));
|
|
507
606
|
this.toggleMask = input(true, ...(ngDevMode ? [{ debugName: "toggleMask" }] : /* istanbul ignore next */ []));
|
|
508
607
|
this.feedback = input(false, ...(ngDevMode ? [{ debugName: "feedback" }] : /* istanbul ignore next */ []));
|
|
509
608
|
this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
609
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
510
610
|
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
511
611
|
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
512
612
|
this.changed = output();
|
|
513
613
|
}
|
|
514
|
-
|
|
614
|
+
onInput(event) {
|
|
515
615
|
const value = event.target.value;
|
|
516
616
|
this.value.set(value);
|
|
517
617
|
this.changed.emit(value);
|
|
@@ -520,7 +620,7 @@ class PasswordInputComponent {
|
|
|
520
620
|
this.touched.set(true);
|
|
521
621
|
}
|
|
522
622
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
523
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: PasswordInputComponent, isStandalone: true, selector: "app-password-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, toggleMask: { classPropertyName: "toggleMask", publicName: "toggleMask", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", changed: "changed" }, ngImport: i0, template: "<div class=\"password-wrapper\">\n <p-floatlabel>\n <p-password\n type=\"text\"\n class=\"password-input\"\n [disabled]=\"isDisabled()\"\n (
|
|
623
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: PasswordInputComponent, isStandalone: true, selector: "app-password-input", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, toggleMask: { classPropertyName: "toggleMask", publicName: "toggleMask", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", changed: "changed" }, ngImport: i0, template: "<div class=\"password-wrapper\">\n <p-floatlabel>\n <p-password\n type=\"text\"\n class=\"password-input\"\n [disabled]=\"isDisabled() || disabled()\"\n [pt]=\"passThrough()\"\n (input)=\"onInput($event)\"\n (onBlur)=\"onBlur()\"\n [inputId]=\"effectiveId()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"labelledBy()\"\n [ngModel]=\"value()\"\n [feedback]=\"feedback()\"\n [toggleMask]=\"toggleMask()\"\n />\n <label [for]=\"effectiveId()\">{{ placeholder() }}</label>\n </p-floatlabel>\n</div>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .p-password{display:block;position:relative;width:100%}:host-context(.form-field_error) .p-password-input{border-color:#dc2626!important}:host ::ng-deep .p-floatlabel{display:block}:host ::ng-deep .p-floatlabel label{color:#64748b}:host ::ng-deep .password-input .p-inputtext,:host ::ng-deep .password-input .p-password-input{min-height:2.75rem;border:1px solid #cbd5e1;border-radius:.85rem;background-color:#fff;color:#0f172a;width:100%;padding:.85rem 2.6rem .35rem .95rem;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}:host ::ng-deep .password-input .p-inputtext_disabled,:host ::ng-deep .password-input .p-password-input_disabled{background:#f8fafc;border:1px solid #e2e8f0;color:#94a3b8}:host ::ng-deep .password-input .p-inputtext:hover,:host ::ng-deep .password-input .p-password-input:hover{border-color:#93c5fd}:host ::ng-deep .password-input .p-inputtext:focus,:host ::ng-deep .password-input .p-password-input:focus,:host ::ng-deep .password-input .p-inputtext:focus-visible,:host ::ng-deep .password-input .p-password-input:focus-visible{border-color:#3b82f6;box-shadow:0 0 0 .25rem #3b82f629;outline:none}:host ::ng-deep .password-input .p-password-toggle-mask-icon{color:#64748b;right:.9rem}\n"], dependencies: [{ kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
524
624
|
}
|
|
525
625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
526
626
|
type: Component,
|
|
@@ -528,11 +628,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
528
628
|
FloatLabel,
|
|
529
629
|
Password,
|
|
530
630
|
FormsModule
|
|
531
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"password-wrapper\">\n <p-floatlabel>\n <p-password\n type=\"text\"\n class=\"password-input\"\n [disabled]=\"isDisabled()\"\n (
|
|
532
|
-
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], toggleMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleMask", required: false }] }], feedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedback", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
631
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"password-wrapper\">\n <p-floatlabel>\n <p-password\n type=\"text\"\n class=\"password-input\"\n [disabled]=\"isDisabled() || disabled()\"\n [pt]=\"passThrough()\"\n (input)=\"onInput($event)\"\n (onBlur)=\"onBlur()\"\n [inputId]=\"effectiveId()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledBy]=\"labelledBy()\"\n [ngModel]=\"value()\"\n [feedback]=\"feedback()\"\n [toggleMask]=\"toggleMask()\"\n />\n <label [for]=\"effectiveId()\">{{ placeholder() }}</label>\n </p-floatlabel>\n</div>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .p-password{display:block;position:relative;width:100%}:host-context(.form-field_error) .p-password-input{border-color:#dc2626!important}:host ::ng-deep .p-floatlabel{display:block}:host ::ng-deep .p-floatlabel label{color:#64748b}:host ::ng-deep .password-input .p-inputtext,:host ::ng-deep .password-input .p-password-input{min-height:2.75rem;border:1px solid #cbd5e1;border-radius:.85rem;background-color:#fff;color:#0f172a;width:100%;padding:.85rem 2.6rem .35rem .95rem;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}:host ::ng-deep .password-input .p-inputtext_disabled,:host ::ng-deep .password-input .p-password-input_disabled{background:#f8fafc;border:1px solid #e2e8f0;color:#94a3b8}:host ::ng-deep .password-input .p-inputtext:hover,:host ::ng-deep .password-input .p-password-input:hover{border-color:#93c5fd}:host ::ng-deep .password-input .p-inputtext:focus,:host ::ng-deep .password-input .p-password-input:focus,:host ::ng-deep .password-input .p-inputtext:focus-visible,:host ::ng-deep .password-input .p-password-input:focus-visible{border-color:#3b82f6;box-shadow:0 0 0 .25rem #3b82f629;outline:none}:host ::ng-deep .password-input .p-password-toggle-mask-icon{color:#64748b;right:.9rem}\n"] }]
|
|
632
|
+
}], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], toggleMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleMask", required: false }] }], feedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedback", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
533
633
|
|
|
634
|
+
let nextId$4 = 0;
|
|
534
635
|
class MultiSelectComponent {
|
|
535
636
|
constructor() {
|
|
637
|
+
this.formField = inject(FormFieldComponent, { optional: true });
|
|
638
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
639
|
+
this.inputId = input(`app-multiselect-${++nextId$4}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
640
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
641
|
+
this.ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
|
|
642
|
+
this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
643
|
+
this.ariaInvalid = input(false, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
644
|
+
this.effectiveId = computed(() => this.formField?.controlId() ?? this.inputId(), ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
|
|
645
|
+
this.labelledBy = computed(() => this.formField?.labelledBy(this.ariaLabelledBy()) ?? this.ariaLabelledBy(), ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
|
|
646
|
+
this.inputAria = computed(() => ({
|
|
647
|
+
'aria-describedby': this.formField?.describedBy(this.ariaDescribedBy()) ?? this.ariaDescribedBy(),
|
|
648
|
+
'aria-invalid': this.formField ? this.formField.hasError() : this.ariaInvalid()
|
|
649
|
+
}), ...(ngDevMode ? [{ debugName: "inputAria" }] : /* istanbul ignore next */ []));
|
|
650
|
+
// shortcut: PrimeNG 21 omits its runtime hiddenInput PT key from types; remove the extension when declared upstream.
|
|
651
|
+
this.passThrough = computed(() => ({ hiddenInput: this.inputAria() }), ...(ngDevMode ? [{ debugName: "passThrough" }] : /* istanbul ignore next */ []));
|
|
536
652
|
this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
537
653
|
this.disabledValue = input([], ...(ngDevMode ? [{ debugName: "disabledValue" }] : /* istanbul ignore next */ []));
|
|
538
654
|
this.placeholder = input("Select sum items...", ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
@@ -566,7 +682,7 @@ class MultiSelectComponent {
|
|
|
566
682
|
}
|
|
567
683
|
});
|
|
568
684
|
effect(() => {
|
|
569
|
-
if (this.disabled()) {
|
|
685
|
+
if (this.disabled() || this.readonly()) {
|
|
570
686
|
this.multiSelectControl.disable({ emitEvent: false });
|
|
571
687
|
return;
|
|
572
688
|
}
|
|
@@ -577,18 +693,358 @@ class MultiSelectComponent {
|
|
|
577
693
|
this.touched.set(true);
|
|
578
694
|
}
|
|
579
695
|
onChanged(event) {
|
|
696
|
+
if (this.disabled() || this.readonly())
|
|
697
|
+
return;
|
|
580
698
|
const nextValue = event.value ?? [];
|
|
581
699
|
this.multiSelectControl.setValue(nextValue, { emitEvent: false });
|
|
582
700
|
this.value.set(nextValue);
|
|
583
701
|
this.changed.emit(nextValue);
|
|
584
702
|
}
|
|
585
703
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
586
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MultiSelectComponent, isStandalone: true, selector: "app-multi-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, disabledValue: { classPropertyName: "disabledValue", publicName: "disabledValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, lengthTextSelected: { classPropertyName: "lengthTextSelected", publicName: "lengthTextSelected", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyOption: { classPropertyName: "emptyOption", publicName: "emptyOption", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, withIcons: { classPropertyName: "withIcons", publicName: "withIcons", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, nullOrZero: { classPropertyName: "nullOrZero", publicName: "nullOrZero", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<div class=\"multiselect\">\n <p-multiSelect\n [options]=\"items()\"\n [optionLabel]=\"'label'\"\n [optionValue]=\"'value'\"\n [panelStyle]=\"{minWidth:'12em'}\"\n [filter]=\"filter()\"\n [selectedItemsLabel]=\"selectedItems()\"\n [displaySelectedLabel]=\"displaySelectedLabel()\"\n [maxSelectedLabels]=\"maxSelectedLabels()\"\n [style]=\"style()\"\n [showClear]=\"showClear()\"\n [placeholder]=\"placeholder()\"\n [resetFilterOnHide]=\"resetFilterOnHide()\"\n [virtualScroll]=\"virtualScroll()\"\n [formControl]=\"multiSelectControl\"\n (onBlur)=\"onBlur()\"\n (onChange)=\"onChanged($event)\">\n <ng-template let-option #item>\n <div class=\"multiselect-option\">\n @if (showIcon() && option.icon?.src) {\n <img\n class=\"multiselect-option__icon\"\n [class]=\"option.icon?.cssClass\"\n [src]=\"option.icon?.src\"\n [alt]=\"option.label\"\n />\n }\n <span class=\"multiselect-option__label\">{{ option.label }}</span>\n </div>\n </ng-template>\n </p-multiSelect>\n</div>\n", styles: [".multiselect-option{display:inline-flex;align-items:center;gap:.5rem;min-width:0}.multiselect-option__icon{width:18px;height:14px;object-fit:contain;flex:0 0 auto}.multiselect-option__label{min-width:0;line-height:1.2}\n"], dependencies: [{ kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
704
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MultiSelectComponent, isStandalone: true, selector: "app-multi-select", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, disabledValue: { classPropertyName: "disabledValue", publicName: "disabledValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, lengthTextSelected: { classPropertyName: "lengthTextSelected", publicName: "lengthTextSelected", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyOption: { classPropertyName: "emptyOption", publicName: "emptyOption", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, withIcons: { classPropertyName: "withIcons", publicName: "withIcons", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, nullOrZero: { classPropertyName: "nullOrZero", publicName: "nullOrZero", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<div class=\"multiselect\">\n <p-multiSelect\n [inputId]=\"effectiveId()\"\n [readonly]=\"readonly()\"\n [ariaLabel]=\"ariaLabel() || placeholder()\"\n [ariaLabelledBy]=\"labelledBy()\"\n [pt]=\"passThrough()\"\n [options]=\"items()\"\n [optionLabel]=\"'label'\"\n [optionValue]=\"'value'\"\n [panelStyle]=\"{minWidth:'12em'}\"\n [filter]=\"filter()\"\n [selectedItemsLabel]=\"selectedItems()\"\n [displaySelectedLabel]=\"displaySelectedLabel()\"\n [maxSelectedLabels]=\"maxSelectedLabels()\"\n [style]=\"style()\"\n [showClear]=\"showClear()\"\n [placeholder]=\"placeholder()\"\n [resetFilterOnHide]=\"resetFilterOnHide()\"\n [virtualScroll]=\"virtualScroll()\"\n [formControl]=\"multiSelectControl\"\n (onBlur)=\"onBlur()\"\n (onChange)=\"onChanged($event)\">\n <ng-template let-option #item>\n <div class=\"multiselect-option\">\n @if (showIcon() && option.icon?.src) {\n <img\n class=\"multiselect-option__icon\"\n [class]=\"option.icon?.cssClass\"\n [src]=\"option.icon?.src\"\n [alt]=\"option.label\"\n />\n }\n <span class=\"multiselect-option__label\">{{ option.label }}</span>\n </div>\n </ng-template>\n </p-multiSelect>\n</div>\n", styles: [".multiselect-option{display:inline-flex;align-items:center;gap:.5rem;min-width:0}.multiselect-option__icon{width:18px;height:14px;object-fit:contain;flex:0 0 auto}.multiselect-option__label{min-width:0;line-height:1.2}\n"], dependencies: [{ kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
587
705
|
}
|
|
588
706
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
589
707
|
type: Component,
|
|
590
|
-
args: [{ selector: 'app-multi-select', standalone: true, imports: [MultiSelect, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"multiselect\">\n <p-multiSelect\n [options]=\"items()\"\n [optionLabel]=\"'label'\"\n [optionValue]=\"'value'\"\n [panelStyle]=\"{minWidth:'12em'}\"\n [filter]=\"filter()\"\n [selectedItemsLabel]=\"selectedItems()\"\n [displaySelectedLabel]=\"displaySelectedLabel()\"\n [maxSelectedLabels]=\"maxSelectedLabels()\"\n [style]=\"style()\"\n [showClear]=\"showClear()\"\n [placeholder]=\"placeholder()\"\n [resetFilterOnHide]=\"resetFilterOnHide()\"\n [virtualScroll]=\"virtualScroll()\"\n [formControl]=\"multiSelectControl\"\n (onBlur)=\"onBlur()\"\n (onChange)=\"onChanged($event)\">\n <ng-template let-option #item>\n <div class=\"multiselect-option\">\n @if (showIcon() && option.icon?.src) {\n <img\n class=\"multiselect-option__icon\"\n [class]=\"option.icon?.cssClass\"\n [src]=\"option.icon?.src\"\n [alt]=\"option.label\"\n />\n }\n <span class=\"multiselect-option__label\">{{ option.label }}</span>\n </div>\n </ng-template>\n </p-multiSelect>\n</div>\n", styles: [".multiselect-option{display:inline-flex;align-items:center;gap:.5rem;min-width:0}.multiselect-option__icon{width:18px;height:14px;object-fit:contain;flex:0 0 auto}.multiselect-option__label{min-width:0;line-height:1.2}\n"] }]
|
|
591
|
-
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabledValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], lengthTextSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "lengthTextSelected", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], displaySelectedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "displaySelectedLabel", required: false }] }], emptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOption", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], withIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "withIcons", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], nullOrZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullOrZero", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }] } });
|
|
708
|
+
args: [{ selector: 'app-multi-select', standalone: true, imports: [MultiSelect, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"multiselect\">\n <p-multiSelect\n [inputId]=\"effectiveId()\"\n [readonly]=\"readonly()\"\n [ariaLabel]=\"ariaLabel() || placeholder()\"\n [ariaLabelledBy]=\"labelledBy()\"\n [pt]=\"passThrough()\"\n [options]=\"items()\"\n [optionLabel]=\"'label'\"\n [optionValue]=\"'value'\"\n [panelStyle]=\"{minWidth:'12em'}\"\n [filter]=\"filter()\"\n [selectedItemsLabel]=\"selectedItems()\"\n [displaySelectedLabel]=\"displaySelectedLabel()\"\n [maxSelectedLabels]=\"maxSelectedLabels()\"\n [style]=\"style()\"\n [showClear]=\"showClear()\"\n [placeholder]=\"placeholder()\"\n [resetFilterOnHide]=\"resetFilterOnHide()\"\n [virtualScroll]=\"virtualScroll()\"\n [formControl]=\"multiSelectControl\"\n (onBlur)=\"onBlur()\"\n (onChange)=\"onChanged($event)\">\n <ng-template let-option #item>\n <div class=\"multiselect-option\">\n @if (showIcon() && option.icon?.src) {\n <img\n class=\"multiselect-option__icon\"\n [class]=\"option.icon?.cssClass\"\n [src]=\"option.icon?.src\"\n [alt]=\"option.label\"\n />\n }\n <span class=\"multiselect-option__label\">{{ option.label }}</span>\n </div>\n </ng-template>\n </p-multiSelect>\n</div>\n", styles: [".multiselect-option{display:inline-flex;align-items:center;gap:.5rem;min-width:0}.multiselect-option__icon{width:18px;height:14px;object-fit:contain;flex:0 0 auto}.multiselect-option__label{min-width:0;line-height:1.2}\n"] }]
|
|
709
|
+
}], ctorParameters: () => [], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabledValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], lengthTextSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "lengthTextSelected", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], displaySelectedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "displaySelectedLabel", required: false }] }], emptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOption", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], withIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "withIcons", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], nullOrZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullOrZero", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }] } });
|
|
710
|
+
|
|
711
|
+
let nextId$3 = 0;
|
|
712
|
+
class TextareaComponent {
|
|
713
|
+
constructor() {
|
|
714
|
+
this.control = viewChild('control', ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
|
|
715
|
+
this.field = inject(FormFieldComponent, { optional: true });
|
|
716
|
+
this.inputId = input(`app-textarea-${nextId$3++}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
717
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
718
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
719
|
+
this.ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
|
|
720
|
+
this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
721
|
+
this.ariaInvalid = input(false, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
722
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
723
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
724
|
+
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
725
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
726
|
+
this.changed = output();
|
|
727
|
+
this.rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
728
|
+
this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
729
|
+
this.maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
730
|
+
this.id = computed(() => this.field?.controlId() ?? this.inputId(), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
731
|
+
this.labelledBy = computed(() => this.field?.labelledBy(this.ariaLabelledBy()) ?? this.ariaLabelledBy(), ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
|
|
732
|
+
this.describedBy = computed(() => this.field?.describedBy(this.ariaDescribedBy()) ?? this.ariaDescribedBy(), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
733
|
+
this.effectiveInvalid = computed(() => this.field ? this.field.hasError() : this.ariaInvalid(), ...(ngDevMode ? [{ debugName: "effectiveInvalid" }] : /* istanbul ignore next */ []));
|
|
734
|
+
}
|
|
735
|
+
onValueChange(value) {
|
|
736
|
+
if (this.disabled() || this.readonly())
|
|
737
|
+
return;
|
|
738
|
+
this.value.set(value);
|
|
739
|
+
this.changed.emit(value);
|
|
740
|
+
}
|
|
741
|
+
focus(options) {
|
|
742
|
+
this.control()?.nativeElement.focus(options);
|
|
743
|
+
}
|
|
744
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
745
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TextareaComponent, isStandalone: true, selector: "app-textarea", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", changed: "changed" }, viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }], ngImport: i0, template: `@if (label()) { <label [for]="id()">{{ label() }}</label> }
|
|
746
|
+
<textarea #control pTextarea [id]="id()" [value]="value()" [rows]="rows()" [placeholder]="placeholder()"
|
|
747
|
+
[attr.maxlength]="maxLength()" [disabled]="disabled()" [readOnly]="readonly()"
|
|
748
|
+
[attr.aria-label]="ariaLabel()" [attr.aria-labelledby]="labelledBy()"
|
|
749
|
+
[attr.aria-describedby]="describedBy()" [attr.aria-invalid]="effectiveInvalid()"
|
|
750
|
+
(input)="onValueChange($any($event.target).value)" (blur)="touched.set(true)"></textarea>`, isInline: true, styles: [":host{display:block}textarea{width:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i1$6.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
751
|
+
}
|
|
752
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
753
|
+
type: Component,
|
|
754
|
+
args: [{ selector: 'app-textarea', standalone: true, imports: [TextareaModule], template: `@if (label()) { <label [for]="id()">{{ label() }}</label> }
|
|
755
|
+
<textarea #control pTextarea [id]="id()" [value]="value()" [rows]="rows()" [placeholder]="placeholder()"
|
|
756
|
+
[attr.maxlength]="maxLength()" [disabled]="disabled()" [readOnly]="readonly()"
|
|
757
|
+
[attr.aria-label]="ariaLabel()" [attr.aria-labelledby]="labelledBy()"
|
|
758
|
+
[attr.aria-describedby]="describedBy()" [attr.aria-invalid]="effectiveInvalid()"
|
|
759
|
+
(input)="onValueChange($any($event.target).value)" (blur)="touched.set(true)"></textarea>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}textarea{width:100%;box-sizing:border-box}\n"] }]
|
|
760
|
+
}], propDecorators: { control: [{ type: i0.ViewChild, args: ['control', { isSignal: true }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
|
|
761
|
+
|
|
762
|
+
let nextId$2 = 0;
|
|
763
|
+
class FilePickerComponent {
|
|
764
|
+
constructor() {
|
|
765
|
+
this.field = inject(FormFieldComponent, { optional: true });
|
|
766
|
+
this.picker = viewChild('picker', ...(ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []));
|
|
767
|
+
this.inputId = input(`app-file-picker-${nextId$2++}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
768
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
769
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
770
|
+
this.ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
|
|
771
|
+
this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
772
|
+
this.ariaInvalid = input(false, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
773
|
+
this.accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
774
|
+
this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
775
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
776
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
777
|
+
this.value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
778
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
779
|
+
this.changed = output();
|
|
780
|
+
this.id = computed(() => this.field?.controlId() ?? this.inputId(), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
781
|
+
this.labelledBy = computed(() => this.field?.labelledBy(this.ariaLabelledBy()) ?? this.ariaLabelledBy(), ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
|
|
782
|
+
this.describedBy = computed(() => this.field?.describedBy(this.ariaDescribedBy()) ?? this.ariaDescribedBy(), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
783
|
+
this.effectiveInvalid = computed(() => this.field ? this.field.hasError() : this.ariaInvalid(), ...(ngDevMode ? [{ debugName: "effectiveInvalid" }] : /* istanbul ignore next */ []));
|
|
784
|
+
effect(() => {
|
|
785
|
+
const picker = this.picker();
|
|
786
|
+
if (!this.value().length && picker)
|
|
787
|
+
picker.nativeElement.value = '';
|
|
788
|
+
});
|
|
789
|
+
}
|
|
790
|
+
onFileChange(event) {
|
|
791
|
+
if (this.disabled() || this.readonly())
|
|
792
|
+
return;
|
|
793
|
+
const files = event.target.files;
|
|
794
|
+
if (!files?.length)
|
|
795
|
+
return;
|
|
796
|
+
this.setFiles(Array.from(files));
|
|
797
|
+
}
|
|
798
|
+
clear() {
|
|
799
|
+
if (this.disabled() || this.readonly())
|
|
800
|
+
return;
|
|
801
|
+
const picker = this.picker();
|
|
802
|
+
if (picker)
|
|
803
|
+
picker.nativeElement.value = '';
|
|
804
|
+
this.setFiles([]);
|
|
805
|
+
this.touched.set(true);
|
|
806
|
+
}
|
|
807
|
+
focus(options) {
|
|
808
|
+
this.picker()?.nativeElement.focus(options);
|
|
809
|
+
}
|
|
810
|
+
setFiles(files) {
|
|
811
|
+
this.value.set(files);
|
|
812
|
+
this.changed.emit(files);
|
|
813
|
+
}
|
|
814
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FilePickerComponent, isStandalone: true, selector: "app-file-picker", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", changed: "changed" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
816
|
+
@if (label()) { <label [for]="id()">{{ label() }}</label> }
|
|
817
|
+
<input #picker type="file" [id]="id()" [accept]="accept()" [multiple]="multiple()"
|
|
818
|
+
[disabled]="disabled() || readonly()" [attr.aria-readonly]="readonly()"
|
|
819
|
+
[attr.aria-label]="ariaLabel()" [attr.aria-labelledby]="labelledBy()"
|
|
820
|
+
[attr.aria-describedby]="describedBy()" [attr.aria-invalid]="effectiveInvalid()"
|
|
821
|
+
(change)="onFileChange($event)" (blur)="touched.set(true)" />
|
|
822
|
+
@if (value().length) {
|
|
823
|
+
<ul>@for (file of value(); track $index) { <li>{{ file.name }}</li> }</ul>
|
|
824
|
+
<app-button label="Clear files" [disabled]="disabled() || readonly()" (click)="clear()" />
|
|
825
|
+
}
|
|
826
|
+
`, isInline: true, styles: [":host{display:block}label{display:block}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["type", "className", "style", "label", "iconPos", "styleClass", "icon", "disabled", "rounded", "badgeSeverity", "size", "loading", "aria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
827
|
+
}
|
|
828
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FilePickerComponent, decorators: [{
|
|
829
|
+
type: Component,
|
|
830
|
+
args: [{ selector: 'app-file-picker', standalone: true, imports: [ButtonComponent], template: `
|
|
831
|
+
@if (label()) { <label [for]="id()">{{ label() }}</label> }
|
|
832
|
+
<input #picker type="file" [id]="id()" [accept]="accept()" [multiple]="multiple()"
|
|
833
|
+
[disabled]="disabled() || readonly()" [attr.aria-readonly]="readonly()"
|
|
834
|
+
[attr.aria-label]="ariaLabel()" [attr.aria-labelledby]="labelledBy()"
|
|
835
|
+
[attr.aria-describedby]="describedBy()" [attr.aria-invalid]="effectiveInvalid()"
|
|
836
|
+
(change)="onFileChange($event)" (blur)="touched.set(true)" />
|
|
837
|
+
@if (value().length) {
|
|
838
|
+
<ul>@for (file of value(); track $index) { <li>{{ file.name }}</li> }</ul>
|
|
839
|
+
<app-button label="Clear files" [disabled]="disabled() || readonly()" (click)="clear()" />
|
|
840
|
+
}
|
|
841
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}label{display:block}\n"] }]
|
|
842
|
+
}], ctorParameters: () => [], propDecorators: { picker: [{ type: i0.ViewChild, args: ['picker', { isSignal: true }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
843
|
+
|
|
844
|
+
let nextId$1 = 0;
|
|
845
|
+
class ToggleComponent {
|
|
846
|
+
constructor() {
|
|
847
|
+
this.control = viewChild(ToggleSwitch, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
|
|
848
|
+
this.field = inject(FormFieldComponent, { optional: true });
|
|
849
|
+
this.inputId = input(`app-toggle-${nextId$1++}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
850
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
851
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
852
|
+
this.ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
|
|
853
|
+
this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
854
|
+
this.ariaInvalid = input(false, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
855
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
856
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
857
|
+
this.value = model(false, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
858
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
859
|
+
this.changed = output();
|
|
860
|
+
this.id = computed(() => this.field?.controlId() ?? this.inputId(), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
861
|
+
this.labelledBy = computed(() => this.field?.labelledBy(this.ariaLabelledBy()) ?? this.ariaLabelledBy(), ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
|
|
862
|
+
this.describedBy = computed(() => this.field?.describedBy(this.ariaDescribedBy()) ?? this.ariaDescribedBy(), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
863
|
+
this.effectiveInvalid = computed(() => this.field ? this.field.hasError() : this.ariaInvalid(), ...(ngDevMode ? [{ debugName: "effectiveInvalid" }] : /* istanbul ignore next */ []));
|
|
864
|
+
}
|
|
865
|
+
onValueChange(value) {
|
|
866
|
+
if (this.disabled() || this.readonly())
|
|
867
|
+
return;
|
|
868
|
+
this.value.set(value);
|
|
869
|
+
this.changed.emit(value);
|
|
870
|
+
}
|
|
871
|
+
focus(options) {
|
|
872
|
+
this.control()?.input.nativeElement.focus(options);
|
|
873
|
+
}
|
|
874
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
875
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ToggleComponent, isStandalone: true, selector: "app-toggle", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", changed: "changed" }, viewQueries: [{ propertyName: "control", first: true, predicate: ToggleSwitch, descendants: true, isSignal: true }], ngImport: i0, template: `<p-toggleswitch [inputId]="id()" [ngModel]="value()" [disabled]="disabled() || readonly()" [readonly]="readonly()"
|
|
876
|
+
[ariaLabel]="ariaLabel()" [ariaLabelledBy]="labelledBy()"
|
|
877
|
+
[pt]="{ input: { 'aria-describedby': describedBy(), 'aria-invalid': effectiveInvalid(), 'aria-readonly': readonly() } }"
|
|
878
|
+
(ngModelChange)="onValueChange($event)" (focusout)="touched.set(true)" />
|
|
879
|
+
@if (label()) { <label [for]="id()">{{ label() }}</label> }`, isInline: true, styles: [":host{display:inline-flex;align-items:center;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i2$2.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
880
|
+
}
|
|
881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
882
|
+
type: Component,
|
|
883
|
+
args: [{ selector: 'app-toggle', standalone: true, imports: [FormsModule, ToggleSwitchModule], template: `<p-toggleswitch [inputId]="id()" [ngModel]="value()" [disabled]="disabled() || readonly()" [readonly]="readonly()"
|
|
884
|
+
[ariaLabel]="ariaLabel()" [ariaLabelledBy]="labelledBy()"
|
|
885
|
+
[pt]="{ input: { 'aria-describedby': describedBy(), 'aria-invalid': effectiveInvalid(), 'aria-readonly': readonly() } }"
|
|
886
|
+
(ngModelChange)="onValueChange($event)" (focusout)="touched.set(true)" />
|
|
887
|
+
@if (label()) { <label [for]="id()">{{ label() }}</label> }`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;align-items:center;gap:.5rem}\n"] }]
|
|
888
|
+
}], propDecorators: { control: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ToggleSwitch), { isSignal: true }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
889
|
+
|
|
890
|
+
let nextId = 0;
|
|
891
|
+
class SegmentedControlComponent {
|
|
892
|
+
constructor() {
|
|
893
|
+
this.control = viewChild('control', { ...(ngDevMode ? { debugName: "control" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
894
|
+
this.field = inject(FormFieldComponent, { optional: true });
|
|
895
|
+
this.itemTemplate = contentChild('item', ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
|
|
896
|
+
this.inputId = input(`app-segmented-control-${nextId++}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
897
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
898
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
899
|
+
this.ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
|
|
900
|
+
this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
901
|
+
this.ariaInvalid = input(false, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
902
|
+
this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
903
|
+
this.allowEmpty = input(false, ...(ngDevMode ? [{ debugName: "allowEmpty" }] : /* istanbul ignore next */ []));
|
|
904
|
+
this.variant = input('segments', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
905
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
906
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
907
|
+
this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
908
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
909
|
+
this.changed = output();
|
|
910
|
+
this.id = computed(() => this.field?.controlId() ?? this.inputId(), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
911
|
+
this.labelledBy = computed(() => this.field?.labelledBy(this.ariaLabelledBy())
|
|
912
|
+
?? this.ariaLabelledBy() ?? (this.label() ? this.id() + '-group-label' : undefined), ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
|
|
913
|
+
this.describedBy = computed(() => this.field?.describedBy(this.ariaDescribedBy()) ?? this.ariaDescribedBy(), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
914
|
+
this.effectiveInvalid = computed(() => this.field ? this.field.hasError() : this.ariaInvalid(), ...(ngDevMode ? [{ debugName: "effectiveInvalid" }] : /* istanbul ignore next */ []));
|
|
915
|
+
}
|
|
916
|
+
onValueChange(value) {
|
|
917
|
+
if (this.disabled() || this.readonly())
|
|
918
|
+
return;
|
|
919
|
+
this.value.set(value);
|
|
920
|
+
this.changed.emit(value);
|
|
921
|
+
}
|
|
922
|
+
onFocusOut(event) {
|
|
923
|
+
const group = event.currentTarget;
|
|
924
|
+
if (!group.contains(event.relatedTarget))
|
|
925
|
+
this.touched.set(true);
|
|
926
|
+
}
|
|
927
|
+
focus(options) {
|
|
928
|
+
const group = this.control()?.nativeElement;
|
|
929
|
+
const selected = group?.querySelector('[role="button"][aria-pressed="true"]:not([aria-disabled="true"])');
|
|
930
|
+
(selected ?? group?.querySelector('[role="button"]:not([aria-disabled="true"])'))?.focus(options);
|
|
931
|
+
}
|
|
932
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
933
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SegmentedControlComponent, isStandalone: true, selector: "app-segmented-control", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", changed: "changed" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
|
|
934
|
+
@if (label()) { <span [id]="id() + '-group-label'">{{ label() }}</span> }
|
|
935
|
+
<p-selectbutton #control [options]="items()" optionLabel="label" optionValue="value" [ngModel]="value()"
|
|
936
|
+
[multiple]="false" [allowEmpty]="allowEmpty()" [disabled]="disabled() || readonly()"
|
|
937
|
+
[ariaLabelledBy]="labelledBy()" [pt]="{ root: { id: id(), 'aria-label': ariaLabel(),
|
|
938
|
+
'aria-describedby': describedBy(), 'aria-invalid': effectiveInvalid(), 'aria-readonly': readonly() },
|
|
939
|
+
pcToggleButton: { root: { 'aria-describedby': describedBy(), 'aria-invalid': effectiveInvalid(),
|
|
940
|
+
'aria-disabled': disabled() || readonly() } } }"
|
|
941
|
+
[class.cards]="variant() === 'cards'" (ngModelChange)="onValueChange($event)"
|
|
942
|
+
(focusout)="onFocusOut($event)">
|
|
943
|
+
<ng-template #item let-item>
|
|
944
|
+
@if (itemTemplate(); as template) {
|
|
945
|
+
<ng-container [ngTemplateOutlet]="template"
|
|
946
|
+
[ngTemplateOutletContext]="{ $implicit: item, selected: value() === item.value }" />
|
|
947
|
+
} @else { {{ item.label }} }
|
|
948
|
+
</ng-template>
|
|
949
|
+
</p-selectbutton>
|
|
950
|
+
`, isInline: true, styles: [":host{display:block}:host ::ng-deep .cards{display:flex;gap:.75rem;flex-wrap:wrap}:host ::ng-deep .cards .p-togglebutton{border-radius:var(--p-togglebutton-border-radius, .5rem);padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
951
|
+
}
|
|
952
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
953
|
+
type: Component,
|
|
954
|
+
args: [{ selector: 'app-segmented-control', standalone: true, imports: [FormsModule, SelectButtonModule, NgTemplateOutlet], template: `
|
|
955
|
+
@if (label()) { <span [id]="id() + '-group-label'">{{ label() }}</span> }
|
|
956
|
+
<p-selectbutton #control [options]="items()" optionLabel="label" optionValue="value" [ngModel]="value()"
|
|
957
|
+
[multiple]="false" [allowEmpty]="allowEmpty()" [disabled]="disabled() || readonly()"
|
|
958
|
+
[ariaLabelledBy]="labelledBy()" [pt]="{ root: { id: id(), 'aria-label': ariaLabel(),
|
|
959
|
+
'aria-describedby': describedBy(), 'aria-invalid': effectiveInvalid(), 'aria-readonly': readonly() },
|
|
960
|
+
pcToggleButton: { root: { 'aria-describedby': describedBy(), 'aria-invalid': effectiveInvalid(),
|
|
961
|
+
'aria-disabled': disabled() || readonly() } } }"
|
|
962
|
+
[class.cards]="variant() === 'cards'" (ngModelChange)="onValueChange($event)"
|
|
963
|
+
(focusout)="onFocusOut($event)">
|
|
964
|
+
<ng-template #item let-item>
|
|
965
|
+
@if (itemTemplate(); as template) {
|
|
966
|
+
<ng-container [ngTemplateOutlet]="template"
|
|
967
|
+
[ngTemplateOutletContext]="{ $implicit: item, selected: value() === item.value }" />
|
|
968
|
+
} @else { {{ item.label }} }
|
|
969
|
+
</ng-template>
|
|
970
|
+
</p-selectbutton>
|
|
971
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host ::ng-deep .cards{display:flex;gap:.75rem;flex-wrap:wrap}:host ::ng-deep .cards .p-togglebutton{border-radius:var(--p-togglebutton-border-radius, .5rem);padding:1rem}\n"] }]
|
|
972
|
+
}], propDecorators: { control: [{ type: i0.ViewChild, args: ['control', { ...{ read: ElementRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
973
|
+
|
|
974
|
+
class DialogComponent {
|
|
975
|
+
constructor() {
|
|
976
|
+
this.document = inject(DOCUMENT);
|
|
977
|
+
this.opener = null;
|
|
978
|
+
this.visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
979
|
+
this.header = input('', ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
|
|
980
|
+
effect(() => {
|
|
981
|
+
if (this.visible())
|
|
982
|
+
this.opener = this.document.activeElement;
|
|
983
|
+
});
|
|
984
|
+
}
|
|
985
|
+
restoreFocus() {
|
|
986
|
+
if (this.opener?.isConnected)
|
|
987
|
+
this.opener.focus();
|
|
988
|
+
this.opener = null;
|
|
989
|
+
}
|
|
990
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
991
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: DialogComponent, isStandalone: true, selector: "app-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, ngImport: i0, template: `
|
|
992
|
+
<p-dialog [visible]="visible()" (visibleChange)="visible.set($event)" [header]="header()"
|
|
993
|
+
[modal]="true" [closeOnEscape]="true" [closable]="true" [dismissableMask]="false"
|
|
994
|
+
[draggable]="false" [resizable]="false" [focusTrap]="true" (onHide)="restoreFocus()">
|
|
995
|
+
<ng-content />
|
|
996
|
+
<ng-template #footer><ng-content select="[dialogActions]" /></ng-template>
|
|
997
|
+
</p-dialog>
|
|
998
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$7.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
999
|
+
}
|
|
1000
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DialogComponent, decorators: [{
|
|
1001
|
+
type: Component,
|
|
1002
|
+
args: [{
|
|
1003
|
+
selector: 'app-dialog',
|
|
1004
|
+
standalone: true,
|
|
1005
|
+
imports: [DialogModule],
|
|
1006
|
+
template: `
|
|
1007
|
+
<p-dialog [visible]="visible()" (visibleChange)="visible.set($event)" [header]="header()"
|
|
1008
|
+
[modal]="true" [closeOnEscape]="true" [closable]="true" [dismissableMask]="false"
|
|
1009
|
+
[draggable]="false" [resizable]="false" [focusTrap]="true" (onHide)="restoreFocus()">
|
|
1010
|
+
<ng-content />
|
|
1011
|
+
<ng-template #footer><ng-content select="[dialogActions]" /></ng-template>
|
|
1012
|
+
</p-dialog>
|
|
1013
|
+
`,
|
|
1014
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1015
|
+
}]
|
|
1016
|
+
}], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }] } });
|
|
1017
|
+
|
|
1018
|
+
class PaginationComponent {
|
|
1019
|
+
constructor() {
|
|
1020
|
+
this.first = model(0, ...(ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []));
|
|
1021
|
+
this.rows = model(10, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
1022
|
+
this.totalRecords = input(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
|
|
1023
|
+
this.rowsPerPageOptions = input(...(ngDevMode ? [undefined, { debugName: "rowsPerPageOptions" }] : /* istanbul ignore next */ []));
|
|
1024
|
+
this.pageChange = output();
|
|
1025
|
+
}
|
|
1026
|
+
onPageChange(event) {
|
|
1027
|
+
if (event.first !== undefined)
|
|
1028
|
+
this.first.set(event.first);
|
|
1029
|
+
if (event.rows !== undefined)
|
|
1030
|
+
this.rows.set(event.rows);
|
|
1031
|
+
this.pageChange.emit(event);
|
|
1032
|
+
}
|
|
1033
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1034
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: PaginationComponent, isStandalone: true, selector: "app-pagination", inputs: { first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { first: "firstChange", rows: "rowsChange", pageChange: "pageChange" }, ngImport: i0, template: `<p-paginator [first]="first()" [rows]="rows()" [totalRecords]="totalRecords()"
|
|
1035
|
+
[rowsPerPageOptions]="rowsPerPageOptions()" (onPageChange)="onPageChange($event)" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$8.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1036
|
+
}
|
|
1037
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1038
|
+
type: Component,
|
|
1039
|
+
args: [{
|
|
1040
|
+
selector: 'app-pagination',
|
|
1041
|
+
standalone: true,
|
|
1042
|
+
imports: [PaginatorModule],
|
|
1043
|
+
template: `<p-paginator [first]="first()" [rows]="rows()" [totalRecords]="totalRecords()"
|
|
1044
|
+
[rowsPerPageOptions]="rowsPerPageOptions()" (onPageChange)="onPageChange($event)" />`,
|
|
1045
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1046
|
+
}]
|
|
1047
|
+
}], propDecorators: { first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
|
|
592
1048
|
|
|
593
1049
|
/**
|
|
594
1050
|
* Directive to define content for a specific step in the stepper.
|
|
@@ -846,7 +1302,7 @@ class StepperControlComponent {
|
|
|
846
1302
|
useExisting: forwardRef(() => StepperControlComponent),
|
|
847
1303
|
multi: true
|
|
848
1304
|
}
|
|
849
|
-
], queries: [{ propertyName: "stepTemplates", predicate: StepperStepDirective }], ngImport: i0, template: "<div\n class=\"stepper-control-wrapper\"\n [class.stepper-control--horizontal]=\"orientation() === 'horizontal'\"\n [class.stepper-control--vertical]=\"orientation() === 'vertical'\"\n [class.stepper-control--disabled]=\"isDisabled()\"\n [class]=\"styleClass()\">\n\n @if (orientation() === 'horizontal') {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\">\n <p-step-list>\n @for (step of steps(); track step.value) {\n <p-step\n [value]=\"step.value\"\n [disabled]=\"step.disabled || isDisabled()\"\n (click)=\"onStepClick(step)\">\n @if (step.icon) {\n <i [class]=\"step.icon\"></i>\n }\n <span class=\"step-label\">{{ step.label }}</span>\n </p-step>\n }\n </p-step-list>\n\n <p-step-panels>\n @for (step of steps(); track step.value) {\n <p-step-panel [value]=\"step.value\">\n <ng-template #content let-activateCallback=\"activateCallback\">\n <div class=\"step-content\">\n @if (getStepTemplate(step.value)) {\n <ng-container\n [ngTemplateOutlet]=\"getStepTemplate(step.value)\"\n [ngTemplateOutletContext]=\"{\n activateCallback: goToStep.bind(this),\n step: step.value,\n isActive: isStepActive(step.value),\n index: $index\n }\">\n </ng-container>\n }\n\n @if (showNavigation()) {\n <div class=\"step-navigation\">\n @if (!isFirstStep()) {\n <p-button\n [label]=\"backLabel()\"\n [outlined]=\"true\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"previousStep()\"\n severity=\"secondary\">\n </p-button>\n }\n\n @if (!isLastStep()) {\n <p-button\n [label]=\"nextLabel()\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"nextStep()\">\n </p-button>\n }\n\n @if (isLastStep()) {\n <p-button\n [label]=\"finishLabel()\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"onFinish()\"\n severity=\"success\">\n </p-button>\n }\n </div>\n }\n </div>\n </ng-template>\n </p-step-panel>\n }\n </p-step-panels>\n </p-stepper>\n } @else {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\">\n @for (step of steps(); track step.value) {\n <p-step-item [value]=\"step.value\">\n <p-step\n [value]=\"step.value\"\n [disabled]=\"step.disabled || isDisabled()\"\n (click)=\"onStepClick(step)\">\n @if (step.icon) {\n <i [class]=\"step.icon\"></i>\n }\n <span class=\"step-label\">{{ step.label }}</span>\n </p-step>\n\n <p-step-panel [value]=\"step.value\">\n <ng-template #content let-activateCallback=\"activateCallback\">\n <div class=\"step-content step-content--vertical\">\n @if (getStepTemplate(step.value)) {\n <ng-container\n [ngTemplateOutlet]=\"getStepTemplate(step.value)\"\n [ngTemplateOutletContext]=\"{\n activateCallback: goToStep.bind(this),\n step: step.value,\n isActive: isStepActive(step.value),\n index: $index\n }\">\n </ng-container>\n }\n\n @if (showNavigation()) {\n <div class=\"step-navigation step-navigation--vertical\">\n @if (!isFirstStep()) {\n <p-button\n [label]=\"backLabel()\"\n [outlined]=\"true\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"previousStep()\"\n severity=\"secondary\">\n </p-button>\n }\n\n @if (!isLastStep()) {\n <p-button\n [label]=\"nextLabel()\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"nextStep()\">\n </p-button>\n }\n\n @if (isLastStep()) {\n <p-button\n [label]=\"finishLabel()\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"onFinish()\"\n severity=\"success\">\n </p-button>\n }\n </div>\n }\n </div>\n </ng-template>\n </p-step-panel>\n </p-step-item>\n }\n </p-stepper>\n }\n</div>\n", styles: [".stepper-control-wrapper{width:100%}.stepper-control-wrapper.stepper-control--disabled{opacity:.6;pointer-events:none}.stepper-control--horizontal .step-content{padding:1rem 0}.stepper-control--horizontal .step-navigation{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--p-surface-200, #e4e4e7)}.stepper-control--vertical .step-content--vertical{padding:1rem 0 1rem 1.5rem;border-left:2px solid var(--p-surface-200, #e4e4e7);margin-left:.75rem}.stepper-control--vertical .step-navigation--vertical{display:flex;gap:.5rem;margin-top:1rem}.step-label{margin-left:.5rem;color:inherit}:host ::ng-deep .p-stepper{width:100%}:host ::ng-deep .p-step-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.375rem;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease}:host ::ng-deep .p-step-header:focus-visible{outline:none;box-shadow:0 0 0 2px #05966980}:host ::ng-deep .p-step-header:hover:not(.p-disabled){background-color:#18181b0d}:host ::ng-deep .p-step-number{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;font-size:.875rem;font-weight:600;flex-shrink:0;background-color:#e4e4e7;color:#52525b;transition:background-color .2s ease,color .2s ease}:host ::ng-deep .p-step-title{font-size:.9375rem;font-weight:500;transition:color .2s ease;color:#52525b!important}:host ::ng-deep .p-step{cursor:pointer;transition:all .2s ease}:host ::ng-deep .p-step.p-step-active .p-step-header{background-color:#0596691a}:host ::ng-deep .p-step.p-step-active .p-step-number{background-color:#059669;color:#fff}:host ::ng-deep .p-step.p-step-active .p-step-title{color:#059669!important;font-weight:600}:host ::ng-deep .p-step.p-step-completed .p-step-number{background-color:#10b981;color:#fff}:host ::ng-deep .p-step.p-step-completed .p-step-title{color:#10b981!important}:host ::ng-deep .p-step:not(.p-step-active):not(.p-step-completed) .p-step-title{color:#52525b!important;opacity:1!important}:host ::ng-deep .p-step:not(.p-step-active):not(.p-step-completed) .p-step-number{background-color:#e4e4e7;color:#52525b}:host ::ng-deep .p-step:hover:not(.p-disabled) .p-step-header{background-color:#18181b0d}:host ::ng-deep .p-step.p-disabled{cursor:not-allowed}:host ::ng-deep .p-step.p-disabled .p-step-header{opacity:.5;cursor:not-allowed}:host ::ng-deep .p-step.p-disabled .p-step-title{color:#71717a!important}:host ::ng-deep .p-step-separator{flex:1;height:2px;background-color:#e4e4e7;margin:0 .5rem}:host ::ng-deep .p-step-separator.p-step-separator-completed{background-color:#10b981}:host ::ng-deep .p-step-list{display:flex;align-items:center;margin-bottom:1rem;padding:.5rem 0}:host ::ng-deep .p-step-panel,:host ::ng-deep .p-step-panels{padding:1rem 0;background-color:#fff!important}:host ::ng-deep .p-steppanel{background-color:#fff!important;color:#18181b!important;padding:1rem 1rem 1rem 2rem}:host ::ng-deep .p-steppanel p,:host ::ng-deep .p-steppanel span,:host ::ng-deep .p-steppanel div{color:#52525b}:host ::ng-deep .p-steppanel.p-steppanel-active{background-color:#fff!important}:host ::ng-deep .p-steppanel-content{background-color:#fff!important;color:#18181b!important}:host ::ng-deep .p-steppanel-content p{color:#52525b}:host ::ng-deep .p-stepper-content{background-color:#fff!important}:host ::ng-deep .p-step-item{margin-bottom:.5rem}:host ::ng-deep .p-stepper-vertical .p-step-list{flex-direction:column;align-items:flex-start}:host ::ng-deep .p-stepper-vertical .p-step-separator{width:2px;height:2rem;margin:.25rem 0 .25rem 1rem}:host ::ng-deep .p-stepper-vertical .p-step-item{display:flex;flex-direction:column;width:100%}:host ::ng-deep .p-stepper-vertical .p-step-header{width:100%}@media(max-width:768px){:host ::ng-deep .p-step-header{padding:.5rem .75rem;gap:.5rem}:host ::ng-deep .p-step-title{font-size:.875rem}:host ::ng-deep .p-step-number{width:1.75rem;height:1.75rem;font-size:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: StepperModule }, { kind: "component", type: i2$2.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.StepList, selector: "p-step-list" }, { kind: "component", type: i2$2.StepPanels, selector: "p-step-panels" }, { kind: "component", type: i2$2.StepPanel, selector: "p-step-panel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.StepItem, selector: "p-step-item", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1305
|
+
], queries: [{ propertyName: "stepTemplates", predicate: StepperStepDirective }], ngImport: i0, template: "<div\n class=\"stepper-control-wrapper\"\n [class.stepper-control--horizontal]=\"orientation() === 'horizontal'\"\n [class.stepper-control--vertical]=\"orientation() === 'vertical'\"\n [class.stepper-control--disabled]=\"isDisabled()\"\n [class]=\"styleClass()\">\n\n @if (orientation() === 'horizontal') {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\">\n <p-step-list>\n @for (step of steps(); track step.value) {\n <p-step\n [value]=\"step.value\"\n [disabled]=\"step.disabled || isDisabled()\"\n (click)=\"onStepClick(step)\">\n @if (step.icon) {\n <i [class]=\"step.icon\"></i>\n }\n <span class=\"step-label\">{{ step.label }}</span>\n </p-step>\n }\n </p-step-list>\n\n <p-step-panels>\n @for (step of steps(); track step.value) {\n <p-step-panel [value]=\"step.value\">\n <ng-template #content let-activateCallback=\"activateCallback\">\n <div class=\"step-content\">\n @if (getStepTemplate(step.value)) {\n <ng-container\n [ngTemplateOutlet]=\"getStepTemplate(step.value)\"\n [ngTemplateOutletContext]=\"{\n activateCallback: goToStep.bind(this),\n step: step.value,\n isActive: isStepActive(step.value),\n index: $index\n }\">\n </ng-container>\n }\n\n @if (showNavigation()) {\n <div class=\"step-navigation\">\n @if (!isFirstStep()) {\n <p-button\n [label]=\"backLabel()\"\n [outlined]=\"true\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"previousStep()\"\n severity=\"secondary\">\n </p-button>\n }\n\n @if (!isLastStep()) {\n <p-button\n [label]=\"nextLabel()\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"nextStep()\">\n </p-button>\n }\n\n @if (isLastStep()) {\n <p-button\n [label]=\"finishLabel()\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"onFinish()\"\n severity=\"success\">\n </p-button>\n }\n </div>\n }\n </div>\n </ng-template>\n </p-step-panel>\n }\n </p-step-panels>\n </p-stepper>\n } @else {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\">\n @for (step of steps(); track step.value) {\n <p-step-item [value]=\"step.value\">\n <p-step\n [value]=\"step.value\"\n [disabled]=\"step.disabled || isDisabled()\"\n (click)=\"onStepClick(step)\">\n @if (step.icon) {\n <i [class]=\"step.icon\"></i>\n }\n <span class=\"step-label\">{{ step.label }}</span>\n </p-step>\n\n <p-step-panel [value]=\"step.value\">\n <ng-template #content let-activateCallback=\"activateCallback\">\n <div class=\"step-content step-content--vertical\">\n @if (getStepTemplate(step.value)) {\n <ng-container\n [ngTemplateOutlet]=\"getStepTemplate(step.value)\"\n [ngTemplateOutletContext]=\"{\n activateCallback: goToStep.bind(this),\n step: step.value,\n isActive: isStepActive(step.value),\n index: $index\n }\">\n </ng-container>\n }\n\n @if (showNavigation()) {\n <div class=\"step-navigation step-navigation--vertical\">\n @if (!isFirstStep()) {\n <p-button\n [label]=\"backLabel()\"\n [outlined]=\"true\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"previousStep()\"\n severity=\"secondary\">\n </p-button>\n }\n\n @if (!isLastStep()) {\n <p-button\n [label]=\"nextLabel()\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"nextStep()\">\n </p-button>\n }\n\n @if (isLastStep()) {\n <p-button\n [label]=\"finishLabel()\"\n [disabled]=\"isDisabled()\"\n (onClick)=\"onFinish()\"\n severity=\"success\">\n </p-button>\n }\n </div>\n }\n </div>\n </ng-template>\n </p-step-panel>\n </p-step-item>\n }\n </p-stepper>\n }\n</div>\n", styles: [".stepper-control-wrapper{width:100%}.stepper-control-wrapper.stepper-control--disabled{opacity:.6;pointer-events:none}.stepper-control--horizontal .step-content{padding:1rem 0}.stepper-control--horizontal .step-navigation{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--p-surface-200, #e4e4e7)}.stepper-control--vertical .step-content--vertical{padding:1rem 0 1rem 1.5rem;border-left:2px solid var(--p-surface-200, #e4e4e7);margin-left:.75rem}.stepper-control--vertical .step-navigation--vertical{display:flex;gap:.5rem;margin-top:1rem}.step-label{margin-left:.5rem;color:inherit}:host ::ng-deep .p-stepper{width:100%}:host ::ng-deep .p-step-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.375rem;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease}:host ::ng-deep .p-step-header:focus-visible{outline:none;box-shadow:0 0 0 2px #05966980}:host ::ng-deep .p-step-header:hover:not(.p-disabled){background-color:#18181b0d}:host ::ng-deep .p-step-number{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;font-size:.875rem;font-weight:600;flex-shrink:0;background-color:#e4e4e7;color:#52525b;transition:background-color .2s ease,color .2s ease}:host ::ng-deep .p-step-title{font-size:.9375rem;font-weight:500;transition:color .2s ease;color:#52525b!important}:host ::ng-deep .p-step{cursor:pointer;transition:all .2s ease}:host ::ng-deep .p-step.p-step-active .p-step-header{background-color:#0596691a}:host ::ng-deep .p-step.p-step-active .p-step-number{background-color:#059669;color:#fff}:host ::ng-deep .p-step.p-step-active .p-step-title{color:#059669!important;font-weight:600}:host ::ng-deep .p-step.p-step-completed .p-step-number{background-color:#10b981;color:#fff}:host ::ng-deep .p-step.p-step-completed .p-step-title{color:#10b981!important}:host ::ng-deep .p-step:not(.p-step-active):not(.p-step-completed) .p-step-title{color:#52525b!important;opacity:1!important}:host ::ng-deep .p-step:not(.p-step-active):not(.p-step-completed) .p-step-number{background-color:#e4e4e7;color:#52525b}:host ::ng-deep .p-step:hover:not(.p-disabled) .p-step-header{background-color:#18181b0d}:host ::ng-deep .p-step.p-disabled{cursor:not-allowed}:host ::ng-deep .p-step.p-disabled .p-step-header{opacity:.5;cursor:not-allowed}:host ::ng-deep .p-step.p-disabled .p-step-title{color:#71717a!important}:host ::ng-deep .p-step-separator{flex:1;height:2px;background-color:#e4e4e7;margin:0 .5rem}:host ::ng-deep .p-step-separator.p-step-separator-completed{background-color:#10b981}:host ::ng-deep .p-step-list{display:flex;align-items:center;margin-bottom:1rem;padding:.5rem 0}:host ::ng-deep .p-step-panel,:host ::ng-deep .p-step-panels{padding:1rem 0;background-color:#fff!important}:host ::ng-deep .p-steppanel{background-color:#fff!important;color:#18181b!important;padding:1rem 1rem 1rem 2rem}:host ::ng-deep .p-steppanel p,:host ::ng-deep .p-steppanel span,:host ::ng-deep .p-steppanel div{color:#52525b}:host ::ng-deep .p-steppanel.p-steppanel-active{background-color:#fff!important}:host ::ng-deep .p-steppanel-content{background-color:#fff!important;color:#18181b!important}:host ::ng-deep .p-steppanel-content p{color:#52525b}:host ::ng-deep .p-stepper-content{background-color:#fff!important}:host ::ng-deep .p-step-item{margin-bottom:.5rem}:host ::ng-deep .p-stepper-vertical .p-step-list{flex-direction:column;align-items:flex-start}:host ::ng-deep .p-stepper-vertical .p-step-separator{width:2px;height:2rem;margin:.25rem 0 .25rem 1rem}:host ::ng-deep .p-stepper-vertical .p-step-item{display:flex;flex-direction:column;width:100%}:host ::ng-deep .p-stepper-vertical .p-step-header{width:100%}@media(max-width:768px){:host ::ng-deep .p-step-header{padding:.5rem .75rem;gap:.5rem}:host ::ng-deep .p-step-title{font-size:.875rem}:host ::ng-deep .p-step-number{width:1.75rem;height:1.75rem;font-size:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: StepperModule }, { kind: "component", type: i2$4.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i2$4.StepList, selector: "p-step-list" }, { kind: "component", type: i2$4.StepPanels, selector: "p-step-panels" }, { kind: "component", type: i2$4.StepPanel, selector: "p-step-panel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2$4.StepItem, selector: "p-step-item", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2$4.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
850
1306
|
}
|
|
851
1307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: StepperControlComponent, decorators: [{
|
|
852
1308
|
type: Component,
|
|
@@ -866,9 +1322,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
866
1322
|
args: [StepperStepDirective]
|
|
867
1323
|
}] } });
|
|
868
1324
|
|
|
1325
|
+
class ToastService {
|
|
1326
|
+
constructor(zone) {
|
|
1327
|
+
this.zone = zone;
|
|
1328
|
+
this.toastSubject = new BehaviorSubject(null);
|
|
1329
|
+
this.toast$ = this.toastSubject.asObservable();
|
|
1330
|
+
this.hideTimer = null;
|
|
1331
|
+
}
|
|
1332
|
+
mostrarToast(message, description = null, variant = 'correct') {
|
|
1333
|
+
if (this.hideTimer !== null)
|
|
1334
|
+
clearTimeout(this.hideTimer);
|
|
1335
|
+
this.toastSubject.next({ message, description, variant });
|
|
1336
|
+
this.zone.runOutsideAngular(() => {
|
|
1337
|
+
this.hideTimer = setTimeout(() => this.zone.run(() => this.clear()), 5000);
|
|
1338
|
+
});
|
|
1339
|
+
}
|
|
1340
|
+
clear() {
|
|
1341
|
+
if (this.hideTimer !== null)
|
|
1342
|
+
clearTimeout(this.hideTimer);
|
|
1343
|
+
this.hideTimer = null;
|
|
1344
|
+
this.toastSubject.next(null);
|
|
1345
|
+
}
|
|
1346
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToastService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1347
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToastService, providedIn: 'root' }); }
|
|
1348
|
+
}
|
|
1349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToastService, decorators: [{
|
|
1350
|
+
type: Injectable,
|
|
1351
|
+
args: [{ providedIn: 'root' }]
|
|
1352
|
+
}], ctorParameters: () => [{ type: i0.NgZone }] });
|
|
1353
|
+
|
|
1354
|
+
class ToastComponent {
|
|
1355
|
+
constructor() {
|
|
1356
|
+
this.toast = viewChild.required(Toast);
|
|
1357
|
+
this.messages = inject(MessageService);
|
|
1358
|
+
this.service = inject(ToastService);
|
|
1359
|
+
this.destroyRef = inject(DestroyRef);
|
|
1360
|
+
this.current = null;
|
|
1361
|
+
}
|
|
1362
|
+
ngAfterViewInit() {
|
|
1363
|
+
this.service.toast$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(payload => {
|
|
1364
|
+
this.current = payload;
|
|
1365
|
+
// ponytail: reset PrimeNG 21's public list synchronously; animated clear() can close a replacement.
|
|
1366
|
+
this.toast().messages = [];
|
|
1367
|
+
if (payload) {
|
|
1368
|
+
this.messages.add({
|
|
1369
|
+
severity: payload.variant === 'correct' ? 'success' : payload.variant,
|
|
1370
|
+
summary: payload.message,
|
|
1371
|
+
detail: payload.description ?? undefined,
|
|
1372
|
+
sticky: true,
|
|
1373
|
+
data: payload,
|
|
1374
|
+
});
|
|
1375
|
+
}
|
|
1376
|
+
this.toast().cd.detectChanges();
|
|
1377
|
+
});
|
|
1378
|
+
}
|
|
1379
|
+
onClose(event) {
|
|
1380
|
+
if (this.current && event.message?.data === this.current)
|
|
1381
|
+
this.service.clear();
|
|
1382
|
+
}
|
|
1383
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1384
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: ToastComponent, isStandalone: true, selector: "app-toast", providers: [MessageService], viewQueries: [{ propertyName: "toast", first: true, predicate: Toast, descendants: true, isSignal: true }], ngImport: i0, template: '<p-toast position="top-right" (onClose)="onClose($event)" />', isInline: true, dependencies: [{ kind: "component", type: Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1385
|
+
}
|
|
1386
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToastComponent, decorators: [{
|
|
1387
|
+
type: Component,
|
|
1388
|
+
args: [{
|
|
1389
|
+
selector: 'app-toast',
|
|
1390
|
+
imports: [Toast],
|
|
1391
|
+
providers: [MessageService],
|
|
1392
|
+
template: '<p-toast position="top-right" (onClose)="onClose($event)" />',
|
|
1393
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1394
|
+
}]
|
|
1395
|
+
}], propDecorators: { toast: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Toast), { isSignal: true }] }] } });
|
|
1396
|
+
|
|
869
1397
|
/**
|
|
870
1398
|
* Generated bundle index. Do not edit.
|
|
871
1399
|
*/
|
|
872
1400
|
|
|
873
|
-
export { AvatarComponent, BasicInputComponent, BasicSelectComponent, ButtonComponent, CalendarComponent, ChartsComponent, CheckboxComponent, FormFieldComponent, MultiSelectComponent, PasswordInputComponent, StepperControlComponent, StepperStepDirective, TableComponent };
|
|
1401
|
+
export { AvatarComponent, BasicInputComponent, BasicSelectComponent, ButtonComponent, CalendarComponent, ChartsComponent, CheckboxComponent, DialogComponent, FilePickerComponent, FormFieldComponent, MultiSelectComponent, PaginationComponent, PasswordInputComponent, SegmentedControlComponent, StepperControlComponent, StepperStepDirective, TableComponent, TextareaComponent, ToastComponent, ToastService, ToggleComponent };
|
|
874
1402
|
//# sourceMappingURL=springest.mjs.map
|