@solcre-org/core-ui 2.12.24 → 2.12.26

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.
@@ -16,9 +16,6 @@
16
16
  position: relative;
17
17
  display: grid;
18
18
  grid-template-rows: 1fr auto;
19
- grid-template-areas:
20
- "chatbody"
21
- "chatbottom";
22
19
  align-content: space-between;
23
20
  overflow: hidden;
24
21
  }
@@ -29,7 +26,6 @@
29
26
  }
30
27
 
31
28
  .c-chat-layout__body {
32
- grid-area: chatbody;
33
29
  position: relative;
34
30
  overflow: hidden;
35
31
  overflow-y: auto;
@@ -43,7 +39,6 @@
43
39
  }
44
40
 
45
41
  .c-chat-layout__bottom {
46
- grid-area: chatbottom;
47
42
  padding-block: var(--_bottom-py);
48
43
  border-top: var(--_separator-line-w) solid var(--_separator-line-color);
49
44
  height: fit-content;
@@ -72,11 +72,6 @@
72
72
  z-index: 1;
73
73
  display: grid;
74
74
  grid-template-rows: auto 1fr auto;
75
- grid-template-areas:
76
- "modalheader"
77
- "modalbody"
78
- "modalbottom"
79
- ;
80
75
  align-content: space-between;
81
76
  overflow: hidden;
82
77
  }
@@ -88,7 +83,6 @@
88
83
  }
89
84
 
90
85
  .c-modal__header {
91
- grid-area: modalheader;
92
86
  display: flex;
93
87
  padding-block: var(--_header-py);
94
88
  align-items: center;
@@ -102,7 +96,6 @@
102
96
  }
103
97
 
