@daffodil/design 0.66.0 → 0.67.0

package/fesm2022/daffodil-design.mjs

@@ -0,0 +1,2675 @@
+import * as i2 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation, HostBinding, Input, ContentChild, ChangeDetectionStrategy, NgModule, Optional, Self, HostListener, EventEmitter, ElementRef, ViewChild, Output, Directive, ContentChildren, Injectable, Inject, APP_INITIALIZER } from '@angular/core';
+import * as i2$1 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import * as i1 from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { Subject, fromEventPattern, of, merge, fromEvent, EMPTY, combineLatest } from 'rxjs';
+import { takeUntil, startWith, map, catchError, filter, shareReplay } from 'rxjs/operators';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { DaffServerSafePersistenceServiceToken } from '@daffodil/core';
+
+class DaffErrorStateMatcher {
+    isErrorState(control, formSubmitted) {
+        return control.errors && (control.touched || formSubmitted);
+    }
+}
+
+/**
+ *
+ * The class that a form control must **implement** in order to be
+ * used with the DaffFormFieldComponent.
+ *
+ * You may ask: "Why are you implementing an abstract class, not extending it?"
+ * We do this so that the Angular DI container can match the class token. A typical
+ * interface would be "more accurate" here, but since interfaces don't exist
+ * in javascript, they get thrown out by the typescript compiler and cannot
+ * be used for the necessary dependency injection.
+ */
+class DaffFormFieldControl {
+}
+;
+
+const DaffFormFieldMissingControlMessage = 'A DaffFormFieldComponent must contain a DaffFormFieldControl';
+
+// ChangeDetection is ignored because this component needs to be refactored
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+class DaffFormFieldComponent {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.faChevronDown = faChevronDown;
+        this.class = true;
+        /**
+         * The tracking property used to determine if the parent form has been submitted,
+         * and thus show an error message (even if the field hasn't been touched).
+         *
+         * @deprecated
+         */
+        // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+        this.formSubmitted = false;
+        /**
+         * Tracking property to keep a record of whether or not the
+         * form field should be marked as error.
+         */
+        this.isError = false;
+        /**
+         * Tracking property to keep a record of whether or not the
+         * form field should be marked as valid.
+         */
+        this.isValid = false;
+    }
+    /**
+     * @docs
+     *
+     * Determines whether or not the form field should display its focused state.
+     */
+    get isFocused() {
+        return this._control?.focused;
+    }
+    /**
+     * Keeps the state of the form field consistent with its child DaffFormControl
+     *
+     * TODO: consider whether or not this can be refactored to some kind of
+     * observable to remove unnecessary change detection.
+     *
+     * @docs-private
+     */
+    ngDoCheck() {
+        if (this._control?.ngControl) {
+            this.isError = this._control.ngControl.errors && (this._control.ngControl.touched);
+            this.isValid = !this._control.ngControl.errors && this._control.ngControl.touched;
+        }
+    }
+    /**
+     * Validate whether or not the FormField is in
+     * a "usable" state.
+     */
+    _validateFormControl() {
+        if (!this._control) {
+            throw new Error(DaffFormFieldMissingControlMessage);
+        }
+    }
+    /**
+     * Life cycle hook to verify that the form field has an acceptable
+     * child control instance. Mostly useful for development-time
+     * validation of usage.
+     *
+     * @docs-private
+     */
+    ngAfterContentInit() {
+        this._validateFormControl();
+    }
+    /**
+     * Life cycle hook to verify that the form field has an acceptable
+     * child control instance. Mostly useful for development-time
+     * validation of usage.
+     *
+     * @docs-private
+     */
+    ngAfterContentChecked() {
+        this._validateFormControl();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffFormFieldComponent, selector: "daff-form-field", inputs: { formSubmitted: "formSubmitted" }, host: { properties: { "class.daff-form-field": "this.class" } }, queries: [{ propertyName: "_control", first: true, predicate: DaffFormFieldControl, descendants: true }], ngImport: i0, template: "<div class=\"daff-form-field__control\" [class.daff-error]=\"isError\" [class.daff-valid]=\"isValid\" [class.daff-focus]=\"isFocused\">\n  <ng-content></ng-content>\n  <div class=\"daff-form-field__icon\" *ngIf=\"_control.controlType === 'native-select'\">\n    <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n  </div>\n</div>\n<ng-content select=\"daff-error-message\"></ng-content>\n", styles: [".daff-form-field{display:block;position:relative}.daff-form-field__control{border-radius:3px;display:inline-block;font-size:1rem;height:inherit;line-height:1.5rem;padding:10px 15px;width:100%}.daff-form-field__icon{display:inline-block;pointer-events:none;position:absolute;right:15px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-form-field', encapsulation: ViewEncapsulation.None, template: "<div class=\"daff-form-field__control\" [class.daff-error]=\"isError\" [class.daff-valid]=\"isValid\" [class.daff-focus]=\"isFocused\">\n  <ng-content></ng-content>\n  <div class=\"daff-form-field__icon\" *ngIf=\"_control.controlType === 'native-select'\">\n    <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n  </div>\n</div>\n<ng-content select=\"daff-error-message\"></ng-content>\n", styles: [".daff-form-field{display:block;position:relative}.daff-form-field__control{border-radius:3px;display:inline-block;font-size:1rem;height:inherit;line-height:1.5rem;padding:10px 15px;width:100%}.daff-form-field__icon{display:inline-block;pointer-events:none;position:absolute;right:15px}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-form-field']
+            }], formSubmitted: [{
+                type: Input
+            }], _control: [{
+                type: ContentChild,
+                args: [DaffFormFieldControl]
+            }] } });
+
+class DaffErrorMessageComponent {
+    constructor() {
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffErrorMessageComponent, selector: "daff-error-message", host: { properties: { "class.daff-error-message": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;font-size:.875rem;margin-top:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffErrorMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-error-message', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;font-size:.875rem;margin-top:5px}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-error-message']
+            }] } });
+
+class DaffErrorMessageModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffErrorMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffErrorMessageModule, declarations: [DaffErrorMessageComponent], exports: [DaffErrorMessageComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffErrorMessageModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffErrorMessageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        DaffErrorMessageComponent,
+                    ],
+                    declarations: [
+                        DaffErrorMessageComponent,
+                    ],
+                }]
+        }] });
+
+class DaffFormFieldModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffFormFieldModule, declarations: [DaffFormFieldComponent], imports: [CommonModule,
+            FontAwesomeModule,
+            DaffErrorMessageModule], exports: [DaffFormFieldComponent,
+            DaffErrorMessageModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFormFieldModule, imports: [CommonModule,
+            FontAwesomeModule,
+            DaffErrorMessageModule, DaffErrorMessageModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFormFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FontAwesomeModule,
+                        DaffErrorMessageModule,
+                    ],
+                    exports: [
+                        DaffFormFieldComponent,
+                        DaffErrorMessageModule,
+                    ],
+                    declarations: [
+                        DaffFormFieldComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * DaffInputComponent provides the same functionality as a native `<input>` and contains custom styling and functionality.
+ */
+class DaffInputComponent {
+    /**
+     * @docs-private
+     */
+    focus() {
+        this.focused = true;
+    }
+    /**
+     * @docs-private
+     */
+    blur() {
+        this.focused = false;
+    }
+    constructor(
+    /**
+     * @docs-private
+     */
+    ngControl, _elementRef) {
+        this.ngControl = ngControl;
+        this._elementRef = _elementRef;
+        this.focused = false;
+    }
+    onFocus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffInputComponent, selector: "input[daff-input]", inputs: { formSubmitted: "formSubmitted" }, host: { listeners: { "focus": "focus()", "blur": "blur()" } }, providers: [
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            { provide: DaffFormFieldControl, useExisting: DaffInputComponent },
+        ], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{border:none;border-radius:4px;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;padding:0;width:100%;box-sizing:border-box}:host:focus{border:none;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[daff-input]', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                        { provide: DaffFormFieldControl, useExisting: DaffInputComponent },
+                    ], styles: [":host{border:none;border-radius:4px;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;padding:0;width:100%;box-sizing:border-box}:host:focus{border:none;box-shadow:none;outline:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }], propDecorators: { formSubmitted: [{
+                type: Input
+            }], focus: [{
+                type: HostListener,
+                args: ['focus']
+            }], blur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+class DaffInputModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffInputModule, declarations: [DaffInputComponent], imports: [CommonModule], exports: [DaffInputComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffInputModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [
+                        DaffInputComponent,
+                    ],
+                    declarations: [
+                        DaffInputComponent,
+                    ],
+                }]
+        }] });
+
+class DaffNativeSelectComponent {
+    /**
+     * @docs-private
+     */
+    focus() {
+        this.focused = true;
+    }
+    /**
+     * @docs-private
+     */
+    blur() {
+        this.focused = false;
+    }
+    constructor(
+    /**
+     * @docs-private
+     */
+    ngControl, _elementRef) {
+        this.ngControl = ngControl;
+        this._elementRef = _elementRef;
+        /**
+         * @docs-private
+         */
+        this.controlType = 'native-select';
+        this.class = true;
+        this.focused = false;
+    }
+    onFocus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffNativeSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffNativeSelectComponent, selector: "select[daff-native-select]", inputs: { formSubmitted: "formSubmitted" }, host: { listeners: { "focus": "focus()", "blur": "blur()" }, properties: { "class.daff-native-select": "this.class" } }, providers: [
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            { provide: DaffFormFieldControl, useExisting: DaffNativeSelectComponent },
+        ], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".daff-native-select{appearance:none;background:transparent;background-clip:padding-box;border:0;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;min-width:45px;width:100%}.daff-native-select:focus{border:0;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffNativeSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'select[daff-native-select]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                        { provide: DaffFormFieldControl, useExisting: DaffNativeSelectComponent },
+                    ], styles: [".daff-native-select{appearance:none;background:transparent;background-clip:padding-box;border:0;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;min-width:45px;width:100%}.daff-native-select:focus{border:0;box-shadow:none;outline:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-native-select']
+            }], formSubmitted: [{
+                type: Input
+            }], focus: [{
+                type: HostListener,
+                args: ['focus']
+            }], blur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+class DaffNativeSelectModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffNativeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffNativeSelectModule, declarations: [DaffNativeSelectComponent], imports: [CommonModule], exports: [DaffNativeSelectComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffNativeSelectModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffNativeSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [
+                        DaffNativeSelectComponent,
+                    ],
+                    declarations: [
+                        DaffNativeSelectComponent,
+                    ],
+                }]
+        }] });
+
+let checkboxIdNum = 0;
+class DaffCheckboxComponent {
+    get checked() {
+        return this._checked;
+    }
+    set checked(value) {
+        if (this._checked === value) {
+            return;
+        }
+        if (value === true) {
+            this.nativeCheckbox.nativeElement.checked = true;
+            this.becameChecked.emit(this._checked);
+        }
+        else {
+            this.nativeCheckbox.nativeElement.checked = false;
+            this.becameUnchecked.emit();
+        }
+        this._checked = value;
+    }
+    /**
+     * @docs-private
+     */
+    _onChange(val) {
+        if (val.target.checked) {
+            this.select();
+        }
+        else {
+            this.deselect();
+        }
+    }
+    ;
+    /**
+     * @docs-private
+     */
+    get focusClass() {
+        return this.focused === true;
+    }
+    ;
+    /**
+     * @docs-private
+     */
+    get disabledClass() {
+        return this.disabled === true;
+    }
+    ;
+    /**
+     * Sets focused to false.
+     */
+    onBlur() {
+        this.focused = false;
+    }
+    /**
+     * Sets focused to true.
+     */
+    onFocus() {
+        this.focused = true;
+    }
+    constructor(_cdRef) {
+        this._cdRef = _cdRef;
+        /**
+         * Boolean value to determine whether or not the checkbox is checked.
+         */
+        this._checked = false;
+        /**
+         * The id of the checkbox. Must be unique. If not entered by a user then it is generated.
+         */
+        this.id = 'daff-checkbox-' + checkboxIdNum;
+        /**
+         * The aria-label of the checkbox.
+         */
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.label = '';
+        /**
+         * Event on whether or not the selection has changed.
+         */
+        this.becameChecked = new EventEmitter();
+        this.becameUnchecked = new EventEmitter();
+        /**
+         * The role of the component. Set to "checkbox".
+         *
+         * @docs-private
+         */
+        this.role = 'checkbox';
+        /**
+         * Increments id number on new checkbox. Gurantees unique ID on generation.
+         */
+        checkboxIdNum++;
+    }
+    /**
+     * Sets checked to true.
+     */
+    select() {
+        this.checked = true;
+        this._cdRef.markForCheck();
+    }
+    /**
+     * Sets checked to false
+     */
+    deselect() {
+        this.checked = false;
+        this._cdRef.markForCheck();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffCheckboxComponent, selector: "daff-checkbox", inputs: { name: "name", value: "value", checked: "checked", id: "id", label: ["aria-label", "label"], labeledBy: ["aria-labelledby", "labeledBy"] }, outputs: { becameChecked: "becameChecked", becameUnchecked: "becameUnchecked" }, host: { properties: { "attr.role": "this.role", "class.focused": "this.focusClass", "class.disabled": "this.disabledClass" } }, viewQueries: [{ propertyName: "nativeCheckbox", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<input #inputElement\ntype=\"checkbox\"\n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labeledBy\"\n[attr.checked]=\"checked ? '' : null\"\n[attr.id] = \"id\"\n[attr.value]=\"value\"\n[attr.name]=\"name\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"_onChange($event)\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"\n/>\n<label [attr.for]=\"id\"><ng-content></ng-content></label>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input #inputElement\ntype=\"checkbox\"\n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labeledBy\"\n[attr.checked]=\"checked ? '' : null\"\n[attr.id] = \"id\"\n[attr.value]=\"value\"\n[attr.name]=\"name\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"_onChange($event)\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"\n/>\n<label [attr.for]=\"id\"><ng-content></ng-content></label>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { nativeCheckbox: [{
+                type: ViewChild,
+                args: ['inputElement', { static: true, read: ElementRef }]
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input,
+                args: ['aria-label']
+            }], labeledBy: [{
+                type: Input,
+                args: ['aria-labelledby']
+            }], becameChecked: [{
+                type: Output
+            }], becameUnchecked: [{
+                type: Output
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], focusClass: [{
+                type: HostBinding,
+                args: ['class.focused']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }] } });
+
+/**
+ * A directive for binding the DaffCheckboxComponent and the Control Value Accessor.
+ */
+class DaffCheckboxControlValueAccessorDirective {
+    constructor(_control, _checkbox) {
+        this._control = _control;
+        this._checkbox = _checkbox;
+        if (this._control != null) {
+            this._control.valueAccessor = this;
+        }
+    }
+    /**
+     * A lifecycle method called when the directive is initialized.
+     */
+    ngOnInit() {
+        // See the note about `writeValue` usage.
+        this.writeValue(this._control.value);
+        // Watch for user events on the component to update the state
+        this._checkbox.becameChecked.subscribe(() => {
+            this._onChange(true);
+        });
+        this._checkbox.becameUnchecked.subscribe(() => {
+            this._onChange(false);
+        });
+    }
+    /**
+     * writes a new value down into the component.
+     */
+    writeValue(value) {
+        value = !!value;
+        if (value === true) {
+            this.fireSelect();
+        }
+        else {
+            this.fireDeselect();
+        }
+    }
+    /**
+     * Registers the change handler
+     */
+    registerOnChange(fn) {
+        this._onChange = (val) => {
+            fn(val);
+        };
+    }
+    /**
+     * Registers the touched handler
+     */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /**
+     * Sets the disabled state.
+     */
+    setDisabledState(isDisabled) {
+        this._checkbox.disabled = isDisabled;
+    }
+    /**
+     * calls the child checkbox's select function
+     */
+    fireSelect() {
+        this._checkbox.select();
+    }
+    /**
+     * calls the child checkbox's deselect function
+     */
+    fireDeselect() {
+        this._checkbox.deselect();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffCheckboxControlValueAccessorDirective, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DaffCheckboxComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffCheckboxControlValueAccessorDirective, selector: "daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]", inputs: { value: "value", name: "name" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffCheckboxControlValueAccessorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]',
+                }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: DaffCheckboxComponent }], propDecorators: { value: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+class DaffCheckboxSetComponent {
+    constructor() {
+        /**
+         * The role of the component. Set to "checkbox".
+         *
+         * @docs-private
+         */
+        this.role = 'group';
+        this.valueList = new EventEmitter();
+    }
+    getValues() {
+        const checkboxes = this.checkboxes.toArray();
+        return this.formArray.value.map((element, index) => element === true ? checkboxes[index].value : false).filter(element => element !== false);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffCheckboxSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffCheckboxSetComponent, selector: "daff-checkbox-set", inputs: { formArray: "formArray", name: "name" }, outputs: { valueList: "valueList" }, host: { properties: { "attr.role": "this.role" } }, queries: [{ propertyName: "checkboxes", predicate: DaffCheckboxComponent }], ngImport: i0, template: "<ng-content></ng-content>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffCheckboxSetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-checkbox-set', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>" }]
+        }], propDecorators: { formArray: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], checkboxes: [{
+                type: ContentChildren,
+                args: [DaffCheckboxComponent]
+            }], valueList: [{
+                type: Output
+            }] } });
+
+class DaffCheckboxModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffCheckboxModule, declarations: [DaffCheckboxComponent,
+            DaffCheckboxSetComponent,
+            DaffCheckboxControlValueAccessorDirective], imports: [CommonModule], exports: [DaffCheckboxComponent,
+            DaffCheckboxSetComponent,
+            DaffCheckboxControlValueAccessorDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffCheckboxModule, providers: [
+            DaffCheckboxSetComponent,
+        ], imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        DaffCheckboxComponent,
+                        DaffCheckboxSetComponent,
+                        DaffCheckboxControlValueAccessorDirective,
+                    ],
+                    declarations: [
+                        DaffCheckboxComponent,
+                        DaffCheckboxSetComponent,
+                        DaffCheckboxControlValueAccessorDirective,
+                    ],
+                    imports: [
+                        CommonModule,
+                    ],
+                    providers: [
+                        DaffCheckboxSetComponent,
+                    ],
+                }]
+        }] });
+
+class DaffQuantityInputComponent {
+    get focused() {
+        return this.input?.focused;
+    }
+    get value() {
+        return this.ngControl.control.value;
+    }
+    set value(value) {
+        const val = Math.min(Math.round(coerceNumberProperty(value)), this.max);
+        this.ngControl.control.patchValue(val);
+        this._inputControl.patchValue(val);
+        this.changeDetectorRef.markForCheck();
+    }
+    get disabled() {
+        return this.ngControl.control.disabled;
+    }
+    constructor(ngControl, changeDetectorRef) {
+        this.ngControl = ngControl;
+        this.changeDetectorRef = changeDetectorRef;
+        /**
+         * @docs
+         * The minimum number for the quantity input field
+         */
+        this.min = 1;
+        /**
+         * @docs
+         * The maximum number for the quantity input field
+         */
+        this.max = 10;
+        /**
+         * A new control for the nested native input.
+         * We don't bind the native input directly to the inherited form control
+         * to avoid triggering updates on the input event.
+         * Instead, we listen for the change event and manually patch form control values.
+         */
+        this._inputControl = new UntypedFormControl();
+        this._destroyed = new Subject();
+    }
+    ngOnInit() {
+        this._inputControl.patchValue(this.ngControl.control.value);
+        this.setInputDisabled();
+        this.ngControl.statusChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
+            this.setInputDisabled();
+        });
+    }
+    ngOnDestroy() {
+        this._destroyed.next(true);
+    }
+    focus() {
+        this.input.focus();
+    }
+    onFocus() {
+        this.ngControl.control.markAsTouched();
+    }
+    onBlur() {
+        if (this.value === null || this.value === undefined) {
+            this.value = 1;
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    /**
+     * Callback function fired when the value changes.
+     * Used to pass the value back up to the ngControl.
+     */
+    onValueChange(e) {
+        this.value = e.target.value;
+    }
+    setInputDisabled() {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this.ngControl.disabled
+            ? this._inputControl.disable()
+            : this._inputControl.enable();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQuantityInputComponent, deps: [{ token: i1.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffQuantityInputComponent, selector: "daff-quantity-input", inputs: { min: "min", max: "max" }, viewQueries: [{ propertyName: "input", first: true, predicate: DaffInputComponent, descendants: true }], ngImport: i0, template: "<input daff-input\n  type=\"number\"\n  [attr.max]=\"max\"\n  [attr.min]=\"min\"\n  [attr.step]=\"1\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  (change)=\"onValueChange($event)\"\n  [formControl]=\"_inputControl\"\n>\n", dependencies: [{ kind: "component", type: DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQuantityInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-quantity-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input daff-input\n  type=\"number\"\n  [attr.max]=\"max\"\n  [attr.min]=\"min\"\n  [attr.step]=\"1\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  (change)=\"onValueChange($event)\"\n  [formControl]=\"_inputControl\"\n>\n" }]
+        }], ctorParameters: () => [{ type: i1.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
+                type: ViewChild,
+                args: [DaffInputComponent]
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }] } });
+
+/**
+ * Create an array of numbers from min to max, not including max.
+ */
+const makeValueArray = (min, max, increment) => Array(max - min).fill(0).map((x, i) => (i * increment) + min);
+class DaffQuantitySelectComponent {
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this.ngControl.control.patchValue(this._value);
+        this.changeDetectorRef.markForCheck();
+    }
+    constructor(ngControl, changeDetectorRef) {
+        this.ngControl = ngControl;
+        this.changeDetectorRef = changeDetectorRef;
+        /**
+         * @docs
+         * The minimum number selectable.
+         */
+        this.min = 1;
+        /**
+         * @docs
+         * The maximum number selectable;
+         */
+        this.max = 10;
+        /**
+         * @docs
+         * Property used to determine whether or not the DaffQuantitySelectComponent is
+         * used in a situation whether the `max` isn't a true max.
+         */
+        this.extendable = true;
+        /**
+         * The amount to increment between "min" and "max".
+         */
+        this.increment = 1;
+        this._value = 1;
+    }
+    /**
+     * Callback function fired when the value changes.
+     * Used to pass the value back up to the ngControl.
+     */
+    onValueChange(e) {
+        this.value = e.target.value;
+    }
+    get focused() {
+        return this.select.focused;
+    }
+    focus() {
+        this.select.focus();
+    }
+    onFocus() {
+        this.ngControl.control.markAsTouched();
+    }
+    /**
+     * A helper function for easily making options for the `select`.
+     */
+    get valueArray() {
+        return makeValueArray(this.min, this.max, this.increment);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQuantitySelectComponent, deps: [{ token: i1.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffQuantitySelectComponent, selector: "daff-quantity-select", inputs: { min: "min", max: "max", extendable: "extendable" }, viewQueries: [{ propertyName: "select", first: true, predicate: DaffNativeSelectComponent, descendants: true }], ngImport: i0, template: "<select daff-native-select\n  [formControl]=\"ngControl.control\"\n  (focus)=\"onFocus()\"\n>\n  <option *ngFor=\"let item of valueArray\" [value]=\"item\">{{ item }}</option>\n  <option [value]=\"max\" *ngIf=\"extendable\">{{ max }}+</option>\n  <option [value]=\"max\" *ngIf=\"!extendable\">{{ max }}</option>\n</select>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DaffNativeSelectComponent, selector: "select[daff-native-select]", inputs: ["formSubmitted"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQuantitySelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-quantity-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select daff-native-select\n  [formControl]=\"ngControl.control\"\n  (focus)=\"onFocus()\"\n>\n  <option *ngFor=\"let item of valueArray\" [value]=\"item\">{{ item }}</option>\n  <option [value]=\"max\" *ngIf=\"extendable\">{{ max }}+</option>\n  <option [value]=\"max\" *ngIf=\"!extendable\">{{ max }}</option>\n</select>\n" }]
+        }], ctorParameters: () => [{ type: i1.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { select: [{
+                type: ViewChild,
+                args: [DaffNativeSelectComponent]
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], extendable: [{
+                type: Input
+            }] } });
+
+class DaffQuantityFieldComponent {
+    get focused() {
+        return !!(this.input?.focused || this.select?.focused);
+    }
+    get quantity() {
+        return this._quantity;
+    }
+    set quantity(value) {
+        this._quantity = coerceNumberProperty(value, 1);
+    }
+    /**
+     * Returns the lesser of max and selectMax.
+     */
+    get _maxFloor() {
+        return Math.min(this.max, this.selectMax);
+    }
+    get controlType() {
+        // TODO: use enum
+        return this.showInputField
+            ? 'native-input'
+            : 'native-select';
+    }
+    get showInputField() {
+        const ret = this._inputHasBeenShown || (this.ngControl
+            ? this.ngControl.value >= this.selectMax
+            : this.quantity >= this.selectMax);
+        if (ret) {
+            this._inputHasBeenShown = true;
+        }
+        return ret;
+    }
+    get showSelectField() {
+        return !this.showInputField;
+    }
+    constructor(ngControl, cd) {
+        this.ngControl = ngControl;
+        this.cd = cd;
+        /**
+         * @docs
+         * The minimum valid value of the quantity field.
+         * Must be greater than or equal to 1.
+         */
+        this.min = 1;
+        /**
+         * @docs
+         * The maximum valid value of the quantity field.
+         * Must be greater than min.
+         */
+        this.max = 500;
+        /**
+         * @docs
+         * The range of numbers acceptable in a quantity dropdown
+         * before it becomes an input element.
+         */
+        this.selectMax = 10;
+        this.disabled = false;
+        this._quantity = 1;
+        this._inputHasBeenShown = false;
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    onChange(quantity) { }
+    ;
+    onTouched(quantity) { }
+    ;
+    writeValue(quantity) {
+        this.quantity = quantity;
+        this.cd.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    focus() {
+        if (this.select) {
+            this.select.focus();
+        }
+        if (this.input) {
+            this.input.focus();
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQuantityFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffQuantityFieldComponent, selector: "daff-quantity-field", inputs: { min: "min", max: "max", selectMax: "selectMax" }, providers: [
+            {
+                provide: DaffFormFieldControl,
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                useExisting: DaffQuantityFieldComponent,
+            },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: DaffQuantityInputComponent, descendants: true }, { propertyName: "select", first: true, predicate: DaffQuantitySelectComponent, descendants: true }], ngImport: i0, template: "<daff-quantity-select\n  *ngIf=\"showSelectField\"\n  [min]=\"min\" [max]=\"_maxFloor\" [extendable]=\"max > selectMax\">\n</daff-quantity-select>\n<daff-quantity-input\n  *ngIf=\"showInputField\"\n  [min]=\"min\" [max]=\"max\">\n</daff-quantity-input>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DaffQuantityInputComponent, selector: "daff-quantity-input", inputs: ["min", "max"] }, { kind: "component", type: DaffQuantitySelectComponent, selector: "daff-quantity-select", inputs: ["min", "max", "extendable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQuantityFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-quantity-field', providers: [
+                        {
+                            provide: DaffFormFieldControl,
+                            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                            useExisting: DaffQuantityFieldComponent,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<daff-quantity-select\n  *ngIf=\"showSelectField\"\n  [min]=\"min\" [max]=\"_maxFloor\" [extendable]=\"max > selectMax\">\n</daff-quantity-select>\n<daff-quantity-input\n  *ngIf=\"showInputField\"\n  [min]=\"min\" [max]=\"max\">\n</daff-quantity-input>\n" }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
+                type: ViewChild,
+                args: [DaffQuantityInputComponent]
+            }], select: [{
+                type: ViewChild,
+                args: [DaffQuantitySelectComponent]
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], selectMax: [{
+                type: Input
+            }] } });
+
+class DaffQuantityFieldModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQuantityFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffQuantityFieldModule, declarations: [DaffQuantityFieldComponent,
+            DaffQuantityInputComponent,
+            DaffQuantitySelectComponent], imports: [CommonModule,
+            DaffNativeSelectModule,
+            DaffInputModule,
+            ReactiveFormsModule], exports: [DaffQuantityFieldComponent,
+            DaffQuantityInputComponent,
+            DaffQuantitySelectComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQuantityFieldModule, imports: [CommonModule,
+            DaffNativeSelectModule,
+            DaffInputModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQuantityFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DaffQuantityFieldComponent,
+                        DaffQuantityInputComponent,
+                        DaffQuantitySelectComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        DaffNativeSelectModule,
+                        DaffInputModule,
+                        ReactiveFormsModule,
+                    ],
+                    exports: [
+                        DaffQuantityFieldComponent,
+                        DaffQuantityInputComponent,
+                        DaffQuantitySelectComponent,
+                    ],
+                }]
+        }] });
+
+const daffProgressIndicatorAnimation = {
+    fill: trigger('fill', [
+        state('*', style({ width: '{{ percentage }}%' }), { params: { percentage: 0 } }),
+        transition('* <=> *', animate(1000)),
+    ]),
+};
+
+var DaffPaletteEnum;
+(function (DaffPaletteEnum) {
+    DaffPaletteEnum["PRIMARY"] = "primary";
+    DaffPaletteEnum["SECONDARY"] = "secondary";
+    DaffPaletteEnum["ACCENT"] = "accent";
+    DaffPaletteEnum["TERTIARY"] = "tertiary";
+    DaffPaletteEnum["BLACK"] = "black";
+    DaffPaletteEnum["WHITE"] = "white";
+    DaffPaletteEnum["THEME"] = "theme";
+    DaffPaletteEnum["THEMECONTRAST"] = "theme-contrast";
+})(DaffPaletteEnum || (DaffPaletteEnum = {}));
+
+function colorInPalette(color) {
+    return Object.values(DaffPaletteEnum).includes(color);
+}
+
+/**
+ * This should be a trait, but typescript only supports mixins.
+ * See: https://github.com/Microsoft/TypeScript/issues/311
+ *
+ * Turns out the material team followed the same path with the color mixin.
+ * https://github.com/angular/material2/blob/master/src/lib/core/common-behaviors/color.ts
+ */
+function daffColorMixin(Base, defaultColor) {
+    class DaffColorableMixinClass extends Base {
+        get color() {
+            return this._color;
+        }
+        set color(value) {
+            //Handle the default color
+            const incomingColor = value || defaultColor;
+            if (incomingColor !== undefined && !colorInPalette(incomingColor)) {
+                throw new TypeError(incomingColor + ' is not a valid color for the DaffPalette');
+            }
+            if (incomingColor !== this._color) { //Only run the dom-render if a change occurs
+                //Remove the old color
+                if (this._color) {
+                    this._renderer.removeClass(this._elementRef.nativeElement, `daff-${this._color}`);
+                }
+                if (incomingColor) {
+                    this._renderer.addClass(this._elementRef.nativeElement, `daff-${incomingColor}`);
+                }
+                this._color = incomingColor;
+            }
+        }
+        constructor(...args) {
+            super(...args);
+            this.color = defaultColor;
+        }
+    }
+    ;
+    // TODO: ugly workaround for https://github.com/microsoft/TypeScript/issues/7342#issuecomment-624298133
+    Input()(DaffColorableMixinClass.prototype, 'color');
+    return DaffColorableMixinClass;
+}
+
+/**
+ * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
+ */
+class DaffProgressIndicatorBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffProgressIndicatorBase = daffColorMixin(DaffProgressIndicatorBase, 'primary');
+/**
+ * @inheritdoc
+ */
+class DaffProgressIndicatorComponent extends _daffProgressIndicatorBase {
+    /**
+     * Calculates when the progress animation is fully completed
+     *
+     * @param event: AnimationEvent
+     */
+    onAnimationComplete(event) {
+        // @ts-expect-error: @angular/animations typing error on event.toState as string
+        // See: https://github.com/angular/angular/issues/26507
+        if (event.toState === '100' || event.toState === 100) {
+            this.finished.emit();
+        }
+    }
+    /**
+     * @docs-private
+     */
+    get fillState() {
+        return {
+            value: this.percentage,
+            params: {
+                percentage: this.percentage,
+            },
+        };
+    }
+    constructor(elementRef, renderer) {
+        super(elementRef, renderer);
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        /**
+         * @docs-private
+         */
+        this.class = true;
+        /**
+         * The percentage completion of the progression,
+         * expressed as a whole number between 0 and 100.
+         *
+         */
+        // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+        this.percentage = 0;
+        /**
+         * An event that emits each time the progression reaches 100%
+         * and the animation is finished
+         */
+        this.finished = new EventEmitter();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffProgressIndicatorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffProgressIndicatorComponent, selector: "daff-progress-indicator", inputs: { color: "color", percentage: "percentage" }, outputs: { finished: "finished" }, host: { properties: { "class.daff-progress-indicator": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"daff-progress-indicator__fill\" [@fill]=\"fillState\" (@fill.done)=\"onAnimationComplete($event)\"></div>", styles: [":host{display:flex;height:3px;width:100%}\n"], animations: [
+            daffProgressIndicatorAnimation.fill,
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffProgressIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-progress-indicator', changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color'], animations: [
+                        daffProgressIndicatorAnimation.fill,
+                    ], template: "<div class=\"daff-progress-indicator__fill\" [@fill]=\"fillState\" (@fill.done)=\"onAnimationComplete($event)\"></div>", styles: [":host{display:flex;height:3px;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-progress-indicator']
+            }], percentage: [{
+                type: Input
+            }], finished: [{
+                type: Output
+            }] } });
+
+class DaffProgressIndicatorModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffProgressIndicatorModule, declarations: [DaffProgressIndicatorComponent], imports: [CommonModule], exports: [DaffProgressIndicatorComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffProgressIndicatorModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffProgressIndicatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DaffProgressIndicatorComponent],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [DaffProgressIndicatorComponent],
+                }]
+        }] });
+
+class DaffRadioSetComponent {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.role = 'radiogroup';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffRadioSetComponent, selector: "daff-radio-set", inputs: { name: "name" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioSetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-radio-set', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>" }]
+        }], ctorParameters: () => [], propDecorators: { name: [{
+                type: Input
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }] } });
+
+let radioUniqueId = 0;
+class DaffRadioComponent {
+    /**
+     * @docs-private
+     */
+    get focusClass() {
+        return this.focused === true;
+    }
+    ;
+    /**
+     * @docs-private
+     */
+    get disabledClass() {
+        return this.disabled === true;
+    }
+    ;
+    /**
+     * The checked property of the radio
+     */
+    get checked() {
+        return this._checked;
+    }
+    set checked(value) {
+        if (this._checked !== value) {
+            this._checked = value;
+            this.selectionChange.emit(this.value);
+        }
+    }
+    constructor(radioset) {
+        this.radioset = radioset;
+        /**
+         * @docs-private
+         */
+        this.role = 'radio';
+        /**
+         * @docs-private
+         */
+        this._checked = false;
+        /**
+         * Output event of selection being changed
+         */
+        this.selectionChange = new EventEmitter();
+        /**
+         * The id of the radio. It is uniquely generated but can be overwritten by the user. Must be unique.
+         */
+        this.id = 'daff-radio-' + radioUniqueId;
+        /**
+         * Name of the Radio
+         */
+        this.name = '';
+        /**
+         * Used for aria-label. Default to name if user does not input a label.
+         */
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.label = this.name;
+        this.disabled = false;
+        this.focused = false;
+        radioUniqueId++;
+    }
+    /**
+     * @docs-private
+     */
+    ngOnInit() {
+        this.name = this.radioset ? this.radioset.name : this.name;
+    }
+    /**
+     * updates Focus styling
+     */
+    onFocus() {
+        this.focused = true;
+    }
+    /**
+     * updates Blur styling
+     */
+    onBlur() {
+        this.focused = false;
+    }
+    /**
+     * toggles checked attribute on
+     */
+    select() {
+        this.checked = true;
+    }
+    /**
+     * toggles checked attribute off
+     */
+    deselect() {
+        this.checked = false;
+    }
+    onChange() {
+        this.select();
+    }
+    ;
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioComponent, deps: [{ token: DaffRadioSetComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffRadioComponent, selector: "daff-radio", inputs: { checked: "checked", value: "value", id: "id", name: "name", label: ["aria-label", "label"], labelledby: ["aria-labelledby", "labelledby"] }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "attr.role": "this.role", "class.focused": "this.focusClass", "class.disabled": "this.disabledClass" } }, ngImport: i0, template: "<input type=\"radio\" \n[attr.checked]=\"checked ? '' : null\" \n[attr.id]=\"id\" \n[attr.name]=\"name\" \n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labelledby\"\n[attr.value]=\"value\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"onChange()\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"/>\n<label [attr.for]=\"id\">\n  <ng-content></ng-content>\n</label>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input type=\"radio\" \n[attr.checked]=\"checked ? '' : null\" \n[attr.id]=\"id\" \n[attr.name]=\"name\" \n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labelledby\"\n[attr.value]=\"value\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"onChange()\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"/>\n<label [attr.for]=\"id\">\n  <ng-content></ng-content>\n</label>" }]
+        }], ctorParameters: () => [{ type: DaffRadioSetComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], focusClass: [{
+                type: HostBinding,
+                args: ['class.focused']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }], selectionChange: [{
+                type: Output
+            }], checked: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input,
+                args: ['aria-label']
+            }], labelledby: [{
+                type: Input,
+                args: ['aria-labelledby']
+            }] } });
+
+class DaffRadioRegistry {
+    constructor() {
+        this._accessors = [];
+    }
+    /**
+     * @description
+     * Adds a control to the internal registry.
+     */
+    add(control, accessor) {
+        this._accessors.push({
+            control,
+            accessor,
+        });
+    }
+    /**
+     * @description
+     * Removes a control from the internal registry.
+     */
+    remove(accessor) {
+        for (let i = this._accessors.length - 1; i >= 0; --i) {
+            if (this._accessors[i]['accessor'] === accessor) {
+                this._accessors.splice(i, 1);
+                return;
+            }
+        }
+    }
+    /**
+     * @description
+     * Selects a radio button.
+     */
+    select(accessor) {
+        this._accessors.forEach((c) => {
+            if (this._isSameGroup(c, accessor) && c['accessor'] !== accessor) {
+                c['accessor'].fireDeselect();
+            }
+        });
+    }
+    _isSameGroup(controlPair, accessor) {
+        if (!controlPair['control'].control) {
+            return false;
+        }
+        return controlPair['control'].control.parent === accessor._control.control.parent
+            && controlPair['accessor'].name === accessor.name;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioRegistry, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * ControlValueAccessor functionality for the DaffRadio
+ */
+class DaffRadioControlValueAccessorDirective {
+    constructor(_control, _registry, _radio) {
+        this._control = _control;
+        this._registry = _registry;
+        this._radio = _radio;
+        if (this._control != null) {
+            this._control.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this.writeValue(this._control.value);
+        this._registry.add(this._control, this);
+        this._radio.selectionChange.subscribe(value => value ? this._onChange() : null);
+    }
+    /**
+     *
+     * writeValue function from the CVA interface
+     */
+    writeValue(value) {
+        // the this._onChange null check here is necessary because of an ongoing bug in angular forms
+        // where writeValue can be called before the component initializes: https://github.com/angular/angular/issues/29218
+        if (this.value === value && this._onChange) {
+            this._onChange();
+            this.fireSelect();
+        }
+    }
+    /**
+     * registerOnChange implemented from the CVA interface
+     */
+    registerOnChange(fn) {
+        this._onChange = () => {
+            fn(this.value);
+            this._registry.select(this);
+        };
+    }
+    /**
+     * registerOnTouch implemented from the CVA interface
+     */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /**
+     * sets the disabled state.
+     */
+    setDisabledState(isDisabled) {
+        this._radio.disabled = isDisabled;
+    }
+    /**
+      calls select function for the radio
+     */
+    fireSelect() {
+        this._radio.select();
+    }
+    /**
+      calls deselect function for the radio
+     */
+    fireDeselect() {
+        this._radio.deselect();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioControlValueAccessorDirective, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DaffRadioRegistry }, { token: DaffRadioComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffRadioControlValueAccessorDirective, selector: "daff-radio[ngModel], daff-radio[formControl], daff-radio[formControlName]", inputs: { value: "value", name: "name" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioControlValueAccessorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'daff-radio[ngModel], daff-radio[formControl], daff-radio[formControlName]',
+                }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: DaffRadioRegistry }, { type: DaffRadioComponent }], propDecorators: { value: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+class DaffRadioModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioModule, declarations: [DaffRadioControlValueAccessorDirective,
+            DaffRadioComponent,
+            DaffRadioSetComponent], imports: [CommonModule], exports: [DaffRadioComponent,
+            DaffRadioSetComponent,
+            DaffRadioControlValueAccessorDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffRadioModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        DaffRadioComponent,
+                        DaffRadioSetComponent,
+                        DaffRadioControlValueAccessorDirective,
+                    ],
+                    declarations: [
+                        DaffRadioControlValueAccessorDirective,
+                        DaffRadioComponent,
+                        DaffRadioSetComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                    ],
+                }]
+        }] });
+
+class DaffFormLabelDirective {
+    constructor() {
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffFormLabelDirective, selector: "[daffFormLabel]", host: { properties: { "class.daff-form-label": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFormLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffFormLabel]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-form-label']
+            }] } });
+
+class DaffFormLabelModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFormLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffFormLabelModule, declarations: [DaffFormLabelDirective], exports: [DaffFormLabelDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFormLabelModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFormLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        DaffFormLabelDirective,
+                    ],
+                    declarations: [
+                        DaffFormLabelDirective,
+                    ],
+                }]
+        }] });
+
+const animationDuration = '350ms';
+const backdropTransitionOut = 'cubic-bezier(0.4, 0.0, 1, 1)';
+const backdropTransitionIn = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
+const daffBackdropAnimations = {
+    fadeBackdrop: trigger('fadeBackdrop', [
+        state('interactable', style({ opacity: 1 })),
+        state('non-interactable', style({ opacity: 0 })),
+        transition('interactable => non-interactable', animate(animationDuration + ' ' + backdropTransitionOut)),
+        transition('non-interactable => interactable', animate(animationDuration + ' ' + backdropTransitionIn)),
+        transition(':enter', [
+            style({ opacity: 0 }),
+            animate(animationDuration + ' ' + backdropTransitionIn, style({ opacity: 1 })),
+        ]),
+        transition(':leave', [
+            animate(animationDuration + ' ' + backdropTransitionOut, style({ opacity: 0 })),
+        ]),
+    ]),
+};
+
+const getAnimationState = (interactable) => interactable ? 'interactable' : 'non-interactable';
+
+class DaffBackdropComponent {
+    constructor() {
+        /**
+         * Determines whether or not the backdrop is transparent.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+        this.transparent = false;
+        /**
+         * Determines whether or not the backdrop is interactable.
+         */
+        this.interactable = true;
+        /**
+         * Boolean property that determines whether or not the
+         * backdrop should fill up its containing window.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+        this.fullscreen = false;
+        /**
+         * Output event triggered when the backdrop is clicked.
+         */
+        this.backdropClicked = new EventEmitter();
+        this.interactableClass = true;
+    }
+    ngOnInit() {
+        this.interactableClass = this.interactable;
+    }
+    /**
+     * Animation hook for that controls the backdrops
+     * entrance and fade animations.
+     */
+    get fadeBackdropTrigger() {
+        return getAnimationState(this.interactable);
+    }
+    animationDone(e) {
+        this.interactableClass = !(e.toState === ':leave' || e.toState === 'non-interactable');
+    }
+    animationStart(e) {
+        if (e.toState === ':enter' || e.toState === 'interactable') {
+            this.interactableClass = true;
+        }
+    }
+    /**
+     * @deprecated
+     * Backdrop event that triggers when the backdrop element is clicked.
+     */
+    onBackdropClicked() {
+        this.backdropClicked.emit();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffBackdropComponent, selector: "daff-backdrop", inputs: { transparent: "transparent", interactable: "interactable", fullscreen: "fullscreen" }, outputs: { backdropClicked: "backdropClicked" }, host: { listeners: { "@fadeBackdrop.done": "animationDone($event)", "@fadeBackdrop.start": "animationStart($event)", "click": "onBackdropClicked()" }, properties: { "class.interactable": "this.interactableClass", "@fadeBackdrop": "this.fadeBackdropTrigger" } }, ngImport: i0, template: "<div class=\"daff-backdrop\" [class.daff-backdrop--fullscreen]=\"fullscreen\" [class.daff-backdrop--transparent]=\"transparent\"></div>\n", styles: [":host{display:block;-webkit-tap-highlight-color:rgba(0,0,0,0);visibility:hidden;pointer-events:none}:host.interactable{visibility:visible;pointer-events:all;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.daff-backdrop{background:#0000004d;height:100%;width:100%}.daff-backdrop--transparent{background:none}.daff-backdrop:focus,.daff-backdrop:active,.daff-backdrop:visited{outline:0}.daff-backdrop--fullscreen{position:absolute}\n"], animations: [
+            daffBackdropAnimations.fadeBackdrop,
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffBackdropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-backdrop', animations: [
+                        daffBackdropAnimations.fadeBackdrop,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"daff-backdrop\" [class.daff-backdrop--fullscreen]=\"fullscreen\" [class.daff-backdrop--transparent]=\"transparent\"></div>\n", styles: [":host{display:block;-webkit-tap-highlight-color:rgba(0,0,0,0);visibility:hidden;pointer-events:none}:host.interactable{visibility:visible;pointer-events:all;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.daff-backdrop{background:#0000004d;height:100%;width:100%}.daff-backdrop--transparent{background:none}.daff-backdrop:focus,.daff-backdrop:active,.daff-backdrop:visited{outline:0}.daff-backdrop--fullscreen{position:absolute}\n"] }]
+        }], propDecorators: { transparent: [{
+                type: Input
+            }], interactable: [{
+                type: Input
+            }], fullscreen: [{
+                type: Input
+            }], backdropClicked: [{
+                type: Output
+            }], interactableClass: [{
+                type: HostBinding,
+                args: ['class.interactable']
+            }], fadeBackdropTrigger: [{
+                type: HostBinding,
+                args: ['@fadeBackdrop']
+            }], animationDone: [{
+                type: HostListener,
+                args: ['@fadeBackdrop.done', ['$event']]
+            }], animationStart: [{
+                type: HostListener,
+                args: ['@fadeBackdrop.start', ['$event']]
+            }], onBackdropClicked: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class DaffBackdropModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffBackdropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffBackdropModule, declarations: [DaffBackdropComponent], imports: [CommonModule], exports: [DaffBackdropComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffBackdropModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffBackdropModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    declarations: [
+                        DaffBackdropComponent,
+                    ],
+                    exports: [
+                        DaffBackdropComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * @deprecated in v1.0.0
+ */
+class DaffButtonSetComponent {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffButtonSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffButtonSetComponent, selector: "daff-button-set", host: { properties: { "class.daff-button-set": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".daff-button-set{display:flex;flex-direction:column;flex-wrap:wrap}@media (min-width: 480px){.daff-button-set{flex-direction:row}}.daff-button-set>*{margin:0 0 5px}.daff-button-set>*:last-child{margin:0}@media (min-width: 480px){.daff-button-set>*{margin:0 5px 0 0}.daff-button-set>*:last-child{margin:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffButtonSetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-button-set', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".daff-button-set{display:flex;flex-direction:column;flex-wrap:wrap}@media (min-width: 480px){.daff-button-set{flex-direction:row}}.daff-button-set>*{margin:0 0 5px}.daff-button-set>*:last-child{margin:0}@media (min-width: 480px){.daff-button-set>*{margin:0 5px 0 0}.daff-button-set>*:last-child{margin:0}}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-button-set']
+            }] } });
+
+class DaffButtonSetModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffButtonSetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffButtonSetModule, declarations: [DaffButtonSetComponent], exports: [DaffButtonSetComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffButtonSetModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffButtonSetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DaffButtonSetComponent,
+                    ],
+                    exports: [
+                        DaffButtonSetComponent,
+                    ],
+                }]
+        }] });
+
+class DaffImageListComponent {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffImageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffImageListComponent, selector: "daff-image-list", host: { properties: { "class.daff-image-list": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffImageListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-image-list', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-image-list']
+            }] } });
+
+/**
+ * @deprecated See {@link DaffMediaGalleryComponent}
+ */
+class DaffImageGalleryComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffImageGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffImageGalleryComponent, selector: "daff-image-gallery", ngImport: i0, template: "<div class=\"daff-image-gallery\">\n  <div class=\"daff-image-gallery__active-image\">\n    <ng-content select=\"[daff-active-image]\"></ng-content>\n  </div>\n\n  <daff-image-list class=\"daff-image-gallery__image-list\">\n    <ng-content select=\"daff-gallery-image\"></ng-content>\n  </daff-image-list>\n</div>\n", styles: [".daff-image-gallery{display:grid;flex-direction:column;grid-template-areas:\"active-image\" \"image-list\";max-height:100%}@media (min-width: 1024px){.daff-image-gallery{grid-template-areas:\"image-list active-image\";max-height:min-content}}.daff-image-gallery__active-image{grid-area:active-image}.daff-image-gallery__active-image img{display:block;max-width:100%}.daff-image-gallery__image-list{grid-area:image-list;margin:5px 0 0;max-height:100%}@media (min-width: 1024px){.daff-image-gallery__image-list{margin:0 25px 0 0;max-height:-webkit-fill-available}}.daff-image-gallery__daff-gallery-image img{display:block;opacity:.6;width:90px}.daff-image-gallery__daff-gallery-image--selected img{opacity:1}\n"], dependencies: [{ kind: "component", type: DaffImageListComponent, selector: "daff-image-list" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffImageGalleryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-image-gallery', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"daff-image-gallery\">\n  <div class=\"daff-image-gallery__active-image\">\n    <ng-content select=\"[daff-active-image]\"></ng-content>\n  </div>\n\n  <daff-image-list class=\"daff-image-gallery__image-list\">\n    <ng-content select=\"daff-gallery-image\"></ng-content>\n  </daff-image-list>\n</div>\n", styles: [".daff-image-gallery{display:grid;flex-direction:column;grid-template-areas:\"active-image\" \"image-list\";max-height:100%}@media (min-width: 1024px){.daff-image-gallery{grid-template-areas:\"image-list active-image\";max-height:min-content}}.daff-image-gallery__active-image{grid-area:active-image}.daff-image-gallery__active-image img{display:block;max-width:100%}.daff-image-gallery__image-list{grid-area:image-list;margin:5px 0 0;max-height:100%}@media (min-width: 1024px){.daff-image-gallery__image-list{margin:0 25px 0 0;max-height:-webkit-fill-available}}.daff-image-gallery__daff-gallery-image img{display:block;opacity:.6;width:90px}.daff-image-gallery__daff-gallery-image--selected img{opacity:1}\n"] }]
+        }] });
+
+/**
+ * @deprecated See {@link DaffThumbnailDirective}
+ */
+class DaffGalleryImageComponent {
+    constructor() {
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffGalleryImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffGalleryImageComponent, selector: "daff-gallery-image", inputs: { selected: "selected" }, host: { properties: { "class.daff-image-gallery__daff-gallery-image--selected": "this.selected", "class.daff-image-gallery__daff-gallery-image": "this.class" } }, ngImport: i0, template: "<div class=\"gallery-image__wrapper\">\n  <ng-content></ng-content>\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffGalleryImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-gallery-image', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gallery-image__wrapper\">\n  <ng-content></ng-content>\n</div>" }]
+        }], propDecorators: { selected: [{
+                type: HostBinding,
+                args: ['class.daff-image-gallery__daff-gallery-image--selected']
+            }, {
+                type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class.daff-image-gallery__daff-gallery-image']
+            }] } });
+
+class DaffImageListModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffImageListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffImageListModule, declarations: [DaffImageListComponent], imports: [CommonModule], exports: [DaffImageListComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffImageListModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffImageListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    declarations: [
+                        DaffImageListComponent,
+                    ],
+                    exports: [
+                        DaffImageListComponent,
+                    ],
+                }]
+        }] });
+
+class DaffImageGalleryModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffImageGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffImageGalleryModule, declarations: [DaffImageGalleryComponent,
+            DaffGalleryImageComponent], imports: [CommonModule,
+            DaffImageListModule], exports: [DaffImageGalleryComponent,
+            DaffGalleryImageComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffImageGalleryModule, imports: [CommonModule,
+            DaffImageListModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffImageGalleryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DaffImageListModule,
+                    ],
+                    declarations: [
+                        DaffImageGalleryComponent,
+                        DaffGalleryImageComponent,
+                    ],
+                    exports: [
+                        DaffImageGalleryComponent,
+                        DaffGalleryImageComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * @deprecated See {@link DaffQuantityFieldComponent}
+ */
+// ChangeDetection is ignored because this component is deprecated and will be removed
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+class DaffQtyDropdownComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.dropdownRange = 9;
+        this.qtyChanged = new EventEmitter();
+        /**
+         * @docs-private
+         */
+        this.onChange = (qty) => { };
+        /**
+         * @docs-private
+         */
+        this.onTouched = () => { };
+    }
+    /**
+     * @docs-private
+     */
+    ngOnInit() {
+        this.dropdownItemCounter = Array.from(Array(this.dropdownRange), (x, i) => i);
+        if (!this.qty) {
+            this.qty = 1;
+        }
+    }
+    /**
+     * @docs-private
+     */
+    writeValue(qty) {
+        this.qty = qty;
+        this.onChange(this.qty);
+    }
+    /**
+     * @docs-private
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * @docs-private
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * @docs-private
+     */
+    setDisabledState(isDisabled) {
+        if (this.inputHasBeenShown) {
+            this.renderer.setProperty(document.getElementById('input_' + this.id), 'disabled', isDisabled);
+        }
+        else {
+            this.renderer.setProperty(document.getElementById('select_' + this.id), 'disabled', isDisabled);
+        }
+    }
+    /**
+     * @docs-private
+     */
+    get showQtyInputField() {
+        if (!this.isQtyOutsideDropdownRange() && !this.inputHasBeenShown) {
+            return false;
+        }
+        else {
+            this.inputHasBeenShown = true;
+            return true;
+        }
+    }
+    /**
+     * @docs-private
+     */
+    onChangedWrapper(value) {
+        value = parseInt(value, 10);
+        if (value === 10) {
+            this.selectInput();
+        }
+        this.qtyChanged.emit(value);
+        this.onChange(value);
+    }
+    isQtyOutsideDropdownRange() {
+        return this.qty > this.dropdownRange;
+    }
+    selectInput() {
+        // TODO: readdress this method
+        // why use `setTimeout` instead of angular patterns?
+        setTimeout(() => {
+            const input = document.getElementById('input_' + this.id);
+            input?.select();
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQtyDropdownComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffQtyDropdownComponent, selector: "daff-qty-dropdown", inputs: { qty: "qty", id: "id" }, outputs: { qtyChanged: "qtyChanged" }, ngImport: i0, template: "<daff-form-field class=\"daff-qty-dropdown\">\n  <select daff-native-select *ngIf=\"!showQtyInputField\" id=\"select_{{id}}\" [(ngModel)]=\"qty\" (ngModelChange)=\"onChangedWrapper(qty)\" (blur)=\"onTouched()\">\n    <option *ngFor=\"let item of dropdownItemCounter\" [value]=\"item+1\">{{ item+1 }}</option>\n    <option value=\"10\">10+</option>\n  </select>\n  <input daff-input id=\"input_{{id}}\" class=\"daff-qty-dropdown__input\" [(ngModel)]=\"qty\" (ngModelChange)=\"onChangedWrapper(qty)\" (blur)=\"onTouched()\" *ngIf=\"showQtyInputField\">\n</daff-form-field>", styles: [".daff-qty-dropdown__input{width:50px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DaffFormFieldComponent, selector: "daff-form-field", inputs: ["formSubmitted"] }, { kind: "component", type: DaffNativeSelectComponent, selector: "select[daff-native-select]", inputs: ["formSubmitted"] }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQtyDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-qty-dropdown', template: "<daff-form-field class=\"daff-qty-dropdown\">\n  <select daff-native-select *ngIf=\"!showQtyInputField\" id=\"select_{{id}}\" [(ngModel)]=\"qty\" (ngModelChange)=\"onChangedWrapper(qty)\" (blur)=\"onTouched()\">\n    <option *ngFor=\"let item of dropdownItemCounter\" [value]=\"item+1\">{{ item+1 }}</option>\n    <option value=\"10\">10+</option>\n  </select>\n  <input daff-input id=\"input_{{id}}\" class=\"daff-qty-dropdown__input\" [(ngModel)]=\"qty\" (ngModelChange)=\"onChangedWrapper(qty)\" (blur)=\"onTouched()\" *ngIf=\"showQtyInputField\">\n</daff-form-field>", styles: [".daff-qty-dropdown__input{width:50px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { qty: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], qtyChanged: [{
+                type: Output
+            }] } });
+
+class DaffQtyDropdownModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQtyDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffQtyDropdownModule, declarations: [DaffQtyDropdownComponent], imports: [CommonModule,
+            FormsModule,
+            DaffFormFieldModule,
+            DaffNativeSelectModule,
+            DaffInputModule], exports: [DaffQtyDropdownComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQtyDropdownModule, imports: [CommonModule,
+            FormsModule,
+            DaffFormFieldModule,
+            DaffNativeSelectModule,
+            DaffInputModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffQtyDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        DaffFormFieldModule,
+                        DaffNativeSelectModule,
+                        DaffInputModule,
+                    ],
+                    declarations: [
+                        DaffQtyDropdownComponent,
+                    ],
+                    exports: [
+                        DaffQtyDropdownComponent,
+                    ],
+                }]
+        }] });
+
+var DaffFeatureModeEnum;
+(function (DaffFeatureModeEnum) {
+    DaffFeatureModeEnum["Compact"] = "compact";
+    DaffFeatureModeEnum["Normal"] = "normal";
+})(DaffFeatureModeEnum || (DaffFeatureModeEnum = {}));
+/**
+ * @deprecated See {@link DaffCardComponent}
+ */
+class DaffFeatureComponent {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+        this.mode = DaffFeatureModeEnum.Normal;
+    }
+    /**
+     * @docs-private
+     */
+    get compact() {
+        return this.mode === DaffFeatureModeEnum.Compact;
+    }
+    /**
+     * @docs-private
+     */
+    get normal() {
+        return this.mode === DaffFeatureModeEnum.Normal;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffFeatureComponent, selector: "daff-feature", inputs: { mode: "mode" }, host: { properties: { "class.daff-feature": "this.class", "class.daff-feature--compact": "this.compact", "class.daff-feature--normal": "this.normal" } }, ngImport: i0, template: "<ng-content select=\"[daffFeatureIcon]\"></ng-content>\n<div class=\"daff-feature__content\">\n  <ng-content select=\"[daffFeatureSubheader]\"></ng-content>\n  <ng-content select=\"[daffFeatureTitle]\"></ng-content>\n  <ng-content select=\"[daffFeatureSubtitle]\"></ng-content>\n  <ng-content></ng-content>\n</div>", styles: [".daff-feature{border-radius:10px;display:flex}.daff-feature__icon{display:inline-block;max-width:30px}@media (min-width: 480px){.daff-feature__icon{max-width:50px}}.daff-feature__subheader{text-transform:uppercase;font-size:.75rem;letter-spacing:.075rem;line-height:1rem}@media (min-width: 480px){.daff-feature__subheader{font-size:.875rem}}.daff-feature__title{font-weight:700;margin:0 0 15px;padding:0}.daff-feature__subtitle{font-size:1rem;margin:0;padding:0}.daff-feature--normal{align-items:flex-start;flex-direction:column;padding:25px}@media (min-width: 480px){.daff-feature--normal{align-items:center;flex-direction:row;padding:50px}}.daff-feature--normal .daff-feature__icon{margin:0 0 15px}@media (min-width: 480px){.daff-feature--normal .daff-feature__icon{margin:0 25px 0 0}}.daff-feature--normal .daff-feature__subheader{margin:0 0 15px}@media (min-width: 480px){.daff-feature--normal .daff-feature__subheader{margin:0 0 30px}}.daff-feature--normal .daff-feature__title{font-size:1.25rem;line-height:1.25rem}@media (min-width: 480px){.daff-feature--normal .daff-feature__title{font-size:2rem;line-height:2rem}}.daff-feature--compact{align-items:flex-start;flex-direction:column;padding:25px}.daff-feature--compact .daff-feature__icon{margin:0 0 15px}.daff-feature--compact .daff-feature__subheader{margin:0 0 5px}.daff-feature--compact .daff-feature__title{font-size:1.25rem;line-height:1.25rem}@media (min-width: 480px){.daff-feature--compact .daff-feature__title{font-size:1.5rem;line-height:1.5rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-feature', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[daffFeatureIcon]\"></ng-content>\n<div class=\"daff-feature__content\">\n  <ng-content select=\"[daffFeatureSubheader]\"></ng-content>\n  <ng-content select=\"[daffFeatureTitle]\"></ng-content>\n  <ng-content select=\"[daffFeatureSubtitle]\"></ng-content>\n  <ng-content></ng-content>\n</div>", styles: [".daff-feature{border-radius:10px;display:flex}.daff-feature__icon{display:inline-block;max-width:30px}@media (min-width: 480px){.daff-feature__icon{max-width:50px}}.daff-feature__subheader{text-transform:uppercase;font-size:.75rem;letter-spacing:.075rem;line-height:1rem}@media (min-width: 480px){.daff-feature__subheader{font-size:.875rem}}.daff-feature__title{font-weight:700;margin:0 0 15px;padding:0}.daff-feature__subtitle{font-size:1rem;margin:0;padding:0}.daff-feature--normal{align-items:flex-start;flex-direction:column;padding:25px}@media (min-width: 480px){.daff-feature--normal{align-items:center;flex-direction:row;padding:50px}}.daff-feature--normal .daff-feature__icon{margin:0 0 15px}@media (min-width: 480px){.daff-feature--normal .daff-feature__icon{margin:0 25px 0 0}}.daff-feature--normal .daff-feature__subheader{margin:0 0 15px}@media (min-width: 480px){.daff-feature--normal .daff-feature__subheader{margin:0 0 30px}}.daff-feature--normal .daff-feature__title{font-size:1.25rem;line-height:1.25rem}@media (min-width: 480px){.daff-feature--normal .daff-feature__title{font-size:2rem;line-height:2rem}}.daff-feature--compact{align-items:flex-start;flex-direction:column;padding:25px}.daff-feature--compact .daff-feature__icon{margin:0 0 15px}.daff-feature--compact .daff-feature__subheader{margin:0 0 5px}.daff-feature--compact .daff-feature__title{font-size:1.25rem;line-height:1.25rem}@media (min-width: 480px){.daff-feature--compact .daff-feature__title{font-size:1.5rem;line-height:1.5rem}}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-feature']
+            }], mode: [{
+                type: Input
+            }], compact: [{
+                type: HostBinding,
+                args: ['class.daff-feature--compact']
+            }], normal: [{
+                type: HostBinding,
+                args: ['class.daff-feature--normal']
+            }] } });
+
+class DaffFeatureIconDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffFeatureIconDirective, selector: "[daffFeatureIcon]", host: { properties: { "class.daff-feature__icon": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffFeatureIcon]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-feature__icon']
+            }] } });
+
+class DaffFeatureSubheaderDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureSubheaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffFeatureSubheaderDirective, selector: "[daffFeatureSubheader]", host: { properties: { "class.daff-feature__subheader": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureSubheaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffFeatureSubheader]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-feature__subheader']
+            }] } });
+
+class DaffFeatureSubtitleDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffFeatureSubtitleDirective, selector: "[daffFeatureSubtitle]", host: { properties: { "class.daff-feature__subtitle": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureSubtitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffFeatureSubtitle]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-feature__subtitle']
+            }] } });
+
+class DaffFeatureTitleDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffFeatureTitleDirective, selector: "[daffFeatureTitle]", host: { properties: { "class.daff-feature__title": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffFeatureTitle]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-feature__title']
+            }] } });
+
+class DaffFeatureModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureModule, declarations: [DaffFeatureComponent,
+            DaffFeatureTitleDirective,
+            DaffFeatureSubtitleDirective,
+            DaffFeatureIconDirective,
+            DaffFeatureSubheaderDirective], imports: [CommonModule], exports: [DaffFeatureComponent,
+            DaffFeatureTitleDirective,
+            DaffFeatureSubtitleDirective,
+            DaffFeatureIconDirective,
+            DaffFeatureSubheaderDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFeatureModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    declarations: [
+                        DaffFeatureComponent,
+                        DaffFeatureTitleDirective,
+                        DaffFeatureSubtitleDirective,
+                        DaffFeatureIconDirective,
+                        DaffFeatureSubheaderDirective,
+                    ],
+                    exports: [
+                        DaffFeatureComponent,
+                        DaffFeatureTitleDirective,
+                        DaffFeatureSubtitleDirective,
+                        DaffFeatureIconDirective,
+                        DaffFeatureSubheaderDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ *
+ * Prefix can be used to place content before another piece of content in components like
+ * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ */
+class DaffPrefixDirective {
+    constructor() {
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffPrefixDirective, selector: "[daffPrefix]", host: { properties: { "class.daff-prefix": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffPrefix]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-prefix']
+            }] } });
+
+/**
+ *
+ * Prefix can be used to place content after another piece of content in components like
+ * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ */
+class DaffSuffixDirective {
+    constructor() {
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffSuffixDirective, selector: "[daffSuffix]", host: { properties: { "class.daff-suffix": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffSuffix]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-suffix']
+            }] } });
+
+class DaffPrefixSuffixModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffPrefixSuffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffPrefixSuffixModule, declarations: [DaffPrefixDirective,
+            DaffSuffixDirective], exports: [DaffPrefixDirective,
+            DaffSuffixDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffPrefixSuffixModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffPrefixSuffixModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    exports: [
+                        DaffPrefixDirective,
+                        DaffSuffixDirective,
+                    ],
+                    declarations: [
+                        DaffPrefixDirective,
+                        DaffSuffixDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * A mixin for giving a component the ability to place content after another piece of content.
+ */
+function daffSuffixableMixin(Base) {
+    class SuffixableDirective extends Base {
+        constructor(...args) {
+            super(...args);
+        }
+        /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SuffixableDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+        /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: SuffixableDirective, queries: [{ propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
+    }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SuffixableDirective, decorators: [{
+                type: Directive
+            }], ctorParameters: () => [{ type: undefined }], propDecorators: { _suffix: [{
+                    type: ContentChild,
+                    args: [DaffSuffixDirective, { static: true }]
+                }] } });
+    return SuffixableDirective;
+}
+
+/**
+ * A mixin for giving a component the ability to place content before another piece of content.
+ */
+function daffPrefixableMixin(Base) {
+    class PrefixableDirective extends Base {
+        constructor(...args) {
+            super(...args);
+        }
+        /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PrefixableDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+        /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: PrefixableDirective, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
+    }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PrefixableDirective, decorators: [{
+                type: Directive
+            }], ctorParameters: () => [{ type: undefined }], propDecorators: { _prefix: [{
+                    type: ContentChild,
+                    args: [DaffPrefixDirective, { static: true }]
+                }] } });
+    return PrefixableDirective;
+}
+
+var DaffBreakpoints;
+(function (DaffBreakpoints) {
+    DaffBreakpoints["DESKTOP"] = "(min-width: 1920px)";
+    DaffBreakpoints["LAPTOP"] = "(min-width: 1440px)";
+    DaffBreakpoints["SMALL_LAPTOP"] = "(min-width: 1200px)";
+    DaffBreakpoints["BIG_TABLET"] = "(min-width: 1024px)";
+    DaffBreakpoints["TABLET"] = "(min-width: 768px)";
+    DaffBreakpoints["MOBILE"] = "(min-width: 480px)";
+})(DaffBreakpoints || (DaffBreakpoints = {}));
+
+/**
+ * A basic constructor type useful for mixins
+ * See https://blog.mariusschulz.com/2017/05/26/typescript-2-2-mixin-classes
+ * for a really good explanation of why mixins are useful.
+ */
+
+var DaffStatusEnum;
+(function (DaffStatusEnum) {
+    DaffStatusEnum["Warn"] = "warn";
+    DaffStatusEnum["Danger"] = "danger";
+    DaffStatusEnum["Success"] = "success";
+})(DaffStatusEnum || (DaffStatusEnum = {}));
+
+function daffStatusMixin(Base, defaultStatus) {
+    class DaffStatusMixinClass extends Base {
+        get status() {
+            return this._status;
+        }
+        set status(value) {
+            // Handles the default status
+            const incomingStatus = value || defaultStatus;
+            if (incomingStatus === this._status) { // Only run the dom-render if a change occurs
+                return;
+            }
+            // Removes the old status
+            if (this._status) {
+                this._renderer.removeClass(this._elementRef.nativeElement, `daff-${this._status}`);
+            }
+            if (incomingStatus) {
+                this._renderer.addClass(this._elementRef.nativeElement, `daff-${incomingStatus}`);
+            }
+            this._status = incomingStatus;
+        }
+        constructor(...args) {
+            super(...args);
+            this.status = defaultStatus;
+        }
+    }
+    ;
+    // TODO: ugly workaround for https://github.com/microsoft/TypeScript/issues/7342#issuecomment-624298133
+    Input()(DaffStatusMixinClass.prototype, 'status');
+    return DaffStatusMixinClass;
+}
+
+function daffSkeletonableMixin(Base, defaultSkeleton = false) {
+    return class extends Base {
+        get skeleton() {
+            return this._skeleton;
+        }
+        set skeleton(value) {
+            // Handles the default skeleton
+            const incomingSkeleton = value || defaultSkeleton;
+            if (incomingSkeleton === this._skeleton) { // Only run the dom-render if a change occurs
+                return;
+            }
+            if (incomingSkeleton) {
+                this._renderer.addClass(this._elementRef.nativeElement, `daff-skeleton`);
+            }
+            else {
+                this._renderer.removeClass(this._elementRef.nativeElement, `daff-skeleton`);
+            }
+            this._skeleton = incomingSkeleton;
+        }
+        constructor(...args) {
+            super(...args);
+            this.skeleton = defaultSkeleton;
+        }
+    };
+}
+
+var DaffTextAlignmentEnum;
+(function (DaffTextAlignmentEnum) {
+    DaffTextAlignmentEnum["Left"] = "left";
+    DaffTextAlignmentEnum["Center"] = "center";
+    DaffTextAlignmentEnum["Right"] = "right";
+})(DaffTextAlignmentEnum || (DaffTextAlignmentEnum = {}));
+
+function daffTextAlignmentMixin(Base, defaultTextAlignment) {
+    class DaffTextAlignableMixin extends Base {
+        /**
+         * Controls text alignment for component-specific UI
+         */
+        get textAlignment() {
+            return this._textAlignment;
+        }
+        set textAlignment(value) {
+            // Handles the default text alignment
+            const incomingTextAlignment = value || defaultTextAlignment;
+            if (incomingTextAlignment === this._textAlignment) { // Only run the dom-render if a change occurs
+                return;
+            }
+            // Removes the old text alignment
+            if (this._textAlignment) {
+                this._renderer.removeClass(this._elementRef.nativeElement, `daff-${this._textAlignment}`);
+            }
+            if (incomingTextAlignment) {
+                this._renderer.addClass(this._elementRef.nativeElement, `daff-${incomingTextAlignment}`);
+            }
+            this._textAlignment = incomingTextAlignment;
+        }
+        constructor(...args) {
+            super(...args);
+            this.textAlignment = defaultTextAlignment;
+        }
+    }
+    ;
+    // TODO: ugly workaround for https://github.com/microsoft/TypeScript/issues/7342#issuecomment-624298133
+    Input()(DaffTextAlignableMixin.prototype, 'textAlignment');
+    return DaffTextAlignableMixin;
+}
+
+function daffCompactableMixin(Base, defaultCompact = false) {
+    return class extends Base {
+        get compact() {
+            return this._compact;
+        }
+        set compact(value) {
+            // Handles the default compact
+            const incomingCompact = value || defaultCompact;
+            if (incomingCompact === this._compact) { // Only run the dom-render if a change occurs
+                return;
+            }
+            if (incomingCompact) {
+                this._renderer.addClass(this._elementRef.nativeElement, `daff-compact`);
+            }
+            else {
+                this._renderer.removeClass(this._elementRef.nativeElement, `daff-compact`);
+            }
+            this._compact = incomingCompact;
+        }
+        constructor(...args) {
+            super(...args);
+            this.compact = defaultCompact;
+        }
+    };
+}
+
+/**
+ * A mixin for giving a component the ability to manage a DaffContainerComponent's layout.
+ * It passes predetermined layout styles down to the container. In order for a component to
+ * do this, it must implement this mixin.
+ */
+function daffManageContainerLayoutMixin(Base) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+            this._renderer.addClass(this._elementRef.nativeElement, `daff-manage-container-layout`);
+        }
+    };
+}
+
+/**
+ * A mixin for giving a component the ability to prevent article styles from cascading down.
+ */
+function daffArticleEncapsulatedMixin(Base) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+            this._renderer.addClass(this._elementRef.nativeElement, `daff-ae`);
+        }
+    };
+}
+
+/**
+ * The possible states of a theme.
+ */
+var DaffTheme;
+(function (DaffTheme) {
+    DaffTheme["Light"] = "light";
+    DaffTheme["Dark"] = "dark";
+    DaffTheme["None"] = "none";
+})(DaffTheme || (DaffTheme = {}));
+
+const mediaQueryDarkPreference = '(prefers-color-scheme: dark)';
+const addHandlerFactory = (window) => (handler) => {
+    const query = window.matchMedia(mediaQueryDarkPreference);
+    return 'addEventListener' in query
+        ? query.addEventListener('change', handler)
+        : query.addListener(handler);
+};
+const removeHandlerFactory = (window) => (handler) => {
+    const query = window.matchMedia(mediaQueryDarkPreference);
+    return 'removeEventListener' in query
+        ? query.removeEventListener('change', handler)
+        : query.removeListener(handler);
+};
+/**
+ * A service for retrieving the operating system's theme preference.
+ */
+class DaffOsThemeService {
+    constructor(_doc) {
+        this.doc = _doc;
+        this.preference$ = this.doc.defaultView?.matchMedia
+            ? fromEventPattern(addHandlerFactory(this.doc.defaultView), removeHandlerFactory(this.doc.defaultView))
+                .pipe(startWith(this.doc.defaultView?.matchMedia(mediaQueryDarkPreference)), map((e) => e.matches), map((prefersDark) => prefersDark ? DaffTheme.Dark : DaffTheme.Light))
+            : of(DaffTheme.None);
+    }
+    /**
+     * Get the operating system's theme preference.
+     */
+    getThemePreference() {
+        return this.preference$;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffOsThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffOsThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffOsThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+const THEME_STORAGE_KEY = 'DAFF_THEME';
+const coerceValue = (val) => val === DaffTheme.Dark || val === DaffTheme.Light
+    ? val
+    : DaffTheme.None;
+/**
+ * Generate a StorageEvent
+ */
+const storageEventBuilder = (value) => ({
+    key: THEME_STORAGE_KEY,
+    newValue: coerceValue(value) !== DaffTheme.None ? value : null,
+});
+/**
+ * A service for retrieving and managing the application's stored theme.
+ */
+class DaffThemeStorageService {
+    constructor(storage, _doc) {
+        this.storage = storage;
+        this.storage$ = new Subject();
+        this.doc = _doc;
+        this.theme$ = merge(this.storage$, this.doc.defaultView
+            ? fromEvent(this.doc.defaultView, 'storage').pipe(startWith(storageEventBuilder(this.storage.getItem(THEME_STORAGE_KEY))), catchError((e) => EMPTY))
+            : of(storageEventBuilder(this.storage.getItem(THEME_STORAGE_KEY)))).pipe(filter((e) => e.key === THEME_STORAGE_KEY), map((e) => coerceValue(e.newValue)), shareReplay(1));
+    }
+    /**
+     * Given that Safari doesn't respect in-tab storage events, we have to manually
+     * fire storage events in the open tab on Webkit based browsers.
+     */
+    progressStorageEvent(theme) {
+        this.storage$.next(storageEventBuilder(theme));
+    }
+    getThemeAsObservable() {
+        return this.theme$;
+    }
+    getTheme() {
+        return coerceValue(this.storage.getItem(THEME_STORAGE_KEY));
+    }
+    setTheme(theme) {
+        this.progressStorageEvent(theme);
+        this.storage.setItem(THEME_STORAGE_KEY, theme);
+    }
+    removeThemeSetting() {
+        this.progressStorageEvent(DaffTheme.None);
+        this.storage.removeItem(THEME_STORAGE_KEY);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffThemeStorageService, deps: [{ token: DaffServerSafePersistenceServiceToken }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffThemeStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffThemeStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DaffServerSafePersistenceServiceToken]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+/**
+ * Computes the appropriate application theme from the specified values.
+ * It cascades from `storedPreference` to `osPreference` to `defaultTheme`.
+ */
+const daffComputeThemeSetting = (osPreference, storedPreference, defaultTheme = DaffTheme.Dark) => {
+    if (storedPreference) {
+        return storedPreference;
+    }
+    if (osPreference === 'dark') {
+        return DaffTheme.Dark;
+    }
+    if (osPreference === 'light') {
+        return DaffTheme.Light;
+    }
+    return defaultTheme;
+};
+
+/**
+ * A service for controlling the application's theme.
+ */
+class DaffThemingService {
+    constructor(osTheme, themeStorage) {
+        this.osTheme = osTheme;
+        this.themeStorage = themeStorage;
+        this.theme$ = combineLatest([
+            this.osTheme.getThemePreference(),
+            this.themeStorage.getThemeAsObservable(),
+        ]).pipe(map(([osPreference, storedPreference]) => daffComputeThemeSetting(osPreference, storedPreference)));
+        this.theme$.subscribe((theme) => {
+            this.theme = theme;
+        });
+    }
+    /**
+     * Get the current theme.
+     */
+    getTheme() {
+        return this.theme$;
+    }
+    /**
+     * Set the theme to dark mode.
+     */
+    darkMode() {
+        this.themeStorage.setTheme(DaffTheme.Dark);
+    }
+    /**
+     * Set the theme to light mode.
+     */
+    lightMode() {
+        this.themeStorage.setTheme(DaffTheme.Light);
+    }
+    /**
+     * Switch between themes.
+     */
+    switchTheme() {
+        return this.theme === DaffTheme.Dark
+            ? this.lightMode()
+            : this.darkMode();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffThemingService, deps: [{ token: DaffOsThemeService }, { token: DaffThemeStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffThemingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffThemingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: DaffOsThemeService }, { type: DaffThemeStorageService }] });
+
+const DAFF_THEME_DARK_CSS_CLASS = 'daff-theme-dark';
+const DAFF_THEME_LIGHT_CSS_CLASS = 'daff-theme-light';
+/**
+ * This class updates the body of the application with the theme's appropriate class.
+ * Note that this service is not provided tree-shakably by intention.
+ * It is intended to be provided manually during setup.
+ */
+class DaffThemeClassSetterService {
+    constructor(_doc, rendererFactory, themingService) {
+        this.rendererFactory = rendererFactory;
+        this.themingService = themingService;
+        this.doc = _doc;
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+    }
+    /**
+     * This function is intended to only be called once when the service
+     * is initialized for the very first time. This will mutate the class
+     * on the body of the document for the appropriate theme as controlled
+     * by the state of the application's theme.
+     */
+    beginThemeSync() {
+        this.subscription = this.themingService.getTheme().subscribe((theme) => {
+            // For simplicty, remove all previously applied themes.
+            this.renderer.removeClass(this.doc.body, DAFF_THEME_LIGHT_CSS_CLASS);
+            this.renderer.removeClass(this.doc.body, DAFF_THEME_DARK_CSS_CLASS);
+            this.renderer.addClass(this.doc.body, theme === DaffTheme.Dark ? DAFF_THEME_DARK_CSS_CLASS : DAFF_THEME_LIGHT_CSS_CLASS);
+        });
+    }
+    /**
+     * This unsubscribes from the bodyClass subscription that exists.
+     */
+    destroy() {
+        this.subscription?.unsubscribe();
+        this.renderer.removeClass(this.doc.body, DAFF_THEME_LIGHT_CSS_CLASS);
+        this.renderer.removeClass(this.doc.body, DAFF_THEME_DARK_CSS_CLASS);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffThemeClassSetterService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }, { token: DaffThemingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffThemeClassSetterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffThemeClassSetterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.RendererFactory2 }, { type: DaffThemingService }] });
+
+const DAFF_THEME_INIT = (classSetter) => () => classSetter.beginThemeSync();
+/**
+ * The theme provider for the app.
+ * This configures updating the body with the theme class.
+ */
+const DAFF_THEME_INITIALIZER = [
+    DaffThemeClassSetterService,
+    {
+        provide: APP_INITIALIZER,
+        multi: true,
+        deps: [DaffThemeClassSetterService],
+        useFactory: DAFF_THEME_INIT,
+    },
+];
+
+const daffFocusableElementsSelector = 'a[href],a[routerlink], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
+
+class DaffFocusStackService {
+    constructor(document) {
+        this.document = document;
+        this._stack = [];
+    }
+    /**
+     * Return the current length of the stack.
+     */
+    length() {
+        return this._stack.length;
+    }
+    /**
+     * Adds a HTML element to a focus stack and returns the new length of the stack.
+     *
+     * Generally, you will probably want to call this before you transition focus
+     * onto a new element.
+     *
+     * ```ts
+     * this._focusStack.push(this._doc.activeElement);
+     * ```
+     */
+    push(el = undefined) {
+        this._stack.push(el ?? this.document.activeElement);
+        return this._stack.length;
+    }
+    /**
+     * Focuses on the HTML element at the top of a stack.
+     *
+     * ```ts
+     * this._focusStack.push(this._doc.activeElement);
+     * ```
+     */
+    focus() {
+        if (this._stack.length >= 1) {
+            this._stack.slice(-1)[0].focus();
+        }
+        else {
+            this.document.activeElement.blur();
+        }
+    }
+    /**
+     * Removes the HMTL element at the top of a stack and focuses on it.
+     */
+    pop(focus = true) {
+        let el = this._stack.pop();
+        while (el === undefined && this._stack.length > 0) {
+            el = this._stack.pop();
+        }
+        if (el) {
+            if (focus) {
+                el.focus();
+            }
+            return el;
+        }
+        this.document.activeElement.blur();
+        return this.document.activeElement;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFocusStackService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFocusStackService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffFocusStackService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+/**
+ * An interface for giving a component the ability to customize sizing for component-specific UI.
+ * In order to be sizable, a component class must implement this property.
+ */
+var DaffSizableEnum;
+(function (DaffSizableEnum) {
+    DaffSizableEnum["XSmall"] = "xs";
+    DaffSizableEnum["Small"] = "sm";
+    DaffSizableEnum["Medium"] = "md";
+    DaffSizableEnum["Large"] = "lg";
+    DaffSizableEnum["XLarge"] = "xl";
+})(DaffSizableEnum || (DaffSizableEnum = {}));
+
+function daffSizeMixin(Base, defaultSize) {
+    class DaffSizeMixinClass extends Base {
+        get size() {
+            return this._size;
+        }
+        set size(value) {
+            // Handles the default size
+            const incomingSize = value || defaultSize;
+            if (incomingSize !== this._size) { //Only run the dom-render if a change occurs
+                //Remove the old size
+                if (this._size) {
+                    this._renderer.removeClass(this._elementRef.nativeElement, `daff-${this._size}`);
+                }
+                if (incomingSize) {
+                    this._renderer.addClass(this._elementRef.nativeElement, `daff-${incomingSize}`);
+                }
+                this._size = incomingSize;
+            }
+        }
+        constructor(...args) {
+            super(...args);
+            this.size = defaultSize;
+        }
+    }
+    ;
+    // TODO: ugly workaround for https://github.com/microsoft/TypeScript/issues/7342#issuecomment-624298133
+    Input()(DaffSizeMixinClass.prototype, 'size');
+    return DaffSizeMixinClass;
+}
+
+// Core
+
+/*
+ * Public API Surface of @daffodil/design
+ */
+// Atoms
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DAFF_THEME_INITIALIZER, DaffBackdropComponent, DaffBackdropModule, DaffBreakpoints, DaffButtonSetComponent, DaffButtonSetModule, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFeatureComponent, DaffFeatureIconDirective, DaffFeatureModeEnum, DaffFeatureModule, DaffFeatureSubheaderDirective, DaffFeatureSubtitleDirective, DaffFeatureTitleDirective, DaffFocusStackService, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffGalleryImageComponent, DaffImageGalleryComponent, DaffImageGalleryModule, DaffImageListComponent, DaffImageListModule, DaffInputComponent, DaffInputModule, DaffNativeSelectComponent, DaffNativeSelectModule, DaffPrefixDirective, DaffPrefixSuffixModule, DaffProgressIndicatorComponent, DaffProgressIndicatorModule, DaffQtyDropdownComponent, DaffQtyDropdownModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSizableEnum, DaffStatusEnum, DaffSuffixDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, daffArticleEncapsulatedMixin, daffColorMixin, daffCompactableMixin, daffFocusableElementsSelector, daffManageContainerLayoutMixin, daffPrefixableMixin, daffSizeMixin, daffSkeletonableMixin, daffStatusMixin, daffSuffixableMixin, daffTextAlignmentMixin };
+//# sourceMappingURL=daffodil-design.mjs.map