@mtna/web-form-angular 0.0.1

package/lib/form-item-controls/base-parent-item-control.directive.d.ts

@@ -0,0 +1,19 @@
+import { AbstractControl, FormGroup } from '@angular/forms';
+import { ValueItem } from '@mtna/web-form-ts';
+import { BaseFormItemControl } from './base-form-item-control.directive';
+import * as i0 from "@angular/core";
+/**
+ * Base control class for a FormItem with nested FormItems.
+ * If a FormItem contains an 'optionItemMap', its component class should extend this class.
+ */
+export declare abstract class BaseParentItemControl<I extends ValueItem<unknown>, C extends AbstractControl> extends BaseFormItemControl<I, C> {
+    /** FormControl representing this item's value.
+     * If this item has items in its 'optionItemMap', this control is nested inside a FormGroup wrapper */
+    get control(): C | null | undefined;
+    set control(control: C | null | undefined);
+    parentIds: string[];
+    /** FormGroup wrapping this item's FormControl, & FormControls for any nested form items */
+    controlWrapper: FormGroup | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseParentItemControl<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseParentItemControl<any, any>, never, never, { "control": "control"; "parentIds": "parentIds"; }, {}, never>;
+}

package/lib/form-item-controls/base-single-selection-parent.directive.d.ts

@@ -0,0 +1,26 @@
+import { OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatRadioChange } from '@angular/material/radio';
+import { MatSelectChange } from '@angular/material/select';
+import { DropdownItem, FormOptionSelector, MultipleChoiceItem, StringOption } from '@mtna/web-form-ts';
+import { MtnaWfUIService } from '../core/services/ui.service';
+import { BaseParentItemControl } from './base-parent-item-control.directive';
+import * as i0 from "@angular/core";
+export declare abstract class BaseSingleSelectionParent<I extends DropdownItem | MultipleChoiceItem> extends BaseParentItemControl<I, FormControl> implements OnInit {
+    protected uiService: MtnaWfUIService;
+    /**
+     * `MatRadioChange` and `MatSelectChange` output only the newly selected option.
+     * We use this to toggle items of a previously selected option.
+     */
+    protected selectedOption: FormOptionSelector<StringOption> | undefined;
+    constructor(uiService: MtnaWfUIService);
+    ngOnInit(): void;
+    /**
+     * Toggles the 'selected' value of the previous & newly selected options,
+     * then calls toggleFormItems to change their enabled/disabled items
+     * @param change MatRadioChange from the radio group
+     */
+    selectionChange(change: MatRadioChange | MatSelectChange): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseSingleSelectionParent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseSingleSelectionParent<any>, never, never, {}, {}, never>;
+}

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

@@ -0,0 +1,12 @@
+import { FormGroup } from '@angular/forms';
+import { DateItem, OffsetDateRangeItem } from '@mtna/web-form-ts';
+import { BaseFormItemControl } from './base-form-item-control.directive';
+import * as i0 from "@angular/core";
+export declare class MtnaWfDateRangeComponent extends BaseFormItemControl<OffsetDateRangeItem, FormGroup> {
+    get item(): OffsetDateRangeItem;
+    set item(item: OffsetDateRangeItem);
+    _startItem: DateItem;
+    _endItem: DateItem;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfDateRangeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfDateRangeComponent, "mtna-wf-date-range", never, {}, {}, never, never>;
+}

package/lib/form-item-controls/date.component.d.ts

