@daffodil/design 0.39.6 → 0.39.10

package/fesm2015/daffodil-design.js

@@ -12,6 +12,18 @@ import { CdkPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/por
 import { OverlayModule, GlobalPositionStrategy, Overlay } from '@angular/cdk/overlay';
 import { A11yModule } from '@angular/cdk/a11y';
 
+/**
+ * A mixin for giving a component the ability to prevent article styles from cascading down.
+ */
+function daffArticleEncapsulatedMixin(Base) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+            this._renderer.addClass(this._elementRef.nativeElement, `daff-ae`);
+        }
+    };
+}
+
 var DaffPaletteEnum;
 (function (DaffPaletteEnum) {
     DaffPaletteEnum["PRIMARY"] = "primary";
@@ -249,7 +261,7 @@ class DaffButtonBase {
         this._renderer = _renderer;
     }
 }
-const _daffButtonBase = daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin(daffSizeMixin(DaffButtonBase, 'md')))));
+const _daffButtonBase = daffArticleEncapsulatedMixin(daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin(daffSizeMixin(DaffButtonBase, 'md'))))));
 var DaffButtonTypeEnum;
 (function (DaffButtonTypeEnum) {
     DaffButtonTypeEnum["Default"] = "daff-button";
@@ -423,6 +435,8 @@ class DaffFormFieldControl {
 
 const DaffFormFieldMissingControlMessage = 'A DaffFormFieldComponent must contain a DaffFormFieldControl';
 
+// ChangeDetection is ignored because this component needs to be refactored
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 class DaffFormFieldComponent {
     constructor() {
         /**
@@ -538,39 +552,7 @@ DaffFormFieldModule.decorators = [
 
 const DAFF_MEDIA_GALLERY_TOKEN = new InjectionToken('DAFF_MEDIA_GALLERY_TOKEN');
 
-let uniqueGalleryId = 0;
-class DaffMediaGalleryComponent {
-    constructor() {
-        /**
-         * Adds a class for styling the media gallery
-         */
-        this.class = true;
-        /**
-         * The name of the gallery
-         */
-        this.name = `${uniqueGalleryId}`;
-        uniqueGalleryId++;
-    }
-}
-DaffMediaGalleryComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'daff-media-gallery',
-                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>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                providers: [
-                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                    { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },
-                ],
-                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;-moz-user-select:none;-ms-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}}.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}@media (min-width:1024px){.daff-media-gallery__selected-thumbnail{order:2}}"]
-            },] }
-];
-/** @nocollapse */
-DaffMediaGalleryComponent.ctorParameters = () => [];
-DaffMediaGalleryComponent.propDecorators = {
-    class: [{ type: HostBinding, args: ['class.daff-media-gallery',] }],
-    name: [{ type: Input }]
-};
-
+const isGallery = (element) => !('gallery' in element);
 class DaffMediaGalleryRegistry {
     constructor() {
         this.galleries = {};
@@ -582,16 +564,18 @@ class DaffMediaGalleryRegistry {
     add(gallery, thumbnail) {
         if (this.galleries[gallery.name]) {
             let newGallery = this.galleries[gallery.name].getValue();
-            newGallery = Object.assign(Object.assign({}, newGallery), { thumbnails: [
-                    ...newGallery.thumbnails.filter(t => t !== thumbnail),
-                    thumbnail,
-                ] });
+            if (thumbnail) {
+                newGallery = Object.assign(Object.assign({}, newGallery), { thumbnails: [
+                        ...newGallery.thumbnails.filter(t => t !== thumbnail),
+                        thumbnail,
+                    ] });
+            }
             this.galleries[gallery.name].next(newGallery);
         }
         else {
             this.galleries[gallery.name] = new BehaviorSubject({
                 gallery,
-                thumbnails: [thumbnail],
+                thumbnails: thumbnail ? [thumbnail] : [],
             });
         }
         if (this.galleries[gallery.name].getValue().thumbnails.length === 1) {
@@ -600,9 +584,17 @@ class DaffMediaGalleryRegistry {
     }
     /**
      * @description
-     * Removes a media element from the internal registry.
+     * Removes a thumbnail or gallery from the internal registry.
      */
-    remove(thumbnail) {
+    remove(element) {
+        if (isGallery(element)) {
+            this.removeGallery(element);
+        }
+        else {
+            this.removeThumbnail(element);
+        }
+    }
+    removeThumbnail(thumbnail) {
         if (!this.galleries[thumbnail.gallery.name]) {
             return;
         }
@@ -616,6 +608,9 @@ class DaffMediaGalleryRegistry {
                 ...gallery.thumbnails.slice(index + 1),
             ] }));
     }
+    removeGallery(gallery) {
+        delete this.galleries[gallery.name];
+    }
     /**
      * @description
      * Selects a media element for a given gallery.
@@ -640,6 +635,63 @@ DaffMediaGalleryRegistry.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 
+let uniqueGalleryId = 0;
+/**
+ * An _elementRef and an instance of renderer2 are needed for the link set mixins
+ */
+class DaffMediaGalleryBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffMediaGalleryBase = daffArticleEncapsulatedMixin((DaffMediaGalleryBase));
+class DaffMediaGalleryComponent extends _daffMediaGalleryBase {
+    constructor(elementRef, renderer, registry) {
+        super(elementRef, renderer);
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.registry = registry;
+        /**
+         * Adds a class for styling the media gallery
+         */
+        this.class = true;
+        /**
+         * The name of the gallery
+         */
+        this.name = `${uniqueGalleryId}`;
+        uniqueGalleryId++;
+    }
+    ngOnInit() {
+        this.registry.add(this);
+    }
+    ngOnDestroy() {
+        this.registry.remove(this);
+    }
+}
+DaffMediaGalleryComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'daff-media-gallery',
+                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>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                providers: [
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },
+                ],
+                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;-moz-user-select:none;-ms-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}}.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}@media (min-width:1024px){.daff-media-gallery__selected-thumbnail{order:2}}"]
+            },] }
+];
+/** @nocollapse */
+DaffMediaGalleryComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: DaffMediaGalleryRegistry }
+];
+DaffMediaGalleryComponent.propDecorators = {
+    class: [{ type: HostBinding, args: ['class.daff-media-gallery',] }],
+    name: [{ type: Input }]
+};
+
 /**
  * Dynamically renders the selected `DaffThumbnailDirective` in a `daff-media-gallery` any time the selected thumbnail
  * changes.
@@ -751,7 +803,7 @@ class DaffThumbnailDirective {
     /**
      * Adds a click event to trigger selection of the media element.
      *
-     * @param $event
+     * @param event: MouseEvent
      */
     onClick($event) {
         this.registry.select(this);
@@ -893,7 +945,7 @@ class DaffImageComponent {
 DaffImageComponent.decorators = [
     { type: Component, args: [{
                 selector: 'daff-image',
-                template: "<div class=\"daff-image__wrapper\" [style.paddingTop]=\"_paddingTop\">\n\t<img [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" />\n</div>",
+                template: "<div class=\"daff-image__wrapper\" [style.paddingTop]=\"_paddingTop\">\n\t<img [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\"/>\n</div>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     {
@@ -970,6 +1022,7 @@ DaffInputComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'input[daff-input]',
                 template: '<ng-content></ng-content>',
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     // eslint-disable-next-line @typescript-eslint/no-use-before-define
                     { provide: DaffFormFieldControl, useExisting: DaffInputComponent },
@@ -1041,6 +1094,7 @@ DaffNativeSelectComponent.decorators = [
                 selector: 'select[daff-native-select]',
                 template: '<ng-content></ng-content>',
                 encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     // eslint-disable-next-line @typescript-eslint/no-use-before-define
                     { provide: DaffFormFieldControl, useExisting: DaffNativeSelectComponent },
@@ -1686,7 +1740,7 @@ DaffContainerComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                 inputs: ['size'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block;margin:0 auto;padding:0;width:100%}:host.daff-xs{max-width:640px}:host.daff-sm{max-width:800px}:host.daff-md{max-width:1040px}:host.daff-lg{max-width:1340px}:host.daff-xl{max-width:1920px}"]
+                styles: [":host-context(.daff-manage-container-layout){display:inherit;flex:inherit;flex-direction:inherit;flex-flow:inherit;flex-wrap:inherit;justify-content:inherit;justify-items:inherit;align-items:inherit;align-content:inherit;gap:inherit;grid-template-columns:inherit;grid-template-rows:inherit;grid-template-areas:inherit;grid-template:inherit;grid-auto-columns:inherit;grid-auto-rows:inherit;grid-auto-flow:inherit;grid:inherit;-moz-column-gap:inherit;column-gap:inherit;row-gap:inherit;grid-gap:inherit;grid-column-gap:inherit;grid-row-gap:inherit;place-items:inherit;place-content:inherit}:host{display:block;margin:0 auto;padding:0;width:100%}:host.daff-xs{max-width:640px}:host.daff-sm{max-width:800px}:host.daff-md{max-width:1040px}:host.daff-lg{max-width:1340px}:host.daff-xl{max-width:1920px}"]
             },] }
 ];
 /** @nocollapse */
@@ -2279,6 +2333,7 @@ DaffAccordionItemComponent.decorators = [
                 selector: 'daff-accordion-item',
                 template: "<div class=\"daff-accordion-item__header\" (click)=\"toggleActive()\">\n  <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n  <span [hidden]=\"_open\" daffSuffix>\n    <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n  </span>\n  <span [hidden]=\"!_open\" daffSuffix>\n    <fa-icon [icon]=\"faChevronUp\"></fa-icon>\n  </span>\n</div>\n<div [@openAccordion]=\"_animationState\">\n  <ng-content></ng-content>\n</div>",
                 encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [
                     daffAccordionAnimations.openAccordion,
                 ],
@@ -2290,15 +2345,36 @@ DaffAccordionItemComponent.propDecorators = {
     initiallyActive: [{ type: Input }]
 };
 
-class DaffAccordionComponent {
+/**
+ * An _elementRef and an instance of renderer2 are needed for the link set mixins
+ */
+class DaffAccordionBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffAccordionBase = daffArticleEncapsulatedMixin((DaffAccordionBase));
+class DaffAccordionComponent extends _daffAccordionBase {
+    constructor(elementRef, renderer) {
+        super(elementRef, renderer);
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
 }
 DaffAccordionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'daff-accordion',
                 template: "<ng-content></ng-content>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:block;width:100%}"]
             },] }
 ];
+/** @nocollapse */
+DaffAccordionComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
 
 class DaffNavAccordionItemComponent {
     constructor(accordion, navAccordionItemParent) {
@@ -2349,6 +2425,7 @@ DaffNavAccordionItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'daff-nav-accordion-item',
                 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",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [
                     daffAccordionAnimations.openAccordion,
                 ],
@@ -2412,7 +2489,8 @@ DaffArticleComponent.decorators = [
                 selector: 'daff-article',
                 template: '<ng-content></ng-content>',
                 encapsulation: ViewEncapsulation.None,
-                styles: [".daff-article{display:block}.daff-article__title{font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width:768px){.daff-article__title{font-size:3rem;line-height:3.5rem}}.daff-article__lead{margin:0}.daff-article__lead,.daff-article__lead code{font-size:1.25rem;line-height:1.75rem;font-weight:400}.daff-article__meta{font-size:.875rem}.daff-article>h1,.daff-article>h2,.daff-article>h3,.daff-article>h4,.daff-article>h5,.daff-article>h6{margin-bottom:.5rem}.daff-article>h2,.daff-article>h3,.daff-article>h4,.daff-article>h5,.daff-article>h6{margin-top:1.5rem}.daff-article>h1{font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width:768px){.daff-article>h1{font-size:3rem;line-height:3.5rem}}.daff-article>h2{font-weight:700;font-size:1.5rem;line-height:1.75rem}@media (min-width:768px){.daff-article>h2{font-size:2rem;line-height:2.5rem}}.daff-article>h3{font-weight:700;font-size:1.25rem;line-height:1.5rem}@media (min-width:768px){.daff-article>h3{font-size:1.5rem;line-height:2rem}}.daff-article>h4{font-size:1.25rem;line-height:1.5rem}@media (min-width:768px){.daff-article>h4{font-size:1.5rem;line-height:2rem}}.daff-article>h5{font-size:1.125rem;line-height:1.5rem}.daff-article>h6{font-size:1rem;line-height:1.5rem}.daff-article>ol,.daff-article>ul{padding-left:1rem}.daff-article>strong{font-weight:700}.daff-article pre{display:block;border-radius:4px;font-size:.875rem;line-height:1.5rem;margin:0;padding:1.5rem;overflow:auto;white-space:pre-wrap}.daff-article pre code{display:block;padding:0}.daff-article code{display:inline-block;border-radius:4px;font-size:.875rem;line-height:1rem;padding:4px}.daff-article hr{border:0;height:1px;margin:2rem 0}.daff-article blockquote{font-size:1.25rem;margin:0;padding:1rem 1.5rem}.daff-article blockquote cite{text-transform:uppercase;font-weight:700;display:block;font-size:.875rem;margin-top:1rem}.daff-article table{display:block;border-collapse:collapse;overflow:auto;width:100%}.daff-article table th{font-weight:600;outline:0;padding:16px;text-align:left;vertical-align:bottom;box-sizing:border-box}.daff-article table td{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;padding:8px 16px;word-break:break-word;vertical-align:top;box-sizing:border-box}"]
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".daff-article{display:block}.daff-article a:not(.daff-ae *,.daff-ae){font-weight:600;text-decoration:none}.daff-article a:not(.daff-ae *,.daff-ae):hover{text-decoration:underline}.daff-article h1:not(.daff-ae *,.daff-ae),.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-bottom:.5rem}.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-top:2rem}.daff-article h1:not(.daff-ae *,.daff-ae){font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width:768px){.daff-article h1:not(.daff-ae *,.daff-ae){font-size:3rem;line-height:3.5rem}}.daff-article h2:not(.daff-ae *,.daff-ae){font-size:2rem;line-height:2.5rem}.daff-article h3:not(.daff-ae *,.daff-ae){font-size:1.5rem;line-height:2rem}.daff-article h4:not(.daff-ae *,.daff-ae){font-size:1.25rem;line-height:1.5rem}.daff-article h5:not(.daff-ae *,.daff-ae){font-size:1.125rem;line-height:1.5rem}.daff-article h6:not(.daff-ae *,.daff-ae){font-size:1rem;line-height:1.5rem}.daff-article p:not(.daff-ae *,.daff-ae){margin:0 0 1rem}.daff-article strong{font-weight:700}.daff-article pre{display:block;border-radius:4px;font-size:.875rem;line-height:1.5rem;margin:0;padding:1.5rem;overflow:auto;white-space:pre-wrap}.daff-article pre code{display:block;padding:0}.daff-article code{display:inline-block;border-radius:4px;font-size:.875rem;line-height:1rem;padding:.25rem}.daff-article__title{font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width:768px){.daff-article__title{font-size:3rem;line-height:3.5rem}}.daff-article__lead{font-size:1.25rem;line-height:1.75rem;font-weight:400;margin:0}.daff-article__lead code{font-size:1.25rem;line-height:1.5rem;font-weight:400}.daff-article__meta{font-size:.875rem}.daff-article hr{border:0;height:1px;margin:2rem 0}.daff-article blockquote{border-radius:4px;margin:0;padding:1rem 1.5rem}.daff-article blockquote cite{font-size:.875rem;font-weight:400;line-height:1.25rem;display:block;margin-top:1rem}.daff-article table{display:block;border-collapse:collapse;margin:1.5rem 0;overflow:auto;width:100%}.daff-article table th{font-weight:600;outline:0;padding:1rem;text-align:left;vertical-align:bottom;box-sizing:border-box}.daff-article table td{padding:.5rem 1rem;vertical-align:top;box-sizing:border-box}"]
             },] }
 ];
 DaffArticleComponent.propDecorators = {
@@ -2584,6 +2662,7 @@ DaffButtonSetComponent.decorators = [
                 selector: 'daff-button-set',
                 template: '<ng-content></ng-content>',
                 encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".daff-button-set{display:flex;flex-direction:column;flex-wrap:wrap}@media (min-width:480px){.daff-button-set{flex-direction:row}}.daff-button-set>*{margin:0 0 5px}.daff-button-set>:last-child{margin:0}@media (min-width:480px){.daff-button-set>*{margin:0 5px 0 0}.daff-button-set>:last-child{margin:0}}"]
             },] }
 ];
