@daffodil/design 0.60.0 → 0.62.0

package/fesm2015/daffodil-design.mjs

@@ -1,6 +1,7 @@
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { Input, Directive, HostBinding, NgModule, ContentChild, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Injectable, TemplateRef, ViewContainerRef, Inject, ViewChild, EventEmitter, Output, HostListener, Optional, Self, ElementRef, ContentChildren, SkipSelf, Type, APP_INITIALIZER } from '@angular/core';
-import * as i3 from '@angular/common';
+import { Input, Directive, HostBinding, NgModule, ContentChild, Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, Injectable, TemplateRef, ViewContainerRef, Inject, ViewChild, EventEmitter, Output, HostListener, Optional, Self, ElementRef, ContentChildren, SkipSelf, Type, APP_INITIALIZER } from '@angular/core';
+import * as i2 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -10,7 +11,6 @@ import { takeUntil, filter as filter$1, startWith, map as map$1, catchError, sha
 import * as i1$1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __awaiter } from 'tslib';
 import * as i1$5 from '@angular/cdk/portal';
@@ -256,6 +256,55 @@ function daffStatusMixin(Base, defaultStatus) {
     return DaffStatusMixinClass;
 }
 
+/**
+ * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
+ */
+class DaffLoadingIconBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffLoadingIconBase = daffColorMixin(DaffLoadingIconBase);
+/**
+ * @inheritdoc
+ */
+class DaffLoadingIconComponent extends _daffLoadingIconBase {
+    constructor(elementRef, renderer) {
+        super(elementRef, renderer);
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        /**
+         * The (pixel) diameter of the animation
+         */
+        this.diameter = 60;
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /**
+     * @docs-private
+     */
+    get maxWidth() {
+        return this.diameter + 'px';
+    }
+}
+/** @nocollapse */ DaffLoadingIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffLoadingIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ DaffLoadingIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffLoadingIconComponent, selector: "daff-loading-icon", inputs: { color: "color", diameter: "diameter" }, host: { properties: { "class.daff-loading-icon": "this.class", "style.max-width": "this.maxWidth" } }, usesInheritance: true, ngImport: i0, template: "<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50%\" cy=\"50%\" r=\"46\"></circle>\n</svg>", styles: [":host{display:flex;width:100%}circle{animation:rotation linear,circle-animation linear;animation-duration:1s;animation-iteration-count:infinite;fill:transparent;stroke-dasharray:101.1592834456 400;stroke-linecap:round;stroke-width:5px;transform-origin:center}@keyframes circle-animation{0%{stroke-dasharray:101.1592834456 400;stroke-dashoffset:101.1592834456}50%{stroke-dasharray:101.1592834456 400;stroke-dashoffset:28.902652413}75%{stroke-dasharray:101.1592834456 400;stroke-dashoffset:0}to{stroke-dasharray:0 400;stroke-dashoffset:-101.1592834456}}@keyframes rotation{0%{transform:rotate(-90deg)}50%{transform:rotate(0)}50.5%{transform:rotate(0)}75%{transform:rotate(90deg)}75.5%{transform:rotate(90deg)}99%{transform:rotate(144deg)}to{transform:rotate(144deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffLoadingIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-loading-icon', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50%\" cy=\"50%\" r=\"46\"></circle>\n</svg>", styles: [":host{display:flex;width:100%}circle{animation:rotation linear,circle-animation linear;animation-duration:1s;animation-iteration-count:infinite;fill:transparent;stroke-dasharray:101.1592834456 400;stroke-linecap:round;stroke-width:5px;transform-origin:center}@keyframes circle-animation{0%{stroke-dasharray:101.1592834456 400;stroke-dashoffset:101.1592834456}50%{stroke-dasharray:101.1592834456 400;stroke-dashoffset:28.902652413}75%{stroke-dasharray:101.1592834456 400;stroke-dashoffset:0}to{stroke-dasharray:0 400;stroke-dashoffset:-101.1592834456}}@keyframes rotation{0%{transform:rotate(-90deg)}50%{transform:rotate(0)}50.5%{transform:rotate(0)}75%{transform:rotate(90deg)}75.5%{transform:rotate(90deg)}99%{transform:rotate(144deg)}to{transform:rotate(144deg)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { diameter: [{
+                type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class.daff-loading-icon']
+            }], maxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
+            }] } });
+
 /**
  * List of classes to add to DaffButtonComponent instances based on host attributes to style as different variants.
  */
@@ -263,6 +312,7 @@ const BUTTON_HOST_ATTRIBUTES = [
     'daff-button',
     'daff-stroked-button',
     'daff-raised-button',
+    'daff-flat-button',
     'daff-icon-button',
     'daff-underline-button',
 ];
@@ -281,6 +331,7 @@ var DaffButtonTypeEnum;
     DaffButtonTypeEnum["Default"] = "daff-button";
     DaffButtonTypeEnum["Stroked"] = "daff-stroked-button";
     DaffButtonTypeEnum["Raised"] = "daff-raised-button";
+    DaffButtonTypeEnum["Flat"] = "daff-flat-button";
     DaffButtonTypeEnum["Icon"] = "daff-icon-button";
     DaffButtonTypeEnum["Underline"] = "daff-underline-button";
 })(DaffButtonTypeEnum || (DaffButtonTypeEnum = {}));