@@ -0,0 +1,24 @@
+import { AfterViewInit } from '@angular/core';
+import { MatDatepicker } from '@angular/material/datepicker';
+import { MtnaLogger } from '@mtna/core-angular';
+import { DateItem, DateRange } from '@mtna/web-form-ts';
+import { BaseFormItemControl } from './base-form-item-control.directive';
+import * as i0 from "@angular/core";
+export declare class MtnaWfDateComponent extends BaseFormItemControl<DateItem> implements AfterViewInit {
+    static dateFormItemComponentInstances: number;
+    dateItemClass: boolean;
+    get format(): string | null | undefined;
+    set format(f: string | null | undefined);
+    private _format;
+    rangeLimits: DateRange<Date | null> | null | undefined;
+    picker: MatDatepicker<Date> | undefined;
+    constructor(logger: MtnaLogger);
+    ngAfterViewInit(): void;
+    /**
+     * Manually change the parse and display formats of the date picker.
+     * @see https://github.com/angular/components/issues/8355#issuecomment-376783293
+     */
+    private configureDatePickerFormatter;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfDateComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfDateComponent, "mtna-wf-date-item", never, { "format": "format"; "rangeLimits": "rangeLimits"; }, {}, never, never>;
+}

package/lib/form-item-controls/dropdown.component.d.ts

@@ -0,0 +1,9 @@
+import { DropdownItem } from '@mtna/web-form-ts';
+import { MtnaWfUIService } from '../core/services/ui.service';
+import { BaseSingleSelectionParent } from './base-single-selection-parent.directive';
+import * as i0 from "@angular/core";
+export declare class MtnaWfDropdownComponent extends BaseSingleSelectionParent<DropdownItem> {
+    constructor(uiService: MtnaWfUIService);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfDropdownComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfDropdownComponent, "mtna-wf-dropdown-item", never, {}, {}, never, never>;
+}

package/lib/form-item-controls/index.d.ts

@@ -0,0 +1,7 @@
+export * from './base-form-item-control.directive';
+export * from './date.component';
+export * from './date-range.component';
+export * from './dropdown.component';
+export * from './input.component';
+export * from './year-quarter.component';
+export * from './year-quarter-range.component';

package/lib/form-item-controls/input.component.d.ts

@@ -0,0 +1,14 @@
+import { ElementRef } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { DecimalAnswerItem, ParagraphAnswerItem, ShortAnswerItem, WholeNumberAnswerItem } from '@mtna/web-form-ts';
+import { BaseFormItemControl } from './base-form-item-control.directive';
+import * as i0 from "@angular/core";
+export declare class MtnaWfInputComponent<I extends DecimalAnswerItem | ParagraphAnswerItem | ShortAnswerItem | WholeNumberAnswerItem> extends BaseFormItemControl<I, FormControl> {
+    protected elementRef: ElementRef;
+    readonly isParagraph: boolean;
+    readonly isNumberInput: boolean;
+    constructor(elementRef: ElementRef);
+    private _hasHostAttributes;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfInputComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfInputComponent<any>, "mtna-wf-input-item[mtnaWfDecimalItem],             mtna-wf-input-item[mtnaWfParagraphItem],             mtna-wf-input-item[mtnaWfShortAnswerItem],             mtna-wf-input-item[mtnaWfWholeNumberItem],", never, {}, {}, never, never>;
+}

package/lib/form-item-controls/year-quarter-range.component.d.ts

@@ -0,0 +1,9 @@
+import { FormGroup } from '@angular/forms';
+import { YearQuarterRangeItem } from '@mtna/web-form-ts';
+import { BaseFormItemControl } from './base-form-item-control.directive';
+import * as i0 from "@angular/core";
+export declare class MtnaWfYearQuarterRangeComponent extends BaseFormItemControl<YearQuarterRangeItem, FormGroup> {
+    yearQuarterRangeClass: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfYearQuarterRangeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfYearQuarterRangeComponent, "mtna-wf-year-quarter-range-item", never, {}, {}, never, never>;
+}

package/lib/form-item-controls/year-quarter.component.d.ts