@@ -2604,6 +2683,9 @@ DaffButtonSetModule.decorators = [
             },] }
 ];
 
+/**
+ * @deprecated See {@link DaffMediaGalleryComponent}
+ */
 class DaffImageGalleryComponent {
 }
 DaffImageGalleryComponent.decorators = [
@@ -2611,10 +2693,14 @@ DaffImageGalleryComponent.decorators = [
                 selector: 'daff-image-gallery',
                 template: "<div class=\"daff-image-gallery\">\n  <div class=\"daff-image-gallery__active-image\">\n    <ng-content select=\"[daff-active-image]\"></ng-content>\n  </div>\n\n  <daff-image-list class=\"daff-image-gallery__image-list\">\n    <ng-content select=\"daff-gallery-image\"></ng-content>\n  </daff-image-list>\n</div>\n",
                 encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".daff-image-gallery{display:grid;flex-direction:column;grid-template-areas:\"active-image\" \"image-list\";max-height:100%}@media (min-width:1024px){.daff-image-gallery{grid-template-areas:\"image-list active-image\";max-height:-webkit-min-content;max-height:-moz-min-content;max-height:min-content}}.daff-image-gallery__active-image{grid-area:active-image}.daff-image-gallery__active-image img{display:block;max-width:100%}.daff-image-gallery__image-list{grid-area:image-list;margin:5px 0 0;max-height:100%}@media (min-width:1024px){.daff-image-gallery__image-list{margin:0 25px 0 0;max-height:-webkit-fill-available}}.daff-image-gallery__daff-gallery-image img{display:block;opacity:.6;width:90px}.daff-image-gallery__daff-gallery-image--selected img{opacity:1}"]
             },] }
 ];
 
