@daffodil/design 0.87.1 → 0.88.1

package/fesm2022/daffodil-design-callout.mjs

@@ -1,27 +1,36 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, NgModule } from '@angular/core';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, NgModule } from '@angular/core';
 import * as i1 from '@daffodil/design';
 import { DaffArticleEncapsulatedDirective, DaffManageContainerLayoutDirective, DaffTextAlignableDirective, DaffCompactableDirective, DaffColorableDirective } from '@daffodil/design';
 
+/* eslint-disable quote-props */
 /**
- * @inheritdoc
+ * Callout is a versatile, pre-styled container used to highlight
+ * key pieces of content in a visually distinct way.
+ *
+ * @example
+ * ```html
+ * <daff-callout>
+ *   <div daffCalloutIcon></div>
+ *   <div daffCalloutTagline></div>
+ *   <h2 daffCalloutTitle></h2>
+ *   <p daffCalloutSubtitle></p>
+ *   <div daffCalloutBody></div>
+ * </daff-callout>
+ * ```
  */
 class DaffCalloutComponent {
     constructor(textAlignable) {
         this.textAlignable = textAlignable;
-        /**
-         * @docs-private
-         */
-        this.class = true;
         this.textAlignable.defaultAlignment = 'left';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCalloutComponent, deps: [{ token: i1.DaffTextAlignableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffCalloutComponent, isStandalone: true, selector: "daff-callout", host: { properties: { "class.daff-callout": "this.class" } }, hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }, { directive: i1.DaffManageContainerLayoutDirective }, { directive: i1.DaffTextAlignableDirective, inputs: ["textAlignment", "textAlignment"] }, { directive: i1.DaffCompactableDirective, inputs: ["compact", "compact"] }, { directive: i1.DaffColorableDirective, inputs: ["color", "color"] }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, 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-size:.875rem;font-weight:600;letter-spacing:.03125rem;line-height:1rem;text-transform:uppercase;margin:0 0 8px;padding:0}.daff-callout__title{font-size:1.75rem;font-weight:700;line-height:2rem;margin:0;max-width:1040px;overflow-wrap:break-word;padding:0;width:100%}@media (min-width: 480px){.daff-callout__title{font-size:2rem;font-weight:700;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.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__tagline,.daff-callout.daff-left .daff-callout__title,.daff-callout.daff-left .daff-callout__subtitle{text-align:left}.daff-callout.daff-center .daff-callout__icon,.daff-callout.daff-center .daff-callout__tagline,.daff-callout.daff-center .daff-callout__title,.daff-callout.daff-center .daff-callout__subtitle{margin-left:auto;margin-right:auto;text-align:center}.daff-callout.daff-right .daff-callout__icon,.daff-callout.daff-right .daff-callout__tagline,.daff-callout.daff-right .daff-callout__title,.daff-callout.daff-right .daff-callout__subtitle{margin-left:auto;text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffCalloutComponent, isStandalone: true, selector: "daff-callout", host: { classAttribute: "daff-callout" }, hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }, { directive: i1.DaffManageContainerLayoutDirective }, { directive: i1.DaffTextAlignableDirective, inputs: ["textAlignment", "textAlignment"] }, { directive: i1.DaffCompactableDirective, inputs: ["compact", "compact"] }, { directive: i1.DaffColorableDirective, inputs: ["color", "color"] }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, 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-size:.875rem;font-weight:600;letter-spacing:.03125rem;line-height:1rem;text-transform:uppercase;margin:0 0 8px;padding:0}.daff-callout__title{font-size:1.75rem;font-weight:700;line-height:2rem;margin:0;max-width:1040px;overflow-wrap:break-word;padding:0;width:100%}@media (min-width: 480px){.daff-callout__title{font-size:2rem;font-weight:700;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.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__tagline,.daff-callout.daff-left .daff-callout__title,.daff-callout.daff-left .daff-callout__subtitle{text-align:left}.daff-callout.daff-center .daff-callout__icon,.daff-callout.daff-center .daff-callout__tagline,.daff-callout.daff-center .daff-callout__title,.daff-callout.daff-center .daff-callout__subtitle{margin-left:auto;margin-right:auto;text-align:center}.daff-callout.daff-right .daff-callout__icon,.daff-callout.daff-right .daff-callout__tagline,.daff-callout.daff-right .daff-callout__title,.daff-callout.daff-right .daff-callout__subtitle{margin-left:auto;text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCalloutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-callout', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, hostDirectives: [
+            args: [{ selector: 'daff-callout', template: '<ng-content></ng-content>', hostDirectives: [
                         { directive: DaffArticleEncapsulatedDirective },
                         { directive: DaffManageContainerLayoutDirective },
                         {
@@ -36,116 +45,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                             directive: DaffColorableDirective,
                             inputs: ['color'],
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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-size:.875rem;font-weight:600;letter-spacing:.03125rem;line-height:1rem;text-transform:uppercase;margin:0 0 8px;padding:0}.daff-callout__title{font-size:1.75rem;font-weight:700;line-height:2rem;margin:0;max-width:1040px;overflow-wrap:break-word;padding:0;width:100%}@media (min-width: 480px){.daff-callout__title{font-size:2rem;font-weight:700;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.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__tagline,.daff-callout.daff-left .daff-callout__title,.daff-callout.daff-left .daff-callout__subtitle{text-align:left}.daff-callout.daff-center .daff-callout__icon,.daff-callout.daff-center .daff-callout__tagline,.daff-callout.daff-center .daff-callout__title,.daff-callout.daff-center .daff-callout__subtitle{margin-left:auto;margin-right:auto;text-align:center}.daff-callout.daff-right .daff-callout__icon,.daff-callout.daff-right .daff-callout__tagline,.daff-callout.daff-right .daff-callout__title,.daff-callout.daff-right .daff-callout__subtitle{margin-left:auto;text-align:right}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DaffTextAlignableDirective }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-callout']
-            }] } });
+                    ], host: {
+                        'class': 'daff-callout',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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-size:.875rem;font-weight:600;letter-spacing:.03125rem;line-height:1rem;text-transform:uppercase;margin:0 0 8px;padding:0}.daff-callout__title{font-size:1.75rem;font-weight:700;line-height:2rem;margin:0;max-width:1040px;overflow-wrap:break-word;padding:0;width:100%}@media (min-width: 480px){.daff-callout__title{font-size:2rem;font-weight:700;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.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__tagline,.daff-callout.daff-left .daff-callout__title,.daff-callout.daff-left .daff-callout__subtitle{text-align:left}.daff-callout.daff-center .daff-callout__icon,.daff-callout.daff-center .daff-callout__tagline,.daff-callout.daff-center .daff-callout__title,.daff-callout.daff-center .daff-callout__subtitle{margin-left:auto;margin-right:auto;text-align:center}.daff-callout.daff-right .daff-callout__icon,.daff-callout.daff-right .daff-callout__tagline,.daff-callout.daff-right .daff-callout__title,.daff-callout.daff-right .daff-callout__subtitle{margin-left:auto;text-align:right}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DaffTextAlignableDirective }] });
 
+/* eslint-disable quote-props */
+/**
+ * A flexible wrapper for custom or additional components within the callout.
+ * It should only be used once per callout.
+ *
+ * @example
+ * ```html
+ * <div daffCalloutBody></div>
+ * ```
+ */
 class DaffCalloutBodyDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCalloutBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffCalloutBodyDirective, isStandalone: true, selector: "[daffCalloutBody]", host: { properties: { "class.daff-callout__body": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffCalloutBodyDirective, isStandalone: true, selector: "[daffCalloutBody]", host: { classAttribute: "daff-callout__body" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCalloutBodyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffCalloutBody]',
-                    standalone: true,
+                    host: {
+                        'class': 'daff-callout__body',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-callout__body']
-            }] } });
+        }] });
 