@@ -0,0 +1,33 @@
+import { AfterViewInit, InjectionToken, OnDestroy, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { DateRange, YearQuarter, YearQuarterRangeItem } from '@mtna/web-form-ts';
+import { BaseFormItemControl } from './base-form-item-control.directive';
+import * as i0 from "@angular/core";
+export declare const MTNA_WF_DEFAULT_YEAR_RANGE: InjectionToken<MtnaWfDefaultYearRange>;
+export interface MtnaWfDefaultYearRange {
+    numPastYears: number;
+    numFutureYears: number;
+}
+export declare class MtnaWfYearQuarterComponent extends BaseFormItemControl<YearQuarterRangeItem> implements AfterViewInit, OnDestroy, OnInit {
+    yearQuarterItemClass: boolean;
+    rangeLimits: DateRange<YearQuarter> | null | undefined;
+    _quarterControl: FormControl;
+    _yearControl: FormControl;
+    _yearSelection: number[];
+    private destroyObs;
+    private defaultYearRange;
+    constructor(defaultYearRange?: MtnaWfDefaultYearRange);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    ngOnInit(): void;
+    /**
+     * Sets the quarter value to `null` if the year & quarter is out of bounds of the range limits.
+     * Otherwise, returns original value
+     *
+     * @param value `[number, number]` The selected [year, quarter] value
+     * @returns `[number, number]` The original [year, quarter] value OR [year, null]
+     */
+    private withinRangeLimits;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfYearQuarterComponent, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfYearQuarterComponent, "mtna-wf-year-quarter-item", never, { "rangeLimits": "rangeLimits"; }, {}, never, never>;
+}

package/lib/form-stepper/_form-step-group-theme.scss

@@ -0,0 +1,43 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
+@mixin color($theme) {
+  $config: mat.get-color-config($theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $foreground: map.get($config, foreground);
+
+  mtna-wf-step-group {
+    &.mat-primary {
+      @include _form-step-group-palette($primary, $foreground);
+    }
+    &.mat-accent {
+      @include _form-step-group-palette($accent, $foreground);
+    }
+  }
+}
+
+@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);
+  }
+}
+
+@mixin _form-step-group-palette($mainPalette, $foreground) {
+  border-color: mat.get-color-from-palette($mainPalette, default);
+  .collapse-button::after {
+    background-color: mat.get-color-from-palette($mainPalette, 50);
+  }
+  .show-more {
+    color: mat.get-color-from-palette($foreground, secondary-text);
+  }
+}

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

@@ -0,0 +1,72 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
+@mixin color($theme) {
+  $config: mat.get-color-config($theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $foreground: map.get($config, foreground);
+
+  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);
+    }
+    &.mat-accent {
+      @include _form-step-palette($accent, $foreground);
+    }
+  }
+}
+
+@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);
+  }
+}
+
+@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);
+    }
+    &::after {
+      background-color: mat.get-color-from-palette($secondaryPalette, default);
+    }
+    &.active-step {
+      background-color: mat.get-color-from-palette($mainPalette, default, 0.04);
+    }
+  }
+  mtna-wf-step.disabled li {
+    color: mat.get-color-from-palette($foreground, disabled-text);
+    .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) {
+  li .step-status {
+    color: mat.get-color-from-palette($foreground, secondary-text);
+  }
+}

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

@@ -0,0 +1,23 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import { CanColor } from '@angular/material/core';
+import { FormStep } from './models/index';
+import * as i0 from "@angular/core";
+declare const _FormStepMixinBase: import("@angular/material/core/common-behaviors/constructor").Constructor<CanColor> & import("@angular/material/core/common-behaviors/constructor").AbstractConstructor<CanColor> & {
+    new (_elementRef: ElementRef): {
+        _elementRef: ElementRef;
+    };
+};
+export declare class MtnaWfFormStepGroupComponent extends _FormStepMixinBase implements CanColor {
+    /** Whether all but the first step is hidden*/
+    collapsed: boolean;
+    incompleteIcon: string | null | undefined;
+    /** Steps to be displayed */
+    get steps(): FormStep[];
+    set steps(steps: FormStep[]);
+    private _steps;
+    selected: EventEmitter<FormStep>;
+    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>;
+}
+export {};