+/**
+ * @deprecated See {@link DaffThumbnailDirective}
+ */
 class DaffGalleryImageComponent {
     constructor() {
         this.class = true;
@@ -2623,7 +2709,8 @@ class DaffGalleryImageComponent {
 DaffGalleryImageComponent.decorators = [
     { type: Component, args: [{
                 selector: 'daff-gallery-image',
-                template: "<div class=\"gallery-image__wrapper\">\n  <ng-content></ng-content>\n</div>"
+                template: "<div class=\"gallery-image__wrapper\">\n  <ng-content></ng-content>\n</div>",
+                changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
 DaffGalleryImageComponent.propDecorators = {
@@ -2644,6 +2731,7 @@ DaffImageListComponent.decorators = [
                 selector: 'daff-image-list',
                 template: '<ng-content></ng-content>',
                 encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".daff-image-list{overflow:scroll;white-space:nowrap}.daff-image-list>*{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;margin:0 5px 0 0}@media (min-width:1024px){.daff-image-list>*{display:block;margin:0 0 5px}}.daff-image-list>:last-child{margin:0}::-webkit-scrollbar{height:2px;width:2px}::-webkit-scrollbar-thumb{box-shadow:inset 0 0 3px #b6b6b6;-webkit-box-shadow:inset 0 0 3px #b6b6b6}"]
             },] }
 ];
@@ -2686,11 +2774,24 @@ DaffImageGalleryModule.decorators = [
             },] }
 ];
 
+/**
+ * An _elementRef and an instance of renderer2 are needed for the link set mixins
+ */
+class DaffLinkSetBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffLinkSetBase = daffArticleEncapsulatedMixin((DaffLinkSetBase));
 /**
  * DaffLinkSetComponent is a component for displaying a two or more links.
  */
-class DaffLinkSetComponent {
-    constructor() {
+class DaffLinkSetComponent extends _daffLinkSetBase {
+    constructor(elementRef, renderer) {
+        super(elementRef, renderer);
+        this.elementRef = elementRef;
+        this.renderer = renderer;
         /**
          * @docs-private
          */
@@ -2706,6 +2807,11 @@ DaffLinkSetComponent.decorators = [
                 styles: [".daff-link-set{display:block;margin:0;padding:0}.daff-link-set__heading{font-weight:700;display:block;font-size:1rem;line-height:1em;margin-bottom:15px;text-transform:uppercase}.daff-link-set__subheading{display:block;font-size:1rem;line-height:1.5em}.daff-link-set__item{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:currentColor;display:block;font-size:1em;line-height:1.5em;text-decoration:none;transition:color .15s ease}.daff-link-set__item:hover{text-decoration:underline}.daff-link-set__item[disabled]{cursor:not-allowed}.daff-link-set .daff-link-set{margin-left:10px}"]
             },] }
 ];
+/** @nocollapse */
+DaffLinkSetComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
 DaffLinkSetComponent.propDecorators = {
     class: [{ type: HostBinding, args: ['class.daff-link-set',] }]
 };
@@ -2868,9 +2974,21 @@ var DaffListTypeEnum;
     DaffListTypeEnum["Default"] = "daff-list";
     DaffListTypeEnum["Nav"] = "daff-nav-list";
 })(DaffListTypeEnum || (DaffListTypeEnum = {}));