@@ -292,6 +343,9 @@ class DaffButtonComponent extends _daffButtonBase {
         super(elementRef, renderer);
         this.elementRef = elementRef;
         this.renderer = renderer;
+        this.loading = false;
+        this.tabindex = 0;
+        this._disabled = false;
         for (const attr of BUTTON_HOST_ATTRIBUTES) {
             if (this._hasHostAttributes(attr)) {
                 elementRef.nativeElement.classList.add(attr);
@@ -326,6 +380,12 @@ class DaffButtonComponent extends _daffButtonBase {
     get raised() {
         return this.buttonType === DaffButtonTypeEnum.Raised;
     }
+    /**
+     * @docs-private
+     */
+    get flat() {
+        return this.buttonType === DaffButtonTypeEnum.Flat;
+    }
     /**
      * @docs-private
      */
@@ -338,6 +398,27 @@ class DaffButtonComponent extends _daffButtonBase {
     get underline() {
         return this.buttonType === DaffButtonTypeEnum.Underline;
     }
+    get disabledClass() {
+        return this.disabled;
+    }
+    /**
+     * The disabled state of the button.
+     */
+    get disabled() {
+        return this._disabled || this.loading;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    get disabledAttribute() {
+        return this.disabled ? true : null;
+    }
+    get ariaDisabled() {
+        return this.disabled ? true : null;
+    }
+    get disabledTabIndex() {
+        return this.disabled ? -1 : this.tabindex;
+    }
     _getHostElement() {
         return this.elementRef.nativeElement;
     }
@@ -349,20 +430,22 @@ class DaffButtonComponent extends _daffButtonBase {
     }
 }
 /** @nocollapse */ DaffButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffButtonComponent, selector: "button[daff-button],button[daff-stroked-button],button[daff-raised-button],button[daff-icon-button],button[daff-underline-button],a[daff-button],a[daff-stroked-button],a[daff-raised-button],a[daff-icon-button],a[daff-underline-button]", inputs: { color: "color", size: "size", status: "status" }, host: { properties: { "class.daff-button": "this.button", "class.daff-stroked-button": "this.stroked", "class.daff-raised-button": "this.raised", "class.daff-icon-button": "this.icon", "class.daff-underline-button": "this.underline" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<span><ng-content></ng-content></span>\n<ng-container *ngIf=\"_suffix\">\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>", styles: [".daff-button,.daff-raised-button,.daff-stroked-button{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-block;-webkit-appearance:none;appearance:none;border-radius:4px;position:relative;text-align:center;text-decoration:none;transition:background-color .3s,border-color .3s,box-shadow .3s,color .3s,transform .3s;will-change:background-color,border-color,box-shadow,color;min-width:96px}.daff-button[disabled],.daff-raised-button[disabled],.daff-stroked-button[disabled]{cursor:not-allowed}.daff-button .daff-prefix,.daff-button .daff-suffix,.daff-raised-button .daff-prefix,.daff-raised-button .daff-suffix,.daff-stroked-button .daff-prefix,.daff-stroked-button .daff-suffix{vertical-align:middle}.daff-button .daff-prefix,.daff-raised-button .daff-prefix,.daff-stroked-button .daff-prefix{margin-right:8px}.daff-button .daff-suffix,.daff-raised-button .daff-suffix,.daff-stroked-button .daff-suffix{margin-left:8px}.daff-button.daff-sm,.daff-raised-button.daff-sm,.daff-stroked-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-button.daff-md,.daff-raised-button.daff-md,.daff-stroked-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-button.daff-lg,.daff-raised-button.daff-lg,.daff-stroked-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}.daff-icon-button{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-block;-webkit-appearance:none;appearance:none;border-radius:4px;position:relative;text-align:center;text-decoration:none;background:none;border:0;padding:0}.daff-icon-button[disabled]{cursor:not-allowed}.daff-icon-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;width:2rem}.daff-icon-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;width:3rem}.daff-icon-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;width:3.5rem}.daff-underline-button{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-block;-webkit-appearance:none;appearance:none;position:relative;text-align:center;background:transparent;border:0;border-radius:0;line-height:1.25rem;overflow:hidden;text-decoration:none;vertical-align:middle}.daff-underline-button .daff-prefix,.daff-underline-button .daff-suffix{vertical-align:middle}.daff-underline-button .daff-prefix{margin-right:8px}.daff-underline-button .daff-suffix{margin-left:8px}.daff-underline-button[disabled]{cursor:not-allowed}.daff-underline-button[disabled]:hover:after,.daff-underline-button[disabled]:active:after{animation:none}.daff-underline-button:focus{border-radius:4px}.daff-underline-button:after{bottom:0;content:\"\";height:2px;left:0;opacity:1;position:absolute;width:100%}.daff-underline-button:hover:after{animation:none}@media (min-width: 1024px){.daff-underline-button:hover:after{animation:underline-button-hover .7s ease}}.daff-underline-button.daff-sm{font-size:.875rem;height:1.25rem;padding:0}.daff-underline-button.daff-md{font-size:1rem;height:1.5rem;padding:0 0 4px}.daff-underline-button.daff-lg{font-size:1.25rem;height:1.75rem;padding:0 0 8px}@keyframes underline-button-hover{0%{transform:translate(0)}50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ DaffButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffButtonComponent, selector: "button[daff-button],button[daff-stroked-button],button[daff-raised-button],button[daff-flat-button],button[daff-icon-button],button[daff-underline-button],a[daff-button],a[daff-stroked-button],a[daff-raised-button],a[daff-flat-button],a[daff-icon-button],a[daff-underline-button]", inputs: { color: "color", size: "size", status: "status", loading: "loading", tabindex: "tabindex", disabled: "disabled" }, host: { properties: { "class.daff-button": "this.button", "class.daff-stroked-button": "this.stroked", "class.daff-raised-button": "this.raised", "class.daff-flat-button": "this.flat", "class.daff-icon-button": "this.icon", "class.daff-underline-button": "this.underline", "class.daff-button--disabled": "this.disabledClass", "attr.disabled": "this.disabledAttribute", "attr.aria-disabled": "this.ariaDisabled", "attr.tabindex": "this.disabledTabIndex" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<span class=\"daff-button__content\" *ngIf=\"!loading\"><ng-content></ng-content></span>\n<daff-loading-icon *ngIf=\"loading\" [diameter]=\"24\"></daff-loading-icon>\n<ng-container *ngIf=\"_suffix\">\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>", styles: [".daff-button,.daff-raised-button,.daff-stroked-button,.daff-flat-button{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;-webkit-appearance:none;appearance:none;border:none;border-radius:4px;position:relative;text-align:center;text-decoration:none;min-width:96px}.daff-button[disabled],.daff-button.daff-button--disabled,.daff-raised-button[disabled],.daff-raised-button.daff-button--disabled,.daff-stroked-button[disabled],.daff-stroked-button.daff-button--disabled,.daff-flat-button[disabled],.daff-flat-button.daff-button--disabled{cursor:not-allowed}.daff-button[disabled]:hover:after,.daff-button.daff-button--disabled:hover:after,.daff-raised-button[disabled]:hover:after,.daff-raised-button.daff-button--disabled:hover:after,.daff-stroked-button[disabled]:hover:after,.daff-stroked-button.daff-button--disabled:hover:after,.daff-flat-button[disabled]:hover:after,.daff-flat-button.daff-button--disabled:hover:after{opacity:0}.daff-button .daff-button__content,.daff-button .daff-prefix,.daff-button .daff-suffix,.daff-raised-button .daff-button__content,.daff-raised-button .daff-prefix,.daff-raised-button .daff-suffix,.daff-stroked-button .daff-button__content,.daff-stroked-button .daff-prefix,.daff-stroked-button .daff-suffix,.daff-flat-button .daff-button__content,.daff-flat-button .daff-prefix,.daff-flat-button .daff-suffix{z-index:2}.daff-button.daff-sm,.daff-raised-button.daff-sm,.daff-stroked-button.daff-sm,.daff-flat-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-button.daff-md,.daff-raised-button.daff-md,.daff-stroked-button.daff-md,.daff-flat-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-button.daff-lg,.daff-raised-button.daff-lg,.daff-stroked-button.daff-lg,.daff-flat-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}.daff-button:after,.daff-flat-button:after{content:\"\";border-radius:4px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-button:hover:after,.daff-button:active:after,.daff-flat-button:hover:after,.daff-flat-button:active:after{opacity:1}.daff-raised-button:after{content:\"\";border-radius:0;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-raised-button:hover:after,.daff-raised-button:active:after{opacity:1}.daff-stroked-button:after{content:\"\";border-radius:3px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-stroked-button:hover:after,.daff-stroked-button:active:after{opacity:1}.daff-flat-button{background:none;border:none}.daff-icon-button{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;-webkit-appearance:none;appearance:none;border:none;border-radius:4px;position:relative;text-align:center;text-decoration:none;background:none;border:0;padding:0}.daff-icon-button[disabled],.daff-icon-button.daff-button--disabled{cursor:not-allowed}.daff-icon-button[disabled]:hover:after,.daff-icon-button.daff-button--disabled:hover:after{opacity:0}.daff-icon-button .daff-button__content,.daff-icon-button .daff-prefix,.daff-icon-button .daff-suffix{z-index:2}.daff-icon-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;width:2rem}.daff-icon-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;width:3rem}.daff-icon-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;width:3.5rem}.daff-underline-button{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;-webkit-appearance:none;appearance:none;border:none;position:relative;text-align:center;background:transparent;border:0;border-radius:0;line-height:1.25rem;overflow:hidden;text-decoration:none;vertical-align:middle}.daff-underline-button[disabled]:hover:after,.daff-underline-button.daff-button--disabled:hover:after{opacity:0}.daff-underline-button .daff-button__content,.daff-underline-button .daff-prefix,.daff-underline-button .daff-suffix{z-index:2}.daff-underline-button[disabled],.daff-underline-button.daff-button--disabled{cursor:not-allowed}.daff-underline-button[disabled]:hover:after,.daff-underline-button[disabled]:active:after,.daff-underline-button.daff-button--disabled:hover:after,.daff-underline-button.daff-button--disabled:active:after{animation:none}.daff-underline-button:after{bottom:0;content:\"\";height:2px;left:0;opacity:1;position:absolute;width:100%}.daff-underline-button:hover:after{animation:none}@media (min-width: 1024px){.daff-underline-button:hover:after{animation:underline-button-hover .7s ease}}.daff-underline-button.daff-sm{font-size:.875rem;height:1.25rem;padding:0}.daff-underline-button.daff-md{font-size:1rem;height:1.5rem;padding:0 0 4px}.daff-underline-button.daff-lg{font-size:1.25rem;height:1.75rem;padding:0 0 8px}@keyframes underline-button-hover{0%{transform:translate(0)}50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}\n"], components: [{ type: DaffLoadingIconComponent, selector: "daff-loading-icon", inputs: ["color", "diameter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: '' +
                         'button[daff-button]' + ',' +
                         'button[daff-stroked-button]' + ',' +
                         'button[daff-raised-button]' + ',' +
+                        'button[daff-flat-button]' + ',' +
                         'button[daff-icon-button]' + ',' +
                         'button[daff-underline-button]' + ',' +
                         'a[daff-button]' + ',' +
                         'a[daff-stroked-button]' + ',' +
                         'a[daff-raised-button]' + ',' +
+                        'a[daff-flat-button]' + ',' +
                         'a[daff-icon-button]' + ',' +
-                        'a[daff-underline-button]', inputs: ['color', 'size', 'status'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<span><ng-content></ng-content></span>\n<ng-container *ngIf=\"_suffix\">\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>", styles: [".daff-button,.daff-raised-button,.daff-stroked-button{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-block;-webkit-appearance:none;appearance:none;border-radius:4px;position:relative;text-align:center;text-decoration:none;transition:background-color .3s,border-color .3s,box-shadow .3s,color .3s,transform .3s;will-change:background-color,border-color,box-shadow,color;min-width:96px}.daff-button[disabled],.daff-raised-button[disabled],.daff-stroked-button[disabled]{cursor:not-allowed}.daff-button .daff-prefix,.daff-button .daff-suffix,.daff-raised-button .daff-prefix,.daff-raised-button .daff-suffix,.daff-stroked-button .daff-prefix,.daff-stroked-button .daff-suffix{vertical-align:middle}.daff-button .daff-prefix,.daff-raised-button .daff-prefix,.daff-stroked-button .daff-prefix{margin-right:8px}.daff-button .daff-suffix,.daff-raised-button .daff-suffix,.daff-stroked-button .daff-suffix{margin-left:8px}.daff-button.daff-sm,.daff-raised-button.daff-sm,.daff-stroked-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-button.daff-md,.daff-raised-button.daff-md,.daff-stroked-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-button.daff-lg,.daff-raised-button.daff-lg,.daff-stroked-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}.daff-icon-button{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-block;-webkit-appearance:none;appearance:none;border-radius:4px;position:relative;text-align:center;text-decoration:none;background:none;border:0;padding:0}.daff-icon-button[disabled]{cursor:not-allowed}.daff-icon-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;width:2rem}.daff-icon-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;width:3rem}.daff-icon-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;width:3.5rem}.daff-underline-button{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-block;-webkit-appearance:none;appearance:none;position:relative;text-align:center;background:transparent;border:0;border-radius:0;line-height:1.25rem;overflow:hidden;text-decoration:none;vertical-align:middle}.daff-underline-button .daff-prefix,.daff-underline-button .daff-suffix{vertical-align:middle}.daff-underline-button .daff-prefix{margin-right:8px}.daff-underline-button .daff-suffix{margin-left:8px}.daff-underline-button[disabled]{cursor:not-allowed}.daff-underline-button[disabled]:hover:after,.daff-underline-button[disabled]:active:after{animation:none}.daff-underline-button:focus{border-radius:4px}.daff-underline-button:after{bottom:0;content:\"\";height:2px;left:0;opacity:1;position:absolute;width:100%}.daff-underline-button:hover:after{animation:none}@media (min-width: 1024px){.daff-underline-button:hover:after{animation:underline-button-hover .7s ease}}.daff-underline-button.daff-sm{font-size:.875rem;height:1.25rem;padding:0}.daff-underline-button.daff-md{font-size:1rem;height:1.5rem;padding:0 0 4px}.daff-underline-button.daff-lg{font-size:1.25rem;height:1.75rem;padding:0 0 8px}@keyframes underline-button-hover{0%{transform:translate(0)}50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}\n"] }]
+                        'a[daff-underline-button]', inputs: ['color', 'size', 'status'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<span class=\"daff-button__content\" *ngIf=\"!loading\"><ng-content></ng-content></span>\n<daff-loading-icon *ngIf=\"loading\" [diameter]=\"24\"></daff-loading-icon>\n<ng-container *ngIf=\"_suffix\">\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>", styles: [".daff-button,.daff-raised-button,.daff-stroked-button,.daff-flat-button{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;-webkit-appearance:none;appearance:none;border:none;border-radius:4px;position:relative;text-align:center;text-decoration:none;min-width:96px}.daff-button[disabled],.daff-button.daff-button--disabled,.daff-raised-button[disabled],.daff-raised-button.daff-button--disabled,.daff-stroked-button[disabled],.daff-stroked-button.daff-button--disabled,.daff-flat-button[disabled],.daff-flat-button.daff-button--disabled{cursor:not-allowed}.daff-button[disabled]:hover:after,.daff-button.daff-button--disabled:hover:after,.daff-raised-button[disabled]:hover:after,.daff-raised-button.daff-button--disabled:hover:after,.daff-stroked-button[disabled]:hover:after,.daff-stroked-button.daff-button--disabled:hover:after,.daff-flat-button[disabled]:hover:after,.daff-flat-button.daff-button--disabled:hover:after{opacity:0}.daff-button .daff-button__content,.daff-button .daff-prefix,.daff-button .daff-suffix,.daff-raised-button .daff-button__content,.daff-raised-button .daff-prefix,.daff-raised-button .daff-suffix,.daff-stroked-button .daff-button__content,.daff-stroked-button .daff-prefix,.daff-stroked-button .daff-suffix,.daff-flat-button .daff-button__content,.daff-flat-button .daff-prefix,.daff-flat-button .daff-suffix{z-index:2}.daff-button.daff-sm,.daff-raised-button.daff-sm,.daff-stroked-button.daff-sm,.daff-flat-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;padding:0 1rem}.daff-button.daff-md,.daff-raised-button.daff-md,.daff-stroked-button.daff-md,.daff-flat-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;padding:0 1.5rem}.daff-button.daff-lg,.daff-raised-button.daff-lg,.daff-stroked-button.daff-lg,.daff-flat-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;padding:0 1.5rem}.daff-button:after,.daff-flat-button:after{content:\"\";border-radius:4px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-button:hover:after,.daff-button:active:after,.daff-flat-button:hover:after,.daff-flat-button:active:after{opacity:1}.daff-raised-button:after{content:\"\";border-radius:0;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-raised-button:hover:after,.daff-raised-button:active:after{opacity:1}.daff-stroked-button:after{content:\"\";border-radius:3px;position:absolute;width:100%;height:100%;opacity:0;transition:opacity .3s}.daff-stroked-button:hover:after,.daff-stroked-button:active:after{opacity:1}.daff-flat-button{background:none;border:none}.daff-icon-button{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;-webkit-appearance:none;appearance:none;border:none;border-radius:4px;position:relative;text-align:center;text-decoration:none;background:none;border:0;padding:0}.daff-icon-button[disabled],.daff-icon-button.daff-button--disabled{cursor:not-allowed}.daff-icon-button[disabled]:hover:after,.daff-icon-button.daff-button--disabled:hover:after{opacity:0}.daff-icon-button .daff-button__content,.daff-icon-button .daff-prefix,.daff-icon-button .daff-suffix{z-index:2}.daff-icon-button.daff-sm{font-size:.875rem;line-height:2rem;height:2rem;width:2rem}.daff-icon-button.daff-md{font-size:1rem;line-height:3rem;height:3rem;width:3rem}.daff-icon-button.daff-lg{font-size:1.25rem;line-height:3.5rem;height:3.5rem;width:3.5rem}.daff-underline-button{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;-webkit-appearance:none;appearance:none;border:none;position:relative;text-align:center;background:transparent;border:0;border-radius:0;line-height:1.25rem;overflow:hidden;text-decoration:none;vertical-align:middle}.daff-underline-button[disabled]:hover:after,.daff-underline-button.daff-button--disabled:hover:after{opacity:0}.daff-underline-button .daff-button__content,.daff-underline-button .daff-prefix,.daff-underline-button .daff-suffix{z-index:2}.daff-underline-button[disabled],.daff-underline-button.daff-button--disabled{cursor:not-allowed}.daff-underline-button[disabled]:hover:after,.daff-underline-button[disabled]:active:after,.daff-underline-button.daff-button--disabled:hover:after,.daff-underline-button.daff-button--disabled:active:after{animation:none}.daff-underline-button:after{bottom:0;content:\"\";height:2px;left:0;opacity:1;position:absolute;width:100%}.daff-underline-button:hover:after{animation:none}@media (min-width: 1024px){.daff-underline-button:hover:after{animation:underline-button-hover .7s ease}}.daff-underline-button.daff-sm{font-size:.875rem;height:1.25rem;padding:0}.daff-underline-button.daff-md{font-size:1rem;height:1.5rem;padding:0 0 4px}.daff-underline-button.daff-lg{font-size:1.25rem;height:1.75rem;padding:0 0 8px}@keyframes underline-button-hover{0%{transform:translate(0)}50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { button: [{
                 type: HostBinding,
                 args: ['class.daff-button']
@@ -372,23 +455,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
             }], raised: [{
                 type: HostBinding,
                 args: ['class.daff-raised-button']
+            }], flat: [{
+                type: HostBinding,
+                args: ['class.daff-flat-button']
             }], icon: [{
                 type: HostBinding,
                 args: ['class.daff-icon-button']
             }], underline: [{
                 type: HostBinding,
                 args: ['class.daff-underline-button']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.daff-button--disabled']
+            }], loading: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], disabledAttribute: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], disabledTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
             }] } });
 
+class DaffLoadingIconModule {
+}
+/** @nocollapse */ DaffLoadingIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffLoadingIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ DaffLoadingIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffLoadingIconModule, declarations: [DaffLoadingIconComponent], imports: [CommonModule], exports: [DaffLoadingIconComponent] });
+/** @nocollapse */ DaffLoadingIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffLoadingIconModule, imports: [[
+            CommonModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffLoadingIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    declarations: [
+                        DaffLoadingIconComponent,
+                    ],
+                    exports: [
+                        DaffLoadingIconComponent,
+                    ],
+                }]
+        }] });
+
 class DaffButtonModule {
 }
 /** @nocollapse */ DaffButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 /** @nocollapse */ DaffButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffButtonModule, declarations: [DaffButtonComponent], imports: [CommonModule,
-        DaffPrefixSuffixModule], exports: [DaffButtonComponent,
+        DaffPrefixSuffixModule,
+        DaffLoadingIconModule], exports: [DaffButtonComponent,
         DaffPrefixSuffixModule] });
 /** @nocollapse */ DaffButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffButtonModule, imports: [[
             CommonModule,
             DaffPrefixSuffixModule,
+            DaffLoadingIconModule,
         ], DaffPrefixSuffixModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffButtonModule, decorators: [{
             type: NgModule,
@@ -396,6 +524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                     imports: [
                         CommonModule,
                         DaffPrefixSuffixModule,
+                        DaffLoadingIconModule,
                     ],
                     declarations: [
                         DaffButtonComponent,
@@ -414,13 +543,19 @@ class DaffErrorStateMatcher {
 }
 
 class DaffErrorMessageComponent {
+    constructor() {
+        this.class = true;
+    }
 }
 /** @nocollapse */ DaffErrorMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffErrorMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffErrorMessageComponent, selector: "daff-error-message", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;font-size:.875rem;margin-top:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ DaffErrorMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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: "13.3.0", 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 {
 }
@@ -539,7 +674,7 @@ class DaffFormFieldComponent {
     }
 }
 /** @nocollapse */ DaffFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ DaffFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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"] }]
@@ -805,13 +940,13 @@ class DaffMediaGalleryComponent extends _daffMediaGalleryBase {
 /** @nocollapse */ DaffMediaGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffMediaGalleryComponent, selector: "daff-media-gallery", inputs: { skeleton: "skeleton", name: "name" }, host: { properties: { "class.daff-media-gallery": "this.class" } }, providers: [
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"daff-media-gallery__thumbnails\">\n\t<ng-content select=\"[daffThumbnail]\"></ng-content>\n</div>\n<div class=\"daff-media-gallery__selected-thumbnail\">\n\t<daff-media-renderer></daff-media-renderer>\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column}@media (min-width: 1024px){:host(.daff-media-gallery){flex-direction:row}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{cursor:pointer;-webkit-user-select:none;display:inline-block;height:64px;width:64px;margin:0 2px;max-width:100%;overflow:hidden;user-select:none}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:72px;width:72px}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{display:block;margin:0 0 4px;height:80px;width:80px}}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:72px;width:72px;position:absolute;top:0;left:0}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:80px;width:80px;position:absolute;top:0;left:0}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{display:flex}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}.daff-media-gallery__thumbnails{margin:0 -2px;max-height:100%;order:2}@media (min-width: 1024px){.daff-media-gallery__thumbnails{margin:0 8px 0 0;order:1}}.daff-media-gallery__selected-thumbnail{display:block;flex-grow:1;order:1;position:relative}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2}}\n"], components: [{ type: DaffMediaRendererComponent, selector: "daff-media-renderer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"daff-media-gallery__thumbnails\">\n\t<ng-content select=\"[daffThumbnail]\"></ng-content>\n</div>\n<div class=\"daff-media-gallery__selected-thumbnail\">\n\t<daff-media-renderer></daff-media-renderer>\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column}@media (min-width: 1024px){:host(.daff-media-gallery){flex-direction:row}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{cursor:pointer;-webkit-user-select:none;display:inline-block;height:64px;width:64px;margin:0 2px;max-width:100%;overflow:hidden;user-select:none}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:72px;width:72px}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{display:block;margin:0 0 4px;height:80px;width:80px}}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:72px;width:72px;position:absolute;top:0;left:0}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:80px;width:80px;position:absolute;top:0;left:0}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}.daff-media-gallery__thumbnails{margin:0 -2px;max-height:100%;order:2}@media (min-width: 1024px){.daff-media-gallery__thumbnails{margin:0 8px 0 0;order:1}}.daff-media-gallery__selected-thumbnail{display:block;flex-grow:1;order:1;position:relative}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2}}\n"], components: [{ type: DaffMediaRendererComponent, selector: "daff-media-renderer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffMediaGalleryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-media-gallery', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         // eslint-disable-next-line @typescript-eslint/no-use-before-define
                         { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },
-                    ], inputs: ['skeleton'], template: "<div class=\"daff-media-gallery__thumbnails\">\n\t<ng-content select=\"[daffThumbnail]\"></ng-content>\n</div>\n<div class=\"daff-media-gallery__selected-thumbnail\">\n\t<daff-media-renderer></daff-media-renderer>\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column}@media (min-width: 1024px){:host(.daff-media-gallery){flex-direction:row}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{cursor:pointer;-webkit-user-select:none;display:inline-block;height:64px;width:64px;margin:0 2px;max-width:100%;overflow:hidden;user-select:none}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:72px;width:72px}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{display:block;margin:0 0 4px;height:80px;width:80px}}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:72px;width:72px;position:absolute;top:0;left:0}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:80px;width:80px;position:absolute;top:0;left:0}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{display:flex}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}.daff-media-gallery__thumbnails{margin:0 -2px;max-height:100%;order:2}@media (min-width: 1024px){.daff-media-gallery__thumbnails{margin:0 8px 0 0;order:1}}.daff-media-gallery__selected-thumbnail{display:block;flex-grow:1;order:1;position:relative}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2}}\n"] }]
+                    ], inputs: ['skeleton'], template: "<div class=\"daff-media-gallery__thumbnails\">\n\t<ng-content select=\"[daffThumbnail]\"></ng-content>\n</div>\n<div class=\"daff-media-gallery__selected-thumbnail\">\n\t<daff-media-renderer></daff-media-renderer>\n</div>", styles: [":host(.daff-media-gallery){display:flex;flex-direction:column}@media (min-width: 1024px){:host(.daff-media-gallery){flex-direction:row}}:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{cursor:pointer;-webkit-user-select:none;display:inline-block;height:64px;width:64px;margin:0 2px;max-width:100%;overflow:hidden;user-select:none}@media (min-width: 480px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{height:72px;width:72px}}@media (min-width: 1024px){:host(.daff-media-gallery) ::ng-deep .daff-thumbnail{display:block;margin:0 0 4px;height:80px;width:80px}}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:72px;width:72px;position:absolute;top:0;left:0}@media (min-width: 1024px){:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton ::ng-deep .daff-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:80px;width:80px;position:absolute;top:0;left:0}}:host(.daff-media-gallery).daff-skeleton ::ng-deep img{opacity:0}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail{display:flex;position:relative}:host(.daff-media-gallery).daff-skeleton .daff-media-gallery__selected-thumbnail:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}.daff-media-gallery__thumbnails{margin:0 -2px;max-height:100%;order:2}@media (min-width: 1024px){.daff-media-gallery__thumbnails{margin:0 8px 0 0;order:1}}.daff-media-gallery__selected-thumbnail{display:block;flex-grow:1;order:1;position:relative}@media (min-width: 1024px){.daff-media-gallery__selected-thumbnail{order:2}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DaffMediaGalleryRegistry }]; }, propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-media-gallery']
@@ -1031,7 +1166,7 @@ class DaffImageComponent extends _daffImageBase {
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
             provide: daffThumbnailCompatToken, useExisting: DaffImageComponent,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"daff-image__wrapper\" [style.paddingTop]=\"_paddingTop\">\n\t<img [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\"/>\n</div>", styles: [":host{display:inline-block;border-radius:inherit;position:relative;width:100%}:host.daff-skeleton{display:flex}:host.daff-skeleton:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}:host.daff-skeleton img{opacity:0}:host img{position:absolute;left:0;right:0;top:0;bottom:0;height:auto;margin:auto;max-width:100%}.daff-image__wrapper{border-radius:inherit;height:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"daff-image__wrapper\" [style.paddingTop]=\"_paddingTop\">\n\t<img [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\"/>\n</div>", styles: [":host{display:inline-block;border-radius:inherit;position:relative;width:100%}:host.daff-skeleton{display:flex;position:relative}:host.daff-skeleton:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}:host.daff-skeleton img{opacity:0}:host img{position:absolute;left:0;right:0;top:0;bottom:0;height:auto;margin:auto;max-width:100%}.daff-image__wrapper{border-radius:inherit;height:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-image', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -1039,7 +1174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                             // eslint-disable-next-line @typescript-eslint/no-use-before-define
                             provide: daffThumbnailCompatToken, useExisting: DaffImageComponent,
                         },
-                    ], inputs: ['skeleton'], template: "<div class=\"daff-image__wrapper\" [style.paddingTop]=\"_paddingTop\">\n\t<img [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\"/>\n</div>", styles: [":host{display:inline-block;border-radius:inherit;position:relative;width:100%}:host.daff-skeleton{display:flex}:host.daff-skeleton:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}:host.daff-skeleton img{opacity:0}:host img{position:absolute;left:0;right:0;top:0;bottom:0;height:auto;margin:auto;max-width:100%}.daff-image__wrapper{border-radius:inherit;height:0}\n"] }]
+                    ], inputs: ['skeleton'], template: "<div class=\"daff-image__wrapper\" [style.paddingTop]=\"_paddingTop\">\n\t<img [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\"/>\n</div>", styles: [":host{display:inline-block;border-radius:inherit;position:relative;width:100%}:host.daff-skeleton{display:flex;position:relative}:host.daff-skeleton:before{animation-name:loading;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:100%;width:100%;position:absolute;top:0;left:0}:host.daff-skeleton img{opacity:0}:host img{position:absolute;left:0;right:0;top:0;bottom:0;height:auto;margin:auto;max-width:100%}.daff-image__wrapper{border-radius:inherit;height:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { src: [{
                 type: Input
             }], alt: [{
@@ -1691,7 +1826,7 @@ class DaffQuantitySelectComponent {
     }
 }
 /** @nocollapse */ DaffQuantitySelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffQuantitySelectComponent, deps: [{ token: i1$2.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffQuantitySelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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", components: [{ type: DaffNativeSelectComponent, selector: "select[daff-native-select]", inputs: ["formSubmitted"] }], directives: [{ type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ DaffQuantitySelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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", components: [{ type: DaffNativeSelectComponent, selector: "select[daff-native-select]", inputs: ["formSubmitted"] }], directives: [{ type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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" }]
@@ -1802,7 +1937,7 @@ class DaffQuantityFieldComponent {
             // 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", components: [{ type: DaffQuantitySelectComponent, selector: "daff-quantity-select", inputs: ["min", "max", "extendable"] }, { type: DaffQuantityInputComponent, selector: "daff-quantity-input", inputs: ["min", "max"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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\" [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", components: [{ type: DaffQuantitySelectComponent, selector: "daff-quantity-select", inputs: ["min", "max", "extendable"] }, { type: DaffQuantityInputComponent, selector: "daff-quantity-input", inputs: ["min", "max"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffQuantityFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-quantity-field', providers: [
@@ -1927,78 +2062,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 }]
         }] });
 
