@daffodil/design 0.39.7 → 0.39.11

package/bundles/daffodil-design.umd.js

@@ -322,6 +322,25 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
+    /**
+     * A mixin for giving a component the ability to prevent article styles from cascading down.
+     */
+    function daffArticleEncapsulatedMixin(Base) {
+        return /** @class */ (function (_super) {
+            __extends(class_1, _super);
+            function class_1() {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                var _this = _super.apply(this, __spread(args)) || this;
+                _this._renderer.addClass(_this._elementRef.nativeElement, "daff-ae");
+                return _this;
+            }
+            return class_1;
+        }(Base));
+    }
+
     var DaffPaletteEnum;
     (function (DaffPaletteEnum) {
         DaffPaletteEnum["PRIMARY"] = "primary";
@@ -610,7 +629,7 @@
         }
         return DaffButtonBase;
     }());
-    var _daffButtonBase = daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin(daffSizeMixin(DaffButtonBase, 'md')))));
+    var _daffButtonBase = daffArticleEncapsulatedMixin(daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin(daffSizeMixin(DaffButtonBase, 'md'))))));
     var DaffButtonTypeEnum;
     (function (DaffButtonTypeEnum) {
         DaffButtonTypeEnum["Default"] = "daff-button";
@@ -849,6 +868,8 @@
 
     var 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
     var DaffFormFieldComponent = /** @class */ (function () {
         function DaffFormFieldComponent() {
             /**
@@ -972,40 +993,7 @@
 
     var DAFF_MEDIA_GALLERY_TOKEN = new i0.InjectionToken('DAFF_MEDIA_GALLERY_TOKEN');
 
-    var uniqueGalleryId = 0;
-    var DaffMediaGalleryComponent = /** @class */ (function () {
-        function DaffMediaGalleryComponent() {
-            /**
-             * Adds a class for styling the media gallery
-             */
-            this.class = true;
-            /**
-             * The name of the gallery
-             */
-            this.name = "" + uniqueGalleryId;
-            uniqueGalleryId++;
-        }
-        return DaffMediaGalleryComponent;
-    }());
-    DaffMediaGalleryComponent.decorators = [
-        { type: i0.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: i0.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 = function () { return []; };
-    DaffMediaGalleryComponent.propDecorators = {
-        class: [{ type: i0.HostBinding, args: ['class.daff-media-gallery',] }],
-        name: [{ type: i0.Input }]
-    };
-
+    var isGallery = function (element) { return !('gallery' in element); };
     var DaffMediaGalleryRegistry = /** @class */ (function () {
         function DaffMediaGalleryRegistry() {
             this.galleries = {};
@@ -1017,15 +1005,17 @@
         DaffMediaGalleryRegistry.prototype.add = function (gallery, thumbnail) {
             if (this.galleries[gallery.name]) {
                 var newGallery = this.galleries[gallery.name].getValue();
-                newGallery = Object.assign(Object.assign({}, newGallery), { thumbnails: __spread(newGallery.thumbnails.filter(function (t) { return t !== thumbnail; }), [
-                        thumbnail,
-                    ]) });
+                if (thumbnail) {
+                    newGallery = Object.assign(Object.assign({}, newGallery), { thumbnails: __spread(newGallery.thumbnails.filter(function (t) { return t !== thumbnail; }), [
+                            thumbnail,
+                        ]) });
+                }
                 this.galleries[gallery.name].next(newGallery);
             }
             else {
                 this.galleries[gallery.name] = new rxjs.BehaviorSubject({
                     gallery: gallery,
-                    thumbnails: [thumbnail],
+                    thumbnails: thumbnail ? [thumbnail] : [],
                 });
             }
             if (this.galleries[gallery.name].getValue().thumbnails.length === 1) {
@@ -1034,9 +1024,17 @@
         };
         /**
          * @description
-         * Removes a media element from the internal registry.
+         * Removes a thumbnail or gallery from the internal registry.
          */
-        DaffMediaGalleryRegistry.prototype.remove = function (thumbnail) {
+        DaffMediaGalleryRegistry.prototype.remove = function (element) {
+            if (isGallery(element)) {
+                this.removeGallery(element);
+            }
+            else {
+                this.removeThumbnail(element);
+            }
+        };
+        DaffMediaGalleryRegistry.prototype.removeThumbnail = function (thumbnail) {
             if (!this.galleries[thumbnail.gallery.name]) {
                 return;
             }
@@ -1047,6 +1045,9 @@
             }
             this.galleries[thumbnail.gallery.name].next(Object.assign(Object.assign({}, gallery), { thumbnails: __spread(gallery.thumbnails.slice(0, index), gallery.thumbnails.slice(index + 1)) }));
         };
+        DaffMediaGalleryRegistry.prototype.removeGallery = function (gallery) {
+            delete this.galleries[gallery.name];
+        };
         /**
          * @description
          * Selects a media element for a given gallery.
@@ -1071,6 +1072,67 @@
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
 
+    var uniqueGalleryId = 0;
+    /**
+     * An _elementRef and an instance of renderer2 are needed for the link set mixins
+     */
+    var DaffMediaGalleryBase = /** @class */ (function () {
+        function DaffMediaGalleryBase(_elementRef, _renderer) {
+            this._elementRef = _elementRef;
+            this._renderer = _renderer;
+        }
+        return DaffMediaGalleryBase;
+    }());
+    var _daffMediaGalleryBase = daffArticleEncapsulatedMixin((DaffMediaGalleryBase));
+    var DaffMediaGalleryComponent = /** @class */ (function (_super) {
+        __extends(DaffMediaGalleryComponent, _super);
+        function DaffMediaGalleryComponent(elementRef, renderer, registry) {
+            var _this = _super.call(this, elementRef, renderer) || this;
+            _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++;
+            return _this;
+        }
+        DaffMediaGalleryComponent.prototype.ngOnInit = function () {
+            this.registry.add(this);
+        };
+        DaffMediaGalleryComponent.prototype.ngOnDestroy = function () {
+            this.registry.remove(this);
+        };
+        return DaffMediaGalleryComponent;
+    }(_daffMediaGalleryBase));
+    DaffMediaGalleryComponent.decorators = [
+        { type: i0.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: i0.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 = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 },
+        { type: DaffMediaGalleryRegistry }
+    ]; };
+    DaffMediaGalleryComponent.propDecorators = {
+        class: [{ type: i0.HostBinding, args: ['class.daff-media-gallery',] }],
+        name: [{ type: i0.Input }]
+    };
+
     /**
      * Dynamically renders the selected `DaffThumbnailDirective` in a `daff-media-gallery` any time the selected thumbnail
      * changes.
@@ -1188,7 +1250,7 @@
         /**
          * Adds a click event to trigger selection of the media element.
          *
-         * @param $event
+         * @param event: MouseEvent
          */
         DaffThumbnailDirective.prototype.onClick = function ($event) {
             this.registry.select(this);
@@ -1359,7 +1421,7 @@
     DaffImageComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
@@ -1440,6 +1502,7 @@
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'input[daff-input]',
                     template: '<ng-content></ng-content>',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         // eslint-disable-next-line @typescript-eslint/no-use-before-define
                         { provide: DaffFormFieldControl, useExisting: DaffInputComponent },
@@ -1515,6 +1578,7 @@
                     selector: 'select[daff-native-select]',
                     template: '<ng-content></ng-content>',
                     encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         // eslint-disable-next-line @typescript-eslint/no-use-before-define
                         { provide: DaffFormFieldControl, useExisting: DaffNativeSelectComponent },
@@ -2233,7 +2297,7 @@
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                     inputs: ['size'],
                     changeDetection: i0.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 */
@@ -2876,6 +2940,7 @@
                     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: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     animations: [
                         daffAccordionAnimations.openAccordion,
                     ],
@@ -2887,18 +2952,40 @@
         initiallyActive: [{ type: i0.Input }]
     };
 
-    var DaffAccordionComponent = /** @class */ (function () {
-        function DaffAccordionComponent() {
+    /**
+     * An _elementRef and an instance of renderer2 are needed for the link set mixins
+     */
+    var DaffAccordionBase = /** @class */ (function () {
+        function DaffAccordionBase(_elementRef, _renderer) {
+            this._elementRef = _elementRef;
+            this._renderer = _renderer;
         }
-        return DaffAccordionComponent;
+        return DaffAccordionBase;
     }());
+    var _daffAccordionBase = daffArticleEncapsulatedMixin((DaffAccordionBase));
+    var DaffAccordionComponent = /** @class */ (function (_super) {
+        __extends(DaffAccordionComponent, _super);
+        function DaffAccordionComponent(elementRef, renderer) {
+            var _this = _super.call(this, elementRef, renderer) || this;
+            _this.elementRef = elementRef;
+            _this.renderer = renderer;
+            return _this;
+        }
+        return DaffAccordionComponent;
+    }(_daffAccordionBase));
     DaffAccordionComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'daff-accordion',
                     template: "<ng-content></ng-content>",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:block;width:100%}"]
                 },] }
     ];
+    /** @nocollapse */
+    DaffAccordionComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 }
+    ]; };
 
     var DaffNavAccordionItemComponent = /** @class */ (function () {
         function DaffNavAccordionItemComponent(accordion, navAccordionItemParent) {
@@ -2954,6 +3041,7 @@
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
                     animations: [
                         daffAccordionAnimations.openAccordion,
                     ],
@@ -3021,7 +3109,8 @@
                     selector: 'daff-article',
                     template: '<ng-content></ng-content>',
                     encapsulation: i0.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: i0.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 = {
@@ -3204,6 +3293,7 @@
                     selector: 'daff-button-set',
                     template: '<ng-content></ng-content>',
                     encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.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}}"]
                 },] }
     ];
@@ -3227,6 +3317,9 @@
                 },] }
     ];
 
