@solcre-org/core-ui 2.20.22 → 2.20.23
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/assets/css/inc/components/header.css +2 -1
- package/assets/css/inc/components/native-select.css +229 -0
- package/assets/css/inc/components/ng-select.css +5 -1
- package/assets/css/main.css +1 -0
- package/fesm2022/solcre-org-core-ui.mjs +177 -20
- package/fesm2022/solcre-org-core-ui.mjs.map +1 -1
- package/index.d.ts +33 -3
- package/package.json +1 -1
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
/* ******************************************** */
|
|
2
|
+
/** COMPONENT: NATIVE SELECT (custom dropdown) */
|
|
3
|
+
/* ******************************************** */
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
/* ---- Wrapper: positioning context ---- */
|
|
7
|
+
|
|
8
|
+
.c-entry-input--native-select{
|
|
9
|
+
position: relative;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
/* ---- Wrapper state: open ---- */
|
|
14
|
+
|
|
15
|
+
.c-entry-input--native-select.is-open{
|
|
16
|
+
z-index: 10;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
/* ---- Wrapper state: disabled ---- */
|
|
21
|
+
|
|
22
|
+
.c-entry-input--native-select.is-disabled{
|
|
23
|
+
opacity: 0.6;
|
|
24
|
+
pointer-events: none;
|
|
25
|
+
cursor: not-allowed;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
/* ---- Control area (clickable trigger) ---- */
|
|
30
|
+
|
|
31
|
+
.c-native-select__control{
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-wrap: wrap;
|
|
34
|
+
align-items: center;
|
|
35
|
+
gap: 0.25em;
|
|
36
|
+
flex: 1;
|
|
37
|
+
min-height: 1.4em;
|
|
38
|
+
max-height: 5em;
|
|
39
|
+
overflow-y: auto;
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
min-width: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
/* ---- Single value ---- */
|
|
46
|
+
|
|
47
|
+
.c-native-select__single-value{
|
|
48
|
+
white-space: nowrap;
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
text-overflow: ellipsis;
|
|
51
|
+
pointer-events: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
/* ---- Placeholder ---- */
|
|
56
|
+
|
|
57
|
+
.c-native-select__placeholder{
|
|
58
|
+
color: var(--_entry-input-placeholder-color);
|
|
59
|
+
white-space: nowrap;
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
text-overflow: ellipsis;
|
|
62
|
+
pointer-events: none;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
/* ---- Multi-select chips container ---- */
|
|
67
|
+
|
|
68
|
+
.c-native-select__values{
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-wrap: wrap;
|
|
71
|
+
gap: 0.2em;
|
|
72
|
+
align-items: center;
|
|
73
|
+
flex: 1;
|
|
74
|
+
min-width: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
/* ---- Chip ---- */
|
|
79
|
+
|
|
80
|
+
.c-native-select__chip{
|
|
81
|
+
display: inline-flex;
|
|
82
|
+
align-items: center;
|
|
83
|
+
gap: 0.3em;
|
|
84
|
+
background-color: var(--form-highlighted-color, var(--color-neutral-300));
|
|
85
|
+
color: #3F4E6A;
|
|
86
|
+
border-radius: 4px;
|
|
87
|
+
padding: 0.2em 0.8em;
|
|
88
|
+
font-size: 0.9em;
|
|
89
|
+
line-height: 1.3;
|
|
90
|
+
white-space: nowrap;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
/* ---- Chip remove ---- */
|
|
95
|
+
|
|
96
|
+
.c-native-select__chip-remove{
|
|
97
|
+
display: inline-flex;
|
|
98
|
+
align-items: center;
|
|
99
|
+
justify-content: center;
|
|
100
|
+
border: none;
|
|
101
|
+
background: none;
|
|
102
|
+
padding: 0;
|
|
103
|
+
margin: 0;
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
font-size: 1.1em;
|
|
106
|
+
line-height: 1;
|
|
107
|
+
color: #3F4E6A;
|
|
108
|
+
opacity: 0.7;
|
|
109
|
+
transition: opacity 100ms ease-out;
|
|
110
|
+
-webkit-tap-highlight-color: transparent;
|
|
111
|
+
}
|
|
112
|
+
.c-native-select__chip-remove:hover{
|
|
113
|
+
opacity: 1;
|
|
114
|
+
}
|
|
115
|
+
.c-native-select__chip-remove-icon::before{
|
|
116
|
+
content: '\00d7';
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
/* ---- Search input ---- */
|
|
121
|
+
|
|
122
|
+
.c-native-select__search{
|
|
123
|
+
border: none;
|
|
124
|
+
outline: none;
|
|
125
|
+
background: transparent;
|
|
126
|
+
font: inherit;
|
|
127
|
+
color: inherit;
|
|
128
|
+
padding: 0;
|
|
129
|
+
min-width: 4em;
|
|
130
|
+
flex: 1;
|
|
131
|
+
width: 100%;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
/* ---- Clear button ---- */
|
|
136
|
+
|
|
137
|
+
.c-native-select__clear{
|
|
138
|
+
display: inline-flex;
|
|
139
|
+
align-items: center;
|
|
140
|
+
justify-content: center;
|
|
141
|
+
border: none;
|
|
142
|
+
background: none;
|
|
143
|
+
padding: 0 0.2em;
|
|
144
|
+
cursor: pointer;
|
|
145
|
+
font-size: 1.1em;
|
|
146
|
+
color: hsl(var(--_entry-input-addon-color-hsl));
|
|
147
|
+
opacity: 0.7;
|
|
148
|
+
transition: opacity 100ms ease-out, color 100ms ease-out;
|
|
149
|
+
-webkit-tap-highlight-color: transparent;
|
|
150
|
+
flex-shrink: 0;
|
|
151
|
+
}
|
|
152
|
+
.c-native-select__clear:hover{
|
|
153
|
+
opacity: 1;
|
|
154
|
+
color: var(--color-hover, var(--color-primary-400));
|
|
155
|
+
}
|
|
156
|
+
.c-native-select__clear-icon::before{
|
|
157
|
+
content: '\00d7';
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
/* ---- Arrow ---- */
|
|
162
|
+
|
|
163
|
+
.c-entry-input--native-select .c-entry-input__addon{
|
|
164
|
+
cursor: pointer;
|
|
165
|
+
}
|
|
166
|
+
.c-entry-input--native-select .c-entry-input__addon.is-flipped{
|
|
167
|
+
transform: rotate(180deg);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
/* ---- Dropdown panel ---- */
|
|
172
|
+
|
|
173
|
+
.c-native-select__dropdown{
|
|
174
|
+
position: absolute;
|
|
175
|
+
top: 100%;
|
|
176
|
+
left: 0;
|
|
177
|
+
right: 0;
|
|
178
|
+
margin-top: 0.3em;
|
|
179
|
+
z-index: 10;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.c-native-select__options{
|
|
183
|
+
background: #f2f5fa;
|
|
184
|
+
border-radius: var(--_entry-input-br, 8px);
|
|
185
|
+
padding: 0.6em;
|
|
186
|
+
box-shadow: 1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl) / 25%);
|
|
187
|
+
max-height: 16em;
|
|
188
|
+
overflow-y: auto;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
/* ---- Option items ---- */
|
|
193
|
+
|
|
194
|
+
.c-native-select__option{
|
|
195
|
+
padding: 0.6em 0.8em;
|
|
196
|
+
color: #6A788C;
|
|
197
|
+
cursor: pointer;
|
|
198
|
+
border-radius: calc(var(--_entry-input-br, 8px) * 0.6);
|
|
199
|
+
transition: background-color 100ms ease-out, color 100ms ease-out;
|
|
200
|
+
white-space: nowrap;
|
|
201
|
+
overflow: hidden;
|
|
202
|
+
text-overflow: ellipsis;
|
|
203
|
+
}
|
|
204
|
+
.c-native-select__option.is-highlighted{
|
|
205
|
+
background-color: hsl(var(--color-primary-400-hsl) / 8%);
|
|
206
|
+
color: var(--color-primary-400);
|
|
207
|
+
}
|
|
208
|
+
.c-native-select__option.is-selected{
|
|
209
|
+
color: var(--color-primary-400);
|
|
210
|
+
font-weight: 500;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
@media (hover: hover){
|
|
214
|
+
.c-native-select__option:hover{
|
|
215
|
+
background-color: hsl(var(--color-primary-400-hsl) / 8%);
|
|
216
|
+
color: var(--color-primary-400);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
/* ---- No results ---- */
|
|
222
|
+
|
|
223
|
+
.c-native-select__no-results{
|
|
224
|
+
padding: 0.8em;
|
|
225
|
+
text-align: center;
|
|
226
|
+
color: hsl(from hsl(var(--color-context-error-hsl)) h s 60%);
|
|
227
|
+
background-color: hsl(from hsl(var(--color-context-error-hsl)) h s 94%);
|
|
228
|
+
border-radius: var(--_entry-input-br, 8px);
|
|
229
|
+
}
|
package/assets/css/main.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { HostBinding, Directive, input, Component, inject, output, computed, signal, effect, ViewChild, Pipe, Injectable, ElementRef, untracked,
|
|
2
|
+
import { HostBinding, Directive, input, Component, inject, output, computed, signal, effect, HostListener, ViewChild, ViewEncapsulation, Pipe, Injectable, ElementRef, untracked, ViewContainerRef, TemplateRef, InjectionToken, ContentChild, ChangeDetectionStrategy, viewChild, ChangeDetectorRef, afterNextRender, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule, DatePipe } from '@angular/common';
|
|
5
5
|
import * as i3 from '@ngx-translate/core';
|
|
@@ -7,7 +7,7 @@ import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-transla
|
|
|
7
7
|
import * as i3$1 from '@angular/forms';
|
|
8
8
|
import { FormControl, Validators, FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
|
|
9
9
|
import * as i5 from '@ng-select/ng-select';
|
|
10
|
-
import { NgSelectModule
|
|
10
|
+
import { NgSelectModule } from '@ng-select/ng-select';
|
|
11
11
|
import { AuthService, ApiService } from '@solcre-org/core';
|
|
12
12
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
13
13
|
import { distinctUntilChanged, debounceTime, tap as tap$1, map as map$1, filter, catchError as catchError$1 } from 'rxjs/operators';
|
|
@@ -1345,13 +1345,17 @@ var DocumentPayloadMode;
|
|
|
1345
1345
|
})(DocumentPayloadMode || (DocumentPayloadMode = {}));
|
|
1346
1346
|
|
|
1347
1347
|
class SelectFieldComponent extends BaseFieldComponent {
|
|
1348
|
-
|
|
1348
|
+
elRef;
|
|
1349
|
+
searchInputRef;
|
|
1349
1350
|
field = input.required();
|
|
1350
1351
|
selectionChange = output();
|
|
1351
1352
|
isInitialized = signal(false);
|
|
1352
1353
|
hasValue = signal(false);
|
|
1353
1354
|
userHasInteracted = signal(false);
|
|
1354
1355
|
lastDynamicValue = undefined;
|
|
1356
|
+
isOpen = signal(false);
|
|
1357
|
+
searchTerm = signal('');
|
|
1358
|
+
highlightedIndex = signal(-1);
|
|
1355
1359
|
computedValue = computed(() => {
|
|
1356
1360
|
const value = this.value();
|
|
1357
1361
|
if (this.field().multiple && !Array.isArray(value)) {
|
|
@@ -1359,9 +1363,26 @@ class SelectFieldComponent extends BaseFieldComponent {
|
|
|
1359
1363
|
}
|
|
1360
1364
|
return value;
|
|
1361
1365
|
});
|
|
1366
|
+
filteredOptions = computed(() => {
|
|
1367
|
+
const options = this.field().options ?? [];
|
|
1368
|
+
const term = this.searchTerm().toLowerCase().trim();
|
|
1369
|
+
if (!term)
|
|
1370
|
+
return options;
|
|
1371
|
+
return options.filter(opt => opt.label.toLowerCase().includes(term));
|
|
1372
|
+
});
|
|
1373
|
+
selectedItems = computed(() => {
|
|
1374
|
+
const value = this.computedValue();
|
|
1375
|
+
const options = this.field().options ?? [];
|
|
1376
|
+
if (value === null || value === undefined || value === '')
|
|
1377
|
+
return [];
|
|
1378
|
+
if (this.field().multiple && Array.isArray(value)) {
|
|
1379
|
+
return options.filter(opt => value.some((v) => String(opt.value) === String(v)));
|
|
1380
|
+
}
|
|
1381
|
+
const found = options.find(opt => String(opt.value) === String(value));
|
|
1382
|
+
return found ? [found] : [];
|
|
1383
|
+
});
|
|
1362
1384
|
isPlaceholderVisible = computed(() => {
|
|
1363
|
-
|
|
1364
|
-
return !hasVal;
|
|
1385
|
+
return !this.hasValue();
|
|
1365
1386
|
});
|
|
1366
1387
|
isSearchable = computed(() => {
|
|
1367
1388
|
return this.field().searchable ?? false;
|
|
@@ -1369,8 +1390,17 @@ class SelectFieldComponent extends BaseFieldComponent {
|
|
|
1369
1390
|
isDisabled = computed(() => {
|
|
1370
1391
|
return this.mode() === ModalMode.VIEW || this.evaluateReadonly() || this.evaluateDisabled();
|
|
1371
1392
|
});
|
|
1372
|
-
|
|
1393
|
+
onDocumentClick(event) {
|
|
1394
|
+
if (this.isOpen() && this.elRef) {
|
|
1395
|
+
const target = event.target;
|
|
1396
|
+
if (!this.elRef.nativeElement.contains(target)) {
|
|
1397
|
+
this.closeDropdown();
|
|
1398
|
+
}
|
|
1399
|
+
}
|
|
1400
|
+
}
|
|
1401
|
+
constructor(elRef) {
|
|
1373
1402
|
super();
|
|
1403
|
+
this.elRef = elRef;
|
|
1374
1404
|
effect(() => {
|
|
1375
1405
|
const signalValue = this.value();
|
|
1376
1406
|
if (signalValue && signalValue !== '' && signalValue !== null && signalValue !== undefined) {
|
|
@@ -1400,7 +1430,7 @@ class SelectFieldComponent extends BaseFieldComponent {
|
|
|
1400
1430
|
if (newOpts.length === 0 && this.field().multiple && Array.isArray(this.formControl().value)) {
|
|
1401
1431
|
setTimeout(() => {
|
|
1402
1432
|
this.formControl().setValue([], { emitEvent: false });
|
|
1403
|
-
this.
|
|
1433
|
+
this.hasValue.set(false);
|
|
1404
1434
|
}, 0);
|
|
1405
1435
|
}
|
|
1406
1436
|
}
|
|
@@ -1548,9 +1578,9 @@ class SelectFieldComponent extends BaseFieldComponent {
|
|
|
1548
1578
|
isOptionSelected(optionValue) {
|
|
1549
1579
|
const currentValue = this.computedValue();
|
|
1550
1580
|
if (this.field().multiple && Array.isArray(currentValue)) {
|
|
1551
|
-
return currentValue.
|
|
1581
|
+
return currentValue.some((v) => String(v) === String(optionValue));
|
|
1552
1582
|
}
|
|
1553
|
-
return currentValue === optionValue;
|
|
1583
|
+
return String(currentValue) === String(optionValue);
|
|
1554
1584
|
}
|
|
1555
1585
|
onBlurInput() {
|
|
1556
1586
|
this.onBlur();
|
|
@@ -1631,15 +1661,142 @@ class SelectFieldComponent extends BaseFieldComponent {
|
|
|
1631
1661
|
onSelectClear() {
|
|
1632
1662
|
this.hasValue.set(false);
|
|
1633
1663
|
}
|
|
1634
|
-
|
|
1635
|
-
|
|
1664
|
+
toggleDropdown(event) {
|
|
1665
|
+
event.preventDefault();
|
|
1666
|
+
event.stopPropagation();
|
|
1667
|
+
if (this.isDisabled() || this.isReadonly())
|
|
1668
|
+
return;
|
|
1669
|
+
if (this.isOpen()) {
|
|
1670
|
+
this.closeDropdown();
|
|
1671
|
+
}
|
|
1672
|
+
else {
|
|
1673
|
+
this.openDropdown();
|
|
1674
|
+
}
|
|
1675
|
+
}
|
|
1676
|
+
openDropdown() {
|
|
1677
|
+
this.isOpen.set(true);
|
|
1678
|
+
this.searchTerm.set('');
|
|
1679
|
+
this.highlightedIndex.set(-1);
|
|
1680
|
+
if (this.isSearchable()) {
|
|
1681
|
+
setTimeout(() => this.searchInputRef?.nativeElement?.focus(), 0);
|
|
1682
|
+
}
|
|
1683
|
+
}
|
|
1684
|
+
closeDropdown() {
|
|
1685
|
+
this.isOpen.set(false);
|
|
1686
|
+
this.searchTerm.set('');
|
|
1687
|
+
this.highlightedIndex.set(-1);
|
|
1688
|
+
}
|
|
1689
|
+
onSearchInput(event) {
|
|
1690
|
+
const value = event.target.value;
|
|
1691
|
+
this.searchTerm.set(value);
|
|
1692
|
+
this.highlightedIndex.set(0);
|
|
1693
|
+
}
|
|
1694
|
+
selectOption(option, event) {
|
|
1695
|
+
event?.preventDefault();
|
|
1696
|
+
event?.stopPropagation();
|
|
1697
|
+
if (this.field().multiple) {
|
|
1698
|
+
const current = Array.isArray(this.computedValue()) ? [...this.computedValue()] : [];
|
|
1699
|
+
const idx = current.findIndex((v) => String(v) === String(option.value));
|
|
1700
|
+
if (idx >= 0) {
|
|
1701
|
+
current.splice(idx, 1);
|
|
1702
|
+
}
|
|
1703
|
+
else {
|
|
1704
|
+
current.push(option.value);
|
|
1705
|
+
}
|
|
1706
|
+
this.formControl().setValue(current);
|
|
1707
|
+
this.formControl().markAsDirty();
|
|
1708
|
+
this.onValueChange(current);
|
|
1709
|
+
this.searchTerm.set('');
|
|
1710
|
+
}
|
|
1711
|
+
else {
|
|
1712
|
+
this.formControl().setValue(option.value);
|
|
1713
|
+
this.formControl().markAsDirty();
|
|
1714
|
+
this.onValueChange(option.value);
|
|
1715
|
+
this.closeDropdown();
|
|
1716
|
+
}
|
|
1717
|
+
}
|
|
1718
|
+
removeItem(item, event) {
|
|
1719
|
+
event.preventDefault();
|
|
1720
|
+
event.stopPropagation();
|
|
1721
|
+
if (this.field().multiple) {
|
|
1722
|
+
const current = Array.isArray(this.computedValue()) ? [...this.computedValue()] : [];
|
|
1723
|
+
const filtered = current.filter((v) => String(v) !== String(item.value));
|
|
1724
|
+
this.formControl().setValue(filtered);
|
|
1725
|
+
this.formControl().markAsDirty();
|
|
1726
|
+
this.onValueChange(filtered);
|
|
1727
|
+
}
|
|
1728
|
+
}
|
|
1729
|
+
onClear(event) {
|
|
1730
|
+
event.preventDefault();
|
|
1731
|
+
event.stopPropagation();
|
|
1732
|
+
const emptyValue = this.field().multiple ? [] : null;
|
|
1733
|
+
this.formControl().setValue(emptyValue);
|
|
1734
|
+
this.formControl().markAsDirty();
|
|
1735
|
+
this.hasValue.set(false);
|
|
1736
|
+
this.onValueChange(emptyValue);
|
|
1737
|
+
this.closeDropdown();
|
|
1738
|
+
}
|
|
1739
|
+
onKeydown(event) {
|
|
1740
|
+
const options = this.filteredOptions();
|
|
1741
|
+
switch (event.key) {
|
|
1742
|
+
case 'ArrowDown':
|
|
1743
|
+
event.preventDefault();
|
|
1744
|
+
if (!this.isOpen()) {
|
|
1745
|
+
this.openDropdown();
|
|
1746
|
+
}
|
|
1747
|
+
else {
|
|
1748
|
+
this.highlightedIndex.set(Math.min(this.highlightedIndex() + 1, options.length - 1));
|
|
1749
|
+
}
|
|
1750
|
+
break;
|
|
1751
|
+
case 'ArrowUp':
|
|
1752
|
+
event.preventDefault();
|
|
1753
|
+
if (this.isOpen()) {
|
|
1754
|
+
this.highlightedIndex.set(Math.max(this.highlightedIndex() - 1, 0));
|
|
1755
|
+
}
|
|
1756
|
+
break;
|
|
1757
|
+
case 'Enter':
|
|
1758
|
+
event.preventDefault();
|
|
1759
|
+
if (this.isOpen() && this.highlightedIndex() >= 0 && this.highlightedIndex() < options.length) {
|
|
1760
|
+
this.selectOption(options[this.highlightedIndex()]);
|
|
1761
|
+
}
|
|
1762
|
+
else if (!this.isOpen()) {
|
|
1763
|
+
this.openDropdown();
|
|
1764
|
+
}
|
|
1765
|
+
break;
|
|
1766
|
+
case 'Escape':
|
|
1767
|
+
event.preventDefault();
|
|
1768
|
+
this.closeDropdown();
|
|
1769
|
+
break;
|
|
1770
|
+
case 'Tab':
|
|
1771
|
+
this.closeDropdown();
|
|
1772
|
+
break;
|
|
1773
|
+
case 'Backspace':
|
|
1774
|
+
case 'Delete':
|
|
1775
|
+
if (this.field().multiple && this.searchTerm() === '') {
|
|
1776
|
+
const current = Array.isArray(this.computedValue()) ? [...this.computedValue()] : [];
|
|
1777
|
+
if (current.length > 0) {
|
|
1778
|
+
event.preventDefault();
|
|
1779
|
+
current.pop();
|
|
1780
|
+
this.formControl().setValue(current);
|
|
1781
|
+
this.formControl().markAsDirty();
|
|
1782
|
+
this.onValueChange(current);
|
|
1783
|
+
}
|
|
1784
|
+
}
|
|
1785
|
+
break;
|
|
1786
|
+
}
|
|
1787
|
+
}
|
|
1788
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1789
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SelectFieldComponent, isStandalone: true, selector: "core-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <div\n class=\"c-entry-input c-entry-input--native-select\"\n [class.is-placeholder]=\"isPlaceholderVisible()\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\"\n [class.is-open]=\"isOpen()\"\n [class.has-value]=\"!isPlaceholderVisible()\"\n (keydown)=\"onKeydown($event)\"\n >\n <!-- Selected values / search input area -->\n <div class=\"c-native-select__control\" (click)=\"toggleDropdown($event)\">\n @if (field().multiple) {\n @if (selectedItems().length > 0 || (isSearchable() && isOpen())) {\n <!-- Multi-select: chips + inline search -->\n <div class=\"c-native-select__values\">\n @for (item of selectedItems(); track item.value) {\n <span class=\"c-native-select__chip\">\n {{ item.label | translate }}\n @if (!isDisabled() && !isReadonly()) {\n <span\n class=\"c-native-select__chip-remove\"\n (click)=\"removeItem(item, $event)\"\n role=\"button\"\n aria-label=\"Remove\"\n ><span class=\"c-native-select__chip-remove-icon\"></span></span>\n }\n </span>\n }\n @if (isSearchable() && isOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"c-native-select__search\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchInput($event)\"\n (blur)=\"onBlurInput()\"\n autocomplete=\"off\"\n />\n }\n </div>\n } @else {\n <span class=\"c-native-select__placeholder\">{{ (field().placeholder ?? '') | translate }}</span>\n }\n } @else {\n <!-- Single select -->\n @if (isSearchable() && isOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"c-native-select__search\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchInput($event)\"\n (blur)=\"onBlurInput()\"\n autocomplete=\"off\"\n />\n } @else if (selectedItems().length > 0) {\n <span class=\"c-native-select__single-value\">{{ selectedItems()[0].label | translate }}</span>\n } @else {\n <span class=\"c-native-select__placeholder\">{{ (field().placeholder ?? '') | translate }}</span>\n }\n }\n </div>\n\n <!-- Clear button -->\n @if (field().clearable !== false && !isPlaceholderVisible() && !isDisabled() && !isReadonly()) {\n <span\n class=\"c-native-select__clear\"\n (click)=\"onClear($event)\"\n role=\"button\"\n aria-label=\"Clear\"\n ><span class=\"c-native-select__clear-icon\"></span></span>\n }\n\n <!-- Arrow icon -->\n <span\n class=\"c-entry-input__addon icon-select-arrow\"\n [class.is-flipped]=\"isOpen()\"\n (click)=\"toggleDropdown($event)\"\n ></span>\n\n <!-- Dropdown panel -->\n @if (isOpen()) {\n <div class=\"c-native-select__dropdown\">\n <div class=\"c-native-select__options\">\n @if (filteredOptions().length === 0) {\n <div class=\"c-native-select__no-results\">\n {{ 'modal.field.serverSelect.noResults' | translate }}\n </div>\n } @else {\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"c-native-select__option\"\n [class.is-selected]=\"isOptionSelected(option.value)\"\n [class.is-highlighted]=\"highlightedIndex() === i\"\n (click)=\"selectOption(option, $event)\"\n (mouseenter)=\"highlightedIndex.set(i)\"\n >\n {{ option.label | translate }}\n </div>\n }\n }\n </div>\n </div>\n }\n </div>\n <core-field-errors [errors]=\"errors()\" />\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1636
1790
|
}
|
|
1637
1791
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, decorators: [{
|
|
1638
1792
|
type: Component,
|
|
1639
|
-
args: [{ selector: 'core-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule,
|
|
1640
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
1793
|
+
args: [{ selector: 'core-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <div\n class=\"c-entry-input c-entry-input--native-select\"\n [class.is-placeholder]=\"isPlaceholderVisible()\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\"\n [class.is-open]=\"isOpen()\"\n [class.has-value]=\"!isPlaceholderVisible()\"\n (keydown)=\"onKeydown($event)\"\n >\n <!-- Selected values / search input area -->\n <div class=\"c-native-select__control\" (click)=\"toggleDropdown($event)\">\n @if (field().multiple) {\n @if (selectedItems().length > 0 || (isSearchable() && isOpen())) {\n <!-- Multi-select: chips + inline search -->\n <div class=\"c-native-select__values\">\n @for (item of selectedItems(); track item.value) {\n <span class=\"c-native-select__chip\">\n {{ item.label | translate }}\n @if (!isDisabled() && !isReadonly()) {\n <span\n class=\"c-native-select__chip-remove\"\n (click)=\"removeItem(item, $event)\"\n role=\"button\"\n aria-label=\"Remove\"\n ><span class=\"c-native-select__chip-remove-icon\"></span></span>\n }\n </span>\n }\n @if (isSearchable() && isOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"c-native-select__search\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchInput($event)\"\n (blur)=\"onBlurInput()\"\n autocomplete=\"off\"\n />\n }\n </div>\n } @else {\n <span class=\"c-native-select__placeholder\">{{ (field().placeholder ?? '') | translate }}</span>\n }\n } @else {\n <!-- Single select -->\n @if (isSearchable() && isOpen()) {\n <input\n #searchInput\n type=\"text\"\n class=\"c-native-select__search\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchInput($event)\"\n (blur)=\"onBlurInput()\"\n autocomplete=\"off\"\n />\n } @else if (selectedItems().length > 0) {\n <span class=\"c-native-select__single-value\">{{ selectedItems()[0].label | translate }}</span>\n } @else {\n <span class=\"c-native-select__placeholder\">{{ (field().placeholder ?? '') | translate }}</span>\n }\n }\n </div>\n\n <!-- Clear button -->\n @if (field().clearable !== false && !isPlaceholderVisible() && !isDisabled() && !isReadonly()) {\n <span\n class=\"c-native-select__clear\"\n (click)=\"onClear($event)\"\n role=\"button\"\n aria-label=\"Clear\"\n ><span class=\"c-native-select__clear-icon\"></span></span>\n }\n\n <!-- Arrow icon -->\n <span\n class=\"c-entry-input__addon icon-select-arrow\"\n [class.is-flipped]=\"isOpen()\"\n (click)=\"toggleDropdown($event)\"\n ></span>\n\n <!-- Dropdown panel -->\n @if (isOpen()) {\n <div class=\"c-native-select__dropdown\">\n <div class=\"c-native-select__options\">\n @if (filteredOptions().length === 0) {\n <div class=\"c-native-select__no-results\">\n {{ 'modal.field.serverSelect.noResults' | translate }}\n </div>\n } @else {\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"c-native-select__option\"\n [class.is-selected]=\"isOptionSelected(option.value)\"\n [class.is-highlighted]=\"highlightedIndex() === i\"\n (click)=\"selectOption(option, $event)\"\n (mouseenter)=\"highlightedIndex.set(i)\"\n >\n {{ option.label | translate }}\n </div>\n }\n }\n </div>\n </div>\n }\n </div>\n <core-field-errors [errors]=\"errors()\" />\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
1794
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { searchInputRef: [{
|
|
1641
1795
|
type: ViewChild,
|
|
1642
|
-
args: [
|
|
1796
|
+
args: ['searchInput']
|
|
1797
|
+
}], onDocumentClick: [{
|
|
1798
|
+
type: HostListener,
|
|
1799
|
+
args: ['document:click', ['$event']]
|
|
1643
1800
|
}] } });
|
|
1644
1801
|
|
|
1645
1802
|
var AlertType;
|
|
@@ -2223,11 +2380,11 @@ class DocumentFieldComponent extends BaseFieldComponent {
|
|
|
2223
2380
|
this.documentTypeControl.setValue('');
|
|
2224
2381
|
}
|
|
2225
2382
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DocumentFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2226
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DocumentFieldComponent, isStandalone: true, selector: "core-document-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-group\">\n <label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n <div class=\"c-entry-grid\">\n <core-select-field\n [field]=\"documentFieldConfig()\"\n [value]=\"currentDocumentType()\"\n [mode]=\"mode()\"\n (valueChange)=\"onDocumentTypeChangeFromSelect($event)\"\n ></core-select-field>\n <span class=\"c-entry-input\" [style.--chars]=\"documentNumberChars()\">\n <input\n type=\"text\"\n [value]=\"documentNumberControl.value\"\n [placeholder]=\"getDocumentNumberPlaceholder() | translate\"\n [disabled]=\"isDisabled()\"\n (focus)=\"onDocumentNumberFocus()\"\n (input)=\"onDocumentNumberChange($event)\"\n (blur)=\"onDocumentNumberBlur()\"\n />\n </span>\n </div>\n @if (hasError()) {\n <core-field-errors [errors]=\"errors()\"></core-field-errors>\n }\n </label>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }, { kind: "
|
|
2383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DocumentFieldComponent, isStandalone: true, selector: "core-document-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-group\">\n <label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n <div class=\"c-entry-grid\">\n <core-select-field\n [field]=\"documentFieldConfig()\"\n [value]=\"currentDocumentType()\"\n [mode]=\"mode()\"\n (valueChange)=\"onDocumentTypeChangeFromSelect($event)\"\n ></core-select-field>\n <span class=\"c-entry-input\" [style.--chars]=\"documentNumberChars()\">\n <input\n type=\"text\"\n [value]=\"documentNumberControl.value\"\n [placeholder]=\"getDocumentNumberPlaceholder() | translate\"\n [disabled]=\"isDisabled()\"\n (focus)=\"onDocumentNumberFocus()\"\n (input)=\"onDocumentNumberChange($event)\"\n (blur)=\"onDocumentNumberBlur()\"\n />\n </span>\n </div>\n @if (hasError()) {\n <core-field-errors [errors]=\"errors()\"></core-field-errors>\n }\n </label>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }, { kind: "component", type: SelectFieldComponent, selector: "core-select-field", inputs: ["field"], outputs: ["selectionChange"] }] });
|
|
2227
2384
|
}
|
|
2228
2385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DocumentFieldComponent, decorators: [{
|
|
2229
2386
|
type: Component,
|
|
2230
|
-
args: [{ selector: 'core-document-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent,
|
|
2387
|
+
args: [{ selector: 'core-document-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent, SelectFieldComponent], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-group\">\n <label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n <div class=\"c-entry-grid\">\n <core-select-field\n [field]=\"documentFieldConfig()\"\n [value]=\"currentDocumentType()\"\n [mode]=\"mode()\"\n (valueChange)=\"onDocumentTypeChangeFromSelect($event)\"\n ></core-select-field>\n <span class=\"c-entry-input\" [style.--chars]=\"documentNumberChars()\">\n <input\n type=\"text\"\n [value]=\"documentNumberControl.value\"\n [placeholder]=\"getDocumentNumberPlaceholder() | translate\"\n [disabled]=\"isDisabled()\"\n (focus)=\"onDocumentNumberFocus()\"\n (input)=\"onDocumentNumberChange($event)\"\n (blur)=\"onDocumentNumberBlur()\"\n />\n </span>\n </div>\n @if (hasError()) {\n <core-field-errors [errors]=\"errors()\"></core-field-errors>\n }\n </label>\n</div>\n" }]
|
|
2231
2388
|
}], ctorParameters: () => [] });
|
|
2232
2389
|
|
|
2233
2390
|
// icon-compat.pipe.ts
|
|
@@ -17517,12 +17674,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
17517
17674
|
// Este archivo es generado automáticamente por scripts/update-version.js
|
|
17518
17675
|
// No edites manualmente este archivo
|
|
17519
17676
|
const VERSION = {
|
|
17520
|
-
full: '2.20.
|
|
17677
|
+
full: '2.20.23',
|
|
17521
17678
|
major: 2,
|
|
17522
17679
|
minor: 20,
|
|
17523
|
-
patch:
|
|
17524
|
-
timestamp: '2026-02-
|
|
17525
|
-
buildDate: '
|
|
17680
|
+
patch: 23,
|
|
17681
|
+
timestamp: '2026-02-13T16:34:08.285Z',
|
|
17682
|
+
buildDate: '13/2/2026'
|
|
17526
17683
|
};
|
|
17527
17684
|
|
|
17528
17685
|
class MainNavComponent {
|