+/* eslint-disable quote-props */
+/**
+ * Used to display a visual or branding element.
+ * Avoid using this for interactive or actionable icons.
+ *
+ * @example
+ * ```html
+ * <div daffCalloutIcon></div>
+ * ```
+ */
 class DaffCalloutIconDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCalloutIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffCalloutIconDirective, isStandalone: true, selector: "[daffCalloutIcon]", host: { properties: { "class.daff-callout__icon": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffCalloutIconDirective, isStandalone: true, selector: "[daffCalloutIcon]", host: { classAttribute: "daff-callout__icon" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCalloutIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffCalloutIcon]',
-                    standalone: true,
+                    host: {
+                        'class': 'daff-callout__icon',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-callout__icon']
-            }] } });
+        }] });
 
+/**
+ * Secondary text that provides additional descriptive information beneath the title.
+ *
+ * @example
+ * ```html
+ * <p daffCalloutSubtitle></p>
+ * ```
+ */
 class DaffCalloutSubtitleDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCalloutSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffCalloutSubtitleDirective, isStandalone: true, selector: "[daffCalloutSubtitle]", host: { properties: { "class.daff-callout__subtitle": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffCalloutSubtitleDirective, isStandalone: true, selector: "[daffCalloutSubtitle]", host: { classAttribute: "daff-callout__subtitle" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCalloutSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffCalloutSubtitle]',
-                    standalone: true,
+                    host: {
+                        class: 'daff-callout__subtitle',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-callout__subtitle']
-            }] } });
+        }] });
 