-class DaffListComponent {
-    constructor(elementRef) {
+/**
+ * An _elementRef and an instance of renderer2 are needed for the list mixins
+ */
+class DaffListBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffListBase = daffArticleEncapsulatedMixin((DaffListBase));
+class DaffListComponent extends _daffListBase {
+    constructor(elementRef, renderer) {
+        super(elementRef, renderer);
         this.elementRef = elementRef;
+        this.renderer = renderer;
     }
     /**
      * @docs-private
@@ -2936,7 +3054,8 @@ DaffListComponent.decorators = [
 ];
 /** @nocollapse */
 DaffListComponent.ctorParameters = () => [
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: Renderer2 }
 ];
 DaffListComponent.propDecorators = {
     mode: [{ type: Input }],
@@ -3055,6 +3174,7 @@ DaffModalActionsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'daff-modal-actions',
                 template: '<ng-content></ng-content>',
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:block;padding-top:24px}"]
             },] }
 ];
@@ -3198,6 +3318,20 @@ DaffModalService.ctorParameters = () => [
     { type: Overlay }
 ];
 
+/**
+ * A mixin for giving a component the ability to manage a DaffContainerComponent's layout.
+ * It passes predetermined layout styles down to the container. In order for a component to
+ * do this, it must implement this mixin.
+ */
+function daffManageContainerLayoutMixin(Base) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+            this._renderer.addClass(this._elementRef.nativeElement, `daff-manage-container-layout`);
+        }
+    };
+}
+
 /**
  * An _elementRef is needed for the Colorable mixin
  */
@@ -3207,7 +3341,7 @@ class DaffNavbarBase {
         this._renderer = _renderer;
     }
 }
-const _daffNavbarBase = daffColorMixin(DaffNavbarBase);
+const _daffNavbarBase = daffManageContainerLayoutMixin(daffColorMixin(DaffNavbarBase));
 /**
  * @inheritdoc
  */
@@ -3216,7 +3350,7 @@ class DaffNavbarComponent extends _daffNavbarBase {
         super(elementRef, renderer);
         this.elementRef = elementRef;
         this.renderer = renderer;
-        this.shadowed = false;
+        this.raised = false;
         /**
          * @docs-private
          */
@@ -3225,20 +3359,21 @@ class DaffNavbarComponent extends _daffNavbarBase {
     /**
      * @docs-private
      */
-    get shadowClass() {
-        return this.shadowed;
+    get raisedClass() {
+        return this.raised;
     }
     ;
 }
 DaffNavbarComponent.decorators = [
     { type: Component, args: [{
-                selector: 'daff-navbar',
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: 'nav[daff-navbar]',
                 template: '<ng-content></ng-content>',
                 //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                 inputs: ['color'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{align-items:center;display:flex;height:70px;padding:0 15px;width:100%}"]
+                styles: [":host{display:flex;align-items:center;height:64px;width:100%;padding:0 16px}"]
             },] }
 ];
 /** @nocollapse */
@@ -3247,8 +3382,8 @@ DaffNavbarComponent.ctorParameters = () => [
     { type: Renderer2 }
 ];
 DaffNavbarComponent.propDecorators = {
-    shadowed: [{ type: Input }],
-    shadowClass: [{ type: HostBinding, args: ['class.daff-navbar--shadowed',] }],
+    raised: [{ type: Input }],
+    raisedClass: [{ type: HostBinding, args: ['class.daff-navbar--raised',] }],
     hostClass: [{ type: HostBinding, args: ['class.daff-navbar',] }]
 };
 
@@ -3443,6 +3578,11 @@ DaffPaginatorModule.decorators = [
             },] }
 ];
 
+/**
+ * @deprecated See {@link DaffQuantityFieldComponent}
+ */
+// ChangeDetection is ignored because this component is deprecated and will be removed
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 class DaffQtyDropdownComponent {
     constructor(renderer) {
         this.renderer = renderer;
@@ -3641,6 +3781,7 @@ DaffSidebarComponent.decorators = [
                 selector: 'daff-sidebar',
                 template: '<ng-content></ng-content>',
                 encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:block}.daff-sidebar{display:block;height:100%}"]
             },] }
 ];
@@ -3787,6 +3928,40 @@ DaffSidebarModule.decorators = [
             },] }
 ];
 
