@zambon-dev/library 1.2.0 → 1.3.2

package/fesm2022/zambon-dev-library.mjs

@@ -991,6 +991,7 @@ class SidebarMenu {
     label = '';
     isSelected = false;
     parent = null;
+    region;
     url;
     constructor(options = {}) {
         Object.assign(this, options);
@@ -1239,7 +1240,7 @@ class FormInputComponent extends BaseComponent {
         this.fixedValueChanged.emit(this.fixedValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: FormInputComponent, isStandalone: true, selector: "lib-form-input", inputs: { autofocus: "autofocus", controlName: "controlName", disabledControlName: "disabledControlName", displayReadOnlyAsDisabled: "displayReadOnlyAsDisabled", fixedValue: "fixedValue", format: "format", invalid: "invalid", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", readOnly: "readOnly", rows: "rows", step: "step", type: "type" }, outputs: { blur: "blur", change: "change", fixedValueChanged: "fixedValueChanged", input: "input", focus: "focus" }, host: { properties: { "class.full-height": "isFullHeight" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode;else disabledControl\">\n    <ng-container [ngSwitch]=\"type\">\n        \n        <textarea *ngSwitchCase=\"'textarea'\"\n        [attr.autofocus]=\"autofocus ? true : null\"\n        [attr.maxLength]=\"maxLength ?? null\"\n        [attr.rows]=\"rows\"\n        [class.invalid]=\"invalid\"\n        [formControlName]=\"controlName\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (input)=\"onInput()\">\n        </textarea>\n\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <input *ngIf=\"isFormControl; else fixedCheckbox\"\n            class=\"switch\"\n            type=\"checkbox\"\n            [attr.autofocus]=\"autofocus ? true : null\"\n            [class.invalid]=\"invalid\"\n            [formControlName]=\"controlName\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedCheckbox>\n                <input\n                class=\"switch\"\n                type=\"checkbox\"\n                [(ngModel)]=\"fixedValue\"\n                [attr.readonly]=\"true\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (change)=\"onChange($event)\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n\n        <ng-container *ngSwitchDefault>\n            <input *ngIf=\"isFormControl; else fixedTextBox\"\n            [attr.autofocus]=\"autofocus ? true : null\"\n            [attr.maxLength]=\"maxLength ?? null\"\n            [attr.min]=\"minAttributeValue\"\n            [attr.readonly]=\"readOnly ? true : null\"\n            [attr.step]=\"stepAttributeValue\"\n            [class.invalid]=\"invalid\"\n            [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n            [formControlName]=\"controlName\"\n            [type]=\"type\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedTextBox>\n                <input\n                type=\"text\"\n                [attr.maxLength]=\"maxLength ?? null\"\n                [attr.min]=\"minAttributeValue\"\n                [attr.readonly]=\"true\"\n                [attr.step]=\"stepAttributeValue\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModel]=\"type === 'date' || type === 'datetime-local' ? (fixedValue | date: format) : ( type === 'number' ? (fixedValue | number) : fixedValue )\" \n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n    </ng-container>\n</ng-container>\n\n<ng-template #disabledControl>\n    <ng-container [ngSwitch]=\"type\">\n        <label *ngSwitchCase=\"'checkbox'\">\n            <i [ngClass]=\"fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value ? 'fa-solid fa-square-check' : 'fa-regular fa-square'\"></i>\n        </label>\n\n        <label *ngSwitchCase=\"'date'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </label>\n\n        <label *ngSwitchCase=\"'datetime-local'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </label>\n\n        <label *ngSwitchCase=\"'number'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n        </label>\n\n        <label class=\"text\" *ngSwitchDefault>{{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value }}</label>\n    </ng-container>\n</ng-template>\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\">\n    \n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: FormInputComponent, isStandalone: true, selector: "lib-form-input", inputs: { autofocus: "autofocus", controlName: "controlName", disabledControlName: "disabledControlName", displayReadOnlyAsDisabled: "displayReadOnlyAsDisabled", fixedValue: "fixedValue", format: "format", invalid: "invalid", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", readOnly: "readOnly", rows: "rows", step: "step", type: "type" }, outputs: { blur: "blur", change: "change", fixedValueChanged: "fixedValueChanged", input: "input", focus: "focus" }, host: { properties: { "class.full-height": "isFullHeight", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode;else disabledControl\">\n    <ng-container [ngSwitch]=\"type\">\n        \n        <textarea *ngSwitchCase=\"'textarea'\"\n        [attr.autofocus]=\"autofocus ? true : null\"\n        [attr.maxLength]=\"maxLength ?? null\"\n        [attr.rows]=\"rows\"\n        [class.invalid]=\"invalid\"\n        [formControlName]=\"controlName\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (input)=\"onInput()\">\n        </textarea>\n\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <input *ngIf=\"isFormControl; else fixedCheckbox\"\n            class=\"switch\"\n            type=\"checkbox\"\n            [attr.autofocus]=\"autofocus ? true : null\"\n            [class.invalid]=\"invalid\"\n            [formControlName]=\"controlName\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedCheckbox>\n                <input\n                class=\"switch\"\n                type=\"checkbox\"\n                [(ngModel)]=\"fixedValue\"\n                [attr.readonly]=\"true\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (change)=\"onChange($event)\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n\n        <ng-container *ngSwitchDefault>\n            <input *ngIf=\"isFormControl; else fixedTextBox\"\n            [attr.autofocus]=\"autofocus ? true : null\"\n            [attr.maxLength]=\"maxLength ?? null\"\n            [attr.min]=\"minAttributeValue\"\n            [attr.readonly]=\"readOnly ? true : null\"\n            [attr.step]=\"stepAttributeValue\"\n            [class.invalid]=\"invalid\"\n            [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n            [formControlName]=\"controlName\"\n            [type]=\"type\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedTextBox>\n                <input\n                type=\"text\"\n                [attr.maxLength]=\"maxLength ?? null\"\n                [attr.min]=\"minAttributeValue\"\n                [attr.readonly]=\"true\"\n                [attr.step]=\"stepAttributeValue\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModel]=\"type === 'date' || type === 'datetime-local' ? (fixedValue | date: format) : ( type === 'number' ? (fixedValue | number) : fixedValue )\" \n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n    </ng-container>\n</ng-container>\n\n<ng-template #disabledControl>\n    <ng-container [ngSwitch]=\"type\">\n        <label *ngSwitchCase=\"'checkbox'\">\n            <i [ngClass]=\"fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value ? 'fa-solid fa-square-check' : 'fa-regular fa-square'\"></i>\n        </label>\n\n        <label *ngSwitchCase=\"'date'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </label>\n\n        <label *ngSwitchCase=\"'datetime-local'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </label>\n\n        <label *ngSwitchCase=\"'number'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n        </label>\n\n        <label class=\"text\" *ngSwitchDefault>{{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value }}</label>\n    </ng-container>\n</ng-template>\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\">\n    \n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormInputComponent, decorators: [{
             type: Component,
@@ -1251,7 +1252,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgSwitchCase,
                         ReactiveFormsModule,
                     ], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], host: {
-                        '[class.full-height]': 'isFullHeight'
+                        '[class.full-height]': 'isFullHeight',
+                        // Clears a stray `type` attribute for the same reason as FormInputGroupComponent — see the
+                        // comment there. Applies when a consumer sets `type` on `lib-form-input` directly.
+                        '[attr.type]': 'null'
                     }, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode;else disabledControl\">\n    <ng-container [ngSwitch]=\"type\">\n        \n        <textarea *ngSwitchCase=\"'textarea'\"\n        [attr.autofocus]=\"autofocus ? true : null\"\n        [attr.maxLength]=\"maxLength ?? null\"\n        [attr.rows]=\"rows\"\n        [class.invalid]=\"invalid\"\n        [formControlName]=\"controlName\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (input)=\"onInput()\">\n        </textarea>\n\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <input *ngIf=\"isFormControl; else fixedCheckbox\"\n            class=\"switch\"\n            type=\"checkbox\"\n            [attr.autofocus]=\"autofocus ? true : null\"\n            [class.invalid]=\"invalid\"\n            [formControlName]=\"controlName\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedCheckbox>\n                <input\n                class=\"switch\"\n                type=\"checkbox\"\n                [(ngModel)]=\"fixedValue\"\n                [attr.readonly]=\"true\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (change)=\"onChange($event)\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n\n        <ng-container *ngSwitchDefault>\n            <input *ngIf=\"isFormControl; else fixedTextBox\"\n            [attr.autofocus]=\"autofocus ? true : null\"\n            [attr.maxLength]=\"maxLength ?? null\"\n            [attr.min]=\"minAttributeValue\"\n            [attr.readonly]=\"readOnly ? true : null\"\n            [attr.step]=\"stepAttributeValue\"\n            [class.invalid]=\"invalid\"\n            [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n            [formControlName]=\"controlName\"\n            [type]=\"type\"\n            (blur)=\"onBlur()\"\n            (focus)=\"onFocus()\"\n            (input)=\"onInput()\" />\n\n            <ng-template #fixedTextBox>\n                <input\n                type=\"text\"\n                [attr.maxLength]=\"maxLength ?? null\"\n                [attr.min]=\"minAttributeValue\"\n                [attr.readonly]=\"true\"\n                [attr.step]=\"stepAttributeValue\"\n                [class.invalid]=\"invalid\"\n                [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n                [disabled]=\"isDisabled\"\n                [ngModel]=\"type === 'date' || type === 'datetime-local' ? (fixedValue | date: format) : ( type === 'number' ? (fixedValue | number) : fixedValue )\" \n                [ngModelOptions]=\"{ standalone: true }\"\n                (blur)=\"onBlur()\"\n                (focus)=\"onFocus()\"\n                (input)=\"onInput()\"\n                (ngModelChange)=\"onValueChanged($event)\" />\n            </ng-template>\n        </ng-container>\n\n    </ng-container>\n</ng-container>\n\n<ng-template #disabledControl>\n    <ng-container [ngSwitch]=\"type\">\n        <label *ngSwitchCase=\"'checkbox'\">\n            <i [ngClass]=\"fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value ? 'fa-solid fa-square-check' : 'fa-regular fa-square'\"></i>\n        </label>\n\n        <label *ngSwitchCase=\"'date'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </label>\n\n        <label *ngSwitchCase=\"'datetime-local'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n        </label>\n\n        <label *ngSwitchCase=\"'number'\">\n            {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n        </label>\n\n        <label class=\"text\" *ngSwitchDefault>{{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value }}</label>\n    </ng-container>\n</ng-template>\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\">\n    \n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text{white-space:pre-wrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { autofocus: [{
                 type: Input
@@ -1373,7 +1377,7 @@ class FormInputGroupComponent extends BaseComponent {
         return Object.keys(this.validations).indexOf(errorKey) >= 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: FormInputGroupComponent, isStandalone: true, selector: "lib-form-input-group", inputs: { autofocus: "autofocus", alignContent: "alignContent", controlName: "controlName", fixedValue: "fixedValue", format: "format", label: "label", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", notes: "notes", readOnly: "readOnly", rows: "rows", showLabel: "showLabel", step: "step", template: "template", type: "type", validations: "validations" }, host: { properties: { "class.full-height": "isFullHeight" } }, usesInheritance: true, ngImport: i0, template: "<label *ngIf=\"showLabel\"\n[attr.for]=\"controlName\">\n    {{ label | translate }}:\n</label>\n\n<div class=\"field\"\n[class.col-span-2]=\"!showLabel\"\n[ngStyle]=\"{ 'align-content': alignContent }\" >\n    <div class=\"loading\" *ngIf=\"(loadingField || (formService.loading && formService.model === null)); else content\">\n        <div></div>\n    </div>\n\n    <ng-template #content>\n        <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\">\n        </ng-container>\n        \n        <div class=\"validations\" [class.show]=\"formControl?.invalid\" *ngIf=\"formControl?.touched\">\n            <ng-container *ngFor=\"let error of formControl?.errors | keyvalue\">\n                <span *ngIf=\"hasValidation(error.key)\">{{ validations[error.key] | translate }}</span>\n                <ng-template #defaultValidationError>{{ error.key }}</ng-template>\n            </ng-container>\n        </div>\n        \n        <ng-template #defaultTemplate>\n            <lib-form-input #formInput\n            [autofocus]=\"autofocus\"\n            [controlName]=\"controlName\"\n            [fixedValue]=\"fixedValue\"\n            [format]=\"format\"\n            [isDisabled]=\"isDisabled\"\n            [isFullHeight]=\"isFullHeight\"\n            [min]=\"min\"\n            [maxLength]=\"maxLength\"\n            [readOnly]=\"readOnly\"\n            [rows]=\"rows\"\n            [step]=\"step\"\n            [type]=\"type\">\n            </lib-form-input>\n        </ng-template>\n        \n        <span class=\"text-sm italic\" *ngIf=\"hasNotes\">\n            *{{ notes | translate }}\n        </span>\n    </ng-template>\n\n</div>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid;gap:.75rem}:host.full-height{max-height:100%;overflow:auto}label{white-space:nowrap;padding-top:.25rem;padding-bottom:.25rem;text-align:right;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.field .validations{flex-basis:100%;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.field .validations.show{margin-top:.25rem}.field .validations span{display:block}.field .loading{max-width:24rem}@keyframes pulse{50%{opacity:.5}}.field .loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.field .loading *{height:.625rem;width:100%;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.field .loading *{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}\n"], dependencies: [{ kind: "component", type: FormInputComponent, selector: "lib-form-input", inputs: ["autofocus", "controlName", "disabledControlName", "displayReadOnlyAsDisabled", "fixedValue", "format", "invalid", "isDisabled", "isFullHeight", "maxLength", "min", "readOnly", "rows", "step", "type"], outputs: ["blur", "change", "fixedValueChanged", "input", "focus"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: FormInputGroupComponent, isStandalone: true, selector: "lib-form-input-group", inputs: { autofocus: "autofocus", alignContent: "alignContent", controlName: "controlName", fixedValue: "fixedValue", format: "format", label: "label", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", notes: "notes", readOnly: "readOnly", rows: "rows", showLabel: "showLabel", step: "step", template: "template", type: "type", validations: "validations" }, host: { properties: { "class.full-height": "isFullHeight", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "<label *ngIf=\"showLabel\"\n[attr.for]=\"controlName\">\n    {{ label | translate }}:\n</label>\n\n<div class=\"field\"\n[class.col-span-2]=\"!showLabel\"\n[ngStyle]=\"{ 'align-content': alignContent }\" >\n    <div class=\"loading\" *ngIf=\"(loadingField || (formService.loading && formService.model === null)); else content\">\n        <div></div>\n    </div>\n\n    <ng-template #content>\n        <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\">\n        </ng-container>\n        \n        <div class=\"validations\" [class.show]=\"formControl?.invalid\" *ngIf=\"formControl?.touched\">\n            <ng-container *ngFor=\"let error of formControl?.errors | keyvalue\">\n                <span *ngIf=\"hasValidation(error.key)\">{{ validations[error.key] | translate }}</span>\n                <ng-template #defaultValidationError>{{ error.key }}</ng-template>\n            </ng-container>\n        </div>\n        \n        <ng-template #defaultTemplate>\n            <lib-form-input #formInput\n            [autofocus]=\"autofocus\"\n            [controlName]=\"controlName\"\n            [fixedValue]=\"fixedValue\"\n            [format]=\"format\"\n            [isDisabled]=\"isDisabled\"\n            [isFullHeight]=\"isFullHeight\"\n            [min]=\"min\"\n            [maxLength]=\"maxLength\"\n            [readOnly]=\"readOnly\"\n            [rows]=\"rows\"\n            [step]=\"step\"\n            [type]=\"type\">\n            </lib-form-input>\n        </ng-template>\n        \n        <span class=\"text-sm italic\" *ngIf=\"hasNotes\">\n            *{{ notes | translate }}\n        </span>\n    </ng-template>\n\n</div>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid;gap:.75rem}:host.full-height{max-height:100%;overflow:auto}label{white-space:nowrap;padding-top:.25rem;padding-bottom:.25rem;text-align:right;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.field .validations{flex-basis:100%;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.field .validations.show{margin-top:.25rem}.field .validations span{display:block}.field .loading{max-width:24rem}@keyframes pulse{50%{opacity:.5}}.field .loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.field .loading *{height:.625rem;width:100%;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.field .loading *{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}\n"], dependencies: [{ kind: "component", type: FormInputComponent, selector: "lib-form-input", inputs: ["autofocus", "controlName", "disabledControlName", "displayReadOnlyAsDisabled", "fixedValue", "format", "invalid", "isDisabled", "isFullHeight", "maxLength", "min", "readOnly", "rows", "step", "type"], outputs: ["blur", "change", "fixedValueChanged", "input", "focus"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormInputGroupComponent, decorators: [{
             type: Component,
@@ -1386,7 +1390,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgTemplateOutlet,
                         TranslatePipe,
                     ], host: {
-                        '[class.full-height]': 'isFullHeight'
+                        '[class.full-height]': 'isFullHeight',
+                        // Angular keeps static attributes in the DOM even when a directive consumes them as an
+                        // @Input(), so `type="checkbox"` would linger on this host element — where
+                        // @tailwindcss/forms' tag-agnostic `[type="checkbox"]` base rules style the host itself as
+                        // a checkbox (1px border, white fill, height:1rem). Clearing the attribute removes the
+                        // stray box for every type while leaving the `type` @Input() untouched.
+                        '[attr.type]': 'null'
                     }, template: "<label *ngIf=\"showLabel\"\n[attr.for]=\"controlName\">\n    {{ label | translate }}:\n</label>\n\n<div class=\"field\"\n[class.col-span-2]=\"!showLabel\"\n[ngStyle]=\"{ 'align-content': alignContent }\" >\n    <div class=\"loading\" *ngIf=\"(loadingField || (formService.loading && formService.model === null)); else content\">\n        <div></div>\n    </div>\n\n    <ng-template #content>\n        <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\">\n        </ng-container>\n        \n        <div class=\"validations\" [class.show]=\"formControl?.invalid\" *ngIf=\"formControl?.touched\">\n            <ng-container *ngFor=\"let error of formControl?.errors | keyvalue\">\n                <span *ngIf=\"hasValidation(error.key)\">{{ validations[error.key] | translate }}</span>\n                <ng-template #defaultValidationError>{{ error.key }}</ng-template>\n            </ng-container>\n        </div>\n        \n        <ng-template #defaultTemplate>\n            <lib-form-input #formInput\n            [autofocus]=\"autofocus\"\n            [controlName]=\"controlName\"\n            [fixedValue]=\"fixedValue\"\n            [format]=\"format\"\n            [isDisabled]=\"isDisabled\"\n            [isFullHeight]=\"isFullHeight\"\n            [min]=\"min\"\n            [maxLength]=\"maxLength\"\n            [readOnly]=\"readOnly\"\n            [rows]=\"rows\"\n            [step]=\"step\"\n            [type]=\"type\">\n            </lib-form-input>\n        </ng-template>\n        \n        <span class=\"text-sm italic\" *ngIf=\"hasNotes\">\n            *{{ notes | translate }}\n        </span>\n    </ng-template>\n\n</div>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid;gap:.75rem}:host.full-height{max-height:100%;overflow:auto}label{white-space:nowrap;padding-top:.25rem;padding-bottom:.25rem;text-align:right;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.field .validations{flex-basis:100%;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.field .validations.show{margin-top:.25rem}.field .validations span{display:block}.field .loading{max-width:24rem}@keyframes pulse{50%{opacity:.5}}.field .loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.field .loading *{height:.625rem;width:100%;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.field .loading *{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { autofocus: [{
                 type: Input
@@ -2125,7 +2135,7 @@ class DataGridRowComponent extends BaseComponent {
         this.selected = this.isRowDataSelected;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: DataGridRowComponent, isStandalone: true, selector: "lib-data-grid-row", inputs: { disabled: "disabled", isFirstRow: "isFirstRow", rowData: "rowData" }, outputs: { selectionResized: "selectionResized" }, host: { listeners: { "click": "setFocus()" }, properties: { "class.focused": "dataGridDataset.focusedRow === rowData", "class.selected": "dataGridDataset.isKeySelected(rowKey)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dataGridDataset.configs.multiSelect\"\nclass=\"cell\"\n(click)=\"onToggleSelection()\"\n(onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\"\n    type=\"checkbox\"\n    [attr.disabled]=\"disabled\"\n    [(ngModel)]=\"selected\" />\n</div> \n\n<div #cell\n*ngFor=\"let column of columns; index as i\"\nclass=\"cell\"\n[class.disabled]=\"disabled\"\n[ngClass]=\"column.customClass\">\n    <div *ngIf=\"isFirstRow\"\n    class=\"spacer\"\n    (onResize)=\"onResize(i, $event)\"></div>\n\n    <ng-container *ngTemplateOutlet=\"column.template ? column.template : simpleTemplate; context: { rowData: rowData, column: column }\">\n    </ng-container>\n</div>\n\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\n    <span>{{ getValue(column.field) }}</span>\n</ng-template>", styles: [":host{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cell{position:relative;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell.disabled{pointer-events:none;cursor:default;overflow:hidden;text-overflow:ellipsis;opacity:.6}.cell input{vertical-align:super}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgxResizeObserverModule }, { kind: "directive", type: i2.NgxResizeObserverDirective, selector: "[onResize]", inputs: ["resizeBoxModel"], outputs: ["onResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: DataGridRowComponent, isStandalone: true, selector: "lib-data-grid-row", inputs: { disabled: "disabled", isFirstRow: "isFirstRow", rowData: "rowData" }, outputs: { selectionResized: "selectionResized" }, host: { listeners: { "click": "setFocus()" }, properties: { "class.focused": "dataGridDataset.focusedRow === rowData", "class.selected": "dataGridDataset.isKeySelected(rowKey)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dataGridDataset.configs.multiSelect\"\nclass=\"cell selection\"\n(click)=\"onToggleSelection()\"\n(onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\"\n    type=\"checkbox\"\n    [attr.disabled]=\"disabled\"\n    [(ngModel)]=\"selected\" />\n</div> \n\n<div #cell\n*ngFor=\"let column of columns; index as i\"\nclass=\"cell\"\n[class.disabled]=\"disabled\"\n[ngClass]=\"column.customClass\">\n    <div *ngIf=\"isFirstRow\"\n    class=\"spacer\"\n    (onResize)=\"onResize(i, $event)\"></div>\n\n    <ng-container *ngTemplateOutlet=\"column.template ? column.template : simpleTemplate; context: { rowData: rowData, column: column }\">\n    </ng-container>\n</div>\n\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\n    <span>{{ getValue(column.field) }}</span>\n</ng-template>", styles: [":host{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cell{position:relative;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell.disabled{pointer-events:none;cursor:default;overflow:hidden;text-overflow:ellipsis;opacity:.6}.cell input{vertical-align:super}.cell.selection{display:flex;align-items:center}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgxResizeObserverModule }, { kind: "directive", type: i2.NgxResizeObserverDirective, selector: "[onResize]", inputs: ["resizeBoxModel"], outputs: ["onResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DataGridRowComponent, decorators: [{
             type: Component,
@@ -2139,7 +2149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgFor,
                         NgTemplateOutlet,
                         NgxResizeObserverModule,
-                    ], template: "<div *ngIf=\"dataGridDataset.configs.multiSelect\"\nclass=\"cell\"\n(click)=\"onToggleSelection()\"\n(onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\"\n    type=\"checkbox\"\n    [attr.disabled]=\"disabled\"\n    [(ngModel)]=\"selected\" />\n</div> \n\n<div #cell\n*ngFor=\"let column of columns; index as i\"\nclass=\"cell\"\n[class.disabled]=\"disabled\"\n[ngClass]=\"column.customClass\">\n    <div *ngIf=\"isFirstRow\"\n    class=\"spacer\"\n    (onResize)=\"onResize(i, $event)\"></div>\n\n    <ng-container *ngTemplateOutlet=\"column.template ? column.template : simpleTemplate; context: { rowData: rowData, column: column }\">\n    </ng-container>\n</div>\n\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\n    <span>{{ getValue(column.field) }}</span>\n</ng-template>", styles: [":host{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cell{position:relative;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell.disabled{pointer-events:none;cursor:default;overflow:hidden;text-overflow:ellipsis;opacity:.6}.cell input{vertical-align:super}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"] }]
+                    ], template: "<div *ngIf=\"dataGridDataset.configs.multiSelect\"\nclass=\"cell selection\"\n(click)=\"onToggleSelection()\"\n(onResize)=\"onResizeSelection($event)\">\n    <input class=\"form-input\"\n    type=\"checkbox\"\n    [attr.disabled]=\"disabled\"\n    [(ngModel)]=\"selected\" />\n</div> \n\n<div #cell\n*ngFor=\"let column of columns; index as i\"\nclass=\"cell\"\n[class.disabled]=\"disabled\"\n[ngClass]=\"column.customClass\">\n    <div *ngIf=\"isFirstRow\"\n    class=\"spacer\"\n    (onResize)=\"onResize(i, $event)\"></div>\n\n    <ng-container *ngTemplateOutlet=\"column.template ? column.template : simpleTemplate; context: { rowData: rowData, column: column }\">\n    </ng-container>\n</div>\n\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\n    <span>{{ getValue(column.field) }}</span>\n</ng-template>", styles: [":host{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cell{position:relative;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell.disabled{pointer-events:none;cursor:default;overflow:hidden;text-overflow:ellipsis;opacity:.6}.cell input{vertical-align:super}.cell.selection{display:flex;align-items:center}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], isFirstRow: [{
@@ -2793,9 +2803,23 @@ class MultiEditorComponent extends ModalComponent {
         const fakeNewID = (Math.floor(Math.random() * (999999 - 100000)) + 100000) * -1;
         const newModel = this.multiEditorDataset.newData(fakeNewID);
         if (!!newModel) {
+            // Read before addNewRow: it stamps the grid's internal key onto the row, so afterwards even a
+            // `{}` model reports one own key and the check below would never skip.
+            const hasPrefilledValues = Object.keys(newModel).length > 0;
             this.multiEditorDataset.storeFakeIDGenerated(fakeNewID);
             this.dataGridDataset.addNewRow(newModel);
             const newKey = this.dataGridDataset.loadedKeys[this.dataGridDataset.loadedKeys.length - 1];
+            // Record whatever `newData` pre-filled. `selectRow` below reaches the form through
+            // reset() + patchValue(), which leaves it pristine, and the `valueChanges` handler is gated on
+            // `formGroup.dirty` — so a row the user never types into is never recorded. Without this, values
+            // returned by `newData` show up in the grid but are dropped from the save batch, and adding
+            // several rows while only editing the last silently discards the earlier ones.
+            //
+            // Skipped for a value-less model (`{}`, the blank-row convention) so implementations that
+            // pre-fill nothing keep sending nothing for a row that was added and never touched.
+            if (hasPrefilledValues) {
+                this.multiEditorDataset.updateValues(newKey, newModel);
+            }
             this.dataGridDataset.selectRow(newKey);
         }
     }
@@ -3089,8 +3113,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
 class SidebarItemComponent extends BaseComponent {
     //#region ViewChilds, Inputs, Outputs
     menuContainer;
-    menu;
+    isLast = false;
     level = 0;
+    menu;
     //#endregion
     //#region Variables
     hasFailed = false;
@@ -3191,7 +3216,7 @@ class SidebarItemComponent extends BaseComponent {
         this._childHeight = this.getChildHeight(this.menu);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { menu: "menu", level: "level" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\n    <div #menuContainer\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    (click)=\"onSelectItem()\">\n        <a>\n            <i *ngIf=\"hasIcon\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn\"\n        [menu]=\"child\"\n        [level]=\"level+1\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.first-level:before{position:absolute;top:0;left:0;bottom:0;z-index:10;width:0px;--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-content: \"\";content:var(--tw-content);transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:width}:host.first-level.selected:before{width:4px}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}li>div:hover{background-color:#ffffff1a}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["menu", "level"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { isLast: "isLast", level: "level", menu: "menu" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.last-child": "isLast", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\n    <div #menuContainer\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    (click)=\"onSelectItem()\">\n        <a>\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\n        [menu]=\"child\"\n        [level]=\"level+1\"\n        [isLast]=\"last\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarItemComponent, decorators: [{
             type: Component,
@@ -3204,15 +3229,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         '[class.active]': 'isActive',
                         '[class.expanded]': '!isCollapsed',
                         '[class.first-level]': 'level === 0',
+                        '[class.last-child]': 'isLast',
                         '[class.selected]': 'isSelected',
-                    }, template: "<li>\n    <div #menuContainer\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    (click)=\"onSelectItem()\">\n        <a>\n            <i *ngIf=\"hasIcon\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn\"\n        [menu]=\"child\"\n        [level]=\"level+1\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.first-level:before{position:absolute;top:0;left:0;bottom:0;z-index:10;width:0px;--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-content: \"\";content:var(--tw-content);transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:width}:host.first-level.selected:before{width:4px}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}li>div:hover{background-color:#ffffff1a}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}\n"] }]
+                    }, template: "<li>\n    <div #menuContainer\n    [class.failed]=\"hasFailed\"\n    [class.loading]=\"isLoading\"\n    [class.parent]=\"isParent\"\n    [class.selected]=\"isSelected\"\n    (click)=\"onSelectItem()\">\n        <a>\n            <i *ngIf=\"hasIcon && level === 0\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n            <span>{{ menu.label | translate }}</span>\n        </a>\n\n        <div class=\"loading\" *ngIf=\"isParent\">\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n        </div>\n    </div>\n\n    <ul *ngIf=\"isParent\"\n    [class.open]=\"isSelected\"\n    [ngStyle]=\"{\n        'height.px': childHeight,\n        'max-height.px': childHeight\n    }\">\n        <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn; let last = last\"\n        [menu]=\"child\"\n        [level]=\"level+1\"\n        [isLast]=\"last\">\n        </lib-sidebar-item>\n    </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuContainer: [{
                 type: ViewChild,
                 args: ['menuContainer']
-            }], menu: [{
+            }], isLast: [{
                 type: Input
             }], level: [{
                 type: Input
+            }], menu: [{
+                type: Input
             }] } });
 
 class SidebarComponent extends BaseComponent {
@@ -3254,6 +3282,7 @@ class SidebarComponent extends BaseComponent {
     configLoadingText = this.sidebarConfigs.loadingText;
     hasFailed = false;
     menus = [];
+    regions = [];
     sidebarService = inject(SidebarService);
     wasClickedOutside = false;
     //#endregion
@@ -3282,7 +3311,10 @@ class SidebarComponent extends BaseComponent {
         this.sidebarService.loadRoot()
             .pipe(take(1))
             .subscribe({
-            next: (menus) => this.menus = menus,
+            next: (menus) => {
+                this.menus = menus;
+                this.regions = this.groupIntoRegions(menus);
+            },
             error: () => this.hasFailed = true
         });
     }
@@ -3303,6 +3335,25 @@ class SidebarComponent extends BaseComponent {
     trackByFn(_index, item) {
         return item.id;
     }
+    trackByRegion(_index, region) {
+        return region.name ?? '';
+    }
+    // Group top-level menus into regions by their optional `region` label, preserving
+    // first-appearance order. Ungrouped menus fall into a single header-less region.
+    groupIntoRegions(menus) {
+        const regions = [];
+        const byName = new Map();
+        menus.forEach((menu) => {
+            let region = byName.get(menu.region);
+            if (!region) {
+                region = { name: menu.region, items: [] };
+                byName.set(menu.region, region);
+                regions.push(region);
+            }
+            region.items.push(menu);
+        });
+        return regions;
+    }
     deactivate() {
         if (this.sidebarService.isActive) {
             this.sidebarService.isActive = false;
@@ -3315,7 +3366,7 @@ class SidebarComponent extends BaseComponent {
                 || this.sidebarService.isCollapsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", host: { listeners: { "body:mousedown": "onBodyMouseDown($event)", "body:mouseup": "onBodyMouseUp($event)", "document:keydown.escape": "onDocumentKeyDown($event)", "window:resize": "onResize($event)" }, properties: { "class.active": "isActive", "class.expanded": "!isCollapsed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"sidebar-toolbar\">\n    <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n        <i class=\"fa-solid\"\n            [class.fa-angle-left]=\"!isCollapsed\"\n            [class.fa-angle-right]=\"isCollapsed\"></i>\n    </button>\n</div>\n\n<nav>\n    <ul *ngIf=\"!isLoading; else loading\">\n        <lib-sidebar-item *ngFor=\"let menu of menus; trackBy: trackByFn\"\n        [menu]=\"menu\">\n        </lib-sidebar-item>\n\n        <div class=\"error\" *ngIf=\"hasFailed\">\n            <div>\n                <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n                <span>{{ configErrorText }}</span>\n            </div>\n        </div>\n    </ul>\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n\n<ng-template #loading>\n    <div class=\"loading\">\n        <div>\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n            <span>{{ configLoadingText }}</span>\n        </div>\n    </div>\n</ng-template>", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;--tw-bg-opacity: 1;background-color:rgb(0 67 114 / var(--tw-bg-opacity, 1));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:#d1d5db99;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width: 480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:#002f50cc}ul lib-sidebar-item,.loading,.error{font-weight:500;--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["menu", "level"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", host: { listeners: { "body:mousedown": "onBodyMouseDown($event)", "body:mouseup": "onBodyMouseUp($event)", "document:keydown.escape": "onDocumentKeyDown($event)", "window:resize": "onResize($event)" }, properties: { "class.active": "isActive", "class.expanded": "!isCollapsed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"sidebar-toolbar\">\n    <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n        <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\n    </button>\n</div>\n\n<nav>\n    <ul *ngIf=\"!isLoading; else loading\">\n        <ng-container *ngFor=\"let region of regions; trackBy: trackByRegion\">\n            <li class=\"sidebar-region-header\" *ngIf=\"region.name\">\n                <span>{{ region.name | translate }}</span>\n            </li>\n\n            <lib-sidebar-item *ngFor=\"let menu of region.items; trackBy: trackByFn\"\n            [menu]=\"menu\">\n            </lib-sidebar-item>\n        </ng-container>\n\n        <div class=\"error\" *ngIf=\"hasFailed\">\n            <div>\n                <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n                <span>{{ configErrorText }}</span>\n            </div>\n        </div>\n    </ul>\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n\n<ng-template #loading>\n    <div class=\"loading\">\n        <div>\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n            <span>{{ configLoadingText }}</span>\n        </div>\n    </div>\n</ng-template>", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;background-color:var(--sidebar-bg);border-radius:var(--sidebar-radius, 1.25rem);backdrop-filter:blur(var(--sidebar-blur, 16px));-webkit-backdrop-filter:blur(var(--sidebar-blur, 16px));box-shadow:var(--sidebar-shadow, 0 10px 40px -12px rgba(0, 0, 0, .45));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem;rotate:0deg;transition:rotate var(--sidebar-animation-duration) ease-in-out}.sidebar-toolbar .sidebar-toggle i.is-collapsed{rotate:-180deg}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--sidebar-text-muted);opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width: 480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:var(--sidebar-nav-bg)}ul lib-sidebar-item,.loading,.error{font-weight:500;color:var(--sidebar-text)}.sidebar-region-header{position:relative;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-left:1rem;padding-right:1rem;height:2rem;color:var(--sidebar-text-muted);transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header span{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header:after{content:\"\";position:absolute;left:50%;top:50%;opacity:0;width:1.75rem;height:1px;transform:translate(-50%,-50%);background:var(--sidebar-text-muted);transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}:host(:not(.expanded):not(.active)) .sidebar-region-header{height:1.25rem}:host(:not(.expanded):not(.active)) .sidebar-region-header span{opacity:0}:host(:not(.expanded):not(.active)) .sidebar-region-header:after{opacity:1}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
@@ -3324,10 +3375,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         NgFor,
                         NgIf,
                         SidebarItemComponent,
+                        TranslatePipe,
                     ], host: {
                         '[class.active]': 'isActive',
                         '[class.expanded]': '!isCollapsed',
-                    }, template: "<div class=\"sidebar-toolbar\">\n    <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n        <i class=\"fa-solid\"\n            [class.fa-angle-left]=\"!isCollapsed\"\n            [class.fa-angle-right]=\"isCollapsed\"></i>\n    </button>\n</div>\n\n<nav>\n    <ul *ngIf=\"!isLoading; else loading\">\n        <lib-sidebar-item *ngFor=\"let menu of menus; trackBy: trackByFn\"\n        [menu]=\"menu\">\n        </lib-sidebar-item>\n\n        <div class=\"error\" *ngIf=\"hasFailed\">\n            <div>\n                <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n                <span>{{ configErrorText }}</span>\n            </div>\n        </div>\n    </ul>\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n\n<ng-template #loading>\n    <div class=\"loading\">\n        <div>\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n            <span>{{ configLoadingText }}</span>\n        </div>\n    </div>\n</ng-template>", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;--tw-bg-opacity: 1;background-color:rgb(0 67 114 / var(--tw-bg-opacity, 1));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:#d1d5db99;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width: 480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:#002f50cc}ul lib-sidebar-item,.loading,.error{font-weight:500;--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"] }]
+                    }, template: "<div class=\"sidebar-toolbar\">\n    <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n        <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\n    </button>\n</div>\n\n<nav>\n    <ul *ngIf=\"!isLoading; else loading\">\n        <ng-container *ngFor=\"let region of regions; trackBy: trackByRegion\">\n            <li class=\"sidebar-region-header\" *ngIf=\"region.name\">\n                <span>{{ region.name | translate }}</span>\n            </li>\n\n            <lib-sidebar-item *ngFor=\"let menu of region.items; trackBy: trackByFn\"\n            [menu]=\"menu\">\n            </lib-sidebar-item>\n        </ng-container>\n\n        <div class=\"error\" *ngIf=\"hasFailed\">\n            <div>\n                <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n                <span>{{ configErrorText }}</span>\n            </div>\n        </div>\n    </ul>\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n\n<ng-template #loading>\n    <div class=\"loading\">\n        <div>\n            <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n            <span>{{ configLoadingText }}</span>\n        </div>\n    </div>\n</ng-template>", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;background-color:var(--sidebar-bg);border-radius:var(--sidebar-radius, 1.25rem);backdrop-filter:blur(var(--sidebar-blur, 16px));-webkit-backdrop-filter:blur(var(--sidebar-blur, 16px));box-shadow:var(--sidebar-shadow, 0 10px 40px -12px rgba(0, 0, 0, .45));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem;rotate:0deg;transition:rotate var(--sidebar-animation-duration) ease-in-out}.sidebar-toolbar .sidebar-toggle i.is-collapsed{rotate:-180deg}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--sidebar-text-muted);opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width: 480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:var(--sidebar-nav-bg)}ul lib-sidebar-item,.loading,.error{font-weight:500;color:var(--sidebar-text)}.sidebar-region-header{position:relative;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-left:1rem;padding-right:1rem;height:2rem;color:var(--sidebar-text-muted);transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header span{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header:after{content:\"\";position:absolute;left:50%;top:50%;opacity:0;width:1.75rem;height:1px;transform:translate(-50%,-50%);background:var(--sidebar-text-muted);transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}:host(:not(.expanded):not(.active)) .sidebar-region-header{height:1.25rem}:host(:not(.expanded):not(.active)) .sidebar-region-header span{opacity:0}:host(:not(.expanded):not(.active)) .sidebar-region-header:after{opacity:1}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onBodyMouseDown: [{
                 type: HostListener,
                 args: ['body:mousedown', ['$event']]
@@ -3496,11 +3548,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
 
 class RibbonComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: RibbonComponent, isStandalone: true, selector: "lib-ribbon", ngImport: i0, template: "<div>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>", styles: [":host-context{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host-context div{display:inline-flex;gap:.5rem}:host-context ::ng-deep *[right]{display:flex}:host-context ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host-context ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host-context ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host-context ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: RibbonComponent, isStandalone: true, selector: "lib-ribbon", ngImport: i0, template: "<div>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host-context{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host-context div{display:inline-flex;gap:.5rem}:host-context ::ng-deep *[right]{display:flex}:host-context ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host-context ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host-context ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host-context ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: RibbonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-ribbon', template: "<div>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>", styles: [":host-context{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host-context div{display:inline-flex;gap:.5rem}:host-context ::ng-deep *[right]{display:flex}:host-context ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host-context ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host-context ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host-context ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"] }]
+            args: [{ selector: 'lib-ribbon', template: "<div>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host-context{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host-context div{display:inline-flex;gap:.5rem}:host-context ::ng-deep *[right]{display:flex}:host-context ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host-context ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host-context ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host-context ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"] }]
         }] });
 
 class RibbonGroupComponent {