@daffodil/design 0.39.8 → 0.39.12

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";
@@ -1054,18 +1073,34 @@
     ];
 
     var uniqueGalleryId = 0;
-    var DaffMediaGalleryComponent = /** @class */ (function () {
-        function DaffMediaGalleryComponent(registry) {
-            this.registry = registry;
+    /**
+     * 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;
+            _this.class = true;
             /**
              * The name of the gallery
              */
-            this.name = "" + uniqueGalleryId;
+            _this.name = "" + uniqueGalleryId;
             uniqueGalleryId++;
+            return _this;
         }
         DaffMediaGalleryComponent.prototype.ngOnInit = function () {
             this.registry.add(this);
@@ -1074,7 +1109,7 @@
             this.registry.remove(this);
         };
         return DaffMediaGalleryComponent;
-    }());
+    }(_daffMediaGalleryBase));
     DaffMediaGalleryComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'daff-media-gallery',
@@ -1089,6 +1124,8 @@
     ];
     /** @nocollapse */
     DaffMediaGalleryComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 },
         { type: DaffMediaGalleryRegistry }
     ]; };
     DaffMediaGalleryComponent.propDecorators = {
@@ -1384,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: [
                         {
@@ -2260,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 */
@@ -2915,11 +2952,27 @@
         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',
@@ -2928,6 +2981,11 @@
                     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) {
@@ -3052,7 +3110,7 @@
                     template: '<ng-content></ng-content>',
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".daff-article{display:block}.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:2rem}.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-size:2rem;line-height:2.5rem}.daff-article>h3{font-size:1.5rem;line-height:2rem}.daff-article>h4{font-size:1.25rem;line-height:1.5rem}.daff-article>h5{font-size:1.125rem;line-height:1.5rem}.daff-article>h6{font-size:1rem;line-height:1.5rem}.daff-article>p{margin:0 0 1rem}.daff-article>strong{font-weight:700}.daff-article a{font-weight:500}.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:8px 16px;vertical-align:top;box-sizing:border-box}"]
+                    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 = {
@@ -3361,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',
@@ -3382,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',] }]
     };
@@ -3555,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", {
             /**
@@ -3639,7 +3733,7 @@
             return this.elementRef.nativeElement;
         };
         return DaffListComponent;
-    }());
+    }(_daffListBase));
     DaffListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'daff-list' + ',' +
@@ -3652,7 +3746,8 @@
     ];
     /** @nocollapse */
     DaffListComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 }
     ]; };
     DaffListComponent.propDecorators = {
         mode: [{ type: i0.Input }],
@@ -3937,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
      */
@@ -3947,7 +4063,7 @@
         }
         return DaffNavbarBase;
     }());
-    var _daffNavbarBase = daffColorMixin(DaffNavbarBase);
+    var _daffNavbarBase = daffManageContainerLayoutMixin(daffColorMixin(DaffNavbarBase));
     /**
      * @inheritdoc
      */
@@ -3957,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
@@ -3979,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 */
@@ -3994,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',] }]
     };
 
@@ -4764,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) {
@@ -4773,7 +4890,7 @@
         }
         return DaffHeroBase;
     }());
-    var _daffHeroBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left')));
+    var _daffHeroBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left')))));
     /**
      * @inheritdoc
      */
@@ -4820,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{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.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 */
@@ -4971,7 +5088,7 @@
         }
         return DaffCalloutBase;
     }());
-    var _daffCalloutBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left')));
+    var _daffCalloutBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left')))));
     /**
      * @inheritdoc
      */
@@ -5018,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{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--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 */
@@ -5139,6 +5256,9 @@
         DaffFeatureModeEnum["Compact"] = "compact";
         DaffFeatureModeEnum["Normal"] = "normal";
     })(exports.DaffFeatureModeEnum || (exports.DaffFeatureModeEnum = {}));
+    /**
+     * @deprecated See {@link DaffCardComponent}
+     */
     var DaffFeatureComponent = /** @class */ (function () {
         function DaffFeatureComponent() {
             /**
@@ -5230,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() {
             /**
@@ -5284,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
      */
@@ -5294,7 +5459,7 @@
         }
         return DaffCardBase;
     }());
-    var _daffCardBase = daffColorMixin(DaffCardBase);
+    var _daffCardBase = daffArticleEncapsulatedMixin(daffColorMixin(DaffCardBase));
     /**
      * @inheritdoc
      */
@@ -5304,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{text-transform:uppercase;font-size:.875rem;font-weight:600;letter-spacing:.03125rem;line-height:1rem;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 */
@@ -5340,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 () {
@@ -5357,16 +5598,20 @@
                     ],
                     declarations: [
                         DaffCardComponent,
+                        DaffCardIconDirective,
+                        DaffCardImageDirective,
                         DaffCardTaglineDirective,
                         DaffCardTitleDirective,
-                        DaffCardImageDirective,
+                        DaffCardContentDirective,
                         DaffCardActionsDirective,
                     ],
                     exports: [
                         DaffCardComponent,
+                        DaffCardIconDirective,
+                        DaffCardImageDirective,
                         DaffCardTaglineDirective,
                         DaffCardTitleDirective,
-                        DaffCardImageDirective,
+                        DaffCardContentDirective,
                         DaffCardActionsDirective,
                     ],
                 },] }
@@ -5428,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;
@@ -5511,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;