+    /**
+     * @deprecated See {@link DaffMediaGalleryComponent}
+     */
     var DaffImageGalleryComponent = /** @class */ (function () {
         function DaffImageGalleryComponent() {
         }
@@ -3237,10 +3330,14 @@
                     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: i0.ViewEncapsulation.None,
+                    changeDetection: i0.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}
+     */
     var DaffGalleryImageComponent = /** @class */ (function () {
         function DaffGalleryImageComponent() {
             this.class = true;
@@ -3250,7 +3347,8 @@
     DaffGalleryImageComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     DaffGalleryImageComponent.propDecorators = {
@@ -3272,6 +3370,7 @@
                     selector: 'daff-image-list',
                     template: '<ng-content></ng-content>',
                     encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.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}"]
                 },] }
     ];
@@ -3320,18 +3419,34 @@
                 },] }
     ];
 
+    /**
+     * An _elementRef and an instance of renderer2 are needed for the link set mixins
+     */
+    var DaffLinkSetBase = /** @class */ (function () {
+        function DaffLinkSetBase(_elementRef, _renderer) {
+            this._elementRef = _elementRef;
+            this._renderer = _renderer;
+        }
+        return DaffLinkSetBase;
+    }());
+    var _daffLinkSetBase = daffArticleEncapsulatedMixin((DaffLinkSetBase));
     /**
      * DaffLinkSetComponent is a component for displaying a two or more links.
      */
