@solcre-org/core-ui 2.12.41 → 2.12.42

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.
@@ -163,6 +163,18 @@ class BaseFieldComponent {
163
163
  }
164
164
  return readonly || false;
165
165
  }
166
+ evaluateDisabled() {
167
+ const disabled = this.field().disabled;
168
+ if (typeof disabled === 'function') {
169
+ try {
170
+ return disabled(this.formValue());
171
+ }
172
+ catch {
173
+ return false;
174
+ }
175
+ }
176
+ return disabled || false;
177
+ }
166
178
  hasError = computed(() => {
167
179
  return this.errors().length > 0;
168
180
  });
@@ -2170,6 +2182,9 @@ class SelectFieldComponent extends BaseFieldComponent {
2170
2182
  isSearchable = computed(() => {
2171
2183
  return this.field().searchable ?? false;
2172
2184
  });
2185
+ isDisabled = computed(() => {
2186
+ return this.mode() === ModalMode.VIEW || this.evaluateReadonly() || this.evaluateDisabled();
2187
+ });
2173
2188
  constructor() {
2174
2189
  super();
2175
2190
  effect(() => {
@@ -2180,7 +2195,7 @@ class SelectFieldComponent extends BaseFieldComponent {
2180
2195
  }
2181
2196
  });
2182
2197
  effect(() => {
2183
- const shouldDisable = this.mode() === ModalMode.VIEW || this.evaluateReadonly();
2198
+ const shouldDisable = this.mode() === ModalMode.VIEW || this.evaluateReadonly() || this.evaluateDisabled();
2184
2199
  const control = this.formControl();
2185
2200
  if (shouldDisable && control.enabled) {
2186
2201
  control.disable();
@@ -2420,11 +2435,11 @@ class SelectFieldComponent extends BaseFieldComponent {
2420
2435
  this.hasValue.set(false);
2421
2436
  }
2422
2437
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2423
- 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 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 <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 [readonly]=\"field().readonly\"\n [clearable]=\"true\"\n [searchable]=\"isSearchable()\"\n (blur)=\"onBlurInput()\"\n (change)=\"onSelectChange($event)\"\n (clear)=\"onSelectClear()\"\n [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? '') | translate) : ''\"\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\">{{ 'modal.field.serverSelect.noResults' | translate }}</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>", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid;justify-content:start}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.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"] }] });
2438
+ 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 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 <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]=\"isPlaceholderVisible() ? ((field().placeholder ?? '') | translate) : ''\"\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\">{{ 'modal.field.serverSelect.noResults' | translate }}</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>", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid;justify-content:start}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}.c-entry-input--ng-select.disabled{opacity:.6;pointer-events:none}::ng-deep .ng-select.disabled{opacity:.6;pointer-events:none}::ng-deep .ng-select.disabled .ng-select-container{background-color:var(--color-neutral-100, #f5f5f5);cursor:not-allowed}::ng-deep .ng-select.disabled .ng-select-container .ng-value-container .ng-input input{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.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"] }] });
2424
2439
  }
2425
2440
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, decorators: [{
2426
2441
  type: Component,
2427
- 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 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 <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 [readonly]=\"field().readonly\"\n [clearable]=\"true\"\n [searchable]=\"isSearchable()\"\n (blur)=\"onBlurInput()\"\n (change)=\"onSelectChange($event)\"\n (clear)=\"onSelectClear()\"\n [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? '') | translate) : ''\"\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\">{{ 'modal.field.serverSelect.noResults' | translate }}</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>", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid;justify-content:start}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"] }]
2442
+ 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 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 <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]=\"isPlaceholderVisible() ? ((field().placeholder ?? '') | translate) : ''\"\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\">{{ 'modal.field.serverSelect.noResults' | translate }}</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>", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid;justify-content:start}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}.c-entry-input--ng-select.disabled{opacity:.6;pointer-events:none}::ng-deep .ng-select.disabled{opacity:.6;pointer-events:none}::ng-deep .ng-select.disabled .ng-select-container{background-color:var(--color-neutral-100, #f5f5f5);cursor:not-allowed}::ng-deep .ng-select.disabled .ng-select-container .ng-value-container .ng-input input{cursor:not-allowed}\n"] }]
2428
2443
  }], ctorParameters: () => [], propDecorators: { ngSelect: [{
2429
2444
  type: ViewChild,
2430
2445
  args: [NgSelectComponent]
@@ -4659,6 +4674,9 @@ class GenericTabsComponent {
4659
4674
  if (tab.disabled && this.config().disabledClass) {
4660
4675
  classes.push(this.config().disabledClass);
4661
4676
  }
4677
+ if (this.hasTabErrors()(tab.id)) {
4678
+ classes.push('has-error');
4679
+ }
4662
4680
  if (tab.customClass) {
4663
4681
  classes.push(tab.customClass);
4664
4682
  }
@@ -5232,11 +5250,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
5232
5250
  }]
5233
5251
  }] });
5234
5252
 
5253
+ var AlertType;
5254
+ (function (AlertType) {
5255
+ AlertType["DEFAULT"] = "default";
5256
+ AlertType["ERROR"] = "error";
5257
+ AlertType["SUCCESS"] = "success";
5258
+ AlertType["HIGHLIGHTED"] = "highlight";
5259
+ AlertType["WAITING"] = "waiting";
5260
+ })(AlertType || (AlertType = {}));
5261
+
5262
+ class AlertService {
5263
+ alerts = signal([]);
5264
+ alerts$ = this.alerts.asReadonly();
5265
+ show(alert) {
5266
+ const defaultConfig = {
5267
+ autoClose: true,
5268
+ duration: 5000,
5269
+ icon: this.getDefaultIcon(alert.type),
5270
+ inBottom: false
5271
+ };
5272
+ const newAlert = { ...defaultConfig, ...alert };
5273
+ this.alerts.update(alerts => [...alerts, newAlert]);
5274
+ if (newAlert.autoClose) {
5275
+ setTimeout(() => {
5276
+ this.remove(newAlert);
5277
+ }, newAlert.duration);
5278
+ }
5279
+ }
5280
+ remove(alertToRemove) {
5281
+ this.alerts.update(alerts => alerts.filter(alert => alert !== alertToRemove));
5282
+ }
5283
+ getDefaultIcon(type) {
5284
+ switch (type) {
5285
+ case AlertType.SUCCESS:
5286
+ return 'icon-check';
5287
+ case AlertType.ERROR:
5288
+ return 'icon-alert';
5289
+ case AlertType.HIGHLIGHTED:
5290
+ return 'icon-alert';
5291
+ case AlertType.WAITING:
5292
+ return 'icon-clock';
5293
+ case AlertType.DEFAULT:
5294
+ return 'icon-check';
5295
+ default:
5296
+ return 'icon-alert';
5297
+ }
5298
+ }
5299
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
5300
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AlertService, providedIn: 'root' });
5301
+ }
5302
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AlertService, decorators: [{
5303
+ type: Injectable,
5304
+ args: [{
5305
+ providedIn: 'root'
5306
+ }]
5307
+ }] });
5308
+
5235
5309
  class GenericModalComponent {
5236
5310
  elementRef = inject(ElementRef);
5237
5311
  formBuilder = inject(FormBuilder);
5238
5312
  domSanitizer = inject(DomSanitizer);
5239
5313
  confirmationDialogService = inject(ConfirmationDialogService);
5314
+ alertService = inject(AlertService);
5240
5315
  ModalMode = ModalMode;
5241
5316
  FieldType = FieldType;
5242
5317
  isClosing = signal(false);
@@ -5453,7 +5528,7 @@ class GenericModalComponent {
5453
5528
  }));
