@mtna/web-form-angular 1.0.2-SNAPSHOT.2 → 1.0.2

package/lib/components/base-form/base-form.component.d.ts

@@ -0,0 +1,89 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { AfterViewInit, EventEmitter, OnDestroy } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { CanDestroyNotify } from '@mtna/core-angular';
+import { AnnotatableNumberMap } from '@mtna/pojo-social-angular';
+import { Form, FormControlStatus, FormItem } from '@mtna/web-form-ts';
+import { FormStep } from '../../models';
+import { MtnaWfManagerService, MtnaWfNgFormService, MtnaWfUIService } from '../../services';
+import * as i0 from "@angular/core";
+declare const _BaseFormComponent: import("@mtna/core-angular").CanDestroyNotifyCtor & {
+    new (): {};
+};
+export declare class MtnaWfBaseFormComponent<F extends Form = Form> extends _BaseFormComponent implements AfterViewInit, CanDestroyNotify, OnDestroy {
+    protected mtnaFormManager: MtnaWfManagerService;
+    protected ngFormService: MtnaWfNgFormService;
+    protected uiService: MtnaWfUIService;
+    static ngAcceptInputType_emitStatusOnMtnaFormChange: BooleanInput;
+    static ngAcceptInputTypes_readonly: BooleanInput;
+    set annotations(map: AnnotatableNumberMap);
+    /** Whether to emit the status of each step each time the {@link mtnaForm} is set to a new value. Defaults to false.*/
+    get emitStatusOnMtnaFormChange(): boolean;
+    set emitStatusOnMtnaFormChange(emitStatusOnMtnaFormChange: boolean);
+    private _emitStatusOnMtnaFormChange;
+    get mtnaForm(): F | null | undefined;
+    set mtnaForm(form: F | null | undefined);
+    private _mtnaForm;
+    /**
+     * The form can contain sections not included in the steps.
+     * To avoid misalignment of steps-to-sections, we map each step to
+     * its instanceId
+     */
+    set steps(newSteps: Array<FormStep> | null | undefined);
+    get readonly(): boolean;
+    set readonly(r: boolean);
+    private readonly$;
+    /**
+     * Emitted every time a form control's validation status changes.
+     * The `id` is the form control's name and the `status` is the new validation status for the control.
+     */
+    status: EventEmitter<{
+        id: string;
+        status: FormControlStatus;
+    }>;
+    focusedSection: EventEmitter<FormStep>;
+    mtnaFormChange: EventEmitter<F>;
+    ngForm: FormGroup | undefined;
+    componentIds: never[];
+    _steps: {
+        [id: string]: FormStep;
+    } | undefined;
+    private _constructionDate;
+    private _hasPreviousForm;
+    private _ngFormStatusChangeSub?;
+    private _mtnaFormItemChangeSub?;
+    private _initialStatusEmitted;
+    constructor(mtnaFormManager: MtnaWfManagerService, ngFormService: MtnaWfNgFormService, uiService: MtnaWfUIService);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    _trackByInstanceId(index: number, formItem: FormItem): string;
+    /** Subscribe and emit form status changes for the steps. */
+    private _checkAndSubscribeToFormStatus;
+    /**
+     * Find a form control with the given name, then emit it's status.
+     *
+     * @param name — The unique name of the form control to find and emit the status for.
+     */
+    private _emitFormControlStatus;
+    /**
+     * @param emitInitialValues Whether to emit initial step values or just listen for future changes
+     */
+    private _emitInitialStepsStatusAndSubscribeToChanges;
+    /**
+     * Observes input changes for readOnly, in order to handle internal change subscriptions.
+     * When the form is not readonly, we subscribe to form status & form item changes, so we can emit them.
+     * When the form is readonly, we do not want to emit any changes, so we unsubscribe.
+     */
+    private _subscribeAndEmitMtnaFormChanges;
+    private _handleFormSerialization;
+    /**
+     * Adds or removes a FormItem whenever a new MtnaWfFormItemChange occurs,
+     * and emits a new MtnaForm.
+     */
+    private _subscribeToMtnaFormItemChanges;
+    private _unsubscribeFromNgFormChanges;
+    private _unsubscribeFromMtnaFormChanges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfBaseFormComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfBaseFormComponent<any>, "ng-component", never, { "annotations": "annotations"; "emitStatusOnMtnaFormChange": "emitStatusOnMtnaFormChange"; "mtnaForm": "mtnaForm"; "steps": "steps"; "readonly": "readonly"; }, { "status": "status"; "focusedSection": "focusedSection"; "mtnaFormChange": "mtnaFormChange"; }, never, never>;
+}
+export {};

