@daffodil/design 0.71.0 → 0.73.0

package/fesm2022/daffodil-design.mjs

@@ -6,11 +6,10 @@ 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 { UntypedFormControl, ReactiveFormsModule } 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 {
@@ -859,6 +858,7 @@ class DaffQuantityFieldComponent {
          * before it becomes an input element.
          */
         this.selectMax = 10;
+        this.id = '';
         this.disabled = false;
         this._quantity = 1;
         this._inputHasBeenShown = false;
@@ -892,13 +892,13 @@ class DaffQuantityFieldComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", 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.3.10", type: DaffQuantityFieldComponent, selector: "daff-quantity-field", inputs: { min: "min", max: "max", selectMax: "selectMax" }, providers: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: DaffQuantityFieldComponent, selector: "daff-quantity-field", inputs: { min: "min", max: "max", selectMax: "selectMax", id: "id" }, 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 }); }
+        ], 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\"\n  [max]=\"_maxFloor\"\n  [extendable]=\"max > selectMax\"\n  [id]=\"id\">\n</daff-quantity-select>\n<daff-quantity-input\n  *ngIf=\"showInputField\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [id]=\"id\">\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.3.10", ngImport: i0, type: DaffQuantityFieldComponent, decorators: [{
             type: Component,
@@ -908,7 +908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                             // 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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<daff-quantity-select\n  *ngIf=\"showSelectField\"\n  [min]=\"min\"\n  [max]=\"_maxFloor\"\n  [extendable]=\"max > selectMax\"\n  [id]=\"id\">\n</daff-quantity-select>\n<daff-quantity-input\n  *ngIf=\"showInputField\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [id]=\"id\">\n</daff-quantity-input>\n" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -925,6 +925,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                 type: Input
             }], selectMax: [{
                 type: Input
+            }], id: [{
+                type: Input
             }] } });
 
 class DaffQuantityFieldModule {
@@ -964,163 +966,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                 }]
         }] });
 
-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');
-/**
- * @deprecated in v1.0.0
- * Use `DaffProgressBarComponent` instead.
- */
-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.3.10", 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.3.10", 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.3.10", 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.3.10", ngImport: i0, type: DaffProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: DaffProgressIndicatorModule, declarations: [DaffProgressIndicatorComponent], imports: [CommonModule], exports: [DaffProgressIndicatorComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffProgressIndicatorModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffProgressIndicatorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [DaffProgressIndicatorComponent],
-                    imports: [
-                        CommonModule,
-                    ],
-                    exports: [DaffProgressIndicatorComponent],
-                }]
-        }] });
-
 class DaffRadioSetComponent {
     constructor() {
         /**
@@ -1464,445 +1309,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                 }]
         }] });
 
-/**
- * @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.3.10", ngImport: i0, type: DaffButtonSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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.3.10", 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.3.10", ngImport: i0, type: DaffButtonSetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: DaffButtonSetModule, declarations: [DaffButtonSetComponent], exports: [DaffButtonSetComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffButtonSetModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", 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.3.10", ngImport: i0, type: DaffImageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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.3.10", 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.3.10", ngImport: i0, type: DaffImageGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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.3.10", 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.3.10", ngImport: i0, type: DaffGalleryImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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.3.10", 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.3.10", ngImport: i0, type: DaffImageListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: DaffImageListModule, declarations: [DaffImageListComponent], imports: [CommonModule], exports: [DaffImageListComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffImageListModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", 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.3.10", ngImport: i0, type: DaffImageGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", 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.3.10", ngImport: i0, type: DaffImageGalleryModule, imports: [CommonModule,
-            DaffImageListModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", 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.3.10", ngImport: i0, type: DaffQtyDropdownComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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.3.10", 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.3.10", ngImport: i0, type: DaffQtyDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", 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.3.10", ngImport: i0, type: DaffQtyDropdownModule, imports: [CommonModule,
-            FormsModule,
-            DaffFormFieldModule,
-            DaffNativeSelectModule,
-            DaffInputModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", 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.3.10", ngImport: i0, type: DaffFeatureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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.3.10", 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.3.10", ngImport: i0, type: DaffFeatureIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffFeatureIconDirective, selector: "[daffFeatureIcon]", host: { properties: { "class.daff-feature__icon": "this.class" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", 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.3.10", ngImport: i0, type: DaffFeatureSubheaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffFeatureSubheaderDirective, selector: "[daffFeatureSubheader]", host: { properties: { "class.daff-feature__subheader": "this.class" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", 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.3.10", ngImport: i0, type: DaffFeatureSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffFeatureSubtitleDirective, selector: "[daffFeatureSubtitle]", host: { properties: { "class.daff-feature__subtitle": "this.class" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", 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.3.10", ngImport: i0, type: DaffFeatureTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffFeatureTitleDirective, selector: "[daffFeatureTitle]", host: { properties: { "class.daff-feature__title": "this.class" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", 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.3.10", ngImport: i0, type: DaffFeatureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", 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.3.10", ngImport: i0, type: DaffFeatureModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", 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
@@ -2009,6 +1415,62 @@ function daffPrefixableMixin(Base) {
     return PrefixableDirective;
 }
 
+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;
+}
+
 var DaffBreakpoints;
 (function (DaffBreakpoints) {
     DaffBreakpoints["DESKTOP"] = "(min-width: 1920px)";
@@ -2548,5 +2010,5 @@ function daffSizeMixin(Base, defaultSize) {
  * Generated bundle index. Do not edit.
  */
 
-export { DAFF_THEME_INITIALIZER, 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 };
+export { DAFF_THEME_INITIALIZER, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFocusStackService, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffInputComponent, DaffInputModule, DaffNativeSelectComponent, DaffNativeSelectModule, DaffPrefixDirective, DaffPrefixSuffixModule, 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