5454
5529
  closeButtonConfig = computed(() => ({
5455
5530
  type: ButtonType.ICON,
5456
- icon: 'icon-cross',
5531
+ icon: 'icon-cross-thin',
5457
5532
  ariaLabel: 'modal.close',
5458
5533
  customClass: 'c-modal__close'
5459
5534
  }));
@@ -5919,6 +5994,13 @@ class GenericModalComponent {
5919
5994
  });
5920
5995
  this.validateAllFields();
5921
5996
  if (this.hasErrors()) {
5997
+ this.alertService.show({
5998
+ type: AlertType.ERROR,
5999
+ message: 'modal.validationErrors',
6000
+ autoClose: true,
6001
+ duration: 5000,
6002
+ inBottom: true
6003
+ });
5922
6004
  return;
5923
6005
  }
5924
6006
  const data = this.editedData();
@@ -6091,9 +6173,31 @@ class GenericModalComponent {
6091
6173
  }
6092
6174
  }
6093
6175
  onTabChange(tabId) {
6176
+ const currentTabId = this.activeTabId();
6177
+ if (currentTabId && this.hasTabErrors(currentTabId)) {
6178
+ this.alertService.show({
6179
+ type: AlertType.ERROR,
6180
+ message: 'modal.validation.tabSwitchError',
6181
+ autoClose: true,
6182
+ duration: 5000,
6183
+ inBottom: true
6184
+ });
6185
+ return;
6186
+ }
6094
6187
  this.activeTabId.set(tabId);
6095
6188
  }
6096
6189
  onGenericTabChange(tab) {
6190
+ const currentTabId = this.activeTabId();
6191
+ if (currentTabId && this.hasTabErrors(currentTabId)) {
6192
+ this.alertService.show({
6193
+ type: AlertType.ERROR,
6194
+ message: 'modal.validation.tabSwitchError',
6195
+ autoClose: true,
6196
+ duration: 5000,
6197
+ inBottom: true
6198
+ });
6199
+ return;
6200
+ }
6097
6201
  this.activeTabId.set(tab.id);
6098
6202
  }
6099
6203
  onStepChange(stepId) {
@@ -6119,6 +6223,13 @@ class GenericModalComponent {
6119
6223
  });
6120
6224
  this.validateCurrentStepFields();
6121
6225
  if (!this.canGoToNextStep()) {
6226
+ this.alertService.show({
6227
+ type: AlertType.ERROR,
6228
+ message: 'modal.stepErrors',
6229
+ autoClose: true,
6230
+ duration: 5000,
6231
+ inBottom: true
6232
+ });
6122
6233
  return;
6123
6234
  }
6124
6235
  }
@@ -6137,6 +6248,15 @@ class GenericModalComponent {
6137
6248
  if (!this.hasErrors()) {
6138
6249
  this.onSave();
6139
6250
  }
6251
+ else {
6252
+ this.alertService.show({
6253
+ type: AlertType.ERROR,
6254
+ message: 'modal.validationErrors',
6255
+ autoClose: true,
6256
+ duration: 5000,
6257
+ inBottom: true
6258
+ });
6259
+ }
6140
6260
  }
6141
6261
  }
6142
6262
  hasTabErrors(tabId) {
@@ -6287,62 +6407,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
6287
6407
  }]
6288
6408
  }] });
6289
6409
 