+/* eslint-disable quote-props */
+/**
+ * A short, memorable phrase that complements the title and provides quick context.
+ *
+ * @example
+ * ```html
+ * <div daffCalloutTagline></div>
+ * ```
+ */
 class DaffCalloutTaglineDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCalloutTaglineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffCalloutTaglineDirective, isStandalone: true, selector: "[daffCalloutTagline]", host: { properties: { "class.daff-callout__tagline": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffCalloutTaglineDirective, isStandalone: true, selector: "[daffCalloutTagline]", host: { classAttribute: "daff-callout__tagline" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCalloutTaglineDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffCalloutTagline]',
-                    standalone: true,
+                    host: {
+                        'class': 'daff-callout__tagline',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-callout__tagline']
-            }] } });
+        }] });
 
+/**
+ * Applied to a heading tag (`<h*>`) to define the primary title of the callout.
+ *
+ * @example
+ * ```html
+ * <h2 daffCalloutTitle></h2>
+ * ```
+ */
 class DaffCalloutTitleDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCalloutTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffCalloutTitleDirective, isStandalone: true, selector: "[daffCalloutTitle]", host: { properties: { "class.daff-callout__title": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffCalloutTitleDirective, isStandalone: true, selector: "[daffCalloutTitle]", host: { classAttribute: "daff-callout__title" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCalloutTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffCalloutTitle]',
-                    standalone: true,
+                    host: {
+                        class: 'daff-callout__title',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-callout__title']
-            }] } });
+        }] });
 
 /**
  * @deprecated in favor of {@link DAFF_CALLOUT_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.

package/fesm2022/daffodil-design-callout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-callout.mjs","sources":["../../../libs/design/callout/src/callout/callout.component.ts","../../../libs/design/callout/src/callout-body/callout-body.directive.ts","../../../libs/design/callout/src/callout-icon/callout-icon.directive.ts","../../../libs/design/callout/src/callout-subtitle/callout-subtitle.directive.ts","../../../libs/design/callout/src/callout-tagline/callout-tagline.directive.ts","../../../libs/design/callout/src/callout-title/callout-title.directive.ts","../../../libs/design/callout/src/callout.module.ts","../../../libs/design/callout/src/callout.ts","../../../libs/design/callout/src/daffodil-design-callout.ts"],"sourcesContent":["import {\n  Component,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n  HostBinding,\n} from '@angular/core';\n\nimport {\n  DaffColorableDirective,\n  DaffCompactableDirective,\n} from '@daffodil/design';\nimport {\n  DaffArticleEncapsulatedDirective,\n  DaffManageContainerLayoutDirective,\n  DaffTextAlignableDirective,\n} from '@daffodil/design';\n\n/**\n * @inheritdoc\n */\n@Component({\n  selector: 'daff-callout',\n  template: '<ng-content></ng-content>',\n  styleUrls: ['./callout.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  hostDirectives: [\n    { directive: DaffArticleEncapsulatedDirective },\n    { directive: DaffManageContainerLayoutDirective },\n    {\n      directive: DaffTextAlignableDirective,\n      inputs: ['textAlignment'],\n    },\n    {\n      directive: DaffCompactableDirective,\n      inputs: ['compact'],\n    },\n    {\n      directive: DaffColorableDirective,\n      inputs: ['color'],\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class DaffCalloutComponent {\n  constructor(private textAlignable: DaffTextAlignableDirective) {\n    this.textAlignable.defaultAlignment = 'left';\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-callout') class = true;\n}\n","import {\n  Directive,\n  HostBinding,\n} from '@angular/core';\n\n@Directive({\n  selector: '[daffCalloutBody]',\n  standalone: true,\n})\n\nexport class DaffCalloutBodyDirective {\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-callout__body') class = true;\n}\n","import {\n  Directive,\n  HostBinding,\n} from '@angular/core';\n\n@Directive({\n  selector: '[daffCalloutIcon]',\n  standalone: true,\n})\n\nexport class DaffCalloutIconDirective {\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-callout__icon') class = true;\n}\n","import {\n  Directive,\n  HostBinding,\n} from '@angular/core';\n\n@Directive({\n  selector: '[daffCalloutSubtitle]',\n  standalone: true,\n})\n\nexport class DaffCalloutSubtitleDirective {\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-callout__subtitle') class = true;\n}\n","import {\n  Directive,\n  HostBinding,\n} from '@angular/core';\n\n@Directive({\n  selector: '[daffCalloutTagline]',\n  standalone: true,\n})\n\nexport class DaffCalloutTaglineDirective {\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-callout__tagline') class = true;\n}\n","import {\n  Directive,\n  HostBinding,\n} from '@angular/core';\n\n@Directive({\n  selector: '[daffCalloutTitle]',\n  standalone: true,\n})\n\nexport class DaffCalloutTitleDirective {\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-callout__title') class = true;\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffCalloutComponent } from './callout/callout.component';\nimport { DaffCalloutBodyDirective } from './callout-body/callout-body.directive';\nimport { DaffCalloutIconDirective } from './callout-icon/callout-icon.directive';\nimport { DaffCalloutSubtitleDirective } from './callout-subtitle/callout-subtitle.directive';\nimport { DaffCalloutTaglineDirective } from './callout-tagline/callout-tagline.directive';\nimport { DaffCalloutTitleDirective } from './callout-title/callout-title.directive';\n\n/**\n * @deprecated in favor of {@link DAFF_CALLOUT_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffCalloutComponent,\n    DaffCalloutIconDirective,\n    DaffCalloutTitleDirective,\n    DaffCalloutSubtitleDirective,\n    DaffCalloutTaglineDirective,\n    DaffCalloutBodyDirective,\n  ],\n  exports: [\n    DaffCalloutComponent,\n    DaffCalloutIconDirective,\n    DaffCalloutSubtitleDirective,\n    DaffCalloutTitleDirective,\n    DaffCalloutTaglineDirective,\n    DaffCalloutBodyDirective,\n  ],\n})\n\nexport class DaffCalloutModule { }\n","import { DaffCalloutComponent } from './callout/callout.component';\nimport { DaffCalloutBodyDirective } from './callout-body/callout-body.directive';\nimport { DaffCalloutIconDirective } from './callout-icon/callout-icon.directive';\nimport { DaffCalloutSubtitleDirective } from './callout-subtitle/callout-subtitle.directive';\nimport { DaffCalloutTaglineDirective } from './callout-tagline/callout-tagline.directive';\nimport { DaffCalloutTitleDirective } from './callout-title/callout-title.directive';\n\n/**\n * @docs-private\n */\nexport const DAFF_CALLOUT_COMPONENTS = <const> [\n  DaffCalloutComponent,\n  DaffCalloutIconDirective,\n  DaffCalloutTitleDirective,\n  DaffCalloutSubtitleDirective,\n  DaffCalloutTaglineDirective,\n  DaffCalloutBodyDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"daffodil-design-callout.mjs","sources":["../../../libs/design/callout/src/callout/callout.component.ts","../../../libs/design/callout/src/callout-body/callout-body.directive.ts","../../../libs/design/callout/src/callout-icon/callout-icon.directive.ts","../../../libs/design/callout/src/callout-subtitle/callout-subtitle.directive.ts","../../../libs/design/callout/src/callout-tagline/callout-tagline.directive.ts","../../../libs/design/callout/src/callout-title/callout-title.directive.ts","../../../libs/design/callout/src/callout.module.ts","../../../libs/design/callout/src/callout.ts","../../../libs/design/callout/src/daffodil-design-callout.ts"],"sourcesContent":["/* eslint-disable quote-props */\nimport {\n  Component,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport {\n  DaffColorableDirective,\n  DaffCompactableDirective,\n  DaffArticleEncapsulatedDirective,\n  DaffManageContainerLayoutDirective,\n  DaffTextAlignableDirective,\n} from '@daffodil/design';\n\n/**\n * Callout is a versatile, pre-styled container used to highlight\n * key pieces of content in a visually distinct way.\n *\n * @example\n * ```html\n * <daff-callout>\n *   <div daffCalloutIcon></div>\n *   <div daffCalloutTagline></div>\n *   <h2 daffCalloutTitle></h2>\n *   <p daffCalloutSubtitle></p>\n *   <div daffCalloutBody></div>\n * </daff-callout>\n * ```\n */\n@Component({\n  selector: 'daff-callout',\n  template: '<ng-content></ng-content>',\n  styleUrls: ['./callout.component.scss'],\n  hostDirectives: [\n    { directive: DaffArticleEncapsulatedDirective },\n    { directive: DaffManageContainerLayoutDirective },\n    {\n      directive: DaffTextAlignableDirective,\n      inputs: ['textAlignment'],\n    },\n    {\n      directive: DaffCompactableDirective,\n      inputs: ['compact'],\n    },\n    {\n      directive: DaffColorableDirective,\n      inputs: ['color'],\n    },\n  ],\n  host: {\n    'class': 'daff-callout',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DaffCalloutComponent {\n  constructor(private textAlignable: DaffTextAlignableDirective) {\n    this.textAlignable.defaultAlignment = 'left';\n  }\n}\n","/* eslint-disable quote-props */\nimport { Directive } from '@angular/core';\n\n/**\n * A flexible wrapper for custom or additional components within the callout.\n * It should only be used once per callout.\n *\n * @example\n * ```html\n * <div daffCalloutBody></div>\n * ```\n */\n@Directive({\n  selector: '[daffCalloutBody]',\n  host: {\n    'class': 'daff-callout__body',\n  },\n})\n\nexport class DaffCalloutBodyDirective {}\n","/* eslint-disable quote-props */\nimport { Directive } from '@angular/core';\n\n/**\n * Used to display a visual or branding element.\n * Avoid using this for interactive or actionable icons.\n *\n * @example\n * ```html\n * <div daffCalloutIcon></div>\n * ```\n */\n@Directive({\n  selector: '[daffCalloutIcon]',\n  host: {\n    'class': 'daff-callout__icon',\n  },\n})\n\nexport class DaffCalloutIconDirective {}\n","import { Directive } from '@angular/core';\n\n/**\n * Secondary text that provides additional descriptive information beneath the title.\n *\n * @example\n * ```html\n * <p daffCalloutSubtitle></p>\n * ```\n */\n@Directive({\n  selector: '[daffCalloutSubtitle]',\n  host: {\n    class: 'daff-callout__subtitle',\n  },\n})\n\nexport class DaffCalloutSubtitleDirective {}\n","/* eslint-disable quote-props */\nimport { Directive } from '@angular/core';\n\n/**\n * A short, memorable phrase that complements the title and provides quick context.\n *\n * @example\n * ```html\n * <div daffCalloutTagline></div>\n * ```\n */\n@Directive({\n  selector: '[daffCalloutTagline]',\n  host: {\n    'class': 'daff-callout__tagline',\n  },\n})\n\nexport class DaffCalloutTaglineDirective {}\n","import { Directive } from '@angular/core';\n\n/**\n * Applied to a heading tag (`<h*>`) to define the primary title of the callout.\n *\n * @example\n * ```html\n * <h2 daffCalloutTitle></h2>\n * ```\n */\n@Directive({\n  selector: '[daffCalloutTitle]',\n  host: {\n    class: 'daff-callout__title',\n  },\n})\n\nexport class DaffCalloutTitleDirective {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffCalloutComponent } from './callout/callout.component';\nimport { DaffCalloutBodyDirective } from './callout-body/callout-body.directive';\nimport { DaffCalloutIconDirective } from './callout-icon/callout-icon.directive';\nimport { DaffCalloutSubtitleDirective } from './callout-subtitle/callout-subtitle.directive';\nimport { DaffCalloutTaglineDirective } from './callout-tagline/callout-tagline.directive';\nimport { DaffCalloutTitleDirective } from './callout-title/callout-title.directive';\n\n/**\n * @deprecated in favor of {@link DAFF_CALLOUT_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffCalloutComponent,\n    DaffCalloutIconDirective,\n    DaffCalloutTitleDirective,\n    DaffCalloutSubtitleDirective,\n    DaffCalloutTaglineDirective,\n    DaffCalloutBodyDirective,\n  ],\n  exports: [\n    DaffCalloutComponent,\n    DaffCalloutIconDirective,\n    DaffCalloutSubtitleDirective,\n    DaffCalloutTitleDirective,\n    DaffCalloutTaglineDirective,\n    DaffCalloutBodyDirective,\n  ],\n})\n\nexport class DaffCalloutModule { }\n","import { DaffCalloutComponent } from './callout/callout.component';\nimport { DaffCalloutBodyDirective } from './callout-body/callout-body.directive';\nimport { DaffCalloutIconDirective } from './callout-icon/callout-icon.directive';\nimport { DaffCalloutSubtitleDirective } from './callout-subtitle/callout-subtitle.directive';\nimport { DaffCalloutTaglineDirective } from './callout-tagline/callout-tagline.directive';\nimport { DaffCalloutTitleDirective } from './callout-title/callout-title.directive';\n\n/**\n * @docs-private\n */\nexport const DAFF_CALLOUT_COMPONENTS = <const> [\n  DaffCalloutComponent,\n  DaffCalloutIconDirective,\n  DaffCalloutTitleDirective,\n  DaffCalloutSubtitleDirective,\n  DaffCalloutTaglineDirective,\n  DaffCalloutBodyDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/daffodil-design-card-examples.mjs

@@ -4,7 +4,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faMapMarked } from '@fortawesome/free-solid-svg-icons';
 import { DaffButtonComponent } from '@daffodil/design/button';
 import * as i1 from '@daffodil/design/card';