-/**
- * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
- */
-class DaffLoadingIconBase {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-    }
-}
-const _daffLoadingIconBase = daffColorMixin(DaffLoadingIconBase, 'primary');
-/**
- * @inheritdoc
- */
-class DaffLoadingIconComponent extends _daffLoadingIconBase {
-    constructor(elementRef, renderer) {
-        super(elementRef, renderer);
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        /**
-         * The (pixel) diameter of the animation
-         */
-        // eslint-disable-next-line @typescript-eslint/no-inferrable-types
-        this.diameter = 60;
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
-    /**
-     * @docs-private
-     */
-    get maxWidth() {
-        return this.diameter + 'px';
-    }
-}
-/** @nocollapse */ DaffLoadingIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffLoadingIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffLoadingIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffLoadingIconComponent, selector: "daff-loading-icon", inputs: { color: "color", diameter: "diameter" }, host: { properties: { "class.daff-loading-icon": "this.class", "style.max-width": "this.maxWidth" } }, usesInheritance: true, ngImport: i0, template: "<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50%\" cy=\"50%\" r=\"46\"></circle>\n</svg>", styles: [":host{display:block}circle{animation:rotation linear,circle-animation linear;animation-duration:1s;animation-iteration-count:infinite;fill:transparent;stroke-dasharray:101.1592834456 400;stroke-linecap:round;stroke-width:5px;transform-origin:center}@keyframes circle-animation{0%{stroke-dasharray:101.1592834456 400;stroke-dashoffset:101.1592834456}50%{stroke-dasharray:101.1592834456 400;stroke-dashoffset:28.902652413}75%{stroke-dasharray:101.1592834456 400;stroke-dashoffset:0}to{stroke-dasharray:0 400;stroke-dashoffset:-101.1592834456}}@keyframes rotation{0%{transform:rotate(-90deg)}50%{transform:rotate(0)}50.5%{transform:rotate(0)}75%{transform:rotate(90deg)}75.5%{transform:rotate(90deg)}99%{transform:rotate(144deg)}to{transform:rotate(144deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffLoadingIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-loading-icon', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50%\" cy=\"50%\" r=\"46\"></circle>\n</svg>", styles: [":host{display:block}circle{animation:rotation linear,circle-animation linear;animation-duration:1s;animation-iteration-count:infinite;fill:transparent;stroke-dasharray:101.1592834456 400;stroke-linecap:round;stroke-width:5px;transform-origin:center}@keyframes circle-animation{0%{stroke-dasharray:101.1592834456 400;stroke-dashoffset:101.1592834456}50%{stroke-dasharray:101.1592834456 400;stroke-dashoffset:28.902652413}75%{stroke-dasharray:101.1592834456 400;stroke-dashoffset:0}to{stroke-dasharray:0 400;stroke-dashoffset:-101.1592834456}}@keyframes rotation{0%{transform:rotate(-90deg)}50%{transform:rotate(0)}50.5%{transform:rotate(0)}75%{transform:rotate(90deg)}75.5%{transform:rotate(90deg)}99%{transform:rotate(144deg)}to{transform:rotate(144deg)}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { diameter: [{
-                type: Input
-            }], class: [{
-                type: HostBinding,
-                args: ['class.daff-loading-icon']
-            }], maxWidth: [{
-                type: HostBinding,
-                args: ['style.max-width']
-            }] } });
-
-class DaffLoadingIconModule {
-}
-/** @nocollapse */ DaffLoadingIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffLoadingIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ DaffLoadingIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffLoadingIconModule, declarations: [DaffLoadingIconComponent], imports: [CommonModule], exports: [DaffLoadingIconComponent] });
-/** @nocollapse */ DaffLoadingIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffLoadingIconModule, imports: [[
-            CommonModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffLoadingIconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                    ],
-                    declarations: [
-                        DaffLoadingIconComponent,
-                    ],
-                    exports: [
-                        DaffLoadingIconComponent,
-                    ],
-                }]
-        }] });
-
 const daffProgressIndicatorAnimation = {
     fill: trigger('fill', [
         state('*', style({ width: '{{ percentage }}%' }), { params: { percentage: 0 } }),
@@ -2416,6 +2479,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 }]
         }] });
 
