ud-components 0.3.5 → 0.3.7

package/fesm2022/ud-components.mjs

@@ -2189,7 +2189,7 @@ class ModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ModalComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: ModalComponent, isStandalone: true, selector: "ud-modal", ngImport: i0, template: "<div class=\"m-4\">\n  <h3 mat-dialog-title>{{ data.title | translate | capitalize }}</h3>\n  <div mat-dialog-content>\n    @if (pictureUrls && currentPictureIndex != undefined) {\n      <div class=\"image-container\">\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"previous()\"\n          >keyboard_arrow_left\n        </mat-icon>\n        <img [src]=\"pictureUrls[currentPictureIndex]\" alt=\"Picture\" />\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"next()\"\n          >keyboard_arrow_right\n        </mat-icon>\n      </div>\n      <div class=\"footer\">\n        {{ currentPictureIndex + 1 }} {{ 'names.of' | translate }}\n        {{ pictureUrls.length }}\n      </div>\n    }\n    @if (form) {\n      <form [formGroup]=\"form\">\n        <div class=\"modal-form-fields\">\n          @for (formType of data.forms; track formType) {\n            @switch (formType.type) {\n              @case (modalInputType.INPUT) {\n                <ud-text-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [type]=\"formType.inputType ?? 'text'\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.PHONE) {\n                <ud-phone-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.TEXT_AREA) {\n                <ud-textarea\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [minRows]=\"formType.minRows ?? 3\"\n                  [maxRows]=\"formType.maxRows ?? 6\" />\n              }\n              @case (modalInputType.OPTIONS) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"false\" />\n              }\n              @case (modalInputType.MULTI_SELECT) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"true\" />\n              }\n              @case (modalInputType.AUTOCOMPLETE) {\n                <ud-autocomplete\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.DATERANGE) {\n                <ud-date-range-input\n                  [startControlName]=\"'start' + formType.property\"\n                  [endControlName]=\"'end' + formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\" />\n              }\n              @case (modalInputType.DATETIME) {\n                <ud-date-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [min]=\"formType.min\"\n                  [max]=\"formType.max\" />\n              }\n              @case (modalInputType.TIME) {\n                <ud-time-picker\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [intervalMinutes]=\"formType.intervalMinutes ?? 30\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.CHIPS) {\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\n                    {{ formType.title | translate | singular | capitalize }}\n                  </mat-label>\n                  <mat-chip-grid\n                    #chipGrid\n                    [formControlName]=\"formType.property\">\n                    @for (option of formType.availableOptions; track option) {\n                      <mat-chip-row (removed)=\"formType.removeOption(option)\">\n                        {{ option }}\n                        <button matChipRemove>\n                          <mat-icon>cancel</mat-icon>\n                        </button>\n                      </mat-chip-row>\n                    }\n                  </mat-chip-grid>\n                  <input\n                    placeholder=\"New option...\"\n                    [matChipInputFor]=\"chipGrid\"\n                    (matChipInputTokenEnd)=\"formType.addOption($event)\" />\n                </mat-form-field>\n              }\n            }\n          }\n        </div>\n      </form>\n    } @else {\n      <p>{{ data.bodyText }}</p>\n    }\n  </div>\n  <div class=\"d-flex justify-content-end\">\n    <div mat-dialog-actions>\n      @if (showClose) {\n        <button mat-button mat-dialog-close>\n          {{ 'actions.close' | translate | capitalize }}\n        </button>\n      }\n      <button\n        [disabled]=\"form && form.invalid\"\n        mat-raised-button\n        color=\"primary\"\n        mat-dialog-close\n        (click)=\"form ? data.save(form.getRawValue()) : data.confirm()\">\n        {{ (form ? 'actions.save' : 'actions.ok') | translate | capitalize }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".image-container{display:flex;justify-content:space-between;align-items:center}.image-container .arrow-picture-icon{display:flex;justify-content:center;align-items:center;padding:1rem;font-size:2rem;cursor:pointer;background:#5f665e;color:#fff}.image-container img{width:550px}.footer{display:flex;justify-content:center;align-items:center;color:var(--text-color)}.modal-form-fields{display:flex;flex-direction:column;gap:4px;padding-top:8px;min-width:320px}ud-text-input,ud-textarea,ud-multi-select,ud-autocomplete,ud-date-input,ud-date-range-input,ud-time-picker,ud-phone-input,mat-form-field{display:block;width:100%}\n"], dependencies: [{ kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: SingularPipe, name: "singular" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: TextInputComponent, selector: "ud-text-input", inputs: ["controlName", "label", "placeholder", "type", "icon", "iconFontSet", "loading", "step"] }, { kind: "component", type: TextareaComponent, selector: "ud-textarea", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "minRows", "maxRows"] }, { kind: "component", type: MultiSelectComponent, selector: "ud-multi-select", inputs: ["controlName", "label", "icon", "iconFontSet", "options", "multiple", "maxChipsVisible", "moreText", "loading"] }, { kind: "component", type: AutocompleteComponent, selector: "ud-autocomplete", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "options", "loading"] }, { kind: "component", type: DateInputComponent, selector: "ud-date-input", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "min", "max"] }, { kind: "component", type: DateRangeInputComponent, selector: "ud-date-range-input", inputs: ["startControlName", "endControlName", "label", "icon", "iconFontSet", "startPlaceholder", "endPlaceholder", "min", "max"] }, { kind: "component", type: TimePickerComponent, selector: "ud-time-picker", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "intervalMinutes", "options"] }, { kind: "component", type: PhoneInputComponent, selector: "ud-phone-input", inputs: ["controlName", "label", "placeholder"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: ModalComponent, isStandalone: true, selector: "ud-modal", ngImport: i0, template: "<div class=\"m-4\">\n  <h3 mat-dialog-title>{{ data.title | translate | capitalize }}</h3>\n  <div mat-dialog-content>\n    @if (pictureUrls && currentPictureIndex != undefined) {\n      <div class=\"image-container\">\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"previous()\"\n          >keyboard_arrow_left\n        </mat-icon>\n        <img [src]=\"pictureUrls[currentPictureIndex]\" alt=\"Picture\" />\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"next()\"\n          >keyboard_arrow_right\n        </mat-icon>\n      </div>\n      <div class=\"footer\">\n        {{ currentPictureIndex + 1 }} {{ 'names.of' | translate }}\n        {{ pictureUrls.length }}\n      </div>\n    }\n    @if (form) {\n      <form [formGroup]=\"form\">\n        <div class=\"modal-form-fields\">\n          @for (formType of data.forms; track formType) {\n            @switch (formType.type) {\n              @case (modalInputType.INPUT) {\n                <ud-text-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [type]=\"formType.inputType ?? 'text'\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.PHONE) {\n                <ud-phone-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.TEXT_AREA) {\n                <ud-textarea\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [minRows]=\"formType.minRows ?? 3\"\n                  [maxRows]=\"formType.maxRows ?? 6\" />\n              }\n              @case (modalInputType.OPTIONS) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"false\" />\n              }\n              @case (modalInputType.MULTI_SELECT) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"true\" />\n              }\n              @case (modalInputType.AUTOCOMPLETE) {\n                <ud-autocomplete\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.DATERANGE) {\n                <ud-date-range-input\n                  [startControlName]=\"'start' + formType.property\"\n                  [endControlName]=\"'end' + formType.property\"\n                  [label]=\"\n                    formType.title | translate | singular | capitalize\n                  \" />\n              }\n              @case (modalInputType.DATETIME) {\n                <ud-date-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [min]=\"formType.min\"\n                  [max]=\"formType.max\" />\n              }\n              @case (modalInputType.TIME) {\n                <ud-time-picker\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [intervalMinutes]=\"formType.intervalMinutes ?? 30\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.CHIPS) {\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\n                    {{ formType.title | translate | singular | capitalize }}\n                  </mat-label>\n                  <mat-chip-grid\n                    #chipGrid\n                    [formControlName]=\"formType.property\">\n                    @for (option of formType.availableOptions; track option) {\n                      <mat-chip-row (removed)=\"formType.removeOption(option)\">\n                        {{ option }}\n                        <button matChipRemove>\n                          <mat-icon>cancel</mat-icon>\n                        </button>\n                      </mat-chip-row>\n                    }\n                  </mat-chip-grid>\n                  <input\n                    placeholder=\"New option...\"\n                    [matChipInputFor]=\"chipGrid\"\n                    (matChipInputTokenEnd)=\"formType.addOption($event)\" />\n                </mat-form-field>\n              }\n            }\n          }\n        </div>\n      </form>\n    } @else {\n      <p>{{ data.bodyText }}</p>\n    }\n  </div>\n  <div class=\"d-flex justify-content-end\">\n    <div mat-dialog-actions>\n      @if (showClose) {\n        <button mat-button mat-dialog-close>\n          {{ 'actions.close' | translate | capitalize }}\n        </button>\n      }\n      <button\n        [disabled]=\"form && form.invalid\"\n        mat-raised-button\n        color=\"primary\"\n        mat-dialog-close\n        (click)=\"form ? data.save(form.getRawValue()) : data.confirm()\">\n        {{ (form ? 'save' : 'ok') | translate | capitalize }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".image-container{display:flex;justify-content:space-between;align-items:center}.image-container .arrow-picture-icon{display:flex;justify-content:center;align-items:center;padding:1rem;font-size:2rem;cursor:pointer;background:#5f665e;color:#fff}.image-container img{width:550px}.footer{display:flex;justify-content:center;align-items:center;color:var(--text-color)}.modal-form-fields{display:flex;flex-direction:column;gap:4px;padding-top:8px;min-width:320px}ud-text-input,ud-textarea,ud-multi-select,ud-autocomplete,ud-date-input,ud-date-range-input,ud-time-picker,ud-phone-input,mat-form-field{display:block;width:100%}\n"], dependencies: [{ kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: SingularPipe, name: "singular" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: TextInputComponent, selector: "ud-text-input", inputs: ["controlName", "label", "placeholder", "type", "icon", "iconFontSet", "loading", "step"] }, { kind: "component", type: TextareaComponent, selector: "ud-textarea", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "minRows", "maxRows"] }, { kind: "component", type: MultiSelectComponent, selector: "ud-multi-select", inputs: ["controlName", "label", "icon", "iconFontSet", "options", "multiple", "maxChipsVisible", "moreText", "loading"] }, { kind: "component", type: AutocompleteComponent, selector: "ud-autocomplete", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "options", "loading"] }, { kind: "component", type: DateInputComponent, selector: "ud-date-input", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "min", "max"] }, { kind: "component", type: DateRangeInputComponent, selector: "ud-date-range-input", inputs: ["startControlName", "endControlName", "label", "icon", "iconFontSet", "startPlaceholder", "endPlaceholder", "min", "max"] }, { kind: "component", type: TimePickerComponent, selector: "ud-time-picker", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "intervalMinutes", "options"] }, { kind: "component", type: PhoneInputComponent, selector: "ud-phone-input", inputs: ["controlName", "label", "placeholder"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -2218,7 +2218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         DateRangeInputComponent,
                         TimePickerComponent,
                         PhoneInputComponent,
-                    ], template: "<div class=\"m-4\">\n  <h3 mat-dialog-title>{{ data.title | translate | capitalize }}</h3>\n  <div mat-dialog-content>\n    @if (pictureUrls && currentPictureIndex != undefined) {\n      <div class=\"image-container\">\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"previous()\"\n          >keyboard_arrow_left\n        </mat-icon>\n        <img [src]=\"pictureUrls[currentPictureIndex]\" alt=\"Picture\" />\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"next()\"\n          >keyboard_arrow_right\n        </mat-icon>\n      </div>\n      <div class=\"footer\">\n        {{ currentPictureIndex + 1 }} {{ 'names.of' | translate }}\n        {{ pictureUrls.length }}\n      </div>\n    }\n    @if (form) {\n      <form [formGroup]=\"form\">\n        <div class=\"modal-form-fields\">\n          @for (formType of data.forms; track formType) {\n            @switch (formType.type) {\n              @case (modalInputType.INPUT) {\n                <ud-text-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [type]=\"formType.inputType ?? 'text'\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.PHONE) {\n                <ud-phone-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.TEXT_AREA) {\n                <ud-textarea\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [minRows]=\"formType.minRows ?? 3\"\n                  [maxRows]=\"formType.maxRows ?? 6\" />\n              }\n              @case (modalInputType.OPTIONS) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"false\" />\n              }\n              @case (modalInputType.MULTI_SELECT) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"true\" />\n              }\n              @case (modalInputType.AUTOCOMPLETE) {\n                <ud-autocomplete\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.DATERANGE) {\n                <ud-date-range-input\n                  [startControlName]=\"'start' + formType.property\"\n                  [endControlName]=\"'end' + formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\" />\n              }\n              @case (modalInputType.DATETIME) {\n                <ud-date-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [min]=\"formType.min\"\n                  [max]=\"formType.max\" />\n              }\n              @case (modalInputType.TIME) {\n                <ud-time-picker\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [intervalMinutes]=\"formType.intervalMinutes ?? 30\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.CHIPS) {\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\n                    {{ formType.title | translate | singular | capitalize }}\n                  </mat-label>\n                  <mat-chip-grid\n                    #chipGrid\n                    [formControlName]=\"formType.property\">\n                    @for (option of formType.availableOptions; track option) {\n                      <mat-chip-row (removed)=\"formType.removeOption(option)\">\n                        {{ option }}\n                        <button matChipRemove>\n                          <mat-icon>cancel</mat-icon>\n                        </button>\n                      </mat-chip-row>\n                    }\n                  </mat-chip-grid>\n                  <input\n                    placeholder=\"New option...\"\n                    [matChipInputFor]=\"chipGrid\"\n                    (matChipInputTokenEnd)=\"formType.addOption($event)\" />\n                </mat-form-field>\n              }\n            }\n          }\n        </div>\n      </form>\n    } @else {\n      <p>{{ data.bodyText }}</p>\n    }\n  </div>\n  <div class=\"d-flex justify-content-end\">\n    <div mat-dialog-actions>\n      @if (showClose) {\n        <button mat-button mat-dialog-close>\n          {{ 'actions.close' | translate | capitalize }}\n        </button>\n      }\n      <button\n        [disabled]=\"form && form.invalid\"\n        mat-raised-button\n        color=\"primary\"\n        mat-dialog-close\n        (click)=\"form ? data.save(form.getRawValue()) : data.confirm()\">\n        {{ (form ? 'actions.save' : 'actions.ok') | translate | capitalize }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".image-container{display:flex;justify-content:space-between;align-items:center}.image-container .arrow-picture-icon{display:flex;justify-content:center;align-items:center;padding:1rem;font-size:2rem;cursor:pointer;background:#5f665e;color:#fff}.image-container img{width:550px}.footer{display:flex;justify-content:center;align-items:center;color:var(--text-color)}.modal-form-fields{display:flex;flex-direction:column;gap:4px;padding-top:8px;min-width:320px}ud-text-input,ud-textarea,ud-multi-select,ud-autocomplete,ud-date-input,ud-date-range-input,ud-time-picker,ud-phone-input,mat-form-field{display:block;width:100%}\n"] }]
+                    ], template: "<div class=\"m-4\">\n  <h3 mat-dialog-title>{{ data.title | translate | capitalize }}</h3>\n  <div mat-dialog-content>\n    @if (pictureUrls && currentPictureIndex != undefined) {\n      <div class=\"image-container\">\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"previous()\"\n          >keyboard_arrow_left\n        </mat-icon>\n        <img [src]=\"pictureUrls[currentPictureIndex]\" alt=\"Picture\" />\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"next()\"\n          >keyboard_arrow_right\n        </mat-icon>\n      </div>\n      <div class=\"footer\">\n        {{ currentPictureIndex + 1 }} {{ 'names.of' | translate }}\n        {{ pictureUrls.length }}\n      </div>\n    }\n    @if (form) {\n      <form [formGroup]=\"form\">\n        <div class=\"modal-form-fields\">\n          @for (formType of data.forms; track formType) {\n            @switch (formType.type) {\n              @case (modalInputType.INPUT) {\n                <ud-text-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [type]=\"formType.inputType ?? 'text'\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.PHONE) {\n                <ud-phone-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.TEXT_AREA) {\n                <ud-textarea\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [minRows]=\"formType.minRows ?? 3\"\n                  [maxRows]=\"formType.maxRows ?? 6\" />\n              }\n              @case (modalInputType.OPTIONS) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"false\" />\n              }\n              @case (modalInputType.MULTI_SELECT) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"true\" />\n              }\n              @case (modalInputType.AUTOCOMPLETE) {\n                <ud-autocomplete\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.DATERANGE) {\n                <ud-date-range-input\n                  [startControlName]=\"'start' + formType.property\"\n                  [endControlName]=\"'end' + formType.property\"\n                  [label]=\"\n                    formType.title | translate | singular | capitalize\n                  \" />\n              }\n              @case (modalInputType.DATETIME) {\n                <ud-date-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [min]=\"formType.min\"\n                  [max]=\"formType.max\" />\n              }\n              @case (modalInputType.TIME) {\n                <ud-time-picker\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [intervalMinutes]=\"formType.intervalMinutes ?? 30\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.CHIPS) {\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\n                    {{ formType.title | translate | singular | capitalize }}\n                  </mat-label>\n                  <mat-chip-grid\n                    #chipGrid\n                    [formControlName]=\"formType.property\">\n                    @for (option of formType.availableOptions; track option) {\n                      <mat-chip-row (removed)=\"formType.removeOption(option)\">\n                        {{ option }}\n                        <button matChipRemove>\n                          <mat-icon>cancel</mat-icon>\n                        </button>\n                      </mat-chip-row>\n                    }\n                  </mat-chip-grid>\n                  <input\n                    placeholder=\"New option...\"\n                    [matChipInputFor]=\"chipGrid\"\n                    (matChipInputTokenEnd)=\"formType.addOption($event)\" />\n                </mat-form-field>\n              }\n            }\n          }\n        </div>\n      </form>\n    } @else {\n      <p>{{ data.bodyText }}</p>\n    }\n  </div>\n  <div class=\"d-flex justify-content-end\">\n    <div mat-dialog-actions>\n      @if (showClose) {\n        <button mat-button mat-dialog-close>\n          {{ 'actions.close' | translate | capitalize }}\n        </button>\n      }\n      <button\n        [disabled]=\"form && form.invalid\"\n        mat-raised-button\n        color=\"primary\"\n        mat-dialog-close\n        (click)=\"form ? data.save(form.getRawValue()) : data.confirm()\">\n        {{ (form ? 'save' : 'ok') | translate | capitalize }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".image-container{display:flex;justify-content:space-between;align-items:center}.image-container .arrow-picture-icon{display:flex;justify-content:center;align-items:center;padding:1rem;font-size:2rem;cursor:pointer;background:#5f665e;color:#fff}.image-container img{width:550px}.footer{display:flex;justify-content:center;align-items:center;color:var(--text-color)}.modal-form-fields{display:flex;flex-direction:column;gap:4px;padding-top:8px;min-width:320px}ud-text-input,ud-textarea,ud-multi-select,ud-autocomplete,ud-date-input,ud-date-range-input,ud-time-picker,ud-phone-input,mat-form-field{display:block;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2478,16 +2478,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Styled button that wraps Angular Material with the library's design tokens.
+ *
+ * Usage:
+ *   <ud-button>Save</ud-button>
+ *   <ud-button variant="stroked" color="secondary">Cancel</ud-button>
+ *   <ud-button [loading]="isSaving" icon="save">Save</ud-button>
+ *   <ud-button color="danger" variant="stroked">Delete</ud-button>
+ */
+class UdButtonComponent {
+    /** Visual style of the button */
+    variant = 'flat';
+    /** Colour role */
+    color = 'primary';
+    /** Size preset */
+    size = 'md';
+    /** Native button type */
+    type = 'button';
+    /** Material icon name. Shows a spinner when loading is true instead. */
+    icon;
+    /** Which side the icon appears on */
+    iconPosition = 'left';
+    /** Font set for the icon (default: material-icons-outlined) */
+    iconFontSet = 'material-icons-outlined';
+    /** Shows a spinner and disables the button */
+    loading = false;
+    /** Explicitly disable the button */
+    disabled = false;
+    /** Stretch to fill the container width */
+    fullWidth = false;
+    get isDisabled() {
+        return this.disabled || this.loading;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: UdButtonComponent, isStandalone: true, selector: "ud-button", inputs: { variant: "variant", color: "color", size: "size", type: "type", icon: "icon", iconPosition: "iconPosition", iconFontSet: "iconFontSet", loading: "loading", disabled: "disabled", fullWidth: "fullWidth" }, ngImport: i0, template: "@if (variant === 'flat') {\n  <button\n    mat-flat-button\n    [type]=\"type\"\n    [disabled]=\"isDisabled\"\n    [class]=\"'ud-btn ud-btn--flat ud-btn--' + color + ' ud-btn--' + size\"\n    [class.ud-btn--full-width]=\"fullWidth\"\n    [class.ud-btn--loading]=\"loading\">\n    <ng-container *ngTemplateOutlet=\"btnContent\" />\n  </button>\n}\n\n@if (variant === 'stroked') {\n  <button\n    mat-stroked-button\n    [type]=\"type\"\n    [disabled]=\"isDisabled\"\n    [class]=\"'ud-btn ud-btn--stroked ud-btn--' + color + ' ud-btn--' + size\"\n    [class.ud-btn--full-width]=\"fullWidth\"\n    [class.ud-btn--loading]=\"loading\">\n    <ng-container *ngTemplateOutlet=\"btnContent\" />\n  </button>\n}\n\n@if (variant === 'icon-only') {\n  <button\n    mat-icon-button\n    [type]=\"type\"\n    [disabled]=\"isDisabled\"\n    [class]=\"'ud-btn ud-btn--icon-only ud-btn--' + color + ' ud-btn--' + size\"\n    [class.ud-btn--loading]=\"loading\">\n    @if (loading) {\n      <mat-spinner diameter=\"16\" />\n    } @else if (icon) {\n      <mat-icon class=\"ud-btn__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n    }\n  </button>\n}\n\n<ng-template #btnContent>\n  @if (loading) {\n    <mat-spinner class=\"ud-btn__spinner\" diameter=\"16\" />\n  } @else if (icon && iconPosition === 'left') {\n    <mat-icon class=\"ud-btn__icon ud-btn__icon--left\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n  }\n  <span class=\"ud-btn__label\"><ng-content /></span>\n  @if (!loading && icon && iconPosition === 'right') {\n    <mat-icon class=\"ud-btn__icon ud-btn__icon--right\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n  }\n</ng-template>\n", styles: [":host{display:inline-block}:host.full-width,:host .ud-btn--full-width{width:100%}.ud-btn{font-family:DM Sans,system-ui,sans-serif!important;font-weight:500!important;letter-spacing:0!important;border-radius:var(--eu-radius-sm, 6px)!important;transition:background .2s ease,box-shadow .2s ease,transform .15s ease,border-color .2s ease,color .2s ease!important;display:inline-flex!important;align-items:center;gap:.4rem}.ud-btn--full-width{width:100%}.ud-btn--sm{height:32px!important;font-size:.8rem!important;padding:0 .875rem!important}.ud-btn--md{height:40px!important;font-size:.875rem!important;padding:0 1.25rem!important}.ud-btn--lg{height:48px!important;font-size:.95rem!important;padding:0 1.75rem!important}.ud-btn--flat.ud-btn--primary{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:0 4px 14px #1b253538!important}.ud-btn--flat.ud-btn--primary:hover:not(:disabled){background:var(--eu-navy-soft, #253347)!important;box-shadow:0 6px 18px #1b25354d!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--primary:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--secondary{background:var(--eu-bg, #f4f5f7)!important;color:var(--eu-navy, #1b2535)!important;box-shadow:none!important;border:1px solid var(--eu-border-mid, #c9cdd6)!important}.ud-btn--flat.ud-btn--secondary:hover:not(:disabled){background:var(--eu-bg-hover, #eff1f5)!important;border-color:var(--eu-navy, #1b2535)!important}.ud-btn--flat.ud-btn--danger{background:#e53935!important;color:#fff!important;box-shadow:0 4px 14px #e539354d!important}.ud-btn--flat.ud-btn--danger:hover:not(:disabled){background:#c62828!important;box-shadow:0 6px 18px #e5393566!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--danger:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--success{background:#24a821!important;color:#fff!important;box-shadow:0 4px 14px #24a8214d!important}.ud-btn--flat.ud-btn--success:hover:not(:disabled){background:#1c881a!important;box-shadow:0 6px 18px #24a82166!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--success:active:not(:disabled){transform:translateY(0)!important}.ud-btn--stroked.ud-btn--primary{color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--primary:hover:not(:disabled){background:#1b25350d!important}.ud-btn--stroked.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important;border-color:var(--eu-border-mid, #c9cdd6)!important;background:transparent!important}.ud-btn--stroked.ud-btn--secondary:hover:not(:disabled){color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger{color:#e53935!important;border-color:#e53935!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger:hover:not(:disabled){background:#e539350d!important}.ud-btn--stroked.ud-btn--success{color:#24a821!important;border-color:#24a821!important;background:transparent!important}.ud-btn--stroked.ud-btn--success:hover:not(:disabled){background:#1c881a0f!important}.ud-btn--icon-only{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important}.ud-btn--icon-only ::ng-deep .mdc-icon-button__content,.ud-btn--icon-only ::ng-deep .mat-mdc-button-base{display:inline-flex!important;align-items:center!important;justify-content:center!important}.ud-btn--icon-only .ud-btn__icon{font-size:1.35em!important;width:1.35em!important;height:1.35em!important}.ud-btn--icon-only.ud-btn--icon-only--sm{width:32px!important;height:32px!important}.ud-btn--icon-only.ud-btn--icon-only--md{width:40px!important;height:40px!important}.ud-btn--icon-only.ud-btn--icon-only--lg{width:48px!important;height:48px!important}.ud-btn--icon-only.ud-btn--primary{color:var(--eu-navy, #1b2535)!important}.ud-btn--icon-only.ud-btn--primary:hover:not(:disabled){background:#1b25350f!important}.ud-btn--icon-only.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important}.ud-btn--icon-only.ud-btn--secondary:hover:not(:disabled){background:#1b25350a!important}.ud-btn--icon-only.ud-btn--danger{color:#e53935!important}.ud-btn--icon-only.ud-btn--danger:hover:not(:disabled){background:#e539350f!important}.ud-btn--icon-only.ud-btn--success{color:#24a821!important}.ud-btn--icon-only.ud-btn--success:hover:not(:disabled){background:#24a8210f!important}.ud-btn:disabled{opacity:.45!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}.ud-btn--loading{cursor:wait!important}.ud-btn__label{line-height:1}.ud-btn__icon{flex-shrink:0;overflow:visible!important;font-size:1.15em!important;width:1.15em!important;height:1.15em!important;line-height:1!important;display:inline-flex!important;align-items:center;justify-content:center}.ud-btn__icon--left{margin-right:2px}.ud-btn__icon--right{margin-left:2px}.ud-btn__spinner{flex-shrink:0}.ud-btn__spinner ::ng-deep circle{stroke:currentColor!important}::ng-deep .ud-btn .mdc-button__label{display:inline-flex!important;align-items:center!important;gap:6px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-button', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], template: "@if (variant === 'flat') {\n  <button\n    mat-flat-button\n    [type]=\"type\"\n    [disabled]=\"isDisabled\"\n    [class]=\"'ud-btn ud-btn--flat ud-btn--' + color + ' ud-btn--' + size\"\n    [class.ud-btn--full-width]=\"fullWidth\"\n    [class.ud-btn--loading]=\"loading\">\n    <ng-container *ngTemplateOutlet=\"btnContent\" />\n  </button>\n}\n\n@if (variant === 'stroked') {\n  <button\n    mat-stroked-button\n    [type]=\"type\"\n    [disabled]=\"isDisabled\"\n    [class]=\"'ud-btn ud-btn--stroked ud-btn--' + color + ' ud-btn--' + size\"\n    [class.ud-btn--full-width]=\"fullWidth\"\n    [class.ud-btn--loading]=\"loading\">\n    <ng-container *ngTemplateOutlet=\"btnContent\" />\n  </button>\n}\n\n@if (variant === 'icon-only') {\n  <button\n    mat-icon-button\n    [type]=\"type\"\n    [disabled]=\"isDisabled\"\n    [class]=\"'ud-btn ud-btn--icon-only ud-btn--' + color + ' ud-btn--' + size\"\n    [class.ud-btn--loading]=\"loading\">\n    @if (loading) {\n      <mat-spinner diameter=\"16\" />\n    } @else if (icon) {\n      <mat-icon class=\"ud-btn__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n    }\n  </button>\n}\n\n<ng-template #btnContent>\n  @if (loading) {\n    <mat-spinner class=\"ud-btn__spinner\" diameter=\"16\" />\n  } @else if (icon && iconPosition === 'left') {\n    <mat-icon class=\"ud-btn__icon ud-btn__icon--left\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n  }\n  <span class=\"ud-btn__label\"><ng-content /></span>\n  @if (!loading && icon && iconPosition === 'right') {\n    <mat-icon class=\"ud-btn__icon ud-btn__icon--right\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n  }\n</ng-template>\n", styles: [":host{display:inline-block}:host.full-width,:host .ud-btn--full-width{width:100%}.ud-btn{font-family:DM Sans,system-ui,sans-serif!important;font-weight:500!important;letter-spacing:0!important;border-radius:var(--eu-radius-sm, 6px)!important;transition:background .2s ease,box-shadow .2s ease,transform .15s ease,border-color .2s ease,color .2s ease!important;display:inline-flex!important;align-items:center;gap:.4rem}.ud-btn--full-width{width:100%}.ud-btn--sm{height:32px!important;font-size:.8rem!important;padding:0 .875rem!important}.ud-btn--md{height:40px!important;font-size:.875rem!important;padding:0 1.25rem!important}.ud-btn--lg{height:48px!important;font-size:.95rem!important;padding:0 1.75rem!important}.ud-btn--flat.ud-btn--primary{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:0 4px 14px #1b253538!important}.ud-btn--flat.ud-btn--primary:hover:not(:disabled){background:var(--eu-navy-soft, #253347)!important;box-shadow:0 6px 18px #1b25354d!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--primary:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--secondary{background:var(--eu-bg, #f4f5f7)!important;color:var(--eu-navy, #1b2535)!important;box-shadow:none!important;border:1px solid var(--eu-border-mid, #c9cdd6)!important}.ud-btn--flat.ud-btn--secondary:hover:not(:disabled){background:var(--eu-bg-hover, #eff1f5)!important;border-color:var(--eu-navy, #1b2535)!important}.ud-btn--flat.ud-btn--danger{background:#e53935!important;color:#fff!important;box-shadow:0 4px 14px #e539354d!important}.ud-btn--flat.ud-btn--danger:hover:not(:disabled){background:#c62828!important;box-shadow:0 6px 18px #e5393566!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--danger:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--success{background:#24a821!important;color:#fff!important;box-shadow:0 4px 14px #24a8214d!important}.ud-btn--flat.ud-btn--success:hover:not(:disabled){background:#1c881a!important;box-shadow:0 6px 18px #24a82166!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--success:active:not(:disabled){transform:translateY(0)!important}.ud-btn--stroked.ud-btn--primary{color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--primary:hover:not(:disabled){background:#1b25350d!important}.ud-btn--stroked.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important;border-color:var(--eu-border-mid, #c9cdd6)!important;background:transparent!important}.ud-btn--stroked.ud-btn--secondary:hover:not(:disabled){color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger{color:#e53935!important;border-color:#e53935!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger:hover:not(:disabled){background:#e539350d!important}.ud-btn--stroked.ud-btn--success{color:#24a821!important;border-color:#24a821!important;background:transparent!important}.ud-btn--stroked.ud-btn--success:hover:not(:disabled){background:#1c881a0f!important}.ud-btn--icon-only{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important}.ud-btn--icon-only ::ng-deep .mdc-icon-button__content,.ud-btn--icon-only ::ng-deep .mat-mdc-button-base{display:inline-flex!important;align-items:center!important;justify-content:center!important}.ud-btn--icon-only .ud-btn__icon{font-size:1.35em!important;width:1.35em!important;height:1.35em!important}.ud-btn--icon-only.ud-btn--icon-only--sm{width:32px!important;height:32px!important}.ud-btn--icon-only.ud-btn--icon-only--md{width:40px!important;height:40px!important}.ud-btn--icon-only.ud-btn--icon-only--lg{width:48px!important;height:48px!important}.ud-btn--icon-only.ud-btn--primary{color:var(--eu-navy, #1b2535)!important}.ud-btn--icon-only.ud-btn--primary:hover:not(:disabled){background:#1b25350f!important}.ud-btn--icon-only.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important}.ud-btn--icon-only.ud-btn--secondary:hover:not(:disabled){background:#1b25350a!important}.ud-btn--icon-only.ud-btn--danger{color:#e53935!important}.ud-btn--icon-only.ud-btn--danger:hover:not(:disabled){background:#e539350f!important}.ud-btn--icon-only.ud-btn--success{color:#24a821!important}.ud-btn--icon-only.ud-btn--success:hover:not(:disabled){background:#24a8210f!important}.ud-btn:disabled{opacity:.45!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}.ud-btn--loading{cursor:wait!important}.ud-btn__label{line-height:1}.ud-btn__icon{flex-shrink:0;overflow:visible!important;font-size:1.15em!important;width:1.15em!important;height:1.15em!important;line-height:1!important;display:inline-flex!important;align-items:center;justify-content:center}.ud-btn__icon--left{margin-right:2px}.ud-btn__icon--right{margin-left:2px}.ud-btn__spinner{flex-shrink:0}.ud-btn__spinner ::ng-deep circle{stroke:currentColor!important}::ng-deep .ud-btn .mdc-button__label{display:inline-flex!important;align-items:center!important;gap:6px!important}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], iconFontSet: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }] } });
+
 class SummaryViewComponent {
     title = '';
-    editOptions = null;
+    actions = [];
     summaryFields = [];
     loading = false;
     layout = 'text-left';
     skeletonTitleHeight = '20px';
     skeletonBodyHeight = '150px';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SummaryViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SummaryViewComponent, isStandalone: true, selector: "ud-summary-view", inputs: { title: "title", editOptions: "editOptions", summaryFields: "summaryFields", loading: "loading", layout: "layout", skeletonTitleHeight: "skeletonTitleHeight", skeletonBodyHeight: "skeletonBodyHeight" }, ngImport: i0, template: "<div class=\"summary-view-container\">\n  <div class=\"header\">\n    @if (loading) {\n      <ngx-skeleton-loader\n        class=\"loading col-6\"\n        [count]=\"1\"\n        [theme]=\"{ height: skeletonTitleHeight }\" />\n    } @else {\n      <h5 class=\"header-title\">{{ title }}</h5>\n    }\n    <ng-content select=\"[header-actions]\">\n      @if (editOptions) {\n        <button\n          mat-stroked-button\n          class=\"header-edit-btn\"\n          [matTooltip]=\"\n            editOptions.tooltip ?? 'actions.edit' | translate | capitalize\n          \"\n          color=\"primary\"\n          [routerLink]=\"editOptions.routerLink\"\n          [disabled]=\"editOptions.disabled\">\n          <mat-icon class=\"btn-icon\">edit</mat-icon>\n          <span>{{ 'actions.edit' | translate | capitalize }}</span>\n        </button>\n      }\n    </ng-content>\n  </div>\n  <div\n    class=\"content\"\n    [ngClass]=\"{\n      reverse: layout === 'text-right',\n      'flex-column': layout === 'text-top',\n    }\">\n    @if (loading) {\n      <ngx-skeleton-loader\n        class=\"col\"\n        [count]=\"1\"\n        [theme]=\"{ height: skeletonBodyHeight }\" />\n    } @else {\n      @if (layout !== 'text-none') {\n        <div [ngClass]=\"layout === 'text-top' ? 'col-12' : 'col-6'\">\n          <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' }\">\n            @for (summaryField of summaryFields; track $index) {\n              <div class=\"summary-field\">\n                @if (summaryField.label) {\n                  <span>{{ summaryField.label | capitalize }}</span>\n                }\n                <div class=\"summary-row\">\n                  <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n                    {{ summaryField.icon }}\n                  </mat-icon>\n                  <mat-label>{{ summaryField.value }}</mat-label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      <div\n        class=\"px-0\"\n        [ngClass]=\"{\n          'col-12': layout === 'text-none' || layout === 'text-top',\n          'col-6': layout !== 'text-none' && layout !== 'text-top',\n        }\">\n        <ng-content></ng-content>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".summary-view-container{justify-self:center;width:90%;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #373f4c14;border:1px solid rgba(0,0,0,.07)}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#dddde8;border-bottom:1px solid rgba(0,0,0,.08);min-height:52px}.header .header-title{margin:0;font-size:.9375rem;font-weight:600;color:#373f4c;letter-spacing:.01em}.header .header-edit-btn{height:32px!important;padding:0 12px!important;border-radius:6px!important;font-size:13px!important;font-weight:500!important;display:inline-flex!important;align-items:center!important;gap:4px}.header .header-edit-btn .btn-icon{font-size:15px!important;width:15px!important;height:15px!important}.header .loading{padding:.5rem;border-radius:4px}.content{display:flex;flex-wrap:wrap;padding:1.2rem .8rem;margin:0;background-color:#fff}.content.reverse{flex-direction:row-reverse}.content.flex-column{flex-direction:column}.summary{display:flex;flex-direction:column;gap:1rem}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:1rem 2.5rem}.summary .summary-field{display:flex;flex-direction:column;gap:.1rem}.summary .summary-field span{font-size:14px;font-weight:300;color:var(--text-color)}.summary .summary-row{display:flex;align-items:flex-start;gap:.5rem}.summary .summary-row mat-icon{height:18px;width:18px;min-width:18px;margin-top:2px;font-size:20px;color:var(--text-color)}mat-label{font-weight:300}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SummaryViewComponent, isStandalone: true, selector: "ud-summary-view", inputs: { title: "title", actions: "actions", summaryFields: "summaryFields", loading: "loading", layout: "layout", skeletonTitleHeight: "skeletonTitleHeight", skeletonBodyHeight: "skeletonBodyHeight" }, ngImport: i0, template: "<div class=\"summary-view-container\">\n  <div class=\"header\">\n    @if (loading) {\n      <ngx-skeleton-loader\n        class=\"loading col-6\"\n        [count]=\"1\"\n        [theme]=\"{ height: skeletonTitleHeight }\" />\n    } @else {\n      <h5 class=\"header-title\">{{ title }}</h5>\n    }\n    <div class=\"header-actions\">\n      @for (action of actions; track action.label) {\n        @if (action.isAuthorized) {\n          @if (action.path) {\n            <ud-button\n              variant=\"stroked\"\n              color=\"primary\"\n              size=\"sm\"\n              [icon]=\"action.icon\"\n              [routerLink]=\"action.path\">\n              {{ action.label | translate | capitalize }}\n            </ud-button>\n          } @else if (action.onClick) {\n            <ud-button\n              variant=\"stroked\"\n              color=\"primary\"\n              size=\"sm\"\n              [icon]=\"action.icon\"\n              (click)=\"action.onClick!()\">\n              {{ action.label | translate | capitalize }}\n            </ud-button>\n          }\n        }\n      }\n      <ng-content select=\"[header-actions]\" />\n    </div>\n  </div>\n  <div\n    class=\"content\"\n    [ngClass]=\"{\n      reverse: layout === 'text-right',\n      'flex-column': layout === 'text-top',\n    }\">\n    @if (loading) {\n      <ngx-skeleton-loader\n        class=\"col\"\n        [count]=\"1\"\n        [theme]=\"{ height: skeletonBodyHeight }\" />\n    } @else {\n      @if (layout !== 'text-none') {\n        <div [ngClass]=\"layout === 'text-top' ? 'col-12' : 'col-6'\">\n          <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' }\">\n            @for (summaryField of summaryFields; track $index) {\n              <div class=\"summary-field\">\n                @if (summaryField.label) {\n                  <span>{{ summaryField.label | capitalize }}</span>\n                }\n                <div class=\"summary-row\">\n                  <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n                    {{ summaryField.icon }}\n                  </mat-icon>\n                  <mat-label>{{ summaryField.value }}</mat-label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      <div\n        class=\"content-body\"\n        [ngClass]=\"{\n          'col-12': layout === 'text-none' || layout === 'text-top',\n          'col-6': layout !== 'text-none' && layout !== 'text-top',\n        }\">\n        <ng-content></ng-content>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".summary-view-container{justify-self:center;width:90%;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #1b253512,0 4px 16px #1b253514;font-family:DM Sans,system-ui,sans-serif}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#1b2535;min-height:52px}.header .header-title{margin:0;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#fff;letter-spacing:.02em}.header .header-actions{display:flex;align-items:center;gap:8px}.header .header-actions ::ng-deep .ud-btn{border-color:#ffffff4d!important;color:#ffffffd9!important}.header .header-actions ::ng-deep .ud-btn:hover{background:#ffffff1a!important;border-color:#ffffff80!important;color:#fff!important}.header .header-actions ::ng-deep .ud-btn .mat-icon{color:inherit!important}.header .loading{padding:.5rem;border-radius:4px}.content{display:flex;flex-wrap:wrap;background:#fff}.content:not(.flex-column):has(.content-body>*)>.col-6:first-child{border-right:1px solid #e8eaee}.content.reverse:has(.content-body>*)>.col-6:last-child{border-right:1px solid #e8eaee;border-left:none}.summary{display:flex;flex-direction:column;gap:0;padding:20px 24px}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:.25rem;padding:16px 8px}.summary-field{display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:8px;transition:background .15s ease}.summary-field:hover{background:#f4f5f7}.summary-row-wrap .summary-field{padding:12px 16px;min-width:140px;border:1px solid #e8eaee}.summary-field span{font-family:DM Sans,system-ui,sans-serif;font-size:.65rem;font-weight:700;color:#6b7585;text-transform:uppercase;letter-spacing:.08em}.summary-row{display:flex;align-items:center;gap:6px}.summary-row mat-icon{height:16px;width:16px;min-width:16px;font-size:16px;color:#6b7585;flex-shrink:0}mat-label{font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#1b2535;line-height:1.3}.content-body:has(>*){background:#f4f5f7;padding:20px 24px}.flex-column>.content-body:has(>*){border-top:1px solid #e8eaee}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SummaryViewComponent, decorators: [{
             type: Component,
@@ -2497,16 +2558,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         TranslatePipe,
                         NgxSkeletonLoaderModule,
                         MatIconModule,
-                        MatButtonModule,
                         MatLabel,
                         RouterLink,
-                        MatTooltip,
                         CapitalizePipe,
                         MatPrefix,
-                    ], template: "<div class=\"summary-view-container\">\n  <div class=\"header\">\n    @if (loading) {\n      <ngx-skeleton-loader\n        class=\"loading col-6\"\n        [count]=\"1\"\n        [theme]=\"{ height: skeletonTitleHeight }\" />\n    } @else {\n      <h5 class=\"header-title\">{{ title }}</h5>\n    }\n    <ng-content select=\"[header-actions]\">\n      @if (editOptions) {\n        <button\n          mat-stroked-button\n          class=\"header-edit-btn\"\n          [matTooltip]=\"\n            editOptions.tooltip ?? 'actions.edit' | translate | capitalize\n          \"\n          color=\"primary\"\n          [routerLink]=\"editOptions.routerLink\"\n          [disabled]=\"editOptions.disabled\">\n          <mat-icon class=\"btn-icon\">edit</mat-icon>\n          <span>{{ 'actions.edit' | translate | capitalize }}</span>\n        </button>\n      }\n    </ng-content>\n  </div>\n  <div\n    class=\"content\"\n    [ngClass]=\"{\n      reverse: layout === 'text-right',\n      'flex-column': layout === 'text-top',\n    }\">\n    @if (loading) {\n      <ngx-skeleton-loader\n        class=\"col\"\n        [count]=\"1\"\n        [theme]=\"{ height: skeletonBodyHeight }\" />\n    } @else {\n      @if (layout !== 'text-none') {\n        <div [ngClass]=\"layout === 'text-top' ? 'col-12' : 'col-6'\">\n          <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' }\">\n            @for (summaryField of summaryFields; track $index) {\n              <div class=\"summary-field\">\n                @if (summaryField.label) {\n                  <span>{{ summaryField.label | capitalize }}</span>\n                }\n                <div class=\"summary-row\">\n                  <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n                    {{ summaryField.icon }}\n                  </mat-icon>\n                  <mat-label>{{ summaryField.value }}</mat-label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      <div\n        class=\"px-0\"\n        [ngClass]=\"{\n          'col-12': layout === 'text-none' || layout === 'text-top',\n          'col-6': layout !== 'text-none' && layout !== 'text-top',\n        }\">\n        <ng-content></ng-content>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".summary-view-container{justify-self:center;width:90%;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #373f4c14;border:1px solid rgba(0,0,0,.07)}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#dddde8;border-bottom:1px solid rgba(0,0,0,.08);min-height:52px}.header .header-title{margin:0;font-size:.9375rem;font-weight:600;color:#373f4c;letter-spacing:.01em}.header .header-edit-btn{height:32px!important;padding:0 12px!important;border-radius:6px!important;font-size:13px!important;font-weight:500!important;display:inline-flex!important;align-items:center!important;gap:4px}.header .header-edit-btn .btn-icon{font-size:15px!important;width:15px!important;height:15px!important}.header .loading{padding:.5rem;border-radius:4px}.content{display:flex;flex-wrap:wrap;padding:1.2rem .8rem;margin:0;background-color:#fff}.content.reverse{flex-direction:row-reverse}.content.flex-column{flex-direction:column}.summary{display:flex;flex-direction:column;gap:1rem}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:1rem 2.5rem}.summary .summary-field{display:flex;flex-direction:column;gap:.1rem}.summary .summary-field span{font-size:14px;font-weight:300;color:var(--text-color)}.summary .summary-row{display:flex;align-items:flex-start;gap:.5rem}.summary .summary-row mat-icon{height:18px;width:18px;min-width:18px;margin-top:2px;font-size:20px;color:var(--text-color)}mat-label{font-weight:300}\n"] }]
+                        UdButtonComponent,
+                    ], template: "<div class=\"summary-view-container\">\n  <div class=\"header\">\n    @if (loading) {\n      <ngx-skeleton-loader\n        class=\"loading col-6\"\n        [count]=\"1\"\n        [theme]=\"{ height: skeletonTitleHeight }\" />\n    } @else {\n      <h5 class=\"header-title\">{{ title }}</h5>\n    }\n    <div class=\"header-actions\">\n      @for (action of actions; track action.label) {\n        @if (action.isAuthorized) {\n          @if (action.path) {\n            <ud-button\n              variant=\"stroked\"\n              color=\"primary\"\n              size=\"sm\"\n              [icon]=\"action.icon\"\n              [routerLink]=\"action.path\">\n              {{ action.label | translate | capitalize }}\n            </ud-button>\n          } @else if (action.onClick) {\n            <ud-button\n              variant=\"stroked\"\n              color=\"primary\"\n              size=\"sm\"\n              [icon]=\"action.icon\"\n              (click)=\"action.onClick!()\">\n              {{ action.label | translate | capitalize }}\n            </ud-button>\n          }\n        }\n      }\n      <ng-content select=\"[header-actions]\" />\n    </div>\n  </div>\n  <div\n    class=\"content\"\n    [ngClass]=\"{\n      reverse: layout === 'text-right',\n      'flex-column': layout === 'text-top',\n    }\">\n    @if (loading) {\n      <ngx-skeleton-loader\n        class=\"col\"\n        [count]=\"1\"\n        [theme]=\"{ height: skeletonBodyHeight }\" />\n    } @else {\n      @if (layout !== 'text-none') {\n        <div [ngClass]=\"layout === 'text-top' ? 'col-12' : 'col-6'\">\n          <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' }\">\n            @for (summaryField of summaryFields; track $index) {\n              <div class=\"summary-field\">\n                @if (summaryField.label) {\n                  <span>{{ summaryField.label | capitalize }}</span>\n                }\n                <div class=\"summary-row\">\n                  <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n                    {{ summaryField.icon }}\n                  </mat-icon>\n                  <mat-label>{{ summaryField.value }}</mat-label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      <div\n        class=\"content-body\"\n        [ngClass]=\"{\n          'col-12': layout === 'text-none' || layout === 'text-top',\n          'col-6': layout !== 'text-none' && layout !== 'text-top',\n        }\">\n        <ng-content></ng-content>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".summary-view-container{justify-self:center;width:90%;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #1b253512,0 4px 16px #1b253514;font-family:DM Sans,system-ui,sans-serif}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#1b2535;min-height:52px}.header .header-title{margin:0;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#fff;letter-spacing:.02em}.header .header-actions{display:flex;align-items:center;gap:8px}.header .header-actions ::ng-deep .ud-btn{border-color:#ffffff4d!important;color:#ffffffd9!important}.header .header-actions ::ng-deep .ud-btn:hover{background:#ffffff1a!important;border-color:#ffffff80!important;color:#fff!important}.header .header-actions ::ng-deep .ud-btn .mat-icon{color:inherit!important}.header .loading{padding:.5rem;border-radius:4px}.content{display:flex;flex-wrap:wrap;background:#fff}.content:not(.flex-column):has(.content-body>*)>.col-6:first-child{border-right:1px solid #e8eaee}.content.reverse:has(.content-body>*)>.col-6:last-child{border-right:1px solid #e8eaee;border-left:none}.summary{display:flex;flex-direction:column;gap:0;padding:20px 24px}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:.25rem;padding:16px 8px}.summary-field{display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:8px;transition:background .15s ease}.summary-field:hover{background:#f4f5f7}.summary-row-wrap .summary-field{padding:12px 16px;min-width:140px;border:1px solid #e8eaee}.summary-field span{font-family:DM Sans,system-ui,sans-serif;font-size:.65rem;font-weight:700;color:#6b7585;text-transform:uppercase;letter-spacing:.08em}.summary-row{display:flex;align-items:center;gap:6px}.summary-row mat-icon{height:16px;width:16px;min-width:16px;font-size:16px;color:#6b7585;flex-shrink:0}mat-label{font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#1b2535;line-height:1.3}.content-body:has(>*){background:#f4f5f7;padding:20px 24px}.flex-column>.content-body:has(>*){border-top:1px solid #e8eaee}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
-            }], editOptions: [{
+            }], actions: [{
                 type: Input
             }], summaryFields: [{
                 type: Input
@@ -2667,67 +2727,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Input
             }] } });
 
-/**
- * Styled button that wraps Angular Material with the library's design tokens.
- *
- * Usage:
- *   <ud-button>Save</ud-button>
- *   <ud-button variant="stroked" color="secondary">Cancel</ud-button>
- *   <ud-button [loading]="isSaving" icon="save">Save</ud-button>
- *   <ud-button color="danger" variant="stroked">Delete</ud-button>
- */
-class UdButtonComponent {
-    /** Visual style of the button */
-    variant = 'flat';
-    /** Colour role */
-    color = 'primary';
-    /** Size preset */
-    size = 'md';
-    /** Native button type */
-    type = 'button';
-    /** Material icon name. Shows a spinner when loading is true instead. */
-    icon;
-    /** Which side the icon appears on */
-    iconPosition = 'left';
-    /** Font set for the icon (default: material-icons-outlined) */
-    iconFontSet = 'material-icons-outlined';
-    /** Shows a spinner and disables the button */
-    loading = false;
-    /** Explicitly disable the button */
-    disabled = false;
-    /** Stretch to fill the container width */
-    fullWidth = false;
-    get isDisabled() {
-        return this.disabled || this.loading;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: UdButtonComponent, isStandalone: true, selector: "ud-button", inputs: { variant: "variant", color: "color", size: "size", type: "type", icon: "icon", iconPosition: "iconPosition", iconFontSet: "iconFontSet", loading: "loading", disabled: "disabled", fullWidth: "fullWidth" }, ngImport: i0, template: "@if (variant === 'flat') {\n  <button\n    mat-flat-button\n    [type]=\"type\"\n    [disabled]=\"isDisabled\"\n    [class]=\"'ud-btn ud-btn--flat ud-btn--' + color + ' ud-btn--' + size\"\n    [class.ud-btn--full-width]=\"fullWidth\"\n    [class.ud-btn--loading]=\"loading\">\n    <ng-container *ngTemplateOutlet=\"btnContent\" />\n  </button>\n}\n\n@if (variant === 'stroked') {\n  <button\n    mat-stroked-button\n    [type]=\"type\"\n    [disabled]=\"isDisabled\"\n    [class]=\"'ud-btn ud-btn--stroked ud-btn--' + color + ' ud-btn--' + size\"\n    [class.ud-btn--full-width]=\"fullWidth\"\n    [class.ud-btn--loading]=\"loading\">\n    <ng-container *ngTemplateOutlet=\"btnContent\" />\n  </button>\n}\n\n@if (variant === 'icon-only') {\n  <button\n    mat-icon-button\n    [type]=\"type\"\n    [disabled]=\"isDisabled\"\n    [class]=\"'ud-btn ud-btn--icon-only ud-btn--' + color + ' ud-btn--' + size\"\n    [class.ud-btn--loading]=\"loading\">\n    @if (loading) {\n      <mat-spinner diameter=\"16\" />\n    } @else if (icon) {\n      <mat-icon class=\"ud-btn__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n    }\n  </button>\n}\n\n<ng-template #btnContent>\n  @if (loading) {\n    <mat-spinner class=\"ud-btn__spinner\" diameter=\"16\" />\n  } @else if (icon && iconPosition === 'left') {\n    <mat-icon class=\"ud-btn__icon ud-btn__icon--left\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n  }\n  <span class=\"ud-btn__label\"><ng-content /></span>\n  @if (!loading && icon && iconPosition === 'right') {\n    <mat-icon class=\"ud-btn__icon ud-btn__icon--right\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n  }\n</ng-template>\n", styles: [":host{display:inline-block}:host.full-width,:host .ud-btn--full-width{width:100%}.ud-btn{font-family:DM Sans,system-ui,sans-serif!important;font-weight:500!important;letter-spacing:0!important;border-radius:var(--eu-radius-sm, 6px)!important;transition:background .2s ease,box-shadow .2s ease,transform .15s ease,border-color .2s ease,color .2s ease!important;display:inline-flex!important;align-items:center;gap:.4rem}.ud-btn--full-width{width:100%}.ud-btn--sm{height:32px!important;font-size:.8rem!important;padding:0 .875rem!important}.ud-btn--md{height:40px!important;font-size:.875rem!important;padding:0 1.25rem!important}.ud-btn--lg{height:48px!important;font-size:.95rem!important;padding:0 1.75rem!important}.ud-btn--flat.ud-btn--primary{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:0 4px 14px #1b253538!important}.ud-btn--flat.ud-btn--primary:hover:not(:disabled){background:var(--eu-navy-soft, #253347)!important;box-shadow:0 6px 18px #1b25354d!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--primary:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--secondary{background:var(--eu-bg, #f4f5f7)!important;color:var(--eu-navy, #1b2535)!important;box-shadow:none!important;border:1px solid var(--eu-border-mid, #c9cdd6)!important}.ud-btn--flat.ud-btn--secondary:hover:not(:disabled){background:var(--eu-bg-hover, #eff1f5)!important;border-color:var(--eu-navy, #1b2535)!important}.ud-btn--flat.ud-btn--danger{background:#e53935!important;color:#fff!important;box-shadow:0 4px 14px #e539354d!important}.ud-btn--flat.ud-btn--danger:hover:not(:disabled){background:#c62828!important;box-shadow:0 6px 18px #e5393566!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--danger:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--success{background:#24a821!important;color:#fff!important;box-shadow:0 4px 14px #24a8214d!important}.ud-btn--flat.ud-btn--success:hover:not(:disabled){background:#1c881a!important;box-shadow:0 6px 18px #24a82166!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--success:active:not(:disabled){transform:translateY(0)!important}.ud-btn--stroked.ud-btn--primary{color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--primary:hover:not(:disabled){background:#1b25350d!important}.ud-btn--stroked.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important;border-color:var(--eu-border-mid, #c9cdd6)!important;background:transparent!important}.ud-btn--stroked.ud-btn--secondary:hover:not(:disabled){color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger{color:#e53935!important;border-color:#e53935!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger:hover:not(:disabled){background:#e539350d!important}.ud-btn--stroked.ud-btn--success{color:#24a821!important;border-color:#24a821!important;background:transparent!important}.ud-btn--stroked.ud-btn--success:hover:not(:disabled){background:#1c881a0f!important}.ud-btn--icon-only{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important}.ud-btn--icon-only ::ng-deep .mdc-icon-button__content,.ud-btn--icon-only ::ng-deep .mat-mdc-button-base{display:inline-flex!important;align-items:center!important;justify-content:center!important}.ud-btn--icon-only .ud-btn__icon{font-size:1.35em!important;width:1.35em!important;height:1.35em!important}.ud-btn--icon-only.ud-btn--icon-only--sm{width:32px!important;height:32px!important}.ud-btn--icon-only.ud-btn--icon-only--md{width:40px!important;height:40px!important}.ud-btn--icon-only.ud-btn--icon-only--lg{width:48px!important;height:48px!important}.ud-btn--icon-only.ud-btn--primary{color:var(--eu-navy, #1b2535)!important}.ud-btn--icon-only.ud-btn--primary:hover:not(:disabled){background:#1b25350f!important}.ud-btn--icon-only.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important}.ud-btn--icon-only.ud-btn--secondary:hover:not(:disabled){background:#1b25350a!important}.ud-btn--icon-only.ud-btn--danger{color:#e53935!important}.ud-btn--icon-only.ud-btn--danger:hover:not(:disabled){background:#e539350f!important}.ud-btn--icon-only.ud-btn--success{color:#24a821!important}.ud-btn--icon-only.ud-btn--success:hover:not(:disabled){background:#24a8210f!important}.ud-btn:disabled{opacity:.45!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}.ud-btn--loading{cursor:wait!important}.ud-btn__label{line-height:1}.ud-btn__icon{flex-shrink:0;overflow:visible!important;font-size:1.15em!important;width:1.15em!important;height:1.15em!important;line-height:1!important;display:inline-flex!important;align-items:center;justify-content:center}.ud-btn__icon--left{margin-right:2px}.ud-btn__icon--right{margin-left:2px}.ud-btn__spinner{flex-shrink:0}.ud-btn__spinner ::ng-deep circle{stroke:currentColor!important}::ng-deep .ud-btn .mdc-button__label{display:inline-flex!important;align-items:center!important;gap:6px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ud-button', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], template: "@if (variant === 'flat') {\n  <button\n    mat-flat-button\n    [type]=\"type\"\n    [disabled]=\"isDisabled\"\n    [class]=\"'ud-btn ud-btn--flat ud-btn--' + color + ' ud-btn--' + size\"\n    [class.ud-btn--full-width]=\"fullWidth\"\n    [class.ud-btn--loading]=\"loading\">\n    <ng-container *ngTemplateOutlet=\"btnContent\" />\n  </button>\n}\n\n@if (variant === 'stroked') {\n  <button\n    mat-stroked-button\n    [type]=\"type\"\n    [disabled]=\"isDisabled\"\n    [class]=\"'ud-btn ud-btn--stroked ud-btn--' + color + ' ud-btn--' + size\"\n    [class.ud-btn--full-width]=\"fullWidth\"\n    [class.ud-btn--loading]=\"loading\">\n    <ng-container *ngTemplateOutlet=\"btnContent\" />\n  </button>\n}\n\n@if (variant === 'icon-only') {\n  <button\n    mat-icon-button\n    [type]=\"type\"\n    [disabled]=\"isDisabled\"\n    [class]=\"'ud-btn ud-btn--icon-only ud-btn--' + color + ' ud-btn--' + size\"\n    [class.ud-btn--loading]=\"loading\">\n    @if (loading) {\n      <mat-spinner diameter=\"16\" />\n    } @else if (icon) {\n      <mat-icon class=\"ud-btn__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n    }\n  </button>\n}\n\n<ng-template #btnContent>\n  @if (loading) {\n    <mat-spinner class=\"ud-btn__spinner\" diameter=\"16\" />\n  } @else if (icon && iconPosition === 'left') {\n    <mat-icon class=\"ud-btn__icon ud-btn__icon--left\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n  }\n  <span class=\"ud-btn__label\"><ng-content /></span>\n  @if (!loading && icon && iconPosition === 'right') {\n    <mat-icon class=\"ud-btn__icon ud-btn__icon--right\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n  }\n</ng-template>\n", styles: [":host{display:inline-block}:host.full-width,:host .ud-btn--full-width{width:100%}.ud-btn{font-family:DM Sans,system-ui,sans-serif!important;font-weight:500!important;letter-spacing:0!important;border-radius:var(--eu-radius-sm, 6px)!important;transition:background .2s ease,box-shadow .2s ease,transform .15s ease,border-color .2s ease,color .2s ease!important;display:inline-flex!important;align-items:center;gap:.4rem}.ud-btn--full-width{width:100%}.ud-btn--sm{height:32px!important;font-size:.8rem!important;padding:0 .875rem!important}.ud-btn--md{height:40px!important;font-size:.875rem!important;padding:0 1.25rem!important}.ud-btn--lg{height:48px!important;font-size:.95rem!important;padding:0 1.75rem!important}.ud-btn--flat.ud-btn--primary{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:0 4px 14px #1b253538!important}.ud-btn--flat.ud-btn--primary:hover:not(:disabled){background:var(--eu-navy-soft, #253347)!important;box-shadow:0 6px 18px #1b25354d!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--primary:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--secondary{background:var(--eu-bg, #f4f5f7)!important;color:var(--eu-navy, #1b2535)!important;box-shadow:none!important;border:1px solid var(--eu-border-mid, #c9cdd6)!important}.ud-btn--flat.ud-btn--secondary:hover:not(:disabled){background:var(--eu-bg-hover, #eff1f5)!important;border-color:var(--eu-navy, #1b2535)!important}.ud-btn--flat.ud-btn--danger{background:#e53935!important;color:#fff!important;box-shadow:0 4px 14px #e539354d!important}.ud-btn--flat.ud-btn--danger:hover:not(:disabled){background:#c62828!important;box-shadow:0 6px 18px #e5393566!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--danger:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--success{background:#24a821!important;color:#fff!important;box-shadow:0 4px 14px #24a8214d!important}.ud-btn--flat.ud-btn--success:hover:not(:disabled){background:#1c881a!important;box-shadow:0 6px 18px #24a82166!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--success:active:not(:disabled){transform:translateY(0)!important}.ud-btn--stroked.ud-btn--primary{color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--primary:hover:not(:disabled){background:#1b25350d!important}.ud-btn--stroked.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important;border-color:var(--eu-border-mid, #c9cdd6)!important;background:transparent!important}.ud-btn--stroked.ud-btn--secondary:hover:not(:disabled){color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger{color:#e53935!important;border-color:#e53935!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger:hover:not(:disabled){background:#e539350d!important}.ud-btn--stroked.ud-btn--success{color:#24a821!important;border-color:#24a821!important;background:transparent!important}.ud-btn--stroked.ud-btn--success:hover:not(:disabled){background:#1c881a0f!important}.ud-btn--icon-only{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important}.ud-btn--icon-only ::ng-deep .mdc-icon-button__content,.ud-btn--icon-only ::ng-deep .mat-mdc-button-base{display:inline-flex!important;align-items:center!important;justify-content:center!important}.ud-btn--icon-only .ud-btn__icon{font-size:1.35em!important;width:1.35em!important;height:1.35em!important}.ud-btn--icon-only.ud-btn--icon-only--sm{width:32px!important;height:32px!important}.ud-btn--icon-only.ud-btn--icon-only--md{width:40px!important;height:40px!important}.ud-btn--icon-only.ud-btn--icon-only--lg{width:48px!important;height:48px!important}.ud-btn--icon-only.ud-btn--primary{color:var(--eu-navy, #1b2535)!important}.ud-btn--icon-only.ud-btn--primary:hover:not(:disabled){background:#1b25350f!important}.ud-btn--icon-only.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important}.ud-btn--icon-only.ud-btn--secondary:hover:not(:disabled){background:#1b25350a!important}.ud-btn--icon-only.ud-btn--danger{color:#e53935!important}.ud-btn--icon-only.ud-btn--danger:hover:not(:disabled){background:#e539350f!important}.ud-btn--icon-only.ud-btn--success{color:#24a821!important}.ud-btn--icon-only.ud-btn--success:hover:not(:disabled){background:#24a8210f!important}.ud-btn:disabled{opacity:.45!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}.ud-btn--loading{cursor:wait!important}.ud-btn__label{line-height:1}.ud-btn__icon{flex-shrink:0;overflow:visible!important;font-size:1.15em!important;width:1.15em!important;height:1.15em!important;line-height:1!important;display:inline-flex!important;align-items:center;justify-content:center}.ud-btn__icon--left{margin-right:2px}.ud-btn__icon--right{margin-left:2px}.ud-btn__spinner{flex-shrink:0}.ud-btn__spinner ::ng-deep circle{stroke:currentColor!important}::ng-deep .ud-btn .mdc-button__label{display:inline-flex!important;align-items:center!important;gap:6px!important}\n"] }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], iconPosition: [{
-                type: Input
-            }], iconFontSet: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }] } });
-
 class ToggleComponent {
     /** Key of the control inside the parent FormGroup (alternative to ngModel/formControl) */
     controlName;