+class DaffHeroBodyDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+}
+DaffHeroBodyDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[daffHeroBody]',
+            },] }
+];
+DaffHeroBodyDirective.propDecorators = {
+    class: [{ type: HostBinding, args: ['class.daff-hero__body',] }]
+};
+
+class DaffHeroIconDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+}
+DaffHeroIconDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[daffHeroIcon]',
+            },] }
+];
+DaffHeroIconDirective.propDecorators = {
+    class: [{ type: HostBinding, args: ['class.daff-hero__icon',] }]
+};
+
 class DaffHeroSubtitleDirective {
     constructor() {
         /**
@@ -3838,6 +4013,32 @@ DaffHeroTitleDirective.propDecorators = {
     class: [{ type: HostBinding, args: ['class.daff-hero__title',] }]
 };
 
+function daffCompactableMixin(Base, defaultCompact = false) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+            this.compact = defaultCompact;
+        }
+        get compact() {
+            return this._compact;
+        }
+        set compact(value) {
+            // Handles the default compact
+            const incomingCompact = value || defaultCompact;
+            if (incomingCompact === this._compact) { // Only run the dom-render if a change occurs
+                return;
+            }
+            if (incomingCompact) {
+                this._renderer.addClass(this._elementRef.nativeElement, `daff-compact`);
+            }
+            else {
+                this._renderer.removeClass(this._elementRef.nativeElement, `daff-compact`);
+            }
+            this._compact = incomingCompact;
+        }
+    };
+}
+
 function daffTextAlignmentMixin(Base, defaultTextAlignment) {
     class DaffTextAlignableMixin extends Base {
         constructor(...args) {
@@ -3880,10 +4081,10 @@ var DaffHeroLayoutEnum;
 var DaffHeroSizeEnum;
 (function (DaffHeroSizeEnum) {
     DaffHeroSizeEnum["Compact"] = "compact";
-    DaffHeroSizeEnum["Small"] = "small"; // Small will be deprecated in v1.0.0
+    DaffHeroSizeEnum["Small"] = "small";
 })(DaffHeroSizeEnum || (DaffHeroSizeEnum = {}));
 /**
- * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
+ * An _elementRef and an instance of renderer2 are needed for the hero mixins
  */
 class DaffHeroBase {
     constructor(_elementRef, _renderer) {
@@ -3891,7 +4092,7 @@ class DaffHeroBase {
         this._renderer = _renderer;
     }
 }
-const _daffHeroBase = daffColorMixin(daffTextAlignmentMixin(DaffHeroBase));
+const _daffHeroBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left')))));
 /**
  * @inheritdoc
  */
@@ -3906,28 +4107,16 @@ class DaffHeroComponent extends _daffHeroBase {
         this.class = true;
     }
     /**
-     * Will be deprecated in v1.0.0
-     *
-     * @docs-private
+     * @deprecated See {@link DaffTextAlignable}
      */
     get centered() {
         return this.layout === DaffHeroLayoutEnum.Centered;
     }
     /**
-     * Will be deprecated in v1.0.0
-     *
-     * @docs-private
-     */
-    get small() {
-        return this.size === DaffHeroSizeEnum.Small;
-    }
-    /**
-     * Will be deprecated in v1.0.0
-     *
-     * @docs-private
+     * @deprecated See {@link DaffCompactable}
      */
-    get compact() {
-        return this.size === DaffHeroSizeEnum.Compact;
+    get compactClass() {
+        return this.size === DaffHeroSizeEnum.Compact || this.compact === true || this.size === DaffHeroSizeEnum.Small;
     }
 }
 DaffHeroComponent.decorators = [
@@ -3937,9 +4126,9 @@ DaffHeroComponent.decorators = [
                 encapsulation: ViewEncapsulation.None,
                 //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                inputs: ['color', 'textAlignment'],
+                inputs: ['color', 'compact', 'textAlignment'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".daff-hero{display:block;padding:64px 24px}@media (min-width:480px){.daff-hero{padding:96px 48px}}.daff-hero__tagline{font-weight:700;text-transform:uppercase;font-size:.75rem;line-height:1rem;letter-spacing:1px;margin:0 0 8px;padding:0}.daff-hero__title{font-weight:700;font-size:2.5rem;line-height:2.75rem;margin:0;max-width:1040px;overflow-wrap:break-word;width:100%}@media (min-width:768px){.daff-hero__title{font-size:3.5rem;line-height:4rem}}.daff-hero__subtitle{font-size:1.5rem;line-height:2rem;font-weight:400;margin:16px 0 0;max-width:672px;width:100%}.daff-hero--centered .daff-hero__title{margin:0 auto;text-align:center}.daff-hero--centered .daff-hero__subtitle{margin:24px auto 0;text-align:center}.daff-hero--compact,.daff-hero--small{padding:50px 25px}@media (min-width:480px){.daff-hero--compact,.daff-hero--small{padding:50px}}.daff-hero.daff-left .daff-hero__subtitle,.daff-hero.daff-left .daff-hero__tagline,.daff-hero.daff-left .daff-hero__title{text-align:left}.daff-hero.daff-center .daff-hero__subtitle,.daff-hero.daff-center .daff-hero__tagline,.daff-hero.daff-center .daff-hero__title{margin-left:auto;margin-right:auto;text-align:center}.daff-hero.daff-right .daff-hero__subtitle,.daff-hero.daff-right .daff-hero__tagline,.daff-hero.daff-right .daff-hero__title{margin-left:auto;text-align:right}"]
+                styles: [".daff-hero{display:block;padding:64px 24px}@media (min-width:480px){.daff-hero{padding:96px 48px}}.daff-hero__icon{margin:0 0 16px}.daff-hero__tagline{text-transform:uppercase;font-size:.875rem;font-weight:600;letter-spacing:.03125rem;line-height:1rem;margin:0 0 8px;padding:0}.daff-hero__title{font-weight:700;font-size:2.5rem;line-height:2.5rem;margin:0;max-width:1040px;width:100%}@media (min-width:768px){.daff-hero__title{font-size:4.5rem;line-height:4.5rem}}.daff-hero__subtitle{font-size:1.25rem;font-weight:400;line-height:1.75rem;margin:16px 0 0;max-width:672px;width:100%}@media (min-width:768px){.daff-hero__subtitle{font-size:1.5rem;font-weight:400;line-height:2rem}}.daff-hero__subtitle p:first-of-type{margin-top:0}.daff-hero__subtitle p:last-of-type{margin-bottom:0}.daff-hero__body:not(:last-child){margin-bottom:48px}.daff-hero__body:not(:first-child){margin-top:48px}.daff-hero--centered .daff-hero__title{margin:0 auto;text-align:center}.daff-hero--centered .daff-hero__subtitle{margin:24px auto 0;text-align:center}.daff-hero--compact,.daff-hero--small{padding:50px 25px}@media (min-width:480px){.daff-hero--compact,.daff-hero--small{padding:50px}}.daff-hero.daff-compact{padding:48px 24px}@media (min-width:480px){.daff-hero.daff-compact{padding:48px}}.daff-hero.daff-left .daff-hero__icon,.daff-hero.daff-left .daff-hero__subtitle,.daff-hero.daff-left .daff-hero__tagline,.daff-hero.daff-left .daff-hero__title{text-align:left}.daff-hero.daff-center .daff-hero__icon,.daff-hero.daff-center .daff-hero__subtitle,.daff-hero.daff-center .daff-hero__tagline,.daff-hero.daff-center .daff-hero__title{margin-left:auto;margin-right:auto;text-align:center}.daff-hero.daff-right .daff-hero__icon,.daff-hero.daff-right .daff-hero__subtitle,.daff-hero.daff-right .daff-hero__tagline,.daff-hero.daff-right .daff-hero__title{margin-left:auto;text-align:right}"]
             },] }
 ];
 /** @nocollapse */
@@ -3952,8 +4141,7 @@ DaffHeroComponent.propDecorators = {
     size: [{ type: Input }],
     class: [{ type: HostBinding, args: ['class.daff-hero',] }],
     centered: [{ type: HostBinding, args: ['class.daff-hero--centered',] }],
-    small: [{ type: HostBinding, args: ['class.daff-hero--small',] }],
-    compact: [{ type: HostBinding, args: ['class.daff-hero--compact',] }]
+    compactClass: [{ type: HostBinding, args: ['class.daff-hero--compact',] }]
 };
 
 class DaffHeroModule {
@@ -3965,19 +4153,57 @@ DaffHeroModule.decorators = [
                 ],
                 declarations: [
                     DaffHeroComponent,
+                    DaffHeroIconDirective,
                     DaffHeroTaglineDirective,
                     DaffHeroTitleDirective,
                     DaffHeroSubtitleDirective,
+                    DaffHeroBodyDirective,
                 ],
                 exports: [
                     DaffHeroComponent,
+                    DaffHeroIconDirective,
                     DaffHeroTaglineDirective,
                     DaffHeroTitleDirective,
                     DaffHeroSubtitleDirective,
+                    DaffHeroBodyDirective,
                 ],
             },] }
 ];
 
