ud-components 0.5.0 → 0.5.3

package/fesm2022/ud-components.mjs

@@ -37,15 +37,15 @@ import * as i2$2 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import * as i2$6 from 'ngx-file-drop';
 import { NgxFileDropModule } from 'ngx-file-drop';
-import * as i1$5 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogClose, MatDialogActions, MatDialogContent, MatDialogTitle, MatDialogConfig } from '@angular/material/dialog';
+import * as i1$4 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogContent, MatDialogConfig } from '@angular/material/dialog';
 import * as i2$3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i2$4 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import * as i2$5 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
-import * as i1$4 from '@angular/platform-browser';
+import * as i1$5 from '@angular/platform-browser';
 import { MatFormField as MatFormField$1 } from '@angular/material/form-field';
 import { signalStoreFeature, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
 
@@ -2481,14 +2481,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
 
 class ModalComponent {
     data;
+    dialogRef;
     form;
     modalInputType = ModalInputType;
     showClose = true;
-    // Picture related
     pictureUrls;
     currentPictureIndex;
-    constructor(data) {
+    constructor(data, dialogRef) {
         this.data = data;
+        this.dialogRef = dialogRef;
         if (this.data.formGroup) {
             this.form = this.data.formGroup;
         }
@@ -2500,6 +2501,18 @@ class ModalComponent {
             this.showClose = this.data.showClose;
         }
     }
+    close() {
+        this.dialogRef.close();
+    }
+    onAction() {
+        if (this.form) {
+            this.data.save(this.form.getRawValue());
+        }
+        else {
+            this.data.confirm?.();
+        }
+        this.dialogRef.close();
+    }
     previous() {
         if (this.currentPictureIndex != undefined && this.currentPictureIndex > 0) {
             this.currentPictureIndex -= 1;
@@ -2511,8 +2524,8 @@ class ModalComponent {
             this.currentPictureIndex += 1;
         }
     }
-    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]=\"\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", "min", "max", "disabled", "hint"] }, { kind: "component", type: TextareaComponent, selector: "ud-textarea", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "minRows", "maxRows", "disabled", "hint"] }, { kind: "component", type: MultiSelectComponent, selector: "ud-multi-select", inputs: ["controlName", "label", "icon", "iconFontSet", "options", "multiple", "maxChipsVisible", "moreText", "loading", "disabled", "hint"] }, { kind: "component", type: AutocompleteComponent, selector: "ud-autocomplete", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "options", "loading", "disabled", "hint"], outputs: ["searchChange"] }, { kind: "component", type: DateInputComponent, selector: "ud-date-input", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "min", "max", "disabled", "hint"] }, { kind: "component", type: DateRangeInputComponent, selector: "ud-date-range-input", inputs: ["startControlName", "endControlName", "label", "icon", "iconFontSet", "startPlaceholder", "endPlaceholder", "min", "max", "disabled", "hint"] }, { kind: "component", type: TimePickerComponent, selector: "ud-time-picker", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "intervalMinutes", "options", "disabled", "hint"] }, { kind: "component", type: PhoneInputComponent, selector: "ud-phone-input", inputs: ["controlName", "label", "placeholder", "disabled", "hint"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ModalComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$4.MatDialogRef }], 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=\"ud-modal-shell\">\n  <header class=\"ud-modal-header\">\n    @if (data.eyebrow) {\n      <p class=\"ud-modal-eyebrow\">{{ data.eyebrow | translate | capitalize }}</p>\n    }\n    <h3 class=\"ud-modal-title\">{{ data.title | translate | capitalize }}</h3>\n    @if (data.lede) {\n      <p class=\"ud-modal-lede\">{{ data.lede | translate | capitalize }}</p>\n    }\n  </header>\n\n  <div class=\"ud-modal-content\" mat-dialog-content>\n    @if (pictureUrls && currentPictureIndex != undefined) {\n      <div class=\"image-container\">\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"previous()\">keyboard_arrow_left</mat-icon>\n        <img [src]=\"pictureUrls[currentPictureIndex]\" alt=\"Picture\" />\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"next()\">keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"image-footer\">\n        {{ currentPictureIndex + 1 }} {{ 'names.of' | translate }} {{ 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 #chipGrid [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 if (!pictureUrls) {\n      <p class=\"ud-modal-body-text\">{{ data.bodyText }}</p>\n    }\n  </div>\n\n  <footer class=\"ud-modal-footer\">\n    @if (showClose) {\n      <ud-button variant=\"stroked\" color=\"secondary\" (click)=\"close()\">\n        {{ 'actions.close' | translate | capitalize }}\n      </ud-button>\n    }\n    <ud-button [disabled]=\"!!(form && form.invalid)\" (click)=\"onAction()\">\n      {{ (form ? 'actions.save' : 'actions.ok') | translate | capitalize }}\n    </ud-button>\n  </footer>\n</div>\n", styles: [".ud-modal-shell{display:flex;flex-direction:column;overflow:hidden;min-width:360px;max-width:540px}.ud-modal-header{position:relative;padding:28px 28px 18px;overflow:hidden}.ud-modal-header:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(27,37,53,.1),transparent 60%),radial-gradient(circle at 85% 10%,rgba(58,74,102,.07),transparent 55%);pointer-events:none}.ud-modal-eyebrow{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1b2535}.ud-modal-title{margin:0;font-size:22px;line-height:1.2;font-weight:600;color:#2a3548;letter-spacing:-.01em}.ud-modal-lede{margin:8px 0 0;color:#6b7585;font-size:13.5px;line-height:1.5;max-width:40ch}.ud-modal-content{padding:4px 28px 12px;max-height:60vh;overflow-y:auto}.ud-modal-content.mat-mdc-dialog-content{padding:4px 28px 12px;margin:0;max-height:60vh}.modal-form-fields{display:flex;flex-direction:column;gap:4px;padding-top:8px}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%}.ud-modal-body-text{margin:4px 0;font-size:14px;color:#4a5568;line-height:1.55}.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:#1b2535;color:#fff;border-radius:8px;transition:background .15s ease}.image-container .arrow-picture-icon:hover{background:#253347}.image-container img{width:100%;max-width:460px;border-radius:8px}.image-footer{display:flex;justify-content:center;align-items:center;padding:8px 0 0;font-size:13px;color:#6b7585}.ud-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 28px 24px;border-top:1px solid #e2e5ea;background:#fbfbfd}\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: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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", "min", "max", "disabled", "hint"] }, { kind: "component", type: TextareaComponent, selector: "ud-textarea", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "minRows", "maxRows", "disabled", "hint"] }, { kind: "component", type: MultiSelectComponent, selector: "ud-multi-select", inputs: ["controlName", "label", "icon", "iconFontSet", "options", "multiple", "maxChipsVisible", "moreText", "loading", "disabled", "hint"] }, { kind: "component", type: AutocompleteComponent, selector: "ud-autocomplete", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "options", "loading", "disabled", "hint"], outputs: ["searchChange"] }, { kind: "component", type: DateInputComponent, selector: "ud-date-input", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "min", "max", "disabled", "hint"] }, { kind: "component", type: DateRangeInputComponent, selector: "ud-date-range-input", inputs: ["startControlName", "endControlName", "label", "icon", "iconFontSet", "startPlaceholder", "endPlaceholder", "min", "max", "disabled", "hint"] }, { kind: "component", type: TimePickerComponent, selector: "ud-time-picker", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "intervalMinutes", "options", "disabled", "hint"] }, { kind: "component", type: PhoneInputComponent, selector: "ud-phone-input", inputs: ["controlName", "label", "placeholder", "disabled", "hint"] }, { 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: ModalComponent, decorators: [{
             type: Component,
@@ -2521,11 +2534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         SingularPipe,
                         TranslatePipe,
                         ReactiveFormsModule,
-                        MatButton,
-                        MatDialogClose,
-                        MatDialogActions,
                         MatDialogContent,
-                        MatDialogTitle,
                         MatIcon,
                         MatFormField,
                         MatLabel,
@@ -2541,11 +2550,12 @@ 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]=\"\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"] }]
+                        UdButtonComponent,
+                    ], template: "<div class=\"ud-modal-shell\">\n  <header class=\"ud-modal-header\">\n    @if (data.eyebrow) {\n      <p class=\"ud-modal-eyebrow\">{{ data.eyebrow | translate | capitalize }}</p>\n    }\n    <h3 class=\"ud-modal-title\">{{ data.title | translate | capitalize }}</h3>\n    @if (data.lede) {\n      <p class=\"ud-modal-lede\">{{ data.lede | translate | capitalize }}</p>\n    }\n  </header>\n\n  <div class=\"ud-modal-content\" mat-dialog-content>\n    @if (pictureUrls && currentPictureIndex != undefined) {\n      <div class=\"image-container\">\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"previous()\">keyboard_arrow_left</mat-icon>\n        <img [src]=\"pictureUrls[currentPictureIndex]\" alt=\"Picture\" />\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"next()\">keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"image-footer\">\n        {{ currentPictureIndex + 1 }} {{ 'names.of' | translate }} {{ 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 #chipGrid [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 if (!pictureUrls) {\n      <p class=\"ud-modal-body-text\">{{ data.bodyText }}</p>\n    }\n  </div>\n\n  <footer class=\"ud-modal-footer\">\n    @if (showClose) {\n      <ud-button variant=\"stroked\" color=\"secondary\" (click)=\"close()\">\n        {{ 'actions.close' | translate | capitalize }}\n      </ud-button>\n    }\n    <ud-button [disabled]=\"!!(form && form.invalid)\" (click)=\"onAction()\">\n      {{ (form ? 'actions.save' : 'actions.ok') | translate | capitalize }}\n    </ud-button>\n  </footer>\n</div>\n", styles: [".ud-modal-shell{display:flex;flex-direction:column;overflow:hidden;min-width:360px;max-width:540px}.ud-modal-header{position:relative;padding:28px 28px 18px;overflow:hidden}.ud-modal-header:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(27,37,53,.1),transparent 60%),radial-gradient(circle at 85% 10%,rgba(58,74,102,.07),transparent 55%);pointer-events:none}.ud-modal-eyebrow{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1b2535}.ud-modal-title{margin:0;font-size:22px;line-height:1.2;font-weight:600;color:#2a3548;letter-spacing:-.01em}.ud-modal-lede{margin:8px 0 0;color:#6b7585;font-size:13.5px;line-height:1.5;max-width:40ch}.ud-modal-content{padding:4px 28px 12px;max-height:60vh;overflow-y:auto}.ud-modal-content.mat-mdc-dialog-content{padding:4px 28px 12px;margin:0;max-height:60vh}.modal-form-fields{display:flex;flex-direction:column;gap:4px;padding-top:8px}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%}.ud-modal-body-text{margin:4px 0;font-size:14px;color:#4a5568;line-height:1.55}.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:#1b2535;color:#fff;border-radius:8px;transition:background .15s ease}.image-container .arrow-picture-icon:hover{background:#253347}.image-container img{width:100%;max-width:460px;border-radius:8px}.image-footer{display:flex;justify-content:center;align-items:center;padding:8px 0 0;font-size:13px;color:#6b7585}.ud-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 28px 24px;border-top:1px solid #e2e5ea;background:#fbfbfd}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }] });
+                }] }, { type: i1$4.MatDialogRef }] });
 
 class SafePipe {
     sanitizer;
@@ -2555,7 +2565,7 @@ class SafePipe {
     transform(url) {
         return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SafePipe, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SafePipe, deps: [{ token: i1$5.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SafePipe, decorators: [{
@@ -2563,7 +2573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
             args: [{
                     name: 'safe',
                 }]
-        }], ctorParameters: () => [{ type: i1$4.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$5.DomSanitizer }] });
 
 class FileInputComponent {
     dialog;
@@ -2653,7 +2663,7 @@ class FileInputComponent {
         dialogConfig.width = '50vw';
         this.dialog.open(ModalComponent, dialogConfig);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: FileInputComponent, deps: [{ token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: FileInputComponent, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: FileInputComponent, isStandalone: true, selector: "ud-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, initialFiles: { classPropertyName: "initialFiles", publicName: "initialFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected" }, ngImport: i0, template: "<div class=\"mt-3\">\n  <ngx-file-drop\n    dropZoneLabel=\"Drop files here\"\n    [accept]=\"accept\"\n    [multiple]=\"multiple\"\n    [directory]=\"false\"\n    (onFileDrop)=\"dropped($event)\">\n    <ng-template\n      ngx-file-drop-content-tmp\n      let-openFileSelector=\"openFileSelector\">\n      <div class=\"drop-stack\">\n        <ud-button color=\"primary\" type=\"button\" (click)=\"openFileSelector()\">\n          @if (icon) {\n            <mat-icon matPrefix>\n              {{ icon }}\n            </mat-icon>\n          }\n          <span class=\"text-wrap\">{{ label | translate | capitalize }}</span>\n        </ud-button>\n        <div class=\"drop-hint\">\n          <mat-icon class=\"drop-hint__icon\" fontSet=\"material-icons-outlined\"\n            >cloud_upload</mat-icon\n          >\n          <span class=\"drop-hint__text\">{{\n            'fileInput.orDropHere' | translate\n          }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </ngx-file-drop>\n  <div class=\"mt-3\">\n    @for (image of previewUrls; track $index) {\n      <div\n        class=\"d-flex justify-content-between align-items-center mb-2 p-1 file\">\n        @if (image) {\n          <div class=\"d-flex\">\n            @if (image.substring(0, 30).includes('pdf')) {\n              <iframe\n                [src]=\"image | safe\"\n                class=\"mr-3 border\"\n                allowFullscreen></iframe>\n            } @else {\n              <img\n                [src]=\"image\"\n                alt=\"\"\n                class=\"mr-3 border\"\n                (click)=\"openImageDialog($index)\" />\n            }\n          </div>\n        }\n        <button mat-icon-button type=\"button\" (click)=\"removeFile($index)\">\n          <mat-icon fontSet=\"material-icons-outlined\"> cancel</mat-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".cancel{padding:0;min-width:fit-content;height:fit-content;margin-left:-13px;margin-top:-12px}.cancel ::ng-deep .mat-button-wrapper{display:flex}.cancel ::ng-deep .mat-button-wrapper mat-icon{background:#fff;border-radius:20px}img,iframe{width:65px;height:65px;object-fit:cover;border-radius:10px;cursor:pointer}img:hover,iframe:hover{opacity:.6}.file{border:1px dashed #373f4c;border-radius:10px}.drop-stack{display:flex;flex-direction:column;align-items:flex-start}.drop-hint{display:flex;align-items:center;gap:8px;margin-top:10px;padding-left:2px;color:#373f4c8c;font-size:.78rem;font-weight:500;letter-spacing:.02em;-webkit-user-select:none;user-select:none;animation:drop-hint-in .42s cubic-bezier(.2,.8,.2,1) both}.drop-hint__icon{font-size:16px;width:16px;height:16px;color:#1b2535;opacity:.85;transition:transform .26s ease,opacity .26s ease}.drop-hint__text{line-height:1;font-style:italic}.drop-hint:hover .drop-hint__icon{transform:translateY(-1px);opacity:1}@keyframes drop-hint-in{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: NgxFileDropModule }, { kind: "component", type: i2$6.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i2$6.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: SafePipe, name: "safe" }, { 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: FileInputComponent, decorators: [{
@@ -2668,7 +2678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         SafePipe,
                         UdButtonComponent,
                     ], template: "<div class=\"mt-3\">\n  <ngx-file-drop\n    dropZoneLabel=\"Drop files here\"\n    [accept]=\"accept\"\n    [multiple]=\"multiple\"\n    [directory]=\"false\"\n    (onFileDrop)=\"dropped($event)\">\n    <ng-template\n      ngx-file-drop-content-tmp\n      let-openFileSelector=\"openFileSelector\">\n      <div class=\"drop-stack\">\n        <ud-button color=\"primary\" type=\"button\" (click)=\"openFileSelector()\">\n          @if (icon) {\n            <mat-icon matPrefix>\n              {{ icon }}\n            </mat-icon>\n          }\n          <span class=\"text-wrap\">{{ label | translate | capitalize }}</span>\n        </ud-button>\n        <div class=\"drop-hint\">\n          <mat-icon class=\"drop-hint__icon\" fontSet=\"material-icons-outlined\"\n            >cloud_upload</mat-icon\n          >\n          <span class=\"drop-hint__text\">{{\n            'fileInput.orDropHere' | translate\n          }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </ngx-file-drop>\n  <div class=\"mt-3\">\n    @for (image of previewUrls; track $index) {\n      <div\n        class=\"d-flex justify-content-between align-items-center mb-2 p-1 file\">\n        @if (image) {\n          <div class=\"d-flex\">\n            @if (image.substring(0, 30).includes('pdf')) {\n              <iframe\n                [src]=\"image | safe\"\n                class=\"mr-3 border\"\n                allowFullscreen></iframe>\n            } @else {\n              <img\n                [src]=\"image\"\n                alt=\"\"\n                class=\"mr-3 border\"\n                (click)=\"openImageDialog($index)\" />\n            }\n          </div>\n        }\n        <button mat-icon-button type=\"button\" (click)=\"removeFile($index)\">\n          <mat-icon fontSet=\"material-icons-outlined\"> cancel</mat-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".cancel{padding:0;min-width:fit-content;height:fit-content;margin-left:-13px;margin-top:-12px}.cancel ::ng-deep .mat-button-wrapper{display:flex}.cancel ::ng-deep .mat-button-wrapper mat-icon{background:#fff;border-radius:20px}img,iframe{width:65px;height:65px;object-fit:cover;border-radius:10px;cursor:pointer}img:hover,iframe:hover{opacity:.6}.file{border:1px dashed #373f4c;border-radius:10px}.drop-stack{display:flex;flex-direction:column;align-items:flex-start}.drop-hint{display:flex;align-items:center;gap:8px;margin-top:10px;padding-left:2px;color:#373f4c8c;font-size:.78rem;font-weight:500;letter-spacing:.02em;-webkit-user-select:none;user-select:none;animation:drop-hint-in .42s cubic-bezier(.2,.8,.2,1) both}.drop-hint__icon{font-size:16px;width:16px;height:16px;color:#1b2535;opacity:.85;transition:transform .26s ease,opacity .26s ease}.drop-hint__text{line-height:1;font-style:italic}.drop-hint:hover .drop-hint__icon{transform:translateY(-1px);opacity:1}@keyframes drop-hint-in{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.MatDialog }], propDecorators: { accept: [{
+        }], ctorParameters: () => [{ type: i1$4.MatDialog }], propDecorators: { accept: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -3113,6 +3123,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Input
             }] } });
 
+class ToggleOptionComponent {
+    title;
+    description;
+    checked = false;
+    controlName;
+    size = 'md';
+    get isSm() {
+        return this.size === 'sm';
+    }
+    get isMd() {
+        return this.size === 'md';
+    }
+    get isLg() {
+        return this.size === 'lg';
+    }
+    isDisabled = false;
+    controlContainer = inject(ControlContainer, {
+        optional: true,
+        skipSelf: true,
+    });
+    destroy$ = new Subject();
+    checkedChange = new EventEmitter();
+    toggle = new EventEmitter();
+    _onChange = () => { };
+    onTouched = () => { };
+    get formControl() {
+        if (!this.controlName || !this.controlContainer?.control)
+            return null;
+        return (this.controlContainer.control.get(this.controlName) ?? null);
+    }
+    ngOnInit() {
+        const ctrl = this.formControl;
+        if (!ctrl)
+            return;
+        ctrl.valueChanges
+            .pipe(startWith(ctrl.value), takeUntil(this.destroy$))
+            .subscribe((val) => {
+            this.checked = !!val;
+            this.isDisabled = ctrl.disabled;
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onToggle() {
+        if (this.isDisabled)
+            return;
+        const ctrl = this.formControl;
+        const newValue = !this.checked;
+        if (ctrl) {
+            ctrl.setValue(newValue);
+            ctrl.markAsTouched();
+        }
+        else {
+            this.checked = newValue;
+            this._onChange(newValue);
+            this.onTouched();
+        }
+        this.checkedChange.emit(newValue);
+        this.toggle.emit(newValue);
+    }
+    writeValue(value) {
+        this.checked = !!value;
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ToggleOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: ToggleOptionComponent, isStandalone: true, selector: "ud-toggle-option", inputs: { title: "title", description: "description", checked: "checked", controlName: "controlName", size: "size" }, outputs: { checkedChange: "checkedChange", toggle: "toggle" }, host: { properties: { "class.size-sm": "this.isSm", "class.size-md": "this.isMd", "class.size-lg": "this.isLg" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ToggleOptionComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"ud-toggle-option\"\n  [class.checked]=\"checked\"\n  [class.disabled]=\"isDisabled\"\n  role=\"switch\"\n  [attr.aria-checked]=\"checked\"\n  [attr.aria-label]=\"title\"\n  [disabled]=\"isDisabled || null\"\n  (click)=\"onToggle()\">\n  <div class=\"toggle-option-body\">\n    <span class=\"toggle-option-title\">{{ title }}</span>\n    @if (description) {\n      <span class=\"toggle-option-desc\">{{ description }}</span>\n    }\n  </div>\n  <span class=\"track\" aria-hidden=\"true\">\n    <span class=\"thumb\">\n      <span class=\"thumb-core\"></span>\n    </span>\n  </span>\n</button>\n", styles: [":host{display:block;--to-track-off: #d2d6de;--to-track-on: #1b2535;--to-thumb: #ffffff;--to-glow: rgba(27, 37, 53, .14);--to-duration: .28s;--to-spring: cubic-bezier(.34, 1.56, .64, 1);--track-w: 40px;--track-h: 22px;--thumb-d: 16px;--thumb-inset: 3px}:host(.size-sm){--track-w: 32px;--track-h: 18px;--thumb-d: 12px;--thumb-inset: 3px}:host(.size-lg){--track-w: 52px;--track-h: 28px;--thumb-d: 22px;--thumb-inset: 3px}.ud-toggle-option{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:12px 14px;background:transparent;border:1px solid transparent;border-radius:12px;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:background .18s ease,border-color .18s ease}.ud-toggle-option:hover:not(.disabled){background:#fafbfd}.ud-toggle-option.checked{background:#eef1f6;border-color:#1b25352e}.ud-toggle-option.disabled{opacity:.38;cursor:not-allowed;pointer-events:none}.ud-toggle-option:focus-visible{outline:2px solid #1b2535;outline-offset:2px}.toggle-option-body{display:flex;flex-direction:column;gap:2px;min-width:0}.toggle-option-title{font-size:14px;font-weight:600;color:#2a3548;line-height:1.3}:host(.size-sm) .toggle-option-title{font-size:13px}:host(.size-lg) .toggle-option-title{font-size:15px}.toggle-option-desc{font-size:12px;color:#6b7585;line-height:1.4}:host(.size-sm) .toggle-option-desc{font-size:11px}:host(.size-lg) .toggle-option-desc{font-size:13px}.track{position:relative;display:block;flex-shrink:0;width:var(--track-w);height:var(--track-h);border-radius:999px;background:var(--to-track-off);box-shadow:inset 0 1px 3px #0000002e,inset 0 0 0 1px #0000000f;transition:background var(--to-duration) ease}.ud-toggle-option.checked .track{background:var(--to-track-on);box-shadow:inset 0 1px 3px #0000004d,inset 0 0 0 1px #00000026}.thumb{position:absolute;top:50%;left:0;width:var(--thumb-d);height:var(--thumb-d);border-radius:50%;background:var(--to-thumb);transform:translateY(-50%) translate(var(--thumb-inset));box-shadow:0 1px 2px #00000038,0 2px 6px #00000024;transition:transform var(--to-duration) var(--to-spring),box-shadow .22s ease;display:flex;align-items:center;justify-content:center}.ud-toggle-option.checked .thumb{transform:translateY(-50%) translate(calc(var(--track-w) - var(--thumb-d) - var(--thumb-inset)));box-shadow:0 1px 2px #0000002e,0 2px 6px #0000001a,0 0 0 4px var(--to-glow)}.thumb-core{width:4px;height:4px;border-radius:50%;background:#0000001a;transition:opacity .2s ease,transform .3s var(--to-spring)}:host(.size-sm) .thumb-core{display:none}.ud-toggle-option.checked .thumb-core{background:#1b25352e;transform:scale(1.4)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], viewProviders: [
+            {
+                provide: ControlContainer,
+                useFactory: () => inject(ControlContainer, { optional: true, skipSelf: true }),
+            },
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ToggleOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-toggle-option', standalone: true, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ToggleOptionComponent),
+                            multi: true,
+                        },
+                    ], viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useFactory: () => inject(ControlContainer, { optional: true, skipSelf: true }),
+                        },
+                    ], template: "<button\n  type=\"button\"\n  class=\"ud-toggle-option\"\n  [class.checked]=\"checked\"\n  [class.disabled]=\"isDisabled\"\n  role=\"switch\"\n  [attr.aria-checked]=\"checked\"\n  [attr.aria-label]=\"title\"\n  [disabled]=\"isDisabled || null\"\n  (click)=\"onToggle()\">\n  <div class=\"toggle-option-body\">\n    <span class=\"toggle-option-title\">{{ title }}</span>\n    @if (description) {\n      <span class=\"toggle-option-desc\">{{ description }}</span>\n    }\n  </div>\n  <span class=\"track\" aria-hidden=\"true\">\n    <span class=\"thumb\">\n      <span class=\"thumb-core\"></span>\n    </span>\n  </span>\n</button>\n", styles: [":host{display:block;--to-track-off: #d2d6de;--to-track-on: #1b2535;--to-thumb: #ffffff;--to-glow: rgba(27, 37, 53, .14);--to-duration: .28s;--to-spring: cubic-bezier(.34, 1.56, .64, 1);--track-w: 40px;--track-h: 22px;--thumb-d: 16px;--thumb-inset: 3px}:host(.size-sm){--track-w: 32px;--track-h: 18px;--thumb-d: 12px;--thumb-inset: 3px}:host(.size-lg){--track-w: 52px;--track-h: 28px;--thumb-d: 22px;--thumb-inset: 3px}.ud-toggle-option{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:12px 14px;background:transparent;border:1px solid transparent;border-radius:12px;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:background .18s ease,border-color .18s ease}.ud-toggle-option:hover:not(.disabled){background:#fafbfd}.ud-toggle-option.checked{background:#eef1f6;border-color:#1b25352e}.ud-toggle-option.disabled{opacity:.38;cursor:not-allowed;pointer-events:none}.ud-toggle-option:focus-visible{outline:2px solid #1b2535;outline-offset:2px}.toggle-option-body{display:flex;flex-direction:column;gap:2px;min-width:0}.toggle-option-title{font-size:14px;font-weight:600;color:#2a3548;line-height:1.3}:host(.size-sm) .toggle-option-title{font-size:13px}:host(.size-lg) .toggle-option-title{font-size:15px}.toggle-option-desc{font-size:12px;color:#6b7585;line-height:1.4}:host(.size-sm) .toggle-option-desc{font-size:11px}:host(.size-lg) .toggle-option-desc{font-size:13px}.track{position:relative;display:block;flex-shrink:0;width:var(--track-w);height:var(--track-h);border-radius:999px;background:var(--to-track-off);box-shadow:inset 0 1px 3px #0000002e,inset 0 0 0 1px #0000000f;transition:background var(--to-duration) ease}.ud-toggle-option.checked .track{background:var(--to-track-on);box-shadow:inset 0 1px 3px #0000004d,inset 0 0 0 1px #00000026}.thumb{position:absolute;top:50%;left:0;width:var(--thumb-d);height:var(--thumb-d);border-radius:50%;background:var(--to-thumb);transform:translateY(-50%) translate(var(--thumb-inset));box-shadow:0 1px 2px #00000038,0 2px 6px #00000024;transition:transform var(--to-duration) var(--to-spring),box-shadow .22s ease;display:flex;align-items:center;justify-content:center}.ud-toggle-option.checked .thumb{transform:translateY(-50%) translate(calc(var(--track-w) - var(--thumb-d) - var(--thumb-inset)));box-shadow:0 1px 2px #0000002e,0 2px 6px #0000001a,0 0 0 4px var(--to-glow)}.thumb-core{width:4px;height:4px;border-radius:50%;background:#0000001a;transition:opacity .2s ease,transform .3s var(--to-spring)}:host(.size-sm) .thumb-core{display:none}.ud-toggle-option.checked .thumb-core{background:#1b25352e;transform:scale(1.4)}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], isSm: [{
+                type: HostBinding,
+                args: ['class.size-sm']
+            }], isMd: [{
+                type: HostBinding,
+                args: ['class.size-md']
+            }], isLg: [{
+                type: HostBinding,
+                args: ['class.size-lg']
+            }], checkedChange: [{
+                type: Output
+            }], toggle: [{
+                type: Output
+            }] } });
+
 var FeatureFlagKey;
 (function (FeatureFlagKey) {
     FeatureFlagKey["ABSENCES"] = "ABSENCES";
@@ -3191,5 +3328,5 @@ const generateTimeOptions = (start, end, intervalMinutes = 5) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ApplicationStatus, AutocompleteComponent, CapitalizePipe, CarouselComponent, CustomInputComponent, CustomSnackbarComponent, CustomTableComponent, DateInputComponent, DateOperator, DateRangeInputComponent, DynamicComponentComponent, EditViewComponent, EditViewSectionDirective, FeatureFlagKey, FileInputComponent, FilterType, IconColor, KpiComponent, KpiDataType, KpiPillType, KpiProgressBarType, KpiVariant, LoadingStatus, ModalComponent, ModalInputType, MultiSelectComponent, NumberOperator, PhoneInputComponent, PillComponent, PillToggleComponent, PluralizePipe, ProgressBarComponent, SafePipe, SingularPipe, SnackbarType, StringOperator, SummaryViewComponent, TableDisplayColumnType, TabsComponent, TelInputComponent, TextInputComponent, TextareaComponent, TimePickerComponent, ToObservablePipe, ToggleComponent, TranslateWrapperService, UdButtonComponent, UdButtonToggleComponent, UdPreviewContainerComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray, withLoadingState };
+export { ApplicationStatus, AutocompleteComponent, CapitalizePipe, CarouselComponent, CustomInputComponent, CustomSnackbarComponent, CustomTableComponent, DateInputComponent, DateOperator, DateRangeInputComponent, DynamicComponentComponent, EditViewComponent, EditViewSectionDirective, FeatureFlagKey, FileInputComponent, FilterType, IconColor, KpiComponent, KpiDataType, KpiPillType, KpiProgressBarType, KpiVariant, LoadingStatus, ModalComponent, ModalInputType, MultiSelectComponent, NumberOperator, PhoneInputComponent, PillComponent, PillToggleComponent, PluralizePipe, ProgressBarComponent, SafePipe, SingularPipe, SnackbarType, StringOperator, SummaryViewComponent, TableDisplayColumnType, TabsComponent, TelInputComponent, TextInputComponent, TextareaComponent, TimePickerComponent, ToObservablePipe, ToggleComponent, ToggleOptionComponent, TranslateWrapperService, UdButtonComponent, UdButtonToggleComponent, UdPreviewContainerComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray, withLoadingState };
 //# sourceMappingURL=ud-components.mjs.map