@solcre-org/core-ui 2.18.5 → 2.19.1
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.
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
--_holder-px: 3rem;
|
|
12
12
|
--_holder-py: 3.6rem;
|
|
13
13
|
--_holder-br: var(--app-br, 8px);
|
|
14
|
-
--_holder-min-w: 45rem;
|
|
14
|
+
/* --_holder-min-w: 45rem; */
|
|
15
|
+
--_holder-min-w: 52rem;
|
|
15
16
|
--_holder-max-w: 60rem;
|
|
16
17
|
--_holder-w: clamp(var(--_holder-min-w), 32vw, var(--_holder-max-w));
|
|
17
18
|
--_overlay-bg: var(--app-popup-overlay, hsl(var(--color-alternative-800-hsl)/70%));
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
/* ******************************************** */
|
|
2
|
+
/** COMPONENT: LIBRERIA NG-SELECT
|
|
3
|
+
/* ******************************************** */
|
|
4
|
+
|
|
5
|
+
.ng-select .ng-select-container .ng-value-container {
|
|
6
|
+
flex-wrap: wrap;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* Placeholder styles for ng-select */
|
|
10
|
+
.c-entry-input--ng-select.is-placeholder .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder {
|
|
11
|
+
color: var(--_entry-input-placeholder-color);
|
|
12
|
+
opacity: 1;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.c-entry-input--ng-select.is-placeholder .ng-select .ng-select-container .ng-value-container .ng-input input {
|
|
16
|
+
color: var(--_entry-input-placeholder-color);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Hide placeholder when there's a value */
|
|
20
|
+
.c-entry-input--ng-select:not(.is-placeholder) .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder {
|
|
21
|
+
opacity: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.ng-select {
|
|
25
|
+
width: 100% !important;
|
|
26
|
+
display: contents;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.c-entry-input--ng-select {
|
|
30
|
+
position: relative;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.ng-dropdown-panel {
|
|
34
|
+
width: auto !important;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.c-entry-datetime .ng-dropdown-panel .scroll-host{
|
|
38
|
+
width: min-content;
|
|
39
|
+
left: 1rem;
|
|
40
|
+
text-align: center;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.c-entry-datetime .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{
|
|
44
|
+
min-width: 3em;
|
|
45
|
+
text-align: center;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.c-entry-datetime .c-entry-input{
|
|
49
|
+
--_entry-input-addon-gap: 0.15em;
|
|
50
|
+
--_entry-input-padd-x: 0.7em;
|
|
51
|
+
min-height: 3.2em;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.ng-dropdown-panel {
|
|
55
|
+
top: 0;
|
|
56
|
+
right: 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.ng-select .ng-select-container .ng-value-container .ng-value {
|
|
60
|
+
background-color: var(--form-highlighted-color, var(--color-neutral-300));
|
|
61
|
+
color: #3F4E6A;
|
|
62
|
+
border-radius: var(--_entry-input-br);
|
|
63
|
+
padding: .2em .8em;
|
|
64
|
+
margin: .2em;
|
|
65
|
+
border: none;
|
|
66
|
+
border-radius: 4px;
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
.ng-value-icon {
|
|
70
|
+
border: none;
|
|
71
|
+
padding-right: 0.4em;
|
|
72
|
+
color: #3F4E6A;
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.ng-dropdown-panel {
|
|
79
|
+
.ng-dropdown-panel-items {
|
|
80
|
+
border: none;
|
|
81
|
+
min-height: auto;
|
|
82
|
+
padding: 0;
|
|
83
|
+
position: relative;
|
|
84
|
+
right: 0;
|
|
85
|
+
margin-top: 3em;
|
|
86
|
+
box-shadow: 1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl) / 25%);
|
|
87
|
+
background-color: var(--color-neutral-100);
|
|
88
|
+
|
|
89
|
+
.ng-option {
|
|
90
|
+
padding: .6em .8em;
|
|
91
|
+
color: #6A788C;
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
transition: background-color 100ms ease-out;
|
|
94
|
+
|
|
95
|
+
&.ng-option-marked {
|
|
96
|
+
color: var(--color-primary-400);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&.ng-option-selected {
|
|
100
|
+
color: var(--color-primary-400);
|
|
101
|
+
font-weight: 500;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.ng-dropdown-panel .scrollable-content {
|
|
108
|
+
background: #f2f5fa;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.ng-dropdown-panel-items.scroll-host {
|
|
112
|
+
background: #f2f5fa;
|
|
113
|
+
padding: 1em;
|
|
114
|
+
border-radius: var(--_entry-input-br);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel {
|
|
118
|
+
opacity: 0 !important;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.c-entry-input--ng-select {
|
|
122
|
+
--_entry-input-padd-y: 0.76em;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.c-entry-input--ng-select:has(.ng-value-container .ng-value) {
|
|
126
|
+
--_entry-input-padd-y: 0.35em;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input {
|
|
130
|
+
margin-left: 8px;
|
|
131
|
+
z-index: 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input {
|
|
135
|
+
height: 100%;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound) {
|
|
139
|
+
background-color: hsl(from hsl(var(--color-context-error-hsl)) h s 94%);
|
|
140
|
+
color: hsl(from hsl(var(--color-context-error-hsl)) h s 60%);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.ng-dropdown-panel-items.scroll-host:has(.ng-select-loading) {
|
|
144
|
+
background-color: hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);
|
|
145
|
+
color: hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.ng-select.ng-select-single .ng-select-container .ng-value-container,
|
|
149
|
+
.ng-select.ng-select-single .ng-select-container .ng-value-container {
|
|
150
|
+
display: grid;
|
|
151
|
+
justify-content: start;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
|
|
155
|
+
height: -webkit-fill-available;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input {
|
|
159
|
+
height: 98%;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.ng-select.ng-select-single .ng-select-container {
|
|
163
|
+
overflow: visible;
|
|
164
|
+
position: relative;
|
|
165
|
+
cursor: pointer;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.ng-select.ng-select-single .ng-select-container::before {
|
|
169
|
+
content: "";
|
|
170
|
+
position: absolute;
|
|
171
|
+
left: calc(var(--_entry-input-padd-x)*-1);
|
|
172
|
+
right: calc(var(--_entry-input-padd-x)*-1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));
|
|
173
|
+
top: calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1), 2px)*-1);
|
|
174
|
+
bottom: calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1), 2px)*-1);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.ng-select .ng-clear-wrapper .ng-clear {
|
|
178
|
+
position: absolute;
|
|
179
|
+
top: 50%;
|
|
180
|
+
transform: translateY(-50%);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* ********************** MEDIA HOVER ********************** */
|
|
184
|
+
|
|
185
|
+
@media (hover: hover) {
|
|
186
|
+
|
|
187
|
+
.ng-select .ng-clear-wrapper:is(:hover, :focus-visible) {
|
|
188
|
+
color: var(--color-hover);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* ********************** DISABLED STATE ********************** */
|
|
194
|
+
|
|
195
|
+
.c-entry-input--ng-select.disabled {
|
|
196
|
+
opacity: 0.6;
|
|
197
|
+
pointer-events: none;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.ng-select.disabled {
|
|
201
|
+
opacity: 0.6;
|
|
202
|
+
pointer-events: none;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.ng-select.disabled .ng-select-container {
|
|
206
|
+
background-color: var(--color-neutral-100, #f5f5f5);
|
|
207
|
+
cursor: not-allowed;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.ng-select.disabled .ng-select-container .ng-value-container .ng-input input {
|
|
211
|
+
cursor: not-allowed;
|
|
212
|
+
}
|
package/assets/css/main.css
CHANGED
|
@@ -73,13 +73,14 @@
|
|
|
73
73
|
@import url(inc/components/chat-layout.css);
|
|
74
74
|
@import url(inc/components/chat-input.css);
|
|
75
75
|
@import url(inc/components/gallery.css);
|
|
76
|
-
@import url(inc/components/refresh.css);
|
|
77
|
-
@import url(inc/components/area-code.css);
|
|
78
|
-
@import url(inc/components/switch.css);
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
76
|
+
@import url(inc/components/refresh.css);
|
|
77
|
+
@import url(inc/components/area-code.css);
|
|
78
|
+
@import url(inc/components/switch.css);
|
|
79
|
+
@import url(inc/components/fixed-actions.css);
|
|
80
|
+
@import url(inc/components/header-mobile.css);
|
|
81
|
+
@import url(inc/components/mobile-nav.css);
|
|
82
|
+
@import url(inc/components/calendar.css);
|
|
83
|
+
@import url(inc/components/ng-select.css);
|
|
83
84
|
|
|
84
85
|
/* Utilities */
|
|
85
86
|
@import url(inc/utilities/headings.css);
|
|
@@ -4041,11 +4041,11 @@ class SelectFieldComponent extends BaseFieldComponent {
|
|
|
4041
4041
|
this.hasValue.set(false);
|
|
4042
4042
|
}
|
|
4043
4043
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4044
|
-
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" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- Todo: Ng select + c-entry-select -->\n\n<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--ng-select c-entry-input--ng-select-alt\"\n [class.is-placeholder]=\"isPlaceholderVisible()\"\n [class.is-invalid]=\"hasError()\"\n [class.disabled]=\"isDisabled()\"\n >\n <ng-select\n [items]=\"field().options ?? []\"\n bindValue=\"value\"\n bindLabel=\"label\"\n [multiple]=\"field().multiple\"\n [formControl]=\"formControl()\"\n [compareWith]=\"compareWith\"\n [class.has-error]=\"hasError()\"\n [class.disabled]=\"isDisabled()\"\n [readonly]=\"isReadonly()\"\n [clearable]=\"true\"\n [searchable]=\"isSearchable()\"\n (blur)=\"onBlurInput()\"\n (change)=\"onSelectChange($event)\"\n (clear)=\"onSelectClear()\"\n [placeholder]=\"\n isPlaceholderVisible() ? (field().placeholder ?? '' | translate) : ''\n \"\n >\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n {{ item.label | translate }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n {{ item.label | translate }}\n </ng-template>\n <ng-template ng-notfound-tmp>\n <span class=\"ng-select-notfound\">{{\n \"modal.field.serverSelect.noResults\" | translate\n }}</span>\n </ng-template>\n </ng-select>\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </div>\n <core-field-errors [errors]=\"errors()\" />\n</div>\n", styles: ["
|
|
4044
|
+
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" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- Todo: Ng select + c-entry-select -->\n\n<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--ng-select c-entry-input--ng-select-alt\"\n [class.is-placeholder]=\"isPlaceholderVisible()\"\n [class.is-invalid]=\"hasError()\"\n [class.disabled]=\"isDisabled()\"\n >\n <ng-select\n [items]=\"field().options ?? []\"\n bindValue=\"value\"\n bindLabel=\"label\"\n [multiple]=\"field().multiple\"\n [formControl]=\"formControl()\"\n [compareWith]=\"compareWith\"\n [class.has-error]=\"hasError()\"\n [class.disabled]=\"isDisabled()\"\n [readonly]=\"isReadonly()\"\n [clearable]=\"true\"\n [searchable]=\"isSearchable()\"\n (blur)=\"onBlurInput()\"\n (change)=\"onSelectChange($event)\"\n (clear)=\"onSelectClear()\"\n [placeholder]=\"\n isPlaceholderVisible() ? (field().placeholder ?? '' | translate) : ''\n \"\n >\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n {{ item.label | translate }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n {{ item.label | translate }}\n </ng-template>\n <ng-template ng-notfound-tmp>\n <span class=\"ng-select-notfound\">{{\n \"modal.field.serverSelect.noResults\" | translate\n }}</span>\n </ng-template>\n </ng-select>\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </div>\n <core-field-errors [errors]=\"errors()\" />\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i5.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
|
|
4045
4045
|
}
|
|
4046
4046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, decorators: [{
|
|
4047
4047
|
type: Component,
|
|
4048
|
-
args: [{ selector: 'core-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Todo: Ng select + c-entry-select -->\n\n<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--ng-select c-entry-input--ng-select-alt\"\n [class.is-placeholder]=\"isPlaceholderVisible()\"\n [class.is-invalid]=\"hasError()\"\n [class.disabled]=\"isDisabled()\"\n >\n <ng-select\n [items]=\"field().options ?? []\"\n bindValue=\"value\"\n bindLabel=\"label\"\n [multiple]=\"field().multiple\"\n [formControl]=\"formControl()\"\n [compareWith]=\"compareWith\"\n [class.has-error]=\"hasError()\"\n [class.disabled]=\"isDisabled()\"\n [readonly]=\"isReadonly()\"\n [clearable]=\"true\"\n [searchable]=\"isSearchable()\"\n (blur)=\"onBlurInput()\"\n (change)=\"onSelectChange($event)\"\n (clear)=\"onSelectClear()\"\n [placeholder]=\"\n isPlaceholderVisible() ? (field().placeholder ?? '' | translate) : ''\n \"\n >\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n {{ item.label | translate }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n {{ item.label | translate }}\n </ng-template>\n <ng-template ng-notfound-tmp>\n <span class=\"ng-select-notfound\">{{\n \"modal.field.serverSelect.noResults\" | translate\n }}</span>\n </ng-template>\n </ng-select>\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </div>\n <core-field-errors [errors]=\"errors()\" />\n</div>\n"
|
|
4048
|
+
args: [{ selector: 'core-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Todo: Ng select + c-entry-select -->\n\n<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--ng-select c-entry-input--ng-select-alt\"\n [class.is-placeholder]=\"isPlaceholderVisible()\"\n [class.is-invalid]=\"hasError()\"\n [class.disabled]=\"isDisabled()\"\n >\n <ng-select\n [items]=\"field().options ?? []\"\n bindValue=\"value\"\n bindLabel=\"label\"\n [multiple]=\"field().multiple\"\n [formControl]=\"formControl()\"\n [compareWith]=\"compareWith\"\n [class.has-error]=\"hasError()\"\n [class.disabled]=\"isDisabled()\"\n [readonly]=\"isReadonly()\"\n [clearable]=\"true\"\n [searchable]=\"isSearchable()\"\n (blur)=\"onBlurInput()\"\n (change)=\"onSelectChange($event)\"\n (clear)=\"onSelectClear()\"\n [placeholder]=\"\n isPlaceholderVisible() ? (field().placeholder ?? '' | translate) : ''\n \"\n >\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n {{ item.label | translate }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n {{ item.label | translate }}\n </ng-template>\n <ng-template ng-notfound-tmp>\n <span class=\"ng-select-notfound\">{{\n \"modal.field.serverSelect.noResults\" | translate\n }}</span>\n </ng-template>\n </ng-select>\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </div>\n <core-field-errors [errors]=\"errors()\" />\n</div>\n" }]
|
|
4049
4049
|
}], ctorParameters: () => [], propDecorators: { ngSelect: [{
|
|
4050
4050
|
type: ViewChild,
|
|
4051
4051
|
args: [NgSelectComponent]
|
|
@@ -4296,14 +4296,34 @@ class ServerSelectFieldComponent extends BaseFieldComponent {
|
|
|
4296
4296
|
this.updateItemsWithValue(value);
|
|
4297
4297
|
}
|
|
4298
4298
|
});
|
|
4299
|
-
this.searchInput$.pipe(debounceTime$1(300), distinctUntilChanged$1(), tap(() => {
|
|
4299
|
+
this.searchInput$.pipe(debounceTime$1(300), distinctUntilChanged$1(), tap((term) => {
|
|
4300
4300
|
this.isLoadingSignal.set(true);
|
|
4301
|
-
|
|
4301
|
+
if (term) {
|
|
4302
|
+
this.hasSearchedSignal.set(true);
|
|
4303
|
+
}
|
|
4302
4304
|
}), switchMap(term => {
|
|
4303
4305
|
const endpointConfig = this.field().endpoint;
|
|
4304
4306
|
const endpoint = typeof endpointConfig === 'function' ? endpointConfig(this.getCurrentRowData()) : endpointConfig;
|
|
4305
4307
|
const minSearchLength = this.field().minSearchLength ?? 2;
|
|
4306
|
-
if (!
|
|
4308
|
+
if (!term) {
|
|
4309
|
+
this.hasSearchedSignal.set(false);
|
|
4310
|
+
this.isLoadingSignal.set(false);
|
|
4311
|
+
this.lastSearchResultsSignal.set([]);
|
|
4312
|
+
let baseItems = [];
|
|
4313
|
+
const field = this.field();
|
|
4314
|
+
if (field.options && field.options.length > 0) {
|
|
4315
|
+
baseItems = field.options.map(option => ({
|
|
4316
|
+
[field.bindValue ?? 'id']: option.value,
|
|
4317
|
+
[field.bindLabel ?? 'name']: option.label,
|
|
4318
|
+
...option
|
|
4319
|
+
}));
|
|
4320
|
+
}
|
|
4321
|
+
else if (field.preloadedOptions && field.preloadedOptions.length > 0) {
|
|
4322
|
+
baseItems = field.preloadedOptions;
|
|
4323
|
+
}
|
|
4324
|
+
return of(baseItems);
|
|
4325
|
+
}
|
|
4326
|
+
if (!endpoint) {
|
|
4307
4327
|
this.isLoadingSignal.set(false);
|
|
4308
4328
|
return of([]);
|
|
4309
4329
|
}
|
|
@@ -4589,16 +4609,23 @@ class ServerSelectFieldComponent extends BaseFieldComponent {
|
|
|
4589
4609
|
onSearch(event) {
|
|
4590
4610
|
const minSearchLength = this.field().minSearchLength ?? 2;
|
|
4591
4611
|
if (!event.term) {
|
|
4592
|
-
|
|
4593
|
-
|
|
4594
|
-
|
|
4595
|
-
|
|
4612
|
+
this.lastSearchResultsSignal.set([]);
|
|
4613
|
+
this.hasSearchedSignal.set(false);
|
|
4614
|
+
this.isLoadingSignal.set(false);
|
|
4615
|
+
let baseItems = [];
|
|
4616
|
+
const field = this.field();
|
|
4617
|
+
if (field.options && field.options.length > 0) {
|
|
4618
|
+
baseItems = field.options.map(option => ({
|
|
4619
|
+
[field.bindValue ?? 'id']: option.value,
|
|
4620
|
+
[field.bindLabel ?? 'name']: option.label,
|
|
4621
|
+
...option
|
|
4622
|
+
}));
|
|
4596
4623
|
}
|
|
4597
|
-
else {
|
|
4598
|
-
|
|
4599
|
-
this.itemsSignal.set(selectedItems);
|
|
4600
|
-
this.hasSearchedSignal.set(false);
|
|
4624
|
+
else if (field.preloadedOptions && field.preloadedOptions.length > 0) {
|
|
4625
|
+
baseItems = field.preloadedOptions;
|
|
4601
4626
|
}
|
|
4627
|
+
const mergedItems = this.mergeWithSelectedItems(baseItems);
|
|
4628
|
+
this.itemsSignal.set(mergedItems);
|
|
4602
4629
|
return;
|
|
4603
4630
|
}
|
|
4604
4631
|
if (event.term.length < minSearchLength) {
|
|
@@ -16886,11 +16913,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
16886
16913
|
// Este archivo es generado automáticamente por scripts/update-version.js
|
|
16887
16914
|
// No edites manualmente este archivo
|
|
16888
16915
|
const VERSION = {
|
|
16889
|
-
full: '2.
|
|
16916
|
+
full: '2.19.1',
|
|
16890
16917
|
major: 2,
|
|
16891
|
-
minor:
|
|
16892
|
-
patch:
|
|
16893
|
-
timestamp: '2026-01-
|
|
16918
|
+
minor: 19,
|
|
16919
|
+
patch: 1,
|
|
16920
|
+
timestamp: '2026-01-13T17:17:45.234Z',
|
|
16894
16921
|
buildDate: '13/1/2026'
|
|
16895
16922
|
};
|
|
16896
16923
|
|