+class DaffCalloutBodyDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+}
+DaffCalloutBodyDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[daffCalloutBody]',
+            },] }
+];
+DaffCalloutBodyDirective.propDecorators = {
+    class: [{ type: HostBinding, args: ['class.daff-callout__body',] }]
+};
+
+class DaffCalloutIconDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+}
+DaffCalloutIconDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[daffCalloutIcon]',
+            },] }
+];
+DaffCalloutIconDirective.propDecorators = {
+    class: [{ type: HostBinding, args: ['class.daff-callout__icon',] }]
+};
+
 class DaffCalloutSubtitleDirective {
     constructor() {
         /**
@@ -4046,7 +4272,7 @@ class DaffCalloutBase {
         this._renderer = _renderer;
     }
 }
-const _daffCalloutBase = daffColorMixin(daffTextAlignmentMixin(DaffCalloutBase));
+const _daffCalloutBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left')))));
 /**
  * @inheritdoc
  */
@@ -4061,19 +4287,15 @@ class DaffCalloutComponent extends _daffCalloutBase {
         this.class = true;
     }
     /**
-     * Will be deprecated in v1.0.0
-     *
-     * @docs-private
+     * @deprecated See {@link DaffTextAlignable}
      */
     get centered() {
         return this.layout === DaffCalloutLayoutEnum.Centered;
     }
     /**
-     * Will be deprecated in v1.0.0
-     *
-     * @docs-private
+     * @deprecated See {@link DaffCompactable}
      */
-    get compact() {
+    get compactClass() {
         return this.size === DaffCalloutSizeEnum.Compact;
     }
 }
@@ -4084,9 +4306,9 @@ DaffCalloutComponent.decorators = [
                 encapsulation: ViewEncapsulation.None,
                 //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                inputs: ['color', 'textAlignment'],
+                inputs: ['color', 'compact', 'textAlignment'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".daff-callout{display:block;padding:64px 24px}@media (min-width:480px){.daff-callout{padding:96px 48px}}@media (min-width:1024px){.daff-callout{padding:96px 0}}.daff-callout__tagline{font-weight:700;text-transform:uppercase;font-size:.75rem;line-height:1rem;letter-spacing:1px;margin:0 0 8px;padding:0}.daff-callout__title{font-weight:700;font-size:1.75rem;line-height:2rem;margin:0;max-width:1040px;padding:0;width:100%}@media (min-width:480px){.daff-callout__title{font-weight:700;font-size:2rem;line-height:2.25rem}}@media (min-width:480px) and (min-width:768px){.daff-callout__title{font-size:3rem;line-height:3.5rem}}.daff-callout__subtitle{font-size:1.25rem;margin:16px 0 0;max-width:600px;padding:0;width:100%}.daff-callout--centered .daff-callout__title{margin:0 auto;text-align:center}.daff-callout--centered .daff-callout__subtitle{margin:10px auto 0;text-align:center}@media (min-width:480px){.daff-callout--centered .daff-callout__subtitle{margin:25px auto 0}}.daff-callout--compact{padding:25px}@media (min-width:480px){.daff-callout--compact{padding:25px 50px}}.daff-callout.daff-left .daff-callout__subtitle,.daff-callout.daff-left .daff-callout__tagline,.daff-callout.daff-left .daff-callout__title{text-align:left}.daff-callout.daff-center .daff-callout__subtitle,.daff-callout.daff-center .daff-callout__tagline,.daff-callout.daff-center .daff-callout__title{margin-left:auto;margin-right:auto;text-align:center}.daff-callout.daff-right .daff-callout__subtitle,.daff-callout.daff-right .daff-callout__tagline,.daff-callout.daff-right .daff-callout__title{margin-left:auto;text-align:right}"]
+                styles: [".daff-callout{display:block;padding:64px 24px}@media (min-width:480px){.daff-callout{padding:96px 48px}}.daff-callout__icon{margin:0 0 16px}.daff-callout__tagline{text-transform:uppercase;font-size:.875rem;font-weight:600;letter-spacing:.03125rem;line-height:1rem;margin:0 0 8px;padding:0}.daff-callout__title{font-weight:700;font-size:1.75rem;line-height:2rem;margin:0;max-width:1040px;overflow-wrap:break-word;padding:0;width:100%}@media (min-width:480px){.daff-callout__title{font-weight:700;font-size:2rem;line-height:2.25rem}}@media (min-width:480px) and (min-width:768px){.daff-callout__title{font-size:3rem;line-height:3.5rem}}.daff-callout__subtitle{font-size:1.25rem;margin:16px 0 0;max-width:592px;padding:0;width:100%}.daff-callout__body:not(:last-child){margin-bottom:48px}.daff-callout__body:not(:first-child){margin-top:48px}.daff-callout__body p:first-of-type{margin-top:0}.daff-callout__body p:last-of-type{margin-bottom:0}.daff-callout--centered .daff-callout__title{margin:0 auto;text-align:center}.daff-callout--centered .daff-callout__subtitle{margin:10px auto 0;text-align:center}@media (min-width:480px){.daff-callout--centered .daff-callout__subtitle{margin:25px auto 0}}.daff-callout--compact{padding:25px}@media (min-width:480px){.daff-callout--compact{padding:25px 50px}}.daff-callout.daff-compact{padding:48px 24px}@media (min-width:480px){.daff-callout.daff-compact{padding:48px}}.daff-callout.daff-left .daff-callout__icon,.daff-callout.daff-left .daff-callout__subtitle,.daff-callout.daff-left .daff-callout__tagline,.daff-callout.daff-left .daff-callout__title{text-align:left}.daff-callout.daff-center .daff-callout__icon,.daff-callout.daff-center .daff-callout__subtitle,.daff-callout.daff-center .daff-callout__tagline,.daff-callout.daff-center .daff-callout__title{margin-left:auto;margin-right:auto;text-align:center}.daff-callout.daff-right .daff-callout__icon,.daff-callout.daff-right .daff-callout__subtitle,.daff-callout.daff-right .daff-callout__tagline,.daff-callout.daff-right .daff-callout__title{margin-left:auto;text-align:right}"]
             },] }
 ];
 /** @nocollapse */
@@ -4099,7 +4321,7 @@ DaffCalloutComponent.propDecorators = {
     size: [{ type: Input }],
     class: [{ type: HostBinding, args: ['class.daff-callout',] }],
     centered: [{ type: HostBinding, args: ['class.daff-callout--centered',] }],
-    compact: [{ type: HostBinding, args: ['class.daff-callout--compact',] }]
+    compactClass: [{ type: HostBinding, args: ['class.daff-callout--compact',] }]
 };
 
 class DaffCalloutModule {
@@ -4111,15 +4333,19 @@ DaffCalloutModule.decorators = [
                 ],
                 declarations: [
                     DaffCalloutComponent,
+                    DaffCalloutIconDirective,
                     DaffCalloutTitleDirective,
                     DaffCalloutSubtitleDirective,
                     DaffCalloutTaglineDirective,
+                    DaffCalloutBodyDirective,
                 ],
                 exports: [
                     DaffCalloutComponent,
+                    DaffCalloutIconDirective,
                     DaffCalloutSubtitleDirective,
                     DaffCalloutTitleDirective,
                     DaffCalloutTaglineDirective,
+                    DaffCalloutBodyDirective,
                 ],
             },] }
 ];