6290
- var AlertType;
6291
- (function (AlertType) {
6292
- AlertType["DEFAULT"] = "default";
6293
- AlertType["ERROR"] = "error";
6294
- AlertType["SUCCESS"] = "success";
6295
- AlertType["HIGHLIGHTED"] = "highlight";
6296
- AlertType["WAITING"] = "waiting";
6297
- })(AlertType || (AlertType = {}));
6298
-
6299
- class AlertService {
6300
- alerts = signal([]);
6301
- alerts$ = this.alerts.asReadonly();
6302
- show(alert) {
6303
- const defaultConfig = {
6304
- autoClose: true,
6305
- duration: 5000,
6306
- icon: this.getDefaultIcon(alert.type),
6307
- inBottom: false
6308
- };
6309
- const newAlert = { ...defaultConfig, ...alert };
6310
- this.alerts.update(alerts => [...alerts, newAlert]);
6311
- if (newAlert.autoClose) {
6312
- setTimeout(() => {
6313
- this.remove(newAlert);
6314
- }, newAlert.duration);
6315
- }
6316
- }
6317
- remove(alertToRemove) {
6318
- this.alerts.update(alerts => alerts.filter(alert => alert !== alertToRemove));
6319
- }
6320
- getDefaultIcon(type) {
6321
- switch (type) {
6322
- case AlertType.SUCCESS:
6323
- return 'icon-check';
6324
- case AlertType.ERROR:
6325
- return 'icon-alert';
6326
- case AlertType.HIGHLIGHTED:
6327
- return 'icon-alert';
6328
- case AlertType.WAITING:
6329
- return 'icon-clock';
6330
- case AlertType.DEFAULT:
6331
- return 'icon-check';
6332
- default:
6333
- return 'icon-alert';
6334
- }
6335
- }
6336
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
6337
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AlertService, providedIn: 'root' });
6338
- }
6339
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AlertService, decorators: [{
6340
- type: Injectable,
6341
- args: [{
6342
- providedIn: 'root'
6343
- }]
6344
- }] });
6345
-
6346
6410
  class PermissionModel {
6347
6411
  id;
6348
6412
  name;
@@ -7754,7 +7818,7 @@ class ModelApiService {
7754
7818
  : this.apiService.createObj(endpoint, item, false);
7755
7819
  return createCall.pipe(map((res) => modelFactory(res.data)), tap(createdItem => {
7756
7820
  const currentData = this.dataSubject.value;
7757
- this.dataSubject.next({ ...currentData, items: [...currentData.items, createdItem] });
7821
+ this.dataSubject.next({ ...currentData, items: [createdItem, ...currentData.items] });
7758
7822
  this.alertService.show({
7759
7823
  type: AlertType.DEFAULT,
7760
7824
  message: 'commons.notifications.SUCCESS_CREATE',
@@ -8840,7 +8904,7 @@ class FilterModalComponent {
8840
8904
  });
8841
8905
  closeButtonConfig = computed(() => ({
8842
8906
  type: ButtonType.ICON,
8843
- icon: 'icon-cross',
8907
+ icon: 'icon-cross-thin',
8844
8908
  ariaLabel: 'common.close',
8845
8909
  customClass: 'c-modal__close'
8846
8910
  }));
@@ -9248,13 +9312,13 @@ class TableActionService {
9248
9312
  this.modalFieldsToShowSubject.next([]);
9249
9313
  this.modalTitleSubject.next('');
9250
9314
  }
9251
- triggerAction(action, row, fields = []) {
9315
+ triggerAction(action, row, fields = [], customTitle) {
9252
9316
  if (row && (action === TableAction.VIEW || action === TableAction.EDIT)) {
9253
- this.openModal(action === TableAction.VIEW ? ModalMode.VIEW : ModalMode.EDIT, row, fields);
9317
+ this.openModal(action === TableAction.VIEW ? ModalMode.VIEW : ModalMode.EDIT, row, fields, customTitle);
9254
9318
  return null;
9255
9319
  }
9256
9320
  else if (action === TableAction.CREATE) {
9257
- this.openModal(ModalMode.CREATE, row || {}, fields);
9321
+ this.openModal(ModalMode.CREATE, row || {}, fields, customTitle);
9258
9322
  return null;
9259
9323
  }
9260
9324
  else if (row) {
@@ -9490,6 +9554,7 @@ class HeaderService {
9490
9554
  customTemplate = signal(null);
9491
9555
  filterButtonConfig = signal(undefined);
9492
9556
  createButtonConfig = signal(undefined);
9557
+ createButtonText = signal(undefined);
9493
9558
  globalCustomClass = signal('');
9494
9559
  headerOutside = signal(false);
9495
9560
  getHeaderOutside() {
@@ -9553,6 +9618,7 @@ class HeaderService {
9553
9618
  this.customTemplate.set(null);
9554
9619
  this.filterButtonConfig.set(undefined);
9555
9620
  this.createButtonConfig.set(undefined);
9621
+ this.createButtonText.set(undefined);
9556
9622
  this.globalCustomClass.set('');
9557
9623
  this.headerOutside.set(false);
9558
9624
  }
@@ -9589,6 +9655,8 @@ class HeaderService {
9589
9655
  this.filterButtonConfig.set(config.filterButtonConfig);
9590
9656
  if (config.createButtonConfig !== undefined)
9591
9657
  this.createButtonConfig.set(config.createButtonConfig);
9658
+ if (config.createButtonText !== undefined)
9659
+ this.createButtonText.set(config.createButtonText);
9592
9660
  if (config.globalCustomClass !== undefined)
9593
9661
  this.globalCustomClass.set(config.globalCustomClass);
9594
9662
  if (config.headerOutside !== undefined)
@@ -9636,12 +9704,18 @@ class HeaderService {
9636
9704
  getCreateButtonConfig() {
9637
9705
  return this.createButtonConfig;
9638
9706
  }
9707
+ getCreateButtonText() {
9708
+ return this.createButtonText;
9709
+ }
9639
9710
  getGlobalCustomClass() {
9640
9711
  return this.globalCustomClass;
9641
9712
  }
9642
9713
  setGlobalCustomClass(customClass) {
9643
9714
  this.globalCustomClass.set(customClass);
9644
9715
  }
9716
+ setCreateButtonText(text) {
9717
+ this.createButtonText.set(text);
9718
+ }
9645
9719
  getOrderedElements() {
9646
9720
  const order = this.headerOrder();
9647
9721
  if (!order || !order.useCustomOrder || !order.elements) {
@@ -10374,6 +10448,7 @@ class GenericTableComponent {
10374
10448
  showCreateButton = input(true);
10375
10449
  filterButtonConfig = input(undefined);
10376
10450
  createButtonConfig = input(undefined);
10451
+ createButtonText = input(undefined);
10377
10452
  dataInput = input([]);
10378
10453
  customFilters = input([]);
10379
10454
  enablePagination = input(true);
@@ -10440,6 +10515,7 @@ class GenericTableComponent {
10440
10515
  originalUnsortedData = signal([]);
10441
10516
  selectedRows = signal([]);
10442
10517
  expandedRows = signal(new Set());
10518
+ newlyModifiedItems = signal(new Set());
10443
10519
  regularCustomActions = computed(() => {
10444
10520
  const actions = this.customActions().filter(action => !action.isExtra);
10445
10521
  return actions;
@@ -10879,7 +10955,8 @@ class GenericTableComponent {
10879
10955
  }
10880
10956
  triggerAction(action, row) {
10881
10957
  if (this.endpoint() && this.modelFactory()) {
10882
- const result = this.tableActionService.triggerAction(action, row, this.allModalFields());
10958
+ const customTitle = action === TableAction.CREATE ? this.createButtonText() : undefined;
10959
+ const result = this.tableActionService.triggerAction(action, row, this.allModalFields(), customTitle);
10883
10960
  if (result) {
10884
10961
  if (action === TableAction.DELETE && row) {
10885
10962
  this.confirmationDialogService
@@ -11087,7 +11164,7 @@ class GenericTableComponent {
11087
11164
  this.modelApiService.createItem(this.endpoint(), payload, this.modelFactory()).subscribe({
11088
11165
  next: (createdItem) => {
11089
11166
  this.dataCreated.emit(updatedData);
11090
- this.sortDataByReference();
11167
+ this.markItemAsNewlyModified(createdItem.getId());
11091
11168
  this.tableActionService.closeModal();
11092
11169
  },
11093
11170
  error: (error) => {
@@ -11100,6 +11177,7 @@ class GenericTableComponent {
11100
11177
  this.modelApiService.updateItem(this.endpoint(), updatedData.getId(), payload, this.modelFactory()).subscribe({
11101
11178
  next: (updatedItem) => {
11102
11179
  this.dataUpdated.emit(updatedData);
11180
+ this.markItemAsNewlyModified(updatedData.getId());
11103
11181
  this.sortDataByReference();
11104
11182
  this.tableActionService.closeModal();
11105
11183
  },
@@ -11109,6 +11187,18 @@ class GenericTableComponent {
11109
11187
  });
11110
11188
  }
11111
11189
  }
11190
+ markItemAsNewlyModified(itemId) {
11191
+ const currentModified = this.newlyModifiedItems();
11192
+ const updatedModified = new Set(currentModified);
11193
+ updatedModified.add(itemId);
11194
+ this.newlyModifiedItems.set(updatedModified);
11195
+ setTimeout(() => {
11196
+ const currentModified = this.newlyModifiedItems();
11197
+ const updatedModified = new Set(currentModified);
11198
+ updatedModified.delete(itemId);
11199
+ this.newlyModifiedItems.set(updatedModified);
11200
+ }, 2000);
11201
+ }
11112
11202
  closeModal() {
11113
11203
  this.tableActionService.closeModal();
11114
11204
  }
@@ -11213,14 +11303,18 @@ class GenericTableComponent {
11213
11303
  : (config.expandIcon || 'icon-info');
11214
11304
  }
11215
11305
  getRowClasses(row) {
11306
+ const classes = [];
11307
+ if (this.newlyModifiedItems().has(row.getId())) {
11308
+ classes.push('is-newly-modified');
11309
+ }
11216
11310
  const rowConfigs = this.rowStyleConfigs();
11217
- if (!rowConfigs || rowConfigs.length === 0) {
11218
- return '';
11311
+ if (rowConfigs && rowConfigs.length > 0) {
11312
+ const applicableConfigs = rowConfigs
11313
+ .filter(config => config.condition(row))
11314
+ .sort((a, b) => (b.priority || 0) - (a.priority || 0));
11315
+ classes.push(...applicableConfigs.map(config => config.className));
11219
11316
  }
11220
- const applicableConfigs = rowConfigs
11221
- .filter(config => config.condition(row))
11222
- .sort((a, b) => (b.priority || 0) - (a.priority || 0));
11223
- return applicableConfigs.map(config => config.className).join(' ');
11317
+ return classes.join(' ');
11224
11318
  }
11225
11319
  isRowDisabled(row) {
11226
11320
  const disabledConfigs = this.columnDisabledConfigs();
@@ -11413,6 +11507,7 @@ class GenericTableComponent {
11413
11507
  headerOrder: this.headerOrder(),
11414
11508
  filterButtonConfig: this.filterButtonConfig(),
11415
11509
  createButtonConfig: this.createButtonConfig(),
11510
+ createButtonText: this.createButtonText(),
11416
11511
  });
11417
11512
  }
11418
11513
  onColumnHeaderClick(column) {
@@ -11842,7 +11937,7 @@ class GenericTableComponent {
11842
11937
  };
11843
11938
  }
11844
11939
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11845
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericTableComponent, isStandalone: true, selector: "core-generic-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, modalFields: { classPropertyName: "modalFields", publicName: "modalFields", isSignal: true, isRequired: false, transformFunction: null }, modalTabs: { classPropertyName: "modalTabs", publicName: "modalTabs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, filterButtonConfig: { classPropertyName: "filterButtonConfig", publicName: "filterButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonConfig: { classPropertyName: "createButtonConfig", publicName: "createButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "dataInput", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: true, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, customParams: { classPropertyName: "customParams", publicName: "customParams", isSignal: true, isRequired: false, transformFunction: null }, customArrayKey: { classPropertyName: "customArrayKey", publicName: "customArrayKey", isSignal: true, isRequired: false, transformFunction: null }, listTitle: { classPropertyName: "listTitle", publicName: "listTitle", isSignal: true, isRequired: false, transformFunction: null }, moreData: { classPropertyName: "moreData", publicName: "moreData", isSignal: true, isRequired: false, transformFunction: null }, inModal: { classPropertyName: "inModal", publicName: "inModal", isSignal: true, isRequired: false, transformFunction: null }, expansionConfig: { classPropertyName: "expansionConfig", publicName: "expansionConfig", isSignal: true, isRequired: false, transformFunction: null }, fileUploadConfig: { classPropertyName: "fileUploadConfig", publicName: "fileUploadConfig", isSignal: true, isRequired: false, transformFunction: null }, rowStyleConfigs: { classPropertyName: "rowStyleConfigs", publicName: "rowStyleConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnDisabledConfigs: { classPropertyName: "columnDisabledConfigs", publicName: "columnDisabledConfigs", isSignal: true, isRequired: false, transformFunction: null }, rowVisibilityConfigs: { classPropertyName: "rowVisibilityConfigs", publicName: "rowVisibilityConfigs", isSignal: true, isRequired: false, transformFunction: null }, headerOrder: { classPropertyName: "headerOrder", publicName: "headerOrder", isSignal: true, isRequired: false, transformFunction: null }, showActiveFilters: { classPropertyName: "showActiveFilters", publicName: "showActiveFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersConfig: { classPropertyName: "activeFiltersConfig", publicName: "activeFiltersConfig", isSignal: true, isRequired: false, transformFunction: null }, sortConfig: { classPropertyName: "sortConfig", publicName: "sortConfig", isSignal: true, isRequired: false, transformFunction: null }, showManualRefresh: { classPropertyName: "showManualRefresh", publicName: "showManualRefresh", isSignal: true, isRequired: false, transformFunction: null }, manualRefreshConfig: { classPropertyName: "manualRefreshConfig", publicName: "manualRefreshConfig", isSignal: true, isRequired: false, transformFunction: null }, refreshButtonConfig: { classPropertyName: "refreshButtonConfig", publicName: "refreshButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, customEdit: { classPropertyName: "customEdit", publicName: "customEdit", isSignal: true, isRequired: false, transformFunction: null }, customDelete: { classPropertyName: "customDelete", publicName: "customDelete", isSignal: true, isRequired: false, transformFunction: null }, customView: { classPropertyName: "customView", publicName: "customView", isSignal: true, isRequired: false, transformFunction: null }, customSave: { classPropertyName: "customSave", publicName: "customSave", isSignal: true, isRequired: false, transformFunction: null }, useCustomSave: { classPropertyName: "useCustomSave", publicName: "useCustomSave", isSignal: true, isRequired: false, transformFunction: null }, onApiError: { classPropertyName: "onApiError", publicName: "onApiError", isSignal: true, isRequired: false, transformFunction: null }, inlineEditConfig: { classPropertyName: "inlineEditConfig", publicName: "inlineEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", selectionChanged: "selectionChanged", dataCreated: "dataCreated", dataUpdated: "dataUpdated", dataDeleted: "dataDeleted", dataFetched: "dataFetched", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", dataRefreshed: "dataRefreshed", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)", "document:click": "closeSubmenu()" } }, providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "manualRefreshComponent", first: true, predicate: CoreManualRefreshComponent, descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (showActiveFilters()) {\n <core-active-filters\n [activeFilters]=\"currentActiveFilters()\"\n [config]=\"activeFiltersConfig()\"\n (onFilterRemove)=\"onActiveFilterRemove($event)\"\n (onClearAll)=\"onActiveFiltersClear()\">\n </core-active-filters>\n}\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n @if (showManualRefresh()) {\n <core-manual-refresh \n [config]=\"getManualRefreshConfig()\"\n (onRefresh)=\"onManualRefresh()\">\n </core-manual-refresh>\n }\n <table>\n <thead>\n <tr>\n @if (showSelection()) {\n <!-- Todo: Tabla con row selection -->\n <th class=\"select-column\">\n <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n </th>\n }\n @for (column of columns(); track $index) {\n <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n @if (isColumnSortable(column)) {\n <button class=\"c-table-order\" tabindex=\"-1\"\n [class.is-asc]=\"getColumnSortState(column) === SortDirection.ASC\"\n [class.is-desc]=\"getColumnSortState(column) === SortDirection.DESC\"\n [class.has-multiple-sorts]=\"isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null\"\n [title]=\"getSortButtonTitle(column)\"\n (click)=\"onColumnHeaderClick(column)\">\n {{ column.label | translate }}\n <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n } -->\n <span class=\"c-table-order__controls\">\n <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n </span>\n </button>\n } @else {\n {{ column.label | translate }}\n }\n </th>\n }\n @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of displayedData(); track row.getId()) {\n <tr [ngClass]=\"getRowClasses(row)\" \n [class.is-editing-inline]=\"isRowInEditMode(row.getId())\"\n [class.is-disabled]=\"isRowDisabled(row)\">\n @if (showSelection()) {\n <!-- Todo: Tabla con row selection -->\n <td class=\"select-column\">\n <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n </td>\n }\n @for (column of columns(); track $index) {\n <td [attr.data-label]=\"column.label | translate\" \n [ngClass]=\"[\n column.align ? 'u-align-' + column.align : '',\n getCellDisabledClasses(row, column)\n ]\" \n [class.is-editing]=\"isColumnEditable(column, row)\"\n [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n @if (column.template) {\n <!-- Todo: Ver qu\u00E9 es esto -->\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n } @else if (isColumnEditable(column, row)) {\n <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n <div class=\"c-table__inline-edit\">\n <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n <div\n coreDynamicField\n [field]=\"getInlineEditableConfigWithState(row, column)!\"\n [value]=\"getEditingValue(row, column)\"\n [mode]=\"ModalMode.EDIT\"\n [errors]=\"getCellErrors(row, column)\"\n [rowData]=\"row\"\n (valueChange)=\"onCellValueChange(row, column, $event)\"\n (onBlurEvent)=\"onCellBlur(row, column)\"\n (onEnterEvent)=\"onCellEnter(row, column)\"\n ></div>\n </div>\n } @else {\n <div class=\"c-table__content\">\n <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n column) }}\n </div>\n }\n </td>\n }\n\n <!-- Actions-->\n\n @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n <td class=\"u-align-right\">\n <div class=\"c-table__actions\">\n <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\n [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n </core-dropdown>\n @for (actionConfig of getVisibleDefaultActions(row, false); track actionConfig.action) {\n @if (hasPermission(actionConfig)) {\n @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n actionConfig.action === TableAction.DELETE) {\n <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig, row)\"\n (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n </core-generic-button>\n }\n }\n }\n @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n @if (hasPermission(customAction)) {\n <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n (buttonClick)=\"onButtonClick($event, customAction, row)\">\n </core-generic-button>\n }\n }\n\n @if (hasExtraActionsForRow(row)) {\n <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n </core-generic-button>\n }\n\n @if (expansionConfig()?.enabled) {\n <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n </core-generic-button>\n }\n\n </div> <!-- .c-table__actions -->\n </td> <!-- td parent of .c-table__actions -->\n } <!-- @if (showActions() -->\n\n\n </tr>\n @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n <!-- Todo: Ver que es esto -->\n <tr class=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\n <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n </ng-container>\n </td>\n </tr>\n }\n } @empty {\n <tr>\n <!-- Todo: Estilo .no-data -->\n <td [attr.colspan]=\"displayedColumns().length\">\n <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n </td>\n </tr>\n }\n </tbody>\n </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<core-generic-pagination \n [tableId]=\"tableId\" \n [isServerSide]=\"!!endpoint()\">\n</core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>", styles: [".in-modal .c-table thead th:last-child,.c-table tbody td:last-child{text-align:left}.c-table__order-btn--asc{transform:rotate(180deg)}.c-table__order-btn--desc{transform:rotate(0)}.c-table tr.is-editing-inline{background-color:#fff3cd;border-left:3px solid #ffc107}.c-table tr.is-editing-inline td{background-color:#fff3cd}.c-table tr.is-editing-inline:hover td{background-color:#ffecb5}.expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "steps", "title", "isMultiple", "customTemplate", "customViewTemplate", "finalStepTemplate", "buttonConfig", "modelFactory", "errors", "validators", "customHasChanges", "stepValidationEnabled", "allowFreeNavigation", "autoMarkCompleted"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: GenericPaginationComponent, selector: "core-generic-pagination", inputs: ["tableId", "isServerSide"] }, { kind: "component", type: DropdownComponent, selector: "core-dropdown", inputs: ["rowId", "triggerElementId", "extraDefaultActions", "extraCustomActions", "row"], outputs: ["actionTriggered", "customActionTriggered"] }, { kind: "component", type: FilterModalComponent, selector: "core-filter-modal", inputs: ["isOpen", "filters", "currentFilterValues"], outputs: ["close", "filterChange", "clearFilters", "globalFilterChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: ActiveFiltersComponent, selector: "core-active-filters", inputs: ["activeFilters", "config"], outputs: ["onFilterRemove", "onClearAll"] }, { kind: "component", type: CoreManualRefreshComponent, selector: "core-manual-refresh", inputs: ["config", "refreshId"], outputs: ["onRefresh", "timestampUpdated"] }] });
11940
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericTableComponent, isStandalone: true, selector: "core-generic-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, modalFields: { classPropertyName: "modalFields", publicName: "modalFields", isSignal: true, isRequired: false, transformFunction: null }, modalTabs: { classPropertyName: "modalTabs", publicName: "modalTabs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, filterButtonConfig: { classPropertyName: "filterButtonConfig", publicName: "filterButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonConfig: { classPropertyName: "createButtonConfig", publicName: "createButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonText: { classPropertyName: "createButtonText", publicName: "createButtonText", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "dataInput", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: true, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, customParams: { classPropertyName: "customParams", publicName: "customParams", isSignal: true, isRequired: false, transformFunction: null }, customArrayKey: { classPropertyName: "customArrayKey", publicName: "customArrayKey", isSignal: true, isRequired: false, transformFunction: null }, listTitle: { classPropertyName: "listTitle", publicName: "listTitle", isSignal: true, isRequired: false, transformFunction: null }, moreData: { classPropertyName: "moreData", publicName: "moreData", isSignal: true, isRequired: false, transformFunction: null }, inModal: { classPropertyName: "inModal", publicName: "inModal", isSignal: true, isRequired: false, transformFunction: null }, expansionConfig: { classPropertyName: "expansionConfig", publicName: "expansionConfig", isSignal: true, isRequired: false, transformFunction: null }, fileUploadConfig: { classPropertyName: "fileUploadConfig", publicName: "fileUploadConfig", isSignal: true, isRequired: false, transformFunction: null }, rowStyleConfigs: { classPropertyName: "rowStyleConfigs", publicName: "rowStyleConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnDisabledConfigs: { classPropertyName: "columnDisabledConfigs", publicName: "columnDisabledConfigs", isSignal: true, isRequired: false, transformFunction: null }, rowVisibilityConfigs: { classPropertyName: "rowVisibilityConfigs", publicName: "rowVisibilityConfigs", isSignal: true, isRequired: false, transformFunction: null }, headerOrder: { classPropertyName: "headerOrder", publicName: "headerOrder", isSignal: true, isRequired: false, transformFunction: null }, showActiveFilters: { classPropertyName: "showActiveFilters", publicName: "showActiveFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersConfig: { classPropertyName: "activeFiltersConfig", publicName: "activeFiltersConfig", isSignal: true, isRequired: false, transformFunction: null }, sortConfig: { classPropertyName: "sortConfig", publicName: "sortConfig", isSignal: true, isRequired: false, transformFunction: null }, showManualRefresh: { classPropertyName: "showManualRefresh", publicName: "showManualRefresh", isSignal: true, isRequired: false, transformFunction: null }, manualRefreshConfig: { classPropertyName: "manualRefreshConfig", publicName: "manualRefreshConfig", isSignal: true, isRequired: false, transformFunction: null }, refreshButtonConfig: { classPropertyName: "refreshButtonConfig", publicName: "refreshButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, customEdit: { classPropertyName: "customEdit", publicName: "customEdit", isSignal: true, isRequired: false, transformFunction: null }, customDelete: { classPropertyName: "customDelete", publicName: "customDelete", isSignal: true, isRequired: false, transformFunction: null }, customView: { classPropertyName: "customView", publicName: "customView", isSignal: true, isRequired: false, transformFunction: null }, customSave: { classPropertyName: "customSave", publicName: "customSave", isSignal: true, isRequired: false, transformFunction: null }, useCustomSave: { classPropertyName: "useCustomSave", publicName: "useCustomSave", isSignal: true, isRequired: false, transformFunction: null }, onApiError: { classPropertyName: "onApiError", publicName: "onApiError", isSignal: true, isRequired: false, transformFunction: null }, inlineEditConfig: { classPropertyName: "inlineEditConfig", publicName: "inlineEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", selectionChanged: "selectionChanged", dataCreated: "dataCreated", dataUpdated: "dataUpdated", dataDeleted: "dataDeleted", dataFetched: "dataFetched", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", dataRefreshed: "dataRefreshed", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)", "document:click": "closeSubmenu()" } }, providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "manualRefreshComponent", first: true, predicate: CoreManualRefreshComponent, descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (showActiveFilters()) {\n <core-active-filters\n [activeFilters]=\"currentActiveFilters()\"\n [config]=\"activeFiltersConfig()\"\n (onFilterRemove)=\"onActiveFilterRemove($event)\"\n (onClearAll)=\"onActiveFiltersClear()\">\n </core-active-filters>\n}\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n @if (showManualRefresh()) {\n <core-manual-refresh \n [config]=\"getManualRefreshConfig()\"\n (onRefresh)=\"onManualRefresh()\">\n </core-manual-refresh>\n }\n <table>\n <thead>\n <tr>\n @if (showSelection()) {\n <!-- Todo: Tabla con row selection -->\n <th class=\"select-column\">\n <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n </th>\n }\n @for (column of columns(); track $index) {\n <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n @if (isColumnSortable(column)) {\n <button class=\"c-table-order\" tabindex=\"-1\"\n [class.is-asc]=\"getColumnSortState(column) === SortDirection.ASC\"\n [class.is-desc]=\"getColumnSortState(column) === SortDirection.DESC\"\n [class.has-multiple-sorts]=\"isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null\"\n [title]=\"getSortButtonTitle(column)\"\n (click)=\"onColumnHeaderClick(column)\">\n {{ column.label | translate }}\n <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n } -->\n <span class=\"c-table-order__controls\">\n <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n </span>\n </button>\n } @else {\n {{ column.label | translate }}\n }\n </th>\n }\n @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of displayedData(); track row.getId()) {\n <tr [ngClass]=\"getRowClasses(row)\" \n [class.is-editing-inline]=\"isRowInEditMode(row.getId())\"\n [class.is-disabled]=\"isRowDisabled(row)\">\n @if (showSelection()) {\n <!-- Todo: Tabla con row selection -->\n <td class=\"select-column\">\n <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n </td>\n }\n @for (column of columns(); track $index) {\n <td [attr.data-label]=\"column.label | translate\" \n [ngClass]=\"[\n column.align ? 'u-align-' + column.align : '',\n getCellDisabledClasses(row, column)\n ]\" \n [class.is-editing]=\"isColumnEditable(column, row)\"\n [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n @if (column.template) {\n <!-- Todo: Ver qu\u00E9 es esto -->\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n } @else if (isColumnEditable(column, row)) {\n <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n <div class=\"c-table__inline-edit\">\n <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n <div\n coreDynamicField\n [field]=\"getInlineEditableConfigWithState(row, column)!\"\n [value]=\"getEditingValue(row, column)\"\n [mode]=\"ModalMode.EDIT\"\n [errors]=\"getCellErrors(row, column)\"\n [rowData]=\"row\"\n (valueChange)=\"onCellValueChange(row, column, $event)\"\n (onBlurEvent)=\"onCellBlur(row, column)\"\n (onEnterEvent)=\"onCellEnter(row, column)\"\n ></div>\n </div>\n } @else {\n <div class=\"c-table__content\">\n <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n column) }}\n </div>\n }\n </td>\n }\n\n <!-- Actions-->\n\n @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n <td class=\"u-align-right\">\n <div class=\"c-table__actions\">\n <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\n [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n </core-dropdown>\n @for (actionConfig of getVisibleDefaultActions(row, false); track actionConfig.action) {\n @if (hasPermission(actionConfig)) {\n @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n actionConfig.action === TableAction.DELETE) {\n <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig, row)\"\n (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n </core-generic-button>\n }\n }\n }\n @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n @if (hasPermission(customAction)) {\n <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n (buttonClick)=\"onButtonClick($event, customAction, row)\">\n </core-generic-button>\n }\n }\n\n @if (hasExtraActionsForRow(row)) {\n <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n </core-generic-button>\n }\n\n @if (expansionConfig()?.enabled) {\n <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n </core-generic-button>\n }\n\n </div> <!-- .c-table__actions -->\n </td> <!-- td parent of .c-table__actions -->\n } <!-- @if (showActions() -->\n\n\n </tr>\n @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n <!-- Todo: Ver que es esto -->\n <tr class=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\n <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n </ng-container>\n </td>\n </tr>\n }\n } @empty {\n <tr>\n <!-- Todo: Estilo .no-data -->\n <td [attr.colspan]=\"displayedColumns().length\">\n <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n </td>\n </tr>\n }\n </tbody>\n </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<core-generic-pagination \n [tableId]=\"tableId\" \n [isServerSide]=\"!!endpoint()\">\n</core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>", styles: [".in-modal .c-table thead th:last-child,.c-table tbody td:last-child{text-align:left}.c-table__order-btn--asc{transform:rotate(180deg)}.c-table__order-btn--desc{transform:rotate(0)}.c-table tr.is-editing-inline{background-color:#fff3cd;border-left:3px solid #ffc107}.c-table tr.is-editing-inline td{background-color:#fff3cd}.c-table tr.is-editing-inline:hover td{background-color:#ffecb5}.expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}.c-table tr.is-newly-modified{background-color:#f8f9fa;border-left:4px solid #28a745;animation:newItemHighlight 2s ease-in-out}.c-table tr.is-newly-modified td{background-color:#f8f9fa;transition:background-color .3s ease}.c-table tr.is-newly-modified:hover td{background-color:#e9ecef}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:#28a745}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "steps", "title", "isMultiple", "customTemplate", "customViewTemplate", "finalStepTemplate", "buttonConfig", "modelFactory", "errors", "validators", "customHasChanges", "stepValidationEnabled", "allowFreeNavigation", "autoMarkCompleted"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: GenericPaginationComponent, selector: "core-generic-pagination", inputs: ["tableId", "isServerSide"] }, { kind: "component", type: DropdownComponent, selector: "core-dropdown", inputs: ["rowId", "triggerElementId", "extraDefaultActions", "extraCustomActions", "row"], outputs: ["actionTriggered", "customActionTriggered"] }, { kind: "component", type: FilterModalComponent, selector: "core-filter-modal", inputs: ["isOpen", "filters", "currentFilterValues"], outputs: ["close", "filterChange", "clearFilters", "globalFilterChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: ActiveFiltersComponent, selector: "core-active-filters", inputs: ["activeFilters", "config"], outputs: ["onFilterRemove", "onClearAll"] }, { kind: "component", type: CoreManualRefreshComponent, selector: "core-manual-refresh", inputs: ["config", "refreshId"], outputs: ["onRefresh", "timestampUpdated"] }] });
11846
11941
  }
11847
11942
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, decorators: [{
11848
11943
  type: Component,
@@ -11857,7 +11952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
11857
11952
  DynamicFieldDirective,
11858
11953
  ActiveFiltersComponent,
11859
11954
  CoreManualRefreshComponent,
11860
- ], hostDirectives: [CoreHostDirective], providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], template: "@if (showActiveFilters()) {\n <core-active-filters\n [activeFilters]=\"currentActiveFilters()\"\n [config]=\"activeFiltersConfig()\"\n (onFilterRemove)=\"onActiveFilterRemove($event)\"\n (onClearAll)=\"onActiveFiltersClear()\">\n </core-active-filters>\n}\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n @if (showManualRefresh()) {\n <core-manual-refresh \n [config]=\"getManualRefreshConfig()\"\n (onRefresh)=\"onManualRefresh()\">\n </core-manual-refresh>\n }\n <table>\n <thead>\n <tr>\n @if (showSelection()) {\n <!-- Todo: Tabla con row selection -->\n <th class=\"select-column\">\n <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n </th>\n }\n @for (column of columns(); track $index) {\n <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n @if (isColumnSortable(column)) {\n <button class=\"c-table-order\" tabindex=\"-1\"\n [class.is-asc]=\"getColumnSortState(column) === SortDirection.ASC\"\n [class.is-desc]=\"getColumnSortState(column) === SortDirection.DESC\"\n [class.has-multiple-sorts]=\"isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null\"\n [title]=\"getSortButtonTitle(column)\"\n (click)=\"onColumnHeaderClick(column)\">\n {{ column.label | translate }}\n <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n } -->\n <span class=\"c-table-order__controls\">\n <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n </span>\n </button>\n } @else {\n {{ column.label | translate }}\n }\n </th>\n }\n @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of displayedData(); track row.getId()) {\n <tr [ngClass]=\"getRowClasses(row)\" \n [class.is-editing-inline]=\"isRowInEditMode(row.getId())\"\n [class.is-disabled]=\"isRowDisabled(row)\">\n @if (showSelection()) {\n <!-- Todo: Tabla con row selection -->\n <td class=\"select-column\">\n <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n </td>\n }\n @for (column of columns(); track $index) {\n <td [attr.data-label]=\"column.label | translate\" \n [ngClass]=\"[\n column.align ? 'u-align-' + column.align : '',\n getCellDisabledClasses(row, column)\n ]\" \n [class.is-editing]=\"isColumnEditable(column, row)\"\n [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n @if (column.template) {\n <!-- Todo: Ver qu\u00E9 es esto -->\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n } @else if (isColumnEditable(column, row)) {\n <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n <div class=\"c-table__inline-edit\">\n <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n <div\n coreDynamicField\n [field]=\"getInlineEditableConfigWithState(row, column)!\"\n [value]=\"getEditingValue(row, column)\"\n [mode]=\"ModalMode.EDIT\"\n [errors]=\"getCellErrors(row, column)\"\n [rowData]=\"row\"\n (valueChange)=\"onCellValueChange(row, column, $event)\"\n (onBlurEvent)=\"onCellBlur(row, column)\"\n (onEnterEvent)=\"onCellEnter(row, column)\"\n ></div>\n </div>\n } @else {\n <div class=\"c-table__content\">\n <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n column) }}\n </div>\n }\n </td>\n }\n\n <!-- Actions-->\n\n @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n <td class=\"u-align-right\">\n <div class=\"c-table__actions\">\n <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\n [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n </core-dropdown>\n @for (actionConfig of getVisibleDefaultActions(row, false); track actionConfig.action) {\n @if (hasPermission(actionConfig)) {\n @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n actionConfig.action === TableAction.DELETE) {\n <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig, row)\"\n (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n </core-generic-button>\n }\n }\n }\n @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n @if (hasPermission(customAction)) {\n <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n (buttonClick)=\"onButtonClick($event, customAction, row)\">\n </core-generic-button>\n }\n }\n\n @if (hasExtraActionsForRow(row)) {\n <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n </core-generic-button>\n }\n\n @if (expansionConfig()?.enabled) {\n <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n </core-generic-button>\n }\n\n </div> <!-- .c-table__actions -->\n </td> <!-- td parent of .c-table__actions -->\n } <!-- @if (showActions() -->\n\n\n </tr>\n @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n <!-- Todo: Ver que es esto -->\n <tr class=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\n <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n </ng-container>\n </td>\n </tr>\n }\n } @empty {\n <tr>\n <!-- Todo: Estilo .no-data -->\n <td [attr.colspan]=\"displayedColumns().length\">\n <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n </td>\n </tr>\n }\n </tbody>\n </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<core-generic-pagination \n [tableId]=\"tableId\" \n [isServerSide]=\"!!endpoint()\">\n</core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>", styles: [".in-modal .c-table thead th:last-child,.c-table tbody td:last-child{text-align:left}.c-table__order-btn--asc{transform:rotate(180deg)}.c-table__order-btn--desc{transform:rotate(0)}.c-table tr.is-editing-inline{background-color:#fff3cd;border-left:3px solid #ffc107}.c-table tr.is-editing-inline td{background-color:#fff3cd}.c-table tr.is-editing-inline:hover td{background-color:#ffecb5}.expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}\n"] }]
11955
+ ], hostDirectives: [CoreHostDirective], providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], template: "@if (showActiveFilters()) {\n <core-active-filters\n [activeFilters]=\"currentActiveFilters()\"\n [config]=\"activeFiltersConfig()\"\n (onFilterRemove)=\"onActiveFilterRemove($event)\"\n (onClearAll)=\"onActiveFiltersClear()\">\n </core-active-filters>\n}\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n @if (showManualRefresh()) {\n <core-manual-refresh \n [config]=\"getManualRefreshConfig()\"\n (onRefresh)=\"onManualRefresh()\">\n </core-manual-refresh>\n }\n <table>\n <thead>\n <tr>\n @if (showSelection()) {\n <!-- Todo: Tabla con row selection -->\n <th class=\"select-column\">\n <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n </th>\n }\n @for (column of columns(); track $index) {\n <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n @if (isColumnSortable(column)) {\n <button class=\"c-table-order\" tabindex=\"-1\"\n [class.is-asc]=\"getColumnSortState(column) === SortDirection.ASC\"\n [class.is-desc]=\"getColumnSortState(column) === SortDirection.DESC\"\n [class.has-multiple-sorts]=\"isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null\"\n [title]=\"getSortButtonTitle(column)\"\n (click)=\"onColumnHeaderClick(column)\">\n {{ column.label | translate }}\n <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n } -->\n <span class=\"c-table-order__controls\">\n <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n </span>\n </button>\n } @else {\n {{ column.label | translate }}\n }\n </th>\n }\n @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of displayedData(); track row.getId()) {\n <tr [ngClass]=\"getRowClasses(row)\" \n [class.is-editing-inline]=\"isRowInEditMode(row.getId())\"\n [class.is-disabled]=\"isRowDisabled(row)\">\n @if (showSelection()) {\n <!-- Todo: Tabla con row selection -->\n <td class=\"select-column\">\n <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n </td>\n }\n @for (column of columns(); track $index) {\n <td [attr.data-label]=\"column.label | translate\" \n [ngClass]=\"[\n column.align ? 'u-align-' + column.align : '',\n getCellDisabledClasses(row, column)\n ]\" \n [class.is-editing]=\"isColumnEditable(column, row)\"\n [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n @if (column.template) {\n <!-- Todo: Ver qu\u00E9 es esto -->\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n } @else if (isColumnEditable(column, row)) {\n <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n <div class=\"c-table__inline-edit\">\n <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n <div\n coreDynamicField\n [field]=\"getInlineEditableConfigWithState(row, column)!\"\n [value]=\"getEditingValue(row, column)\"\n [mode]=\"ModalMode.EDIT\"\n [errors]=\"getCellErrors(row, column)\"\n [rowData]=\"row\"\n (valueChange)=\"onCellValueChange(row, column, $event)\"\n (onBlurEvent)=\"onCellBlur(row, column)\"\n (onEnterEvent)=\"onCellEnter(row, column)\"\n ></div>\n </div>\n } @else {\n <div class=\"c-table__content\">\n <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n column) }}\n </div>\n }\n </td>\n }\n\n <!-- Actions-->\n\n @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n <td class=\"u-align-right\">\n <div class=\"c-table__actions\">\n <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\n [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n </core-dropdown>\n @for (actionConfig of getVisibleDefaultActions(row, false); track actionConfig.action) {\n @if (hasPermission(actionConfig)) {\n @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n actionConfig.action === TableAction.DELETE) {\n <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig, row)\"\n (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n </core-generic-button>\n }\n }\n }\n @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n @if (hasPermission(customAction)) {\n <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n (buttonClick)=\"onButtonClick($event, customAction, row)\">\n </core-generic-button>\n }\n }\n\n @if (hasExtraActionsForRow(row)) {\n <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n </core-generic-button>\n }\n\n @if (expansionConfig()?.enabled) {\n <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n </core-generic-button>\n }\n\n </div> <!-- .c-table__actions -->\n </td> <!-- td parent of .c-table__actions -->\n } <!-- @if (showActions() -->\n\n\n </tr>\n @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n <!-- Todo: Ver que es esto -->\n <tr class=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\n <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n </ng-container>\n </td>\n </tr>\n }\n } @empty {\n <tr>\n <!-- Todo: Estilo .no-data -->\n <td [attr.colspan]=\"displayedColumns().length\">\n <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n </td>\n </tr>\n }\n </tbody>\n </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<core-generic-pagination \n [tableId]=\"tableId\" \n [isServerSide]=\"!!endpoint()\">\n</core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>", styles: [".in-modal .c-table thead th:last-child,.c-table tbody td:last-child{text-align:left}.c-table__order-btn--asc{transform:rotate(180deg)}.c-table__order-btn--desc{transform:rotate(0)}.c-table tr.is-editing-inline{background-color:#fff3cd;border-left:3px solid #ffc107}.c-table tr.is-editing-inline td{background-color:#fff3cd}.c-table tr.is-editing-inline:hover td{background-color:#ffecb5}.expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}.c-table tr.is-newly-modified{background-color:#f8f9fa;border-left:4px solid #28a745;animation:newItemHighlight 2s ease-in-out}.c-table tr.is-newly-modified td{background-color:#f8f9fa;transition:background-color .3s ease}.c-table tr.is-newly-modified:hover td{background-color:#e9ecef}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:#28a745}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}\n"] }]
11861
11956
  }], ctorParameters: () => [], propDecorators: { sentinel: [{
11862
11957
  type: ViewChild,
11863
11958
  args: ['sentinel', { static: false }]
@@ -13226,14 +13321,16 @@ class HeaderComponent {
13226
13321
  return customConfig ? { ...defaultConfig, ...customConfig } : defaultConfig;
13227
13322
  }
13228
13323
  getCreateButtonConfig() {
13324
+ const createButtonText = this.headerService.getCreateButtonText()();
13325
+ const buttonText = createButtonText || 'table.create';
13229
13326
  const defaultConfig = {
13230
13327
  type: ButtonType.PRIMARY,
13231
- text: 'table.create',
13328
+ text: buttonText,
13232
13329
  icon: 'icon-add',
13233
- ariaLabel: 'table.create',
13330
+ ariaLabel: buttonText,
13234
13331
  tooltipConfig: {
13235
13332
  hasTooltip: true,
13236
- text: 'table.create',
13333
+ text: buttonText,
13237
13334
  position: 'bottom'
13238
13335
  }
13239
13336
  };
@@ -13400,12 +13497,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
13400
13497
  // Este archivo es generado automáticamente por scripts/update-version.js
13401
13498
  // No edites manualmente este archivo
13402
13499
  const VERSION = {
13403
- full: '2.12.41',
13500
+ full: '2.12.42',
13404
13501
  major: 2,
13405
13502
  minor: 12,
13406
- patch: 41,
13407
- timestamp: '2025-09-17T18:43:36.144Z',
13408
- buildDate: '17/9/2025'
13503
+ patch: 42,
13504
+ timestamp: '2025-09-19T15:50:22.626Z',
13505
+ buildDate: '19/9/2025'
13409
13506
  };
13410
13507
 
13411
13508
  class MainNavComponent {
@@ -15446,7 +15543,7 @@ class GenericChatComponent {
15446
15543
  }
15447
15544
  closeButtonConfig = computed(() => ({
15448
15545
  type: ButtonType.ICON,
15449
- icon: 'icon-cross',
15546
+ icon: 'icon-cross-thin',
15450
15547
  ariaLabel: 'modal.close',
15451
15548
  customClass: 'c-modal__close'
15452
15549
  }));