ud-components 0.5.12 → 0.5.14
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.
|
@@ -11,7 +11,7 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
|
|
|
11
11
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
12
12
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
13
13
|
import * as i2$1 from '@angular/material/button';
|
|
14
|
-
import { MatButtonModule, MatIconButton
|
|
14
|
+
import { MatButtonModule, MatIconButton } from '@angular/material/button';
|
|
15
15
|
import { MatCardContent, MatCardHeader, MatCard } from '@angular/material/card';
|
|
16
16
|
import { MatCheckbox } from '@angular/material/checkbox';
|
|
17
17
|
import * as i2 from '@angular/material/datepicker';
|
|
@@ -46,6 +46,8 @@ 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
48
|
import * as i1$5 from '@angular/platform-browser';
|
|
49
|
+
import * as i1$6 from '@angular/material/stepper';
|
|
50
|
+
import { MatStepperModule } from '@angular/material/stepper';
|
|
49
51
|
import { MatFormField as MatFormField$1 } from '@angular/material/form-field';
|
|
50
52
|
import { signalStoreFeature, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
|
|
51
53
|
|
|
@@ -1757,7 +1759,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
1757
1759
|
MatSort,
|
|
1758
1760
|
MatLabel,
|
|
1759
1761
|
ReactiveFormsModule,
|
|
1760
|
-
MatButton,
|
|
1761
1762
|
MatMenuTrigger,
|
|
1762
1763
|
MatFormField,
|
|
1763
1764
|
MatInput,
|
|
@@ -2076,7 +2077,7 @@ class AutocompleteComponent {
|
|
|
2076
2077
|
this.options.forEach(o => this.labelMap.set(o.value, o.label));
|
|
2077
2078
|
}
|
|
2078
2079
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2079
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: AutocompleteComponent, isStandalone: true, selector: "ud-autocomplete", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", icon: "icon", iconFontSet: "iconFontSet", options: "options", loading: "loading", disabled: "disabled", hint: "hint", size: "size" }, outputs: { searchChange: "searchChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ud-input\"\n [class]=\"'ud-input--' + size\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"formControl.disabled\"\n [class.ud-input--error]=\"formControl.invalid && formControl.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-input-' + controlName\"\n [formControl]=\"searchControl\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n (focus)=\"focused = true; onFocus()\"\n (blur)=\"focused = false\" />\n @if (loading) {\n <mat-icon class=\"ud-input__suffix ud-input__loading\" fontSet=\"material-icons-outlined\">sync</mat-icon>\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n class=\"ud-autocomplete-panel\"\n (optionSelected)=\"onOptionSelected($event.option.value)\">\n @for (option of filteredOptions; track option.value) {\n <mat-option [value]=\"option.value\">\n {{ option.label }}\n </mat-option>\n }\n </mat-autocomplete>\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-input--small .ud-input__wrapper{height:32px;border-radius:7px;padding:0 10px;gap:6px}.ud-input--small .ud-input__field{font-size:13px}.ud-input--small .ud-input__icon,.ud-input--small .ud-input__suffix{font-size:16px;width:16px;height:16px}.ud-input--medium .ud-input__wrapper{height:40px;border-radius:8px;padding:0 12px;gap:7px}.ud-input--medium .ud-input__field{font-size:14px}.ud-input--medium .ud-input__icon,.ud-input--medium .ud-input__suffix{font-size:18px;width:18px;height:18px}.ud-input--large .ud-input__wrapper{height:48px;border-radius:9px;padding:0 14px;gap:8px}.ud-input--large .ud-input__field{font-size:15px}.ud-input--large .ud-input__icon,.ud-input--large .ud-input__suffix{font-size:20px;width:20px;height:20px}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel{background:#fff!important;border-radius:10px!important;box-shadow:0 8px 24px #1b25351f,0 2px 8px #1b25350f!important;padding:6px 0!important;overflow:
|
|
2080
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: AutocompleteComponent, isStandalone: true, selector: "ud-autocomplete", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", icon: "icon", iconFontSet: "iconFontSet", options: "options", loading: "loading", disabled: "disabled", hint: "hint", size: "size" }, outputs: { searchChange: "searchChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ud-input\"\n [class]=\"'ud-input--' + size\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"formControl.disabled\"\n [class.ud-input--error]=\"formControl.invalid && formControl.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-input-' + controlName\"\n [formControl]=\"searchControl\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n (focus)=\"focused = true; onFocus()\"\n (blur)=\"focused = false\" />\n @if (loading) {\n <mat-icon class=\"ud-input__suffix ud-input__loading\" fontSet=\"material-icons-outlined\">sync</mat-icon>\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n class=\"ud-autocomplete-panel\"\n (optionSelected)=\"onOptionSelected($event.option.value)\">\n @for (option of filteredOptions; track option.value) {\n <mat-option [value]=\"option.value\">\n {{ option.label }}\n </mat-option>\n }\n </mat-autocomplete>\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-input--small .ud-input__wrapper{height:32px;border-radius:7px;padding:0 10px;gap:6px}.ud-input--small .ud-input__field{font-size:13px}.ud-input--small .ud-input__icon,.ud-input--small .ud-input__suffix{font-size:16px;width:16px;height:16px}.ud-input--medium .ud-input__wrapper{height:40px;border-radius:8px;padding:0 12px;gap:7px}.ud-input--medium .ud-input__field{font-size:14px}.ud-input--medium .ud-input__icon,.ud-input--medium .ud-input__suffix{font-size:18px;width:18px;height:18px}.ud-input--large .ud-input__wrapper{height:48px;border-radius:9px;padding:0 14px;gap:8px}.ud-input--large .ud-input__field{font-size:15px}.ud-input--large .ud-input__icon,.ud-input--large .ud-input__suffix{font-size:20px;width:20px;height:20px}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel{background:#fff!important;border-radius:10px!important;box-shadow:0 8px 24px #1b25351f,0 2px 8px #1b25350f!important;padding:6px 0!important;overflow-y:auto}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important;min-height:44px!important;padding:0 1.25rem!important;transition:background .12s ease}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background:#f4f5f7!important}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option.mdc-list-item--selected{background:#1b25350d!important}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#1b2535!important;font-weight:600!important}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }], viewProviders: [
|
|
2080
2081
|
{
|
|
2081
2082
|
provide: ControlContainer,
|
|
2082
2083
|
useFactory: () => inject(ControlContainer, { skipSelf: true }),
|
|
@@ -2090,7 +2091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2090
2091
|
provide: ControlContainer,
|
|
2091
2092
|
useFactory: () => inject(ControlContainer, { skipSelf: true }),
|
|
2092
2093
|
},
|
|
2093
|
-
], template: "<div\n class=\"ud-input\"\n [class]=\"'ud-input--' + size\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"formControl.disabled\"\n [class.ud-input--error]=\"formControl.invalid && formControl.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-input-' + controlName\"\n [formControl]=\"searchControl\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n (focus)=\"focused = true; onFocus()\"\n (blur)=\"focused = false\" />\n @if (loading) {\n <mat-icon class=\"ud-input__suffix ud-input__loading\" fontSet=\"material-icons-outlined\">sync</mat-icon>\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n class=\"ud-autocomplete-panel\"\n (optionSelected)=\"onOptionSelected($event.option.value)\">\n @for (option of filteredOptions; track option.value) {\n <mat-option [value]=\"option.value\">\n {{ option.label }}\n </mat-option>\n }\n </mat-autocomplete>\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-input--small .ud-input__wrapper{height:32px;border-radius:7px;padding:0 10px;gap:6px}.ud-input--small .ud-input__field{font-size:13px}.ud-input--small .ud-input__icon,.ud-input--small .ud-input__suffix{font-size:16px;width:16px;height:16px}.ud-input--medium .ud-input__wrapper{height:40px;border-radius:8px;padding:0 12px;gap:7px}.ud-input--medium .ud-input__field{font-size:14px}.ud-input--medium .ud-input__icon,.ud-input--medium .ud-input__suffix{font-size:18px;width:18px;height:18px}.ud-input--large .ud-input__wrapper{height:48px;border-radius:9px;padding:0 14px;gap:8px}.ud-input--large .ud-input__field{font-size:15px}.ud-input--large .ud-input__icon,.ud-input--large .ud-input__suffix{font-size:20px;width:20px;height:20px}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel{background:#fff!important;border-radius:10px!important;box-shadow:0 8px 24px #1b25351f,0 2px 8px #1b25350f!important;padding:6px 0!important;overflow:
|
|
2094
|
+
], template: "<div\n class=\"ud-input\"\n [class]=\"'ud-input--' + size\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"formControl.disabled\"\n [class.ud-input--error]=\"formControl.invalid && formControl.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-input-' + controlName\"\n [formControl]=\"searchControl\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n (focus)=\"focused = true; onFocus()\"\n (blur)=\"focused = false\" />\n @if (loading) {\n <mat-icon class=\"ud-input__suffix ud-input__loading\" fontSet=\"material-icons-outlined\">sync</mat-icon>\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n class=\"ud-autocomplete-panel\"\n (optionSelected)=\"onOptionSelected($event.option.value)\">\n @for (option of filteredOptions; track option.value) {\n <mat-option [value]=\"option.value\">\n {{ option.label }}\n </mat-option>\n }\n </mat-autocomplete>\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-input--small .ud-input__wrapper{height:32px;border-radius:7px;padding:0 10px;gap:6px}.ud-input--small .ud-input__field{font-size:13px}.ud-input--small .ud-input__icon,.ud-input--small .ud-input__suffix{font-size:16px;width:16px;height:16px}.ud-input--medium .ud-input__wrapper{height:40px;border-radius:8px;padding:0 12px;gap:7px}.ud-input--medium .ud-input__field{font-size:14px}.ud-input--medium .ud-input__icon,.ud-input--medium .ud-input__suffix{font-size:18px;width:18px;height:18px}.ud-input--large .ud-input__wrapper{height:48px;border-radius:9px;padding:0 14px;gap:8px}.ud-input--large .ud-input__field{font-size:15px}.ud-input--large .ud-input__icon,.ud-input--large .ud-input__suffix{font-size:20px;width:20px;height:20px}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel{background:#fff!important;border-radius:10px!important;box-shadow:0 8px 24px #1b25351f,0 2px 8px #1b25350f!important;padding:6px 0!important;overflow-y:auto}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important;min-height:44px!important;padding:0 1.25rem!important;transition:background .12s ease}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background:#f4f5f7!important}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option.mdc-list-item--selected{background:#1b25350d!important}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#1b2535!important;font-weight:600!important}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important}\n"] }]
|
|
2094
2095
|
}], propDecorators: { controlName: [{
|
|
2095
2096
|
type: Input,
|
|
2096
2097
|
args: [{ required: true }]
|
|
@@ -2886,6 +2887,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2886
2887
|
type: Input
|
|
2887
2888
|
}] } });
|
|
2888
2889
|
|
|
2890
|
+
class UdStepContentDirective {
|
|
2891
|
+
templateRef;
|
|
2892
|
+
constructor(templateRef) {
|
|
2893
|
+
this.templateRef = templateRef;
|
|
2894
|
+
}
|
|
2895
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdStepContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2896
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: UdStepContentDirective, isStandalone: true, selector: "[udStepContent]", ngImport: i0 });
|
|
2897
|
+
}
|
|
2898
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdStepContentDirective, decorators: [{
|
|
2899
|
+
type: Directive,
|
|
2900
|
+
args: [{
|
|
2901
|
+
selector: '[udStepContent]',
|
|
2902
|
+
standalone: true,
|
|
2903
|
+
}]
|
|
2904
|
+
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
2905
|
+
|
|
2906
|
+
class UdStepperComponent {
|
|
2907
|
+
_cdr;
|
|
2908
|
+
steps = [];
|
|
2909
|
+
linear = true;
|
|
2910
|
+
selectedIndex = 0;
|
|
2911
|
+
selectedIndexChange = new EventEmitter();
|
|
2912
|
+
stepChange = new EventEmitter();
|
|
2913
|
+
_contentTemplates;
|
|
2914
|
+
_stepper;
|
|
2915
|
+
contentList = [];
|
|
2916
|
+
constructor(_cdr) {
|
|
2917
|
+
this._cdr = _cdr;
|
|
2918
|
+
}
|
|
2919
|
+
ngAfterContentInit() {
|
|
2920
|
+
this.contentList = this._contentTemplates.toArray();
|
|
2921
|
+
this._contentTemplates.changes.subscribe(() => {
|
|
2922
|
+
this.contentList = this._contentTemplates.toArray();
|
|
2923
|
+
});
|
|
2924
|
+
}
|
|
2925
|
+
onSelectionChange(event) {
|
|
2926
|
+
this.selectedIndex = event.selectedIndex;
|
|
2927
|
+
this.selectedIndexChange.emit(event.selectedIndex);
|
|
2928
|
+
this.stepChange.emit(event.selectedIndex);
|
|
2929
|
+
}
|
|
2930
|
+
next() {
|
|
2931
|
+
this._cdr.detectChanges();
|
|
2932
|
+
this._stepper.next();
|
|
2933
|
+
}
|
|
2934
|
+
previous() {
|
|
2935
|
+
this._stepper.previous();
|
|
2936
|
+
}
|
|
2937
|
+
reset() {
|
|
2938
|
+
this._stepper.reset();
|
|
2939
|
+
}
|
|
2940
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2941
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: UdStepperComponent, isStandalone: true, selector: "ud-stepper", inputs: { steps: "steps", linear: "linear", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", stepChange: "stepChange" }, queries: [{ propertyName: "_contentTemplates", predicate: UdStepContentDirective }], viewQueries: [{ propertyName: "_stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<mat-stepper\n class=\"ud-stepper\"\n [linear]=\"linear\"\n [selectedIndex]=\"selectedIndex\"\n (selectionChange)=\"onSelectionChange($event)\"\n #stepper>\n @for (step of steps; track step.label; let i = $index) {\n <mat-step [label]=\"step.label\" [completed]=\"step.completed ?? false\">\n @if (contentList[i]) {\n <ng-container *ngTemplateOutlet=\"contentList[i].templateRef\" />\n }\n </mat-step>\n }\n</mat-stepper>\n", styles: [":host{display:block}::ng-deep .ud-stepper{background:transparent;font-family:DM Sans,system-ui,sans-serif}::ng-deep .ud-stepper .mat-step-header{border-radius:var(--eu-radius-sm, 6px);transition:background .18s ease;padding:.75rem 1rem}::ng-deep .ud-stepper .mat-step-header:hover{background:var(--eu-navy-dim, rgba(27, 37, 53, .08))!important}::ng-deep .ud-stepper .mat-step-header:focus-visible{outline:2px solid var(--eu-navy, #1b2535);outline-offset:2px}::ng-deep .ud-stepper .mat-step-header .mat-step-header-ripple,::ng-deep .ud-stepper .mat-step-header .mat-ripple{border-radius:var(--eu-radius-sm, 6px)}::ng-deep .ud-stepper .mat-step-icon{background:var(--eu-bg, #f4f5f7);color:var(--eu-muted, #6b7585);box-shadow:inset 0 0 0 2px var(--eu-border-mid, #c9cdd6);transition:background .18s ease,color .18s ease,box-shadow .18s ease;font-family:DM Sans,system-ui,sans-serif;font-weight:600}::ng-deep .ud-stepper .mat-step-icon.mat-step-icon-selected{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:none!important}::ng-deep .ud-stepper .mat-step-icon.mat-step-icon-state-done,::ng-deep .ud-stepper .mat-step-icon.mat-step-icon-state-edit{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:none!important}::ng-deep .ud-stepper .mat-step-label{color:var(--eu-muted, #6b7585);font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;font-weight:400;transition:color .18s ease,font-weight .18s ease}::ng-deep .ud-stepper .mat-step-label.mat-step-label-active{color:var(--eu-text, #1b2535)}::ng-deep .ud-stepper .mat-step-label.mat-step-label-selected{color:var(--eu-navy, #1b2535);font-weight:600}::ng-deep .ud-stepper .mat-stepper-horizontal-line{border-top-color:var(--eu-border, #e2e5ea)!important;margin:0!important}::ng-deep .ud-stepper .mat-stepper-vertical-line:before{border-left-color:var(--eu-border, #e2e5ea)!important}::ng-deep .ud-stepper .mat-horizontal-content-container{padding:1.5rem 0 0}::ng-deep .ud-stepper .mat-vertical-content-container{margin-left:36px;border-left:2px solid var(--eu-border, #e2e5ea);padding-left:1.25rem}::ng-deep .ud-stepper .mat-vertical-content{padding:0 0 1.5rem}::ng-deep .ud-stepper .mat-horizontal-stepper-content:not(.mat-horizontal-stepper-content-inactive){animation:ud-stepper-fade-in .2s ease}@keyframes ud-stepper-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i1$6.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i1$6.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "ngmodule", type: MatIconModule }] });
|
|
2942
|
+
}
|
|
2943
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdStepperComponent, decorators: [{
|
|
2944
|
+
type: Component,
|
|
2945
|
+
args: [{ selector: 'ud-stepper', standalone: true, imports: [NgTemplateOutlet, MatStepperModule, MatIconModule], template: "<mat-stepper\n class=\"ud-stepper\"\n [linear]=\"linear\"\n [selectedIndex]=\"selectedIndex\"\n (selectionChange)=\"onSelectionChange($event)\"\n #stepper>\n @for (step of steps; track step.label; let i = $index) {\n <mat-step [label]=\"step.label\" [completed]=\"step.completed ?? false\">\n @if (contentList[i]) {\n <ng-container *ngTemplateOutlet=\"contentList[i].templateRef\" />\n }\n </mat-step>\n }\n</mat-stepper>\n", styles: [":host{display:block}::ng-deep .ud-stepper{background:transparent;font-family:DM Sans,system-ui,sans-serif}::ng-deep .ud-stepper .mat-step-header{border-radius:var(--eu-radius-sm, 6px);transition:background .18s ease;padding:.75rem 1rem}::ng-deep .ud-stepper .mat-step-header:hover{background:var(--eu-navy-dim, rgba(27, 37, 53, .08))!important}::ng-deep .ud-stepper .mat-step-header:focus-visible{outline:2px solid var(--eu-navy, #1b2535);outline-offset:2px}::ng-deep .ud-stepper .mat-step-header .mat-step-header-ripple,::ng-deep .ud-stepper .mat-step-header .mat-ripple{border-radius:var(--eu-radius-sm, 6px)}::ng-deep .ud-stepper .mat-step-icon{background:var(--eu-bg, #f4f5f7);color:var(--eu-muted, #6b7585);box-shadow:inset 0 0 0 2px var(--eu-border-mid, #c9cdd6);transition:background .18s ease,color .18s ease,box-shadow .18s ease;font-family:DM Sans,system-ui,sans-serif;font-weight:600}::ng-deep .ud-stepper .mat-step-icon.mat-step-icon-selected{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:none!important}::ng-deep .ud-stepper .mat-step-icon.mat-step-icon-state-done,::ng-deep .ud-stepper .mat-step-icon.mat-step-icon-state-edit{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:none!important}::ng-deep .ud-stepper .mat-step-label{color:var(--eu-muted, #6b7585);font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;font-weight:400;transition:color .18s ease,font-weight .18s ease}::ng-deep .ud-stepper .mat-step-label.mat-step-label-active{color:var(--eu-text, #1b2535)}::ng-deep .ud-stepper .mat-step-label.mat-step-label-selected{color:var(--eu-navy, #1b2535);font-weight:600}::ng-deep .ud-stepper .mat-stepper-horizontal-line{border-top-color:var(--eu-border, #e2e5ea)!important;margin:0!important}::ng-deep .ud-stepper .mat-stepper-vertical-line:before{border-left-color:var(--eu-border, #e2e5ea)!important}::ng-deep .ud-stepper .mat-horizontal-content-container{padding:1.5rem 0 0}::ng-deep .ud-stepper .mat-vertical-content-container{margin-left:36px;border-left:2px solid var(--eu-border, #e2e5ea);padding-left:1.25rem}::ng-deep .ud-stepper .mat-vertical-content{padding:0 0 1.5rem}::ng-deep .ud-stepper .mat-horizontal-stepper-content:not(.mat-horizontal-stepper-content-inactive){animation:ud-stepper-fade-in .2s ease}@keyframes ud-stepper-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
2946
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
|
|
2947
|
+
type: Input
|
|
2948
|
+
}], linear: [{
|
|
2949
|
+
type: Input
|
|
2950
|
+
}], selectedIndex: [{
|
|
2951
|
+
type: Input
|
|
2952
|
+
}], selectedIndexChange: [{
|
|
2953
|
+
type: Output
|
|
2954
|
+
}], stepChange: [{
|
|
2955
|
+
type: Output
|
|
2956
|
+
}], _contentTemplates: [{
|
|
2957
|
+
type: ContentChildren,
|
|
2958
|
+
args: [UdStepContentDirective]
|
|
2959
|
+
}], _stepper: [{
|
|
2960
|
+
type: ViewChild,
|
|
2961
|
+
args: ['stepper']
|
|
2962
|
+
}] } });
|
|
2963
|
+
|
|
2889
2964
|
class TabsComponent {
|
|
2890
2965
|
isObservable = isObservable;
|
|
2891
2966
|
tabs = [];
|
|
@@ -3333,5 +3408,5 @@ const generateTimeOptions = (start, end, intervalMinutes = 5) => {
|
|
|
3333
3408
|
* Generated bundle index. Do not edit.
|
|
3334
3409
|
*/
|
|
3335
3410
|
|
|
3336
|
-
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 };
|
|
3411
|
+
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, UdStepContentDirective, UdStepperComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray, withLoadingState };
|
|
3337
3412
|
//# sourceMappingURL=ud-components.mjs.map
|