@@ -4197,6 +4423,9 @@ var DaffFeatureModeEnum;
     DaffFeatureModeEnum["Compact"] = "compact";
     DaffFeatureModeEnum["Normal"] = "normal";
 })(DaffFeatureModeEnum || (DaffFeatureModeEnum = {}));
+/**
+ * @deprecated See {@link DaffCardComponent}
+ */
 class DaffFeatureComponent {
     constructor() {
         /**
@@ -4275,6 +4504,40 @@ DaffCardActionsDirective.propDecorators = {
     class: [{ type: HostBinding, args: ['class.daff-card__actions',] }]
 };
 
+class DaffCardContentDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+}
+DaffCardContentDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[daffCardContent]',
+            },] }
+];
+DaffCardContentDirective.propDecorators = {
+    class: [{ type: HostBinding, args: ['class.daff-card__content',] }]
+};
+
+class DaffCardIconDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+}
+DaffCardIconDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[daffCardIcon]',
+            },] }
+];
+DaffCardIconDirective.propDecorators = {
+    class: [{ type: HostBinding, args: ['class.daff-card__icon',] }]
+};
+
 class DaffCardImageDirective {
     constructor() {
         /**
@@ -4326,6 +4589,16 @@ DaffCardTitleDirective.propDecorators = {
     class: [{ type: HostBinding, args: ['class.daff-card__title',] }]
 };
 
+var DaffCardTypeEnum;
+(function (DaffCardTypeEnum) {
+    DaffCardTypeEnum["Raised"] = "daff-raised-card";
+    DaffCardTypeEnum["Stroked"] = "daff-stroked-card";
+})(DaffCardTypeEnum || (DaffCardTypeEnum = {}));
+var DaffCardOrientationEnum;
+(function (DaffCardOrientationEnum) {
+    DaffCardOrientationEnum["Vertical"] = "vertical";
+    DaffCardOrientationEnum["Horizontal"] = "horizontal";
+})(DaffCardOrientationEnum || (DaffCardOrientationEnum = {}));
 /**
  * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
  */
@@ -4335,7 +4608,7 @@ class DaffCardBase {
         this._renderer = _renderer;
     }
 }
-const _daffCardBase = daffColorMixin(DaffCardBase);
+const _daffCardBase = daffArticleEncapsulatedMixin(daffColorMixin(DaffCardBase));
 /**
  * @inheritdoc
  */
@@ -4344,28 +4617,79 @@ class DaffCardComponent extends _daffCardBase {
         super(elementRef, renderer);
         this.elementRef = elementRef;
         this.renderer = renderer;
-        this.raised = false;
-        /**
-         * @docs-private
-         */
+        this._orientation = DaffCardOrientationEnum.Vertical;
         this.class = true;
+        this.cardType = this.initCardType();
     }
-    get raisedClass() {
-        return this.raised;
+    get orientation() {
+        return this._orientation;
+    }
+    set orientation(value) {
+        if (value === null || value === undefined || value === '') {
+            this._orientation = DaffCardOrientationEnum.Vertical;
+        }
+        else {
+            this._orientation = value;
+        }
+    }
+    ;
+    initCardType() {
+        const values = Object.keys(DaffCardTypeEnum).map((k) => DaffCardTypeEnum[k]);
+        if (values.indexOf(this._getHostElement().localName) >= 0) {
+            return this._getHostElement().localName;
+        }
+        for (const attr of values) {
+            if (this._hasHostAttributes(attr)) {
+                return attr;
+            }
+        }
+        return null;
+    }
+    /**
+     * @docs-private
+     */
+    ngOnInit() {
+        if (this.cardType) {
+            this.elementRef.nativeElement.classList.add(this.cardType);
+        }
+    }
+    /**
+     * @docs-private
+     */
+    get verticalClass() {
+        return this.orientation === DaffCardOrientationEnum.Vertical;
+    }
+    /**
+     * @docs-private
+     */
+    get horizontalClass() {
+        return this.orientation === DaffCardOrientationEnum.Horizontal;
+    }
+    _getHostElement() {
+        return this.elementRef.nativeElement;
+    }
+    /**
+     * Gets whether the button has one of the given attributes.
+     * */
+    _hasHostAttributes(...attributes) {
+        return attributes.some(attribute => this._getHostElement().hasAttribute(attribute));
     }
 }
 DaffCardComponent.decorators = [
     { type: Component, args: [{
-                selector: '' +
-                    'daff-card' + ',' +
-                    'a[daff-card]',
-                template: "<ng-content select=\"[daffCardImage]\"></ng-content>\n<div class=\"daff-card__content\">\n\t<ng-content select=\"[daffCardTagline]\"></ng-content>\n\t<ng-content select=\"[daffCardTitle]\"></ng-content>\n\t<ng-content></ng-content>\n</div>\n<ng-content select=\"[daffCardActions]\"></ng-content>",
+                selector: 'daff-card' + ',' +
+                    'daff-raised-card' + ',' +
+                    'daff-stroked-card' + ',' +
+                    'a[daff-card]' + ',' +
+                    'a[daff-raised-card]' + ',' +
+                    'a[daff-stroked-card]',
+                template: "<ng-content select=\"[daffCardImage]\"></ng-content>\n<div class=\"daff-card__wrapper\">\n\t<div class=\"daff-card__body\">\n\t\t<ng-content select=\"[daffCardIcon]\"></ng-content>\n\t\t<ng-content select=\"[daffCardTagline]\"></ng-content>\n\t\t<ng-content select=\"[daffCardTitle]\"></ng-content>\n\t\t<ng-content select=\"[daffCardContent]\"></ng-content>\n\t</div>\n\t<ng-content select=\"[daffCardActions]\"></ng-content>\n</div>",
                 encapsulation: ViewEncapsulation.None,
                 //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                 inputs: ['color'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".daff-card{display:flex;flex-direction:column;border-radius:8px}.daff-card__image{display:inline-block;width:100%}.daff-card__image,.daff-card__image img{border-top-left-radius:inherit;border-top-right-radius:inherit}.daff-card__tagline{font-weight:700;text-transform:uppercase;font-size:.75rem;line-height:1rem;letter-spacing:1px;margin:0 0 4px;padding:0}.daff-card__title{font-weight:700;font-size:1.5rem;line-height:2rem;margin-bottom:16px}.daff-card__content{padding:24px}.daff-card__content p{margin:0;padding:0}.daff-card__actions{padding:0 24px 24px}a.daff-card{text-decoration:none}"]
+                styles: [".daff-card{display:flex;border-radius:8px}.daff-card__image{display:inline-block;width:100%}.daff-card--vertical{flex-direction:column}.daff-card--vertical .daff-card__image,.daff-card--vertical .daff-card__image img{border-top-left-radius:calc(8px - 1px);border-top-right-radius:calc(8px - 1px)}.daff-card--horizontal{flex-wrap:wrap}@media (min-width:480px){.daff-card--horizontal{flex-direction:row;flex-wrap:nowrap}}.daff-card--horizontal .daff-card__image,.daff-card--horizontal .daff-card__image img{border-top-left-radius:calc(8px - 1px);border-bottom-left-radius:calc(8px - 1px)}.daff-card--horizontal .daff-card__image img{-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;height:100%!important;width:100%}.daff-card__icon{display:block;margin:0 0 .5rem}.daff-card__tagline{text-transform:uppercase;font-size:.875rem;font-weight:600;letter-spacing:.03125rem;line-height:1rem;padding:0;margin:0 0 .25rem}.daff-card__title{font-weight:700;font-size:1.375rem;line-height:1.5rem;margin:0 0 1rem}@media (min-width:480px){.daff-card__title{font-size:1.5rem;line-height:1.75rem}}.daff-card__body{padding:1.5rem}.daff-card__content p:first-of-type{margin-top:0}.daff-card__content p:last-of-type{margin-bottom:0}.daff-card__actions{padding:0 1.5rem 1.5rem}a.daff-card,a.daff-raised-card,a.daff-stroked-card{text-decoration:none;transition:background-color .3s,box-shadow .3s}"]
             },] }
 ];
 /** @nocollapse */
@@ -4374,9 +4698,10 @@ DaffCardComponent.ctorParameters = () => [
     { type: Renderer2 }
 ];
 DaffCardComponent.propDecorators = {
-    raised: [{ type: Input }],
+    orientation: [{ type: Input }],
     class: [{ type: HostBinding, args: ['class.daff-card',] }],
-    raisedClass: [{ type: HostBinding, args: ['class.daff-card--raised',] }]
+    verticalClass: [{ type: HostBinding, args: ['class.daff-card--vertical',] }],
+    horizontalClass: [{ type: HostBinding, args: ['class.daff-card--horizontal',] }]
 };
 
 class DaffCardModule {
@@ -4388,16 +4713,20 @@ DaffCardModule.decorators = [
                 ],
                 declarations: [
                     DaffCardComponent,
+                    DaffCardIconDirective,
+                    DaffCardImageDirective,
                     DaffCardTaglineDirective,
                     DaffCardTitleDirective,
-                    DaffCardImageDirective,
+                    DaffCardContentDirective,
                     DaffCardActionsDirective,
                 ],
                 exports: [
                     DaffCardComponent,
+                    DaffCardIconDirective,
+                    DaffCardImageDirective,
                     DaffCardTaglineDirective,
                     DaffCardTitleDirective,
-                    DaffCardImageDirective,
+                    DaffCardContentDirective,
                     DaffCardActionsDirective,
                 ],
             },] }