+class DaffFormLabelDirective {
+    constructor() {
+        this.class = true;
+    }
+}
+/** @nocollapse */ DaffFormLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DaffFormLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: DaffFormLabelDirective, selector: "[daffFormLabel]", host: { properties: { "class.daff-form-label": "this.class" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffFormLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffFormLabel]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-form-label']
+            }] } });
+
+class DaffFormLabelModule {
+}
+/** @nocollapse */ DaffFormLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffFormLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ DaffFormLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffFormLabelModule, declarations: [DaffFormLabelDirective], exports: [DaffFormLabelDirective] });
+/** @nocollapse */ DaffFormLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffFormLabelModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffFormLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        DaffFormLabelDirective,
+                    ],
+                    declarations: [
+                        DaffFormLabelDirective,
+                    ],
+                }]
+        }] });
+
 class DaffAccordionItemContentDirective {
     constructor() {
         /**
@@ -2473,7 +2570,7 @@ const daffAccordionAnimations = {
     ]),
 };
 
-const getAnimationState$2 = (open) => {
+const getAnimationState$3 = (open) => {
     if (open) {
         return 'open';
     }
@@ -2506,11 +2603,11 @@ class DaffAccordionItemComponent {
      */
     ngOnInit() {
         this._open = this.initiallyActive ? this.initiallyActive : this._open;
-        this._animationState = getAnimationState$2(this._open);
+        this._animationState = getAnimationState$3(this._open);
     }
     toggleActive() {
         this._open = !this._open;
-        this._animationState = getAnimationState$2(this._open);
+        this._animationState = getAnimationState$3(this._open);
     }
 }
 /** @nocollapse */ DaffAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2591,15 +2688,15 @@ class DaffNavAccordionItemComponent {
             this._level = this.navAccordionItemParent._level + 1;
         }
         this._open = this.initiallyActive ? this.initiallyActive : this._open;
-        this._animationState = getAnimationState$2(this._open);
+        this._animationState = getAnimationState$3(this._open);
     }
     toggleActive() {
         this._open = !this._open;
-        this._animationState = getAnimationState$2(this._open);
+        this._animationState = getAnimationState$3(this._open);
     }
 }
 /** @nocollapse */ DaffNavAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffNavAccordionItemComponent, deps: [{ token: DaffAccordionComponent }, { token: DaffNavAccordionItemComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffNavAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffNavAccordionItemComponent, selector: "daff-nav-accordion-item", inputs: { initiallyActive: "initiallyActive" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "_navAccordionItemChild", predicate: DaffNavAccordionItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"daff-nav-accordion-item__header\" (click)=\"toggleActive()\">\n  <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n  <span [hidden]=\"_open\" daffSuffix *ngIf=\"_navAccordionItemChild.toArray().length\">\n    <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n  </span>\n  <span [hidden]=\"!_open\" daffSuffix *ngIf=\"_navAccordionItemChild.toArray().length\">\n    <fa-icon [icon]=\"faChevronUp\"></fa-icon>\n  </span>\n</div>\n<div [@openAccordion]=\"_animationState\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host(.daff-nav-accordion-item--level-1) .daff-nav-accordion-item__header{padding-left:15px}:host(.daff-nav-accordion-item--level-2) .daff-nav-accordion-item__header{padding-left:30px}:host(.daff-nav-accordion-item--level-3) .daff-nav-accordion-item__header{padding-left:45px}:host{display:block;padding-top:6px}.daff-nav-accordion-item__header{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:space-between;width:100%;padding-bottom:6px}.daff-nav-accordion-item__header .daff-suffix{margin:0 10px}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DaffSuffixDirective, selector: "[daffSuffix]" }], animations: [
+/** @nocollapse */ DaffNavAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffNavAccordionItemComponent, selector: "daff-nav-accordion-item", inputs: { initiallyActive: "initiallyActive" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "_navAccordionItemChild", predicate: DaffNavAccordionItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"daff-nav-accordion-item__header\" (click)=\"toggleActive()\">\n  <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n  <span [hidden]=\"_open\" daffSuffix *ngIf=\"_navAccordionItemChild.toArray().length\">\n    <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n  </span>\n  <span [hidden]=\"!_open\" daffSuffix *ngIf=\"_navAccordionItemChild.toArray().length\">\n    <fa-icon [icon]=\"faChevronUp\"></fa-icon>\n  </span>\n</div>\n<div [@openAccordion]=\"_animationState\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host(.daff-nav-accordion-item--level-1) .daff-nav-accordion-item__header{padding-left:15px}:host(.daff-nav-accordion-item--level-2) .daff-nav-accordion-item__header{padding-left:30px}:host(.daff-nav-accordion-item--level-3) .daff-nav-accordion-item__header{padding-left:45px}:host{display:block;padding-top:6px}.daff-nav-accordion-item__header{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:space-between;width:100%;padding-bottom:6px}.daff-nav-accordion-item__header .daff-suffix{margin:0 10px}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DaffSuffixDirective, selector: "[daffSuffix]" }], animations: [
         daffAccordionAnimations.openAccordion,
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffNavAccordionItemComponent, decorators: [{
@@ -2794,6 +2891,10 @@ 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 })),
@@ -2804,6 +2905,8 @@ const daffBackdropAnimations = {
     ]),
 };
 
+const getAnimationState$2 = (interactable) => interactable ? 'interactable' : 'non-interactable';
+
 class DaffBackdropComponent {
     constructor() {
         /**
@@ -2811,6 +2914,10 @@ class DaffBackdropComponent {
          */
         // 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.
@@ -2821,34 +2928,64 @@ class DaffBackdropComponent {
          * 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$2(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 */ DaffBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffBackdropComponent, selector: "daff-backdrop", inputs: { transparent: "transparent", fullscreen: "fullscreen" }, outputs: { backdropClicked: "backdropClicked" }, host: { listeners: { "click": "onBackdropClicked()" }, properties: { "@fadeBackdrop": "this.onBackdropClicked" } }, ngImport: i0, template: "<div class=\"daff-backdrop\" [class.daff-backdrop--fullscreen]=\"fullscreen\" [class.daff-backdrop--transparent]=\"transparent\"></div>\n", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none;display:block;-webkit-tap-highlight-color:rgba(0,0,0,0)}.daff-backdrop{background:rgba(0,0,0,.3);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: [
+/** @nocollapse */ DaffBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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;user-select:none}.daff-backdrop{background:rgba(0,0,0,.3);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: "13.3.0", 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{cursor:pointer;-webkit-user-select:none;user-select:none;display:block;-webkit-tap-highlight-color:rgba(0,0,0,0)}.daff-backdrop{background:rgba(0,0,0,.3);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"] }]
+                    ], 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;user-select:none}.daff-backdrop{background:rgba(0,0,0,.3);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
-            }], onBackdropClicked: [{
+            }], 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']
             }] } });