package/lib/form-stepper/form-step-group.pipe.d.ts

@@ -0,0 +1,11 @@
+import { PipeTransform } from '@angular/core';
+import { FormStep, FormStepGroup } from './models/index';
+import * as i0 from "@angular/core";
+/**
+ * Pipe to determine if a FormStep is a FormStepGroup or a single step.
+ */
+export declare class MtnaWfFormStepGroupPipe implements PipeTransform {
+    transform(step: FormStep | FormStepGroup): step is FormStepGroup;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfFormStepGroupPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<MtnaWfFormStepGroupPipe, "mtnaWfStepGroupPipe">;
+}

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

@@ -0,0 +1,27 @@
+import { ElementRef } from '@angular/core';
+import { CanColor } from '@angular/material/core';
+import { FormStep } from './models/index';
+import * as i0 from "@angular/core";
+declare const _FormStepMixinBase: import("@angular/material/core/common-behaviors/constructor").Constructor<CanColor> & import("@angular/material/core/common-behaviors/constructor").AbstractConstructor<CanColor> & {
+    new (_elementRef: ElementRef): {
+        _elementRef: ElementRef;
+    };
+};
+export declare class MtnaWfFormStepComponent extends _FormStepMixinBase implements CanColor {
+    disabled: boolean;
+    get step(): FormStep;
+    set step(step: FormStep);
+    private _step;
+    get clickable(): boolean;
+    set clickable(clickable: boolean);
+    private _clickable;
+    incompleteIcon: string | null | undefined;
+    constructor(elementRef: ElementRef);
+    /**
+     * Prevents click event if this step is not clickable
+     */
+    _haltClickEvent(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfFormStepComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtnaWfFormStepComponent, "mtna-wf-step", never, { "color": "color"; "step": "step"; "clickable": "clickable"; "incompleteIcon": "incompleteIcon"; }, {}, never, never>;
+}
+export {};

package/lib/form-stepper/form-step.util.d.ts

@@ -0,0 +1,27 @@
+import { CircleStatus } from '@mtna/core-angular';
+import { FormStep } from './models/index';
+/**
+ * Determines if every step matches a given status
+ * @param statusToCheck CircleStatus to match against
+ * @param steps FormSteps with statuses to check
+ * @param includeDisabled If false or not supplied, disabled steps are excluded from check
+ * @param includeOptional If false or not supplied, optional steps are excluded from check
+ * @param exclusionIds string[] IDs of steps to exclude from check
+ */
+export declare function everyStepStatus(statusToCheck: CircleStatus, steps: Array<FormStep>, includeDisabled?: boolean, includeOptional?: boolean): boolean;
+/**
+ * Determines if every step matches a given status
+ * @param statusToCheck CircleStatus to match against
+ * @param steps FormSteps with statuses to check
+ * @param exclusionIds string[] IDs of steps to exclude from check
+ */
+export declare function everyStepStatus(statusToCheck: CircleStatus, steps: Array<FormStep>, exclusionIds?: Array<string>): boolean;
+/**
+ * Determines if every step matches a given status
+ * @param statusToCheck CircleStatus to match against
+ * @param steps FormSteps with statuses to check
+ * @param includeDisabled If false or not supplied, disabled steps are excluded from check
+ * @param includeOptional If false or not supplied, optional steps are excluded from check
+ * @param exclusionIds string[] IDs of steps to exclude from check
+ */
+export declare function everyStepStatus(statusToCheck: CircleStatus, steps: Array<FormStep>, includeDisabled?: boolean, includeOptional?: boolean, exclusionIds?: Array<string>): boolean;

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

@@ -0,0 +1,35 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import { CanColor } from '@angular/material/core';
+import { FormStepGroup } from './models/form-step-group.model';
+import { FormStep } from './models/form-step.model';
+import * as i0 from "@angular/core";
+declare const _FormStepperMixinBase: import("@angular/material/core/common-behaviors/constructor").Constructor<CanColor> & import("@angular/material/core/common-behaviors/constructor").AbstractConstructor<CanColor> & {
+    new (_elementRef: ElementRef): {
+        _elementRef: ElementRef;
+    };
+};
+/**
+ * Vertical stepper component, ability to show step statuses and allows clicking each step.
+ *
+ * @export
+ * @author Will Davis <will.davis@mtna.us>
+ */
+export declare class MtnaWfFormStepperComponent extends _FormStepperMixinBase implements CanColor {
+    incompleteIcon: string | null | undefined;
+    /** Form steps */
+    steps: Array<FormStep | FormStepGroup>;
+    /** When a step is selected */
+    selected: EventEmitter<FormStep>;
+    constructor(elementRef: ElementRef);
+    /**
+     * Improves effeciency of the *ngFor loop that creates the steps.
+     *
+     * @param index index of loop
+     * @param step current step in loop
+     * @returns unique string to key each item in the loop
+     */
+    _trackStep(index: number, step: FormStep | FormStepGroup): string | number;
+    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>;
+}
+export {};

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

@@ -0,0 +1,18 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./form-step.component";
+import * as i2 from "./form-step-group.component";
+import * as i3 from "./form-step-group.pipe";
+import * as i4 from "./form-stepper.component";
+import * as i5 from "@angular/common";
+import * as i6 from "@angular/flex-layout";
+import * as i7 from "@angular/material/divider";
+import * as i8 from "@mtna/core-angular";
+import * as i9 from "@angular/material/core";
+import * as i10 from "@angular/material/button";
+import * as i11 from "@angular/material/tooltip";
+import * as i12 from "@angular/material/icon";
+export declare class MtnaWfFormStepperModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtnaWfFormStepperModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtnaWfFormStepperModule, [typeof i1.MtnaWfFormStepComponent, typeof i2.MtnaWfFormStepGroupComponent, typeof i3.MtnaWfFormStepGroupPipe, typeof i4.MtnaWfFormStepperComponent], [typeof i5.CommonModule, typeof i6.FlexLayoutModule, typeof i7.MatDividerModule, typeof i8.MtnaStatusCircleModule, typeof i9.MatRippleModule, typeof i10.MatButtonModule, typeof i11.MatTooltipModule, typeof i12.MatIconModule], [typeof i1.MtnaWfFormStepComponent, typeof i2.MtnaWfFormStepGroupComponent, typeof i3.MtnaWfFormStepGroupPipe, typeof i4.MtnaWfFormStepperComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtnaWfFormStepperModule>;
+}

package/lib/form-stepper/index.d.ts

@@ -0,0 +1,7 @@
+export * from './form-step-group.component';
+export * from './form-step-group.pipe';
+export * from './form-step.component';
+export * from './form-step.util';
+export * from './form-stepper.component';
+export * from './form-stepper.module';
+export * from './models/index';

package/lib/form-stepper/models/base-form-step.model.d.ts

@@ -0,0 +1,4 @@
+export declare class BaseFormStep {
+    instanceId: string;
+    constructor(instanceId: string);
+}

package/lib/form-stepper/models/form-step-group.model.d.ts

@@ -0,0 +1,8 @@
+import { BaseFormStep } from './base-form-step.model';
+import { FormStep } from './form-step.model';
+export declare class FormStepGroup extends BaseFormStep {
+    steps: FormStep[];
+    collapsed: boolean;
+    constructor(steps: FormStep[], instanceId: string, collapsed?: boolean);
+}
+export declare function isFormStepGroup(something: unknown): something is FormStepGroup;

package/lib/form-stepper/models/form-step.model.d.ts

@@ -0,0 +1,11 @@
+import { CircleStatus } from '@mtna/core-angular';
+import { BaseFormStep } from './base-form-step.model';
+export declare class FormStep extends BaseFormStep {
+    num: number | string;
+    label: string;
+    optional: boolean;
+    active: boolean;
+    disabledText?: string;
+    status: CircleStatus;
+    constructor(num: number | string, label: string, instanceId: string, optional?: boolean);
+}

package/lib/form-stepper/models/index.d.ts

@@ -0,0 +1,3 @@
+export * from './base-form-step.model';
+export * from './form-step-group.model';
+export * from './form-step.model';

package/lib/groups/_checkbox-theme.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
+@mixin color($theme) {
+  $config: mat.get-color-config($theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $foreground: map.get($config, foreground);
+  $warn: map.get($config, warn);
+
+  mtna-wf-checkbox-item.read-only .mat-checkbox {
+    .mat-checkbox-label {
+      color: mat.get-color-from-palette($foreground, disabled);
+    }
+    .mat-checkbox-inner-container .mat-checkbox-frame {
+      border-color: mat.get-color-from-palette($foreground, disabled);
+    }
+
+    &.mat-checkbox-checked:not(.mat-checkbox-disabled),
+    &.mat-checkbox-indeterminate:not(.mat-checkbox-disabled) {
+      &.mat-primary {
+        @include _wf-checkbox-color($primary);
+      }
+      &.mat-accent {
+        @include _wf-checkbox-color($accent);
+      }
+      .mat-checkbox-label {
+        color: mat.get-color-from-palette($foreground, text);
+      }
+    }
+  }
+
+  mtna-wf-checkbox-item .checkbox-error {
+    color: mat.get-color-from-palette($warn, default);
+  }
+}
+
+@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);
+  }
+}
+
+@mixin _wf-checkbox-color($palette) {
+  .mat-checkbox-inner-container {
+    .mat-checkbox-background {
+      background-color: mat.get-color-from-palette($palette);
+    }
+    .mat-checkbox-frame {
+      border-color: mat.get-color-from-palette($palette);
+    }
+  }
+}