@@ -4443,5 +4772,5 @@ var DaffTextAlignmentEnum;
  * Generated bundle index. Do not edit.
  */
 
-export { DaffAccordionComponent, DaffAccordionItemComponent, DaffAccordionItemContentDirective, DaffAccordionItemTitleDirective, DaffAccordionModule, DaffArticleComponent, DaffArticleLeadDirective, DaffArticleMetaDirective, DaffArticleModule, DaffArticleTitleDirective, DaffBackdropComponent, DaffBackdropModule, DaffBreakpoints, DaffButtonComponent, DaffButtonModule, DaffButtonSetComponent, DaffButtonSetModule, DaffCalloutComponent, DaffCalloutLayoutEnum, DaffCalloutModule, DaffCalloutSizeEnum, DaffCalloutSubtitleDirective, DaffCalloutTaglineDirective, DaffCalloutTitleDirective, DaffCardActionsDirective, DaffCardComponent, DaffCardImageDirective, DaffCardModule, DaffCardTaglineDirective, DaffCardTitleDirective, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffContainerComponent, DaffContainerModule, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFeatureComponent, DaffFeatureIconDirective, DaffFeatureModeEnum, DaffFeatureModule, DaffFeatureSubheaderDirective, DaffFeatureSubtitleDirective, DaffFeatureTitleDirective, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffGalleryImageComponent, DaffHeroComponent, 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, DaffModalActionsComponent, DaffModalComponent, DaffModalContentComponent, DaffModalHeaderComponent, DaffModalModule, DaffModalService, DaffModalTitleDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffNavbarComponent, DaffNavbarModule, DaffPaginatorComponent, DaffPaginatorModule, DaffPrefixDirective, DaffPrefixSuffixModule, DaffProgressIndicatorComponent, DaffProgressIndicatorModule, DaffQtyDropdownComponent, DaffQtyDropdownModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSidebarComponent, DaffSidebarModule, DaffSidebarViewportComponent, DaffStatusEnum, DaffSuffixDirective, DaffTextAlignmentEnum, DaffThumbnailDirective, daffPrefixableMixin, daffSuffixableMixin, daffThumbnailCompatToken, daffProgressIndicatorAnimation as ɵa, DaffRadioRegistry as ɵb, daffAccordionAnimations as ɵc, DaffNavAccordionItemComponent as ɵd, daffBackdropAnimations as ɵe, DAFF_MEDIA_GALLERY_TOKEN as ɵf, DaffMediaGalleryRegistry as ɵg, DaffMediaRendererComponent as ɵi, daffFadeAnimations as ɵj, daffSidebarAnimations as ɵk };
+export { 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, DaffModalActionsComponent, DaffModalComponent, DaffModalContentComponent, DaffModalHeaderComponent, DaffModalModule, DaffModalService, DaffModalTitleDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffNavbarComponent, DaffNavbarModule, DaffPaginatorComponent, DaffPaginatorModule, DaffPrefixDirective, DaffPrefixSuffixModule, DaffProgressIndicatorComponent, DaffProgressIndicatorModule, DaffQtyDropdownComponent, DaffQtyDropdownModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSidebarComponent, DaffSidebarModule, DaffSidebarViewportComponent, DaffStatusEnum, DaffSuffixDirective, DaffTextAlignmentEnum, DaffThumbnailDirective, daffArticleEncapsulatedMixin, daffCompactableMixin, daffManageContainerLayoutMixin, daffPrefixableMixin, daffSuffixableMixin, daffThumbnailCompatToken, daffProgressIndicatorAnimation as ɵa, DaffRadioRegistry as ɵb, daffAccordionAnimations as ɵc, DaffNavAccordionItemComponent as ɵd, daffBackdropAnimations as ɵe, DAFF_MEDIA_GALLERY_TOKEN as ɵf, DaffMediaGalleryRegistry as ɵg, DaffMediaRendererComponent as ɵi, daffFadeAnimations as ɵj, daffSidebarAnimations as ɵk };
 //# sourceMappingURL=daffodil-design.js.map