@@ -3181,7 +3318,7 @@ class DaffListItemComponent {
     }
 }
 /** @nocollapse */ DaffListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffListItemComponent, selector: "daff-list-item,a[daff-list-item]", host: { properties: { "class.daff-list-item": "this.class", "attr.role": "this.role" } }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }, { propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-list-item__content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"_suffix\">\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ DaffListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffListItemComponent, selector: "daff-list-item,a[daff-list-item]", host: { properties: { "class.daff-list-item": "this.class", "attr.role": "this.role" } }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }, { propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-list-item__content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"_suffix\">\n  <ng-content select=\"[daffSuffix]\"></ng-content>\n</ng-container>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-list-item' + ',' +
@@ -3492,7 +3629,7 @@ class DaffMenuItemComponent {
     }
 }
 /** @nocollapse */ DaffMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffMenuItemComponent, selector: "a[daff-menu-item],button[daff-menu-item]", host: { properties: { "class.daff-menu-item": "this.class", "attr.role": "this.role" } }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-menu-item__content\">\n  <ng-content></ng-content>\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none;display:block;border:none;border-radius:4px;margin:0;padding:12px 16px;text-decoration:none;width:100%}.daff-menu-item__content{display:flex;gap:8px;font-size:1rem;line-height:1.25rem;text-align:left}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ DaffMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffMenuItemComponent, selector: "a[daff-menu-item],button[daff-menu-item]", host: { properties: { "class.daff-menu-item": "this.class", "attr.role": "this.role" } }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-menu-item__content\">\n  <ng-content></ng-content>\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none;display:block;border:none;border-radius:4px;margin:0;padding:12px 16px;text-decoration:none;width:100%}.daff-menu-item__content{display:flex;gap:8px;font-size:1rem;line-height:1.25rem;text-align:left}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[daff-menu-item]' + ',' +