-import { DAFF_CARD_COMPONENTS, DAFF_STROKED_CARD_COMPONENTS, DAFF_RAISED_CARD_COMPONENTS } from '@daffodil/design/card';
+import { DAFF_CARD_COMPONENTS, DAFF_STROKED_CARD_COMPONENTS, DAFF_ALL_CARD_COMPONENTS, DAFF_RAISED_CARD_COMPONENTS } from '@daffodil/design/card';
 import * as i2 from '@daffodil/design/image';
 import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 import { NgFor } from '@angular/common';
@@ -39,7 +39,7 @@ class CardOrientationComponent {
         ];
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardOrientationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: CardOrientationComponent, isStandalone: true, selector: "card-orientation", ngImport: i0, template: "<daff-card [orientation]=\"orientationControl.value\">\n  <daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n  <fa-icon daffCardIcon [icon]=\"faMapMarked\"></fa-icon>\n  <div daffCardTagline>Basel, Switzerland</div>\n  <h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n    <p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n  </div>\n\t<div daffCardActions>\n    <button daff-button color=\"theme-contrast\">Learn More</button>\n  </div>\n</daff-card>\n\n<select [formControl]=\"orientationControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>", styles: [".daff-card--vertical{max-width:560px}\n"], dependencies: [{ kind: "component", type: i1.DaffCardComponent, selector: "daff-card,a[daff-card]" }, { kind: "directive", type: i1.DaffCardIconDirective, selector: "[daffCardIcon]" }, { kind: "directive", type: i1.DaffCardImageDirective, selector: "[daffCardImage]" }, { kind: "directive", type: i1.DaffCardTaglineDirective, selector: "[daffCardTagline]" }, { kind: "directive", type: i1.DaffCardTitleDirective, selector: "[daffCardTitle]" }, { kind: "directive", type: i1.DaffCardContentDirective, selector: "[daffCardContent]" }, { kind: "directive", type: i1.DaffCardActionsDirective, selector: "[daffCardActions]" }, { kind: "component", type: i2.DaffImageComponent, selector: "daff-image", inputs: ["src", "alt", "width", "height"], outputs: ["load"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "component", type: DaffButtonComponent, selector: "button[daff-button],a[daff-button]", inputs: ["elevated"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: CardOrientationComponent, isStandalone: true, selector: "card-orientation", ngImport: i0, template: "<daff-card [orientation]=\"orientationControl.value\">\n  <daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n  <fa-icon daffCardIcon [icon]=\"faMapMarked\"></fa-icon>\n  <div daffCardTagline>Basel, Switzerland</div>\n  <h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n    <p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n  </div>\n\t<div daffCardActions>\n    <button daff-button color=\"theme-contrast\">Learn More</button>\n  </div>\n</daff-card>\n\n<select [formControl]=\"orientationControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>", styles: ["daff-card.vertical{max-width:560px}\n"], dependencies: [{ kind: "component", type: i1.DaffCardComponent, selector: "daff-card,a[daff-card]" }, { kind: "directive", type: i1.DaffCardIconDirective, selector: "[daffCardIcon]" }, { kind: "directive", type: i1.DaffCardImageDirective, selector: "[daffCardImage]" }, { kind: "directive", type: i1.DaffCardTaglineDirective, selector: "[daffCardTagline]" }, { kind: "directive", type: i1.DaffCardTitleDirective, selector: "[daffCardTitle]" }, { kind: "directive", type: i1.DaffCardContentDirective, selector: "[daffCardContent]" }, { kind: "directive", type: i1.DaffCardActionsDirective, selector: "[daffCardActions]" }, { kind: "component", type: i2.DaffImageComponent, selector: "daff-image", inputs: ["src", "alt", "width", "height"], outputs: ["load"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "component", type: DaffButtonComponent, selector: "button[daff-button],a[daff-button]", inputs: ["elevated"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardOrientationComponent, decorators: [{
             type: Component,
@@ -50,7 +50,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         DaffButtonComponent,
                         ReactiveFormsModule,
                         NgFor,
-                    ], template: "<daff-card [orientation]=\"orientationControl.value\">\n  <daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n  <fa-icon daffCardIcon [icon]=\"faMapMarked\"></fa-icon>\n  <div daffCardTagline>Basel, Switzerland</div>\n  <h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n    <p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n  </div>\n\t<div daffCardActions>\n    <button daff-button color=\"theme-contrast\">Learn More</button>\n  </div>\n</daff-card>\n\n<select [formControl]=\"orientationControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>", styles: [".daff-card--vertical{max-width:560px}\n"] }]
+                    ], template: "<daff-card [orientation]=\"orientationControl.value\">\n  <daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n  <fa-icon daffCardIcon [icon]=\"faMapMarked\"></fa-icon>\n  <div daffCardTagline>Basel, Switzerland</div>\n  <h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n    <p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n  </div>\n\t<div daffCardActions>\n    <button daff-button color=\"theme-contrast\">Learn More</button>\n  </div>\n</daff-card>\n\n<select [formControl]=\"orientationControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>", styles: ["daff-card.vertical{max-width:560px}\n"] }]
         }] });
 
 class CardThemingComponent {
@@ -81,6 +81,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                     ], template: "<daff-card [color]=\"cardControl.value\">\n  <div daffCardTagline>Card Tagline</div>\n  <div daffCardTitle>Title</div>\n  <div daffCardContent>\n    <p>Cards are themable.</p>\n  </div>\n</daff-card>\n\n<select [formControl]=\"cardControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>\n\n<daff-stroked-card [color]=\"strokedCardControl.value\">\n  <div daffCardTagline>Card Tagline</div>\n  <div daffCardTitle>Title</div>\n  <div daffCardContent>\n    <p>Cards are themable.</p>\n  </div>\n</daff-stroked-card>\n\n<select [formControl]=\"strokedCardControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>", styles: ["daff-card,daff-stroked-card{max-width:480px}\n"] }]
         }] });
 