-    var DaffLinkSetComponent = /** @class */ (function () {
-        function DaffLinkSetComponent() {
+    var DaffLinkSetComponent = /** @class */ (function (_super) {
+        __extends(DaffLinkSetComponent, _super);
+        function DaffLinkSetComponent(elementRef, renderer) {
+            var _this = _super.call(this, elementRef, renderer) || this;
+            _this.elementRef = elementRef;
+            _this.renderer = renderer;
             /**
              * @docs-private
              */
-            this.class = true;
+            _this.class = true;
+            return _this;
         }
         return DaffLinkSetComponent;
-    }());
+    }(_daffLinkSetBase));
     DaffLinkSetComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'daff-link-set',
@@ -3341,6 +3456,11 @@
                     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 = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 }
+    ]; };
     DaffLinkSetComponent.propDecorators = {
         class: [{ type: i0.HostBinding, args: ['class.daff-link-set',] }]
     };
@@ -3514,9 +3634,24 @@
         DaffListTypeEnum["Default"] = "daff-list";
         DaffListTypeEnum["Nav"] = "daff-nav-list";
     })(DaffListTypeEnum || (DaffListTypeEnum = {}));
-    var DaffListComponent = /** @class */ (function () {
-        function DaffListComponent(elementRef) {
-            this.elementRef = elementRef;
+    /**
+     * An _elementRef and an instance of renderer2 are needed for the list mixins
+     */
+    var DaffListBase = /** @class */ (function () {
+        function DaffListBase(_elementRef, _renderer) {
+            this._elementRef = _elementRef;
+            this._renderer = _renderer;
+        }
+        return DaffListBase;
+    }());
+    var _daffListBase = daffArticleEncapsulatedMixin((DaffListBase));
+    var DaffListComponent = /** @class */ (function (_super) {
+        __extends(DaffListComponent, _super);
+        function DaffListComponent(elementRef, renderer) {
+            var _this = _super.call(this, elementRef, renderer) || this;
+            _this.elementRef = elementRef;
+            _this.renderer = renderer;
+            return _this;
         }
         Object.defineProperty(DaffListComponent.prototype, "list", {
             /**
@@ -3598,7 +3733,7 @@
             return this.elementRef.nativeElement;
         };
         return DaffListComponent;
-    }());
+    }(_daffListBase));
     DaffListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'daff-list' + ',' +
@@ -3611,7 +3746,8 @@
     ];
     /** @nocollapse */
     DaffListComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 }
     ]; };
     DaffListComponent.propDecorators = {
         mode: [{ type: i0.Input }],
@@ -3741,6 +3877,7 @@
         { type: i0.Component, args: [{
                     selector: 'daff-modal-actions',
                     template: '<ng-content></ng-content>',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:block;padding-top:24px}"]
                 },] }
     ];
@@ -3895,6 +4032,27 @@
         { type: i1.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 */ (function (_super) {
+            __extends(class_1, _super);
+            function class_1() {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                var _this = _super.apply(this, __spread(args)) || this;
+                _this._renderer.addClass(_this._elementRef.nativeElement, "daff-manage-container-layout");
+                return _this;
+            }
+            return class_1;
+        }(Base));
+    }
+
     /**
      * An _elementRef is needed for the Colorable mixin
      */
@@ -3905,7 +4063,7 @@
         }
         return DaffNavbarBase;
     }());
