@solcre-org/core-ui 2.11.26 → 2.11.27
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.
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
background: var(--card-bg, var(--color-neutral-100));
|
|
24
24
|
border-radius: var(--card-br, var(--_br));
|
|
25
25
|
color: var(--card-color, inherit);
|
|
26
|
+
min-height: 100%; /* Fix for when its inside an Angular component */
|
|
26
27
|
}
|
|
27
28
|
|
|
28
29
|
/* ********************** de Tablet a DESKTOP ********************** */
|
|
@@ -309,6 +309,20 @@ class CheckboxFieldComponent extends BaseFieldComponent {
|
|
|
309
309
|
control.enable();
|
|
310
310
|
}
|
|
311
311
|
});
|
|
312
|
+
effect(() => {
|
|
313
|
+
const fieldCfg = this.field();
|
|
314
|
+
const formValue = this.formValue();
|
|
315
|
+
if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
|
|
316
|
+
const newValue = fieldCfg.dynamicValue(formValue);
|
|
317
|
+
const currentValue = this.formControl().value;
|
|
318
|
+
if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
|
|
319
|
+
setTimeout(() => {
|
|
320
|
+
this.formControl().setValue(newValue, { emitEvent: true });
|
|
321
|
+
this.valueChange.emit(newValue);
|
|
322
|
+
}, 0);
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
});
|
|
312
326
|
effect(() => {
|
|
313
327
|
if (this.formControl() && this.hasMultipleOptions()) {
|
|
314
328
|
const options = this.options();
|
|
@@ -496,6 +510,30 @@ class DateFieldComponent extends BaseFieldComponent {
|
|
|
496
510
|
control.enable();
|
|
497
511
|
}
|
|
498
512
|
});
|
|
513
|
+
effect(() => {
|
|
514
|
+
const fieldCfg = this.field();
|
|
515
|
+
const formValue = this.formValue();
|
|
516
|
+
if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
|
|
517
|
+
const newValue = fieldCfg.dynamicValue(formValue);
|
|
518
|
+
const currentValue = this.formControl().value;
|
|
519
|
+
if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
|
|
520
|
+
setTimeout(() => {
|
|
521
|
+
let formattedValue = newValue;
|
|
522
|
+
if (newValue instanceof Date && !isNaN(newValue.getTime())) {
|
|
523
|
+
formattedValue = newValue.toISOString().split('T')[0];
|
|
524
|
+
}
|
|
525
|
+
else if (typeof newValue === 'string') {
|
|
526
|
+
const date = new Date(newValue);
|
|
527
|
+
if (!isNaN(date.getTime())) {
|
|
528
|
+
formattedValue = date.toISOString().split('T')[0];
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
this.formControl().setValue(formattedValue, { emitEvent: true });
|
|
532
|
+
this.valueChange.emit(formattedValue);
|
|
533
|
+
}, 0);
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
});
|
|
499
537
|
}
|
|
500
538
|
initializeFormControl() {
|
|
501
539
|
const modeConfig = this.field().modes?.[this.mode()];
|
|
@@ -610,7 +648,17 @@ class DatetimeFieldComponent {
|
|
|
610
648
|
selectedDate = signal(null);
|
|
611
649
|
selectedHour = signal(0);
|
|
612
650
|
selectedMinute = signal(0);
|
|
651
|
+
hasHourValue = signal(false);
|
|
652
|
+
hasMinuteValue = signal(false);
|
|
613
653
|
hours = Array.from({ length: 24 }, (_, i) => i);
|
|
654
|
+
isHourPlaceholderVisible = computed(() => {
|
|
655
|
+
const hasVal = this.hasHourValue();
|
|
656
|
+
return !hasVal;
|
|
657
|
+
});
|
|
658
|
+
isMinutePlaceholderVisible = computed(() => {
|
|
659
|
+
const hasVal = this.hasMinuteValue();
|
|
660
|
+
return !hasVal;
|
|
661
|
+
});
|
|
614
662
|
hoursOptions = computed(() => {
|
|
615
663
|
return this.hours.map(hour => ({
|
|
616
664
|
value: hour,
|
|
@@ -677,6 +725,44 @@ class DatetimeFieldComponent {
|
|
|
677
725
|
this.selectedMinute.set(this.roundToNearestInterval(newDate).getMinutes());
|
|
678
726
|
}
|
|
679
727
|
});
|
|
728
|
+
// Update hasValue signals when selected values change
|
|
729
|
+
effect(() => {
|
|
730
|
+
const hour = this.selectedHour();
|
|
731
|
+
this.hasHourValue.set(hour !== null && hour !== undefined);
|
|
732
|
+
});
|
|
733
|
+
effect(() => {
|
|
734
|
+
const minute = this.selectedMinute();
|
|
735
|
+
this.hasMinuteValue.set(minute !== null && minute !== undefined);
|
|
736
|
+
});
|
|
737
|
+
effect(() => {
|
|
738
|
+
const fieldCfg = this.field();
|
|
739
|
+
const formValue = this.formValue();
|
|
740
|
+
if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
|
|
741
|
+
const newValue = fieldCfg.dynamicValue(formValue);
|
|
742
|
+
const currentValue = this.value();
|
|
743
|
+
if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
|
|
744
|
+
setTimeout(() => {
|
|
745
|
+
let dateValue = null;
|
|
746
|
+
if (newValue instanceof Date && !isNaN(newValue.getTime())) {
|
|
747
|
+
dateValue = new Date(newValue);
|
|
748
|
+
}
|
|
749
|
+
else if (typeof newValue === 'string' || typeof newValue === 'number') {
|
|
750
|
+
const parsedDate = new Date(newValue);
|
|
751
|
+
if (!isNaN(parsedDate.getTime())) {
|
|
752
|
+
dateValue = parsedDate;
|
|
753
|
+
}
|
|
754
|
+
}
|
|
755
|
+
if (dateValue) {
|
|
756
|
+
this.selectedDate.set(dateValue);
|
|
757
|
+
this.selectedHour.set(dateValue.getHours());
|
|
758
|
+
const roundedMinute = this.roundToNearestInterval(dateValue).getMinutes();
|
|
759
|
+
this.selectedMinute.set(roundedMinute);
|
|
760
|
+
}
|
|
761
|
+
this.valueChange.emit(newValue);
|
|
762
|
+
}, 0);
|
|
763
|
+
}
|
|
764
|
+
}
|
|
765
|
+
});
|
|
680
766
|
}
|
|
681
767
|
ngOnInit() {
|
|
682
768
|
this.initializeValues();
|
|
@@ -786,11 +872,11 @@ class DatetimeFieldComponent {
|
|
|
786
872
|
}
|
|
787
873
|
}
|
|
788
874
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatetimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
789
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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()\">{{ field().label | translate }}</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=\"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=\"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", 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"] }] });
|
|
875
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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()\">{{ field().label | translate }}</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"] }] });
|
|
790
876
|
}
|
|
791
877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatetimeFieldComponent, decorators: [{
|
|
792
878
|
type: Component,
|
|
793
|
-
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()\">{{ field().label | translate }}</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=\"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=\"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" }]
|
|
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()\">{{ field().label | translate }}</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"] }]
|
|
794
880
|
}], ctorParameters: () => [] });
|
|
795
881
|
|
|
796
882
|
// icon-compat.pipe.ts
|
|
@@ -1154,6 +1240,20 @@ class NumberFieldComponent extends BaseFieldComponent {
|
|
|
1154
1240
|
control.enable();
|
|
1155
1241
|
}
|
|
1156
1242
|
});
|
|
1243
|
+
effect(() => {
|
|
1244
|
+
const fieldCfg = this.field();
|
|
1245
|
+
const formValue = this.formValue();
|
|
1246
|
+
if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
|
|
1247
|
+
const newValue = fieldCfg.dynamicValue(formValue);
|
|
1248
|
+
const currentValue = this.formControl().value;
|
|
1249
|
+
if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
|
|
1250
|
+
setTimeout(() => {
|
|
1251
|
+
this.formControl().setValue(newValue, { emitEvent: true });
|
|
1252
|
+
this.valueChange.emit(newValue);
|
|
1253
|
+
}, 0);
|
|
1254
|
+
}
|
|
1255
|
+
}
|
|
1256
|
+
});
|
|
1157
1257
|
}
|
|
1158
1258
|
ngOnDestroy() {
|
|
1159
1259
|
this.stopHold();
|
|
@@ -1274,6 +1374,20 @@ class PasswordFieldComponent extends BaseFieldComponent {
|
|
|
1274
1374
|
control.enable();
|
|
1275
1375
|
}
|
|
1276
1376
|
});
|
|
1377
|
+
effect(() => {
|
|
1378
|
+
const fieldCfg = this.field();
|
|
1379
|
+
const formValue = this.formValue();
|
|
1380
|
+
if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
|
|
1381
|
+
const newValue = fieldCfg.dynamicValue(formValue);
|
|
1382
|
+
const currentValue = this.formControl().value;
|
|
1383
|
+
if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
|
|
1384
|
+
setTimeout(() => {
|
|
1385
|
+
this.formControl().setValue(newValue, { emitEvent: true });
|
|
1386
|
+
this.valueChange.emit(newValue);
|
|
1387
|
+
}, 0);
|
|
1388
|
+
}
|
|
1389
|
+
}
|
|
1390
|
+
});
|
|
1277
1391
|
}
|
|
1278
1392
|
inputType() {
|
|
1279
1393
|
return this.showPassword() ? 'text' : 'password';
|
|
@@ -2176,6 +2290,20 @@ class SwitchFieldComponent extends BaseFieldComponent {
|
|
|
2176
2290
|
isDisabled = computed(() => this.mode() === 'view' || this.evaluateReadonly());
|
|
2177
2291
|
constructor() {
|
|
2178
2292
|
super();
|
|
2293
|
+
effect(() => {
|
|
2294
|
+
const fieldCfg = this.field();
|
|
2295
|
+
const formValue = this.formValue();
|
|
2296
|
+
if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
|
|
2297
|
+
const newValue = fieldCfg.dynamicValue(formValue);
|
|
2298
|
+
const currentValue = this.formControl().value;
|
|
2299
|
+
if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
|
|
2300
|
+
setTimeout(() => {
|
|
2301
|
+
this.formControl().setValue(newValue, { emitEvent: true });
|
|
2302
|
+
this.valueChange.emit(newValue);
|
|
2303
|
+
}, 0);
|
|
2304
|
+
}
|
|
2305
|
+
}
|
|
2306
|
+
});
|
|
2179
2307
|
effect(() => {
|
|
2180
2308
|
if (this.formControl()) {
|
|
2181
2309
|
const currentValue = this.getCurrentValue();
|
|
@@ -2251,6 +2379,20 @@ class TextAreaFieldComponent extends BaseFieldComponent {
|
|
|
2251
2379
|
control.enable();
|
|
2252
2380
|
}
|
|
2253
2381
|
});
|
|
2382
|
+
effect(() => {
|
|
2383
|
+
const fieldCfg = this.field();
|
|
2384
|
+
const formValue = this.formValue();
|
|
2385
|
+
if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
|
|
2386
|
+
const newValue = fieldCfg.dynamicValue(formValue);
|
|
2387
|
+
const currentValue = this.formControl().value;
|
|
2388
|
+
if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
|
|
2389
|
+
setTimeout(() => {
|
|
2390
|
+
this.formControl().setValue(newValue, { emitEvent: true });
|
|
2391
|
+
this.valueChange.emit(newValue);
|
|
2392
|
+
}, 0);
|
|
2393
|
+
}
|
|
2394
|
+
}
|
|
2395
|
+
});
|
|
2254
2396
|
}
|
|
2255
2397
|
isDisabled() {
|
|
2256
2398
|
return this.mode() === ModalMode.VIEW || this.evaluateReadonly();
|
|
@@ -2279,6 +2421,20 @@ class TextFieldComponent extends BaseFieldComponent {
|
|
|
2279
2421
|
control.enable();
|
|
2280
2422
|
}
|
|
2281
2423
|
});
|
|
2424
|
+
effect(() => {
|
|
2425
|
+
const fieldCfg = this.field();
|
|
2426
|
+
const formValue = this.formValue();
|
|
2427
|
+
if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
|
|
2428
|
+
const newValue = fieldCfg.dynamicValue(formValue);
|
|
2429
|
+
const currentValue = this.formControl().value;
|
|
2430
|
+
if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
|
|
2431
|
+
setTimeout(() => {
|
|
2432
|
+
this.formControl().setValue(newValue, { emitEvent: true });
|
|
2433
|
+
this.valueChange.emit(newValue);
|
|
2434
|
+
}, 0);
|
|
2435
|
+
}
|
|
2436
|
+
}
|
|
2437
|
+
});
|
|
2282
2438
|
}
|
|
2283
2439
|
isDisabled() {
|
|
2284
2440
|
return this.mode() === ModalMode.VIEW || this.evaluateReadonly();
|
|
@@ -2320,7 +2476,17 @@ class TimeFieldComponent {
|
|
|
2320
2476
|
ModalMode = ModalMode;
|
|
2321
2477
|
selectedStartTime = signal(null);
|
|
2322
2478
|
selectedEndTime = signal(null);
|
|
2479
|
+
hasStartValue = signal(false);
|
|
2480
|
+
hasEndValue = signal(false);
|
|
2323
2481
|
config = computed(() => this.field().config || {});
|
|
2482
|
+
isStartPlaceholderVisible = computed(() => {
|
|
2483
|
+
const hasVal = this.hasStartValue();
|
|
2484
|
+
return !hasVal;
|
|
2485
|
+
});
|
|
2486
|
+
isEndPlaceholderVisible = computed(() => {
|
|
2487
|
+
const hasVal = this.hasEndValue();
|
|
2488
|
+
return !hasVal;
|
|
2489
|
+
});
|
|
2324
2490
|
availableOptions = computed(() => {
|
|
2325
2491
|
const baseOptions = this.config().options || [];
|
|
2326
2492
|
const interval = this.config().timeInterval;
|
|
@@ -2377,6 +2543,28 @@ class TimeFieldComponent {
|
|
|
2377
2543
|
const newValue = this.value();
|
|
2378
2544
|
this.initializeFromValue(newValue);
|
|
2379
2545
|
});
|
|
2546
|
+
effect(() => {
|
|
2547
|
+
const startTime = this.selectedStartTime();
|
|
2548
|
+
this.hasStartValue.set(startTime !== null && startTime !== undefined && startTime !== '');
|
|
2549
|
+
});
|
|
2550
|
+
effect(() => {
|
|
2551
|
+
const endTime = this.selectedEndTime();
|
|
2552
|
+
this.hasEndValue.set(endTime !== null && endTime !== undefined && endTime !== '');
|
|
2553
|
+
});
|
|
2554
|
+
effect(() => {
|
|
2555
|
+
const fieldCfg = this.field();
|
|
2556
|
+
const formValue = this.formValue();
|
|
2557
|
+
if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function') {
|
|
2558
|
+
const newValue = fieldCfg.dynamicValue(formValue || {});
|
|
2559
|
+
const currentValue = this.value();
|
|
2560
|
+
if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
|
|
2561
|
+
this.initializeFromValue(newValue);
|
|
2562
|
+
setTimeout(() => {
|
|
2563
|
+
this.valueChange.emit(newValue);
|
|
2564
|
+
}, 0);
|
|
2565
|
+
}
|
|
2566
|
+
}
|
|
2567
|
+
});
|
|
2380
2568
|
}
|
|
2381
2569
|
initializeFromValue(value) {
|
|
2382
2570
|
if (!value) {
|
|
@@ -2457,11 +2645,11 @@ class TimeFieldComponent {
|
|
|
2457
2645
|
this.onBlurEvent.emit(this.field().key);
|
|
2458
2646
|
}
|
|
2459
2647
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2460
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TimeFieldComponent, isStandalone: true, selector: "core-time-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" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\" [class.time-field-range]=\"includeEndTime()\">\n <!-- Start Time Field -->\n <div class=\"time-field-container\">\n <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-start'\">\n {{ startTimeLabel() | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </label>\n \n <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n <ng-select\n [id]=\"field().key.toString() + '-start'\"\n [items]=\"startTimeOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [clearable]=\"!hasRequiredValidators()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"selectedStartTime()\"\n (ngModelChange)=\"onStartTimeChange($event)\"\n (blur)=\"onStartTimeBlur()\"\n [placeholder]=\"'time-field.select-time' | translate\"\n [searchable]=\"false\">\n \n <ng-template ng-option-tmp let-item=\"item\">\n {{ item.label }}\n @if (item.used) {\n <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n }\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\n <!-- End Time Field (only if includeEndTime is true) -->\n @if (includeEndTime()) {\n <div class=\"time-field-container time-field-end\">\n <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-end'\">\n {{ endTimeLabel() | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </label>\n \n <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n <ng-select\n [id]=\"field().key.toString() + '-end'\"\n [items]=\"endTimeOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [clearable]=\"true\"\n [disabled]=\"isDisabled() || !selectedStartTime()\"\n [ngModel]=\"selectedEndTime()\"\n (ngModelChange)=\"onEndTimeChange($event)\"\n (blur)=\"onEndTimeBlur()\"\n [placeholder]=\"'time-field.select-end-time' | translate\"\n [searchable]=\"false\">\n \n <ng-template ng-option-tmp let-item=\"item\">\n {{ item.label }}\n @if (item.used) {\n <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n }\n @if (selectedStartTime() && item.value === selectedStartTime()!) {\n <span class=\"unavailable-indicator\"> ({{ 'time-field.unavailable' | translate }})</span>\n }\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 }\n\n <!-- Error Messages -->\n @if (hasError()) {\n <core-field-errors [errors]=\"errors()\"></core-field-errors>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] });
|
|
2648
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TimeFieldComponent, isStandalone: true, selector: "core-time-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" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\" [class.time-field-range]=\"includeEndTime()\">\n <!-- Start Time Field -->\n <div class=\"time-field-container\">\n <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-start'\">\n {{ startTimeLabel() | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </label>\n \n <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n <ng-select\n [id]=\"field().key.toString() + '-start'\"\n [items]=\"startTimeOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [clearable]=\"!hasRequiredValidators()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"selectedStartTime()\"\n (ngModelChange)=\"onStartTimeChange($event)\"\n (blur)=\"onStartTimeBlur()\"\n [placeholder]=\"isStartPlaceholderVisible() ? ('time-field.select-time' | translate) : ''\"\n [searchable]=\"false\">\n \n <ng-template ng-option-tmp let-item=\"item\">\n {{ item.label }}\n @if (item.used) {\n <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n }\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\n <!-- End Time Field (only if includeEndTime is true) -->\n @if (includeEndTime()) {\n <div class=\"time-field-container time-field-end\">\n <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-end'\">\n {{ endTimeLabel() | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </label>\n \n <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n <ng-select\n [id]=\"field().key.toString() + '-end'\"\n [items]=\"endTimeOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [clearable]=\"true\"\n [disabled]=\"isDisabled() || !selectedStartTime()\"\n [ngModel]=\"selectedEndTime()\"\n (ngModelChange)=\"onEndTimeChange($event)\"\n (blur)=\"onEndTimeBlur()\"\n [placeholder]=\"isEndPlaceholderVisible() ? ('time-field.select-end-time' | translate) : ''\"\n [searchable]=\"false\">\n \n <ng-template ng-option-tmp let-item=\"item\">\n {{ item.label }}\n @if (item.used) {\n <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n }\n @if (selectedStartTime() && item.value === selectedStartTime()!) {\n <span class=\"unavailable-indicator\"> ({{ 'time-field.unavailable' | translate }})</span>\n }\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 }\n\n <!-- Error Messages -->\n @if (hasError()) {\n <core-field-errors [errors]=\"errors()\"></core-field-errors>\n }\n</div>\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: "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"] }] });
|
|
2461
2649
|
}
|
|
2462
2650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TimeFieldComponent, decorators: [{
|
|
2463
2651
|
type: Component,
|
|
2464
|
-
args: [{ selector: 'core-time-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\" [class.time-field-range]=\"includeEndTime()\">\n <!-- Start Time Field -->\n <div class=\"time-field-container\">\n <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-start'\">\n {{ startTimeLabel() | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </label>\n \n <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n <ng-select\n [id]=\"field().key.toString() + '-start'\"\n [items]=\"startTimeOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [clearable]=\"!hasRequiredValidators()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"selectedStartTime()\"\n (ngModelChange)=\"onStartTimeChange($event)\"\n (blur)=\"onStartTimeBlur()\"\n [placeholder]=\"'time-field.select-time' | translate\"\n [searchable]=\"false\">\n \n <ng-template ng-option-tmp let-item=\"item\">\n {{ item.label }}\n @if (item.used) {\n <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n }\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\n <!-- End Time Field (only if includeEndTime is true) -->\n @if (includeEndTime()) {\n <div class=\"time-field-container time-field-end\">\n <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-end'\">\n {{ endTimeLabel() | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </label>\n \n <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n <ng-select\n [id]=\"field().key.toString() + '-end'\"\n [items]=\"endTimeOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [clearable]=\"true\"\n [disabled]=\"isDisabled() || !selectedStartTime()\"\n [ngModel]=\"selectedEndTime()\"\n (ngModelChange)=\"onEndTimeChange($event)\"\n (blur)=\"onEndTimeBlur()\"\n [placeholder]=\"'time-field.select-end-time' | translate\"\n [searchable]=\"false\">\n \n <ng-template ng-option-tmp let-item=\"item\">\n {{ item.label }}\n @if (item.used) {\n <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n }\n @if (selectedStartTime() && item.value === selectedStartTime()!) {\n <span class=\"unavailable-indicator\"> ({{ 'time-field.unavailable' | translate }})</span>\n }\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 }\n\n <!-- Error Messages -->\n @if (hasError()) {\n <core-field-errors [errors]=\"errors()\"></core-field-errors>\n }\n</div>\n" }]
|
|
2652
|
+
args: [{ selector: 'core-time-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\" [class.time-field-range]=\"includeEndTime()\">\n <!-- Start Time Field -->\n <div class=\"time-field-container\">\n <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-start'\">\n {{ startTimeLabel() | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </label>\n \n <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n <ng-select\n [id]=\"field().key.toString() + '-start'\"\n [items]=\"startTimeOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [clearable]=\"!hasRequiredValidators()\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"selectedStartTime()\"\n (ngModelChange)=\"onStartTimeChange($event)\"\n (blur)=\"onStartTimeBlur()\"\n [placeholder]=\"isStartPlaceholderVisible() ? ('time-field.select-time' | translate) : ''\"\n [searchable]=\"false\">\n \n <ng-template ng-option-tmp let-item=\"item\">\n {{ item.label }}\n @if (item.used) {\n <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n }\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\n <!-- End Time Field (only if includeEndTime is true) -->\n @if (includeEndTime()) {\n <div class=\"time-field-container time-field-end\">\n <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-end'\">\n {{ endTimeLabel() | translate }}\n @if (hasRequiredValidators()) {\n <span class=\"c-required\">*</span>\n }\n </label>\n \n <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n <ng-select\n [id]=\"field().key.toString() + '-end'\"\n [items]=\"endTimeOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [clearable]=\"true\"\n [disabled]=\"isDisabled() || !selectedStartTime()\"\n [ngModel]=\"selectedEndTime()\"\n (ngModelChange)=\"onEndTimeChange($event)\"\n (blur)=\"onEndTimeBlur()\"\n [placeholder]=\"isEndPlaceholderVisible() ? ('time-field.select-end-time' | translate) : ''\"\n [searchable]=\"false\">\n \n <ng-template ng-option-tmp let-item=\"item\">\n {{ item.label }}\n @if (item.used) {\n <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n }\n @if (selectedStartTime() && item.value === selectedStartTime()!) {\n <span class=\"unavailable-indicator\"> ({{ 'time-field.unavailable' | translate }})</span>\n }\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 }\n\n <!-- Error Messages -->\n @if (hasError()) {\n <core-field-errors [errors]=\"errors()\"></core-field-errors>\n }\n</div>\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"] }]
|
|
2465
2653
|
}], ctorParameters: () => [] });
|
|
2466
2654
|
|
|
2467
2655
|
class DynamicFieldDirective {
|
|
@@ -5074,12 +5262,27 @@ class ModelApiService {
|
|
|
5074
5262
|
if (!this.moreDataSubjects.has(config.key)) {
|
|
5075
5263
|
this.moreDataSubjects.set(config.key, new BehaviorSubject([]));
|
|
5076
5264
|
}
|
|
5077
|
-
|
|
5265
|
+
const apiCall = config.isSingleObject
|
|
5266
|
+
? this.apiService.getObj(config.endpoint, config.id)
|
|
5267
|
+
: this.apiService.fetchData(config.endpoint);
|
|
5268
|
+
return apiCall.pipe(map((res) => {
|
|
5078
5269
|
if (!res || !res.data) {
|
|
5079
|
-
return { key: config.key, data: [] };
|
|
5270
|
+
return { key: config.key, data: config.isSingleObject ? null : [] };
|
|
5271
|
+
}
|
|
5272
|
+
if (config.isSingleObject) {
|
|
5273
|
+
const modelInstance = new config.model();
|
|
5274
|
+
if (modelInstance.fromJSON && typeof modelInstance.fromJSON === 'function') {
|
|
5275
|
+
modelInstance.fromJSON(res.data);
|
|
5276
|
+
}
|
|
5277
|
+
return { key: config.key, data: modelInstance };
|
|
5080
5278
|
}
|
|
5081
5279
|
let dataArray = [];
|
|
5082
|
-
if (typeof res.data === 'object' &&
|
|
5280
|
+
if (config.customArrayKey && typeof res.data === 'object' && res.data[config.customArrayKey]) {
|
|
5281
|
+
if (Array.isArray(res.data[config.customArrayKey])) {
|
|
5282
|
+
dataArray = res.data[config.customArrayKey];
|
|
5283
|
+
}
|
|
5284
|
+
}
|
|
5285
|
+
else if (typeof res.data === 'object' && 'data' in res.data && Array.isArray(res.data.data)) {
|
|
5083
5286
|
dataArray = res.data.data;
|
|
5084
5287
|
}
|
|
5085
5288
|
else if (Array.isArray(res.data)) {
|
|
@@ -5101,7 +5304,7 @@ class ModelApiService {
|
|
|
5101
5304
|
inBottom: true,
|
|
5102
5305
|
duration: 5000
|
|
5103
5306
|
});
|
|
5104
|
-
return of({ key: config.key, data: [] });
|
|
5307
|
+
return of({ key: config.key, data: config.isSingleObject ? null : [] });
|
|
5105
5308
|
}));
|
|
5106
5309
|
});
|
|
5107
5310
|
forkJoin(observables).subscribe({
|
|
@@ -5109,7 +5312,10 @@ class ModelApiService {
|
|
|
5109
5312
|
results.forEach(result => {
|
|
5110
5313
|
const subject = this.moreDataSubjects.get(result.key);
|
|
5111
5314
|
if (subject) {
|
|
5112
|
-
|
|
5315
|
+
const dataToStore = result.data === null
|
|
5316
|
+
? []
|
|
5317
|
+
: (Array.isArray(result.data) ? result.data : [result.data]);
|
|
5318
|
+
subject.next(dataToStore);
|
|
5113
5319
|
}
|
|
5114
5320
|
});
|
|
5115
5321
|
},
|
|
@@ -5126,6 +5332,10 @@ class ModelApiService {
|
|
|
5126
5332
|
getMoreData(key) {
|
|
5127
5333
|
return this.moreDataSubjects.has(key) ? [...this.moreDataSubjects.get(key).value] : [];
|
|
5128
5334
|
}
|
|
5335
|
+
getMoreDataSingleObject(key) {
|
|
5336
|
+
const data = this.getMoreData(key);
|
|
5337
|
+
return data.length > 0 ? data[0] : null;
|
|
5338
|
+
}
|
|
5129
5339
|
getMoreDataObservable(key) {
|
|
5130
5340
|
const subject = this.moreDataSubjects.get(key);
|
|
5131
5341
|
if (!subject) {
|
|
@@ -5133,6 +5343,9 @@ class ModelApiService {
|
|
|
5133
5343
|
}
|
|
5134
5344
|
return this.moreDataSubjects.get(key).asObservable();
|
|
5135
5345
|
}
|
|
5346
|
+
getMoreDataSingleObjectObservable(key) {
|
|
5347
|
+
return this.getMoreDataObservable(key).pipe(map(data => data.length > 0 ? data[0] : null));
|
|
5348
|
+
}
|
|
5136
5349
|
callApiWithHeaders(method, args, headers) {
|
|
5137
5350
|
return headers ? method(...args, headers) : method(...args);
|
|
5138
5351
|
}
|
|
@@ -10269,12 +10482,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
10269
10482
|
// Este archivo es generado automáticamente por scripts/update-version.js
|
|
10270
10483
|
// No edites manualmente este archivo
|
|
10271
10484
|
const VERSION = {
|
|
10272
|
-
full: '2.11.
|
|
10485
|
+
full: '2.11.27',
|
|
10273
10486
|
major: 2,
|
|
10274
10487
|
minor: 11,
|
|
10275
|
-
patch:
|
|
10276
|
-
timestamp: '2025-08-
|
|
10277
|
-
buildDate: '
|
|
10488
|
+
patch: 27,
|
|
10489
|
+
timestamp: '2025-08-29T11:47:03.838Z',
|
|
10490
|
+
buildDate: '29/8/2025'
|
|
10278
10491
|
};
|
|
10279
10492
|
|
|
10280
10493
|
class MainNavComponent {
|