@@ -4062,7 +4199,7 @@ class DaffPaginatorComponent extends _daffPaginatorBase {
     }
 }
 /** @nocollapse */ DaffPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffPaginatorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffPaginatorComponent, selector: "daff-paginator", inputs: { color: "color", numberOfPages: "numberOfPages", currentPage: "currentPage" }, outputs: { notifyPageChange: "notifyPageChange" }, host: { properties: { "class.daff-paginator": "this.class", "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button type=\"button\" class=\"daff-paginator__previous\"\n  [disabled]=\"_disablePrev()\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Previous Page of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPrevPageChange()\">\n  <fa-icon [icon]=\"faChevronLeft\"></fa-icon> Previous\n</button>\n\n<button type=\"button\" class=\"daff-paginator__page-link\"\n  [class.selected]=\"_isSelected(1)\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Page 1 of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPageChange(1)\">\n  1\n</button>\n\n<span class=\"daff-paginator__ellipsis\" *ngIf=\"_showFirstEllipsis()\">...</span>\n\n<ng-container *ngFor=\"let pageNumber of _numberOfPagesArray\">\n  <button type=\"button\" class=\"daff-paginator__page-link\"\n    [class.selected]=\"_isSelected(pageNumber)\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Page {{pageNumber}} of {{_paginatorId}} Paginator\"\n    aria-current=\"_isSelected(pageNumber)\"\n    *ngIf=\"_showNumber(pageNumber)\"\n    (click)=\"_onNotifyPageChange(pageNumber)\">\n    {{ pageNumber }}\n  </button>\n</ng-container>\n\n<span class=\"daff-paginator__ellipsis\" *ngIf=\"_showLastEllipsis()\">...</span>\n\n<button type=\"button\" class=\"daff-paginator__page-link\"\n  [class.selected]=\"_isSelected(numberOfPages)\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go To Page {{numberOfPages}} of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPageChange(numberOfPages)\"\n  *ngIf=\"!(numberOfPages < 2)\">\n  {{ numberOfPages }}\n</button>\n\n<button class=\"daff-paginator__next\"\n  [disabled]=\"_disableNext()\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Next Page of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyNextPageChange()\">\n  Next <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n</button>\n", styles: [":host{display:flex}.daff-paginator__previous,.daff-paginator__next{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:3px;display:flex;line-height:1em;padding:5px 10px}.daff-paginator__previous fa-icon{margin-right:10px}.daff-paginator__next fa-icon{margin-left:10px}.daff-paginator__ellipsis{padding:5px 10px}.daff-paginator__page-link{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:3px;display:inline-block;margin:0 5px;padding:5px 10px;transition:background-color .15s ease}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ DaffPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffPaginatorComponent, selector: "daff-paginator", inputs: { color: "color", numberOfPages: "numberOfPages", currentPage: "currentPage" }, outputs: { notifyPageChange: "notifyPageChange" }, host: { properties: { "class.daff-paginator": "this.class", "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button type=\"button\" class=\"daff-paginator__previous\"\n  [disabled]=\"_disablePrev()\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Previous Page of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPrevPageChange()\">\n  <fa-icon [icon]=\"faChevronLeft\"></fa-icon> Previous\n</button>\n\n<button type=\"button\" class=\"daff-paginator__page-link\"\n  [class.selected]=\"_isSelected(1)\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Page 1 of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPageChange(1)\">\n  1\n</button>\n\n<span class=\"daff-paginator__ellipsis\" *ngIf=\"_showFirstEllipsis()\">...</span>\n\n<ng-container *ngFor=\"let pageNumber of _numberOfPagesArray\">\n  <button type=\"button\" class=\"daff-paginator__page-link\"\n    [class.selected]=\"_isSelected(pageNumber)\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Page {{pageNumber}} of {{_paginatorId}} Paginator\"\n    aria-current=\"_isSelected(pageNumber)\"\n    *ngIf=\"_showNumber(pageNumber)\"\n    (click)=\"_onNotifyPageChange(pageNumber)\">\n    {{ pageNumber }}\n  </button>\n</ng-container>\n\n<span class=\"daff-paginator__ellipsis\" *ngIf=\"_showLastEllipsis()\">...</span>\n\n<button type=\"button\" class=\"daff-paginator__page-link\"\n  [class.selected]=\"_isSelected(numberOfPages)\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go To Page {{numberOfPages}} of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPageChange(numberOfPages)\"\n  *ngIf=\"!(numberOfPages < 2)\">\n  {{ numberOfPages }}\n</button>\n\n<button class=\"daff-paginator__next\"\n  [disabled]=\"_disableNext()\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Next Page of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyNextPageChange()\">\n  Next <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n</button>\n", styles: [":host{display:flex}.daff-paginator__previous,.daff-paginator__next{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:3px;display:flex;line-height:1em;padding:5px 10px}.daff-paginator__previous fa-icon{margin-right:10px}.daff-paginator__next fa-icon{margin-left:10px}.daff-paginator__ellipsis{padding:5px 10px}.daff-paginator__page-link{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:3px;display:inline-block;margin:0 5px;padding:5px 10px;transition:background-color .15s ease}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-paginator', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"daff-paginator__previous\"\n  [disabled]=\"_disablePrev()\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Previous Page of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPrevPageChange()\">\n  <fa-icon [icon]=\"faChevronLeft\"></fa-icon> Previous\n</button>\n\n<button type=\"button\" class=\"daff-paginator__page-link\"\n  [class.selected]=\"_isSelected(1)\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Page 1 of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPageChange(1)\">\n  1\n</button>\n\n<span class=\"daff-paginator__ellipsis\" *ngIf=\"_showFirstEllipsis()\">...</span>\n\n<ng-container *ngFor=\"let pageNumber of _numberOfPagesArray\">\n  <button type=\"button\" class=\"daff-paginator__page-link\"\n    [class.selected]=\"_isSelected(pageNumber)\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Page {{pageNumber}} of {{_paginatorId}} Paginator\"\n    aria-current=\"_isSelected(pageNumber)\"\n    *ngIf=\"_showNumber(pageNumber)\"\n    (click)=\"_onNotifyPageChange(pageNumber)\">\n    {{ pageNumber }}\n  </button>\n</ng-container>\n\n<span class=\"daff-paginator__ellipsis\" *ngIf=\"_showLastEllipsis()\">...</span>\n\n<button type=\"button\" class=\"daff-paginator__page-link\"\n  [class.selected]=\"_isSelected(numberOfPages)\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go To Page {{numberOfPages}} of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPageChange(numberOfPages)\"\n  *ngIf=\"!(numberOfPages < 2)\">\n  {{ numberOfPages }}\n</button>\n\n<button class=\"daff-paginator__next\"\n  [disabled]=\"_disableNext()\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Next Page of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyNextPageChange()\">\n  Next <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n</button>\n", styles: [":host{display:flex}.daff-paginator__previous,.daff-paginator__next{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:3px;display:flex;line-height:1em;padding:5px 10px}.daff-paginator__previous fa-icon{margin-right:10px}.daff-paginator__next fa-icon{margin-left:10px}.daff-paginator__ellipsis{padding:5px 10px}.daff-paginator__page-link{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:3px;display:inline-block;margin:0 5px;padding:5px 10px;transition:background-color .15s ease}\n"] }]
@@ -4204,7 +4341,7 @@ class DaffQtyDropdownComponent {
     }
 }
 /** @nocollapse */ DaffQtyDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffQtyDropdownComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffQtyDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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"], components: [{ type: DaffFormFieldComponent, selector: "daff-form-field", inputs: ["formSubmitted"] }, { type: DaffNativeSelectComponent, selector: "select[daff-native-select]", inputs: ["formSubmitted"] }, { type: DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] });
+/** @nocollapse */ DaffQtyDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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"], components: [{ type: DaffFormFieldComponent, selector: "daff-form-field", inputs: ["formSubmitted"] }, { type: DaffNativeSelectComponent, selector: "select[daff-native-select]", inputs: ["formSubmitted"] }, { type: DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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"] }]
@@ -4250,8 +4387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 }]
         }] });
 
-const duration = '350ms';
-const sidebarAnimateRemainTransition = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
+const duration = '200ms';
 const sidebarAnimateInTransition = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
 const sidebarAnimateOutTransition = 'cubic-bezier(0.4, 0.0, 1, 1)';
 const daffSidebarAnimations = {
@@ -4260,15 +4396,32 @@ const daffSidebarAnimations = {
         // 1. 3d transforms causes text to appear blurry on IE and Edge.
         state('open', style({
             transform: 'none',
-            visibility: 'visible',
         })),
+        state('closed', style({
+            transform: 'translateX({{width}})',
+        }), { params: { width: '-240px' } }),
         transition('open => closed', animate(duration + ' ' + sidebarAnimateOutTransition)),
         transition('closed => open', animate(duration + ' ' + sidebarAnimateInTransition)),
     ]),
     transformContent: trigger('transformContent', [
+        // We remove the `transform` here completely, rather than setting it to zero, because:
+        // 1. 3d transforms causes text to appear blurry on IE and Edge.
         state('closed', style({
             transform: 'none',
         })),
+        state('open', style({
+            transform: 'translateX({{shift}})',
+        }), { params: { shift: '-240px' } }),
+        transition('open => closed', animate(duration + ' ' + sidebarAnimateInTransition)),
+        transition('closed => open', animate(duration + ' ' + sidebarAnimateOutTransition)),
+    ]),
+    backdropTrigger: trigger('backdropTrigger', [
+        state('open', style({
+            opacity: 1,
+        })),
+        state('closed', style({
+            opacity: 0,
+        })),
         transition('open => closed', animate(duration + ' ' + sidebarAnimateOutTransition)),
         transition('closed => open', animate(duration + ' ' + sidebarAnimateInTransition)),
     ]),
@@ -4277,11 +4430,12 @@ var DaffSidebarAnimationStates;
 (function (DaffSidebarAnimationStates) {
     DaffSidebarAnimationStates["OPEN"] = "open";
     DaffSidebarAnimationStates["CLOSED"] = "closed";
+    DaffSidebarAnimationStates["NONE"] = "none";
 })(DaffSidebarAnimationStates || (DaffSidebarAnimationStates = {}));
 
 const getAnimationState = (open, enabled = true) => {
     if (!enabled) {
-        return 'open';
+        return 'none';
     }
     if (open && enabled) {
         return 'open';
@@ -4291,21 +4445,33 @@ const getAnimationState = (open, enabled = true) => {
     }
 };
 
+const getSidebarAnimationWidth = (side, width) => side === 'left' ? -1 * width + 'px' : width + 'px';
+
 /**
- * DaffSidebar is heavily based upon the work done by the @angular/material2
+ * DaffSidebarComponent is heavily based upon the work done by the @angular/components
  * team on `mat-drawer` and `mat-sidenav`. `daff-sidebar` is intended to be
- * a simplified version (with a different design) of `mat-drawer` which
- * follows a stricter "dumb" component pattern than `mat-drawer`
+ * a simplified version (with a different design) of `mat-drawer`.
  */
 class DaffSidebarComponent {
     constructor(_elementRef, _ngZone) {
         this._elementRef = _elementRef;
         this._ngZone = _ngZone;
-        this.class = true;
         /**
          * Event fired when `ESC` key is pressed when the sidebar has focus
          */
         this.escapePressed = new EventEmitter();
+        /**
+         * What side of the viewport to show the sidebar on.
+         */
+        this.side = 'left';
+        /**
+         * The mode of the sidebar.
+         */
+        this.mode = 'side';
+        /**
+         * Whether or not the sidebar is open.
+         */
+        this.open = false;
         /**
          * Listen to `keydown` events outside the zone so that change detection is not run every
          * time a key is pressed. Instead we re-enter the zone only if the `ESC` key is pressed.
@@ -4318,128 +4484,211 @@ class DaffSidebarComponent {
             }));
         });
     }
+    /**
+     * The CSS classes set.
+     */
+    get classes() {
+        return {
+            'daff-sidebar': true,
+            [this.side]: true,
+            [this.mode]: true,
+        };
+    }
+    ;
+    /**
+     * The animation state of the sidebar.
+     */
+    get transformSidebar() {
+        return {
+            value: getAnimationState(this.open, this.mode === 'over' || this.mode === 'side-fixed'),
+            params: { width: getSidebarAnimationWidth(this.side, this.width) },
+        };
+    }
+    /**
+     * The width of the sidebar.
+     */
+    get width() {
+        return this._elementRef.nativeElement.offsetWidth;
+    }
 }
 /** @nocollapse */ DaffSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarComponent, selector: "daff-sidebar", outputs: { escapePressed: "escapePressed" }, host: { properties: { "class.daff-sidebar": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}.daff-sidebar{display:block;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ DaffSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarComponent, selector: "daff-sidebar", inputs: { side: "side", mode: "mode", open: "open" }, outputs: { escapePressed: "escapePressed" }, host: { properties: { "class": "this.classes", "@transformSidebar": "this.transformSidebar" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;width:240px;flex-shrink:0;overflow:auto}:host.side-fixed{position:fixed;top:var(--daff-sidebar-side-fixed-top-shift);bottom:0;z-index:4;height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}:host.over,:host.under{position:absolute;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:5}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport >).side-fixed{position:sticky}\n"], animations: [
+        daffSidebarAnimations.transformSidebar,
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-sidebar', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.daff-sidebar{display:block;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { class: [{
+            args: [{ selector: 'daff-sidebar', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        daffSidebarAnimations.transformSidebar,
+                    ], styles: [":host{display:block;width:240px;flex-shrink:0;overflow:auto}:host.side-fixed{position:fixed;top:var(--daff-sidebar-side-fixed-top-shift);bottom:0;z-index:4;height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}:host.over,:host.under{position:absolute;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:5}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport >).side-fixed{position:sticky}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], transformSidebar: [{
                 type: HostBinding,
-                args: ['class.daff-sidebar']
+                args: ['@transformSidebar']
             }], escapePressed: [{
                 type: Output
+            }], side: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], open: [{
+                type: Input
             }] } });
 