-    var _daffNavbarBase = daffColorMixin(DaffNavbarBase);
+    var _daffNavbarBase = daffManageContainerLayoutMixin(daffColorMixin(DaffNavbarBase));
     /**
      * @inheritdoc
      */
@@ -3915,19 +4073,19 @@
             var _this = _super.call(this, elementRef, renderer) || this;
             _this.elementRef = elementRef;
             _this.renderer = renderer;
-            _this.shadowed = false;
+            _this.raised = false;
             /**
              * @docs-private
              */
             _this.hostClass = true;
             return _this;
         }
-        Object.defineProperty(DaffNavbarComponent.prototype, "shadowClass", {
+        Object.defineProperty(DaffNavbarComponent.prototype, "raisedClass", {
             /**
              * @docs-private
              */
             get: function () {
-                return this.shadowed;
+                return this.raised;
             },
             enumerable: false,
             configurable: true
@@ -3937,13 +4095,14 @@
     }(_daffNavbarBase));
     DaffNavbarComponent.decorators = [
         { type: i0.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: i0.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 */
@@ -3952,8 +4111,8 @@
         { type: i0.Renderer2 }
     ]; };
     DaffNavbarComponent.propDecorators = {
-        shadowed: [{ type: i0.Input }],
-        shadowClass: [{ type: i0.HostBinding, args: ['class.daff-navbar--shadowed',] }],
+        raised: [{ type: i0.Input }],
+        raisedClass: [{ type: i0.HostBinding, args: ['class.daff-navbar--raised',] }],
         hostClass: [{ type: i0.HostBinding, args: ['class.daff-navbar',] }]
     };
 
@@ -4158,6 +4317,11 @@
                 },] }
     ];
 
+    /**
+     * @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
     var DaffQtyDropdownComponent = /** @class */ (function () {
         function DaffQtyDropdownComponent(renderer) {
             this.renderer = renderer;
@@ -4367,6 +4531,7 @@
                     selector: 'daff-sidebar',
                     template: '<ng-content></ng-content>',
                     encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:block}.daff-sidebar{display:block;height:100%}"]
                 },] }
     ];
@@ -4716,7 +4881,7 @@
         DaffHeroSizeEnum["Small"] = "small";
     })(exports.DaffHeroSizeEnum || (exports.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
      */
     var DaffHeroBase = /** @class */ (function () {
         function DaffHeroBase(_elementRef, _renderer) {
@@ -4725,7 +4890,7 @@
         }
         return DaffHeroBase;
     }());
-    var _daffHeroBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left')));
+    var _daffHeroBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left')))));
     /**
      * @inheritdoc
      */
@@ -4772,7 +4937,7 @@
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                     inputs: ['color', 'compact', 'textAlignment'],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    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{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__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}"]
+                    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 */
@@ -4923,7 +5088,7 @@
         }
         return DaffCalloutBase;
     }());
