@stemy/ngx-utils 19.9.46 → 19.9.49

package/fesm2022/stemy-ngx-utils.mjs

@@ -8206,7 +8206,6 @@ class CalendarInputs {
         this.max = input(null);
         this.disabledDates = input([]);
         this.disabledDays = input([]);
-        this.disabled = model(false);
         this.strict = input(true);
         this.testId = input("calendar", {
             transform: value => String(value || "calendar")
@@ -8263,7 +8262,7 @@ class CalendarInputs {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CalendarInputs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.22", type: CalendarInputs, isStandalone: true, selector: "ng-component", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, strict: { classPropertyName: "strict", publicName: "strict", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.22", type: CalendarInputs, isStandalone: true, selector: "ng-component", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, strict: { classPropertyName: "strict", publicName: "strict", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: ``, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CalendarInputs, decorators: [{
             type: Component,
@@ -8456,23 +8455,43 @@ class CalendarComponent extends CalendarInputs {
             const val = this.validatedValue();
             untracked(() => {
                 let referenceDate = null;
-                // 1. If a valid selection exists, use the latest date as the reference view anchor
-                if (Array.isArray(val) && val.length > 0) {
-                    referenceDate = new Date(Math.max(...val.map(d => d.getTime())));
-                }
-                else if (val instanceof Date) {
-                    referenceDate = val;
+                const isMulti = this.isMultiSelect();
+                if (isMulti) {
+                    // For multi-select, always initialize to the current month if not initialized yet.
+                    if (!this.isInitialized) {
+                        const today = new Date();
+                        const todayYear = today.getFullYear();
+                        const todayMonth = today.getMonth();
+                        // Check if today's month has at least one valid date, or if it is restricted.
+                        if (this.isMonthAvailable(todayYear, todayMonth)) {
+                            referenceDate = today;
+                        }
+                        else {
+                            const min = this.minDate();
+                            const max = this.maxDate();
+                            const disabledTimes = this.disabledTimestamps();
+                            const disabledDays = this.disabledDays();
+                            referenceDate = findClosestValidDate(today, min, max, disabledTimes, disabledDays);
+                        }
+                    }
                 }
-                // 2. FALLBACK: If no selection exists, dynamically look up the first allowed calendar date
-                if (!referenceDate || isNaN(referenceDate.getTime())) {
-                    const min = this.minDate();
-                    const max = this.maxDate();
-                    const disabledTimes = this.disabledTimestamps();
-                    const disabledDays = this.disabledDays();
-                    // Start searching from today
-                    referenceDate = findClosestValidDate(new Date(), min, max, disabledTimes, disabledDays);
+                else {
+                    // For single-select, align the view to the selected date or fall back to the closest valid date.
+                    if (val instanceof Date) {
+                        referenceDate = val;
+                    }
+                    else if (Array.isArray(val) && val.length > 0) {
+                        referenceDate = new Date(Math.max(...val.map(d => d.getTime())));
+                    }
+                    if (!referenceDate || isNaN(referenceDate.getTime())) {
+                        const min = this.minDate();
+                        const max = this.maxDate();
+                        const disabledTimes = this.disabledTimestamps();
+                        const disabledDays = this.disabledDays();
+                        referenceDate = findClosestValidDate(new Date(), min, max, disabledTimes, disabledDays);
+                    }
                 }
-                // 3. Update the view tracking states cleanly
+                // Update the view tracking states cleanly on initialization or when single-select value changes.
                 if (referenceDate && !isNaN(referenceDate.getTime())) {
                     this.currentMonth.set(referenceDate.getMonth());
                     this.currentYear.set(referenceDate.getFullYear());
@@ -8625,6 +8644,13 @@ class CalendarComponent extends CalendarInputs {
                     }
                     this.value.set(Array.from(updatedSelectionMap.values()));
                 }
+                // Switch month/year if we chose a filler day
+                const dragMonth = currentDrag.getMonth();
+                const dragYear = currentDrag.getFullYear();
+                if (dragMonth !== this.currentMonth() || dragYear !== this.currentYear()) {
+                    this.currentMonth.set(dragMonth);
+                    this.currentYear.set(dragYear);
+                }
             }
         });
         this.isDragging.set(false);
@@ -8766,7 +8792,14 @@ class ChipsComponent {
         return true;
     }
     onBlur(ev) {
-        if (this.chipDropdown.isOpened)
+        const relatedTarget = ev.relatedTarget;
+        // If the focus is moving to an element inside the dropdown (like an option button),
+        // we do not want to trigger the blur commit logic.
+        const contentElement = this.chipDropdown?.contentElement;
+        const insideDropdown = relatedTarget
+            && contentElement instanceof HTMLElement
+            && contentElement.contains(relatedTarget);
+        if (insideDropdown)
             return;
         const input = ev.target;
         this.enterOption(input.value);
@@ -8856,13 +8889,13 @@ class ChipsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: ChipsComponent, isStandalone: false, selector: "chips", inputs: { testId: "testId", value: "value", multiple: "multiple", disabled: "disabled", type: "type", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", step: "step", placeholder: "placeholder", unique: "unique", strict: "strict", options: "options" }, outputs: { valueChange: "valueChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: ChipsComponent, multi: true }
-        ], viewQueries: [{ propertyName: "chipDropdown", first: true, predicate: ["chipDropdown"], descendants: true }, { propertyName: "chipButtons", first: true, predicate: ["chipButtons"], descendants: true }, { propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd\r\n     attachTo=\"root\"\r\n     [closeInside]=\"false\"\r\n     [autoPlacement]=\"autoPlacement\"\r\n     [ngClass]=\"{disabled: disabled}\" class=\"chips\" #chipDropdown=\"dropdown\">\r\n    <input class=\"chips-input\"\r\n           dropdownToggle\r\n           [switch]=\"false\"\r\n           [attr.data-testid]=\"testId + '-input'\"\r\n           [type]=\"type == 'number' ? 'number': 'text'\"\r\n           [min]=\"min\"\r\n           [max]=\"max\"\r\n           [step]=\"step\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\r\n           [ngStyle]=\"inputStyles\"\r\n           (blur)=\"onBlur($event)\"\r\n           (keyup)=\"onInput($event)\"\r\n           #chipInput/>\r\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\r\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\r\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\r\n                @if (item.picture) {\r\n                    <img [src]=\"item.picture | safe:'url'\"\r\n                         class=\"chip-picture\"\r\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\r\n\r\n                }\r\n                <span class=\"chips-label\"\r\n                      [attr.data-testid]=\"testId + '-label-' + ix\">{{ item.label }} </span>\r\n                <close-btn class=\"chips-remove\"\r\n                           [attr.data-testid]=\"testId + '-delete-' + ix\"\r\n                           (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\r\n            </a>\r\n        </ng-container>\r\n    </div>\r\n    @if (options) {\r\n        <div class=\"chips-dropdown\" *dropdownContent>\r\n            <button [ngClass]=\"option.classes\"\r\n                    [disabled]=\"option.disabled\"\r\n                    (click)=\"enterOption(option.value)\"\r\n                    *ngFor=\"let option of filteredOptions\">\r\n                <div class=\"select-option\">\r\n                    @if (option?.picture) {\r\n                        <img [src]=\"option.picture | safe:'url'\"\r\n                             class=\"select-option-picture\"\r\n                             referrerpolicy=\"no-referrer\" [attr.alt]=\"option.label\">\r\n                    }\r\n                    <div class=\"select-option-label\">\r\n                        {{ option.label }}\r\n                    </div>\r\n                </div>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-top-border-radius: var(--chips-border-radius) var(--chips-border-radius) 0 0;--chips-bottom-border-radius: 0 0 var(--chips-border-radius) var(--chips-border-radius);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-highlight-color: var(--highlight-color, var(--primary-color, #888888));--chips-highlight-text-color: var(--highlight-text-color, #ffffff);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-gap) var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem;text-decoration:none}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips img.chip-picture{width:28px;height:28px;object-fit:cover}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.chips-dropdown:not(:empty){position:relative;z-index:1;width:var(--toggle-width, 0);display:flex;flex-direction:column;margin:-3px 0;padding:0;list-style:none;border:var(--chips-border-size) solid var(--chips-border-color);background:var(--chips-bg-color);border-radius:var(--chips-bottom-border-radius);overflow:hidden}.chips-dropdown:not(:empty) *{box-sizing:border-box}.chips-dropdown:not(:empty) button{border:none;background:none;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none;text-align:left}.chips-dropdown:not(:empty) button:hover,.chips-dropdown:not(:empty) button.active{background-color:var(--chips-highlight-color);color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) button:hover a,.chips-dropdown:not(:empty) button.active a{color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) .select-option{display:flex;gap:8px;align-items:center;justify-content:center}.chips-dropdown:not(:empty) .select-option .select-option-picture{width:32px;height:32px;object-fit:cover}.chips-dropdown:not(:empty) .select-option .select-option-label{flex:1}.dropdown-placement-top .chips-dropdown{border-radius:var(--chips-top-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }, { kind: "component", type: CloseBtnComponent, selector: "close-btn" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "chipDropdown", first: true, predicate: ["chipDropdown"], descendants: true }, { propertyName: "chipButtons", first: true, predicate: ["chipButtons"], descendants: true }, { propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd attachTo=\"root\" [closeInside]=\"false\" [autoPlacement]=\"autoPlacement\" [ngClass]=\"{disabled: disabled}\"\r\n    class=\"chips\" #chipDropdown=\"dropdown\">\r\n    <input class=\"chips-input\" dropdownToggle [switch]=\"false\" [attr.data-testid]=\"testId + '-input'\"\r\n        [type]=\"type == 'number' ? 'number': 'text'\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [disabled]=\"disabled\"\r\n        [placeholder]=\"valueOptions.length == 0 && placeholder | translate\" [ngStyle]=\"inputStyles\"\r\n        (blur)=\"onBlur($event)\" (keyup)=\"onInput($event)\" #chipInput />\r\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\r\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\r\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\r\n                @if (item.picture) {\r\n                <img [src]=\"item.picture | safe:'url'\" class=\"chip-picture\" referrerpolicy=\"no-referrer\"\r\n                    [attr.alt]=\"item.label\">\r\n\r\n                }\r\n                <span class=\"chips-label\" [attr.data-testid]=\"testId + '-label-' + ix\">{{ item.label }} </span>\r\n                <close-btn class=\"chips-remove\" [attr.data-testid]=\"testId + '-delete-' + ix\"\r\n                    (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\r\n            </a>\r\n        </ng-container>\r\n    </div>\r\n    @if (options) {\r\n    <div class=\"chips-dropdown\" *dropdownContent>\r\n        <button [ngClass]=\"option.classes\" [disabled]=\"option.disabled\" (click)=\"enterOption(option.value)\"\r\n            *ngFor=\"let option of filteredOptions\">\r\n            <div class=\"select-option\">\r\n                @if (option?.picture) {\r\n                <img [src]=\"option.picture | safe:'url'\" class=\"select-option-picture\" referrerpolicy=\"no-referrer\"\r\n                    [attr.alt]=\"option.label\">\r\n                }\r\n                <div class=\"select-option-label\">\r\n                    {{ option.label }}\r\n                </div>\r\n            </div>\r\n        </button>\r\n    </div>\r\n    }\r\n</div>", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-top-border-radius: var(--chips-border-radius) var(--chips-border-radius) 0 0;--chips-bottom-border-radius: 0 0 var(--chips-border-radius) var(--chips-border-radius);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-highlight-color: var(--highlight-color, var(--primary-color, #888888));--chips-highlight-text-color: var(--highlight-text-color, #ffffff);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-gap) var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem;text-decoration:none}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips img.chip-picture{width:28px;height:28px;object-fit:cover}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.chips-dropdown:not(:empty){position:relative;z-index:1;width:var(--toggle-width, 0);display:flex;flex-direction:column;margin:-3px 0;padding:0;list-style:none;border:var(--chips-border-size) solid var(--chips-border-color);background:var(--chips-bg-color);border-radius:var(--chips-bottom-border-radius);overflow:hidden}.chips-dropdown:not(:empty) *{box-sizing:border-box}.chips-dropdown:not(:empty) button{border:none;background:none;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none;text-align:left}.chips-dropdown:not(:empty) button:hover,.chips-dropdown:not(:empty) button.active{background-color:var(--chips-highlight-color);color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) button:hover a,.chips-dropdown:not(:empty) button.active a{color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) .select-option{display:flex;gap:8px;align-items:center;justify-content:center}.chips-dropdown:not(:empty) .select-option .select-option-picture{width:32px;height:32px;object-fit:cover}.chips-dropdown:not(:empty) .select-option .select-option-label{flex:1}.dropdown-placement-top .chips-dropdown{border-radius:var(--chips-top-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }, { kind: "component", type: CloseBtnComponent, selector: "close-btn" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "chips", providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: ChipsComponent, multi: true }
-                    ], template: "<div dd\r\n     attachTo=\"root\"\r\n     [closeInside]=\"false\"\r\n     [autoPlacement]=\"autoPlacement\"\r\n     [ngClass]=\"{disabled: disabled}\" class=\"chips\" #chipDropdown=\"dropdown\">\r\n    <input class=\"chips-input\"\r\n           dropdownToggle\r\n           [switch]=\"false\"\r\n           [attr.data-testid]=\"testId + '-input'\"\r\n           [type]=\"type == 'number' ? 'number': 'text'\"\r\n           [min]=\"min\"\r\n           [max]=\"max\"\r\n           [step]=\"step\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\r\n           [ngStyle]=\"inputStyles\"\r\n           (blur)=\"onBlur($event)\"\r\n           (keyup)=\"onInput($event)\"\r\n           #chipInput/>\r\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\r\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\r\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\r\n                @if (item.picture) {\r\n                    <img [src]=\"item.picture | safe:'url'\"\r\n                         class=\"chip-picture\"\r\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\r\n\r\n                }\r\n                <span class=\"chips-label\"\r\n                      [attr.data-testid]=\"testId + '-label-' + ix\">{{ item.label }} </span>\r\n                <close-btn class=\"chips-remove\"\r\n                           [attr.data-testid]=\"testId + '-delete-' + ix\"\r\n                           (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\r\n            </a>\r\n        </ng-container>\r\n    </div>\r\n    @if (options) {\r\n        <div class=\"chips-dropdown\" *dropdownContent>\r\n            <button [ngClass]=\"option.classes\"\r\n                    [disabled]=\"option.disabled\"\r\n                    (click)=\"enterOption(option.value)\"\r\n                    *ngFor=\"let option of filteredOptions\">\r\n                <div class=\"select-option\">\r\n                    @if (option?.picture) {\r\n                        <img [src]=\"option.picture | safe:'url'\"\r\n                             class=\"select-option-picture\"\r\n                             referrerpolicy=\"no-referrer\" [attr.alt]=\"option.label\">\r\n                    }\r\n                    <div class=\"select-option-label\">\r\n                        {{ option.label }}\r\n                    </div>\r\n                </div>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-top-border-radius: var(--chips-border-radius) var(--chips-border-radius) 0 0;--chips-bottom-border-radius: 0 0 var(--chips-border-radius) var(--chips-border-radius);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-highlight-color: var(--highlight-color, var(--primary-color, #888888));--chips-highlight-text-color: var(--highlight-text-color, #ffffff);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-gap) var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem;text-decoration:none}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips img.chip-picture{width:28px;height:28px;object-fit:cover}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.chips-dropdown:not(:empty){position:relative;z-index:1;width:var(--toggle-width, 0);display:flex;flex-direction:column;margin:-3px 0;padding:0;list-style:none;border:var(--chips-border-size) solid var(--chips-border-color);background:var(--chips-bg-color);border-radius:var(--chips-bottom-border-radius);overflow:hidden}.chips-dropdown:not(:empty) *{box-sizing:border-box}.chips-dropdown:not(:empty) button{border:none;background:none;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none;text-align:left}.chips-dropdown:not(:empty) button:hover,.chips-dropdown:not(:empty) button.active{background-color:var(--chips-highlight-color);color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) button:hover a,.chips-dropdown:not(:empty) button.active a{color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) .select-option{display:flex;gap:8px;align-items:center;justify-content:center}.chips-dropdown:not(:empty) .select-option .select-option-picture{width:32px;height:32px;object-fit:cover}.chips-dropdown:not(:empty) .select-option .select-option-label{flex:1}.dropdown-placement-top .chips-dropdown{border-radius:var(--chips-top-border-radius)}\n"] }]
+                    ], template: "<div dd attachTo=\"root\" [closeInside]=\"false\" [autoPlacement]=\"autoPlacement\" [ngClass]=\"{disabled: disabled}\"\r\n    class=\"chips\" #chipDropdown=\"dropdown\">\r\n    <input class=\"chips-input\" dropdownToggle [switch]=\"false\" [attr.data-testid]=\"testId + '-input'\"\r\n        [type]=\"type == 'number' ? 'number': 'text'\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [disabled]=\"disabled\"\r\n        [placeholder]=\"valueOptions.length == 0 && placeholder | translate\" [ngStyle]=\"inputStyles\"\r\n        (blur)=\"onBlur($event)\" (keyup)=\"onInput($event)\" #chipInput />\r\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\r\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\r\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\r\n                @if (item.picture) {\r\n                <img [src]=\"item.picture | safe:'url'\" class=\"chip-picture\" referrerpolicy=\"no-referrer\"\r\n                    [attr.alt]=\"item.label\">\r\n\r\n                }\r\n                <span class=\"chips-label\" [attr.data-testid]=\"testId + '-label-' + ix\">{{ item.label }} </span>\r\n                <close-btn class=\"chips-remove\" [attr.data-testid]=\"testId + '-delete-' + ix\"\r\n                    (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\r\n            </a>\r\n        </ng-container>\r\n    </div>\r\n    @if (options) {\r\n    <div class=\"chips-dropdown\" *dropdownContent>\r\n        <button [ngClass]=\"option.classes\" [disabled]=\"option.disabled\" (click)=\"enterOption(option.value)\"\r\n            *ngFor=\"let option of filteredOptions\">\r\n            <div class=\"select-option\">\r\n                @if (option?.picture) {\r\n                <img [src]=\"option.picture | safe:'url'\" class=\"select-option-picture\" referrerpolicy=\"no-referrer\"\r\n                    [attr.alt]=\"option.label\">\r\n                }\r\n                <div class=\"select-option-label\">\r\n                    {{ option.label }}\r\n                </div>\r\n            </div>\r\n        </button>\r\n    </div>\r\n    }\r\n</div>", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-top-border-radius: var(--chips-border-radius) var(--chips-border-radius) 0 0;--chips-bottom-border-radius: 0 0 var(--chips-border-radius) var(--chips-border-radius);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-highlight-color: var(--highlight-color, var(--primary-color, #888888));--chips-highlight-text-color: var(--highlight-text-color, #ffffff);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-gap) var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem;text-decoration:none}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips img.chip-picture{width:28px;height:28px;object-fit:cover}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.chips-dropdown:not(:empty){position:relative;z-index:1;width:var(--toggle-width, 0);display:flex;flex-direction:column;margin:-3px 0;padding:0;list-style:none;border:var(--chips-border-size) solid var(--chips-border-color);background:var(--chips-bg-color);border-radius:var(--chips-bottom-border-radius);overflow:hidden}.chips-dropdown:not(:empty) *{box-sizing:border-box}.chips-dropdown:not(:empty) button{border:none;background:none;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none;text-align:left}.chips-dropdown:not(:empty) button:hover,.chips-dropdown:not(:empty) button.active{background-color:var(--chips-highlight-color);color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) button:hover a,.chips-dropdown:not(:empty) button.active a{color:var(--chips-highlight-text-color)}.chips-dropdown:not(:empty) .select-option{display:flex;gap:8px;align-items:center;justify-content:center}.chips-dropdown:not(:empty) .select-option .select-option-picture{width:32px;height:32px;object-fit:cover}.chips-dropdown:not(:empty) .select-option .select-option-label{flex:1}.dropdown-placement-top .chips-dropdown{border-radius:var(--chips-top-border-radius)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { testId: [{
                 type: Input
             }], value: [{
@@ -8912,30 +8945,73 @@ class CodeEditorComponent {
     get rootNode() {
         return this.root;
     }
-    constructor(cdr, element) {
-        this.cdr = cdr;
-        this.element = element;
-        this.value = "";
-        this.lang = "json";
-        this.onChange = () => {
-        };
-        this.onTouched = () => {
-        };
+    constructor() {
+        this.value = model("");
+        this.lang = input("json");
+        this.disabled = model(false);
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.cdr = inject(ChangeDetectorRef);
+        this.element = inject((ElementRef));
         this.extensions = {};
+        this.editor = signal(null);
+        this.editorElem = viewChild("editor");
+        effect(() => {
+            const editor = this.editor();
+            if (!editor)
+                return;
+            const value = this.value() || "";
+            const disabled = this.disabled();
+            const expectedStr = !isString(value) ? JSON.stringify(value, null, 4) : value;
+            const currentStr = editor.state.doc.toString();
+            const langExtension = this.getLangExtension();
+            const { EditorView } = CM["@codemirror/view"];
+            const dispatchData = {
+                effects: [
+                    this.langCompartment.reconfigure(langExtension),
+                    this.editableCompartment.reconfigure(EditorView.editable.of(!disabled))
+                ]
+            };
+            if (currentStr !== expectedStr) {
+                dispatchData.changes = {
+                    from: 0,
+                    to: editor.state.doc.length,
+                    insert: expectedStr
+                };
+            }
+            editor.dispatch(dispatchData);
+        });
     }
     getLangExtension() {
-        if (!this.extensions[this.lang]) {
-            const lang = CM[`@codemirror/lang-${this.lang || "json"}`];
-            const ext = lang[this.lang];
-            this.extensions[this.lang] = ext();
+        const langVal = this.lang();
+        if (!this.extensions[langVal]) {
+            const lang = CM[`@codemirror/lang-${langVal || "json"}`];
+            const ext = lang[langVal];
+            this.extensions[langVal] = ext();
         }
-        return this.extensions[this.lang];
+        return this.extensions[langVal];
     }
     ngAfterViewInit() {
         Promise.all([
             LoaderUtils.loadScript("https://codemirror.net/codemirror.js", true),
             LoaderUtils.loadScript("https://cdn.jsdelivr.net/npm/jsonlint", true),
-        ]).then(() => {
+        ]).then(() => this.initEditor());
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.value.set(value);
+        this.cdr.markForCheck();
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    initEditor() {
+        untracked(() => {
             const { basicSetup } = CM["codemirror"];
             const { Compartment } = CM["@codemirror/state"];
             const { EditorView } = CM["@codemirror/view"];
@@ -8944,7 +9020,7 @@ class CodeEditorComponent {
             const jsonLinter = linter((view) => {
                 const diagnostics = [];
                 const value = view.state.doc.toString();
-                if (!value.trim() || this.lang !== "json")
+                if (!value.trim() || this.lang() !== "json")
                     return diagnostics;
                 try {
                     jsonlint.parse(value);
@@ -8967,87 +9043,59 @@ class CodeEditorComponent {
                 if (update.docChanged) {
                     // Grab the full string payload of the document
                     const value = update.state.doc.toString();
-                    if (this.lang === "json") {
+                    const lang = untracked(() => this.lang());
+                    let parsedValue;
+                    if (lang === "json") {
                         try {
-                            this.value = JSON.parse(value);
+                            parsedValue = JSON.parse(value);
                         }
                         catch (e) {
                             return null;
                         }
                     }
                     else {
-                        this.value = value;
+                        parsedValue = value;
                     }
-                    this.onChange(this.value);
-                    this.onTouched(this.value);
+                    this.value.set(parsedValue);
+                    this.onChange(parsedValue);
+                    this.onTouched(parsedValue);
                 }
             });
             // Initialize editor on an HTMLElement
-            const value = this.value || "";
+            const value = this.value() || "";
+            const disabled = this.disabled();
             this.langCompartment = new Compartment();
-            this.editor = new EditorView({
+            this.editableCompartment = new Compartment();
+            this.editor.set(new EditorView({
                 doc: !isString(value) ? JSON.stringify(value, null, 4) : value,
                 extensions: [
                     basicSetup,
                     this.langCompartment.of(langExtension),
+                    this.editableCompartment.of(EditorView.editable.of(!disabled)),
+                    EditorView.lineWrapping,
                     jsonLinter,
                     changeHandler
                 ],
-                parent: this.editorElem.nativeElement
-            });
-        });
-    }
-    ngOnChanges() {
-        if (!this.editor)
-            return;
-        const value = this.value || "";
-        this.lang = EDITOR_TYPES.includes(this.lang) ? this.lang : "json";
-        this.editor.dispatch({
-            effects: this.langCompartment.reconfigure(this.getLangExtension()),
-            changes: {
-                from: 0,
-                to: this.editor.state.doc.length,
-                insert: !isString(value) ? JSON.stringify(value, null, 4) : value
-            }
+                parent: this.editorElem()?.nativeElement
+            }));
         });
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(value) {
-        this.value = value;
-        this.cdr.markForCheck();
-        this.ngOnChanges();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CodeEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: CodeEditorComponent, isStandalone: false, selector: "code-editor", inputs: { value: "value", lang: "lang", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.22", type: CodeEditorComponent, isStandalone: false, selector: "code-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: CodeEditorComponent, multi: true }
-        ], viewQueries: [{ propertyName: "editorElem", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"code-editor\" [ngClass]=\"{disabled: disabled}\">\r\n    <div #editor></div>\r\n</div>\r\n", styles: [".code-editor>div{margin:10px 0}.code-editor>div .cm-editor{outline:none}.code-editor>div .cm-scroller{min-height:150px;max-height:345px;background:#fefefe;border:1px solid #ddd}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "editorElem", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"code-editor\" [ngClass]=\"{disabled: disabled()}\">\r\n    <div #editor></div>\r\n</div>\r\n", styles: [".code-editor>div{margin:10px 0}.code-editor>div .cm-editor{outline:none}.code-editor>div .cm-scroller{min-height:150px;max-height:345px;background:#fefefe;border:1px solid #ddd}.code-editor.disabled .cm-content{pointer-events:none;-webkit-user-select:none;user-select:none}.code-editor.disabled .cm-content .cm-activeLine{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CodeEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "code-editor", encapsulation: ViewEncapsulation.None, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: CodeEditorComponent, multi: true }
-                    ], template: "<div class=\"code-editor\" [ngClass]=\"{disabled: disabled}\">\r\n    <div #editor></div>\r\n</div>\r\n", styles: [".code-editor>div{margin:10px 0}.code-editor>div .cm-editor{outline:none}.code-editor>div .cm-scroller{min-height:150px;max-height:345px;background:#fefefe;border:1px solid #ddd}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { value: [{
-                type: Input
-            }], lang: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], editorElem: [{
-                type: ViewChild,
-                args: ["editor"]
-            }] } });
+                    ], template: "<div class=\"code-editor\" [ngClass]=\"{disabled: disabled()}\">\r\n    <div #editor></div>\r\n</div>\r\n", styles: [".code-editor>div{margin:10px 0}.code-editor>div .cm-editor{outline:none}.code-editor>div .cm-scroller{min-height:150px;max-height:345px;background:#fefefe;border:1px solid #ddd}.code-editor.disabled .cm-content{pointer-events:none;-webkit-user-select:none;user-select:none}.code-editor.disabled .cm-content .cm-activeLine{background-color:transparent}\n"] }]
+        }], ctorParameters: () => [] });
 
 class DatePickerComponent extends CalendarInputs {
     constructor() {
         super(...arguments);
+        this.disabled = model(false);
         this.autoPlacement = {
             autoAlignment: true,
             allowedPlacements: ["top-end", "bottom-end"]
@@ -9117,15 +9165,15 @@ class DatePickerComponent extends CalendarInputs {
         this.onTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DatePickerComponent, isStandalone: false, selector: "date-picker", providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DatePickerComponent, isStandalone: false, selector: "date-picker", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }
-        ], viewQueries: [{ propertyName: "pickerDropdown", first: true, predicate: ["pickerDropdown"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let id = testId();\r\n<div class=\"date-picker\"\r\n     drop-down\r\n     [closeInside]=\"false\"\r\n     [autoPlacement]=\"autoPlacement\"\r\n     [ngClass]=\"{disabled: disabled()}\"\r\n     #pickerDropdown=\"dropdown\">\r\n    <input class=\"date-picker-input\"\r\n           [attr.data-testid]=\"id\"\r\n           [type]=\"strict() ? 'date' : 'text'\"\r\n           [value]=\"inputValue()\"\r\n           (focus)=\"onFocus()\"\r\n           (blur)=\"onBlur($event)\"/>\r\n    <div class=\"date-picker-buttons\">\r\n        @if (value()) {\r\n            <btn [attr.data-testid]=\"id + '-clear'\"\r\n                 type=\"transparent\"\r\n                 icon=\"close\" (click)=\"clear()\"></btn>\r\n        }\r\n        <btn [attr.data-testid]=\"id + '-open-picker'\"\r\n             type=\"transparent\"\r\n             icon=\"calendar-days\" dropdownToggle></btn>\r\n    </div>\r\n    <div *dropdownContent>\r\n        <calendar [testId]=\"id + '-picker'\"\r\n                  [min]=\"min()\"\r\n                  [max]=\"max()\"\r\n                  [disabledDates]=\"disabledDates()\"\r\n                  [disabledDays]=\"disabledDays()\"\r\n                  [disabled]=\"disabled()\"\r\n                  [strict]=\"strict()\"\r\n                  [value]=\"value()\"\r\n                  (valueChange)=\"onPickerChange($event)\"></calendar>\r\n    </div>\r\n</div>\r\n", styles: [".date-picker{--date-picker-border-size: var(--border-size, 1px);--date-picker-border-radius: var(--border-radius, 5px);--date-picker-bg-color: var(--bg-color, #ffffff);--date-picker-border-color: var(--border-color, #ced4da);--date-picker-highlight-color: var(--highlight-color, var(--primary-color, #888888));--date-picker-highlight-text-color: var(--highlight-text-color, #ffffff);--date-picker-text-color: var(--text-color, #151515);--date-picker-text-size: var(--text-size, 16px);--date-picker-padding-vertical: 6px;--date-picker-padding-horizontal: 12px;--date-picker-padding: var(--date-picker-padding-vertical) var(--date-picker-padding-horizontal);--date-picker-btn-padding: 12px;--date-picker-btn-gap: calc(var(--date-picker-btn-padding) / 2);--date-picker-btn-color: white;--date-picker-btn-valid-color: rgba(200, 255, 200, .7);--date-picker-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--date-picker-text-size);padding:var(--date-picker-padding);background:var(--date-picker-bg-color);color:var(--date-picker-text-color);border:var(--date-picker-border-size) solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius)}.date-picker *{box-sizing:border-box}.date-picker .date-picker-input{background:var(--date-picker-bg-color);font-size:var(--date-picker-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.date-picker .date-picker-input::-webkit-calendar-picker-indicator{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-clear-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-inner-spin-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-buttons{display:flex;justify-content:flex-end;position:absolute;aspect-ratio:2/1;top:0;bottom:0;right:0;overflow:hidden}.date-picker .date-picker-buttons>btn{max-width:50%}.date-picker.disabled{opacity:.75}.date-picker.disabled .chips-button{padding-right:var(--date-picker-btn-padding)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }, { kind: "component", type: CalendarComponent, selector: "calendar" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "pickerDropdown", first: true, predicate: ["pickerDropdown"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let id = testId();\r\n@let isDisabled = disabled();\r\n<div class=\"date-picker\"\r\n     drop-down\r\n     [closeInside]=\"false\"\r\n     [autoPlacement]=\"autoPlacement\"\r\n     [ngClass]=\"{disabled: isDisabled}\"\r\n     #pickerDropdown=\"dropdown\">\r\n    <input class=\"date-picker-input\"\r\n           [attr.data-testid]=\"id\"\r\n           [disabled]=\"isDisabled\"\r\n           [type]=\"strict() ? 'date' : 'text'\"\r\n           [value]=\"inputValue()\"\r\n           (focus)=\"onFocus()\"\r\n           (blur)=\"onBlur($event)\"/>\r\n    @if (!isDisabled) {\r\n        <div class=\"date-picker-buttons\">\r\n            @if (value()) {\r\n                <btn [attr.data-testid]=\"id + '-clear'\"\r\n                     type=\"transparent\"\r\n                     icon=\"close\" (click)=\"clear()\"></btn>\r\n            }\r\n            <btn [attr.data-testid]=\"id + '-open-picker'\"\r\n                 type=\"transparent\"\r\n                 icon=\"calendar-days\" dropdownToggle></btn>\r\n        </div>\r\n    }\r\n    <div *dropdownContent>\r\n        <calendar [testId]=\"id + '-picker'\"\r\n                  [min]=\"min()\"\r\n                  [max]=\"max()\"\r\n                  [disabledDates]=\"disabledDates()\"\r\n                  [disabledDays]=\"disabledDays()\"\r\n                  [disabled]=\"disabled()\"\r\n                  [strict]=\"strict()\"\r\n                  [value]=\"value()\"\r\n                  (valueChange)=\"onPickerChange($event)\"></calendar>\r\n    </div>\r\n</div>\r\n", styles: [".date-picker{--date-picker-border-size: var(--border-size, 1px);--date-picker-border-radius: var(--border-radius, 5px);--date-picker-bg-color: var(--bg-color, #ffffff);--date-picker-border-color: var(--border-color, #ced4da);--date-picker-highlight-color: var(--highlight-color, var(--primary-color, #888888));--date-picker-highlight-text-color: var(--highlight-text-color, #ffffff);--date-picker-text-color: var(--text-color, #151515);--date-picker-text-size: var(--text-size, 16px);--date-picker-padding-vertical: 6px;--date-picker-padding-horizontal: 12px;--date-picker-padding: var(--date-picker-padding-vertical) var(--date-picker-padding-horizontal);--date-picker-btn-padding: 12px;--date-picker-btn-gap: calc(var(--date-picker-btn-padding) / 2);--date-picker-btn-color: white;--date-picker-btn-valid-color: rgba(200, 255, 200, .7);--date-picker-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--date-picker-text-size);padding:var(--date-picker-padding);background:var(--date-picker-bg-color);color:var(--date-picker-text-color);border:var(--date-picker-border-size) solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius)}.date-picker *{box-sizing:border-box}.date-picker .date-picker-input{background:var(--date-picker-bg-color);font-size:var(--date-picker-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.date-picker .date-picker-input::-webkit-calendar-picker-indicator{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-clear-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-inner-spin-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-buttons{display:flex;justify-content:flex-end;position:absolute;aspect-ratio:2/1;top:0;bottom:0;right:0;overflow:hidden}.date-picker .date-picker-buttons>btn{max-width:50%}.date-picker.disabled{opacity:.75}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }, { kind: "component", type: CalendarComponent, selector: "calendar" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "date-picker", providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }
-                    ], template: "@let id = testId();\r\n<div class=\"date-picker\"\r\n     drop-down\r\n     [closeInside]=\"false\"\r\n     [autoPlacement]=\"autoPlacement\"\r\n     [ngClass]=\"{disabled: disabled()}\"\r\n     #pickerDropdown=\"dropdown\">\r\n    <input class=\"date-picker-input\"\r\n           [attr.data-testid]=\"id\"\r\n           [type]=\"strict() ? 'date' : 'text'\"\r\n           [value]=\"inputValue()\"\r\n           (focus)=\"onFocus()\"\r\n           (blur)=\"onBlur($event)\"/>\r\n    <div class=\"date-picker-buttons\">\r\n        @if (value()) {\r\n            <btn [attr.data-testid]=\"id + '-clear'\"\r\n                 type=\"transparent\"\r\n                 icon=\"close\" (click)=\"clear()\"></btn>\r\n        }\r\n        <btn [attr.data-testid]=\"id + '-open-picker'\"\r\n             type=\"transparent\"\r\n             icon=\"calendar-days\" dropdownToggle></btn>\r\n    </div>\r\n    <div *dropdownContent>\r\n        <calendar [testId]=\"id + '-picker'\"\r\n                  [min]=\"min()\"\r\n                  [max]=\"max()\"\r\n                  [disabledDates]=\"disabledDates()\"\r\n                  [disabledDays]=\"disabledDays()\"\r\n                  [disabled]=\"disabled()\"\r\n                  [strict]=\"strict()\"\r\n                  [value]=\"value()\"\r\n                  (valueChange)=\"onPickerChange($event)\"></calendar>\r\n    </div>\r\n</div>\r\n", styles: [".date-picker{--date-picker-border-size: var(--border-size, 1px);--date-picker-border-radius: var(--border-radius, 5px);--date-picker-bg-color: var(--bg-color, #ffffff);--date-picker-border-color: var(--border-color, #ced4da);--date-picker-highlight-color: var(--highlight-color, var(--primary-color, #888888));--date-picker-highlight-text-color: var(--highlight-text-color, #ffffff);--date-picker-text-color: var(--text-color, #151515);--date-picker-text-size: var(--text-size, 16px);--date-picker-padding-vertical: 6px;--date-picker-padding-horizontal: 12px;--date-picker-padding: var(--date-picker-padding-vertical) var(--date-picker-padding-horizontal);--date-picker-btn-padding: 12px;--date-picker-btn-gap: calc(var(--date-picker-btn-padding) / 2);--date-picker-btn-color: white;--date-picker-btn-valid-color: rgba(200, 255, 200, .7);--date-picker-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--date-picker-text-size);padding:var(--date-picker-padding);background:var(--date-picker-bg-color);color:var(--date-picker-text-color);border:var(--date-picker-border-size) solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius)}.date-picker *{box-sizing:border-box}.date-picker .date-picker-input{background:var(--date-picker-bg-color);font-size:var(--date-picker-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.date-picker .date-picker-input::-webkit-calendar-picker-indicator{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-clear-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-inner-spin-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-buttons{display:flex;justify-content:flex-end;position:absolute;aspect-ratio:2/1;top:0;bottom:0;right:0;overflow:hidden}.date-picker .date-picker-buttons>btn{max-width:50%}.date-picker.disabled{opacity:.75}.date-picker.disabled .chips-button{padding-right:var(--date-picker-btn-padding)}\n"] }]
+                    ], template: "@let id = testId();\r\n@let isDisabled = disabled();\r\n<div class=\"date-picker\"\r\n     drop-down\r\n     [closeInside]=\"false\"\r\n     [autoPlacement]=\"autoPlacement\"\r\n     [ngClass]=\"{disabled: isDisabled}\"\r\n     #pickerDropdown=\"dropdown\">\r\n    <input class=\"date-picker-input\"\r\n           [attr.data-testid]=\"id\"\r\n           [disabled]=\"isDisabled\"\r\n           [type]=\"strict() ? 'date' : 'text'\"\r\n           [value]=\"inputValue()\"\r\n           (focus)=\"onFocus()\"\r\n           (blur)=\"onBlur($event)\"/>\r\n    @if (!isDisabled) {\r\n        <div class=\"date-picker-buttons\">\r\n            @if (value()) {\r\n                <btn [attr.data-testid]=\"id + '-clear'\"\r\n                     type=\"transparent\"\r\n                     icon=\"close\" (click)=\"clear()\"></btn>\r\n            }\r\n            <btn [attr.data-testid]=\"id + '-open-picker'\"\r\n                 type=\"transparent\"\r\n                 icon=\"calendar-days\" dropdownToggle></btn>\r\n        </div>\r\n    }\r\n    <div *dropdownContent>\r\n        <calendar [testId]=\"id + '-picker'\"\r\n                  [min]=\"min()\"\r\n                  [max]=\"max()\"\r\n                  [disabledDates]=\"disabledDates()\"\r\n                  [disabledDays]=\"disabledDays()\"\r\n                  [disabled]=\"disabled()\"\r\n                  [strict]=\"strict()\"\r\n                  [value]=\"value()\"\r\n                  (valueChange)=\"onPickerChange($event)\"></calendar>\r\n    </div>\r\n</div>\r\n", styles: [".date-picker{--date-picker-border-size: var(--border-size, 1px);--date-picker-border-radius: var(--border-radius, 5px);--date-picker-bg-color: var(--bg-color, #ffffff);--date-picker-border-color: var(--border-color, #ced4da);--date-picker-highlight-color: var(--highlight-color, var(--primary-color, #888888));--date-picker-highlight-text-color: var(--highlight-text-color, #ffffff);--date-picker-text-color: var(--text-color, #151515);--date-picker-text-size: var(--text-size, 16px);--date-picker-padding-vertical: 6px;--date-picker-padding-horizontal: 12px;--date-picker-padding: var(--date-picker-padding-vertical) var(--date-picker-padding-horizontal);--date-picker-btn-padding: 12px;--date-picker-btn-gap: calc(var(--date-picker-btn-padding) / 2);--date-picker-btn-color: white;--date-picker-btn-valid-color: rgba(200, 255, 200, .7);--date-picker-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--date-picker-text-size);padding:var(--date-picker-padding);background:var(--date-picker-bg-color);color:var(--date-picker-text-color);border:var(--date-picker-border-size) solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius)}.date-picker *{box-sizing:border-box}.date-picker .date-picker-input{background:var(--date-picker-bg-color);font-size:var(--date-picker-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.date-picker .date-picker-input::-webkit-calendar-picker-indicator{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-clear-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-inner-spin-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-buttons{display:flex;justify-content:flex-end;position:absolute;aspect-ratio:2/1;top:0;bottom:0;right:0;overflow:hidden}.date-picker .date-picker-buttons>btn{max-width:50%}.date-picker.disabled{opacity:.75}\n"] }]
         }] });
 
 class DropListComponent {