+/**
+ * Determines, given a list of sidebars, whether or not the backdrop is interactable (typically clickable).
+ */
+const sidebarViewportBackdropInteractable = (sidebars) => sidebars.reduce((acc, sidebar) => ((sidebar.mode === 'over' || sidebar.mode === 'under') && sidebar.open) || acc, false);
+
+/**
+ * Given a list of sidebars, compute the associated content shift.
+ */
+const sidebarViewportContentPadding = (sidebars, side) => sidebars.reduce((acc, sidebar) => {
+    if (!(sidebar.mode === "side-fixed" /* SideFixed */ && sidebar.open)) {
+        return acc;
+    }
+    if (sidebar.side === side) {
+        return sidebar.width;
+    }
+    else {
+        // This component is "stateless", its possible to have two open "under" sidebars.
+        // As such, we defer to "left" being open by default.
+        return acc;
+    }
+}, 0);
+
+const isViewportContentShifted = (mode, open) => (mode === 'under' && open);
+/**
+ * Given a list of sidebars, compute the associated content shift.
+ */
+const sidebarViewportContentShift = (sidebars) => sidebars.reduce((acc, sidebar) => {
+    if (!isViewportContentShifted(sidebar.mode, sidebar.open)) {
+        return acc;
+    }
+    if (sidebar.side === 'left') {
+        return sidebar.width;
+    }
+    else if (sidebar.side === 'right' && acc === 0) {
+        return -1 * sidebar.width;
+    }
+    else {
+        // This component is "stateless", its possible to have two open "under" sidebars.
+        // As such, we defer to "left" being open by default.
+        return acc;
+    }
+}, 0);
+
+/**
+ * The DaffSidebarViewport is the "holder" of sidebars throughout an entire application.
+ * It's generally only used once, like
+ *
+ * ```html
+ * <daff-sidebar-viewport>
+ *    <daff-sidebar></daff-sidebar>
+ *    <p>Some Content</p>
+ * </daff-sidebar-viewport>
+ * ```
+ *
+ * Importantly, its possible for there to be multiple sidebars of many modes
+ * at the same time. @see {@link DaffSidebarMode }
+ *
+ * Since this is a functional component, it's possible to have multiple "open" sidebars
+ * within at the same time. As a result, this component attempts to
+ * gracefully handle these situations. However, importantly, this sidebar
+ * has a constraint, there's only allowed to be one sidebar,
+ * of each mode, on each side, at any given time. If this is violated,
+ * this component will throw an exception.
+ */
 class DaffSidebarViewportComponent {
-    constructor(ref) {
-        this.ref = ref;
+    constructor(cdRef) {
+        this.cdRef = cdRef;
         /**
-         * Internal tracking variable for the state of sidebar viewport.
-         *
-         * @docs-private
+         * The number of pixels that the main content of the page should be shifted to
+         * right when there are child sidebars.
          */
-        this._opened = false;
+        this._shift = '0px';
         /**
-         * @docs-private
+         * The left padding on the content when left side-fixed sidebars are open.
          */
-        this._mode = 'side';
+        this._contentPadLeft = 0;
         /**
-         * Input state for whether or not the backdrop is
-         * "visible" to the human eye
+         * The right padding on the content when right side-fixed sidebars are open.
          */
-        // eslint-disable-next-line @typescript-eslint/no-inferrable-types
-        this.backdropIsVisible = true;
+        this._contentPadRight = 0;
+        /**
+         * Whether or not the backdrop is interactable
+         */
+        this._backdropInteractable = false;
+        /**
+         * The animation state
+         */
+        this._animationState = { value: 'closed', params: { shift: '0px' } };
         /**
          * Event fired when the backdrop is clicked
          * This is often used to close the sidebar
          */
         this.backdropClicked = new EventEmitter();
     }
-    /**
-     * The mode to put the sidebar in
-     */
-    get mode() {
-        return this._mode;
-    }
-    set mode(value) {
-        this._mode = value;
-        this._animationState = getAnimationState(this.opened, this.animationsEnabled);
-    }
-    /**
-     * Property for the "opened" state of the sidebar
-     */
-    get opened() {
-        return this._opened;
-    }
-    set opened(value) {
-        this._opened = value;
-        this._animationState = getAnimationState(value, this.animationsEnabled);
-    }
-    /**
-     * @docs-private
-     */
-    get animationsEnabled() {
-        return (this.mode === 'over' || this.mode === 'push') ? true : false;
-    }
-    /**
-     * @docs-private
-     */
-    ngOnInit() {
-        this._animationState = getAnimationState(this.opened, this.animationsEnabled);
+    ngAfterContentChecked() {
+        const nextShift = sidebarViewportContentShift(this.sidebars) + 'px';
+        if (this._shift !== nextShift) {
+            this._shift = nextShift;
+            this.updateAnimationState();
+            this.cdRef.markForCheck();
+        }
+        const nextBackdropInteractable = sidebarViewportBackdropInteractable(this.sidebars);
+        if (this._backdropInteractable !== nextBackdropInteractable) {
+            this._backdropInteractable = nextBackdropInteractable;
+            this.updateAnimationState();
+            this.cdRef.markForCheck();
+        }
+        ;
+        const nextLeftPadding = sidebarViewportContentPadding(this.sidebars, 'left');
+        if (this._contentPadLeft !== nextLeftPadding) {
+            this._contentPadLeft = nextLeftPadding;
+            this.updateAnimationState();
+            this.cdRef.markForCheck();
+        }
+        const nextRightPadding = sidebarViewportContentPadding(this.sidebars, 'right');
+        if (this._contentPadRight !== nextRightPadding) {
+            this._contentPadRight = nextRightPadding;
+            this.updateAnimationState();
+            this.cdRef.markForCheck();
+        }
     }
     /**
      * @docs-private
+     *
+     * Updates the animation state of the viewport depending upon the state
+     * of all sidebars within the viewport.
      */
-    ngAfterViewInit() {
-        if (this.sidebar) {
-            this.sidebar.escapePressed.subscribe(() => {
-                this.onEscape();
-            });
-        }
+    updateAnimationState() {
+        this._animationState = {
+            value: getAnimationState(this.sidebars.reduce((acc, sidebar) => acc || isViewportContentShifted(sidebar.mode, sidebar.open), false)),
+            params: { shift: this._shift },
+        };
     }
     /**
      * @docs-private
+     * The called when the backdrop of the viewport is clicked upon.
      */
     _backdropClicked() {
         this.backdropClicked.emit();
     }
-    /**
-     * @docs-private
-     */
-    get hasBackdrop() {
-        return (this.mode === 'over' || this.mode === 'push');
-    }
-    /**
-     * @docs-private
-     */
-    onEscape() {
-        if (this.hasBackdrop) {
-            this.opened = false;
-            this.ref.markForCheck();
-        }
-    }
 }
 /** @nocollapse */ DaffSidebarViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarViewportComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffSidebarViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarViewportComponent, selector: "daff-sidebar-viewport", inputs: { mode: "mode", backdropIsVisible: "backdropIsVisible", opened: "opened" }, outputs: { backdropClicked: "backdropClicked" }, queries: [{ propertyName: "sidebar", first: true, predicate: DaffSidebarComponent, descendants: true }], ngImport: i0, template: "<div class=\"daff-sidebar-viewport {{ mode }}\">\n  <div class=\"daff-sidebar-viewport__sidebar\" [@transformSidebar]=\"_animationState\" [cdkTrapFocus]=\"opened && (mode === 'over' || mode === 'push')\">\n    <ng-content select=\"daff-sidebar\" (escapePressed)=\"onEscape($event)\"></ng-content>\n  </div>\n\n  <daff-backdrop \n  class=\"daff-sidebar-viewport__backdrop\" \n  *ngIf=\"hasBackdrop && _opened\"\n  [transparent]=\"!backdropIsVisible\" \n  (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n  <div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".daff-sidebar-viewport{display:flex;min-height:100%;position:relative;width:100%;z-index:1}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:2}.daff-sidebar-viewport__sidebar{flex-shrink:0;width:250px;will-change:transform,visibility;z-index:4}.daff-sidebar-viewport__backdrop{cursor:pointer;height:100%;position:absolute;width:100%;z-index:3}.daff-sidebar-viewport.push>.daff-sidebar-viewport__sidebar{bottom:0;height:100%;left:0;position:absolute;top:0;transform:translate(-250px);visibility:hidden}.daff-sidebar-viewport.push>.daff-sidebar-viewport__content{transform:translate(250px)}.daff-sidebar-viewport.over>.daff-sidebar-viewport__sidebar{bottom:0;height:100%;left:0;position:absolute;top:0;transform:translate(-250px);visibility:hidden}\n"], components: [{ type: DaffBackdropComponent, selector: "daff-backdrop", inputs: ["transparent", "fullscreen"], outputs: ["backdropClicked"] }], directives: [{ type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
-        daffSidebarAnimations.transformSidebar,
+/** @nocollapse */ DaffSidebarViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarViewportComponent, selector: "daff-sidebar-viewport", outputs: { backdropClicked: "backdropClicked" }, queries: [{ propertyName: "sidebars", predicate: DaffSidebarComponent }], ngImport: i0, template: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<daff-backdrop\n  [@transformContent]=\"_animationState\"\n  class=\"daff-sidebar-viewport__backdrop\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n<div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n  <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n  <div class=\"daff-sidebar-viewport__inner\" [style.padding-left.px]=\"_contentPadLeft\" [style.padding-right.px]=\"_contentPadRight\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>", styles: [":host{overflow:hidden;display:flex;min-height:100%;position:relative;width:100%;z-index:1;height:100vh;height:100dvh}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:3;overflow-y:auto;height:100%}.daff-sidebar-viewport__sidebar{flex-shrink:0}.daff-sidebar-viewport__backdrop{height:100%;position:absolute;width:100%;z-index:4}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"], components: [{ type: DaffBackdropComponent, selector: "daff-backdrop", inputs: ["transparent", "interactable", "fullscreen"], outputs: ["backdropClicked"] }], animations: [
         daffSidebarAnimations.transformContent,
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarViewportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-sidebar-viewport', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        daffSidebarAnimations.transformSidebar,
                         daffSidebarAnimations.transformContent,
-                    ], template: "<div class=\"daff-sidebar-viewport {{ mode }}\">\n  <div class=\"daff-sidebar-viewport__sidebar\" [@transformSidebar]=\"_animationState\" [cdkTrapFocus]=\"opened && (mode === 'over' || mode === 'push')\">\n    <ng-content select=\"daff-sidebar\" (escapePressed)=\"onEscape($event)\"></ng-content>\n  </div>\n\n  <daff-backdrop \n  class=\"daff-sidebar-viewport__backdrop\" \n  *ngIf=\"hasBackdrop && _opened\"\n  [transparent]=\"!backdropIsVisible\" \n  (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n  <div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".daff-sidebar-viewport{display:flex;min-height:100%;position:relative;width:100%;z-index:1}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:2}.daff-sidebar-viewport__sidebar{flex-shrink:0;width:250px;will-change:transform,visibility;z-index:4}.daff-sidebar-viewport__backdrop{cursor:pointer;height:100%;position:absolute;width:100%;z-index:3}.daff-sidebar-viewport.push>.daff-sidebar-viewport__sidebar{bottom:0;height:100%;left:0;position:absolute;top:0;transform:translate(-250px);visibility:hidden}.daff-sidebar-viewport.push>.daff-sidebar-viewport__content{transform:translate(250px)}.daff-sidebar-viewport.over>.daff-sidebar-viewport__sidebar{bottom:0;height:100%;left:0;position:absolute;top:0;transform:translate(-250px);visibility:hidden}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { sidebar: [{
-                type: ContentChild,
-                args: [DaffSidebarComponent]
-            }], mode: [{
-                type: Input
-            }], backdropIsVisible: [{
-                type: Input
-            }], opened: [{
-                type: Input
+                    ], template: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<daff-backdrop\n  [@transformContent]=\"_animationState\"\n  class=\"daff-sidebar-viewport__backdrop\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n<div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n  <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n  <div class=\"daff-sidebar-viewport__inner\" [style.padding-left.px]=\"_contentPadLeft\" [style.padding-right.px]=\"_contentPadRight\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>", styles: [":host{overflow:hidden;display:flex;min-height:100%;position:relative;width:100%;z-index:1;height:100vh;height:100dvh}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:3;overflow-y:auto;height:100%}.daff-sidebar-viewport__sidebar{flex-shrink:0}.daff-sidebar-viewport__backdrop{height:100%;position:absolute;width:100%;z-index:4}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { sidebars: [{
+                type: ContentChildren,
+                args: [DaffSidebarComponent, { descendants: false }]
             }], backdropClicked: [{
                 type: Output
             }] } });