-    var _daffCalloutBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left')));
+    var _daffCalloutBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left')))));
     /**
      * @inheritdoc
      */
@@ -4970,7 +5135,7 @@
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                     inputs: ['color', 'compact', 'textAlignment'],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    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{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;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--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}"]
+                    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 */
@@ -5091,6 +5256,9 @@
         DaffFeatureModeEnum["Compact"] = "compact";
         DaffFeatureModeEnum["Normal"] = "normal";
     })(exports.DaffFeatureModeEnum || (exports.DaffFeatureModeEnum = {}));
+    /**
+     * @deprecated See {@link DaffCardComponent}
+     */
     var DaffFeatureComponent = /** @class */ (function () {
         function DaffFeatureComponent() {
             /**
@@ -5182,6 +5350,42 @@
         class: [{ type: i0.HostBinding, args: ['class.daff-card__actions',] }]
     };
 
+    var DaffCardContentDirective = /** @class */ (function () {
+        function DaffCardContentDirective() {
+            /**
+             * @docs-private
+             */
+            this.class = true;
+        }
+        return DaffCardContentDirective;
+    }());
+    DaffCardContentDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[daffCardContent]',
+                },] }
+    ];
+    DaffCardContentDirective.propDecorators = {
+        class: [{ type: i0.HostBinding, args: ['class.daff-card__content',] }]
+    };
+
+    var DaffCardIconDirective = /** @class */ (function () {
+        function DaffCardIconDirective() {
+            /**
+             * @docs-private
+             */
+            this.class = true;
+        }
+        return DaffCardIconDirective;
+    }());
+    DaffCardIconDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[daffCardIcon]',
+                },] }
+    ];
+    DaffCardIconDirective.propDecorators = {
+        class: [{ type: i0.HostBinding, args: ['class.daff-card__icon',] }]
+    };
+
     var DaffCardImageDirective = /** @class */ (function () {
         function DaffCardImageDirective() {
             /**
@@ -5236,6 +5440,15 @@
         class: [{ type: i0.HostBinding, args: ['class.daff-card__title',] }]
     };
 
+    var DaffCardTypeEnum;
+    (function (DaffCardTypeEnum) {
+        DaffCardTypeEnum["Raised"] = "daff-raised-card";
+        DaffCardTypeEnum["Stroked"] = "daff-stroked-card";
+    })(DaffCardTypeEnum || (DaffCardTypeEnum = {}));
+    (function (DaffCardOrientationEnum) {
+        DaffCardOrientationEnum["Vertical"] = "vertical";
+        DaffCardOrientationEnum["Horizontal"] = "horizontal";
+    })(exports.DaffCardOrientationEnum || (exports.DaffCardOrientationEnum = {}));
     /**
      * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
      */
@@ -5246,7 +5459,7 @@
         }
         return DaffCardBase;
     }());
-    var _daffCardBase = daffColorMixin(DaffCardBase);
+    var _daffCardBase = daffArticleEncapsulatedMixin(daffColorMixin(DaffCardBase));
     /**
      * @inheritdoc
      */
@@ -5256,34 +5469,109 @@
             var _this = _super.call(this, elementRef, renderer) || this;
             _this.elementRef = elementRef;
             _this.renderer = renderer;
-            _this.raised = false;
-            /**
-             * @docs-private
-             */
+            _this._orientation = exports.DaffCardOrientationEnum.Vertical;
             _this.class = true;
+            _this.cardType = _this.initCardType();
             return _this;
         }
