ud-components 0.5.0 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -37,15 +37,15 @@ import * as i2$2 from 'ngx-skeleton-loader';
|
|
|
37
37
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
38
38
|
import * as i2$6 from 'ngx-file-drop';
|
|
39
39
|
import { NgxFileDropModule } from 'ngx-file-drop';
|
|
40
|
-
import * as i1$
|
|
41
|
-
import { MAT_DIALOG_DATA, MatDialogClose, MatDialogActions,
|
|
40
|
+
import * as i1$4 from '@angular/material/dialog';
|
|
41
|
+
import { MAT_DIALOG_DATA, MatDialogContent, MatDialogClose, MatDialogActions, MatDialogTitle, MatDialogConfig } from '@angular/material/dialog';
|
|
42
42
|
import * as i2$3 from '@angular/material/autocomplete';
|
|
43
43
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
44
44
|
import * as i2$4 from '@angular/cdk/text-field';
|
|
45
45
|
import { TextFieldModule } from '@angular/cdk/text-field';
|
|
46
46
|
import * as i2$5 from '@angular/material/timepicker';
|
|
47
47
|
import { MatTimepickerModule } from '@angular/material/timepicker';
|
|
48
|
-
import * as i1$
|
|
48
|
+
import * as i1$5 from '@angular/platform-browser';
|
|
49
49
|
import { MatFormField as MatFormField$1 } from '@angular/material/form-field';
|
|
50
50
|
import { signalStoreFeature, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
|
|
51
51
|
|
|
@@ -2481,14 +2481,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2481
2481
|
|
|
2482
2482
|
class ModalComponent {
|
|
2483
2483
|
data;
|
|
2484
|
+
dialogRef;
|
|
2484
2485
|
form;
|
|
2485
2486
|
modalInputType = ModalInputType;
|
|
2486
2487
|
showClose = true;
|
|
2487
|
-
// Picture related
|
|
2488
2488
|
pictureUrls;
|
|
2489
2489
|
currentPictureIndex;
|
|
2490
|
-
constructor(data) {
|
|
2490
|
+
constructor(data, dialogRef) {
|
|
2491
2491
|
this.data = data;
|
|
2492
|
+
this.dialogRef = dialogRef;
|
|
2492
2493
|
if (this.data.formGroup) {
|
|
2493
2494
|
this.form = this.data.formGroup;
|
|
2494
2495
|
}
|
|
@@ -2500,6 +2501,18 @@ class ModalComponent {
|
|
|
2500
2501
|
this.showClose = this.data.showClose;
|
|
2501
2502
|
}
|
|
2502
2503
|
}
|
|
2504
|
+
close() {
|
|
2505
|
+
this.dialogRef.close();
|
|
2506
|
+
}
|
|
2507
|
+
onAction() {
|
|
2508
|
+
if (this.form) {
|
|
2509
|
+
this.data.save(this.form.getRawValue());
|
|
2510
|
+
}
|
|
2511
|
+
else {
|
|
2512
|
+
this.data.confirm?.();
|
|
2513
|
+
}
|
|
2514
|
+
this.dialogRef.close();
|
|
2515
|
+
}
|
|
2503
2516
|
previous() {
|
|
2504
2517
|
if (this.currentPictureIndex != undefined && this.currentPictureIndex > 0) {
|
|
2505
2518
|
this.currentPictureIndex -= 1;
|
|
@@ -2511,8 +2524,8 @@ class ModalComponent {
|
|
|
2511
2524
|
this.currentPictureIndex += 1;
|
|
2512
2525
|
}
|
|
2513
2526
|
}
|
|
2514
|
-
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 });
|
|
2515
|
-
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"] }] });
|
|
2527
|
+
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 });
|
|
2528
|
+
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 0 auto;height:96px;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"] }] });
|
|
2516
2529
|
}
|
|
2517
2530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ModalComponent, decorators: [{
|
|
2518
2531
|
type: Component,
|
|
@@ -2521,7 +2534,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2521
2534
|
SingularPipe,
|
|
2522
2535
|
TranslatePipe,
|
|
2523
2536
|
ReactiveFormsModule,
|
|
2524
|
-
MatButton,
|
|
2525
2537
|
MatDialogClose,
|
|
2526
2538
|
MatDialogActions,
|
|
2527
2539
|
MatDialogContent,
|
|
@@ -2541,11 +2553,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2541
2553
|
DateRangeInputComponent,
|
|
2542
2554
|
TimePickerComponent,
|
|
2543
2555
|
PhoneInputComponent,
|
|
2544
|
-
|
|
2556
|
+
UdButtonComponent,
|
|
2557
|
+
], 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 0 auto;height:96px;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"] }]
|
|
2545
2558
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2546
2559
|
type: Inject,
|
|
2547
2560
|
args: [MAT_DIALOG_DATA]
|
|
2548
|
-
}] }] });
|
|
2561
|
+
}] }, { type: i1$4.MatDialogRef }] });
|
|
2549
2562
|
|
|
2550
2563
|
class SafePipe {
|
|
2551
2564
|
sanitizer;
|
|
@@ -2555,7 +2568,7 @@ class SafePipe {
|
|
|
2555
2568
|
transform(url) {
|
|
2556
2569
|
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
|
|
2557
2570
|
}
|
|
2558
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SafePipe, deps: [{ token: i1$
|
|
2571
|
+
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 });
|
|
2559
2572
|
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" });
|
|
2560
2573
|
}
|
|
2561
2574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SafePipe, decorators: [{
|
|
@@ -2563,7 +2576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2563
2576
|
args: [{
|
|
2564
2577
|
name: 'safe',
|
|
2565
2578
|
}]
|
|
2566
|
-
}], ctorParameters: () => [{ type: i1$
|
|
2579
|
+
}], ctorParameters: () => [{ type: i1$5.DomSanitizer }] });
|
|
2567
2580
|
|
|
2568
2581
|
class FileInputComponent {
|
|
2569
2582
|
dialog;
|
|
@@ -2653,7 +2666,7 @@ class FileInputComponent {
|
|
|
2653
2666
|
dialogConfig.width = '50vw';
|
|
2654
2667
|
this.dialog.open(ModalComponent, dialogConfig);
|
|
2655
2668
|
}
|
|
2656
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: FileInputComponent, deps: [{ token: i1$
|
|
2669
|
+
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 });
|
|
2657
2670
|
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"] }] });
|
|
2658
2671
|
}
|
|
2659
2672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
@@ -2668,7 +2681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2668
2681
|
SafePipe,
|
|
2669
2682
|
UdButtonComponent,
|
|
2670
2683
|
], 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"] }]
|
|
2671
|
-
}], ctorParameters: () => [{ type: i1$
|
|
2684
|
+
}], ctorParameters: () => [{ type: i1$4.MatDialog }], propDecorators: { accept: [{
|
|
2672
2685
|
type: Input
|
|
2673
2686
|
}], label: [{
|
|
2674
2687
|
type: Input
|
|
@@ -3113,6 +3126,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
3113
3126
|
type: Input
|
|
3114
3127
|
}] } });
|
|
3115
3128
|
|
|
3129
|
+
class ToggleOptionComponent {
|
|
3130
|
+
title;
|
|
3131
|
+
description;
|
|
3132
|
+
checked = false;
|
|
3133
|
+
controlName;
|
|
3134
|
+
size = 'md';
|
|
3135
|
+
get isSm() {
|
|
3136
|
+
return this.size === 'sm';
|
|
3137
|
+
}
|
|
3138
|
+
get isMd() {
|
|
3139
|
+
return this.size === 'md';
|
|
3140
|
+
}
|
|
3141
|
+
get isLg() {
|
|
3142
|
+
return this.size === 'lg';
|
|
3143
|
+
}
|
|
3144
|
+
isDisabled = false;
|
|
3145
|
+
controlContainer = inject(ControlContainer, {
|
|
3146
|
+
optional: true,
|
|
3147
|
+
skipSelf: true,
|
|
3148
|
+
});
|
|
3149
|
+
destroy$ = new Subject();
|
|
3150
|
+
checkedChange = new EventEmitter();
|
|
3151
|
+
toggle = new EventEmitter();
|
|
3152
|
+
_onChange = () => { };
|
|
3153
|
+
onTouched = () => { };
|
|
3154
|
+
get formControl() {
|
|
3155
|
+
if (!this.controlName || !this.controlContainer?.control)
|
|
3156
|
+
return null;
|
|
3157
|
+
return (this.controlContainer.control.get(this.controlName) ?? null);
|
|
3158
|
+
}
|
|
3159
|
+
ngOnInit() {
|
|
3160
|
+
const ctrl = this.formControl;
|
|
3161
|
+
if (!ctrl)
|
|
3162
|
+
return;
|
|
3163
|
+
ctrl.valueChanges
|
|
3164
|
+
.pipe(startWith(ctrl.value), takeUntil(this.destroy$))
|
|
3165
|
+
.subscribe((val) => {
|
|
3166
|
+
this.checked = !!val;
|
|
3167
|
+
this.isDisabled = ctrl.disabled;
|
|
3168
|
+
});
|
|
3169
|
+
}
|
|
3170
|
+
ngOnDestroy() {
|
|
3171
|
+
this.destroy$.next();
|
|
3172
|
+
this.destroy$.complete();
|
|
3173
|
+
}
|
|
3174
|
+
onToggle() {
|
|
3175
|
+
if (this.isDisabled)
|
|
3176
|
+
return;
|
|
3177
|
+
const ctrl = this.formControl;
|
|
3178
|
+
const newValue = !this.checked;
|
|
3179
|
+
if (ctrl) {
|
|
3180
|
+
ctrl.setValue(newValue);
|
|
3181
|
+
ctrl.markAsTouched();
|
|
3182
|
+
}
|
|
3183
|
+
else {
|
|
3184
|
+
this.checked = newValue;
|
|
3185
|
+
this._onChange(newValue);
|
|
3186
|
+
this.onTouched();
|
|
3187
|
+
}
|
|
3188
|
+
this.checkedChange.emit(newValue);
|
|
3189
|
+
this.toggle.emit(newValue);
|
|
3190
|
+
}
|
|
3191
|
+
writeValue(value) {
|
|
3192
|
+
this.checked = !!value;
|
|
3193
|
+
}
|
|
3194
|
+
registerOnChange(fn) {
|
|
3195
|
+
this._onChange = fn;
|
|
3196
|
+
}
|
|
3197
|
+
registerOnTouched(fn) {
|
|
3198
|
+
this.onTouched = fn;
|
|
3199
|
+
}
|
|
3200
|
+
setDisabledState(isDisabled) {
|
|
3201
|
+
this.isDisabled = isDisabled;
|
|
3202
|
+
}
|
|
3203
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ToggleOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3204
|
+
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: [
|
|
3205
|
+
{
|
|
3206
|
+
provide: NG_VALUE_ACCESSOR,
|
|
3207
|
+
useExisting: forwardRef(() => ToggleOptionComponent),
|
|
3208
|
+
multi: true,
|
|
3209
|
+
},
|
|
3210
|
+
], 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: [
|
|
3211
|
+
{
|
|
3212
|
+
provide: ControlContainer,
|
|
3213
|
+
useFactory: () => inject(ControlContainer, { optional: true, skipSelf: true }),
|
|
3214
|
+
},
|
|
3215
|
+
] });
|
|
3216
|
+
}
|
|
3217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ToggleOptionComponent, decorators: [{
|
|
3218
|
+
type: Component,
|
|
3219
|
+
args: [{ selector: 'ud-toggle-option', standalone: true, imports: [CommonModule], providers: [
|
|
3220
|
+
{
|
|
3221
|
+
provide: NG_VALUE_ACCESSOR,
|
|
3222
|
+
useExisting: forwardRef(() => ToggleOptionComponent),
|
|
3223
|
+
multi: true,
|
|
3224
|
+
},
|
|
3225
|
+
], viewProviders: [
|
|
3226
|
+
{
|
|
3227
|
+
provide: ControlContainer,
|
|
3228
|
+
useFactory: () => inject(ControlContainer, { optional: true, skipSelf: true }),
|
|
3229
|
+
},
|
|
3230
|
+
], 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"] }]
|
|
3231
|
+
}], propDecorators: { title: [{
|
|
3232
|
+
type: Input
|
|
3233
|
+
}], description: [{
|
|
3234
|
+
type: Input
|
|
3235
|
+
}], checked: [{
|
|
3236
|
+
type: Input
|
|
3237
|
+
}], controlName: [{
|
|
3238
|
+
type: Input
|
|
3239
|
+
}], size: [{
|
|
3240
|
+
type: Input
|
|
3241
|
+
}], isSm: [{
|
|
3242
|
+
type: HostBinding,
|
|
3243
|
+
args: ['class.size-sm']
|
|
3244
|
+
}], isMd: [{
|
|
3245
|
+
type: HostBinding,
|
|
3246
|
+
args: ['class.size-md']
|
|
3247
|
+
}], isLg: [{
|
|
3248
|
+
type: HostBinding,
|
|
3249
|
+
args: ['class.size-lg']
|
|
3250
|
+
}], checkedChange: [{
|
|
3251
|
+
type: Output
|
|
3252
|
+
}], toggle: [{
|
|
3253
|
+
type: Output
|
|
3254
|
+
}] } });
|
|
3255
|
+
|
|
3116
3256
|
var FeatureFlagKey;
|
|
3117
3257
|
(function (FeatureFlagKey) {
|
|
3118
3258
|
FeatureFlagKey["ABSENCES"] = "ABSENCES";
|
|
@@ -3191,5 +3331,5 @@ const generateTimeOptions = (start, end, intervalMinutes = 5) => {
|
|
|
3191
3331
|
* Generated bundle index. Do not edit.
|
|
3192
3332
|
*/
|
|
3193
3333
|
|
|
3194
|
-
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 };
|
|
3334
|
+
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 };
|
|
3195
3335
|
//# sourceMappingURL=ud-components.mjs.map
|