104
98
  .c-modal__body{
105
- grid-area: modalbody;
106
99
  position: relative;
107
100
  overflow: hidden;
108
101
  overflow-y: auto;
@@ -132,7 +125,6 @@ body:has(.c-modal.is-visible) {
132
125
  }
133
126
 
134
127
  .c-modal__bottom{
135
- grid-area: modalbottom;
136
128
  padding-block: var(--_bottom-py);
137
129
  border-top: var(--_separator-line-w) solid var(--_separator-line-color);
138
130
  height: fit-content;
@@ -131,6 +131,19 @@
131
131
  }
132
132
 
133
133
 
134
+ /* ********************** ONLY MOBILE ********************** */
135
+
136
+ @media (max-width: 47.9375rem) /* up to 767px */ {
137
+
138
+ .o-layout {
139
+ --_layout-fullheight: 100vh;
140
+ }
141
+
142
+ .o-layout__body{
143
+ border-radius: 0;
144
+ }
145
+
146
+ }
134
147
 
135
148
 
136
149
  /* ********************** MOBILE & TABLET ********************** */
@@ -3185,10 +3185,22 @@ class TimeFieldComponent {
3185
3185
  endTimeOptions = computed(() => {
3186
3186
  const startTime = this.selectedStartTime();
3187
3187
  const options = this.availableOptions();
3188
- return options.map(option => ({
3189
- ...option,
3190
- disabled: option.used || (startTime ? option.value === startTime : false)
3191
- }));
3188
+ const enforceEndTimeAfterStart = this.config().enforceEndTimeAfterStart || false;
3189
+ return options.map(option => {
3190
+ let disabled = option.used || false;
3191
+ if (startTime) {
3192
+ if (enforceEndTimeAfterStart) {
3193
+ disabled = disabled || this.isTimeBeforeOrEqual(option.value, startTime);
3194
+ }
3195
+ else {
3196
+ disabled = disabled || option.value === startTime;
3197
+ }
3198
+ }
3199
+ return {
3200
+ ...option,
3201
+ disabled
3202
+ };
3203
+ });
3192
3204
  });
3193
3205
  includeEndTime = computed(() => this.config().includeEndTime || false);
3194
3206
  startTimeLabel = computed(() => this.config().startTimeLabel || 'time-field.start-time');
@@ -3224,6 +3236,20 @@ class TimeFieldComponent {
3224
3236
  const newValue = this.value();
3225
3237
  this.initializeFromValue(newValue);
3226
3238
  });
3239
+ effect(() => {
3240
+ const mode = this.mode();
3241
+ const currentValue = this.value();
3242
+ const config = this.config();
3243
+ if ((mode === ModalMode.CREATE || mode === ModalMode.EDIT) &&
3244
+ (!currentValue || this.isEmptyValue(currentValue)) &&
3245
+ (config.defaultStartTime || config.defaultEndTime)) {
3246
+ const hasCurrentStartTime = this.selectedStartTime();
3247
+ const hasCurrentEndTime = this.selectedEndTime();
3248
+ if (!hasCurrentStartTime && !hasCurrentEndTime) {
3249
+ this.applyDefaultValues();
3250
+ }
3251
+ }
3252
+ });
3227
3253
  effect(() => {
3228
3254
  const startTime = this.selectedStartTime();
3229
3255
  this.hasStartValue.set(startTime !== null && startTime !== undefined && startTime !== '');
@@ -3296,12 +3322,25 @@ class TimeFieldComponent {
3296
3322
  onStartTimeChange(value) {
3297
3323
  this.selectedStartTime.set(value);
3298
3324
  const currentEndTime = this.selectedEndTime();
3299
- if (value && currentEndTime && currentEndTime === value) {
3300
- this.selectedEndTime.set(null);
3325
+ const enforceEndTimeAfterStart = this.config().enforceEndTimeAfterStart || false;
3326
+ if (value && currentEndTime) {
3327
+ if (enforceEndTimeAfterStart && this.isTimeBeforeOrEqual(currentEndTime, value)) {
3328
+ this.selectedEndTime.set(null);
3329
+ }
3330
+ else if (!enforceEndTimeAfterStart && currentEndTime === value) {
3331
+ this.selectedEndTime.set(null);
3332
+ }
3301
3333
  }
3302
3334
  this.emitValue();
3303
3335
  }
3304
3336
  onEndTimeChange(value) {
3337
+ const startTime = this.selectedStartTime();
3338
+ const enforceEndTimeAfterStart = this.config().enforceEndTimeAfterStart || false;
3339
+ if (value && startTime && enforceEndTimeAfterStart) {
3340
+ if (this.isTimeBeforeOrEqual(value, startTime)) {
3341
+ return;
3342
+ }
3343
+ }
3305
3344
  this.selectedEndTime.set(value);
3306
3345
  this.emitValue();
3307
3346
  }
@@ -3325,6 +3364,47 @@ class TimeFieldComponent {
3325
3364
  onEndTimeBlur() {
3326
3365
  this.onBlurEvent.emit(this.field().key);
3327
3366
  }
3367
+ isTimeBeforeOrEqual(time1, time2) {
3368
+ if (!time1 || !time2)
3369
+ return false;
3370
+ const [hours1, minutes1] = time1.split(':').map(Number);
3371
+ const [hours2, minutes2] = time2.split(':').map(Number);
3372
+ const totalMinutes1 = hours1 * 60 + minutes1;
3373
+ const totalMinutes2 = hours2 * 60 + minutes2;
3374
+ return totalMinutes1 <= totalMinutes2;
3375
+ }
3376
+ isEmptyValue(value) {
3377
+ if (!value)
3378
+ return true;
3379
+ if (typeof value === 'string') {
3380
+ return value.trim() === '';
3381
+ }
3382
+ if (typeof value === 'object') {
3383
+ return !value.startTime || value.startTime.trim() === '';
3384
+ }
3385
+ return true;
3386
+ }
3387
+ applyDefaultValues() {
3388
+ const config = this.config();
3389
+ const defaultStartTime = config.defaultStartTime;
3390
+ const defaultEndTime = config.defaultEndTime;
3391
+ if (defaultStartTime) {
3392
+ this.selectedStartTime.set(defaultStartTime);
3393
+ }
3394
+ if (defaultEndTime && this.includeEndTime()) {
3395
+ if (config.enforceEndTimeAfterStart && defaultStartTime) {
3396
+ if (!this.isTimeBeforeOrEqual(defaultStartTime, defaultEndTime)) {
3397
+ this.selectedEndTime.set(defaultEndTime);
3398
+ }
3399
+ }
3400
+ else {
3401
+ this.selectedEndTime.set(defaultEndTime);
3402
+ }
3403
+ }
3404
+ setTimeout(() => {
3405
+ this.emitValue();
3406
+ }, 0);
3407
+ }
3328
3408
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3329
3409
  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;justify-content:start}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "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"] }] });
3330
3410
  }
@@ -11989,11 +12069,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
11989
12069
  // Este archivo es generado automáticamente por scripts/update-version.js
11990
12070
  // No edites manualmente este archivo
11991
12071
  const VERSION = {
11992
- full: '2.12.24',
12072
+ full: '2.12.26',
11993
12073
  major: 2,
11994
12074
  minor: 12,
11995
- patch: 24,
11996
- timestamp: '2025-09-10T09:52:54.814Z',
12075
+ patch: 26,
12076
+ timestamp: '2025-09-10T14:17:57.607Z',
11997
12077
  buildDate: '10/9/2025'
11998
12078
  };
11999
12079