ngx-recipe-forms 0.1.1 → 0.1.3
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 +3 -3
- package/fesm2022/ngx-recipe-forms.mjs +151 -23
- package/fesm2022/ngx-recipe-forms.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ngx-recipe-forms.d.ts +54 -6
|
@@ -120,7 +120,8 @@ const FORM_ERROR_MESSAGES = {
|
|
|
120
120
|
email: "forms.errors.email",
|
|
121
121
|
minItems: "forms.errors.minItems",
|
|
122
122
|
maxItems: "forms.errors.maxItems",
|
|
123
|
-
unique: "forms.errors.unique"
|
|
123
|
+
unique: "forms.errors.unique",
|
|
124
|
+
invalidDate: "forms.errors.invalidDate"
|
|
124
125
|
};
|
|
125
126
|
const FORM_LAYOUT_COLUMNS = {
|
|
126
127
|
[BreakpointEnum.BASE]: {
|
|
@@ -248,6 +249,7 @@ const RECIPE_FORM_DEFAULT_KEYS = [
|
|
|
248
249
|
"forms.errors.minItems",
|
|
249
250
|
"forms.errors.maxItems",
|
|
250
251
|
"forms.errors.unique",
|
|
252
|
+
"forms.errors.invalidDate",
|
|
251
253
|
"forms.errors.unknown",
|
|
252
254
|
"forms.warnings.validationUnavailable",
|
|
253
255
|
"forms.pending",
|
|
@@ -1032,6 +1034,7 @@ var CheckboxComponent = class CheckboxComponent {
|
|
|
1032
1034
|
readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
|
|
1033
1035
|
invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
|
|
1034
1036
|
touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
1037
|
+
dirty = input(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
|
|
1035
1038
|
describedBy = input(...ngDevMode ? [void 0, { debugName: "describedBy" }] : /* istanbul ignore next */ []);
|
|
1036
1039
|
touch = output();
|
|
1037
1040
|
control = viewChild.required("control", ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
|
|
@@ -1108,6 +1111,13 @@ var CheckboxComponent = class CheckboxComponent {
|
|
|
1108
1111
|
isRequired: false,
|
|
1109
1112
|
transformFunction: null
|
|
1110
1113
|
},
|
|
1114
|
+
dirty: {
|
|
1115
|
+
classPropertyName: "dirty",
|
|
1116
|
+
publicName: "dirty",
|
|
1117
|
+
isSignal: true,
|
|
1118
|
+
isRequired: false,
|
|
1119
|
+
transformFunction: null
|
|
1120
|
+
},
|
|
1111
1121
|
describedBy: {
|
|
1112
1122
|
classPropertyName: "describedBy",
|
|
1113
1123
|
publicName: "describedBy",
|
|
@@ -1134,7 +1144,7 @@ var CheckboxComponent = class CheckboxComponent {
|
|
|
1134
1144
|
type="checkbox"
|
|
1135
1145
|
[id]="inputId()"
|
|
1136
1146
|
[attr.name]="name()"
|
|
1137
|
-
[attr.aria-invalid]="invalid() && touched() ? 'true' : null"
|
|
1147
|
+
[attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
|
|
1138
1148
|
[attr.aria-describedby]="describedBy() ?? null"
|
|
1139
1149
|
[attr.aria-readonly]="readonly() ? 'true' : null"
|
|
1140
1150
|
[disabled]="disabled()"
|
|
@@ -1166,7 +1176,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1166
1176
|
type="checkbox"
|
|
1167
1177
|
[id]="inputId()"
|
|
1168
1178
|
[attr.name]="name()"
|
|
1169
|
-
[attr.aria-invalid]="invalid() && touched() ? 'true' : null"
|
|
1179
|
+
[attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
|
|
1170
1180
|
[attr.aria-describedby]="describedBy() ?? null"
|
|
1171
1181
|
[attr.aria-readonly]="readonly() ? 'true' : null"
|
|
1172
1182
|
[disabled]="disabled()"
|
|
@@ -1240,6 +1250,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1240
1250
|
required: false
|
|
1241
1251
|
}]
|
|
1242
1252
|
}],
|
|
1253
|
+
dirty: [{
|
|
1254
|
+
type: i0.Input,
|
|
1255
|
+
args: [{
|
|
1256
|
+
isSignal: true,
|
|
1257
|
+
alias: "dirty",
|
|
1258
|
+
required: false
|
|
1259
|
+
}]
|
|
1260
|
+
}],
|
|
1243
1261
|
describedBy: [{
|
|
1244
1262
|
type: i0.Input,
|
|
1245
1263
|
args: [{
|
|
@@ -1323,6 +1341,7 @@ var DatePickerMultipleComponent = class DatePickerMultipleComponent {
|
|
|
1323
1341
|
readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
|
|
1324
1342
|
invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
|
|
1325
1343
|
touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
1344
|
+
dirty = input(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
|
|
1326
1345
|
required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
|
|
1327
1346
|
ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
1328
1347
|
describedBy = input(...ngDevMode ? [void 0, { debugName: "describedBy" }] : /* istanbul ignore next */ []);
|
|
@@ -1427,6 +1446,13 @@ var DatePickerMultipleComponent = class DatePickerMultipleComponent {
|
|
|
1427
1446
|
isRequired: false,
|
|
1428
1447
|
transformFunction: null
|
|
1429
1448
|
},
|
|
1449
|
+
dirty: {
|
|
1450
|
+
classPropertyName: "dirty",
|
|
1451
|
+
publicName: "dirty",
|
|
1452
|
+
isSignal: true,
|
|
1453
|
+
isRequired: false,
|
|
1454
|
+
transformFunction: null
|
|
1455
|
+
},
|
|
1430
1456
|
required: {
|
|
1431
1457
|
classPropertyName: "required",
|
|
1432
1458
|
publicName: "required",
|
|
@@ -1490,7 +1516,7 @@ var DatePickerMultipleComponent = class DatePickerMultipleComponent {
|
|
|
1490
1516
|
[id]="inputId()"
|
|
1491
1517
|
[attr.name]="name()"
|
|
1492
1518
|
[attr.max]="maxInputValue()"
|
|
1493
|
-
[attr.aria-invalid]="invalid() && touched() ? 'true' : null"
|
|
1519
|
+
[attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
|
|
1494
1520
|
[attr.aria-describedby]="describedBy() ?? null"
|
|
1495
1521
|
[attr.aria-required]="required() ? 'true' : null"
|
|
1496
1522
|
[disabled]="disabled()"
|
|
@@ -1577,7 +1603,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1577
1603
|
[id]="inputId()"
|
|
1578
1604
|
[attr.name]="name()"
|
|
1579
1605
|
[attr.max]="maxInputValue()"
|
|
1580
|
-
[attr.aria-invalid]="invalid() && touched() ? 'true' : null"
|
|
1606
|
+
[attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
|
|
1581
1607
|
[attr.aria-describedby]="describedBy() ?? null"
|
|
1582
1608
|
[attr.aria-required]="required() ? 'true' : null"
|
|
1583
1609
|
[disabled]="disabled()"
|
|
@@ -1680,6 +1706,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1680
1706
|
required: false
|
|
1681
1707
|
}]
|
|
1682
1708
|
}],
|
|
1709
|
+
dirty: [{
|
|
1710
|
+
type: i0.Input,
|
|
1711
|
+
args: [{
|
|
1712
|
+
isSignal: true,
|
|
1713
|
+
alias: "dirty",
|
|
1714
|
+
required: false
|
|
1715
|
+
}]
|
|
1716
|
+
}],
|
|
1683
1717
|
required: [{
|
|
1684
1718
|
type: i0.Input,
|
|
1685
1719
|
args: [{
|
|
@@ -1746,6 +1780,7 @@ var DatePickerComponent = class DatePickerComponent {
|
|
|
1746
1780
|
readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
|
|
1747
1781
|
invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
|
|
1748
1782
|
touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
1783
|
+
dirty = input(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
|
|
1749
1784
|
required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
|
|
1750
1785
|
describedBy = input(...ngDevMode ? [void 0, { debugName: "describedBy" }] : /* istanbul ignore next */ []);
|
|
1751
1786
|
touch = output();
|
|
@@ -1822,6 +1857,13 @@ var DatePickerComponent = class DatePickerComponent {
|
|
|
1822
1857
|
isRequired: false,
|
|
1823
1858
|
transformFunction: null
|
|
1824
1859
|
},
|
|
1860
|
+
dirty: {
|
|
1861
|
+
classPropertyName: "dirty",
|
|
1862
|
+
publicName: "dirty",
|
|
1863
|
+
isSignal: true,
|
|
1864
|
+
isRequired: false,
|
|
1865
|
+
transformFunction: null
|
|
1866
|
+
},
|
|
1825
1867
|
required: {
|
|
1826
1868
|
classPropertyName: "required",
|
|
1827
1869
|
publicName: "required",
|
|
@@ -1855,7 +1897,7 @@ var DatePickerComponent = class DatePickerComponent {
|
|
|
1855
1897
|
type="date"
|
|
1856
1898
|
[id]="inputId()"
|
|
1857
1899
|
[attr.name]="name()"
|
|
1858
|
-
[attr.aria-invalid]="invalid() && touched() ? 'true' : null"
|
|
1900
|
+
[attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
|
|
1859
1901
|
[attr.aria-describedby]="describedBy() ?? null"
|
|
1860
1902
|
[attr.aria-required]="required() ? 'true' : null"
|
|
1861
1903
|
[disabled]="disabled()"
|
|
@@ -1886,7 +1928,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1886
1928
|
type="date"
|
|
1887
1929
|
[id]="inputId()"
|
|
1888
1930
|
[attr.name]="name()"
|
|
1889
|
-
[attr.aria-invalid]="invalid() && touched() ? 'true' : null"
|
|
1931
|
+
[attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
|
|
1890
1932
|
[attr.aria-describedby]="describedBy() ?? null"
|
|
1891
1933
|
[attr.aria-required]="required() ? 'true' : null"
|
|
1892
1934
|
[disabled]="disabled()"
|
|
@@ -1959,6 +2001,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1959
2001
|
required: false
|
|
1960
2002
|
}]
|
|
1961
2003
|
}],
|
|
2004
|
+
dirty: [{
|
|
2005
|
+
type: i0.Input,
|
|
2006
|
+
args: [{
|
|
2007
|
+
isSignal: true,
|
|
2008
|
+
alias: "dirty",
|
|
2009
|
+
required: false
|
|
2010
|
+
}]
|
|
2011
|
+
}],
|
|
1962
2012
|
required: [{
|
|
1963
2013
|
type: i0.Input,
|
|
1964
2014
|
args: [{
|
|
@@ -1994,6 +2044,7 @@ var InputNumberComponent = class InputNumberComponent {
|
|
|
1994
2044
|
readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
|
|
1995
2045
|
invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
|
|
1996
2046
|
touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
2047
|
+
dirty = input(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
|
|
1997
2048
|
required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
|
|
1998
2049
|
step = input(...ngDevMode ? [void 0, { debugName: "step" }] : /* istanbul ignore next */ []);
|
|
1999
2050
|
minFractionDigits = input(...ngDevMode ? [void 0, { debugName: "minFractionDigits" }] : /* istanbul ignore next */ []);
|
|
@@ -2100,6 +2151,13 @@ var InputNumberComponent = class InputNumberComponent {
|
|
|
2100
2151
|
isRequired: false,
|
|
2101
2152
|
transformFunction: null
|
|
2102
2153
|
},
|
|
2154
|
+
dirty: {
|
|
2155
|
+
classPropertyName: "dirty",
|
|
2156
|
+
publicName: "dirty",
|
|
2157
|
+
isSignal: true,
|
|
2158
|
+
isRequired: false,
|
|
2159
|
+
transformFunction: null
|
|
2160
|
+
},
|
|
2103
2161
|
required: {
|
|
2104
2162
|
classPropertyName: "required",
|
|
2105
2163
|
publicName: "required",
|
|
@@ -2155,7 +2213,7 @@ var InputNumberComponent = class InputNumberComponent {
|
|
|
2155
2213
|
[id]="inputId()"
|
|
2156
2214
|
[attr.name]="name()"
|
|
2157
2215
|
[attr.step]="step() ?? null"
|
|
2158
|
-
[attr.aria-invalid]="invalid() && touched() ? 'true' : null"
|
|
2216
|
+
[attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
|
|
2159
2217
|
[attr.aria-describedby]="describedBy() ?? null"
|
|
2160
2218
|
[attr.aria-required]="required() ? 'true' : null"
|
|
2161
2219
|
[disabled]="disabled()"
|
|
@@ -2187,7 +2245,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2187
2245
|
[id]="inputId()"
|
|
2188
2246
|
[attr.name]="name()"
|
|
2189
2247
|
[attr.step]="step() ?? null"
|
|
2190
|
-
[attr.aria-invalid]="invalid() && touched() ? 'true' : null"
|
|
2248
|
+
[attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
|
|
2191
2249
|
[attr.aria-describedby]="describedBy() ?? null"
|
|
2192
2250
|
[attr.aria-required]="required() ? 'true' : null"
|
|
2193
2251
|
[disabled]="disabled()"
|
|
@@ -2260,6 +2318,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2260
2318
|
required: false
|
|
2261
2319
|
}]
|
|
2262
2320
|
}],
|
|
2321
|
+
dirty: [{
|
|
2322
|
+
type: i0.Input,
|
|
2323
|
+
args: [{
|
|
2324
|
+
isSignal: true,
|
|
2325
|
+
alias: "dirty",
|
|
2326
|
+
required: false
|
|
2327
|
+
}]
|
|
2328
|
+
}],
|
|
2263
2329
|
required: [{
|
|
2264
2330
|
type: i0.Input,
|
|
2265
2331
|
args: [{
|
|
@@ -2318,6 +2384,7 @@ var InputTextComponent = class InputTextComponent {
|
|
|
2318
2384
|
readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
|
|
2319
2385
|
invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
|
|
2320
2386
|
touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
2387
|
+
dirty = input(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
|
|
2321
2388
|
required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
|
|
2322
2389
|
placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
|
|
2323
2390
|
inputmode = input("text", ...ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []);
|
|
@@ -2397,6 +2464,13 @@ var InputTextComponent = class InputTextComponent {
|
|
|
2397
2464
|
isRequired: false,
|
|
2398
2465
|
transformFunction: null
|
|
2399
2466
|
},
|
|
2467
|
+
dirty: {
|
|
2468
|
+
classPropertyName: "dirty",
|
|
2469
|
+
publicName: "dirty",
|
|
2470
|
+
isSignal: true,
|
|
2471
|
+
isRequired: false,
|
|
2472
|
+
transformFunction: null
|
|
2473
|
+
},
|
|
2400
2474
|
required: {
|
|
2401
2475
|
classPropertyName: "required",
|
|
2402
2476
|
publicName: "required",
|
|
@@ -2460,7 +2534,7 @@ var InputTextComponent = class InputTextComponent {
|
|
|
2460
2534
|
[attr.name]="name()"
|
|
2461
2535
|
[attr.inputmode]="inputmode()"
|
|
2462
2536
|
[attr.maxlength]="maxLength() ?? null"
|
|
2463
|
-
[attr.aria-invalid]="invalid() && touched() ? 'true' : null"
|
|
2537
|
+
[attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
|
|
2464
2538
|
[attr.aria-describedby]="describedBy() ?? null"
|
|
2465
2539
|
[attr.aria-required]="required() ? 'true' : null"
|
|
2466
2540
|
[placeholder]="placeholder()"
|
|
@@ -2494,7 +2568,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2494
2568
|
[attr.name]="name()"
|
|
2495
2569
|
[attr.inputmode]="inputmode()"
|
|
2496
2570
|
[attr.maxlength]="maxLength() ?? null"
|
|
2497
|
-
[attr.aria-invalid]="invalid() && touched() ? 'true' : null"
|
|
2571
|
+
[attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
|
|
2498
2572
|
[attr.aria-describedby]="describedBy() ?? null"
|
|
2499
2573
|
[attr.aria-required]="required() ? 'true' : null"
|
|
2500
2574
|
[placeholder]="placeholder()"
|
|
@@ -2568,6 +2642,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2568
2642
|
required: false
|
|
2569
2643
|
}]
|
|
2570
2644
|
}],
|
|
2645
|
+
dirty: [{
|
|
2646
|
+
type: i0.Input,
|
|
2647
|
+
args: [{
|
|
2648
|
+
isSignal: true,
|
|
2649
|
+
alias: "dirty",
|
|
2650
|
+
required: false
|
|
2651
|
+
}]
|
|
2652
|
+
}],
|
|
2571
2653
|
required: [{
|
|
2572
2654
|
type: i0.Input,
|
|
2573
2655
|
args: [{
|
|
@@ -2972,6 +3054,7 @@ var SelectComponent = class SelectComponent {
|
|
|
2972
3054
|
readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
|
|
2973
3055
|
invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
|
|
2974
3056
|
touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
|
|
3057
|
+
dirty = input(false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
|
|
2975
3058
|
required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
|
|
2976
3059
|
showClear = input(false, ...ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []);
|
|
2977
3060
|
filter = input(false, ...ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []);
|
|
@@ -3083,6 +3166,13 @@ var SelectComponent = class SelectComponent {
|
|
|
3083
3166
|
isRequired: false,
|
|
3084
3167
|
transformFunction: null
|
|
3085
3168
|
},
|
|
3169
|
+
dirty: {
|
|
3170
|
+
classPropertyName: "dirty",
|
|
3171
|
+
publicName: "dirty",
|
|
3172
|
+
isSignal: true,
|
|
3173
|
+
isRequired: false,
|
|
3174
|
+
transformFunction: null
|
|
3175
|
+
},
|
|
3086
3176
|
required: {
|
|
3087
3177
|
classPropertyName: "required",
|
|
3088
3178
|
publicName: "required",
|
|
@@ -3151,7 +3241,7 @@ var SelectComponent = class SelectComponent {
|
|
|
3151
3241
|
[id]="inputId()"
|
|
3152
3242
|
[attr.name]="name()"
|
|
3153
3243
|
[attr.aria-labelledby]="ariaLabelledBy() ?? null"
|
|
3154
|
-
[attr.aria-invalid]="invalid() && touched() ? 'true' : null"
|
|
3244
|
+
[attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
|
|
3155
3245
|
[attr.aria-describedby]="describedBy() ?? null"
|
|
3156
3246
|
[attr.aria-required]="required() ? 'true' : null"
|
|
3157
3247
|
[attr.aria-readonly]="readonly() ? 'true' : null"
|
|
@@ -3197,7 +3287,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3197
3287
|
[id]="inputId()"
|
|
3198
3288
|
[attr.name]="name()"
|
|
3199
3289
|
[attr.aria-labelledby]="ariaLabelledBy() ?? null"
|
|
3200
|
-
[attr.aria-invalid]="invalid() && touched() ? 'true' : null"
|
|
3290
|
+
[attr.aria-invalid]="invalid() && (touched() || dirty()) ? 'true' : null"
|
|
3201
3291
|
[attr.aria-describedby]="describedBy() ?? null"
|
|
3202
3292
|
[attr.aria-required]="required() ? 'true' : null"
|
|
3203
3293
|
[attr.aria-readonly]="readonly() ? 'true' : null"
|
|
@@ -3293,6 +3383,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3293
3383
|
required: false
|
|
3294
3384
|
}]
|
|
3295
3385
|
}],
|
|
3386
|
+
dirty: [{
|
|
3387
|
+
type: i0.Input,
|
|
3388
|
+
args: [{
|
|
3389
|
+
isSignal: true,
|
|
3390
|
+
alias: "dirty",
|
|
3391
|
+
required: false
|
|
3392
|
+
}]
|
|
3393
|
+
}],
|
|
3296
3394
|
required: [{
|
|
3297
3395
|
type: i0.Input,
|
|
3298
3396
|
args: [{
|
|
@@ -3918,6 +4016,7 @@ var RecipeDefaultUiComponent = class RecipeDefaultUiComponent {
|
|
|
3918
4016
|
"readonly",
|
|
3919
4017
|
"invalid",
|
|
3920
4018
|
"touched",
|
|
4019
|
+
"dirty",
|
|
3921
4020
|
"describedBy"
|
|
3922
4021
|
],
|
|
3923
4022
|
outputs: ["checkedChange", "touch"]
|
|
@@ -3934,6 +4033,7 @@ var RecipeDefaultUiComponent = class RecipeDefaultUiComponent {
|
|
|
3934
4033
|
"readonly",
|
|
3935
4034
|
"invalid",
|
|
3936
4035
|
"touched",
|
|
4036
|
+
"dirty",
|
|
3937
4037
|
"required",
|
|
3938
4038
|
"describedBy"
|
|
3939
4039
|
],
|
|
@@ -3951,6 +4051,7 @@ var RecipeDefaultUiComponent = class RecipeDefaultUiComponent {
|
|
|
3951
4051
|
"readonly",
|
|
3952
4052
|
"invalid",
|
|
3953
4053
|
"touched",
|
|
4054
|
+
"dirty",
|
|
3954
4055
|
"required",
|
|
3955
4056
|
"ariaLabel",
|
|
3956
4057
|
"describedBy",
|
|
@@ -3976,6 +4077,7 @@ var RecipeDefaultUiComponent = class RecipeDefaultUiComponent {
|
|
|
3976
4077
|
"readonly",
|
|
3977
4078
|
"invalid",
|
|
3978
4079
|
"touched",
|
|
4080
|
+
"dirty",
|
|
3979
4081
|
"required",
|
|
3980
4082
|
"step",
|
|
3981
4083
|
"minFractionDigits",
|
|
@@ -3996,6 +4098,7 @@ var RecipeDefaultUiComponent = class RecipeDefaultUiComponent {
|
|
|
3996
4098
|
"readonly",
|
|
3997
4099
|
"invalid",
|
|
3998
4100
|
"touched",
|
|
4101
|
+
"dirty",
|
|
3999
4102
|
"required",
|
|
4000
4103
|
"placeholder",
|
|
4001
4104
|
"inputmode",
|
|
@@ -4039,6 +4142,7 @@ var RecipeDefaultUiComponent = class RecipeDefaultUiComponent {
|
|
|
4039
4142
|
"readonly",
|
|
4040
4143
|
"invalid",
|
|
4041
4144
|
"touched",
|
|
4145
|
+
"dirty",
|
|
4042
4146
|
"required",
|
|
4043
4147
|
"showClear",
|
|
4044
4148
|
"filter",
|
|
@@ -4580,7 +4684,7 @@ const RESERVED_KEYS = /* @__PURE__ */ new Set([
|
|
|
4580
4684
|
]);
|
|
4581
4685
|
var RecipeMessages = class RecipeMessages {
|
|
4582
4686
|
static resolve(input) {
|
|
4583
|
-
if (!input.touched && !input.submitted) return;
|
|
4687
|
+
if (!input.touched && !input.dirty && !input.submitted) return;
|
|
4584
4688
|
const [first] = input.errors;
|
|
4585
4689
|
return first === void 0 ? void 0 : RecipeMessages.forError(first, input.fieldMessages, input.recipeMessages);
|
|
4586
4690
|
}
|
|
@@ -5016,12 +5120,16 @@ var RecipeSections = class RecipeSections {
|
|
|
5016
5120
|
if (state.hidden()) continue;
|
|
5017
5121
|
for (const error of state.errorSummary()) {
|
|
5018
5122
|
const errorState = error.fieldTree();
|
|
5019
|
-
|
|
5123
|
+
const shown = errorState.touched() || errorState.dirty() || input.submitted;
|
|
5124
|
+
if (!errorState.hidden() && shown) found.add(error.fieldTree);
|
|
5020
5125
|
}
|
|
5021
5126
|
}
|
|
5022
5127
|
for (const error of input.tree().errors()) if ("linkedId" in error && typeof error.linkedId === "string") {
|
|
5023
5128
|
const linkedKeys = error.linkedId.split("+");
|
|
5024
|
-
if ((input.submitted || linkedKeys.every((key) =>
|
|
5129
|
+
if ((input.submitted || linkedKeys.every((key) => {
|
|
5130
|
+
const state = input.tree[key]?.();
|
|
5131
|
+
return state !== void 0 && (state.touched() || state.dirty());
|
|
5132
|
+
})) && linkedKeys.every((key) => keys.has(key))) found.add(error.linkedId);
|
|
5025
5133
|
}
|
|
5026
5134
|
for (const [path, key] of input.serverErrorKeys ?? []) if (keys.has(key)) found.add(`server:${path}`);
|
|
5027
5135
|
return found.size;
|
|
@@ -5332,6 +5440,7 @@ var RecipeFieldComponent = class RecipeFieldComponent {
|
|
|
5332
5440
|
idPrefix = input.required(...ngDevMode ? [{ debugName: "idPrefix" }] : /* istanbul ignore next */ []);
|
|
5333
5441
|
serverPrefix = input("", ...ngDevMode ? [{ debugName: "serverPrefix" }] : /* istanbul ignore next */ []);
|
|
5334
5442
|
hideLabel = input(false, ...ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []);
|
|
5443
|
+
inline = input(false, ...ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []);
|
|
5335
5444
|
extraMessage = input(...ngDevMode ? [void 0, { debugName: "extraMessage" }] : /* istanbul ignore next */ []);
|
|
5336
5445
|
extraDescribedBy = input(...ngDevMode ? [void 0, { debugName: "extraDescribedBy" }] : /* istanbul ignore next */ []);
|
|
5337
5446
|
context = inject(RecipeFormContext, { optional: true }) ?? new RecipeFormContext();
|
|
@@ -5364,6 +5473,7 @@ var RecipeFieldComponent = class RecipeFieldComponent {
|
|
|
5364
5473
|
return RecipeMessages.resolve({
|
|
5365
5474
|
errors: [...this.ownErrors(), ...server],
|
|
5366
5475
|
touched: this.state().touched() || server.length > 0,
|
|
5476
|
+
dirty: this.state().dirty(),
|
|
5367
5477
|
submitted: this.context.submitted(),
|
|
5368
5478
|
fieldMessages: this.node().messages,
|
|
5369
5479
|
recipeMessages: this.context.recipeMessages()
|
|
@@ -5371,7 +5481,7 @@ var RecipeFieldComponent = class RecipeFieldComponent {
|
|
|
5371
5481
|
}, ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
|
|
5372
5482
|
warnings = computed(() => {
|
|
5373
5483
|
const state = this.state();
|
|
5374
|
-
const ruleWarnings = state.touched() || this.context.submitted() ? state.metadata(FORM_WARNINGS)?.() ?? [] : [];
|
|
5484
|
+
const ruleWarnings = state.touched() || state.dirty() || this.context.submitted() ? state.metadata(FORM_WARNINGS)?.() ?? [] : [];
|
|
5375
5485
|
const messages = RecipeMessages.forAll([...ruleWarnings, ...this.serverWarnings()], this.node().messages, this.context.recipeMessages());
|
|
5376
5486
|
return state.metadata(FORM_VALIDATION_UNAVAILABLE)?.() === true ? [...messages, { key: FORM_VALIDATION_UNAVAILABLE_MESSAGE }] : messages;
|
|
5377
5487
|
}, ...ngDevMode ? [{ debugName: "warnings" }] : /* istanbul ignore next */ []);
|
|
@@ -5551,6 +5661,13 @@ var RecipeFieldComponent = class RecipeFieldComponent {
|
|
|
5551
5661
|
isRequired: false,
|
|
5552
5662
|
transformFunction: null
|
|
5553
5663
|
},
|
|
5664
|
+
inline: {
|
|
5665
|
+
classPropertyName: "inline",
|
|
5666
|
+
publicName: "inline",
|
|
5667
|
+
isSignal: true,
|
|
5668
|
+
isRequired: false,
|
|
5669
|
+
transformFunction: null
|
|
5670
|
+
},
|
|
5554
5671
|
extraMessage: {
|
|
5555
5672
|
classPropertyName: "extraMessage",
|
|
5556
5673
|
publicName: "extraMessage",
|
|
@@ -5568,7 +5685,7 @@ var RecipeFieldComponent = class RecipeFieldComponent {
|
|
|
5568
5685
|
},
|
|
5569
5686
|
host: { properties: { "class": "hostClasses()" } },
|
|
5570
5687
|
ngImport: i0,
|
|
5571
|
-
template: "@let n = node();\
|
|
5688
|
+
template: "@let n = node();\n@let s = state();\n@if (!s.hidden()) {\n @if (inline()) {\n <!-- En ligne (cellule de tableau) : le contrôle, centré sur la hauteur d'un champ de saisie, puis son libellé. -->\n <div class=\"flex min-h-9 items-center gap-1.5\">\n <ng-container [ngTemplateOutlet]=\"controlTemplate\" />\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n <ng-container [ngTemplateOutlet]=\"controlTemplate\" />\n }\n @if (hintKey(); as hint) {\n <p [id]=\"hintId()\" class=\"text-xs text-slate-500\">{{ hint | recipeTranslate }}</p>\n }\n <!-- Raison d'une règle `disabled` active : comme l'aide, après elle, retirée dès que le champ est réactivé. -->\n @if (disabledReasonKeys().length > 0) {\n <p [id]=\"reasonId()\" class=\"text-xs text-slate-500\">\n @for (reasonKey of disabledReasonKeys(); track reasonKey) {\n <span class=\"block\">{{ reasonKey | recipeTranslate }}</span>\n }\n </p>\n }\n @if (s.pending()) {\n <app-recipe-message\n [severity]=\"severities.SECONDARY\"\n [inline]=\"true\"\n [text]=\"'forms.pending' | recipeTranslate\"\n />\n }\n @if (warnings().length > 0) {\n <div [id]=\"warningsId()\" role=\"status\" class=\"flex flex-col gap-0.5\">\n @for (w of warnings(); track $index) {\n <app-recipe-message\n [severity]=\"severities.WARNING\"\n [inline]=\"true\"\n [text]=\"w.key | recipeTranslate: w.params : w.text\"\n />\n }\n </div>\n }\n @if (message(); as m) {\n <app-recipe-message\n [id]=\"messageId()\"\n [severity]=\"severities.DANGER\"\n [inline]=\"true\"\n [text]=\"m.key | recipeTranslate: m.params : m.text\"\n />\n }\n}\n\n<ng-template #labelTemplate>\n <label\n [for]=\"inputId()\"\n [id]=\"labelId()\"\n [class]=\"hideLabel() ? 'sr-only' : 'text-sm font-semibold text-slate-800'\"\n >\n {{ n.labelKey | recipeTranslate }}\n @if (s.required() && !s.readonly()) {\n <span aria-hidden=\"true\" class=\"text-red-600\">*</span>\n }\n </label>\n</ng-template>\n\n<ng-template #controlTemplate>\n @switch (n.control.type) {\n @case (types.DISPLAY) {\n <output [id]=\"inputId()\" class=\"rounded-md bg-slate-50 px-3 py-2 text-sm text-slate-700\">{{\n displayValue()\n }}</output>\n }\n @case (types.SLOT) {\n @if (slotTemplate(); as template) {\n <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"slotContext()\" />\n }\n }\n @default {\n <!-- Gabarit du registre : celui de l'hôte (`provideRecipeForms({ ui })`), sinon celui par défaut. -->\n @if (control(); as c) {\n <ng-container [ngTemplateOutlet]=\"c.template\" [ngTemplateOutletContext]=\"c.context\" />\n }\n }\n }\n</ng-template>\n",
|
|
5572
5689
|
dependencies: [
|
|
5573
5690
|
{
|
|
5574
5691
|
kind: "directive",
|
|
@@ -5615,7 +5732,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5615
5732
|
],
|
|
5616
5733
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5617
5734
|
host: { "[class]": "hostClasses()" },
|
|
5618
|
-
template: "@let n = node();\
|
|
5735
|
+
template: "@let n = node();\n@let s = state();\n@if (!s.hidden()) {\n @if (inline()) {\n <!-- En ligne (cellule de tableau) : le contrôle, centré sur la hauteur d'un champ de saisie, puis son libellé. -->\n <div class=\"flex min-h-9 items-center gap-1.5\">\n <ng-container [ngTemplateOutlet]=\"controlTemplate\" />\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n <ng-container [ngTemplateOutlet]=\"controlTemplate\" />\n }\n @if (hintKey(); as hint) {\n <p [id]=\"hintId()\" class=\"text-xs text-slate-500\">{{ hint | recipeTranslate }}</p>\n }\n <!-- Raison d'une règle `disabled` active : comme l'aide, après elle, retirée dès que le champ est réactivé. -->\n @if (disabledReasonKeys().length > 0) {\n <p [id]=\"reasonId()\" class=\"text-xs text-slate-500\">\n @for (reasonKey of disabledReasonKeys(); track reasonKey) {\n <span class=\"block\">{{ reasonKey | recipeTranslate }}</span>\n }\n </p>\n }\n @if (s.pending()) {\n <app-recipe-message\n [severity]=\"severities.SECONDARY\"\n [inline]=\"true\"\n [text]=\"'forms.pending' | recipeTranslate\"\n />\n }\n @if (warnings().length > 0) {\n <div [id]=\"warningsId()\" role=\"status\" class=\"flex flex-col gap-0.5\">\n @for (w of warnings(); track $index) {\n <app-recipe-message\n [severity]=\"severities.WARNING\"\n [inline]=\"true\"\n [text]=\"w.key | recipeTranslate: w.params : w.text\"\n />\n }\n </div>\n }\n @if (message(); as m) {\n <app-recipe-message\n [id]=\"messageId()\"\n [severity]=\"severities.DANGER\"\n [inline]=\"true\"\n [text]=\"m.key | recipeTranslate: m.params : m.text\"\n />\n }\n}\n\n<ng-template #labelTemplate>\n <label\n [for]=\"inputId()\"\n [id]=\"labelId()\"\n [class]=\"hideLabel() ? 'sr-only' : 'text-sm font-semibold text-slate-800'\"\n >\n {{ n.labelKey | recipeTranslate }}\n @if (s.required() && !s.readonly()) {\n <span aria-hidden=\"true\" class=\"text-red-600\">*</span>\n }\n </label>\n</ng-template>\n\n<ng-template #controlTemplate>\n @switch (n.control.type) {\n @case (types.DISPLAY) {\n <output [id]=\"inputId()\" class=\"rounded-md bg-slate-50 px-3 py-2 text-sm text-slate-700\">{{\n displayValue()\n }}</output>\n }\n @case (types.SLOT) {\n @if (slotTemplate(); as template) {\n <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"slotContext()\" />\n }\n }\n @default {\n <!-- Gabarit du registre : celui de l'hôte (`provideRecipeForms({ ui })`), sinon celui par défaut. -->\n @if (control(); as c) {\n <ng-container [ngTemplateOutlet]=\"c.template\" [ngTemplateOutletContext]=\"c.context\" />\n }\n }\n }\n</ng-template>\n"
|
|
5619
5736
|
}]
|
|
5620
5737
|
}],
|
|
5621
5738
|
propDecorators: {
|
|
@@ -5659,6 +5776,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5659
5776
|
required: false
|
|
5660
5777
|
}]
|
|
5661
5778
|
}],
|
|
5779
|
+
inline: [{
|
|
5780
|
+
type: i0.Input,
|
|
5781
|
+
args: [{
|
|
5782
|
+
isSignal: true,
|
|
5783
|
+
alias: "inline",
|
|
5784
|
+
required: false
|
|
5785
|
+
}]
|
|
5786
|
+
}],
|
|
5662
5787
|
extraMessage: [{
|
|
5663
5788
|
type: i0.Input,
|
|
5664
5789
|
args: [{
|
|
@@ -6438,10 +6563,11 @@ var RecipeNodeComponent = class RecipeNodeComponent {
|
|
|
6438
6563
|
const target = this.linkedTarget();
|
|
6439
6564
|
const source = target === void 0 ? this.tree()() : this.fieldTreeOf(target)();
|
|
6440
6565
|
const errors = source.errors().filter((error) => "linkedId" in error && error.linkedId === linkedId);
|
|
6441
|
-
const
|
|
6566
|
+
const states = target === void 0 ? linked.keys.map((key) => this.fieldTreeOf(key)()) : [source];
|
|
6442
6567
|
return RecipeMessages.resolve({
|
|
6443
6568
|
errors,
|
|
6444
|
-
touched,
|
|
6569
|
+
touched: states.every((state) => state.touched() || state.dirty()),
|
|
6570
|
+
dirty: states.every((state) => state.dirty()),
|
|
6445
6571
|
submitted: this.context.submitted(),
|
|
6446
6572
|
fieldMessages: linked.messages,
|
|
6447
6573
|
recipeMessages: this.context.recipeMessages()
|
|
@@ -6485,6 +6611,7 @@ var RecipeNodeComponent = class RecipeNodeComponent {
|
|
|
6485
6611
|
return RecipeMessages.resolve({
|
|
6486
6612
|
errors: [...own, ...server],
|
|
6487
6613
|
touched: state.touched() || server.length > 0,
|
|
6614
|
+
dirty: state.dirty(),
|
|
6488
6615
|
submitted: this.context.submitted(),
|
|
6489
6616
|
fieldMessages: array.messages,
|
|
6490
6617
|
recipeMessages: this.context.recipeMessages()
|
|
@@ -6606,7 +6733,7 @@ var RecipeNodeComponent = class RecipeNodeComponent {
|
|
|
6606
6733
|
},
|
|
6607
6734
|
host: { properties: { "class": "hostClasses()" } },
|
|
6608
6735
|
ngImport: i0,
|
|
6609
|
-
template: "@let n = node();\n@switch (n.kind) {\n @case (kinds.SECTION) {\n @if (!sectionHidden()) {\n <fieldset\n [id]=\"idPrefix() + '-' + n.id\"\n [class]=\"hideLegend()
|
|
6736
|
+
template: "@let n = node();\n@switch (n.kind) {\n @case (kinds.SECTION) {\n @if (!sectionHidden()) {\n <fieldset\n [id]=\"idPrefix() + '-' + n.id\"\n [class]=\"\n hideLegend()\n ? 'relative min-w-0'\n : 'relative min-w-0 rounded-lg border border-slate-200 p-4'\n \"\n >\n @if (n.legendKey; as legendKey) {\n <legend\n [class]=\"hideLegend() ? 'sr-only' : 'px-1 text-base font-semibold text-slate-900'\"\n >\n {{ legendKey | recipeTranslate }}\n </legend>\n }\n <div [class]=\"containerClasses()\">\n @for (child of n.nodes; track $index) {\n <app-recipe-node\n [node]=\"child\"\n [tree]=\"tree()\"\n [idPrefix]=\"idPrefix()\"\n [serverPrefix]=\"serverPrefix()\"\n />\n }\n </div>\n </fieldset>\n }\n }\n @case (kinds.ROW) {\n <div [class]=\"containerClasses()\">\n @for (child of n.nodes; track $index) {\n <app-recipe-node\n [node]=\"child\"\n [tree]=\"tree()\"\n [idPrefix]=\"idPrefix()\"\n [serverPrefix]=\"serverPrefix()\"\n />\n }\n </div>\n }\n @case (kinds.SECTION_GROUP) {\n <app-recipe-section-group\n [node]=\"n\"\n [tree]=\"tree()\"\n [idPrefix]=\"idPrefix()\"\n [serverPrefix]=\"serverPrefix()\"\n />\n }\n @case (kinds.FIELD) {\n <app-recipe-field\n [node]=\"n\"\n [field]=\"fieldTreeOf(n.key)\"\n [idPrefix]=\"idPrefix()\"\n [serverPrefix]=\"serverPrefix()\"\n [hideLabel]=\"hideLabel()\"\n [inline]=\"hideLabel()\"\n />\n }\n @case (kinds.LINKED) {\n <!-- Dans une cellule de tableau, l'en-tête de colonne titre le groupe : ni cadre ni légende visible, champs en ligne. -->\n <fieldset\n [class]=\"\n hideLabel() ? 'relative min-w-0' : 'relative min-w-0 rounded-lg border border-slate-200 p-3'\n \"\n [attr.aria-describedby]=\"\n linkedTarget() === undefined && linkedMessage() ? linkedMessageId() : null\n \"\n >\n <legend [class]=\"hideLabel() ? 'sr-only' : 'px-1 text-sm font-semibold text-slate-800'\">\n {{ n.legendKey | recipeTranslate }}\n </legend>\n <div [class]=\"hideLabel() ? 'flex items-start gap-x-4' : linkedContainerClasses()\">\n @for (fieldNode of linkedFieldNodes(); track fieldNode.key) {\n <app-recipe-field\n [node]=\"fieldNode\"\n [field]=\"fieldTreeOf(fieldNode.key)\"\n [idPrefix]=\"idPrefix()\"\n [serverPrefix]=\"serverPrefix()\"\n [inline]=\"hideLabel()\"\n [extraMessage]=\"fieldNode.key === linkedTarget() ? linkedMessage() : undefined\"\n [extraDescribedBy]=\"\n linkedTarget() === undefined && linkedMessage() ? linkedMessageId() : undefined\n \"\n />\n }\n </div>\n @if (linkedTarget() === undefined) {\n @if (linkedMessage(); as m) {\n <app-recipe-message\n [id]=\"linkedMessageId()\"\n class=\"mt-2\"\n [severity]=\"severities.DANGER\"\n [inline]=\"true\"\n [text]=\"m.key | recipeTranslate: m.params : m.text\"\n />\n }\n }\n </fieldset>\n }\n @case (kinds.ARRAY) {\n @if (!arrayHidden()) {\n <fieldset\n class=\"relative min-w-0 rounded-lg border border-slate-200 p-3\"\n [attr.aria-describedby]=\"listMessage() ? listMessageId() : null\"\n >\n @if (n.legendKey; as legendKey) {\n <legend class=\"px-1 text-sm font-semibold text-slate-800\">\n {{ legendKey | recipeTranslate }}\n </legend>\n }\n @if (n.slot?.position === 'before') {\n <ng-container\n [ngTemplateOutlet]=\"arraySlotTemplate()\"\n [ngTemplateOutletContext]=\"arraySlotContext()\"\n />\n }\n @if (n.display === displays.TABLE) {\n <!-- Sur un écran étroit, le tableau défile dans son conteneur au lieu d'élargir la page ou de passer ses en-têtes à la ligne.\n `relative` garde dans ce conteneur le titre `sr-only` de la colonne de retrait, sinon placé hors de la page. -->\n <div class=\"relative overflow-x-auto\">\n <table [id]=\"listId()\" class=\"w-full border-collapse text-sm\">\n <thead>\n <tr class=\"text-left\">\n @for (column of tableColumns(); track $index) {\n <th\n scope=\"col\"\n class=\"px-2 py-1 font-semibold whitespace-nowrap text-slate-800\"\n >\n {{ columnLabel(column) | recipeTranslate }}\n </th>\n }\n @if (n.removable !== false && !listReadonly()) {\n <th scope=\"col\" class=\"px-2 py-1\">\n <span class=\"sr-only\">{{\n n.removeLabelKey ?? 'forms.array.remove' | recipeTranslate\n }}</span>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of arrayItems(); track item) {\n <tr class=\"border-t border-slate-100 align-top\">\n @for (column of tableColumns(); track $index) {\n <!-- Un message de la cellule ne compte pas dans la largeur de la colonne : il passe à la ligne. -->\n <td\n class=\"px-2 py-1 [&_app-recipe-message]:w-0 [&_app-recipe-message]:min-w-full\"\n >\n <app-recipe-node\n [node]=\"column\"\n [tree]=\"item\"\n [idPrefix]=\"itemPrefix(item)\"\n [serverPrefix]=\"itemServerPrefix(item)\"\n [hideLabel]=\"true\"\n />\n </td>\n }\n @if (n.removable !== false && !listReadonly()) {\n <td class=\"px-2 py-1 text-right\">\n <app-recipe-button\n [label]=\"n.removeLabelKey ?? 'forms.array.remove' | recipeTranslate\"\n [variant]=\"variants.TEXT\"\n [severity]=\"severities.DANGER\"\n (clicked)=\"removeItem(itemKey(item))\"\n />\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n } @else {\n <ol [id]=\"listId()\" class=\"flex flex-col gap-3\">\n @for (item of arrayItems(); track item) {\n <li class=\"flex flex-col gap-3 rounded-md border border-slate-100 bg-slate-50 p-3\">\n <div class=\"flex flex-wrap items-end gap-4\">\n @for (child of n.item; track $index) {\n <app-recipe-node\n [node]=\"child\"\n [tree]=\"item\"\n [idPrefix]=\"itemPrefix(item)\"\n [serverPrefix]=\"itemServerPrefix(item)\"\n />\n }\n </div>\n @if (n.removable !== false && !listReadonly()) {\n <app-recipe-button\n class=\"self-end\"\n [label]=\"n.removeLabelKey ?? 'forms.array.remove' | recipeTranslate\"\n [variant]=\"variants.TEXT\"\n [severity]=\"severities.DANGER\"\n (clicked)=\"removeItem(itemKey(item))\"\n />\n }\n </li>\n }\n </ol>\n }\n @if (n.slot?.position === 'after') {\n <ng-container\n [ngTemplateOutlet]=\"arraySlotTemplate()\"\n [ngTemplateOutletContext]=\"arraySlotContext()\"\n />\n }\n @if (listMessage(); as m) {\n <app-recipe-message\n [id]=\"listMessageId()\"\n class=\"mt-2\"\n [severity]=\"severities.DANGER\"\n [inline]=\"true\"\n [text]=\"m.key | recipeTranslate: m.params : m.text\"\n />\n }\n @if (n.addLabelKey; as addLabelKey) {\n @if (!listReadonly()) {\n <app-recipe-button\n class=\"mt-3 block\"\n [label]=\"addLabelKey | recipeTranslate\"\n [variant]=\"variants.OUTLINED\"\n [severity]=\"severities.SECONDARY\"\n (clicked)=\"addItem()\"\n />\n }\n }\n </fieldset>\n }\n }\n}\n",
|
|
6610
6737
|
dependencies: [
|
|
6611
6738
|
{
|
|
6612
6739
|
kind: "component",
|
|
@@ -6641,6 +6768,7 @@ var RecipeNodeComponent = class RecipeNodeComponent {
|
|
|
6641
6768
|
"idPrefix",
|
|
6642
6769
|
"serverPrefix",
|
|
6643
6770
|
"hideLabel",
|
|
6771
|
+
"inline",
|
|
6644
6772
|
"extraMessage",
|
|
6645
6773
|
"extraDescribedBy"
|
|
6646
6774
|
]
|
|
@@ -6705,7 +6833,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6705
6833
|
],
|
|
6706
6834
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6707
6835
|
host: { "[class]": "hostClasses()" },
|
|
6708
|
-
template: "@let n = node();\n@switch (n.kind) {\n @case (kinds.SECTION) {\n @if (!sectionHidden()) {\n <fieldset\n [id]=\"idPrefix() + '-' + n.id\"\n [class]=\"hideLegend()
|
|
6836
|
+
template: "@let n = node();\n@switch (n.kind) {\n @case (kinds.SECTION) {\n @if (!sectionHidden()) {\n <fieldset\n [id]=\"idPrefix() + '-' + n.id\"\n [class]=\"\n hideLegend()\n ? 'relative min-w-0'\n : 'relative min-w-0 rounded-lg border border-slate-200 p-4'\n \"\n >\n @if (n.legendKey; as legendKey) {\n <legend\n [class]=\"hideLegend() ? 'sr-only' : 'px-1 text-base font-semibold text-slate-900'\"\n >\n {{ legendKey | recipeTranslate }}\n </legend>\n }\n <div [class]=\"containerClasses()\">\n @for (child of n.nodes; track $index) {\n <app-recipe-node\n [node]=\"child\"\n [tree]=\"tree()\"\n [idPrefix]=\"idPrefix()\"\n [serverPrefix]=\"serverPrefix()\"\n />\n }\n </div>\n </fieldset>\n }\n }\n @case (kinds.ROW) {\n <div [class]=\"containerClasses()\">\n @for (child of n.nodes; track $index) {\n <app-recipe-node\n [node]=\"child\"\n [tree]=\"tree()\"\n [idPrefix]=\"idPrefix()\"\n [serverPrefix]=\"serverPrefix()\"\n />\n }\n </div>\n }\n @case (kinds.SECTION_GROUP) {\n <app-recipe-section-group\n [node]=\"n\"\n [tree]=\"tree()\"\n [idPrefix]=\"idPrefix()\"\n [serverPrefix]=\"serverPrefix()\"\n />\n }\n @case (kinds.FIELD) {\n <app-recipe-field\n [node]=\"n\"\n [field]=\"fieldTreeOf(n.key)\"\n [idPrefix]=\"idPrefix()\"\n [serverPrefix]=\"serverPrefix()\"\n [hideLabel]=\"hideLabel()\"\n [inline]=\"hideLabel()\"\n />\n }\n @case (kinds.LINKED) {\n <!-- Dans une cellule de tableau, l'en-tête de colonne titre le groupe : ni cadre ni légende visible, champs en ligne. -->\n <fieldset\n [class]=\"\n hideLabel() ? 'relative min-w-0' : 'relative min-w-0 rounded-lg border border-slate-200 p-3'\n \"\n [attr.aria-describedby]=\"\n linkedTarget() === undefined && linkedMessage() ? linkedMessageId() : null\n \"\n >\n <legend [class]=\"hideLabel() ? 'sr-only' : 'px-1 text-sm font-semibold text-slate-800'\">\n {{ n.legendKey | recipeTranslate }}\n </legend>\n <div [class]=\"hideLabel() ? 'flex items-start gap-x-4' : linkedContainerClasses()\">\n @for (fieldNode of linkedFieldNodes(); track fieldNode.key) {\n <app-recipe-field\n [node]=\"fieldNode\"\n [field]=\"fieldTreeOf(fieldNode.key)\"\n [idPrefix]=\"idPrefix()\"\n [serverPrefix]=\"serverPrefix()\"\n [inline]=\"hideLabel()\"\n [extraMessage]=\"fieldNode.key === linkedTarget() ? linkedMessage() : undefined\"\n [extraDescribedBy]=\"\n linkedTarget() === undefined && linkedMessage() ? linkedMessageId() : undefined\n \"\n />\n }\n </div>\n @if (linkedTarget() === undefined) {\n @if (linkedMessage(); as m) {\n <app-recipe-message\n [id]=\"linkedMessageId()\"\n class=\"mt-2\"\n [severity]=\"severities.DANGER\"\n [inline]=\"true\"\n [text]=\"m.key | recipeTranslate: m.params : m.text\"\n />\n }\n }\n </fieldset>\n }\n @case (kinds.ARRAY) {\n @if (!arrayHidden()) {\n <fieldset\n class=\"relative min-w-0 rounded-lg border border-slate-200 p-3\"\n [attr.aria-describedby]=\"listMessage() ? listMessageId() : null\"\n >\n @if (n.legendKey; as legendKey) {\n <legend class=\"px-1 text-sm font-semibold text-slate-800\">\n {{ legendKey | recipeTranslate }}\n </legend>\n }\n @if (n.slot?.position === 'before') {\n <ng-container\n [ngTemplateOutlet]=\"arraySlotTemplate()\"\n [ngTemplateOutletContext]=\"arraySlotContext()\"\n />\n }\n @if (n.display === displays.TABLE) {\n <!-- Sur un écran étroit, le tableau défile dans son conteneur au lieu d'élargir la page ou de passer ses en-têtes à la ligne.\n `relative` garde dans ce conteneur le titre `sr-only` de la colonne de retrait, sinon placé hors de la page. -->\n <div class=\"relative overflow-x-auto\">\n <table [id]=\"listId()\" class=\"w-full border-collapse text-sm\">\n <thead>\n <tr class=\"text-left\">\n @for (column of tableColumns(); track $index) {\n <th\n scope=\"col\"\n class=\"px-2 py-1 font-semibold whitespace-nowrap text-slate-800\"\n >\n {{ columnLabel(column) | recipeTranslate }}\n </th>\n }\n @if (n.removable !== false && !listReadonly()) {\n <th scope=\"col\" class=\"px-2 py-1\">\n <span class=\"sr-only\">{{\n n.removeLabelKey ?? 'forms.array.remove' | recipeTranslate\n }}</span>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of arrayItems(); track item) {\n <tr class=\"border-t border-slate-100 align-top\">\n @for (column of tableColumns(); track $index) {\n <!-- Un message de la cellule ne compte pas dans la largeur de la colonne : il passe à la ligne. -->\n <td\n class=\"px-2 py-1 [&_app-recipe-message]:w-0 [&_app-recipe-message]:min-w-full\"\n >\n <app-recipe-node\n [node]=\"column\"\n [tree]=\"item\"\n [idPrefix]=\"itemPrefix(item)\"\n [serverPrefix]=\"itemServerPrefix(item)\"\n [hideLabel]=\"true\"\n />\n </td>\n }\n @if (n.removable !== false && !listReadonly()) {\n <td class=\"px-2 py-1 text-right\">\n <app-recipe-button\n [label]=\"n.removeLabelKey ?? 'forms.array.remove' | recipeTranslate\"\n [variant]=\"variants.TEXT\"\n [severity]=\"severities.DANGER\"\n (clicked)=\"removeItem(itemKey(item))\"\n />\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n } @else {\n <ol [id]=\"listId()\" class=\"flex flex-col gap-3\">\n @for (item of arrayItems(); track item) {\n <li class=\"flex flex-col gap-3 rounded-md border border-slate-100 bg-slate-50 p-3\">\n <div class=\"flex flex-wrap items-end gap-4\">\n @for (child of n.item; track $index) {\n <app-recipe-node\n [node]=\"child\"\n [tree]=\"item\"\n [idPrefix]=\"itemPrefix(item)\"\n [serverPrefix]=\"itemServerPrefix(item)\"\n />\n }\n </div>\n @if (n.removable !== false && !listReadonly()) {\n <app-recipe-button\n class=\"self-end\"\n [label]=\"n.removeLabelKey ?? 'forms.array.remove' | recipeTranslate\"\n [variant]=\"variants.TEXT\"\n [severity]=\"severities.DANGER\"\n (clicked)=\"removeItem(itemKey(item))\"\n />\n }\n </li>\n }\n </ol>\n }\n @if (n.slot?.position === 'after') {\n <ng-container\n [ngTemplateOutlet]=\"arraySlotTemplate()\"\n [ngTemplateOutletContext]=\"arraySlotContext()\"\n />\n }\n @if (listMessage(); as m) {\n <app-recipe-message\n [id]=\"listMessageId()\"\n class=\"mt-2\"\n [severity]=\"severities.DANGER\"\n [inline]=\"true\"\n [text]=\"m.key | recipeTranslate: m.params : m.text\"\n />\n }\n @if (n.addLabelKey; as addLabelKey) {\n @if (!listReadonly()) {\n <app-recipe-button\n class=\"mt-3 block\"\n [label]=\"addLabelKey | recipeTranslate\"\n [variant]=\"variants.OUTLINED\"\n [severity]=\"severities.SECONDARY\"\n (clicked)=\"addItem()\"\n />\n }\n }\n </fieldset>\n }\n }\n}\n"
|
|
6709
6837
|
}]
|
|
6710
6838
|
}],
|
|
6711
6839
|
propDecorators: {
|