package/lib/groups/_form-group-theme.scss

@@ -0,0 +1,32 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
+@mixin color($theme) {
+  $config: mat.get-color-config($theme);
+  $foreground: map.get($config, foreground);
+  $secondary-text: mat.get-color-from-palette($foreground, secondary-text);
+
+  mtna-wf-group {
+    .mat-list .mat-list-item {
+      p,
+      .mat-list-icon {
+        color: $secondary-text;
+      }
+    }
+  }
+}
+
+@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/groups/_multiple-choice-theme.scss

@@ -0,0 +1,65 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
+@mixin color($theme) {
+  $config: mat.get-color-config($theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $foreground: map.get($config, foreground);
+
+  mtna-wf-multiple-choice-item.read-only {
+    .mat-radio-button {
+      .mat-radio-outer-circle {
+        border-color: mat.get-color-from-palette($foreground, disabled);
+      }
+      .mat-radio-label-content {
+        color: mat.get-color-from-palette($foreground, disabled);
+      }
+
+      .mat-radio-ripple .mat-ripple-element,
+      .mat-radio-inner-circle {
+        background-color: mat.get-color-from-palette($foreground, disabled);
+      }
+      &.mat-radio-checked {
+        .mat-radio-label-content {
+          color: mat.get-color-from-palette($foreground, text);
+        }
+        &.mat-primary {
+          @include _wf-multiple-choice-radio-color($primary);
+        }
+
+        &.mat-accent {
+          @include _wf-multiple-choice-radio-color($accent);
+        }
+      }
+    }
+  }
+}
+
+@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);
+  }
+}
+
+@mixin _wf-multiple-choice-radio-color($palette) {
+  .mat-radio-outer-circle {
+    border-color: mat.get-color-from-palette($palette, 0.8);
+  }
+
+  .mat-radio-inner-circle,
+  .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
+  &.mat-radio-checked .mat-radio-persistent-ripple,
+  &:active .mat-radio-persistent-ripple {
+    background-color: mat.get-color-from-palette($palette, 0.8);
+  }
+}