ud-components 0.3.6 → 0.3.8

package/fesm2022/ud-components.mjs

@@ -55,12 +55,27 @@ class CarouselComponent {
     direction = 'horizontal';
     autoplay = true;
     swiperRef;
+    activeIndex = 0;
+    ngAfterViewInit() {
+        this.swiperRef.nativeElement.addEventListener('swiperslidechange', () => {
+            this.activeIndex = this.swiperRef.nativeElement.swiper.realIndex;
+        });
+    }
+    prev() {
+        this.swiperRef.nativeElement.swiper.slidePrev();
+    }
+    next() {
+        this.swiperRef.nativeElement.swiper.slideNext();
+    }
+    goTo(index) {
+        this.swiperRef.nativeElement.swiper.slideTo(index);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: CarouselComponent, isStandalone: true, selector: "ud-carousel", inputs: { pictures: "pictures", height: "height", direction: "direction", autoplay: "autoplay" }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperRef"], descendants: true }], ngImport: i0, template: "<swiper-container\n  [slidesPerView]=\"1\"\n  [pagination]=\"true\"\n  [direction]=\"direction\"\n  [autoplay]=\"autoplay\"\n  [style.height.px]=\"height\">\n  @for (picture of pictures; track $index) {\n    <swiper-slide>\n      <img [src]=\"picture\" alt=\"Slide {{ $index + 1 }}\" />\n    </swiper-slide>\n  }\n</swiper-container>\n", styles: ["swiper-container{width:100%;height:auto;--swiper-pagination-color: var(--border-color);--swiper-pagination-bullet-inactive-color: black;--swiper-pagination-bullet-size: 8px;--swiper-pagination-bullet-horizontal-gap: 6px;--swiper-pagination-bullet-vertical-gap: 6px;--swiper-pagination-progressbar-bg-color: var(--accent-lightest-color)}swiper-slide{text-align:center;font-size:18px;background:#444;display:flex;justify-content:center;align-items:center;border-radius:4px}swiper-slide img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: CarouselComponent, isStandalone: true, selector: "ud-carousel", inputs: { pictures: "pictures", height: "height", direction: "direction", autoplay: "autoplay" }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperRef"], descendants: true }], ngImport: i0, template: "<div class=\"ud-carousel\">\n  <swiper-container\n    #swiperRef\n    [slidesPerView]=\"1\"\n    [pagination]=\"false\"\n    [direction]=\"direction\"\n    [autoplay]=\"autoplay\"\n    [style.height.px]=\"height\">\n    @for (picture of pictures; track $index) {\n      <swiper-slide>\n        <img [src]=\"picture\" alt=\"Slide {{ $index + 1 }}\" />\n      </swiper-slide>\n    }\n  </swiper-container>\n\n  <button class=\"ud-nav ud-nav-prev\" (click)=\"prev()\" aria-label=\"Previous slide\">\n    <span class=\"material-icons-outlined\">chevron_left</span>\n  </button>\n  <button class=\"ud-nav ud-nav-next\" (click)=\"next()\" aria-label=\"Next slide\">\n    <span class=\"material-icons-outlined\">chevron_right</span>\n  </button>\n\n  <div class=\"ud-pagination\">\n    @for (picture of pictures; track $index) {\n      <button\n        class=\"ud-dot\"\n        [class.active]=\"activeIndex === $index\"\n        (click)=\"goTo($index)\"\n        [attr.aria-label]=\"'Go to slide ' + ($index + 1)\">\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.ud-carousel{position:relative;width:100%;border-radius:12px;overflow:hidden}.ud-carousel:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,rgba(15,20,30,.6) 0%,transparent 100%);border-radius:0 0 12px 12px;pointer-events:none;z-index:5}swiper-container{width:100%;border-radius:12px}swiper-slide{display:flex;justify-content:center;align-items:center;background:#1b2535;overflow:hidden}swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.ud-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:none;background:#0f141e73;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;opacity:.8;transition:background .2s ease,opacity .2s ease,transform .2s ease}.ud-nav span{font-size:22px;line-height:1;display:flex}.ud-nav:hover{background:#0f141ed1;opacity:1;transform:translateY(-50%) scale(1.08)}.ud-nav.ud-nav-prev{left:12px}.ud-nav.ud-nav-next{right:12px}.ud-pagination{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;z-index:10}.ud-dot{display:block;height:8px;width:8px;border-radius:100px;border:none;padding:0;background:#ffffff73;cursor:pointer;transition:width .3s cubic-bezier(.34,1.56,.64,1),background .25s ease}.ud-dot.active{width:28px;background:#fff}.ud-dot:hover:not(.active){background:#ffffffbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ud-carousel', imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<swiper-container\n  [slidesPerView]=\"1\"\n  [pagination]=\"true\"\n  [direction]=\"direction\"\n  [autoplay]=\"autoplay\"\n  [style.height.px]=\"height\">\n  @for (picture of pictures; track $index) {\n    <swiper-slide>\n      <img [src]=\"picture\" alt=\"Slide {{ $index + 1 }}\" />\n    </swiper-slide>\n  }\n</swiper-container>\n", styles: ["swiper-container{width:100%;height:auto;--swiper-pagination-color: var(--border-color);--swiper-pagination-bullet-inactive-color: black;--swiper-pagination-bullet-size: 8px;--swiper-pagination-bullet-horizontal-gap: 6px;--swiper-pagination-bullet-vertical-gap: 6px;--swiper-pagination-progressbar-bg-color: var(--accent-lightest-color)}swiper-slide{text-align:center;font-size:18px;background:#444;display:flex;justify-content:center;align-items:center;border-radius:4px}swiper-slide img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px}\n"] }]
+            args: [{ selector: 'ud-carousel', imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"ud-carousel\">\n  <swiper-container\n    #swiperRef\n    [slidesPerView]=\"1\"\n    [pagination]=\"false\"\n    [direction]=\"direction\"\n    [autoplay]=\"autoplay\"\n    [style.height.px]=\"height\">\n    @for (picture of pictures; track $index) {\n      <swiper-slide>\n        <img [src]=\"picture\" alt=\"Slide {{ $index + 1 }}\" />\n      </swiper-slide>\n    }\n  </swiper-container>\n\n  <button class=\"ud-nav ud-nav-prev\" (click)=\"prev()\" aria-label=\"Previous slide\">\n    <span class=\"material-icons-outlined\">chevron_left</span>\n  </button>\n  <button class=\"ud-nav ud-nav-next\" (click)=\"next()\" aria-label=\"Next slide\">\n    <span class=\"material-icons-outlined\">chevron_right</span>\n  </button>\n\n  <div class=\"ud-pagination\">\n    @for (picture of pictures; track $index) {\n      <button\n        class=\"ud-dot\"\n        [class.active]=\"activeIndex === $index\"\n        (click)=\"goTo($index)\"\n        [attr.aria-label]=\"'Go to slide ' + ($index + 1)\">\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.ud-carousel{position:relative;width:100%;border-radius:12px;overflow:hidden}.ud-carousel:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,rgba(15,20,30,.6) 0%,transparent 100%);border-radius:0 0 12px 12px;pointer-events:none;z-index:5}swiper-container{width:100%;border-radius:12px}swiper-slide{display:flex;justify-content:center;align-items:center;background:#1b2535;overflow:hidden}swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.ud-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:none;background:#0f141e73;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;opacity:.8;transition:background .2s ease,opacity .2s ease,transform .2s ease}.ud-nav span{font-size:22px;line-height:1;display:flex}.ud-nav:hover{background:#0f141ed1;opacity:1;transform:translateY(-50%) scale(1.08)}.ud-nav.ud-nav-prev{left:12px}.ud-nav.ud-nav-next{right:12px}.ud-pagination{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;z-index:10}.ud-dot{display:block;height:8px;width:8px;border-radius:100px;border:none;padding:0;background:#ffffff73;cursor:pointer;transition:width .3s cubic-bezier(.34,1.56,.64,1),background .25s ease}.ud-dot.active{width:28px;background:#fff}.ud-dot:hover:not(.active){background:#ffffffbf}\n"] }]
         }], propDecorators: { pictures: [{
                 type: Input
             }], height: [{
@@ -2189,7 +2204,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 +2233,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]
@@ -2548,7 +2563,7 @@ class SummaryViewComponent {
     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", 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=\"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-actions{display:flex;align-items:center;gap:8px}.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: "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"] }] });
+    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,
@@ -2563,7 +2578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         CapitalizePipe,
                         MatPrefix,
                         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=\"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-actions{display:flex;align-items:center;gap:8px}.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"] }]
+                    ], 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
             }], actions: [{