package/lib/components/base-form/index.d.ts

@@ -0,0 +1 @@
+export * from './base-form.component';

package/lib/components/base-items/base-group-item.component.d.ts

@@ -1,3 +1,4 @@
+import { ChangeDetectorRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { FormItem, FormItemGroup } from '@mtna/web-form-ts';
 import { MtnaWfBaseFormItemControl } from './base-form-item-control.component';
@@ -7,6 +8,7 @@ export declare abstract class MtnaWfBaseGroupItem<I extends FormItemGroup> exten
     set parentIds(value: Array<string>);
     private _parentIds;
     _trackByInstanceId(index: number, item: FormItem): string;
+    constructor(cdr: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfBaseGroupItem<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfBaseGroupItem<any>, "ng-component", never, { "parentIds": "parentIds"; }, {}, never, never>;
 }

package/lib/components/base-items/base-section-item.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { Section } from '@mtna/web-form-ts';
 import { FormStep } from '../../models/form-stepper/form-step.model';
 import { MtnaWfBaseGroupItem } from './base-group-item.component';
@@ -8,6 +8,7 @@ export declare abstract class MtnaWfBaseSectionItem<S extends Section> extends M
     set step(value: FormStep | null | undefined);
     private _step;
     focused: EventEmitter<FormStep>;
+    constructor(cdr: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfBaseSectionItem<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfBaseSectionItem<any>, "ng-component", never, { "step": "step"; }, { "focused": "focused"; }, never, never>;
 }

package/lib/components/form/form.component.d.ts

@@ -1,89 +1,7 @@
-import { BooleanInput } from '@angular/cdk/coercion';
-import { AfterViewInit, EventEmitter, OnDestroy } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { CanDestroyNotify } from '@mtna/core-angular';
-import { AnnotatableNumberMap } from '@mtna/pojo-social-angular';
-import { Form, FormControlStatus, FormItem } from '@mtna/web-form-ts';
-import { FormStep } from '../../models';
-import { MtnaWfManagerService, MtnaWfNgFormService, MtnaWfUIService } from '../../services';
+import { Form } from '@mtna/web-form-ts';
+import { MtnaWfBaseFormComponent } from '../base-form';
 import * as i0 from "@angular/core";
-declare const MtnaWfFormComponent_base: import("@mtna/core-angular").CanDestroyNotifyCtor & {
-    new (): {};
-};
-export declare class MtnaWfFormComponent extends MtnaWfFormComponent_base implements AfterViewInit, CanDestroyNotify, OnDestroy {
-    private mtnaFormManager;
-    private ngFormService;
-    private uiService;
-    static ngAcceptInputType_emitStatusOnMtnaFormChange: BooleanInput;
-    static ngAcceptInputTypes_readonly: BooleanInput;
-    set annotations(map: AnnotatableNumberMap);
-    /** Whether to emit the status of each step each time the {@link mtnaForm} is set to a new value. Defaults to false.*/
-    get emitStatusOnMtnaFormChange(): boolean;
-    set emitStatusOnMtnaFormChange(emitStatusOnMtnaFormChange: boolean);
-    private _emitStatusOnMtnaFormChange;
-    get mtnaForm(): Form | null | undefined;
-    set mtnaForm(form: Form | null | undefined);
-    private _mtnaForm;
-    /**
-     * The form can contain sections not included in the steps.
-     * To avoid misalignment of steps-to-sections, we map each step to
-     * its instanceId
-     */
-    set steps(newSteps: Array<FormStep> | null | undefined);
-    get readonly(): boolean;
-    set readonly(r: boolean);
-    private readonly$;
-    /**
-     * Emitted every time a form control's validation status changes.
-     * The `id` is the form control's name and the `status` is the new validation status for the control.
-     */
-    status: EventEmitter<{
-        id: string;
-        status: FormControlStatus;
-    }>;
-    focusedSection: EventEmitter<FormStep>;
-    mtnaFormChange: EventEmitter<Form>;
-    ngForm: FormGroup | undefined;
-    componentIds: never[];
-    _steps: {
-        [id: string]: FormStep;
-    } | undefined;
-    private _constructionDate;
-    private _hasPreviousForm;
-    private _ngFormStatusChangeSub?;
-    private _mtnaFormItemChangeSub?;
-    private _initialStatusEmitted;
-    constructor(mtnaFormManager: MtnaWfManagerService, ngFormService: MtnaWfNgFormService, uiService: MtnaWfUIService);
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    _trackByInstanceId(index: number, formItem: FormItem): string;
-    /** Subscribe and emit form status changes for the steps. */
-    private _checkAndSubscribeToFormStatus;
-    /**
-     * Find a form control with the given name, then emit it's status.
-     *
-     * @param name — The unique name of the form cotrol to find and emit the status for.
-     */
-    private _emitFormControlStatus;
-    /**
-     * @param emitInitialValues Whether to emit initial step values or just listen for future changes
-     */
-    private _emitInitialStepsStatusAndSubscribeToChanges;
-    /**
-     * Observes input changes for readOnly, in order to handle internal change subscriptions.
-     * When the form is not readonly, we subscribe to form status & form item changes, so we can emit them.
-     * When the form is readonly, we do not want to emit any changes, so we unsubscribe.
-     */
-    private _subscribeAndEmitMtnaFormChanges;
-    private _handleFormSerialization;
-    /**
-     * Adds or removes a FormItem whenever a new MtnaWfFormItemChange occurs,
-     * and emits a new MtnaForm.
-     */
-    private _subscribeToMtnaFormItemChanges;
-    private _unsubscribeFromNgFormChanges;
-    private _unsubscribeFromMtnaFormChanges;
+export declare class MtnaWfFormComponent extends MtnaWfBaseFormComponent<Form> {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfFormComponent, "mtna-form", never, { "annotations": "annotations"; "emitStatusOnMtnaFormChange": "emitStatusOnMtnaFormChange"; "mtnaForm": "mtnaForm"; "steps": "steps"; "readonly": "readonly"; }, { "status": "status"; "focusedSection": "focusedSection"; "mtnaFormChange": "mtnaFormChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfFormComponent, "mtna-form", never, {}, { "status": "status"; "focusedSection": "focusedSection"; "mtnaFormChange": "mtnaFormChange"; }, never, never>;
 }
-export {};

package/lib/components/form-item-dialog/form-item-dialog.module.d.ts

@@ -3,8 +3,9 @@ import * as i1 from "./form-item-dialog.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/material/dialog";
 import * as i4 from "../form-item/form-item.module";
+import * as i5 from "@angular/material/button";
 export declare class MtnaWfFormItemDialogModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfFormItemDialogModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtnaWfFormItemDialogModule, [typeof i1.MtnaWfFormItemDialogComponent], [typeof i2.CommonModule, typeof i3.MatDialogModule, typeof i4.MtnaWfFormItemModule], [typeof i1.MtnaWfFormItemDialogComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtnaWfFormItemDialogModule, [typeof i1.MtnaWfFormItemDialogComponent], [typeof i2.CommonModule, typeof i3.MatDialogModule, typeof i4.MtnaWfFormItemModule, typeof i5.MatButtonModule], [typeof i1.MtnaWfFormItemDialogComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtnaWfFormItemDialogModule>;
 }

package/lib/components/form-item-impl/checkbox/_checkbox-theme.scss

@@ -30,8 +30,10 @@
     }
   }
 
-  mtna-wf-checkbox-item .checkbox-error {
-    color: mat.get-color-from-palette($warn, default);
+  mtna-wf-checkbox-item {
+    .checkbox-error {
+      color: mat.get-color-from-palette($warn, default);
+    }
   }
 }
 
@@ -59,4 +61,11 @@
       border-color: mat.get-color-from-palette($palette);
     }
   }
