@daffodil/design 0.39.8 → 0.39.12

package/fesm2015/daffodil-design.js

@@ -12,6 +12,18 @@ import { CdkPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/por
 import { OverlayModule, GlobalPositionStrategy, Overlay } from '@angular/cdk/overlay';
 import { A11yModule } from '@angular/cdk/a11y';
 
+/**
+ * A mixin for giving a component the ability to prevent article styles from cascading down.
+ */
+function daffArticleEncapsulatedMixin(Base) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+            this._renderer.addClass(this._elementRef.nativeElement, `daff-ae`);
+        }
+    };
+}
+
 var DaffPaletteEnum;
 (function (DaffPaletteEnum) {
     DaffPaletteEnum["PRIMARY"] = "primary";
@@ -249,7 +261,7 @@ class DaffButtonBase {
         this._renderer = _renderer;
     }
 }
-const _daffButtonBase = daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin(daffSizeMixin(DaffButtonBase, 'md')))));
+const _daffButtonBase = daffArticleEncapsulatedMixin(daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin(daffSizeMixin(DaffButtonBase, 'md'))))));
 var DaffButtonTypeEnum;
 (function (DaffButtonTypeEnum) {
     DaffButtonTypeEnum["Default"] = "daff-button";
@@ -624,8 +636,21 @@ DaffMediaGalleryRegistry.decorators = [
 ];
 
 let uniqueGalleryId = 0;
-class DaffMediaGalleryComponent {
-    constructor(registry) {
+/**
+ * An _elementRef and an instance of renderer2 are needed for the link set mixins
+ */
+class DaffMediaGalleryBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffMediaGalleryBase = daffArticleEncapsulatedMixin((DaffMediaGalleryBase));
+class DaffMediaGalleryComponent extends _daffMediaGalleryBase {
+    constructor(elementRef, renderer, registry) {
+        super(elementRef, renderer);
+        this.elementRef = elementRef;
+        this.renderer = renderer;
         this.registry = registry;
         /**
          * Adds a class for styling the media gallery
@@ -658,6 +683,8 @@ DaffMediaGalleryComponent.decorators = [
 ];
 /** @nocollapse */
 DaffMediaGalleryComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 },
     { type: DaffMediaGalleryRegistry }
 ];
 DaffMediaGalleryComponent.propDecorators = {
@@ -918,7 +945,7 @@ class DaffImageComponent {
 DaffImageComponent.decorators = [
     { type: Component, args: [{
                 selector: 'daff-image',
-                template: "<div class=\"daff-image__wrapper\" [style.paddingTop]=\"_paddingTop\">\n\t<img [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" />\n</div>",
+                template: "<div class=\"daff-image__wrapper\" [style.paddingTop]=\"_paddingTop\">\n\t<img [src]=\"src\" [alt]=\"alt\" (load)=\"load.emit\" loading=\"lazy\"/>\n</div>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     {
@@ -1713,7 +1740,7 @@ DaffContainerComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                 inputs: ['size'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block;margin:0 auto;padding:0;width:100%}:host.daff-xs{max-width:640px}:host.daff-sm{max-width:800px}:host.daff-md{max-width:1040px}:host.daff-lg{max-width:1340px}:host.daff-xl{max-width:1920px}"]
+                styles: [":host-context(.daff-manage-container-layout){display:inherit;flex:inherit;flex-direction:inherit;flex-flow:inherit;flex-wrap:inherit;justify-content:inherit;justify-items:inherit;align-items:inherit;align-content:inherit;gap:inherit;grid-template-columns:inherit;grid-template-rows:inherit;grid-template-areas:inherit;grid-template:inherit;grid-auto-columns:inherit;grid-auto-rows:inherit;grid-auto-flow:inherit;grid:inherit;-moz-column-gap:inherit;column-gap:inherit;row-gap:inherit;grid-gap:inherit;grid-column-gap:inherit;grid-row-gap:inherit;place-items:inherit;place-content:inherit}:host{display:block;margin:0 auto;padding:0;width:100%}:host.daff-xs{max-width:640px}:host.daff-sm{max-width:800px}:host.daff-md{max-width:1040px}:host.daff-lg{max-width:1340px}:host.daff-xl{max-width:1920px}"]
             },] }
 ];
 /** @nocollapse */
@@ -2318,7 +2345,22 @@ DaffAccordionItemComponent.propDecorators = {
     initiallyActive: [{ type: Input }]
 };
 
-class DaffAccordionComponent {
+/**
+ * An _elementRef and an instance of renderer2 are needed for the link set mixins
+ */
+class DaffAccordionBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffAccordionBase = daffArticleEncapsulatedMixin((DaffAccordionBase));
+class DaffAccordionComponent extends _daffAccordionBase {
+    constructor(elementRef, renderer) {
+        super(elementRef, renderer);
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
 }
 DaffAccordionComponent.decorators = [
     { type: Component, args: [{
@@ -2328,6 +2370,11 @@ DaffAccordionComponent.decorators = [
                 styles: [":host{display:block;width:100%}"]
             },] }
 ];
+/** @nocollapse */
+DaffAccordionComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
 
 class DaffNavAccordionItemComponent {
     constructor(accordion, navAccordionItemParent) {
@@ -2443,7 +2490,7 @@ DaffArticleComponent.decorators = [
                 template: '<ng-content></ng-content>',
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: 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 = {
@@ -2727,11 +2774,24 @@ DaffImageGalleryModule.decorators = [
             },] }
 ];
 
+/**
+ * An _elementRef and an instance of renderer2 are needed for the link set mixins
+ */
+class DaffLinkSetBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffLinkSetBase = daffArticleEncapsulatedMixin((DaffLinkSetBase));
 /**
  * DaffLinkSetComponent is a component for displaying a two or more links.
  */
-class DaffLinkSetComponent {
-    constructor() {
+class DaffLinkSetComponent extends _daffLinkSetBase {
+    constructor(elementRef, renderer) {
+        super(elementRef, renderer);
+        this.elementRef = elementRef;
+        this.renderer = renderer;
         /**
          * @docs-private
          */
@@ -2747,6 +2807,11 @@ DaffLinkSetComponent.decorators = [
                 styles: [".daff-link-set{display:block;margin:0;padding:0}.daff-link-set__heading{font-weight:700;display:block;font-size:1rem;line-height:1em;margin-bottom:15px;text-transform:uppercase}.daff-link-set__subheading{display:block;font-size:1rem;line-height:1.5em}.daff-link-set__item{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:currentColor;display:block;font-size:1em;line-height:1.5em;text-decoration:none;transition:color .15s ease}.daff-link-set__item:hover{text-decoration:underline}.daff-link-set__item[disabled]{cursor:not-allowed}.daff-link-set .daff-link-set{margin-left:10px}"]
             },] }
 ];
+/** @nocollapse */
+DaffLinkSetComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
 DaffLinkSetComponent.propDecorators = {
     class: [{ type: HostBinding, args: ['class.daff-link-set',] }]
 };
@@ -2909,9 +2974,21 @@ var DaffListTypeEnum;
     DaffListTypeEnum["Default"] = "daff-list";
     DaffListTypeEnum["Nav"] = "daff-nav-list";
 })(DaffListTypeEnum || (DaffListTypeEnum = {}));
-class DaffListComponent {
-    constructor(elementRef) {
+/**
+ * An _elementRef and an instance of renderer2 are needed for the list mixins
+ */
+class DaffListBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffListBase = daffArticleEncapsulatedMixin((DaffListBase));
+class DaffListComponent extends _daffListBase {
+    constructor(elementRef, renderer) {
+        super(elementRef, renderer);
         this.elementRef = elementRef;
+        this.renderer = renderer;
     }
     /**
      * @docs-private
@@ -2977,7 +3054,8 @@ DaffListComponent.decorators = [
 ];
 /** @nocollapse */
 DaffListComponent.ctorParameters = () => [
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: Renderer2 }
 ];
 DaffListComponent.propDecorators = {
     mode: [{ type: Input }],
@@ -3240,6 +3318,20 @@ DaffModalService.ctorParameters = () => [
     { type: Overlay }
 ];
 
+/**
+ * A mixin for giving a component the ability to manage a DaffContainerComponent's layout.
+ * It passes predetermined layout styles down to the container. In order for a component to
+ * do this, it must implement this mixin.
+ */
+function daffManageContainerLayoutMixin(Base) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+            this._renderer.addClass(this._elementRef.nativeElement, `daff-manage-container-layout`);
+        }
+    };
+}
+
 /**
  * An _elementRef is needed for the Colorable mixin
  */
@@ -3249,7 +3341,7 @@ class DaffNavbarBase {
         this._renderer = _renderer;
     }
 }
-const _daffNavbarBase = daffColorMixin(DaffNavbarBase);
+const _daffNavbarBase = daffManageContainerLayoutMixin(daffColorMixin(DaffNavbarBase));
 /**
  * @inheritdoc
  */
@@ -3258,7 +3350,7 @@ class DaffNavbarComponent extends _daffNavbarBase {
         super(elementRef, renderer);
         this.elementRef = elementRef;
         this.renderer = renderer;
-        this.shadowed = false;
+        this.raised = false;
         /**
          * @docs-private
          */
@@ -3267,20 +3359,21 @@ class DaffNavbarComponent extends _daffNavbarBase {
     /**
      * @docs-private
      */
-    get shadowClass() {
-        return this.shadowed;
+    get raisedClass() {
+        return this.raised;
     }
     ;
 }
 DaffNavbarComponent.decorators = [
     { type: Component, args: [{
-                selector: 'daff-navbar',
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: 'nav[daff-navbar]',
                 template: '<ng-content></ng-content>',
                 //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                 inputs: ['color'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{align-items:center;display:flex;height:70px;padding:0 15px;width:100%}"]
+                styles: [":host{display:flex;align-items:center;height:64px;width:100%;padding:0 16px}"]
             },] }
 ];
 /** @nocollapse */
@@ -3289,8 +3382,8 @@ DaffNavbarComponent.ctorParameters = () => [
     { type: Renderer2 }
 ];
 DaffNavbarComponent.propDecorators = {
-    shadowed: [{ type: Input }],
-    shadowClass: [{ type: HostBinding, args: ['class.daff-navbar--shadowed',] }],
+    raised: [{ type: Input }],
+    raisedClass: [{ type: HostBinding, args: ['class.daff-navbar--raised',] }],
     hostClass: [{ type: HostBinding, args: ['class.daff-navbar',] }]
 };
 
@@ -3991,7 +4084,7 @@ var DaffHeroSizeEnum;
     DaffHeroSizeEnum["Small"] = "small";
 })(DaffHeroSizeEnum || (DaffHeroSizeEnum = {}));
 /**
- * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
+ * An _elementRef and an instance of renderer2 are needed for the hero mixins
  */
 class DaffHeroBase {
     constructor(_elementRef, _renderer) {
@@ -3999,7 +4092,7 @@ class DaffHeroBase {
         this._renderer = _renderer;
     }
 }
-const _daffHeroBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left')));
+const _daffHeroBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left')))));
 /**
  * @inheritdoc
  */
@@ -4035,7 +4128,7 @@ DaffHeroComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                 inputs: ['color', 'compact', 'textAlignment'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".daff-hero{display:block;padding:64px 24px}@media (min-width:480px){.daff-hero{padding:96px 48px}}.daff-hero__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 */
@@ -4179,7 +4272,7 @@ class DaffCalloutBase {
         this._renderer = _renderer;
     }
 }
-const _daffCalloutBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left')));
+const _daffCalloutBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left')))));
 /**
  * @inheritdoc
  */
@@ -4215,7 +4308,7 @@ DaffCalloutComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                 inputs: ['color', 'compact', 'textAlignment'],
                 changeDetection: 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 */
@@ -4330,6 +4423,9 @@ var DaffFeatureModeEnum;
     DaffFeatureModeEnum["Compact"] = "compact";
     DaffFeatureModeEnum["Normal"] = "normal";
 })(DaffFeatureModeEnum || (DaffFeatureModeEnum = {}));
+/**
+ * @deprecated See {@link DaffCardComponent}
+ */
 class DaffFeatureComponent {
     constructor() {
         /**
@@ -4408,6 +4504,40 @@ DaffCardActionsDirective.propDecorators = {
     class: [{ type: HostBinding, args: ['class.daff-card__actions',] }]
 };
 
+class DaffCardContentDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+}
+DaffCardContentDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[daffCardContent]',
+            },] }
+];
+DaffCardContentDirective.propDecorators = {
+    class: [{ type: HostBinding, args: ['class.daff-card__content',] }]
+};
+
+class DaffCardIconDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+}
+DaffCardIconDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[daffCardIcon]',
+            },] }
+];
+DaffCardIconDirective.propDecorators = {
+    class: [{ type: HostBinding, args: ['class.daff-card__icon',] }]
+};
+
 class DaffCardImageDirective {
     constructor() {
         /**
@@ -4459,6 +4589,16 @@ DaffCardTitleDirective.propDecorators = {
     class: [{ type: HostBinding, args: ['class.daff-card__title',] }]
 };
 
+var DaffCardTypeEnum;
+(function (DaffCardTypeEnum) {
+    DaffCardTypeEnum["Raised"] = "daff-raised-card";
+    DaffCardTypeEnum["Stroked"] = "daff-stroked-card";
+})(DaffCardTypeEnum || (DaffCardTypeEnum = {}));
+var DaffCardOrientationEnum;
+(function (DaffCardOrientationEnum) {
+    DaffCardOrientationEnum["Vertical"] = "vertical";
+    DaffCardOrientationEnum["Horizontal"] = "horizontal";
+})(DaffCardOrientationEnum || (DaffCardOrientationEnum = {}));
 /**
  * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
  */
@@ -4468,7 +4608,7 @@ class DaffCardBase {
         this._renderer = _renderer;
     }
 }
-const _daffCardBase = daffColorMixin(DaffCardBase);
+const _daffCardBase = daffArticleEncapsulatedMixin(daffColorMixin(DaffCardBase));
 /**
  * @inheritdoc
  */
@@ -4477,28 +4617,79 @@ class DaffCardComponent extends _daffCardBase {
         super(elementRef, renderer);
         this.elementRef = elementRef;
         this.renderer = renderer;
-        this.raised = false;
-        /**
-         * @docs-private
-         */
+        this._orientation = DaffCardOrientationEnum.Vertical;
         this.class = true;
+        this.cardType = this.initCardType();
     }
-    get raisedClass() {
-        return this.raised;
+    get orientation() {
+        return this._orientation;
+    }
+    set orientation(value) {
+        if (value === null || value === undefined || value === '') {
+            this._orientation = DaffCardOrientationEnum.Vertical;
+        }
+        else {
+            this._orientation = value;
+        }
+    }
+    ;
+    initCardType() {
+        const values = Object.keys(DaffCardTypeEnum).map((k) => DaffCardTypeEnum[k]);
+        if (values.indexOf(this._getHostElement().localName) >= 0) {
+            return this._getHostElement().localName;
+        }
+        for (const attr of values) {
+            if (this._hasHostAttributes(attr)) {
+                return attr;
+            }
+        }
+        return null;
+    }
+    /**
+     * @docs-private
+     */
+    ngOnInit() {
+        if (this.cardType) {
+            this.elementRef.nativeElement.classList.add(this.cardType);
+        }
+    }
+    /**
+     * @docs-private
+     */
+    get verticalClass() {
+        return this.orientation === DaffCardOrientationEnum.Vertical;
+    }
+    /**
+     * @docs-private
+     */
+    get horizontalClass() {
+        return this.orientation === DaffCardOrientationEnum.Horizontal;
+    }
+    _getHostElement() {
+        return this.elementRef.nativeElement;
+    }
+    /**
+     * Gets whether the button has one of the given attributes.
+     * */
+    _hasHostAttributes(...attributes) {
+        return attributes.some(attribute => this._getHostElement().hasAttribute(attribute));
     }
 }
 DaffCardComponent.decorators = [
     { type: Component, args: [{
-                selector: '' +
-                    'daff-card' + ',' +
-                    'a[daff-card]',
-                template: "<ng-content select=\"[daffCardImage]\"></ng-content>\n<div class=\"daff-card__content\">\n\t<ng-content select=\"[daffCardTagline]\"></ng-content>\n\t<ng-content select=\"[daffCardTitle]\"></ng-content>\n\t<ng-content></ng-content>\n</div>\n<ng-content select=\"[daffCardActions]\"></ng-content>",
+                selector: 'daff-card' + ',' +
+                    'daff-raised-card' + ',' +
+                    'daff-stroked-card' + ',' +
+                    'a[daff-card]' + ',' +
+                    'a[daff-raised-card]' + ',' +
+                    'a[daff-stroked-card]',
+                template: "<ng-content select=\"[daffCardImage]\"></ng-content>\n<div class=\"daff-card__wrapper\">\n\t<div class=\"daff-card__body\">\n\t\t<ng-content select=\"[daffCardIcon]\"></ng-content>\n\t\t<ng-content select=\"[daffCardTagline]\"></ng-content>\n\t\t<ng-content select=\"[daffCardTitle]\"></ng-content>\n\t\t<ng-content select=\"[daffCardContent]\"></ng-content>\n\t</div>\n\t<ng-content select=\"[daffCardActions]\"></ng-content>\n</div>",
                 encapsulation: ViewEncapsulation.None,
                 //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
                 // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                 inputs: ['color'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".daff-card{display:flex;flex-direction:column;border-radius:8px}.daff-card__image{display:inline-block;width:100%}.daff-card__image,.daff-card__image img{border-top-left-radius:inherit;border-top-right-radius:inherit}.daff-card__tagline{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 */
@@ -4507,9 +4698,10 @@ DaffCardComponent.ctorParameters = () => [
     { type: Renderer2 }
 ];
 DaffCardComponent.propDecorators = {
-    raised: [{ type: Input }],
+    orientation: [{ type: Input }],
     class: [{ type: HostBinding, args: ['class.daff-card',] }],
-    raisedClass: [{ type: HostBinding, args: ['class.daff-card--raised',] }]
+    verticalClass: [{ type: HostBinding, args: ['class.daff-card--vertical',] }],
+    horizontalClass: [{ type: HostBinding, args: ['class.daff-card--horizontal',] }]
 };
 
 class DaffCardModule {
@@ -4521,16 +4713,20 @@ DaffCardModule.decorators = [
                 ],
                 declarations: [
                     DaffCardComponent,
+                    DaffCardIconDirective,
+                    DaffCardImageDirective,
                     DaffCardTaglineDirective,
                     DaffCardTitleDirective,
-                    DaffCardImageDirective,
+                    DaffCardContentDirective,
                     DaffCardActionsDirective,
                 ],
                 exports: [
                     DaffCardComponent,
+                    DaffCardIconDirective,
+                    DaffCardImageDirective,
                     DaffCardTaglineDirective,
                     DaffCardTitleDirective,
-                    DaffCardImageDirective,
+                    DaffCardContentDirective,
                     DaffCardActionsDirective,
                 ],
             },] }
@@ -4576,5 +4772,5 @@ var DaffTextAlignmentEnum;
  * Generated bundle index. Do not edit.
  */
 
-export { DaffAccordionComponent, DaffAccordionItemComponent, DaffAccordionItemContentDirective, DaffAccordionItemTitleDirective, DaffAccordionModule, DaffArticleComponent, DaffArticleLeadDirective, DaffArticleMetaDirective, DaffArticleModule, DaffArticleTitleDirective, DaffBackdropComponent, DaffBackdropModule, DaffBreakpoints, DaffButtonComponent, DaffButtonModule, DaffButtonSetComponent, DaffButtonSetModule, DaffCalloutBodyDirective, DaffCalloutComponent, DaffCalloutIconDirective, DaffCalloutLayoutEnum, DaffCalloutModule, DaffCalloutSizeEnum, DaffCalloutSubtitleDirective, DaffCalloutTaglineDirective, DaffCalloutTitleDirective, DaffCardActionsDirective, DaffCardComponent, DaffCardImageDirective, DaffCardModule, DaffCardTaglineDirective, DaffCardTitleDirective, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffContainerComponent, DaffContainerModule, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFeatureComponent, DaffFeatureIconDirective, DaffFeatureModeEnum, DaffFeatureModule, DaffFeatureSubheaderDirective, DaffFeatureSubtitleDirective, DaffFeatureTitleDirective, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffGalleryImageComponent, DaffHeroBodyDirective, DaffHeroComponent, DaffHeroIconDirective, DaffHeroLayoutEnum, DaffHeroModule, DaffHeroSizeEnum, DaffHeroSubtitleDirective, DaffHeroTaglineDirective, DaffHeroTitleDirective, DaffImageComponent, DaffImageGalleryComponent, DaffImageGalleryModule, DaffImageListComponent, DaffImageListModule, DaffImageModule, DaffInputComponent, DaffInputModule, DaffLinkSetComponent, DaffLinkSetHeadingDirective, DaffLinkSetItemComponent, DaffLinkSetModule, DaffLinkSetSubheadingDirective, DaffListComponent, DaffListItemComponent, DaffListModeEnum, DaffListModule, DaffListSubheaderDirective, DaffLoadingIconComponent, DaffLoadingIconModule, DaffMediaGalleryComponent, DaffMediaGalleryModule, DaffModalActionsComponent, DaffModalComponent, DaffModalContentComponent, DaffModalHeaderComponent, DaffModalModule, DaffModalService, DaffModalTitleDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffNavbarComponent, DaffNavbarModule, DaffPaginatorComponent, DaffPaginatorModule, DaffPrefixDirective, DaffPrefixSuffixModule, DaffProgressIndicatorComponent, DaffProgressIndicatorModule, DaffQtyDropdownComponent, DaffQtyDropdownModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSidebarComponent, DaffSidebarModule, DaffSidebarViewportComponent, DaffStatusEnum, DaffSuffixDirective, DaffTextAlignmentEnum, DaffThumbnailDirective, daffCompactableMixin, daffPrefixableMixin, daffSuffixableMixin, daffThumbnailCompatToken, daffProgressIndicatorAnimation as ɵa, DaffRadioRegistry as ɵb, daffAccordionAnimations as ɵc, DaffNavAccordionItemComponent as ɵd, daffBackdropAnimations as ɵe, DAFF_MEDIA_GALLERY_TOKEN as ɵf, DaffMediaGalleryRegistry as ɵg, DaffMediaRendererComponent as ɵi, daffFadeAnimations as ɵj, daffSidebarAnimations as ɵk };
+export { DaffAccordionComponent, DaffAccordionItemComponent, DaffAccordionItemContentDirective, DaffAccordionItemTitleDirective, DaffAccordionModule, DaffArticleComponent, DaffArticleLeadDirective, DaffArticleMetaDirective, DaffArticleModule, DaffArticleTitleDirective, DaffBackdropComponent, DaffBackdropModule, DaffBreakpoints, DaffButtonComponent, DaffButtonModule, DaffButtonSetComponent, DaffButtonSetModule, DaffCalloutBodyDirective, DaffCalloutComponent, DaffCalloutIconDirective, DaffCalloutLayoutEnum, DaffCalloutModule, DaffCalloutSizeEnum, DaffCalloutSubtitleDirective, DaffCalloutTaglineDirective, DaffCalloutTitleDirective, DaffCardActionsDirective, DaffCardComponent, DaffCardContentDirective, DaffCardIconDirective, DaffCardImageDirective, DaffCardModule, DaffCardOrientationEnum, DaffCardTaglineDirective, DaffCardTitleDirective, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffContainerComponent, DaffContainerModule, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFeatureComponent, DaffFeatureIconDirective, DaffFeatureModeEnum, DaffFeatureModule, DaffFeatureSubheaderDirective, DaffFeatureSubtitleDirective, DaffFeatureTitleDirective, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffGalleryImageComponent, DaffHeroBodyDirective, DaffHeroComponent, DaffHeroIconDirective, DaffHeroLayoutEnum, DaffHeroModule, DaffHeroSizeEnum, DaffHeroSubtitleDirective, DaffHeroTaglineDirective, DaffHeroTitleDirective, DaffImageComponent, DaffImageGalleryComponent, DaffImageGalleryModule, DaffImageListComponent, DaffImageListModule, DaffImageModule, DaffInputComponent, DaffInputModule, DaffLinkSetComponent, DaffLinkSetHeadingDirective, DaffLinkSetItemComponent, DaffLinkSetModule, DaffLinkSetSubheadingDirective, DaffListComponent, DaffListItemComponent, DaffListModeEnum, DaffListModule, DaffListSubheaderDirective, DaffLoadingIconComponent, DaffLoadingIconModule, DaffMediaGalleryComponent, DaffMediaGalleryModule, DaffModalActionsComponent, DaffModalComponent, DaffModalContentComponent, DaffModalHeaderComponent, DaffModalModule, DaffModalService, DaffModalTitleDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffNavbarComponent, DaffNavbarModule, DaffPaginatorComponent, DaffPaginatorModule, DaffPrefixDirective, DaffPrefixSuffixModule, DaffProgressIndicatorComponent, DaffProgressIndicatorModule, DaffQtyDropdownComponent, DaffQtyDropdownModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSidebarComponent, DaffSidebarModule, DaffSidebarViewportComponent, DaffStatusEnum, DaffSuffixDirective, DaffTextAlignmentEnum, DaffThumbnailDirective, daffArticleEncapsulatedMixin, daffCompactableMixin, daffManageContainerLayoutMixin, daffPrefixableMixin, daffSuffixableMixin, daffThumbnailCompatToken, daffProgressIndicatorAnimation as ɵa, DaffRadioRegistry as ɵb, daffAccordionAnimations as ɵc, DaffNavAccordionItemComponent as ɵd, daffBackdropAnimations as ɵe, DAFF_MEDIA_GALLERY_TOKEN as ɵf, DaffMediaGalleryRegistry as ɵg, DaffMediaRendererComponent as ɵi, daffFadeAnimations as ɵj, daffSidebarAnimations as ɵk };
 //# sourceMappingURL=daffodil-design.js.map