@@ -5673,5 +5922,5 @@ const DAFF_THEME_INITIALIZER = [
  * Generated bundle index. Do not edit.
  */
 
-export { DAFF_THEME_INITIALIZER, DaffAccordionComponent, DaffAccordionItemComponent, DaffAccordionItemContentDirective, DaffAccordionItemTitleDirective, DaffAccordionModule, DaffArticleComponent, DaffArticleLeadDirective, DaffArticleMetaDirective, DaffArticleModule, DaffArticleTitleDirective, DaffBackdropComponent, DaffBackdropModule, DaffBreakpoints, DaffButtonComponent, DaffButtonModule, DaffButtonSetComponent, DaffButtonSetModule, DaffCalloutBodyDirective, DaffCalloutComponent, DaffCalloutIconDirective, DaffCalloutLayoutEnum, DaffCalloutModule, DaffCalloutSizeEnum, DaffCalloutSubtitleDirective, DaffCalloutTaglineDirective, DaffCalloutTitleDirective, DaffCardActionsDirective, DaffCardComponent, DaffCardContentDirective, DaffCardIconDirective, DaffCardImageDirective, DaffCardModule, DaffCardOrientationEnum, DaffCardTaglineDirective, DaffCardTitleDirective, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffContainerComponent, DaffContainerModule, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFeatureComponent, DaffFeatureIconDirective, DaffFeatureModeEnum, DaffFeatureModule, DaffFeatureSubheaderDirective, DaffFeatureSubtitleDirective, DaffFeatureTitleDirective, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffGalleryImageComponent, DaffHeroBodyDirective, DaffHeroComponent, DaffHeroIconDirective, DaffHeroLayoutEnum, DaffHeroModule, DaffHeroSizeEnum, DaffHeroSubtitleDirective, DaffHeroTaglineDirective, DaffHeroTitleDirective, DaffImageComponent, DaffImageGalleryComponent, DaffImageGalleryModule, DaffImageListComponent, DaffImageListModule, DaffImageModule, DaffInputComponent, DaffInputModule, DaffLinkSetComponent, DaffLinkSetHeadingDirective, DaffLinkSetItemComponent, DaffLinkSetModule, DaffLinkSetSubheadingDirective, DaffListComponent, DaffListItemComponent, DaffListModeEnum, DaffListModule, DaffListSubheaderDirective, DaffLoadingIconComponent, DaffLoadingIconModule, DaffMediaGalleryComponent, DaffMediaGalleryModule, DaffMenuActivatorDirective, DaffMenuComponent, DaffMenuItemComponent, DaffMenuModule, DaffMenuService, DaffModalActionsComponent, DaffModalComponent, DaffModalContentComponent, DaffModalHeaderComponent, DaffModalModule, DaffModalService, DaffModalTitleDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffNavAccordionItemComponent, DaffNavbarComponent, DaffNavbarModule, DaffPaginatorComponent, DaffPaginatorModule, DaffPrefixDirective, DaffPrefixSuffixModule, DaffProgressIndicatorComponent, DaffProgressIndicatorModule, DaffQtyDropdownComponent, DaffQtyDropdownModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSidebarComponent, DaffSidebarModule, DaffSidebarViewportComponent, DaffStatusEnum, DaffSuffixDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, DaffThumbnailDirective, daffArticleEncapsulatedMixin, daffCompactableMixin, daffFocusableElementsSelector, daffManageContainerLayoutMixin, daffMenuCreateOverlay, daffPrefixableMixin, daffSuffixableMixin, daffThumbnailCompatToken };
+export { DAFF_THEME_INITIALIZER, DaffAccordionComponent, DaffAccordionItemComponent, DaffAccordionItemContentDirective, DaffAccordionItemTitleDirective, DaffAccordionModule, DaffArticleComponent, DaffArticleLeadDirective, DaffArticleMetaDirective, DaffArticleModule, DaffArticleTitleDirective, DaffBackdropComponent, DaffBackdropModule, DaffBreakpoints, DaffButtonComponent, DaffButtonModule, DaffButtonSetComponent, DaffButtonSetModule, DaffCalloutBodyDirective, DaffCalloutComponent, DaffCalloutIconDirective, DaffCalloutLayoutEnum, DaffCalloutModule, DaffCalloutSizeEnum, DaffCalloutSubtitleDirective, DaffCalloutTaglineDirective, DaffCalloutTitleDirective, DaffCardActionsDirective, DaffCardComponent, DaffCardContentDirective, DaffCardIconDirective, DaffCardImageDirective, DaffCardModule, DaffCardOrientationEnum, DaffCardTaglineDirective, DaffCardTitleDirective, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffContainerComponent, DaffContainerModule, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFeatureComponent, DaffFeatureIconDirective, DaffFeatureModeEnum, DaffFeatureModule, DaffFeatureSubheaderDirective, DaffFeatureSubtitleDirective, DaffFeatureTitleDirective, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffGalleryImageComponent, DaffHeroBodyDirective, DaffHeroComponent, DaffHeroIconDirective, DaffHeroLayoutEnum, DaffHeroModule, DaffHeroSizeEnum, DaffHeroSubtitleDirective, DaffHeroTaglineDirective, DaffHeroTitleDirective, DaffImageComponent, DaffImageGalleryComponent, DaffImageGalleryModule, DaffImageListComponent, DaffImageListModule, DaffImageModule, DaffInputComponent, DaffInputModule, DaffLinkSetComponent, DaffLinkSetHeadingDirective, DaffLinkSetItemComponent, DaffLinkSetModule, DaffLinkSetSubheadingDirective, DaffListComponent, DaffListItemComponent, DaffListModeEnum, DaffListModule, DaffListSubheaderDirective, DaffLoadingIconComponent, DaffLoadingIconModule, DaffMediaGalleryComponent, DaffMediaGalleryModule, DaffMenuActivatorDirective, DaffMenuComponent, DaffMenuItemComponent, DaffMenuModule, DaffMenuService, DaffModalActionsComponent, DaffModalComponent, DaffModalContentComponent, DaffModalHeaderComponent, DaffModalModule, DaffModalService, DaffModalTitleDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffNavAccordionItemComponent, DaffNavbarComponent, DaffNavbarModule, DaffPaginatorComponent, DaffPaginatorModule, DaffPrefixDirective, DaffPrefixSuffixModule, DaffProgressIndicatorComponent, DaffProgressIndicatorModule, DaffQtyDropdownComponent, DaffQtyDropdownModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSidebarComponent, DaffSidebarModule, DaffSidebarViewportComponent, DaffStatusEnum, DaffSuffixDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, DaffThumbnailDirective, daffArticleEncapsulatedMixin, daffColorMixin, daffCompactableMixin, daffFocusableElementsSelector, daffManageContainerLayoutMixin, daffMenuCreateOverlay, daffPrefixableMixin, daffStatusMixin, daffSuffixableMixin, daffThumbnailCompatToken };
 //# sourceMappingURL=daffodil-design.mjs.map