-        Object.defineProperty(DaffCardComponent.prototype, "raisedClass", {
+        Object.defineProperty(DaffCardComponent.prototype, "orientation", {
             get: function () {
-                return this.raised;
+                return this._orientation;
+            },
+            set: function (value) {
+                if (value === null || value === undefined || value === '') {
+                    this._orientation = exports.DaffCardOrientationEnum.Vertical;
+                }
+                else {
+                    this._orientation = value;
+                }
             },
             enumerable: false,
             configurable: true
         });
+        ;
+        DaffCardComponent.prototype.initCardType = function () {
+            var e_1, _a;
+            var values = Object.keys(DaffCardTypeEnum).map(function (k) { return DaffCardTypeEnum[k]; });
+            if (values.indexOf(this._getHostElement().localName) >= 0) {
+                return this._getHostElement().localName;
+            }
+            try {
+                for (var values_1 = __values(values), values_1_1 = values_1.next(); !values_1_1.done; values_1_1 = values_1.next()) {
+                    var attr = values_1_1.value;
+                    if (this._hasHostAttributes(attr)) {
+                        return attr;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (values_1_1 && !values_1_1.done && (_a = values_1.return)) _a.call(values_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return null;
+        };
+        /**
+         * @docs-private
+         */
+        DaffCardComponent.prototype.ngOnInit = function () {
+            if (this.cardType) {
+                this.elementRef.nativeElement.classList.add(this.cardType);
+            }
+        };
+        Object.defineProperty(DaffCardComponent.prototype, "verticalClass", {
+            /**
+             * @docs-private
+             */
+            get: function () {
+                return this.orientation === exports.DaffCardOrientationEnum.Vertical;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DaffCardComponent.prototype, "horizontalClass", {
+            /**
+             * @docs-private
+             */
+            get: function () {
+                return this.orientation === exports.DaffCardOrientationEnum.Horizontal;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DaffCardComponent.prototype._getHostElement = function () {
+            return this.elementRef.nativeElement;
+        };
+        /**
+         * Gets whether the button has one of the given attributes.
+         * */
+        DaffCardComponent.prototype._hasHostAttributes = function () {
+            var _this = this;
+            var attributes = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                attributes[_i] = arguments[_i];
+            }
+            return attributes.some(function (attribute) { return _this._getHostElement().hasAttribute(attribute); });
+        };
         return DaffCardComponent;
     }(_daffCardBase));
     DaffCardComponent.decorators = [
         { type: i0.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: i0.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: i0.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 */
@@ -5292,9 +5580,10 @@
         { type: i0.Renderer2 }
     ]; };
     DaffCardComponent.propDecorators = {
-        raised: [{ type: i0.Input }],
+        orientation: [{ type: i0.Input }],
         class: [{ type: i0.HostBinding, args: ['class.daff-card',] }],
-        raisedClass: [{ type: i0.HostBinding, args: ['class.daff-card--raised',] }]
+        verticalClass: [{ type: i0.HostBinding, args: ['class.daff-card--vertical',] }],
+        horizontalClass: [{ type: i0.HostBinding, args: ['class.daff-card--horizontal',] }]
     };
 
     var DaffCardModule = /** @class */ (function () {
@@ -5309,16 +5598,20 @@
                     ],
                     declarations: [
                         DaffCardComponent,
+                        DaffCardIconDirective,
+                        DaffCardImageDirective,
                         DaffCardTaglineDirective,
                         DaffCardTitleDirective,
-                        DaffCardImageDirective,
+                        DaffCardContentDirective,
                         DaffCardActionsDirective,
                     ],
                     exports: [
                         DaffCardComponent,
+                        DaffCardIconDirective,
+                        DaffCardImageDirective,
                         DaffCardTaglineDirective,
                         DaffCardTitleDirective,
-                        DaffCardImageDirective,
+                        DaffCardContentDirective,
                         DaffCardActionsDirective,
                     ],
                 },] }
@@ -5380,6 +5673,8 @@
     exports.DaffCalloutTitleDirective = DaffCalloutTitleDirective;
     exports.DaffCardActionsDirective = DaffCardActionsDirective;
     exports.DaffCardComponent = DaffCardComponent;
+    exports.DaffCardContentDirective = DaffCardContentDirective;
+    exports.DaffCardIconDirective = DaffCardIconDirective;
     exports.DaffCardImageDirective = DaffCardImageDirective;
     exports.DaffCardModule = DaffCardModule;
     exports.DaffCardTaglineDirective = DaffCardTaglineDirective;
@@ -5463,7 +5758,9 @@
     exports.DaffSidebarViewportComponent = DaffSidebarViewportComponent;
     exports.DaffSuffixDirective = DaffSuffixDirective;
     exports.DaffThumbnailDirective = DaffThumbnailDirective;
+    exports.daffArticleEncapsulatedMixin = daffArticleEncapsulatedMixin;
     exports.daffCompactableMixin = daffCompactableMixin;
+    exports.daffManageContainerLayoutMixin = daffManageContainerLayoutMixin;
     exports.daffPrefixableMixin = daffPrefixableMixin;
     exports.daffSuffixableMixin = daffSuffixableMixin;
     exports.daffThumbnailCompatToken = daffThumbnailCompatToken;