+
+  button.mat-icon-button.acknowledge-verification-button {
+    &:hover,
+    &.cdk-focused {
+      color: mat.get-color-from-palette($palette);
+    }
+  }
 }

package/lib/components/form-item-impl/checkbox/checkbox.component.d.ts

@@ -10,6 +10,7 @@ import * as i0 from "@angular/core";
 export declare class MtnaWfCheckboxComponent extends MtnaWfBaseParentValueItem<CheckboxItem, FormArray> implements CanDestroyNotify, OnDestroy {
     private dialogService;
     destroyed$: Subject<void>;
+    _acknowledgementText: string;
     constructor(cdr: ChangeDetectorRef, dialogService: MtnaWfDialogService);
     handleChange(change: MatCheckboxChange, index: number): void;
     ngOnDestroy(): void;

package/lib/components/form-item-impl/checkbox/checkbox.module.d.ts

@@ -2,17 +2,18 @@ import * as i0 from "@angular/core";
 import * as i1 from "./checkbox.component";
 import * as i2 from "@angular/common";
 import * as i3 from "../../../pipes/get-form-control-error.pipe";
-import * as i4 from "@angular/forms";
-import * as i5 from "@angular/material/form-field";
-import * as i6 from "@angular/material/checkbox";
-import * as i7 from "@angular/material/button";
-import * as i8 from "@angular/material/icon";
-import * as i9 from "@angular/material/tooltip";
-import * as i10 from "../../form-item/form-item.module";
-import * as i11 from "@mtna/core-angular";
-import * as i12 from "../../form-item-dialog/form-item-dialog.module";
+import * as i4 from "@angular/flex-layout";
+import * as i5 from "@angular/forms";
+import * as i6 from "@angular/material/form-field";
+import * as i7 from "@angular/material/checkbox";
+import * as i8 from "@angular/material/button";
+import * as i9 from "@angular/material/icon";
+import * as i10 from "@angular/material/tooltip";
+import * as i11 from "../../form-item/form-item.module";
+import * as i12 from "@mtna/core-angular";
+import * as i13 from "../../form-item-dialog/form-item-dialog.module";
 export declare class MtnaWfCheckboxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfCheckboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtnaWfCheckboxModule, [typeof i1.MtnaWfCheckboxComponent], [typeof i2.CommonModule, typeof i3.MtnaWfGetFormControlErrorPipeModule, typeof i4.FormsModule, typeof i5.MatFormFieldModule, typeof i6.MatCheckboxModule, typeof i7.MatButtonModule, typeof i8.MatIconModule, typeof i9.MatTooltipModule, typeof i10.MtnaWfFormItemModule, typeof i11.MtnaHighlightModule, typeof i4.ReactiveFormsModule, typeof i12.MtnaWfFormItemDialogModule], [typeof i1.MtnaWfCheckboxComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtnaWfCheckboxModule, [typeof i1.MtnaWfCheckboxComponent], [typeof i2.CommonModule, typeof i3.MtnaWfGetFormControlErrorPipeModule, typeof i4.FlexLayoutModule, typeof i5.FormsModule, typeof i6.MatFormFieldModule, typeof i7.MatCheckboxModule, typeof i8.MatButtonModule, typeof i9.MatIconModule, typeof i10.MatTooltipModule, typeof i11.MtnaWfFormItemModule, typeof i12.MtnaHighlightModule, typeof i5.ReactiveFormsModule, typeof i13.MtnaWfFormItemDialogModule], [typeof i1.MtnaWfCheckboxComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtnaWfCheckboxModule>;
 }

package/lib/components/form-item-impl/date/date.component.d.ts

@@ -12,6 +12,7 @@ export declare class MtnaWfDateComponent extends MtnaWfBaseValueItem<DateItem, F
     set item(value: DateItem);
     rangeLimits: DateRange<Date | null> | null | undefined;
     picker: MatDatepicker<Date> | undefined;
+    _dateText: string;
     constructor(cdr: ChangeDetectorRef, logger: MtnaLogger);
     ngAfterViewInit(): void;
     /**

package/lib/components/form-item-impl/date-range/date-range.component.d.ts

@@ -7,6 +7,7 @@ export declare class MtnaWfDateRangeComponent extends MtnaWfBaseValueItem<Offset
     set item(item: OffsetDateRangeItem);
     _startItem: DateItem;
     _endItem: DateItem;
+    toText: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfDateRangeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfDateRangeComponent, "mtna-wf-date-range", never, {}, {}, never, never>;
 }

package/lib/components/form-item-impl/dropdown/_dropdown-theme.scss

@@ -0,0 +1,35 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
+@mixin color($theme) {
+  $config: mat.get-color-config($theme);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+
+  .cdk-overlay-container .cdk-overlay-pane {
+      .mtna-wf-dropdown-item__select-panel {
+        .mat-option {
+            &:focus,
+            &:hover,
+            &.mat-active {
+              background-color: mat.get-color-from-palette($background, focused-button);
+            }
+        }
+      }
+  }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  $config: mat.get-color-config($theme);
+  @if $config != null {
+    @include color($theme);
+  }
+
+  $typography-config: mat.get-typography-config($theme);
+  @if $typography-config != null {
+    @include typography($theme);
+  }
+}

package/lib/components/form-item-impl/file-upload/file-upload.component.d.ts

@@ -9,6 +9,7 @@ export declare class MtnaWfFileUploadComponent extends MtnaWfBaseFormItemControl
     private fileService;
     fileInfo?: FileInformation;
     loading: boolean;
+    _fileUploadButtonText: string;
     constructor(cdr: ChangeDetectorRef, fileService: FileService);
     fileToUpload(file: FileList): void;
     handleDownload(template: FileInformation): void;

package/lib/components/form-item-impl/i18n-input/i18n-input.component.d.ts

@@ -6,6 +6,7 @@ export declare class MtnaWfI18nInputComponent<I extends InternationalizedParagra
     get item(): I;
     set item(value: I);
     isParagraph: boolean;
+    _notInformationText: string;
     getFormControl(language: string): FormControl;
     getLanguageDisplay(language: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfI18nInputComponent<any>, never>;

package/lib/components/form-item-impl/input/input.component.d.ts

@@ -7,6 +7,7 @@ export declare class MtnaWfInputComponent<I extends DecimalAnswerItem | Paragrap
     set item(value: I);
     isParagraph: boolean;
     isNumberInput: boolean;
+    _noInformationText: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfInputComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfInputComponent<any>, "mtna-wf-input-item", never, {}, {}, never, never>;
 }

package/lib/components/form-item-impl/repeatable-item-container/repeatable-item-container.component.d.ts

@@ -6,6 +6,7 @@ import { MtnaWfBaseParentValueItem } from '../../base-items/base-parent-value-it
 import * as i0 from "@angular/core";
 export declare class MtnaWfRepeatableItemContainerComponent extends MtnaWfBaseParentValueItem<RepeatableItem, FormGroup> {
     private manager;
+    _addText: string;
     constructor(cdr: ChangeDetectorRef, manager: MtnaWfManagerService);
     addItem(): void;
     removeItem(item: FormItem): void;

package/lib/components/form-stepper/form-step/form-step.component.d.ts

@@ -7,6 +7,12 @@ declare const _FormStepMixinBase: import("@angular/material/core/common-behavior
         _elementRef: ElementRef;
     };
 };
+/**
+ * A component that represents a single step in a form stepper.
+ * NOTE:
+ *  - disabled: property on the FormStep used to determine if the step is disabled. This will affect the disabled property and the clickable property.
+ *  - clickable: property on the FormStep used to determine if the step is clickable. This does not affect the disabled property.
+ */
 export declare class MtnaWfFormStepComponent extends _FormStepMixinBase implements CanColor {
     disabled: boolean;
     get step(): FormStep;
@@ -16,6 +22,7 @@ export declare class MtnaWfFormStepComponent extends _FormStepMixinBase implemen
     set clickable(clickable: boolean);
     private _clickable;
     incompleteIcon: string | null | undefined;
+    notApplicableText: string;
     constructor(elementRef: ElementRef);
     /**
      * Prevents click event if this step is not clickable

package/lib/components/form-stepper/form-step-group/form-step-group.component.d.ts

@@ -16,6 +16,8 @@ export declare class MtnaWfFormStepGroupComponent extends _FormStepMixinBase imp
     set steps(steps: FormStep[]);
     private _steps;
     selected: EventEmitter<FormStep>;
+    _collapsedText: string;
+    _hideText: string;
     constructor(elementRef: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfFormStepGroupComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfFormStepGroupComponent, "mtna-wf-step-group", never, { "color": "color"; "collapsed": "collapsed"; "incompleteIcon": "incompleteIcon"; "steps": "steps"; }, { "selected": "selected"; }, never, never>;

package/lib/components/form-stepper/form-stepper/_form-stepper-theme.scss

@@ -6,24 +6,22 @@
   $primary: map.get($config, primary);
   $accent: map.get($config, accent);
   $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
 
   mtna-wf-stepper {
     border-right-color: mat.get-color-from-palette($foreground, divider);
-    &.mat-primary {
-      @include _form-stepper-palette($primary, $accent, $foreground);
-    }
-    &.mat-accent {
-      @include _form-stepper-palette($accent, $primary, $foreground);
-    }
-  }
-  mtna-wf-step {
     &.mat-primary {
       @include _form-step-palette($primary, $foreground);
+      @include _form-step-group-palette($primary, $foreground, $background);
+      @include _form-stepper-palette($primary, $accent, $foreground);
     }
     &.mat-accent {
       @include _form-step-palette($accent, $foreground);
+      @include _form-step-group-palette($accent, $foreground, $background);
+      @include _form-stepper-palette($accent, $primary, $foreground);
     }
   }
+
 }
 
 @mixin typography($theme) {
@@ -43,10 +41,12 @@
 
 @mixin _form-stepper-palette($mainPalette, $secondaryPalette, $foreground) {
   background-color: mat.get-color-from-palette($mainPalette, 50);
-  mtna-wf-step.clickable li {
-    &:hover {
-      background-color: mat.get-color-from-palette($mainPalette, default, 0.12);
+  li.child-step-active {
+    &::after {
+      background-color: mat.get-color-from-palette($secondaryPalette, default);
     }
+  }
+  li.clickable {
     &::after {
       background-color: mat.get-color-from-palette($secondaryPalette, default);
     }
@@ -54,15 +54,13 @@
       background-color: mat.get-color-from-palette($mainPalette, default, 0.04);
     }
   }
-  mtna-wf-step.disabled li {
+  li.disabled-step {
     color: mat.get-color-from-palette($foreground, disabled-text);
+    .step-title,
     .step-status {
       color: mat.get-color-from-palette($foreground, disabled-text);
     }
   }
-  mat-divider {
-    background-color: mat.get-color-from-palette($mainPalette, default);
-  }
 }
 
 @mixin _form-step-palette($mainPalette, $foreground) {
@@ -70,3 +68,20 @@
     color: mat.get-color-from-palette($foreground, secondary-text);
   }
 }
+
+@mixin _form-step-group-palette($mainPalette, $foreground, $background) {
+  .mtna-wf-step-group {
+    border-color: mat.get-color-from-palette($mainPalette, default);
+    .collapse-button.mat-icon-button {
+      background-color: mat.get-color-from-palette($background, card);
+      border-color: mat.get-color-from-palette($mainPalette, default);
+      &:hover,
+      &:focus {
+        background-color: mat.get-color-from-palette($mainPalette, default);
+        .mat-icon {
+          color: mat.get-color-from-palette($background, card);
+        }
+      }
+    }
+  }
+}

package/lib/components/form-stepper/form-stepper/form-stepper.component.d.ts

@@ -16,9 +16,17 @@ declare const _FormStepperMixinBase: import("@angular/material/core/common-behav
 export declare class MtnaWfFormStepperComponent extends _FormStepperMixinBase implements CanColor {
     incompleteIcon: string | null | undefined;
     /** Form steps */
-    steps: Array<FormStep | FormStepGroup>;
+    get steps(): Array<FormStep | FormStepGroup>;
+    set steps(steps: Array<FormStep | FormStepGroup>);
+    private _steps;
     /** When a step is selected */
     selected: EventEmitter<FormStep>;
+    groupStepCollapsedMap: {
+        [key: string]: boolean;
+    };
+    notApplicableText: string;
+    _collapsedText: string;
+    _hideText: string;
     constructor(elementRef: ElementRef);
     /**
      * Improves effeciency of the *ngFor loop that creates the steps.
@@ -28,6 +36,12 @@ export declare class MtnaWfFormStepperComponent extends _FormStepperMixinBase im
      * @returns unique string to key each item in the loop
      */
     _trackStep(index: number, step: FormStep | FormStepGroup): string | number;
+    /**
+     * Prevents click event if this step is not clickable
+     */
+    _haltClickEvent(event: Event, step: FormStep): void;
+    createGroupStepCollapsedMap(steps: Array<FormStep | FormStepGroup>): void;
+    toggleGroupStep(step: FormStepGroup): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfFormStepperComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfFormStepperComponent, "mtna-wf-stepper", never, { "color": "color"; "incompleteIcon": "incompleteIcon"; "steps": "steps"; }, { "selected": "selected"; }, never, never>;
 }

package/lib/components/form-stepper/form-stepper.module.d.ts

@@ -11,8 +11,12 @@ import * as i9 from "@angular/material/button";
 import * as i10 from "@angular/material/tooltip";
 import * as i11 from "@angular/material/icon";
 import * as i12 from "../../pipes/form-step-group.pipe";
+import * as i13 from "../../pipes/coerce-form-step-group.pipe";
+import * as i14 from "../../pipes/coerce-form-step.pipe";
+import * as i15 from "../../pipes/child-step-active.pipe";
+import * as i16 from "../../pipes/get-step-aria-label.pipe";
 export declare class MtnaWfFormStepperModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfFormStepperModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtnaWfFormStepperModule, [typeof i1.MtnaWfFormStepComponent, typeof i2.MtnaWfFormStepGroupComponent, typeof i3.MtnaWfFormStepperComponent], [typeof i4.CommonModule, typeof i5.FlexLayoutModule, typeof i6.MatDividerModule, typeof i7.MtnaStatusCircleModule, typeof i8.MatRippleModule, typeof i9.MatButtonModule, typeof i10.MatTooltipModule, typeof i11.MatIconModule, typeof i12.MtnaWfFormStepGroupPipeModule], [typeof i1.MtnaWfFormStepComponent, typeof i2.MtnaWfFormStepGroupComponent, typeof i3.MtnaWfFormStepperComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtnaWfFormStepperModule, [typeof i1.MtnaWfFormStepComponent, typeof i2.MtnaWfFormStepGroupComponent, typeof i3.MtnaWfFormStepperComponent], [typeof i4.CommonModule, typeof i5.FlexLayoutModule, typeof i6.MatDividerModule, typeof i7.MtnaStatusCircleModule, typeof i8.MatRippleModule, typeof i9.MatButtonModule, typeof i10.MatTooltipModule, typeof i11.MatIconModule, typeof i12.MtnaWfFormStepGroupPipeModule, typeof i13.CoerceFormStepGroupPipeModule, typeof i14.CoerceFormStepPipeModule, typeof i15.ChildStepActivePipeModule, typeof i16.GetStepAriaLabelModule], [typeof i1.MtnaWfFormStepComponent, typeof i2.MtnaWfFormStepGroupComponent, typeof i3.MtnaWfFormStepperComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtnaWfFormStepperModule>;
 }

package/lib/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './form-item-component-provider/index';
 export * from './form-item-dialog/index';
 export * from './form-item-impl/index';
 export * from './form-item-injector/index';
+export * from './progressive-form/index';
 export * from './form-stepper/index';
 export * from './item-header/index';
 export * from './step-card/index';

package/lib/components/progressive-form/index.d.ts

@@ -0,0 +1,2 @@
+export * from './progressive-form/index';
+export * from './progressive-form-section/index';

package/lib/components/progressive-form/progressive-form/index.d.ts

@@ -0,0 +1,2 @@
+export * from './progressive-form.component';
+export * from './progressive-form.module';