@solcre-org/core-ui 2.11.30 → 2.11.32
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.
|
@@ -5,7 +5,7 @@ import { CommonModule, DatePipe } from '@angular/common';
|
|
|
5
5
|
import * as i3 from '@ngx-translate/core';
|
|
6
6
|
import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-translate/core';
|
|
7
7
|
import * as i3$1 from '@angular/forms';
|
|
8
|
-
import { FormControl, FormsModule, ReactiveFormsModule,
|
|
8
|
+
import { FormControl, Validators, FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
|
|
9
9
|
import * as i5 from '@ng-select/ng-select';
|
|
10
10
|
import { NgSelectModule, NgSelectComponent } from '@ng-select/ng-select';
|
|
11
11
|
import { AuthService, ApiService } from '@solcre-org/core';
|
|
@@ -166,6 +166,11 @@ class BaseFieldComponent {
|
|
|
166
166
|
hasError = computed(() => {
|
|
167
167
|
return this.errors().length > 0;
|
|
168
168
|
});
|
|
169
|
+
hasRequiredValidators = computed(() => {
|
|
170
|
+
const modeConfig = this.field().modes?.[this.mode()];
|
|
171
|
+
const validators = modeConfig?.validators ?? this.field().validators ?? [];
|
|
172
|
+
return validators.some(validator => validator === Validators.required);
|
|
173
|
+
});
|
|
169
174
|
ngOnInit() {
|
|
170
175
|
this.initializeFormControl();
|
|
171
176
|
}
|
|
@@ -488,11 +493,11 @@ class CheckboxFieldComponent extends BaseFieldComponent {
|
|
|
488
493
|
}
|
|
489
494
|
}
|
|
490
495
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
491
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CheckboxFieldComponent, isStandalone: true, selector: "core-checkbox-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- Clase para layout inline cuando hay m\u00FAltiples opciones -->\n<div class=\"c-entry-toggle-holder\" [class.hasSeparatedOptions]=\"hasSeparatedOptions()\" [class.multiple-inline]=\"hasMultipleOptions()\">\n\n <span class=\"c-entry-text\"\n *ngIf=\"field().label\"
|
|
496
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CheckboxFieldComponent, isStandalone: true, selector: "core-checkbox-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- Clase para layout inline cuando hay m\u00FAltiples opciones -->\n<div class=\"c-entry-toggle-holder\" [class.hasSeparatedOptions]=\"hasSeparatedOptions()\" [class.multiple-inline]=\"hasMultipleOptions()\">\n\n <span class=\"c-entry-text\"\n *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n \n @if (hasMultipleOptions()) {\n @for (option of options(); track option.value) {\n\n <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n <label class=\"c-entry-toggle\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\"\n [class.cannot-deselect]=\"cannotDeselect(option)\">\n\n <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n @if (cannotDeselect(option)) {\n <!-- Usar radio cuando no se puede deseleccionar -->\n <input\n type=\"radio\"\n [attr.id]=\"field().key.toString() + '_' + option.value\"\n [attr.name]=\"field().key.toString()\"\n [checked]=\"isOptionSelected(option)\"\n (change)=\"handleOptionChange(option, $event)\"\n (blur)=\"onBlurInput()\"\n />\n } @else {\n <!-- Usar checkbox normal cuando se puede deseleccionar -->\n <input\n type=\"checkbox\"\n [attr.id]=\"field().key.toString() + '_' + option.value\"\n [attr.name]=\"allowMultiple() ? field().key.toString() + '[]' : field().key.toString()\"\n [checked]=\"isOptionSelected(option)\"\n (change)=\"handleOptionChange(option, $event)\"\n (blur)=\"onBlurInput()\"\n />\n }\n <span class=\"c-entry-toggle__toggle\"></span>\n\n <span class=\"c-entry-toggle__text\">\n {{ option.label | translate }}\n @if(option.externalLink) {\n <!-- Link externo funcional implementado -->\n <a class=\"icon-external-link-thin\" [href]=\"option.externalLink\" target=\"_blank\"></a>\n }\n </span>\n @if(option.detail) {\n <!-- Texto de detalle funcional implementado -->\n <span class=\"c-form-checkbox__detail\">{{ option.detail }}</span>\n }\n </label>\n\n }\n } @else {\n <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n <label class=\"c-entry-toggle\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\"\n [class.cannot-deselect]=\"isRequired() && !!formControl().value\">\n\n <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n @if (isRequired() && !!formControl().value) {\n <!-- Usar radio cuando es requerido y tiene valor (cannot-deselect) -->\n <input\n type=\"radio\"\n [attr.id]=\"field().key.toString()\"\n [attr.name]=\"field().key.toString()\"\n [checked]=\"!!formControl().value\"\n (change)=\"onRadioChange($event)\"\n (blur)=\"onBlurInput()\"\n />\n } @else {\n <!-- Usar checkbox normal cuando se puede deseleccionar -->\n <input\n type=\"checkbox\"\n [attr.id]=\"field().key.toString()\"\n [attr.name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n />\n }\n <span class=\"c-entry-toggle__toggle\"></span>\n <span class=\"c-entry-toggle__text\">\n {{ field().label | translate }}\n @if(externalLink()) {\n <!-- Link externo funcional implementado -->\n <a class=\"icon-external-link-thin\" [href]=\"externalLink()\" target=\"_blank\"></a>\n }\n </span>\n @if(detail()) {\n <!-- Texto de detalle funcional implementado -->\n <span class=\"c-form-checkbox__detail\">{{ detail() }}</span>\n }\n </label>\n }\n\n <core-field-errors [errors]=\"errors()\" />\n</div> \n ", styles: [".cannot-deselect{pointer-events:none;cursor:not-allowed}.c-entry-text+.c-entry-toggle-holder.hasSeparatedOptions{margin-top:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions .c-entry-text{grid-column:span 2;margin-top:1em}\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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
|
|
492
497
|
}
|
|
493
498
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
|
|
494
499
|
type: Component,
|
|
495
|
-
args: [{ selector: 'core-checkbox-field', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Clase para layout inline cuando hay m\u00FAltiples opciones -->\n<div class=\"c-entry-toggle-holder\" [class.hasSeparatedOptions]=\"hasSeparatedOptions()\" [class.multiple-inline]=\"hasMultipleOptions()\">\n\n <span class=\"c-entry-text\"\n *ngIf=\"field().label\"
|
|
500
|
+
args: [{ selector: 'core-checkbox-field', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Clase para layout inline cuando hay m\u00FAltiples opciones -->\n<div class=\"c-entry-toggle-holder\" [class.hasSeparatedOptions]=\"hasSeparatedOptions()\" [class.multiple-inline]=\"hasMultipleOptions()\">\n\n <span class=\"c-entry-text\"\n *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n \n @if (hasMultipleOptions()) {\n @for (option of options(); track option.value) {\n\n <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n <label class=\"c-entry-toggle\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\"\n [class.cannot-deselect]=\"cannotDeselect(option)\">\n\n <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n @if (cannotDeselect(option)) {\n <!-- Usar radio cuando no se puede deseleccionar -->\n <input\n type=\"radio\"\n [attr.id]=\"field().key.toString() + '_' + option.value\"\n [attr.name]=\"field().key.toString()\"\n [checked]=\"isOptionSelected(option)\"\n (change)=\"handleOptionChange(option, $event)\"\n (blur)=\"onBlurInput()\"\n />\n } @else {\n <!-- Usar checkbox normal cuando se puede deseleccionar -->\n <input\n type=\"checkbox\"\n [attr.id]=\"field().key.toString() + '_' + option.value\"\n [attr.name]=\"allowMultiple() ? field().key.toString() + '[]' : field().key.toString()\"\n [checked]=\"isOptionSelected(option)\"\n (change)=\"handleOptionChange(option, $event)\"\n (blur)=\"onBlurInput()\"\n />\n }\n <span class=\"c-entry-toggle__toggle\"></span>\n\n <span class=\"c-entry-toggle__text\">\n {{ option.label | translate }}\n @if(option.externalLink) {\n <!-- Link externo funcional implementado -->\n <a class=\"icon-external-link-thin\" [href]=\"option.externalLink\" target=\"_blank\"></a>\n }\n </span>\n @if(option.detail) {\n <!-- Texto de detalle funcional implementado -->\n <span class=\"c-form-checkbox__detail\">{{ option.detail }}</span>\n }\n </label>\n\n }\n } @else {\n <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n <label class=\"c-entry-toggle\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\"\n [class.cannot-deselect]=\"isRequired() && !!formControl().value\">\n\n <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n @if (isRequired() && !!formControl().value) {\n <!-- Usar radio cuando es requerido y tiene valor (cannot-deselect) -->\n <input\n type=\"radio\"\n [attr.id]=\"field().key.toString()\"\n [attr.name]=\"field().key.toString()\"\n [checked]=\"!!formControl().value\"\n (change)=\"onRadioChange($event)\"\n (blur)=\"onBlurInput()\"\n />\n } @else {\n <!-- Usar checkbox normal cuando se puede deseleccionar -->\n <input\n type=\"checkbox\"\n [attr.id]=\"field().key.toString()\"\n [attr.name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n />\n }\n <span class=\"c-entry-toggle__toggle\"></span>\n <span class=\"c-entry-toggle__text\">\n {{ field().label | translate }}\n @if(externalLink()) {\n <!-- Link externo funcional implementado -->\n <a class=\"icon-external-link-thin\" [href]=\"externalLink()\" target=\"_blank\"></a>\n }\n </span>\n @if(detail()) {\n <!-- Texto de detalle funcional implementado -->\n <span class=\"c-form-checkbox__detail\">{{ detail() }}</span>\n }\n </label>\n }\n\n <core-field-errors [errors]=\"errors()\" />\n</div> \n ", styles: [".cannot-deselect{pointer-events:none;cursor:not-allowed}.c-entry-text+.c-entry-toggle-holder.hasSeparatedOptions{margin-top:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions .c-entry-text{grid-column:span 2;margin-top:1em}\n"] }]
|
|
496
501
|
}], ctorParameters: () => [] });
|
|
497
502
|
|
|
498
503
|
class DateFieldComponent extends BaseFieldComponent {
|
|
@@ -619,11 +624,11 @@ class DateFieldComponent extends BaseFieldComponent {
|
|
|
619
624
|
}
|
|
620
625
|
}
|
|
621
626
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DateFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
622
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
627
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DateFieldComponent, isStandalone: true, selector: "core-date-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <span class=\"c-entry-input\"\n [class.is-placeholder]=\"!formControl().value\"\n style=\"--chars: 10\"\n [class.is-invalid]=\"hasError()\">\n \n <input type=\"date\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\">\n \n <button class=\"c-entry-input__addon icon-calendar-thin\" \n tabindex=\"-1\"\n type=\"button\"\n (click)=\"onCalendarClick($event)\"></button>\n\n \n </span>\n <core-field-errors [errors]=\"errors()\" />\n</label>\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
|
|
623
628
|
}
|
|
624
629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DateFieldComponent, decorators: [{
|
|
625
630
|
type: Component,
|
|
626
|
-
args: [{ selector: 'core-date-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\"
|
|
631
|
+
args: [{ selector: 'core-date-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <span class=\"c-entry-input\"\n [class.is-placeholder]=\"!formControl().value\"\n style=\"--chars: 10\"\n [class.is-invalid]=\"hasError()\">\n \n <input type=\"date\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\">\n \n <button class=\"c-entry-input__addon icon-calendar-thin\" \n tabindex=\"-1\"\n type=\"button\"\n (click)=\"onCalendarClick($event)\"></button>\n\n \n </span>\n <core-field-errors [errors]=\"errors()\" />\n</label>\n" }]
|
|
627
632
|
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
628
633
|
|
|
629
634
|
var TimeInterval;
|
|
@@ -684,6 +689,11 @@ class DatetimeFieldComponent {
|
|
|
684
689
|
label: minute.toString().padStart(2, '0')
|
|
685
690
|
}));
|
|
686
691
|
});
|
|
692
|
+
hasRequiredValidators = computed(() => {
|
|
693
|
+
const modeConfig = this.field().modes?.[this.mode()];
|
|
694
|
+
const validators = modeConfig?.validators ?? this.field().validators ?? [];
|
|
695
|
+
return validators.some(validator => validator === Validators.required);
|
|
696
|
+
});
|
|
687
697
|
formattedDate = computed(() => {
|
|
688
698
|
const date = this.selectedDate();
|
|
689
699
|
if (!date || isNaN(date.getTime()))
|
|
@@ -872,11 +882,11 @@ class DatetimeFieldComponent {
|
|
|
872
882
|
}
|
|
873
883
|
}
|
|
874
884
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatetimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
875
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DatetimeFieldComponent, isStandalone: true, selector: "core-datetime-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", onBlurEvent: "onBlurEvent", onEnterEvent: "onEnterEvent" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <label class=\"c-entry-text\" *ngIf=\"field().label\" [for]=\"field().key.toString()\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </label>\n <div class=\"c-entry-datetime\">\n <span class=\"c-entry-input\" [class.is-invalid]=\"hasError()\">\n <input\n type=\"date\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [value]=\"formattedDate()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onDateChange($event)\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onEnter($any($event))\"\n />\n <button class=\"c-entry-input__addon icon-calendar-thin\" \n tabindex=\"-1\"\n type=\"button\"\n (click)=\"onCalendarClick($event)\"></button>\n </span>\n <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n <ng-select\n [items]=\"hoursOptions()\"\n bindValue=\"value\"\n bindLabel=\"label\"\n [ngModel]=\"selectedHour()\"\n (ngModelChange)=\"onHourChange($event)\"\n [disabled]=\"isDisabled()\"\n [clearable]=\"false\"\n [searchable]=\"false\"\n (blur)=\"onBlur()\"\n [placeholder]=\"isHourPlaceholderVisible() ? 'HH' : ''\"\n >\n <ng-template ng-option-tmp let-item=\"item\">\n {{ item.label }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n {{ item.label }}\n </ng-template>\n </ng-select>\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </span>\n <span class=\"c-entry-datetime__separator\">:</span>\n <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n <ng-select\n [items]=\"minutesOptions()\"\n bindValue=\"value\"\n bindLabel=\"label\"\n [ngModel]=\"selectedMinute()\"\n (ngModelChange)=\"onMinuteChange($event)\"\n [disabled]=\"isDisabled()\"\n [clearable]=\"false\"\n [searchable]=\"false\"\n (blur)=\"onBlur()\"\n [placeholder]=\"isMinutePlaceholderVisible() ? 'MM' : ''\"\n >\n <ng-template ng-option-tmp let-item=\"item\">\n {{ item.label }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n {{ item.label }}\n </ng-template>\n </ng-select>\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </span>\n </div>\n <core-field-errors [errors]=\"errors()\" />\n</div>\n\n\n", 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}::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: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
|
|
876
886
|
}
|
|
877
887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatetimeFieldComponent, decorators: [{
|
|
878
888
|
type: Component,
|
|
879
|
-
args: [{ selector: 'core-datetime-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <label class=\"c-entry-text\" *ngIf=\"field().label\" [for]=\"field().key.toString()\"
|
|
889
|
+
args: [{ selector: 'core-datetime-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <label class=\"c-entry-text\" *ngIf=\"field().label\" [for]=\"field().key.toString()\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </label>\n <div class=\"c-entry-datetime\">\n <span class=\"c-entry-input\" [class.is-invalid]=\"hasError()\">\n <input\n type=\"date\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [value]=\"formattedDate()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onDateChange($event)\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onEnter($any($event))\"\n />\n <button class=\"c-entry-input__addon icon-calendar-thin\" \n tabindex=\"-1\"\n type=\"button\"\n (click)=\"onCalendarClick($event)\"></button>\n </span>\n <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n <ng-select\n [items]=\"hoursOptions()\"\n bindValue=\"value\"\n bindLabel=\"label\"\n [ngModel]=\"selectedHour()\"\n (ngModelChange)=\"onHourChange($event)\"\n [disabled]=\"isDisabled()\"\n [clearable]=\"false\"\n [searchable]=\"false\"\n (blur)=\"onBlur()\"\n [placeholder]=\"isHourPlaceholderVisible() ? 'HH' : ''\"\n >\n <ng-template ng-option-tmp let-item=\"item\">\n {{ item.label }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n {{ item.label }}\n </ng-template>\n </ng-select>\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </span>\n <span class=\"c-entry-datetime__separator\">:</span>\n <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n <ng-select\n [items]=\"minutesOptions()\"\n bindValue=\"value\"\n bindLabel=\"label\"\n [ngModel]=\"selectedMinute()\"\n (ngModelChange)=\"onMinuteChange($event)\"\n [disabled]=\"isDisabled()\"\n [clearable]=\"false\"\n [searchable]=\"false\"\n (blur)=\"onBlur()\"\n [placeholder]=\"isMinutePlaceholderVisible() ? 'MM' : ''\"\n >\n <ng-template ng-option-tmp let-item=\"item\">\n {{ item.label }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n {{ item.label }}\n </ng-template>\n </ng-select>\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </span>\n </div>\n <core-field-errors [errors]=\"errors()\" />\n</div>\n\n\n", 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}::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"] }]
|
|
880
890
|
}], ctorParameters: () => [] });
|
|
881
891
|
|
|
882
892
|
// icon-compat.pipe.ts
|
|
@@ -1163,11 +1173,11 @@ class FileFieldComponent extends BaseFieldComponent {
|
|
|
1163
1173
|
this.onBlur();
|
|
1164
1174
|
}
|
|
1165
1175
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1166
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileFieldComponent, isStandalone: true, selector: "core-file-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n @if (field().label) {\n <span class=\"c-entry-text\"
|
|
1176
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FileFieldComponent, isStandalone: true, selector: "core-file-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n @if (field().label) {\n <span class=\"c-entry-text\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n }\n <div class=\"c-entry-file\" [class.has-error]=\"hasError()\">\n @if(fieldConfig().multiple || isEditMode() || allFiles().length === 0) {\n <label class=\"c-entry-file__label\">\n <span class=\"icon-upload c-entry-file__icon\"></span>\n <input\n type=\"file\"\n class=\"c-entry-file__input\"\n (change)=\"onFileSelected($event)\"\n [accept]=\"fieldConfig().accept\"\n [multiple]=\"fieldConfig().multiple\"\n (blur)=\"onBlurInput()\"\n [readonly]=\"isReadonly()\"\n >\n {{ fieldConfig().placeholder ?? fieldConfig().label | translate }}\n @if(fieldConfig().acceptString) {\n <br>\n <span class=\"c-entry-file__filename\" id=\"file-name\">{{ fieldConfig().acceptString }}</span>\n }\n </label>\n }\n\n @if (allFiles().length > 0) {\n <div class=\"c-attachments\">\n <p class=\"c-entry-text\">{{ 'files.attachedFiles' | translate }}</p>\n \n <ul class=\"c-attachments__list\">\n @for (file of allFiles(); track $index; let i = $index) {\n <li class=\"c-attachments__item\">\n <div class=\"c-bulleted-text\">\n @if(!isServerFile(file)) {\n <time>{{ getCurrentDate() }}</time>\n <span>{{ getCurrentUser() }}</span>\n }\n </div>\n \n <div class=\"c-attachments__holder\">\n @if(!isServerFile(file) && file.type.startsWith('image/') && fieldConfig().showPreview !== false) {\n <div class=\"c-attachments__content\">\n @if(getPreviewIndex(file) >= 0 && previewUrls()[getPreviewIndex(file)]) {\n <picture class=\"c-attachments__pic c-pic\">\n <img [src]=\"previewUrls()[getPreviewIndex(file)]\" [alt]=\"file.name\" loading=\"lazy\">\n </picture>\n }\n <div class=\"c-attachments__text\">\n <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n </div>\n </div>\n } @else {\n <a class=\"c-attachments__content\">\n @if(isServerFile(file)) {\n <span class=\"icon-file\"></span>\n {{ file.filename }}\n } @else {\n <span [class]=\"getFileIcon(file)\"></span>\n <div class=\"c-attachments__text\">\n <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n </div>\n }\n </a>\n }\n\n <div class=\"c-attachments__actions u-flex u-flex--wrap\">\n <button \n type=\"button\" \n class=\"c-link context:error\" \n (click)=\"removeFile(i)\"\n [title]=\"'files.remove' | translate\"\n >\n <span class=\"icon-delete\"></span>\n {{ 'files.remove' | translate }}\n </button>\n\n @if(fieldConfig().customActions) {\n @for(action of fieldConfig().customActions; track action.id) {\n <button \n type=\"button\"\n class=\"c-link c-link--underlined\" \n (click)=\"action.action(file)\"\n [title]=\"action.label | translate\"\n >\n {{ action.label | translate }}\n <span [ngClass]=\"action.icon | coreIconCompat\"></span>\n </button>\n }\n }\n </div>\n </div>\n </li>\n }\n </ul>\n </div>\n }\n </div>\n <core-field-errors [errors]=\"errors()\" />\n @if(displayErrorMessage()) {\n <span class=\"c-entry-error\">{{ displayErrorMessage()!.key | translate:displayErrorMessage()!.params }}</span>\n }\n</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
|
|
1167
1177
|
}
|
|
1168
1178
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FileFieldComponent, decorators: [{
|
|
1169
1179
|
type: Component,
|
|
1170
|
-
args: [{ selector: 'core-file-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n @if (field().label) {\n <span class=\"c-entry-text\"
|
|
1180
|
+
args: [{ selector: 'core-file-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n @if (field().label) {\n <span class=\"c-entry-text\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n }\n <div class=\"c-entry-file\" [class.has-error]=\"hasError()\">\n @if(fieldConfig().multiple || isEditMode() || allFiles().length === 0) {\n <label class=\"c-entry-file__label\">\n <span class=\"icon-upload c-entry-file__icon\"></span>\n <input\n type=\"file\"\n class=\"c-entry-file__input\"\n (change)=\"onFileSelected($event)\"\n [accept]=\"fieldConfig().accept\"\n [multiple]=\"fieldConfig().multiple\"\n (blur)=\"onBlurInput()\"\n [readonly]=\"isReadonly()\"\n >\n {{ fieldConfig().placeholder ?? fieldConfig().label | translate }}\n @if(fieldConfig().acceptString) {\n <br>\n <span class=\"c-entry-file__filename\" id=\"file-name\">{{ fieldConfig().acceptString }}</span>\n }\n </label>\n }\n\n @if (allFiles().length > 0) {\n <div class=\"c-attachments\">\n <p class=\"c-entry-text\">{{ 'files.attachedFiles' | translate }}</p>\n \n <ul class=\"c-attachments__list\">\n @for (file of allFiles(); track $index; let i = $index) {\n <li class=\"c-attachments__item\">\n <div class=\"c-bulleted-text\">\n @if(!isServerFile(file)) {\n <time>{{ getCurrentDate() }}</time>\n <span>{{ getCurrentUser() }}</span>\n }\n </div>\n \n <div class=\"c-attachments__holder\">\n @if(!isServerFile(file) && file.type.startsWith('image/') && fieldConfig().showPreview !== false) {\n <div class=\"c-attachments__content\">\n @if(getPreviewIndex(file) >= 0 && previewUrls()[getPreviewIndex(file)]) {\n <picture class=\"c-attachments__pic c-pic\">\n <img [src]=\"previewUrls()[getPreviewIndex(file)]\" [alt]=\"file.name\" loading=\"lazy\">\n </picture>\n }\n <div class=\"c-attachments__text\">\n <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n </div>\n </div>\n } @else {\n <a class=\"c-attachments__content\">\n @if(isServerFile(file)) {\n <span class=\"icon-file\"></span>\n {{ file.filename }}\n } @else {\n <span [class]=\"getFileIcon(file)\"></span>\n <div class=\"c-attachments__text\">\n <span class=\"c-attachments__name-file\">{{ file.name }}</span>\n <span class=\"c-attachments__file-size\">({{ formatFileSize(file.size) }})</span>\n </div>\n }\n </a>\n }\n\n <div class=\"c-attachments__actions u-flex u-flex--wrap\">\n <button \n type=\"button\" \n class=\"c-link context:error\" \n (click)=\"removeFile(i)\"\n [title]=\"'files.remove' | translate\"\n >\n <span class=\"icon-delete\"></span>\n {{ 'files.remove' | translate }}\n </button>\n\n @if(fieldConfig().customActions) {\n @for(action of fieldConfig().customActions; track action.id) {\n <button \n type=\"button\"\n class=\"c-link c-link--underlined\" \n (click)=\"action.action(file)\"\n [title]=\"action.label | translate\"\n >\n {{ action.label | translate }}\n <span [ngClass]=\"action.icon | coreIconCompat\"></span>\n </button>\n }\n }\n </div>\n </div>\n </li>\n }\n </ul>\n </div>\n }\n </div>\n <core-field-errors [errors]=\"errors()\" />\n @if(displayErrorMessage()) {\n <span class=\"c-entry-error\">{{ displayErrorMessage()!.key | translate:displayErrorMessage()!.params }}</span>\n }\n</label>\n" }]
|
|
1171
1181
|
}] });
|
|
1172
1182
|
|
|
1173
1183
|
var NumberFieldConfigType;
|
|
@@ -1353,11 +1363,11 @@ class NumberFieldComponent extends BaseFieldComponent {
|
|
|
1353
1363
|
this.onBlur();
|
|
1354
1364
|
}
|
|
1355
1365
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NumberFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1356
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: NumberFieldComponent, isStandalone: true, selector: "core-number-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\"
|
|
1366
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: NumberFieldComponent, isStandalone: true, selector: "core-number-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <!--\n \u2705! Solcre: Detalles para Ambos tipos de inputs implementados:\n \u2705 title y aria-label de los botones - Ahora usan traducciones din\u00E1micas\n \u2705 style=\"--chars: XXX\" - Implementado con getCharsWidth()\n \u2705 Bot\u00F3n de Sumar chequea el atributo max - Implementado isIncrementDisabled()\n \u2705 Bot\u00F3n de Restar chequea el atributo min - Implementado isDecrementDisabled()\n \u2705 Estado disabled agregado (disabled y .is-disabled) - Implementado isDisabled()\n \u2705 Atributos min/max agregados a los inputs\n (?) El .c-entry-stepper o .c-entry-input deber\u00EDa ser un componente en s\u00ED mismo (No me queda claro esto)\n -->\n\n @if (fieldType() === NumberFieldConfigType.OUTSIDE) {\n\n <div class=\"c-entry-stepper\" \n [style.--chars]=\"getCharsWidth()\"\n [class.is-disabled]=\"isDisabled()\">\n\n <button class=\"c-entry-stepper__control icon-counter-down js-input-number-control\"\n type=\"button\"\n [disabled]=\"isDecrementDisabled()\"\n (click)=\"onControlClick(-1)\"\n (mousedown)=\"handleMouseDown($event, -1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, -1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.decrement' | translate\"\n [attr.aria-label]=\"'number-field.decrement' | translate\"\n tabindex=\"-1\"></button>\n\n <input class=\"c-entry-input\"\n type=\"number\"\n [min]=\"getMinValue()\"\n [max]=\"getMaxValue()\"\n inputmode=\"numeric\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled() || getDisableInput()\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\">\n\n <button class=\"c-entry-stepper__control icon-counter-up js-input-number-control\"\n type=\"button\"\n [disabled]=\"isIncrementDisabled()\"\n (click)=\"onControlClick(1)\"\n (mousedown)=\"handleMouseDown($event, 1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, 1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.increment' | translate\"\n [attr.aria-label]=\"'number-field.increment' | translate\"\n tabindex=\"-1\"></button>\n </div>\n \n } @else {\n\n <label class=\"c-entry-input\"\n [style.--chars]=\"getCharsWidth()\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\">\n <span *ngIf=\"iconClass()\" class=\"{{ iconClass() | coreIconCompat }}\"></span>\n\n <input\n type=\"number\"\n [min]=\"getMinValue()\"\n [max]=\"getMaxValue()\"\n inputmode=\"decimal\"\n [class.is-disabled]=\"isDisabled()\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\"\n />\n\n <span class=\"c-entry-number-controls\">\n <button class=\"icon-arrow-up js-input-number-control\"\n type=\"button\"\n [disabled]=\"isIncrementDisabled()\"\n (click)=\"onControlClick(1)\"\n (mousedown)=\"handleMouseDown($event, 1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, 1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.increment' | translate\"\n [attr.aria-label]=\"'number-field.increment' | translate\"\n tabindex=\"-1\"\n ></button>\n <button class=\"icon-arrow-down js-input-number-control\"\n type=\"button\"\n [disabled]=\"isDecrementDisabled()\"\n (click)=\"onControlClick(-1)\"\n (mousedown)=\"handleMouseDown($event, -1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, -1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.decrement' | translate\"\n [attr.aria-label]=\"'number-field.decrement' | translate\"\n tabindex=\"-1\"\n ></button>\n </span>\n </label>\n }\n <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
|
|
1357
1367
|
}
|
|
1358
1368
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NumberFieldComponent, decorators: [{
|
|
1359
1369
|
type: Component,
|
|
1360
|
-
args: [{ selector: 'core-number-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\"
|
|
1370
|
+
args: [{ selector: 'core-number-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <!--\n \u2705! Solcre: Detalles para Ambos tipos de inputs implementados:\n \u2705 title y aria-label de los botones - Ahora usan traducciones din\u00E1micas\n \u2705 style=\"--chars: XXX\" - Implementado con getCharsWidth()\n \u2705 Bot\u00F3n de Sumar chequea el atributo max - Implementado isIncrementDisabled()\n \u2705 Bot\u00F3n de Restar chequea el atributo min - Implementado isDecrementDisabled()\n \u2705 Estado disabled agregado (disabled y .is-disabled) - Implementado isDisabled()\n \u2705 Atributos min/max agregados a los inputs\n (?) El .c-entry-stepper o .c-entry-input deber\u00EDa ser un componente en s\u00ED mismo (No me queda claro esto)\n -->\n\n @if (fieldType() === NumberFieldConfigType.OUTSIDE) {\n\n <div class=\"c-entry-stepper\" \n [style.--chars]=\"getCharsWidth()\"\n [class.is-disabled]=\"isDisabled()\">\n\n <button class=\"c-entry-stepper__control icon-counter-down js-input-number-control\"\n type=\"button\"\n [disabled]=\"isDecrementDisabled()\"\n (click)=\"onControlClick(-1)\"\n (mousedown)=\"handleMouseDown($event, -1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, -1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.decrement' | translate\"\n [attr.aria-label]=\"'number-field.decrement' | translate\"\n tabindex=\"-1\"></button>\n\n <input class=\"c-entry-input\"\n type=\"number\"\n [min]=\"getMinValue()\"\n [max]=\"getMaxValue()\"\n inputmode=\"numeric\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled() || getDisableInput()\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\">\n\n <button class=\"c-entry-stepper__control icon-counter-up js-input-number-control\"\n type=\"button\"\n [disabled]=\"isIncrementDisabled()\"\n (click)=\"onControlClick(1)\"\n (mousedown)=\"handleMouseDown($event, 1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, 1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.increment' | translate\"\n [attr.aria-label]=\"'number-field.increment' | translate\"\n tabindex=\"-1\"></button>\n </div>\n \n } @else {\n\n <label class=\"c-entry-input\"\n [style.--chars]=\"getCharsWidth()\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\">\n <span *ngIf=\"iconClass()\" class=\"{{ iconClass() | coreIconCompat }}\"></span>\n\n <input\n type=\"number\"\n [min]=\"getMinValue()\"\n [max]=\"getMaxValue()\"\n inputmode=\"decimal\"\n [class.is-disabled]=\"isDisabled()\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n (blur)=\"onBlurInput()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\"\n />\n\n <span class=\"c-entry-number-controls\">\n <button class=\"icon-arrow-up js-input-number-control\"\n type=\"button\"\n [disabled]=\"isIncrementDisabled()\"\n (click)=\"onControlClick(1)\"\n (mousedown)=\"handleMouseDown($event, 1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, 1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.increment' | translate\"\n [attr.aria-label]=\"'number-field.increment' | translate\"\n tabindex=\"-1\"\n ></button>\n <button class=\"icon-arrow-down js-input-number-control\"\n type=\"button\"\n [disabled]=\"isDecrementDisabled()\"\n (click)=\"onControlClick(-1)\"\n (mousedown)=\"handleMouseDown($event, -1)\"\n (mouseup)=\"handleMouseUp($event)\"\n (mouseleave)=\"handleMouseUp($event)\"\n (touchstart)=\"handleTouchStart($event, -1)\"\n (touchend)=\"handleTouchEnd($event)\"\n (touchcancel)=\"handleTouchEnd($event)\"\n [title]=\"'number-field.decrement' | translate\"\n [attr.aria-label]=\"'number-field.decrement' | translate\"\n tabindex=\"-1\"\n ></button>\n </span>\n </label>\n }\n <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->\n" }]
|
|
1361
1371
|
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
1362
1372
|
|
|
1363
1373
|
class PasswordFieldComponent extends BaseFieldComponent {
|
|
@@ -1399,11 +1409,11 @@ class PasswordFieldComponent extends BaseFieldComponent {
|
|
|
1399
1409
|
this.onBlur();
|
|
1400
1410
|
}
|
|
1401
1411
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1402
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: PasswordFieldComponent, isStandalone: true, selector: "core-password-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Solcre: Esto lo estoy haciendo a ciegas \uD83D\uDE05 -->\n \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\"
|
|
1412
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: PasswordFieldComponent, isStandalone: true, selector: "core-password-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Solcre: Esto lo estoy haciendo a ciegas \uD83D\uDE05 -->\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 <label class=\"c-entry-input\"\n [class.is-invalid]=\"hasError()\"\n [class.is-readonly]=\"hasError()\"\n [class.is-disabled]=\"hasError()\">\n\n @if (field().prefixIcon) {\n <span class=\"c-entry-input__addon {{ field().prefixIcon }}\"></span>\n }\n\n <input \n [type]=\"inputType()\" \n [formControl]=\"formControl()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\"\n (blur)=\"onBlurInput()\">\n\n <button class=\"c-entry-input__addon\"\n (click)=\"togglePasswordVisibility()\"\n [class]=\"showPassword()? 'icon-password-hide-thin' :'icon-password-thin'\"\n ></button>\n\n </label>\n <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
|
|
1403
1413
|
}
|
|
1404
1414
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PasswordFieldComponent, decorators: [{
|
|
1405
1415
|
type: Component,
|
|
1406
|
-
args: [{ selector: 'core-password-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- ! Solcre: Esto lo estoy haciendo a ciegas \uD83D\uDE05 -->\n \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\"
|
|
1416
|
+
args: [{ selector: 'core-password-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- ! Solcre: Esto lo estoy haciendo a ciegas \uD83D\uDE05 -->\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 <label class=\"c-entry-input\"\n [class.is-invalid]=\"hasError()\"\n [class.is-readonly]=\"hasError()\"\n [class.is-disabled]=\"hasError()\">\n\n @if (field().prefixIcon) {\n <span class=\"c-entry-input__addon {{ field().prefixIcon }}\"></span>\n }\n\n <input \n [type]=\"inputType()\" \n [formControl]=\"formControl()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\"\n (blur)=\"onBlurInput()\">\n\n <button class=\"c-entry-input__addon\"\n (click)=\"togglePasswordVisibility()\"\n [class]=\"showPassword()? 'icon-password-hide-thin' :'icon-password-thin'\"\n ></button>\n\n </label>\n <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->\n\n" }]
|
|
1407
1417
|
}], ctorParameters: () => [] });
|
|
1408
1418
|
|
|
1409
1419
|
class SelectFieldComponent extends BaseFieldComponent {
|
|
@@ -1600,11 +1610,11 @@ class SelectFieldComponent extends BaseFieldComponent {
|
|
|
1600
1610
|
this.hasValue.set(false);
|
|
1601
1611
|
}
|
|
1602
1612
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1603
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
1613
|
+
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}::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"] }] });
|
|
1604
1614
|
}
|
|
1605
1615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, decorators: [{
|
|
1606
1616
|
type: Component,
|
|
1607
|
-
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\"
|
|
1617
|
+
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}::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"] }]
|
|
1608
1618
|
}], ctorParameters: () => [], propDecorators: { ngSelect: [{
|
|
1609
1619
|
type: ViewChild,
|
|
1610
1620
|
args: [NgSelectComponent]
|
|
@@ -2276,11 +2286,11 @@ class ServerSelectFieldComponent extends BaseFieldComponent {
|
|
|
2276
2286
|
}
|
|
2277
2287
|
}
|
|
2278
2288
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ServerSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2279
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: ServerSelectFieldComponent, isStandalone: true, selector: "core-server-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Solcre: Deberia ser el mismo componente que el select-field.component -->\n<!-- 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\">{{ field().label | translate }}</span>\n \n <!-- ! Solcre: El .c-entry-select deberia ser un componente en s\u00ED mismo -->\n <!-- ! Solcre: Sacar el .is-placeholder en el onChange -->\n \n <span class=\"c-entry-input c-entry-input--ng-select\"\n [class.is-placeholder]=\"isPlaceholderVisible()\">\n <!-- <div class=\"c-entry-select\"> -->\n \n <ng-select #ngSelect\n [items]=\"items()\"\n [bindValue]=\"field().bindValue ?? 'id'\"\n [multiple]=\"field().multiple\"\n [formControl]=\"formControl()\"\n [compareWith]=\"compareWith\"\n [class.has-error]=\"hasError()\"\n [readonly]=\"field().readonly\"\n [clearable]=\"!!value()\"\n [searchable]=\"isSearchable()\"\n [loading]=\"isLoading()\"\n [typeahead]=\"searchInput$\"\n (blur)=\"onBlurInput()\"\n (click)=\"onFieldClick()\"\n (beforeOpen)=\"onBeforeOpen()\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (change)=\"onSelectChange($event)\"\n (clear)=\"onSelectClear()\"\n [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? 'commons.select.placeholder') | translate) : ''\"\n [virtualScroll]=\"true\"\n [clearable]=\"true\"\n >\n <!-- Estilos para cuando se clickea el select para buscar (si es conveniente dejarlo vac\u00EDo) -->\n <ng-template ng-typetosearch-tmp></ng-template>\n <ng-template ng-option-tmp let-item=\"item\">\n <!-- Estilos de opciones del select-->\n {{ getDisplayLabel(item) }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n {{ getDisplayLabel(item) }}\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n </ng-template>\n <ng-template ng-notfound-tmp>\n <ng-container *ngIf=\"isLoading(); else noData\">\n <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n </ng-container>\n <ng-template #noData>\n <ng-container *ngIf=\"hasSearched(); else startTyping\">\n <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n </ng-container>\n <ng-template #startTyping>\n <span class=\"ng-select-start-typing\">{{ 'modal.field.serverSelect.typeToSearch' | translate }}</span>\n </ng-template>\n </ng-template>\n </ng-template>\n </ng-select>\n \n <!-- <span class=\"c-entry-select__arrow icon-arrow-down\"></span> -->\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </span> <!-- .c-entry-select || .c-entry-input -->\n <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->", 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}::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: "directive", type: i5.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: i5.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
|
|
2289
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ServerSelectFieldComponent, isStandalone: true, selector: "core-server-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Solcre: Deberia ser el mismo componente que el select-field.component -->\n<!-- 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 <!-- ! Solcre: El .c-entry-select deberia ser un componente en s\u00ED mismo -->\n <!-- ! Solcre: Sacar el .is-placeholder en el onChange -->\n \n <span class=\"c-entry-input c-entry-input--ng-select\"\n [class.is-placeholder]=\"isPlaceholderVisible()\">\n <!-- <div class=\"c-entry-select\"> -->\n \n <ng-select #ngSelect\n [items]=\"items()\"\n [bindValue]=\"field().bindValue ?? 'id'\"\n [multiple]=\"field().multiple\"\n [formControl]=\"formControl()\"\n [compareWith]=\"compareWith\"\n [class.has-error]=\"hasError()\"\n [readonly]=\"field().readonly\"\n [clearable]=\"!!value()\"\n [searchable]=\"isSearchable()\"\n [loading]=\"isLoading()\"\n [typeahead]=\"searchInput$\"\n (blur)=\"onBlurInput()\"\n (click)=\"onFieldClick()\"\n (beforeOpen)=\"onBeforeOpen()\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (change)=\"onSelectChange($event)\"\n (clear)=\"onSelectClear()\"\n [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? 'commons.select.placeholder') | translate) : ''\"\n [virtualScroll]=\"true\"\n [clearable]=\"true\"\n >\n <!-- Estilos para cuando se clickea el select para buscar (si es conveniente dejarlo vac\u00EDo) -->\n <ng-template ng-typetosearch-tmp></ng-template>\n <ng-template ng-option-tmp let-item=\"item\">\n <!-- Estilos de opciones del select-->\n {{ getDisplayLabel(item) }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n {{ getDisplayLabel(item) }}\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n </ng-template>\n <ng-template ng-notfound-tmp>\n <ng-container *ngIf=\"isLoading(); else noData\">\n <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n </ng-container>\n <ng-template #noData>\n <ng-container *ngIf=\"hasSearched(); else startTyping\">\n <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n </ng-container>\n <ng-template #startTyping>\n <span class=\"ng-select-start-typing\">{{ 'modal.field.serverSelect.typeToSearch' | translate }}</span>\n </ng-template>\n </ng-template>\n </ng-template>\n </ng-select>\n \n <!-- <span class=\"c-entry-select__arrow icon-arrow-down\"></span> -->\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </span> <!-- .c-entry-select || .c-entry-input -->\n <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->", 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}::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: "directive", type: i5.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: i5.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
|
|
2280
2290
|
}
|
|
2281
2291
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ServerSelectFieldComponent, decorators: [{
|
|
2282
2292
|
type: Component,
|
|
2283
|
-
args: [{ selector: 'core-server-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- ! Solcre: Deberia ser el mismo componente que el select-field.component -->\n<!-- 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\"
|
|
2293
|
+
args: [{ selector: 'core-server-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- ! Solcre: Deberia ser el mismo componente que el select-field.component -->\n<!-- 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 <!-- ! Solcre: El .c-entry-select deberia ser un componente en s\u00ED mismo -->\n <!-- ! Solcre: Sacar el .is-placeholder en el onChange -->\n \n <span class=\"c-entry-input c-entry-input--ng-select\"\n [class.is-placeholder]=\"isPlaceholderVisible()\">\n <!-- <div class=\"c-entry-select\"> -->\n \n <ng-select #ngSelect\n [items]=\"items()\"\n [bindValue]=\"field().bindValue ?? 'id'\"\n [multiple]=\"field().multiple\"\n [formControl]=\"formControl()\"\n [compareWith]=\"compareWith\"\n [class.has-error]=\"hasError()\"\n [readonly]=\"field().readonly\"\n [clearable]=\"!!value()\"\n [searchable]=\"isSearchable()\"\n [loading]=\"isLoading()\"\n [typeahead]=\"searchInput$\"\n (blur)=\"onBlurInput()\"\n (click)=\"onFieldClick()\"\n (beforeOpen)=\"onBeforeOpen()\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (change)=\"onSelectChange($event)\"\n (clear)=\"onSelectClear()\"\n [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? 'commons.select.placeholder') | translate) : ''\"\n [virtualScroll]=\"true\"\n [clearable]=\"true\"\n >\n <!-- Estilos para cuando se clickea el select para buscar (si es conveniente dejarlo vac\u00EDo) -->\n <ng-template ng-typetosearch-tmp></ng-template>\n <ng-template ng-option-tmp let-item=\"item\">\n <!-- Estilos de opciones del select-->\n {{ getDisplayLabel(item) }}\n </ng-template>\n <ng-template ng-label-tmp let-item=\"item\">\n <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n {{ getDisplayLabel(item) }}\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n </ng-template>\n <ng-template ng-notfound-tmp>\n <ng-container *ngIf=\"isLoading(); else noData\">\n <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n </ng-container>\n <ng-template #noData>\n <ng-container *ngIf=\"hasSearched(); else startTyping\">\n <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n </ng-container>\n <ng-template #startTyping>\n <span class=\"ng-select-start-typing\">{{ 'modal.field.serverSelect.typeToSearch' | translate }}</span>\n </ng-template>\n </ng-template>\n </ng-template>\n </ng-select>\n \n <!-- <span class=\"c-entry-select__arrow icon-arrow-down\"></span> -->\n <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n </span> <!-- .c-entry-select || .c-entry-input -->\n <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->", 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}::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"] }]
|
|
2284
2294
|
}], ctorParameters: () => [], propDecorators: { ngSelect: [{
|
|
2285
2295
|
type: ViewChild,
|
|
2286
2296
|
args: ['ngSelect']
|
|
@@ -2359,11 +2369,11 @@ class SwitchFieldComponent extends BaseFieldComponent {
|
|
|
2359
2369
|
this.onBlur();
|
|
2360
2370
|
}
|
|
2361
2371
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SwitchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2362
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2372
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SwitchFieldComponent, isStandalone: true, selector: "core-switch-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- <div class=\"c-entry-toggle-holder\" [class.is-invalid]=\"hasError()\"> -->\n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\"\n *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <!-- \n (?)Solcre: El .c-entry-toggle deber\u00EDa ser un componente por si solo\n -->\n <label class=\"c-entry-toggle\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\">\n \n <!-- \n \u2705 onBlurInput(): Maneja el evento blur para:\n - Validar el campo al perder el foco\n - Actualizar el estado del formulario \n - Disparar eventos de cambio si es necesario\n -->\n <input\n type=\"checkbox\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n [attr.aria-label]=\"(field().label || field().key.toString()) | translate\"\n (blur)=\"onBlurInput()\"\n />\n <span class=\"c-entry-toggle__text\">{{ labelOff() | translate }}</span>\n <span class=\"c-entry-toggle__switch\"></span>\n <span class=\"c-entry-toggle__text\">{{ labelOn() | translate }}</span>\n </label>\n <core-field-errors [errors]=\"errors()\" />\n</div>\n", styles: [".disabled{opacity:.5;pointer-events:none;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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
|
|
2363
2373
|
}
|
|
2364
2374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SwitchFieldComponent, decorators: [{
|
|
2365
2375
|
type: Component,
|
|
2366
|
-
args: [{ selector: 'core-switch-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- <div class=\"c-entry-toggle-holder\" [class.is-invalid]=\"hasError()\"> -->\n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\"\n *ngIf=\"field().label\"
|
|
2376
|
+
args: [{ selector: 'core-switch-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- <div class=\"c-entry-toggle-holder\" [class.is-invalid]=\"hasError()\"> -->\n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\"\n *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <!-- \n (?)Solcre: El .c-entry-toggle deber\u00EDa ser un componente por si solo\n -->\n <label class=\"c-entry-toggle\"\n [class.is-invalid]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\">\n \n <!-- \n \u2705 onBlurInput(): Maneja el evento blur para:\n - Validar el campo al perder el foco\n - Actualizar el estado del formulario \n - Disparar eventos de cambio si es necesario\n -->\n <input\n type=\"checkbox\"\n [id]=\"field().key.toString()\"\n [name]=\"field().key.toString()\"\n [formControl]=\"formControl()\"\n [attr.aria-label]=\"(field().label || field().key.toString()) | translate\"\n (blur)=\"onBlurInput()\"\n />\n <span class=\"c-entry-toggle__text\">{{ labelOff() | translate }}</span>\n <span class=\"c-entry-toggle__switch\"></span>\n <span class=\"c-entry-toggle__text\">{{ labelOn() | translate }}</span>\n </label>\n <core-field-errors [errors]=\"errors()\" />\n</div>\n", styles: [".disabled{opacity:.5;pointer-events:none;cursor:not-allowed}\n"] }]
|
|
2367
2377
|
}], ctorParameters: () => [] });
|
|
2368
2378
|
|
|
2369
2379
|
class TextAreaFieldComponent extends BaseFieldComponent {
|
|
@@ -2401,11 +2411,11 @@ class TextAreaFieldComponent extends BaseFieldComponent {
|
|
|
2401
2411
|
this.onBlur();
|
|
2402
2412
|
}
|
|
2403
2413
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TextAreaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2404
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2414
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TextAreaFieldComponent, isStandalone: true, selector: "core-text-area-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <!-- ! Solcre: Falta un estado disabled -->\n <textarea class=\"c-entry-input\"\n rows=\"4\"\n [class.is-invalid]=\"hasError()\"\n [formControl]=\"formControl()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\"\n (blur)=\"onBlurInput()\">\n </textarea>\n <core-field-errors [errors]=\"errors()\" />\n</label>\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
|
|
2405
2415
|
}
|
|
2406
2416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TextAreaFieldComponent, decorators: [{
|
|
2407
2417
|
type: Component,
|
|
2408
|
-
args: [{ selector: 'core-text-area-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\"
|
|
2418
|
+
args: [{ selector: 'core-text-area-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <!-- ! Solcre: Falta un estado disabled -->\n <textarea class=\"c-entry-input\"\n rows=\"4\"\n [class.is-invalid]=\"hasError()\"\n [formControl]=\"formControl()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\"\n (blur)=\"onBlurInput()\">\n </textarea>\n <core-field-errors [errors]=\"errors()\" />\n</label>\n" }]
|
|
2409
2419
|
}], ctorParameters: () => [] });
|
|
2410
2420
|
|
|
2411
2421
|
class TextFieldComponent extends BaseFieldComponent {
|
|
@@ -2456,11 +2466,11 @@ class TextFieldComponent extends BaseFieldComponent {
|
|
|
2456
2466
|
this.onEnterInput(keyboardEvent);
|
|
2457
2467
|
}
|
|
2458
2468
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2459
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TextFieldComponent, isStandalone: true, selector: "core-text-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\"
|
|
2469
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TextFieldComponent, isStandalone: true, selector: "core-text-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <!-- \n ! Solcre: Detalles del input implementados:\n \u2705 Estado disabled agregado - Implementado isDisabled()\n \u2705 Type din\u00E1mico implementado - Acepta text, email, url, tel, etc.\n \u2705 style=\"--chars: XXX\" implementado - Ancho adaptable seg\u00FAn caracteres\n \u2705 PrefixIcon agregado - Soporte para iconos de prefijo\n -->\n\n <span class=\"c-entry-input\"\n [style.--chars]=\"getCharsWidth()\"\n [class.is-readonly]=\"isReadonly() || field().blocked\"\n [class.is-disabled]=\"isDisabled()\">\n @if (field().prefixIcon) {\n <span class=\"c-entry-input__addon\" [class]=\"field().prefixIcon | coreIconCompat\"></span>\n }\n <input \n [type]=\"getInputType()\"\n [class.has-error]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\"\n [formControl]=\"formControl()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\"\n (blur)=\"onBlurInput($event)\"\n (keydown.enter)=\"handleEnterKey($event)\"\n />\n <span *ngIf=\"field().blocked\" class=\"c-entry-input__addon icon-locked-thin\"></span>\n </span>\n <core-field-errors [errors]=\"errors()\"></core-field-errors>\n</label>\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
|
|
2460
2470
|
}
|
|
2461
2471
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
2462
2472
|
type: Component,
|
|
2463
|
-
args: [{ selector: 'core-text-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\"
|
|
2473
|
+
args: [{ selector: 'core-text-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n <span class=\"c-entry-text\" *ngIf=\"field().label\">\n {{ field().label | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </span>\n\n <!-- \n ! Solcre: Detalles del input implementados:\n \u2705 Estado disabled agregado - Implementado isDisabled()\n \u2705 Type din\u00E1mico implementado - Acepta text, email, url, tel, etc.\n \u2705 style=\"--chars: XXX\" implementado - Ancho adaptable seg\u00FAn caracteres\n \u2705 PrefixIcon agregado - Soporte para iconos de prefijo\n -->\n\n <span class=\"c-entry-input\"\n [style.--chars]=\"getCharsWidth()\"\n [class.is-readonly]=\"isReadonly() || field().blocked\"\n [class.is-disabled]=\"isDisabled()\">\n @if (field().prefixIcon) {\n <span class=\"c-entry-input__addon\" [class]=\"field().prefixIcon | coreIconCompat\"></span>\n }\n <input \n [type]=\"getInputType()\"\n [class.has-error]=\"hasError()\"\n [class.is-disabled]=\"isDisabled()\"\n [formControl]=\"formControl()\"\n [placeholder]=\"(field().placeholder ?? '') | translate\"\n (blur)=\"onBlurInput($event)\"\n (keydown.enter)=\"handleEnterKey($event)\"\n />\n <span *ngIf=\"field().blocked\" class=\"c-entry-input__addon icon-locked-thin\"></span>\n </span>\n <core-field-errors [errors]=\"errors()\"></core-field-errors>\n</label>\n" }]
|
|
2464
2474
|
}], ctorParameters: () => [] });
|
|
2465
2475
|
|
|
2466
2476
|
class TimeFieldComponent {
|
|
@@ -2787,6 +2797,11 @@ class MultiEntryFieldComponent {
|
|
|
2787
2797
|
canAddMore = computed(() => this.entries().length < this.maxEntries());
|
|
2788
2798
|
canRemove = computed(() => this.entries().length > this.minEntries());
|
|
2789
2799
|
isDisabled = computed(() => this.mode() === ModalMode.VIEW);
|
|
2800
|
+
hasRequiredValidators = computed(() => {
|
|
2801
|
+
const modeConfig = this.field().modes?.[this.mode()];
|
|
2802
|
+
const validators = modeConfig?.validators ?? this.field().validators ?? [];
|
|
2803
|
+
return validators.some(validator => validator === Validators.required);
|
|
2804
|
+
});
|
|
2790
2805
|
constructor() {
|
|
2791
2806
|
effect(() => {
|
|
2792
2807
|
const inputValue = this.value();
|
|
@@ -8955,7 +8970,7 @@ class GenericTableComponent {
|
|
|
8955
8970
|
this.tableDataService.updateRowData(rowId, updatedFields, updateFunction);
|
|
8956
8971
|
}
|
|
8957
8972
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8958
|
-
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 }, 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", 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 }], 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\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\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 (column.sortable !== false) {\n <!-- \u2705 Solcre: Agregado [title] din\u00E1mico y capacidad de volver al estado sin selecci\u00F3n -->\n <button class=\"c-table-order\" tabindex=\"-1\"\n [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\"\n [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n [title]=\"getSortTitle(column) | translate\" (click)=\"sortData(column)\">\n {{ column.label | translate }}\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 <!-- <button \n class=\"c-table__order\" \n [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\" \n [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n (click)=\"sortData(column)\">\n {{ column.label | translate }}\n <span class=\"icon-order-arrow\"></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\n @for (actionConfig of regularDefaultActions(); 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)\"\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 <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"extraDefaultActions()\"\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 }\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<!-- Todo: Ver qu\u00E9 onda esto -->\n<core-generic-pagination [tableId]=\"tableId\"></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", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators"], 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"] }] });
|
|
8973
|
+
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 }, 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", 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 }], 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\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\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 (column.sortable !== false) {\n <!-- \u2705 Solcre: Agregado [title] din\u00E1mico y capacidad de volver al estado sin selecci\u00F3n -->\n <button class=\"c-table-order\" tabindex=\"-1\"\n [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\"\n [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n [title]=\"getSortTitle(column) | translate\" (click)=\"sortData(column)\">\n {{ column.label | translate }}\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 <!-- <button \n class=\"c-table__order\" \n [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\" \n [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n (click)=\"sortData(column)\">\n {{ column.label | translate }}\n <span class=\"icon-order-arrow\"></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]=\"extraDefaultActions()\"\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 regularDefaultActions(); 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)\"\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<!-- Todo: Ver qu\u00E9 onda esto -->\n<core-generic-pagination [tableId]=\"tableId\"></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", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators"], 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"] }] });
|
|
8959
8974
|
}
|
|
8960
8975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
8961
8976
|
type: Component,
|
|
@@ -8969,7 +8984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
8969
8984
|
GenericButtonComponent,
|
|
8970
8985
|
DynamicFieldDirective,
|
|
8971
8986
|
ActiveFiltersComponent,
|
|
8972
|
-
], 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\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\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 (column.sortable !== false) {\n <!-- \u2705 Solcre: Agregado [title] din\u00E1mico y capacidad de volver al estado sin selecci\u00F3n -->\n <button class=\"c-table-order\" tabindex=\"-1\"\n [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\"\n [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n [title]=\"getSortTitle(column) | translate\" (click)=\"sortData(column)\">\n {{ column.label | translate }}\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 <!-- <button \n class=\"c-table__order\" \n [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\" \n [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n (click)=\"sortData(column)\">\n {{ column.label | translate }}\n <span class=\"icon-order-arrow\"></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\n @for (actionConfig of regularDefaultActions(); 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)\"\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
|
|
8987
|
+
], 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\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\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 (column.sortable !== false) {\n <!-- \u2705 Solcre: Agregado [title] din\u00E1mico y capacidad de volver al estado sin selecci\u00F3n -->\n <button class=\"c-table-order\" tabindex=\"-1\"\n [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\"\n [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n [title]=\"getSortTitle(column) | translate\" (click)=\"sortData(column)\">\n {{ column.label | translate }}\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 <!-- <button \n class=\"c-table__order\" \n [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\" \n [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n (click)=\"sortData(column)\">\n {{ column.label | translate }}\n <span class=\"icon-order-arrow\"></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]=\"extraDefaultActions()\"\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 regularDefaultActions(); 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)\"\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<!-- Todo: Ver qu\u00E9 onda esto -->\n<core-generic-pagination [tableId]=\"tableId\"></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"] }]
|
|
8973
8988
|
}], ctorParameters: () => [], propDecorators: { sentinel: [{
|
|
8974
8989
|
type: ViewChild,
|
|
8975
8990
|
args: ['sentinel', { static: false }]
|
|
@@ -10505,12 +10520,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
10505
10520
|
// Este archivo es generado automáticamente por scripts/update-version.js
|
|
10506
10521
|
// No edites manualmente este archivo
|
|
10507
10522
|
const VERSION = {
|
|
10508
|
-
full: '2.11.
|
|
10523
|
+
full: '2.11.32',
|
|
10509
10524
|
major: 2,
|
|
10510
10525
|
minor: 11,
|
|
10511
|
-
patch:
|
|
10512
|
-
timestamp: '2025-
|
|
10513
|
-
buildDate: '
|
|
10526
|
+
patch: 32,
|
|
10527
|
+
timestamp: '2025-09-01T13:40:20.955Z',
|
|
10528
|
+
buildDate: '1/9/2025'
|
|
10514
10529
|
};
|
|
10515
10530
|
|
|
10516
10531
|
class MainNavComponent {
|
|
@@ -10854,6 +10869,267 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
10854
10869
|
}]
|
|
10855
10870
|
}], ctorParameters: () => [] });
|
|
10856
10871
|
|
|
10872
|
+
class ImageModalService {
|
|
10873
|
+
isOpen = signal(false);
|
|
10874
|
+
currentImage = signal(null);
|
|
10875
|
+
isModalOpen = this.isOpen.asReadonly();
|
|
10876
|
+
getCurrentImage = this.currentImage.asReadonly();
|
|
10877
|
+
openImageModal(imageData) {
|
|
10878
|
+
this.currentImage.set(imageData);
|
|
10879
|
+
this.isOpen.set(true);
|
|
10880
|
+
}
|
|
10881
|
+
closeImageModal() {
|
|
10882
|
+
this.isOpen.set(false);
|
|
10883
|
+
setTimeout(() => {
|
|
10884
|
+
this.currentImage.set(null);
|
|
10885
|
+
}, 300);
|
|
10886
|
+
}
|
|
10887
|
+
toggleModal() {
|
|
10888
|
+
if (this.isOpen()) {
|
|
10889
|
+
this.closeImageModal();
|
|
10890
|
+
}
|
|
10891
|
+
}
|
|
10892
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImageModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
10893
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImageModalService, providedIn: 'root' });
|
|
10894
|
+
}
|
|
10895
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImageModalService, decorators: [{
|
|
10896
|
+
type: Injectable,
|
|
10897
|
+
args: [{
|
|
10898
|
+
providedIn: 'root'
|
|
10899
|
+
}]
|
|
10900
|
+
}] });
|
|
10901
|
+
|
|
10902
|
+
class ImageModalComponent {
|
|
10903
|
+
modalImage;
|
|
10904
|
+
imageContainer;
|
|
10905
|
+
imageModalService = inject(ImageModalService);
|
|
10906
|
+
isVisible = this.imageModalService.isModalOpen;
|
|
10907
|
+
currentImage = this.imageModalService.getCurrentImage;
|
|
10908
|
+
modalClosed = output();
|
|
10909
|
+
zoomLevel = signal(1);
|
|
10910
|
+
isDragging = signal(false);
|
|
10911
|
+
lastMouseX = signal(0);
|
|
10912
|
+
lastMouseY = signal(0);
|
|
10913
|
+
translateX = signal(0);
|
|
10914
|
+
translateY = signal(0);
|
|
10915
|
+
minZoom = 1;
|
|
10916
|
+
maxZoom = 3;
|
|
10917
|
+
zoomStep = 0.2;
|
|
10918
|
+
targetTranslateX = 0;
|
|
10919
|
+
targetTranslateY = 0;
|
|
10920
|
+
velocityX = 0;
|
|
10921
|
+
velocityY = 0;
|
|
10922
|
+
friction = 0.9;
|
|
10923
|
+
animationId = null;
|
|
10924
|
+
constructor() {
|
|
10925
|
+
effect(() => {
|
|
10926
|
+
if (this.isVisible()) {
|
|
10927
|
+
document.body.style.overflow = 'hidden';
|
|
10928
|
+
this.resetZoom();
|
|
10929
|
+
}
|
|
10930
|
+
else {
|
|
10931
|
+
document.body.style.overflow = '';
|
|
10932
|
+
this.resetZoom();
|
|
10933
|
+
this.stopAnimation();
|
|
10934
|
+
}
|
|
10935
|
+
});
|
|
10936
|
+
}
|
|
10937
|
+
startAnimation() {
|
|
10938
|
+
if (this.animationId)
|
|
10939
|
+
return;
|
|
10940
|
+
const animate = () => {
|
|
10941
|
+
if (!this.isDragging()) {
|
|
10942
|
+
const currentX = this.translateX();
|
|
10943
|
+
const currentY = this.translateY();
|
|
10944
|
+
const newX = currentX + this.velocityX;
|
|
10945
|
+
const newY = currentY + this.velocityY;
|
|
10946
|
+
this.translateX.set(newX);
|
|
10947
|
+
this.translateY.set(newY);
|
|
10948
|
+
this.velocityX *= this.friction;
|
|
10949
|
+
this.velocityY *= this.friction;
|
|
10950
|
+
if (Math.abs(this.velocityX) < 0.1 && Math.abs(this.velocityY) < 0.1) {
|
|
10951
|
+
this.velocityX = 0;
|
|
10952
|
+
this.velocityY = 0;
|
|
10953
|
+
this.animationId = null;
|
|
10954
|
+
return;
|
|
10955
|
+
}
|
|
10956
|
+
this.animationId = requestAnimationFrame(animate);
|
|
10957
|
+
}
|
|
10958
|
+
else {
|
|
10959
|
+
this.animationId = null;
|
|
10960
|
+
}
|
|
10961
|
+
};
|
|
10962
|
+
this.animationId = requestAnimationFrame(animate);
|
|
10963
|
+
}
|
|
10964
|
+
stopAnimation() {
|
|
10965
|
+
if (this.animationId) {
|
|
10966
|
+
cancelAnimationFrame(this.animationId);
|
|
10967
|
+
this.animationId = null;
|
|
10968
|
+
}
|
|
10969
|
+
this.velocityX = 0;
|
|
10970
|
+
this.velocityY = 0;
|
|
10971
|
+
}
|
|
10972
|
+
resetZoom() {
|
|
10973
|
+
this.zoomLevel.set(1);
|
|
10974
|
+
this.translateX.set(0);
|
|
10975
|
+
this.translateY.set(0);
|
|
10976
|
+
this.isDragging.set(false);
|
|
10977
|
+
this.velocityX = 0;
|
|
10978
|
+
this.velocityY = 0;
|
|
10979
|
+
this.stopAnimation();
|
|
10980
|
+
}
|
|
10981
|
+
closeModal() {
|
|
10982
|
+
this.resetZoom();
|
|
10983
|
+
this.imageModalService.closeImageModal();
|
|
10984
|
+
this.modalClosed.emit();
|
|
10985
|
+
}
|
|
10986
|
+
onWheel(event) {
|
|
10987
|
+
if (!this.isVisible())
|
|
10988
|
+
return;
|
|
10989
|
+
event.preventDefault();
|
|
10990
|
+
event.stopPropagation();
|
|
10991
|
+
const delta = event.deltaY > 0 ? -this.zoomStep : this.zoomStep;
|
|
10992
|
+
const newZoom = Math.min(Math.max(this.zoomLevel() + delta, this.minZoom), this.maxZoom);
|
|
10993
|
+
if (newZoom !== this.zoomLevel()) {
|
|
10994
|
+
this.zoomLevel.set(newZoom);
|
|
10995
|
+
if (newZoom === 1) {
|
|
10996
|
+
this.translateX.set(0);
|
|
10997
|
+
this.translateY.set(0);
|
|
10998
|
+
this.velocityX = 0;
|
|
10999
|
+
this.velocityY = 0;
|
|
11000
|
+
}
|
|
11001
|
+
}
|
|
11002
|
+
}
|
|
11003
|
+
onMouseDown(event) {
|
|
11004
|
+
if (!this.isVisible() || this.zoomLevel() <= 1)
|
|
11005
|
+
return;
|
|
11006
|
+
event.preventDefault();
|
|
11007
|
+
this.isDragging.set(true);
|
|
11008
|
+
this.lastMouseX.set(event.clientX);
|
|
11009
|
+
this.lastMouseY.set(event.clientY);
|
|
11010
|
+
this.velocityX = 0;
|
|
11011
|
+
this.velocityY = 0;
|
|
11012
|
+
}
|
|
11013
|
+
onMouseMove(event) {
|
|
11014
|
+
if (!this.isDragging() || !this.isVisible())
|
|
11015
|
+
return;
|
|
11016
|
+
event.preventDefault();
|
|
11017
|
+
const deltaX = event.clientX - this.lastMouseX();
|
|
11018
|
+
const deltaY = event.clientY - this.lastMouseY();
|
|
11019
|
+
const newX = this.translateX() + deltaX;
|
|
11020
|
+
const newY = this.translateY() + deltaY;
|
|
11021
|
+
this.translateX.set(newX);
|
|
11022
|
+
this.translateY.set(newY);
|
|
11023
|
+
this.velocityX = deltaX * 0.5;
|
|
11024
|
+
this.velocityY = deltaY * 0.5;
|
|
11025
|
+
this.lastMouseX.set(event.clientX);
|
|
11026
|
+
this.lastMouseY.set(event.clientY);
|
|
11027
|
+
}
|
|
11028
|
+
onMouseUp() {
|
|
11029
|
+
if (this.isDragging()) {
|
|
11030
|
+
this.isDragging.set(false);
|
|
11031
|
+
if (Math.abs(this.velocityX) > 1 || Math.abs(this.velocityY) > 1) {
|
|
11032
|
+
this.startAnimation();
|
|
11033
|
+
}
|
|
11034
|
+
}
|
|
11035
|
+
}
|
|
11036
|
+
onDoubleClick() {
|
|
11037
|
+
if (!this.isVisible())
|
|
11038
|
+
return;
|
|
11039
|
+
if (this.zoomLevel() > 1) {
|
|
11040
|
+
this.resetZoom();
|
|
11041
|
+
}
|
|
11042
|
+
else {
|
|
11043
|
+
this.zoomLevel.set(2);
|
|
11044
|
+
this.translateX.set(0);
|
|
11045
|
+
this.translateY.set(0);
|
|
11046
|
+
this.velocityX = 0;
|
|
11047
|
+
this.velocityY = 0;
|
|
11048
|
+
this.stopAnimation();
|
|
11049
|
+
}
|
|
11050
|
+
}
|
|
11051
|
+
getHolderTransform() {
|
|
11052
|
+
return `scale(${this.zoomLevel()}) translate(${this.translateX()}px, ${this.translateY()}px)`;
|
|
11053
|
+
}
|
|
11054
|
+
getCursor() {
|
|
11055
|
+
if (this.zoomLevel() > 1) {
|
|
11056
|
+
return this.isDragging() ? 'grabbing' : 'grab';
|
|
11057
|
+
}
|
|
11058
|
+
return 'zoom-in';
|
|
11059
|
+
}
|
|
11060
|
+
handleKeydown(event) {
|
|
11061
|
+
if (event.key === 'Escape' && this.isVisible()) {
|
|
11062
|
+
this.closeModal();
|
|
11063
|
+
}
|
|
11064
|
+
}
|
|
11065
|
+
onDocumentMouseMove(event) {
|
|
11066
|
+
this.onMouseMove(event);
|
|
11067
|
+
}
|
|
11068
|
+
onDocumentMouseUp() {
|
|
11069
|
+
this.onMouseUp();
|
|
11070
|
+
}
|
|
11071
|
+
onTouchStart(event) {
|
|
11072
|
+
if (!this.isVisible() || this.zoomLevel() <= 1)
|
|
11073
|
+
return;
|
|
11074
|
+
event.preventDefault();
|
|
11075
|
+
const touch = event.touches[0];
|
|
11076
|
+
this.isDragging.set(true);
|
|
11077
|
+
this.lastMouseX.set(touch.clientX);
|
|
11078
|
+
this.lastMouseY.set(touch.clientY);
|
|
11079
|
+
this.velocityX = 0;
|
|
11080
|
+
this.velocityY = 0;
|
|
11081
|
+
}
|
|
11082
|
+
onTouchMove(event) {
|
|
11083
|
+
if (!this.isDragging() || !this.isVisible())
|
|
11084
|
+
return;
|
|
11085
|
+
event.preventDefault();
|
|
11086
|
+
const touch = event.touches[0];
|
|
11087
|
+
const deltaX = touch.clientX - this.lastMouseX();
|
|
11088
|
+
const deltaY = touch.clientY - this.lastMouseY();
|
|
11089
|
+
const newX = this.translateX() + deltaX;
|
|
11090
|
+
const newY = this.translateY() + deltaY;
|
|
11091
|
+
this.translateX.set(newX);
|
|
11092
|
+
this.translateY.set(newY);
|
|
11093
|
+
this.velocityX = deltaX * 0.5;
|
|
11094
|
+
this.velocityY = deltaY * 0.5;
|
|
11095
|
+
this.lastMouseX.set(touch.clientX);
|
|
11096
|
+
this.lastMouseY.set(touch.clientY);
|
|
11097
|
+
}
|
|
11098
|
+
onTouchEnd() {
|
|
11099
|
+
if (this.isDragging()) {
|
|
11100
|
+
this.isDragging.set(false);
|
|
11101
|
+
if (Math.abs(this.velocityX) > 1 || Math.abs(this.velocityY) > 1) {
|
|
11102
|
+
this.startAnimation();
|
|
11103
|
+
}
|
|
11104
|
+
}
|
|
11105
|
+
}
|
|
11106
|
+
ngOnDestroy() {
|
|
11107
|
+
this.stopAnimation();
|
|
11108
|
+
document.body.style.overflow = '';
|
|
11109
|
+
}
|
|
11110
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImageModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11111
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: ImageModalComponent, isStandalone: true, selector: "core-image-modal", outputs: { modalClosed: "modalClosed" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "document:mousemove": "onDocumentMouseMove($event)", "document:mouseup": "onDocumentMouseUp()" } }, viewQueries: [{ propertyName: "modalImage", first: true, predicate: ["modalImage"], descendants: true }, { propertyName: "imageContainer", first: true, predicate: ["imageContainer"], descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-img-modal js-img-modal\" [class.is-visible]=\"isVisible()\">\n <span class=\"c-img-modal__close icon-cross-thin js-gallery-modal-close\" (click)=\"closeModal()\"></span>\n <div class=\"c-img-modal__overlay js-img-modal-close\" (click)=\"closeModal()\"></div>\n <div \n class=\"c-img-modal__holder\" \n #imageContainer\n [style.transform]=\"getHolderTransform()\"\n [style.cursor]=\"getCursor()\"\n (mousedown)=\"onMouseDown($event)\"\n (wheel)=\"onWheel($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd()\"\n (dblclick)=\"onDoubleClick()\">\n <img \n #modalImage\n [src]=\"currentImage()?.src || ''\" \n [alt]=\"currentImage()?.alt || 'Imagen ampliada'\" \n [title]=\"currentImage()?.title || ''\"\n class=\"js-img-modal-img\"\n draggable=\"false\">\n </div>\n</div>\n", styles: [".c-img-modal__holder{transform-origin:center center;overflow:visible;will-change:transform}.c-img-modal__holder img{transform-origin:center center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.c-img-modal__holder[style*=transform]{backface-visibility:hidden;perspective:1000px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
11112
|
+
}
|
|
11113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImageModalComponent, decorators: [{
|
|
11114
|
+
type: Component,
|
|
11115
|
+
args: [{ selector: 'core-image-modal', standalone: true, imports: [CommonModule], hostDirectives: [CoreHostDirective], template: "<div class=\"c-img-modal js-img-modal\" [class.is-visible]=\"isVisible()\">\n <span class=\"c-img-modal__close icon-cross-thin js-gallery-modal-close\" (click)=\"closeModal()\"></span>\n <div class=\"c-img-modal__overlay js-img-modal-close\" (click)=\"closeModal()\"></div>\n <div \n class=\"c-img-modal__holder\" \n #imageContainer\n [style.transform]=\"getHolderTransform()\"\n [style.cursor]=\"getCursor()\"\n (mousedown)=\"onMouseDown($event)\"\n (wheel)=\"onWheel($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd()\"\n (dblclick)=\"onDoubleClick()\">\n <img \n #modalImage\n [src]=\"currentImage()?.src || ''\" \n [alt]=\"currentImage()?.alt || 'Imagen ampliada'\" \n [title]=\"currentImage()?.title || ''\"\n class=\"js-img-modal-img\"\n draggable=\"false\">\n </div>\n</div>\n", styles: [".c-img-modal__holder{transform-origin:center center;overflow:visible;will-change:transform}.c-img-modal__holder img{transform-origin:center center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.c-img-modal__holder[style*=transform]{backface-visibility:hidden;perspective:1000px}\n"] }]
|
|
11116
|
+
}], ctorParameters: () => [], propDecorators: { modalImage: [{
|
|
11117
|
+
type: ViewChild,
|
|
11118
|
+
args: ['modalImage', { static: false }]
|
|
11119
|
+
}], imageContainer: [{
|
|
11120
|
+
type: ViewChild,
|
|
11121
|
+
args: ['imageContainer', { static: false }]
|
|
11122
|
+
}], handleKeydown: [{
|
|
11123
|
+
type: HostListener,
|
|
11124
|
+
args: ['document:keydown', ['$event']]
|
|
11125
|
+
}], onDocumentMouseMove: [{
|
|
11126
|
+
type: HostListener,
|
|
11127
|
+
args: ['document:mousemove', ['$event']]
|
|
11128
|
+
}], onDocumentMouseUp: [{
|
|
11129
|
+
type: HostListener,
|
|
11130
|
+
args: ['document:mouseup']
|
|
11131
|
+
}] } });
|
|
11132
|
+
|
|
10857
11133
|
class LayoutComponent {
|
|
10858
11134
|
navItems = input([]);
|
|
10859
11135
|
bottomNavItems = input([]);
|
|
@@ -11024,7 +11300,7 @@ class LayoutComponent {
|
|
|
11024
11300
|
this.onLogout.emit();
|
|
11025
11301
|
}
|
|
11026
11302
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11027
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout" }, host: { listeners: { "window:resize": "onResize($event)" } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"o-layout\" \n [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n >\n\n <!-- Nav -->\n <core-main-nav class=\"o-layout__nav\" \n (toggleSidebar)=\"toggleSidebar()\"\n [navItems]=\"navItems()\"\n [navConfig]=\"navConfig()\"\n [bottomNavItems]=\"bottomNavItems()\"\n [logoImagesConfig]=\"logoImagesConfig()\"\n [collapsedLogo]=\"collapsedLogo()\"\n [expandedLogo]=\"expandedLogo()\"\n (onLogout)=\"logout()\"\n >\n </core-main-nav>\n\n <!-- Main -->\n <div class=\"o-layout__body\">\n \n @if(layoutStateService.isHeaderVisible$() | async) {\n <core-header\n class=\"o-layout__header\"\n (filterRequested)=\"onFilterRequested()\"\n (createRequested)=\"onCreateRequested()\"\n (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n </core-header>\n }\n\n @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--left\"\n [config]=\"leftSidebarConfig\">\n </core-generic-sidebar>\n }\n\n <ng-content></ng-content>\n\n @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--right\"\n [config]=\"rightSidebarConfig\">\n </core-generic-sidebar>\n }\n\n\n @if(dialogService.isOpen$()) {\n <core-confirmation-dialog\n [isOpen]=\"dialogService.isOpen$()\"\n [config]=\"dialogService.config$()\"\n (confirm)=\"dialogService.confirm($event)\"\n (cancel)=\"dialogService.cancel()\"\n ></core-confirmation-dialog>\n }\n\n @if(sidebarMobileModalService.isOpen()) {\n <core-generic-modal\n [isOpen]=\"sidebarMobileModalService.isOpen()\"\n [mode]=\"ModalMode.CREATE\"\n [title]=\"getSidebarModalTitle()\"\n [customTemplate]=\"sidebarModalContentTemplate\"\n (close)=\"sidebarMobileModalService.closeModal()\"\n [buttonConfig]=\"getSidebarModalButtons()\">\n </core-generic-modal>\n }\n\n </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- ! Refactor: End -->", dependencies: [{ kind: "component", type: MainNavComponent, selector: "core-main-nav", inputs: ["navConfig", "appVersion", "navItems", "bottomNavItems", "isProduction", "logoImagesConfig", "collapsedLogo", "expandedLogo"], outputs: ["onLogout"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: ConfirmationDialogComponent, selector: "core-confirmation-dialog", inputs: ["isOpen", "config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: GenericSidebarComponent, selector: "core-generic-sidebar", inputs: ["config", "position", "customTemplate"], outputs: ["itemClicked", "subItemClicked"] }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }] });
|
|
11303
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout" }, host: { listeners: { "window:resize": "onResize($event)" } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"o-layout\" \n [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n >\n\n <!-- Nav -->\n <core-main-nav class=\"o-layout__nav\" \n (toggleSidebar)=\"toggleSidebar()\"\n [navItems]=\"navItems()\"\n [navConfig]=\"navConfig()\"\n [bottomNavItems]=\"bottomNavItems()\"\n [logoImagesConfig]=\"logoImagesConfig()\"\n [collapsedLogo]=\"collapsedLogo()\"\n [expandedLogo]=\"expandedLogo()\"\n (onLogout)=\"logout()\"\n >\n </core-main-nav>\n\n <!-- Main -->\n <div class=\"o-layout__body\">\n \n @if(layoutStateService.isHeaderVisible$() | async) {\n <core-header\n class=\"o-layout__header\"\n (filterRequested)=\"onFilterRequested()\"\n (createRequested)=\"onCreateRequested()\"\n (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n </core-header>\n }\n\n @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--left\"\n [config]=\"leftSidebarConfig\">\n </core-generic-sidebar>\n }\n\n <ng-content></ng-content>\n\n @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--right\"\n [config]=\"rightSidebarConfig\">\n </core-generic-sidebar>\n }\n\n\n @if(dialogService.isOpen$()) {\n <core-confirmation-dialog\n [isOpen]=\"dialogService.isOpen$()\"\n [config]=\"dialogService.config$()\"\n (confirm)=\"dialogService.confirm($event)\"\n (cancel)=\"dialogService.cancel()\"\n ></core-confirmation-dialog>\n }\n\n @if(sidebarMobileModalService.isOpen()) {\n <core-generic-modal\n [isOpen]=\"sidebarMobileModalService.isOpen()\"\n [mode]=\"ModalMode.CREATE\"\n [title]=\"getSidebarModalTitle()\"\n [customTemplate]=\"sidebarModalContentTemplate\"\n (close)=\"sidebarMobileModalService.closeModal()\"\n [buttonConfig]=\"getSidebarModalButtons()\">\n </core-generic-modal>\n }\n\n </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- ! Refactor: End -->", dependencies: [{ kind: "component", type: MainNavComponent, selector: "core-main-nav", inputs: ["navConfig", "appVersion", "navItems", "bottomNavItems", "isProduction", "logoImagesConfig", "collapsedLogo", "expandedLogo"], outputs: ["onLogout"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: ConfirmationDialogComponent, selector: "core-confirmation-dialog", inputs: ["isOpen", "config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: GenericSidebarComponent, selector: "core-generic-sidebar", inputs: ["config", "position", "customTemplate"], outputs: ["itemClicked", "subItemClicked"] }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: ImageModalComponent, selector: "core-image-modal", outputs: ["modalClosed"] }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }] });
|
|
11028
11304
|
}
|
|
11029
11305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
11030
11306
|
type: Component,
|
|
@@ -11035,8 +11311,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
11035
11311
|
ConfirmationDialogComponent,
|
|
11036
11312
|
GenericSidebarComponent,
|
|
11037
11313
|
GenericModalComponent,
|
|
11314
|
+
ImageModalComponent,
|
|
11038
11315
|
SidebarCustomModalComponent
|
|
11039
|
-
], hostDirectives: [CoreHostDirective], template: "<div class=\"o-layout\" \n [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n >\n\n <!-- Nav -->\n <core-main-nav class=\"o-layout__nav\" \n (toggleSidebar)=\"toggleSidebar()\"\n [navItems]=\"navItems()\"\n [navConfig]=\"navConfig()\"\n [bottomNavItems]=\"bottomNavItems()\"\n [logoImagesConfig]=\"logoImagesConfig()\"\n [collapsedLogo]=\"collapsedLogo()\"\n [expandedLogo]=\"expandedLogo()\"\n (onLogout)=\"logout()\"\n >\n </core-main-nav>\n\n <!-- Main -->\n <div class=\"o-layout__body\">\n \n @if(layoutStateService.isHeaderVisible$() | async) {\n <core-header\n class=\"o-layout__header\"\n (filterRequested)=\"onFilterRequested()\"\n (createRequested)=\"onCreateRequested()\"\n (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n </core-header>\n }\n\n @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--left\"\n [config]=\"leftSidebarConfig\">\n </core-generic-sidebar>\n }\n\n <ng-content></ng-content>\n\n @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--right\"\n [config]=\"rightSidebarConfig\">\n </core-generic-sidebar>\n }\n\n\n @if(dialogService.isOpen$()) {\n <core-confirmation-dialog\n [isOpen]=\"dialogService.isOpen$()\"\n [config]=\"dialogService.config$()\"\n (confirm)=\"dialogService.confirm($event)\"\n (cancel)=\"dialogService.cancel()\"\n ></core-confirmation-dialog>\n }\n\n @if(sidebarMobileModalService.isOpen()) {\n <core-generic-modal\n [isOpen]=\"sidebarMobileModalService.isOpen()\"\n [mode]=\"ModalMode.CREATE\"\n [title]=\"getSidebarModalTitle()\"\n [customTemplate]=\"sidebarModalContentTemplate\"\n (close)=\"sidebarMobileModalService.closeModal()\"\n [buttonConfig]=\"getSidebarModalButtons()\">\n </core-generic-modal>\n }\n\n </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- ! Refactor: End -->" }]
|
|
11316
|
+
], hostDirectives: [CoreHostDirective], template: "<div class=\"o-layout\" \n [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n >\n\n <!-- Nav -->\n <core-main-nav class=\"o-layout__nav\" \n (toggleSidebar)=\"toggleSidebar()\"\n [navItems]=\"navItems()\"\n [navConfig]=\"navConfig()\"\n [bottomNavItems]=\"bottomNavItems()\"\n [logoImagesConfig]=\"logoImagesConfig()\"\n [collapsedLogo]=\"collapsedLogo()\"\n [expandedLogo]=\"expandedLogo()\"\n (onLogout)=\"logout()\"\n >\n </core-main-nav>\n\n <!-- Main -->\n <div class=\"o-layout__body\">\n \n @if(layoutStateService.isHeaderVisible$() | async) {\n <core-header\n class=\"o-layout__header\"\n (filterRequested)=\"onFilterRequested()\"\n (createRequested)=\"onCreateRequested()\"\n (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n </core-header>\n }\n\n @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--left\"\n [config]=\"leftSidebarConfig\">\n </core-generic-sidebar>\n }\n\n <ng-content></ng-content>\n\n @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n <core-generic-sidebar \n class=\"o-layout__sidebar--right\"\n [config]=\"rightSidebarConfig\">\n </core-generic-sidebar>\n }\n\n\n @if(dialogService.isOpen$()) {\n <core-confirmation-dialog\n [isOpen]=\"dialogService.isOpen$()\"\n [config]=\"dialogService.config$()\"\n (confirm)=\"dialogService.confirm($event)\"\n (cancel)=\"dialogService.cancel()\"\n ></core-confirmation-dialog>\n }\n\n @if(sidebarMobileModalService.isOpen()) {\n <core-generic-modal\n [isOpen]=\"sidebarMobileModalService.isOpen()\"\n [mode]=\"ModalMode.CREATE\"\n [title]=\"getSidebarModalTitle()\"\n [customTemplate]=\"sidebarModalContentTemplate\"\n (close)=\"sidebarMobileModalService.closeModal()\"\n [buttonConfig]=\"getSidebarModalButtons()\">\n </core-generic-modal>\n }\n\n </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- ! Refactor: End -->" }]
|
|
11040
11317
|
}], propDecorators: { onResize: [{
|
|
11041
11318
|
type: HostListener,
|
|
11042
11319
|
args: ['window:resize', ['$event']]
|
|
@@ -11718,236 +11995,486 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
11718
11995
|
}]
|
|
11719
11996
|
}] });
|
|
11720
11997
|
|
|
11721
|
-
class
|
|
11722
|
-
|
|
11723
|
-
|
|
11724
|
-
|
|
11725
|
-
|
|
11726
|
-
|
|
11727
|
-
|
|
11728
|
-
|
|
11998
|
+
class ImagePreviewComponent {
|
|
11999
|
+
imageModalService = inject(ImageModalService);
|
|
12000
|
+
src = input.required();
|
|
12001
|
+
alt = input('');
|
|
12002
|
+
title = input('');
|
|
12003
|
+
width = input('');
|
|
12004
|
+
height = input('');
|
|
12005
|
+
objectFit = input('cover');
|
|
12006
|
+
borderRadius = input('4px');
|
|
12007
|
+
cursor = input('pointer');
|
|
12008
|
+
loading = input('lazy');
|
|
12009
|
+
onImageClick() {
|
|
12010
|
+
this.imageModalService.openImageModal({
|
|
12011
|
+
src: this.src(),
|
|
12012
|
+
alt: this.alt(),
|
|
12013
|
+
title: this.title()
|
|
12014
|
+
});
|
|
12015
|
+
}
|
|
12016
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImagePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12017
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: ImagePreviewComponent, isStandalone: true, selector: "core-image-preview", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, cursor: { classPropertyName: "cursor", publicName: "cursor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-img-preview\" \n [style.width]=\"width()\"\n [style.height]=\"height()\"\n (click)=\"onImageClick()\">\n <img \n [src]=\"src()\" \n [alt]=\"alt()\"\n [title]=\"title()\"\n [loading]=\"loading()\"\n [style.object-fit]=\"objectFit()\"\n [style.border-radius]=\"borderRadius()\"\n [style.cursor]=\"cursor()\">\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
12018
|
+
}
|
|
12019
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ImagePreviewComponent, decorators: [{
|
|
12020
|
+
type: Component,
|
|
12021
|
+
args: [{ selector: 'core-image-preview', standalone: true, imports: [CommonModule], template: "<div class=\"c-img-preview\" \n [style.width]=\"width()\"\n [style.height]=\"height()\"\n (click)=\"onImageClick()\">\n <img \n [src]=\"src()\" \n [alt]=\"alt()\"\n [title]=\"title()\"\n [loading]=\"loading()\"\n [style.object-fit]=\"objectFit()\"\n [style.border-radius]=\"borderRadius()\"\n [style.cursor]=\"cursor()\">\n</div>" }]
|
|
12022
|
+
}] });
|
|
12023
|
+
|
|
12024
|
+
var SliderActionType;
|
|
12025
|
+
(function (SliderActionType) {
|
|
12026
|
+
SliderActionType["CLICK"] = "click";
|
|
12027
|
+
SliderActionType["CHANGE"] = "change";
|
|
12028
|
+
SliderActionType["BEFORE_CHANGE"] = "beforeChange";
|
|
12029
|
+
SliderActionType["AFTER_CHANGE"] = "afterChange";
|
|
12030
|
+
SliderActionType["EDGE"] = "edge";
|
|
12031
|
+
SliderActionType["SWIPE"] = "swipe";
|
|
12032
|
+
})(SliderActionType || (SliderActionType = {}));
|
|
12033
|
+
|
|
12034
|
+
class SliderService {
|
|
12035
|
+
currentIndex = signal(0);
|
|
12036
|
+
items = signal([]);
|
|
12037
|
+
config = signal({});
|
|
12038
|
+
getCurrentIndex = computed(() => this.currentIndex());
|
|
12039
|
+
getItems = computed(() => this.items());
|
|
12040
|
+
getConfig = computed(() => this.config());
|
|
12041
|
+
getTotalItems = computed(() => this.items().length);
|
|
12042
|
+
getNavigation = computed(() => {
|
|
12043
|
+
const current = this.currentIndex();
|
|
12044
|
+
const total = this.items().length;
|
|
12045
|
+
const infinite = this.config().infinite ?? false;
|
|
12046
|
+
return {
|
|
12047
|
+
currentIndex: current,
|
|
12048
|
+
totalItems: total,
|
|
12049
|
+
canGoPrev: infinite || current > 0,
|
|
12050
|
+
canGoNext: infinite || current < total - 1
|
|
12051
|
+
};
|
|
12052
|
+
});
|
|
12053
|
+
getCurrentItem = computed(() => {
|
|
12054
|
+
const items = this.items();
|
|
12055
|
+
const index = this.currentIndex();
|
|
12056
|
+
return items[index] || null;
|
|
12057
|
+
});
|
|
12058
|
+
setItems(items) {
|
|
12059
|
+
this.items.set(items);
|
|
12060
|
+
if (this.currentIndex() >= items.length) {
|
|
12061
|
+
this.currentIndex.set(Math.max(0, items.length - 1));
|
|
12062
|
+
}
|
|
12063
|
+
}
|
|
12064
|
+
setConfig(config) {
|
|
12065
|
+
this.config.set(config);
|
|
12066
|
+
}
|
|
12067
|
+
goToSlide(index) {
|
|
12068
|
+
const items = this.items();
|
|
12069
|
+
if (index >= 0 && index < items.length) {
|
|
12070
|
+
this.currentIndex.set(index);
|
|
12071
|
+
}
|
|
12072
|
+
}
|
|
12073
|
+
nextSlide() {
|
|
12074
|
+
const current = this.currentIndex();
|
|
12075
|
+
const total = this.items().length;
|
|
12076
|
+
const infinite = this.config().infinite ?? false;
|
|
12077
|
+
if (infinite) {
|
|
12078
|
+
this.currentIndex.set((current + 1) % total);
|
|
12079
|
+
}
|
|
12080
|
+
else if (current < total - 1) {
|
|
12081
|
+
this.currentIndex.set(current + 1);
|
|
12082
|
+
}
|
|
12083
|
+
}
|
|
12084
|
+
prevSlide() {
|
|
12085
|
+
const current = this.currentIndex();
|
|
12086
|
+
const total = this.items().length;
|
|
12087
|
+
const infinite = this.config().infinite ?? false;
|
|
12088
|
+
if (infinite) {
|
|
12089
|
+
this.currentIndex.set(current === 0 ? total - 1 : current - 1);
|
|
12090
|
+
}
|
|
12091
|
+
else if (current > 0) {
|
|
12092
|
+
this.currentIndex.set(current - 1);
|
|
12093
|
+
}
|
|
12094
|
+
}
|
|
12095
|
+
reset() {
|
|
12096
|
+
this.currentIndex.set(0);
|
|
12097
|
+
}
|
|
12098
|
+
getSlidesByConfig() {
|
|
12099
|
+
const items = this.items();
|
|
12100
|
+
const slidesToShow = this.config().slidesToShow ?? 1;
|
|
12101
|
+
const currentIndex = this.currentIndex();
|
|
12102
|
+
if (slidesToShow === 1) {
|
|
12103
|
+
return [items[currentIndex]].filter(Boolean);
|
|
12104
|
+
}
|
|
12105
|
+
const result = [];
|
|
12106
|
+
for (let i = 0; i < slidesToShow; i++) {
|
|
12107
|
+
const index = (currentIndex + i) % items.length;
|
|
12108
|
+
if (items[index]) {
|
|
12109
|
+
result.push(items[index]);
|
|
12110
|
+
}
|
|
12111
|
+
}
|
|
12112
|
+
return result;
|
|
12113
|
+
}
|
|
12114
|
+
getThumbnails() {
|
|
12115
|
+
return this.items().map(item => ({
|
|
12116
|
+
...item,
|
|
12117
|
+
imageUrl: item.thumbnailUrl || item.imageUrl
|
|
12118
|
+
}));
|
|
12119
|
+
}
|
|
12120
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SliderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
12121
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SliderService, providedIn: 'root' });
|
|
12122
|
+
}
|
|
12123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SliderService, decorators: [{
|
|
12124
|
+
type: Injectable,
|
|
12125
|
+
args: [{
|
|
12126
|
+
providedIn: 'root'
|
|
12127
|
+
}]
|
|
12128
|
+
}] });
|
|
12129
|
+
|
|
12130
|
+
class GenericSliderComponent {
|
|
12131
|
+
sliderService = inject(SliderService);
|
|
12132
|
+
autoPlayInterval = null;
|
|
12133
|
+
items = input([]);
|
|
12134
|
+
config = input({
|
|
12135
|
+
autoPlay: false,
|
|
12136
|
+
autoPlayInterval: 3000,
|
|
12137
|
+
showDots: true,
|
|
12138
|
+
showArrows: true,
|
|
12139
|
+
showThumbnails: false,
|
|
12140
|
+
infinite: true,
|
|
12141
|
+
slidesToShow: 1,
|
|
12142
|
+
slidesToScroll: 1,
|
|
12143
|
+
centerMode: false,
|
|
12144
|
+
height: '400px',
|
|
12145
|
+
thumbnailHeight: '80px',
|
|
12146
|
+
showPreview: true,
|
|
12147
|
+
enableKeyboard: true,
|
|
12148
|
+
swipeToSlide: true,
|
|
12149
|
+
pauseOnHover: true,
|
|
12150
|
+
showCounter: false,
|
|
12151
|
+
lazyLoad: true,
|
|
12152
|
+
fadeEffect: false,
|
|
12153
|
+
verticalThumbnails: false
|
|
12154
|
+
});
|
|
12155
|
+
actionTriggered = output();
|
|
12156
|
+
slideChanged = output();
|
|
12157
|
+
isHovered = signal(false);
|
|
11729
12158
|
isDragging = signal(false);
|
|
11730
|
-
|
|
11731
|
-
|
|
11732
|
-
|
|
11733
|
-
|
|
11734
|
-
|
|
11735
|
-
|
|
11736
|
-
|
|
11737
|
-
|
|
11738
|
-
|
|
11739
|
-
|
|
11740
|
-
|
|
11741
|
-
|
|
11742
|
-
|
|
12159
|
+
startX = signal(0);
|
|
12160
|
+
currentX = signal(0);
|
|
12161
|
+
currentIndex = computed(() => this.sliderService.getCurrentIndex());
|
|
12162
|
+
totalItems = computed(() => this.sliderService.getTotalItems());
|
|
12163
|
+
currentItem = computed(() => this.sliderService.getCurrentItem());
|
|
12164
|
+
navigation = computed(() => this.sliderService.getNavigation());
|
|
12165
|
+
visibleSlides = computed(() => this.sliderService.getSlidesByConfig());
|
|
12166
|
+
thumbnails = computed(() => this.sliderService.getThumbnails());
|
|
12167
|
+
mergedConfig = computed(() => ({
|
|
12168
|
+
...this.config(),
|
|
12169
|
+
...this.sliderService.getConfig()
|
|
12170
|
+
}));
|
|
12171
|
+
canAutoPlay = computed(() => {
|
|
12172
|
+
const config = this.mergedConfig();
|
|
12173
|
+
return config.autoPlay && !this.isHovered() && !this.isDragging();
|
|
12174
|
+
});
|
|
12175
|
+
showDots = computed(() => this.mergedConfig().showDots && this.totalItems() > 1);
|
|
12176
|
+
showArrows = computed(() => this.mergedConfig().showArrows && this.totalItems() > 1);
|
|
12177
|
+
showThumbnails = computed(() => this.mergedConfig().showThumbnails && this.totalItems() > 1);
|
|
12178
|
+
showCounter = computed(() => this.mergedConfig().showCounter && this.totalItems() > 1);
|
|
12179
|
+
containerStyles = computed(() => ({
|
|
12180
|
+
height: this.mergedConfig().height || '400px',
|
|
12181
|
+
position: 'relative',
|
|
12182
|
+
overflow: 'hidden'
|
|
12183
|
+
}));
|
|
12184
|
+
slideStyles = computed(() => {
|
|
12185
|
+
const config = this.mergedConfig();
|
|
12186
|
+
const slidesToShow = config.slidesToShow || 1;
|
|
12187
|
+
const currentIndex = this.currentIndex();
|
|
12188
|
+
const totalItems = this.totalItems();
|
|
12189
|
+
const totalWidth = (totalItems / slidesToShow) * 100;
|
|
12190
|
+
const slideWidth = 100 / slidesToShow;
|
|
12191
|
+
const translateX = -(currentIndex * slideWidth);
|
|
12192
|
+
return {
|
|
12193
|
+
transform: `translateX(${translateX}%)`,
|
|
12194
|
+
transition: this.isDragging() ? 'none' : 'transform 0.3s ease-in-out',
|
|
12195
|
+
display: 'flex',
|
|
12196
|
+
width: `${totalWidth}%`
|
|
12197
|
+
};
|
|
12198
|
+
});
|
|
12199
|
+
prevButtonConfig = computed(() => ({
|
|
12200
|
+
type: ButtonType.PRIMARY,
|
|
12201
|
+
context: ButtonContext.DEFAULT,
|
|
12202
|
+
size: ButtonSize.SMALL,
|
|
12203
|
+
text: '',
|
|
12204
|
+
icon: 'icon-arrow-left',
|
|
12205
|
+
disabled: !this.navigation().canGoPrev,
|
|
12206
|
+
ariaLabel: 'slider.previous'
|
|
12207
|
+
}));
|
|
12208
|
+
nextButtonConfig = computed(() => ({
|
|
12209
|
+
type: ButtonType.PRIMARY,
|
|
12210
|
+
context: ButtonContext.DEFAULT,
|
|
12211
|
+
size: ButtonSize.SMALL,
|
|
12212
|
+
text: '',
|
|
12213
|
+
icon: 'icon-arrow-right',
|
|
12214
|
+
disabled: !this.navigation().canGoNext,
|
|
12215
|
+
ariaLabel: 'slider.next'
|
|
12216
|
+
}));
|
|
11743
12217
|
constructor() {
|
|
11744
12218
|
effect(() => {
|
|
11745
|
-
|
|
11746
|
-
|
|
11747
|
-
|
|
11748
|
-
|
|
11749
|
-
|
|
11750
|
-
|
|
11751
|
-
|
|
11752
|
-
|
|
12219
|
+
this.sliderService.setItems(this.items());
|
|
12220
|
+
});
|
|
12221
|
+
effect(() => {
|
|
12222
|
+
this.sliderService.setConfig(this.config());
|
|
12223
|
+
});
|
|
12224
|
+
effect(() => {
|
|
12225
|
+
const currentIndex = this.currentIndex();
|
|
12226
|
+
const currentItem = this.currentItem();
|
|
12227
|
+
if (currentItem) {
|
|
12228
|
+
this.slideChanged.emit({ currentIndex, currentItem });
|
|
11753
12229
|
}
|
|
11754
12230
|
});
|
|
11755
|
-
|
|
11756
|
-
|
|
11757
|
-
|
|
11758
|
-
return;
|
|
11759
|
-
const animate = () => {
|
|
11760
|
-
if (!this.isDragging()) {
|
|
11761
|
-
const currentX = this.translateX();
|
|
11762
|
-
const currentY = this.translateY();
|
|
11763
|
-
const newX = currentX + this.velocityX;
|
|
11764
|
-
const newY = currentY + this.velocityY;
|
|
11765
|
-
this.translateX.set(newX);
|
|
11766
|
-
this.translateY.set(newY);
|
|
11767
|
-
this.velocityX *= this.friction;
|
|
11768
|
-
this.velocityY *= this.friction;
|
|
11769
|
-
if (Math.abs(this.velocityX) < 0.1 && Math.abs(this.velocityY) < 0.1) {
|
|
11770
|
-
this.velocityX = 0;
|
|
11771
|
-
this.velocityY = 0;
|
|
11772
|
-
this.animationId = null;
|
|
11773
|
-
return;
|
|
11774
|
-
}
|
|
11775
|
-
this.animationId = requestAnimationFrame(animate);
|
|
12231
|
+
effect(() => {
|
|
12232
|
+
if (this.canAutoPlay()) {
|
|
12233
|
+
this.startAutoPlay();
|
|
11776
12234
|
}
|
|
11777
12235
|
else {
|
|
11778
|
-
this.
|
|
12236
|
+
this.stopAutoPlay();
|
|
11779
12237
|
}
|
|
11780
|
-
};
|
|
11781
|
-
this.animationId = requestAnimationFrame(animate);
|
|
11782
|
-
}
|
|
11783
|
-
stopAnimation() {
|
|
11784
|
-
if (this.animationId) {
|
|
11785
|
-
cancelAnimationFrame(this.animationId);
|
|
11786
|
-
this.animationId = null;
|
|
11787
|
-
}
|
|
11788
|
-
this.velocityX = 0;
|
|
11789
|
-
this.velocityY = 0;
|
|
12238
|
+
});
|
|
11790
12239
|
}
|
|
11791
|
-
|
|
11792
|
-
this.
|
|
11793
|
-
this.translateX.set(0);
|
|
11794
|
-
this.translateY.set(0);
|
|
11795
|
-
this.isDragging.set(false);
|
|
11796
|
-
this.velocityX = 0;
|
|
11797
|
-
this.velocityY = 0;
|
|
11798
|
-
this.stopAnimation();
|
|
12240
|
+
ngOnInit() {
|
|
12241
|
+
this.setupAutoPlay();
|
|
11799
12242
|
}
|
|
11800
|
-
|
|
11801
|
-
this.
|
|
11802
|
-
this.modalClosed.emit();
|
|
12243
|
+
ngOnDestroy() {
|
|
12244
|
+
this.stopAutoPlay();
|
|
11803
12245
|
}
|
|
11804
|
-
|
|
11805
|
-
if (!this.
|
|
12246
|
+
onKeydown(event) {
|
|
12247
|
+
if (!this.mergedConfig().enableKeyboard)
|
|
11806
12248
|
return;
|
|
11807
|
-
event.
|
|
11808
|
-
|
|
11809
|
-
|
|
11810
|
-
|
|
11811
|
-
|
|
11812
|
-
|
|
11813
|
-
|
|
11814
|
-
this.
|
|
11815
|
-
|
|
11816
|
-
|
|
11817
|
-
|
|
11818
|
-
|
|
12249
|
+
switch (event.key) {
|
|
12250
|
+
case 'ArrowLeft':
|
|
12251
|
+
event.preventDefault();
|
|
12252
|
+
this.goToPrevious();
|
|
12253
|
+
break;
|
|
12254
|
+
case 'ArrowRight':
|
|
12255
|
+
event.preventDefault();
|
|
12256
|
+
this.goToNext();
|
|
12257
|
+
break;
|
|
12258
|
+
case ' ':
|
|
12259
|
+
event.preventDefault();
|
|
12260
|
+
this.toggleAutoPlay();
|
|
12261
|
+
break;
|
|
12262
|
+
case 'Home':
|
|
12263
|
+
event.preventDefault();
|
|
12264
|
+
this.goToSlide(0);
|
|
12265
|
+
break;
|
|
12266
|
+
case 'End':
|
|
12267
|
+
event.preventDefault();
|
|
12268
|
+
this.goToSlide(this.totalItems() - 1);
|
|
12269
|
+
break;
|
|
11819
12270
|
}
|
|
11820
12271
|
}
|
|
11821
|
-
|
|
11822
|
-
|
|
11823
|
-
|
|
11824
|
-
|
|
11825
|
-
|
|
11826
|
-
|
|
11827
|
-
|
|
11828
|
-
this.velocityX = 0;
|
|
11829
|
-
this.velocityY = 0;
|
|
11830
|
-
}
|
|
11831
|
-
onMouseMove(event) {
|
|
11832
|
-
if (!this.isDragging() || !this.isVisible())
|
|
11833
|
-
return;
|
|
11834
|
-
event.preventDefault();
|
|
11835
|
-
const deltaX = event.clientX - this.lastMouseX();
|
|
11836
|
-
const deltaY = event.clientY - this.lastMouseY();
|
|
11837
|
-
const newX = this.translateX() + deltaX;
|
|
11838
|
-
const newY = this.translateY() + deltaY;
|
|
11839
|
-
this.translateX.set(newX);
|
|
11840
|
-
this.translateY.set(newY);
|
|
11841
|
-
this.velocityX = deltaX * 0.5;
|
|
11842
|
-
this.velocityY = deltaY * 0.5;
|
|
11843
|
-
this.lastMouseX.set(event.clientX);
|
|
11844
|
-
this.lastMouseY.set(event.clientY);
|
|
12272
|
+
goToSlide(index) {
|
|
12273
|
+
const previousIndex = this.currentIndex();
|
|
12274
|
+
this.sliderService.goToSlide(index);
|
|
12275
|
+
this.emitAction(SliderActionType.CHANGE, this.currentItem(), index);
|
|
12276
|
+
if (previousIndex !== index) {
|
|
12277
|
+
this.emitAction(SliderActionType.AFTER_CHANGE, this.currentItem(), index);
|
|
12278
|
+
}
|
|
11845
12279
|
}
|
|
11846
|
-
|
|
11847
|
-
|
|
11848
|
-
|
|
11849
|
-
|
|
11850
|
-
|
|
11851
|
-
|
|
12280
|
+
goToNext() {
|
|
12281
|
+
const config = this.mergedConfig();
|
|
12282
|
+
const current = this.currentIndex();
|
|
12283
|
+
const total = this.totalItems();
|
|
12284
|
+
const slidesToShow = config.slidesToShow || 1;
|
|
12285
|
+
const slidesToScroll = config.slidesToScroll || 1;
|
|
12286
|
+
let nextIndex;
|
|
12287
|
+
if (config.infinite) {
|
|
12288
|
+
nextIndex = (current + slidesToScroll) % total;
|
|
11852
12289
|
}
|
|
12290
|
+
else {
|
|
12291
|
+
const maxIndex = Math.max(0, total - slidesToShow);
|
|
12292
|
+
nextIndex = Math.min(current + slidesToScroll, maxIndex);
|
|
12293
|
+
}
|
|
12294
|
+
this.goToSlide(nextIndex);
|
|
11853
12295
|
}
|
|
11854
|
-
|
|
11855
|
-
|
|
11856
|
-
|
|
11857
|
-
|
|
11858
|
-
|
|
12296
|
+
goToPrevious() {
|
|
12297
|
+
const config = this.mergedConfig();
|
|
12298
|
+
const current = this.currentIndex();
|
|
12299
|
+
const total = this.totalItems();
|
|
12300
|
+
const slidesToScroll = config.slidesToScroll || 1;
|
|
12301
|
+
let prevIndex;
|
|
12302
|
+
if (config.infinite) {
|
|
12303
|
+
prevIndex = current - slidesToScroll < 0 ? total - slidesToScroll : current - slidesToScroll;
|
|
11859
12304
|
}
|
|
11860
12305
|
else {
|
|
11861
|
-
|
|
11862
|
-
this.translateX.set(0);
|
|
11863
|
-
this.translateY.set(0);
|
|
11864
|
-
this.velocityX = 0;
|
|
11865
|
-
this.velocityY = 0;
|
|
11866
|
-
this.stopAnimation();
|
|
12306
|
+
prevIndex = Math.max(current - slidesToScroll, 0);
|
|
11867
12307
|
}
|
|
12308
|
+
this.goToSlide(prevIndex);
|
|
11868
12309
|
}
|
|
11869
|
-
|
|
11870
|
-
|
|
12310
|
+
setupAutoPlay() {
|
|
12311
|
+
if (this.mergedConfig().autoPlay) {
|
|
12312
|
+
this.startAutoPlay();
|
|
12313
|
+
}
|
|
11871
12314
|
}
|
|
11872
|
-
|
|
11873
|
-
|
|
11874
|
-
|
|
12315
|
+
startAutoPlay() {
|
|
12316
|
+
this.stopAutoPlay();
|
|
12317
|
+
if (this.canAutoPlay()) {
|
|
12318
|
+
this.autoPlayInterval = setInterval(() => {
|
|
12319
|
+
if (this.canAutoPlay()) {
|
|
12320
|
+
this.goToNext();
|
|
12321
|
+
}
|
|
12322
|
+
}, this.mergedConfig().autoPlayInterval || 3000);
|
|
11875
12323
|
}
|
|
11876
|
-
return 'zoom-in';
|
|
11877
12324
|
}
|
|
11878
|
-
|
|
11879
|
-
if (
|
|
11880
|
-
this.
|
|
12325
|
+
stopAutoPlay() {
|
|
12326
|
+
if (this.autoPlayInterval) {
|
|
12327
|
+
clearInterval(this.autoPlayInterval);
|
|
12328
|
+
this.autoPlayInterval = null;
|
|
11881
12329
|
}
|
|
11882
12330
|
}
|
|
11883
|
-
|
|
11884
|
-
this.
|
|
12331
|
+
toggleAutoPlay() {
|
|
12332
|
+
if (this.canAutoPlay()) {
|
|
12333
|
+
this.stopAutoPlay();
|
|
12334
|
+
}
|
|
12335
|
+
else {
|
|
12336
|
+
this.startAutoPlay();
|
|
12337
|
+
}
|
|
11885
12338
|
}
|
|
11886
|
-
|
|
11887
|
-
this.
|
|
12339
|
+
onMouseEnter() {
|
|
12340
|
+
if (this.mergedConfig().pauseOnHover) {
|
|
12341
|
+
this.isHovered.set(true);
|
|
12342
|
+
}
|
|
12343
|
+
}
|
|
12344
|
+
onMouseLeave() {
|
|
12345
|
+
if (this.mergedConfig().pauseOnHover) {
|
|
12346
|
+
this.isHovered.set(false);
|
|
12347
|
+
}
|
|
11888
12348
|
}
|
|
11889
12349
|
onTouchStart(event) {
|
|
11890
|
-
if (!this.
|
|
12350
|
+
if (!this.mergedConfig().swipeToSlide)
|
|
11891
12351
|
return;
|
|
11892
|
-
event.preventDefault();
|
|
11893
|
-
const touch = event.touches[0];
|
|
11894
12352
|
this.isDragging.set(true);
|
|
11895
|
-
this.
|
|
11896
|
-
this.lastMouseY.set(touch.clientY);
|
|
11897
|
-
this.velocityX = 0;
|
|
11898
|
-
this.velocityY = 0;
|
|
12353
|
+
this.startX.set(event.touches[0].clientX);
|
|
11899
12354
|
}
|
|
11900
12355
|
onTouchMove(event) {
|
|
11901
|
-
if (!this.isDragging() || !this.
|
|
12356
|
+
if (!this.isDragging() || !this.mergedConfig().swipeToSlide)
|
|
11902
12357
|
return;
|
|
12358
|
+
this.currentX.set(event.touches[0].clientX);
|
|
11903
12359
|
event.preventDefault();
|
|
11904
|
-
const touch = event.touches[0];
|
|
11905
|
-
const deltaX = touch.clientX - this.lastMouseX();
|
|
11906
|
-
const deltaY = touch.clientY - this.lastMouseY();
|
|
11907
|
-
const newX = this.translateX() + deltaX;
|
|
11908
|
-
const newY = this.translateY() + deltaY;
|
|
11909
|
-
this.translateX.set(newX);
|
|
11910
|
-
this.translateY.set(newY);
|
|
11911
|
-
this.velocityX = deltaX * 0.5;
|
|
11912
|
-
this.velocityY = deltaY * 0.5;
|
|
11913
|
-
this.lastMouseX.set(touch.clientX);
|
|
11914
|
-
this.lastMouseY.set(touch.clientY);
|
|
11915
12360
|
}
|
|
11916
12361
|
onTouchEnd() {
|
|
11917
|
-
if (this.isDragging())
|
|
11918
|
-
|
|
11919
|
-
|
|
11920
|
-
|
|
12362
|
+
if (!this.isDragging() || !this.mergedConfig().swipeToSlide)
|
|
12363
|
+
return;
|
|
12364
|
+
const diffX = this.startX() - this.currentX();
|
|
12365
|
+
const threshold = 50;
|
|
12366
|
+
if (Math.abs(diffX) > threshold) {
|
|
12367
|
+
if (diffX > 0) {
|
|
12368
|
+
this.goToNext();
|
|
12369
|
+
}
|
|
12370
|
+
else {
|
|
12371
|
+
this.goToPrevious();
|
|
11921
12372
|
}
|
|
12373
|
+
this.emitAction(SliderActionType.SWIPE, this.currentItem(), this.currentIndex());
|
|
11922
12374
|
}
|
|
12375
|
+
this.isDragging.set(false);
|
|
12376
|
+
this.startX.set(0);
|
|
12377
|
+
this.currentX.set(0);
|
|
11923
12378
|
}
|
|
11924
|
-
|
|
11925
|
-
this.
|
|
11926
|
-
document.body.style.overflow = '';
|
|
12379
|
+
onSlideClick(item, index) {
|
|
12380
|
+
this.emitAction(SliderActionType.CLICK, item, index);
|
|
11927
12381
|
}
|
|
11928
|
-
|
|
11929
|
-
|
|
12382
|
+
onDotClick(index) {
|
|
12383
|
+
this.goToSlide(index);
|
|
12384
|
+
}
|
|
12385
|
+
onThumbnailClick(index) {
|
|
12386
|
+
this.goToSlide(index);
|
|
12387
|
+
}
|
|
12388
|
+
emitAction(type, item, index) {
|
|
12389
|
+
this.actionTriggered.emit({ type, item, index });
|
|
12390
|
+
}
|
|
12391
|
+
getSlideImage(item) {
|
|
12392
|
+
return item.imageUrl || '';
|
|
12393
|
+
}
|
|
12394
|
+
getSlideAlt(item) {
|
|
12395
|
+
return item.alt || item.title || `Slide ${this.currentIndex() + 1}`;
|
|
12396
|
+
}
|
|
12397
|
+
isActiveSlide(index) {
|
|
12398
|
+
const config = this.mergedConfig();
|
|
12399
|
+
const current = this.currentIndex();
|
|
12400
|
+
const slidesToShow = config.slidesToShow || 1;
|
|
12401
|
+
if (slidesToShow === 1) {
|
|
12402
|
+
return index === current;
|
|
12403
|
+
}
|
|
12404
|
+
else {
|
|
12405
|
+
return index >= current && index < current + slidesToShow;
|
|
12406
|
+
}
|
|
12407
|
+
}
|
|
12408
|
+
isActiveDot(index) {
|
|
12409
|
+
return index === this.currentIndex();
|
|
12410
|
+
}
|
|
12411
|
+
isActiveThumbnail(index) {
|
|
12412
|
+
return index === this.currentIndex();
|
|
12413
|
+
}
|
|
12414
|
+
getCounterText() {
|
|
12415
|
+
return `${this.currentIndex() + 1} / ${this.totalItems()}`;
|
|
12416
|
+
}
|
|
12417
|
+
getSlideWidth() {
|
|
12418
|
+
const config = this.mergedConfig();
|
|
12419
|
+
const slidesToShow = config.slidesToShow || 1;
|
|
12420
|
+
const totalItems = this.totalItems();
|
|
12421
|
+
const widthPercentage = (100 / totalItems);
|
|
12422
|
+
return `${widthPercentage}%`;
|
|
12423
|
+
}
|
|
12424
|
+
getFileTypeIcon(fileType) {
|
|
12425
|
+
const typeMap = {
|
|
12426
|
+
'pdf': 'icon-file-pdf',
|
|
12427
|
+
'doc': 'icon-file-word',
|
|
12428
|
+
'docx': 'icon-file-word',
|
|
12429
|
+
'xls': 'icon-file-excel',
|
|
12430
|
+
'xlsx': 'icon-file-excel',
|
|
12431
|
+
'ppt': 'icon-file-powerpoint',
|
|
12432
|
+
'pptx': 'icon-file-powerpoint',
|
|
12433
|
+
'txt': 'icon-file-text',
|
|
12434
|
+
'zip': 'icon-file-zip',
|
|
12435
|
+
'rar': 'icon-file-zip',
|
|
12436
|
+
'jpg': 'icon-file-image',
|
|
12437
|
+
'jpeg': 'icon-file-image',
|
|
12438
|
+
'png': 'icon-file-image',
|
|
12439
|
+
'gif': 'icon-file-image',
|
|
12440
|
+
'mp4': 'icon-file-video',
|
|
12441
|
+
'avi': 'icon-file-video',
|
|
12442
|
+
'mov': 'icon-file-video',
|
|
12443
|
+
'mp3': 'icon-file-audio',
|
|
12444
|
+
'wav': 'icon-file-audio'
|
|
12445
|
+
};
|
|
12446
|
+
return typeMap[fileType.toLowerCase()] || 'icon-file';
|
|
12447
|
+
}
|
|
12448
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12449
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericSliderComponent, isStandalone: true, selector: "core-generic-slider", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", slideChanged: "slideChanged" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div class=\"c-slider\" \n [style]=\"containerStyles()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd()\">\n \n <!-- Main slider container -->\n <div class=\"c-slider__container\">\n \n <!-- Previous arrow -->\n @if (showArrows()) {\n <div class=\"c-slider__arrow c-slider__arrow--prev\">\n <core-generic-button\n [config]=\"prevButtonConfig()\"\n (buttonClick)=\"goToPrevious()\">\n </core-generic-button>\n </div>\n }\n\n <!-- Slides wrapper -->\n <div class=\"c-slider__wrapper\">\n <div class=\"c-slider__track\" [style]=\"slideStyles()\">\n @for (slide of items(); track slide.id; let i = $index) {\n <div class=\"c-slider__slide\" \n [class.c-slider__slide--active]=\"isActiveSlide(i)\"\n [style.width]=\"getSlideWidth()\"\n (click)=\"onSlideClick(slide, i)\">\n \n <!-- Image -->\n <div class=\"c-slider__image-container\">\n @if (mergedConfig().lazyLoad) {\n <img [src]=\"getSlideImage(slide)\" \n [alt]=\"getSlideAlt(slide)\"\n class=\"c-slider__image\"\n loading=\"lazy\">\n } @else {\n <img [src]=\"getSlideImage(slide)\" \n [alt]=\"getSlideAlt(slide)\"\n class=\"c-slider__image\">\n }\n \n <!-- File Preview Icon -->\n @if (mergedConfig().showFilePreview && slide.filePreview) {\n <div class=\"c-slider__file-preview\">\n <div class=\"c-slider__file-icon\">\n <span class=\"icon-file\" [ngClass]=\"getFileTypeIcon(slide.filePreview.fileType)\"></span>\n </div>\n <div class=\"c-slider__file-info\">\n <span class=\"c-slider__file-name\">{{ slide.filePreview.fileName }}</span>\n @if (slide.filePreview.fileSize) {\n <span class=\"c-slider__file-size\">{{ slide.filePreview.fileSize }}</span>\n }\n </div>\n </div>\n }\n \n <!-- Overlay content -->\n @if (slide.title || slide.description) {\n <div class=\"c-slider__overlay\">\n @if (slide.title) {\n <h3 class=\"c-slider__title\">{{ slide.title }}</h3>\n }\n @if (slide.description) {\n <p class=\"c-slider__description\">{{ slide.description }}</p>\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Next arrow -->\n @if (showArrows()) {\n <div class=\"c-slider__arrow c-slider__arrow--next\">\n <core-generic-button\n [config]=\"nextButtonConfig()\"\n (buttonClick)=\"goToNext()\">\n </core-generic-button>\n </div>\n }\n </div>\n\n <!-- Counter -->\n @if (showCounter()) {\n <div class=\"c-slider__counter\">\n <span class=\"c-slider__counter-text\">{{ getCounterText() }}</span>\n </div>\n }\n\n <!-- Dots navigation -->\n @if (showDots()) {\n <div class=\"c-slider__dots\">\n @for (item of items(); track item.id; let i = $index) {\n <button type=\"button\"\n class=\"c-slider__dot\"\n [class.c-slider__dot--active]=\"isActiveDot(i)\"\n [attr.aria-label]=\"'slider.go-to-slide' | translate: {number: i + 1}\"\n (click)=\"onDotClick(i)\">\n </button>\n }\n </div>\n }\n\n <!-- Thumbnails -->\n @if (showThumbnails()) {\n <div class=\"c-slider__thumbnails\" \n [class.c-slider__thumbnails--vertical]=\"mergedConfig().verticalThumbnails\">\n @for (thumbnail of thumbnails(); track thumbnail.id; let i = $index) {\n <button type=\"button\"\n class=\"c-slider__thumbnail\"\n [class.c-slider__thumbnail--active]=\"isActiveThumbnail(i)\"\n [style.height]=\"mergedConfig().thumbnailHeight\"\n (click)=\"onThumbnailClick(i)\">\n <img [src]=\"thumbnail.imageUrl\" \n [alt]=\"thumbnail.alt || thumbnail.title\"\n class=\"c-slider__thumbnail-image\">\n @if (thumbnail.title) {\n <span class=\"c-slider__thumbnail-title\">{{ thumbnail.title }}</span>\n }\n </button>\n }\n </div>\n }\n\n <!-- Empty state -->\n @if (totalItems() === 0) {\n <div class=\"c-slider__empty\">\n <div class=\"c-slider__empty-icon\">\n <i class=\"icon-image\" aria-hidden=\"true\"></i>\n </div>\n <p class=\"c-slider__empty-text\">{{ 'slider.no-items' | translate }}</p>\n </div>\n }\n\n <!-- Loading state -->\n @if (isDragging()) {\n <div class=\"c-slider__loading\">\n <div class=\"c-slider__loading-spinner\"></div>\n </div>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }] });
|
|
11930
12450
|
}
|
|
11931
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type:
|
|
12451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSliderComponent, decorators: [{
|
|
11932
12452
|
type: Component,
|
|
11933
|
-
args: [{ selector: 'core-
|
|
11934
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
11935
|
-
type: ViewChild,
|
|
11936
|
-
args: ['modalImage', { static: false }]
|
|
11937
|
-
}], imageContainer: [{
|
|
11938
|
-
type: ViewChild,
|
|
11939
|
-
args: ['imageContainer', { static: false }]
|
|
11940
|
-
}], handleKeydown: [{
|
|
12453
|
+
args: [{ selector: 'core-generic-slider', standalone: true, imports: [CommonModule, TranslateModule, GenericButtonComponent], template: "<div class=\"c-slider\" \n [style]=\"containerStyles()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd()\">\n \n <!-- Main slider container -->\n <div class=\"c-slider__container\">\n \n <!-- Previous arrow -->\n @if (showArrows()) {\n <div class=\"c-slider__arrow c-slider__arrow--prev\">\n <core-generic-button\n [config]=\"prevButtonConfig()\"\n (buttonClick)=\"goToPrevious()\">\n </core-generic-button>\n </div>\n }\n\n <!-- Slides wrapper -->\n <div class=\"c-slider__wrapper\">\n <div class=\"c-slider__track\" [style]=\"slideStyles()\">\n @for (slide of items(); track slide.id; let i = $index) {\n <div class=\"c-slider__slide\" \n [class.c-slider__slide--active]=\"isActiveSlide(i)\"\n [style.width]=\"getSlideWidth()\"\n (click)=\"onSlideClick(slide, i)\">\n \n <!-- Image -->\n <div class=\"c-slider__image-container\">\n @if (mergedConfig().lazyLoad) {\n <img [src]=\"getSlideImage(slide)\" \n [alt]=\"getSlideAlt(slide)\"\n class=\"c-slider__image\"\n loading=\"lazy\">\n } @else {\n <img [src]=\"getSlideImage(slide)\" \n [alt]=\"getSlideAlt(slide)\"\n class=\"c-slider__image\">\n }\n \n <!-- File Preview Icon -->\n @if (mergedConfig().showFilePreview && slide.filePreview) {\n <div class=\"c-slider__file-preview\">\n <div class=\"c-slider__file-icon\">\n <span class=\"icon-file\" [ngClass]=\"getFileTypeIcon(slide.filePreview.fileType)\"></span>\n </div>\n <div class=\"c-slider__file-info\">\n <span class=\"c-slider__file-name\">{{ slide.filePreview.fileName }}</span>\n @if (slide.filePreview.fileSize) {\n <span class=\"c-slider__file-size\">{{ slide.filePreview.fileSize }}</span>\n }\n </div>\n </div>\n }\n \n <!-- Overlay content -->\n @if (slide.title || slide.description) {\n <div class=\"c-slider__overlay\">\n @if (slide.title) {\n <h3 class=\"c-slider__title\">{{ slide.title }}</h3>\n }\n @if (slide.description) {\n <p class=\"c-slider__description\">{{ slide.description }}</p>\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Next arrow -->\n @if (showArrows()) {\n <div class=\"c-slider__arrow c-slider__arrow--next\">\n <core-generic-button\n [config]=\"nextButtonConfig()\"\n (buttonClick)=\"goToNext()\">\n </core-generic-button>\n </div>\n }\n </div>\n\n <!-- Counter -->\n @if (showCounter()) {\n <div class=\"c-slider__counter\">\n <span class=\"c-slider__counter-text\">{{ getCounterText() }}</span>\n </div>\n }\n\n <!-- Dots navigation -->\n @if (showDots()) {\n <div class=\"c-slider__dots\">\n @for (item of items(); track item.id; let i = $index) {\n <button type=\"button\"\n class=\"c-slider__dot\"\n [class.c-slider__dot--active]=\"isActiveDot(i)\"\n [attr.aria-label]=\"'slider.go-to-slide' | translate: {number: i + 1}\"\n (click)=\"onDotClick(i)\">\n </button>\n }\n </div>\n }\n\n <!-- Thumbnails -->\n @if (showThumbnails()) {\n <div class=\"c-slider__thumbnails\" \n [class.c-slider__thumbnails--vertical]=\"mergedConfig().verticalThumbnails\">\n @for (thumbnail of thumbnails(); track thumbnail.id; let i = $index) {\n <button type=\"button\"\n class=\"c-slider__thumbnail\"\n [class.c-slider__thumbnail--active]=\"isActiveThumbnail(i)\"\n [style.height]=\"mergedConfig().thumbnailHeight\"\n (click)=\"onThumbnailClick(i)\">\n <img [src]=\"thumbnail.imageUrl\" \n [alt]=\"thumbnail.alt || thumbnail.title\"\n class=\"c-slider__thumbnail-image\">\n @if (thumbnail.title) {\n <span class=\"c-slider__thumbnail-title\">{{ thumbnail.title }}</span>\n }\n </button>\n }\n </div>\n }\n\n <!-- Empty state -->\n @if (totalItems() === 0) {\n <div class=\"c-slider__empty\">\n <div class=\"c-slider__empty-icon\">\n <i class=\"icon-image\" aria-hidden=\"true\"></i>\n </div>\n <p class=\"c-slider__empty-text\">{{ 'slider.no-items' | translate }}</p>\n </div>\n }\n\n <!-- Loading state -->\n @if (isDragging()) {\n <div class=\"c-slider__loading\">\n <div class=\"c-slider__loading-spinner\"></div>\n </div>\n }\n</div>\n" }]
|
|
12454
|
+
}], ctorParameters: () => [], propDecorators: { onKeydown: [{
|
|
11941
12455
|
type: HostListener,
|
|
11942
|
-
args: ['
|
|
11943
|
-
}], onDocumentMouseMove: [{
|
|
11944
|
-
type: HostListener,
|
|
11945
|
-
args: ['document:mousemove', ['$event']]
|
|
11946
|
-
}], onDocumentMouseUp: [{
|
|
11947
|
-
type: HostListener,
|
|
11948
|
-
args: ['document:mouseup']
|
|
12456
|
+
args: ['keydown', ['$event']]
|
|
11949
12457
|
}] } });
|
|
11950
12458
|
|
|
12459
|
+
var SliderDirection;
|
|
12460
|
+
(function (SliderDirection) {
|
|
12461
|
+
SliderDirection["HORIZONTAL"] = "horizontal";
|
|
12462
|
+
SliderDirection["VERTICAL"] = "vertical";
|
|
12463
|
+
})(SliderDirection || (SliderDirection = {}));
|
|
12464
|
+
var SliderTransition;
|
|
12465
|
+
(function (SliderTransition) {
|
|
12466
|
+
SliderTransition["SLIDE"] = "slide";
|
|
12467
|
+
SliderTransition["FADE"] = "fade";
|
|
12468
|
+
SliderTransition["SCALE"] = "scale";
|
|
12469
|
+
})(SliderTransition || (SliderTransition = {}));
|
|
12470
|
+
var SliderNavigationType;
|
|
12471
|
+
(function (SliderNavigationType) {
|
|
12472
|
+
SliderNavigationType["DOTS"] = "dots";
|
|
12473
|
+
SliderNavigationType["ARROWS"] = "arrows";
|
|
12474
|
+
SliderNavigationType["THUMBNAILS"] = "thumbnails";
|
|
12475
|
+
SliderNavigationType["COUNTER"] = "counter";
|
|
12476
|
+
})(SliderNavigationType || (SliderNavigationType = {}));
|
|
12477
|
+
|
|
11951
12478
|
class CacheBustingInterceptor {
|
|
11952
12479
|
intercept(req, next) {
|
|
11953
12480
|
if (req.url.includes('/assets/i18n/') && req.url.endsWith('.json')) {
|
|
@@ -12275,5 +12802,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
12275
12802
|
* Generated bundle index. Do not edit.
|
|
12276
12803
|
*/
|
|
12277
12804
|
|
|
12278
|
-
export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SmartFieldComponent, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UsersModel, VERSION, equalToValidator, isSameDate, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader };
|
|
12805
|
+
export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericSliderComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SliderActionType, SliderDirection, SliderNavigationType, SliderService, SliderTransition, SmartFieldComponent, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UsersModel, VERSION, equalToValidator, isSameDate, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader };
|
|
12279
12806
|
//# sourceMappingURL=solcre-org-core-ui.mjs.map
|