+class ElevatedCardComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ElevatedCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ElevatedCardComponent, isStandalone: true, selector: "elevated-card", ngImport: i0, template: "<daff-card [elevated]=\"true\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</daff-card>\n\n<daff-stroked-card [elevated]=\"true\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</daff-stroked-card>\n", styles: ["daff-card{max-width:480px}\n"], dependencies: [{ kind: "component", type: i1.DaffCardComponent, selector: "daff-card,a[daff-card]" }, { kind: "component", type: i1.DaffStrokedCardComponent, selector: "daff-stroked-card,a[daff-stroked-card]" }, { kind: "directive", type: i1.DaffCardImageDirective, selector: "[daffCardImage]" }, { kind: "directive", type: i1.DaffCardTaglineDirective, selector: "[daffCardTagline]" }, { kind: "directive", type: i1.DaffCardTitleDirective, selector: "[daffCardTitle]" }, { kind: "directive", type: i1.DaffCardContentDirective, selector: "[daffCardContent]" }, { kind: "component", type: i2.DaffImageComponent, selector: "daff-image", inputs: ["src", "alt", "width", "height"], outputs: ["load"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ElevatedCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'elevated-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        DAFF_ALL_CARD_COMPONENTS,
+                        DAFF_IMAGE_COMPONENTS,
+                    ], template: "<daff-card [elevated]=\"true\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</daff-card>\n\n<daff-stroked-card [elevated]=\"true\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</daff-stroked-card>\n", styles: ["daff-card{max-width:480px}\n"] }]
+        }] });
+
 class LinkableCardComponent {
     constructor() {
         this.basicColorControl = new UntypedFormControl('');
@@ -112,33 +124,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                     ], template: "<a daff-card href=\"https://www.basel.com/en/attractions/basel-exhibition-centre-f45d5dd6f0\" target=\"_blank\" [color]=\"basicColorControl.value\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</a>\n\n<select [formControl]=\"basicColorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>\n\n<a daff-raised-card href=\"https://www.basel.com/en/attractions/basel-exhibition-centre-f45d5dd6f0\" target=\"_blank\" [color]=\"raisedColorControl.value\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</a>\n\n<select [formControl]=\"raisedColorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>\n\n<a daff-stroked-card href=\"https://www.basel.com/en/attractions/basel-exhibition-centre-f45d5dd6f0\" target=\"_blank\" [color]=\"strokedColorControl.value\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</a>\n\n<select [formControl]=\"strokedColorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>", styles: ["a.daff-card,a.daff-raised-card,a.daff-stroked-card{max-width:480px}\n"] }]
         }] });
 
