ud-components 0.5.13 → 0.5.15

package/fesm2022/ud-components.mjs

@@ -11,7 +11,7 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
 import { SelectionModel } from '@angular/cdk/collections';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2$1 from '@angular/material/button';
-import { MatButtonModule, MatIconButton, MatButton } from '@angular/material/button';
+import { MatButtonModule, MatIconButton } from '@angular/material/button';
 import { MatCardContent, MatCardHeader, MatCard } from '@angular/material/card';
 import { MatCheckbox } from '@angular/material/checkbox';
 import * as i2 from '@angular/material/datepicker';
@@ -46,6 +46,8 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import * as i2$5 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
 import * as i1$5 from '@angular/platform-browser';
+import * as i1$6 from '@angular/material/stepper';
+import { MatStepperModule } from '@angular/material/stepper';
 import { MatFormField as MatFormField$1 } from '@angular/material/form-field';
 import { signalStoreFeature, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
 
@@ -1757,7 +1759,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         MatSort,
                         MatLabel,
                         ReactiveFormsModule,
-                        MatButton,
                         MatMenuTrigger,
                         MatFormField,
                         MatInput,
@@ -2886,6 +2887,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Input
             }] } });
 
+class UdStepContentDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdStepContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: UdStepContentDirective, isStandalone: true, selector: "[udStepContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdStepContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[udStepContent]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class UdStepperComponent {
+    _cdr;
+    steps = [];
+    linear = true;
+    selectedIndex = 0;
+    selectedIndexChange = new EventEmitter();
+    stepChange = new EventEmitter();
+    _contentTemplates;
+    _stepper;
+    contentList = [];
+    constructor(_cdr) {
+        this._cdr = _cdr;
+    }
+    ngAfterContentInit() {
+        this.contentList = this._contentTemplates.toArray();
+        this._contentTemplates.changes.subscribe(() => {
+            this.contentList = this._contentTemplates.toArray();
+        });
+    }
+    onSelectionChange(event) {
+        this.selectedIndex = event.selectedIndex;
+        this.selectedIndexChange.emit(event.selectedIndex);
+        this.stepChange.emit(event.selectedIndex);
+    }
+    next() {
+        this._cdr.detectChanges();
+        this._stepper.next();
+    }
+    previous() {
+        this._stepper.previous();
+    }
+    reset() {
+        this._stepper.reset();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    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      <ng-template matStepContent>\n        @if (contentList[i]) {\n          <ng-container *ngTemplateOutlet=\"contentList[i].templateRef\" />\n        }\n      </ng-template>\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 2rem 2rem}::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:1rem 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: "directive", type: i1$6.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "ngmodule", type: MatIconModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdStepperComponent, decorators: [{
+            type: Component,
+            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      <ng-template matStepContent>\n        @if (contentList[i]) {\n          <ng-container *ngTemplateOutlet=\"contentList[i].templateRef\" />\n        }\n      </ng-template>\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 2rem 2rem}::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:1rem 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"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
+                type: Input
+            }], linear: [{
+                type: Input
+            }], selectedIndex: [{
+                type: Input
+            }], selectedIndexChange: [{
+                type: Output
+            }], stepChange: [{
+                type: Output
+            }], _contentTemplates: [{
+                type: ContentChildren,
+                args: [UdStepContentDirective]
+            }], _stepper: [{
+                type: ViewChild,
+                args: ['stepper']
+            }] } });
+
 class TabsComponent {
     isObservable = isObservable;
     tabs = [];
@@ -3333,5 +3408,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, ToggleOptionComponent, 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, UdStepContentDirective, UdStepperComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray, withLoadingState };
 //# sourceMappingURL=ud-components.mjs.map