-class RaisedCardComponent {
-    constructor() {
-        this.colorControl = new UntypedFormControl('');
-        this.options = [
-            { value: '', label: 'Default' },
-            { value: 'primary', label: 'Primary' },
-            { value: 'secondary', label: 'Secondary' },
-            { value: 'tertiary', label: 'Tertiary' },
-            { value: 'theme', label: 'Theme' },
-            { value: 'theme-contrast', label: 'Theme Contrast' },
-            { value: 'dark', label: 'Dark' },
-            { value: 'light', label: 'Light' },
-        ];
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: RaisedCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: RaisedCardComponent, isStandalone: true, selector: "raised-card", ngImport: i0, template: "<daff-raised-card [color]=\"colorControl.value\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</daff-raised-card>\n\n<select [formControl]=\"colorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>", styles: ["daff-raised-card{max-width:480px}\n"], dependencies: [{ kind: "component", type: i1.DaffRaisedCardComponent, selector: "daff-raised-card,a[daff-raised-card]" }, { kind: "directive", type: i1.DaffCardImageDirective, selector: "[daffCardImage]" }, { kind: "directive", type: i1.DaffCardTaglineDirective, selector: "[daffCardTagline]" }, { kind: "directive", type: i1.DaffCardTitleDirective, selector: "[daffCardTitle]" }, { kind: "directive", type: i1.DaffCardContentDirective, selector: "[daffCardContent]" }, { kind: "component", type: i2.DaffImageComponent, selector: "daff-image", inputs: ["src", "alt", "width", "height"], outputs: ["load"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: RaisedCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'raised-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        DAFF_RAISED_CARD_COMPONENTS,
-                        DAFF_IMAGE_COMPONENTS,
-                        ReactiveFormsModule,
-                        NgFor,
-                    ], template: "<daff-raised-card [color]=\"colorControl.value\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</daff-raised-card>\n\n<select [formControl]=\"colorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>", styles: ["daff-raised-card{max-width:480px}\n"] }]
-        }] });
-
 class StrokedCardComponent {
     constructor() {
         this.colorControl = new UntypedFormControl('');
@@ -170,7 +155,7 @@ const CARD_EXAMPLES = [
     BasicCardComponent,
     CardThemingComponent,
     LinkableCardComponent,
-    RaisedCardComponent,
+    ElevatedCardComponent,
     StrokedCardComponent,
     CardOrientationComponent,
 ];
@@ -179,5 +164,5 @@ const CARD_EXAMPLES = [
  * Generated bundle index. Do not edit.
  */
 
-export { BasicCardComponent, CARD_EXAMPLES, CardOrientationComponent, CardThemingComponent, LinkableCardComponent, RaisedCardComponent, StrokedCardComponent };
+export { BasicCardComponent, CARD_EXAMPLES, CardOrientationComponent, CardThemingComponent, ElevatedCardComponent, LinkableCardComponent, StrokedCardComponent };
 //# sourceMappingURL=daffodil-design-card-examples.mjs.map