@daffodil/design 0.39.7 → 0.39.11

package/fesm2015/daffodil-design-article-examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-article-examples.js","sources":["../../../libs/design/article/examples/src/article-headings/article-headings.component.ts","../../../libs/design/article/examples/src/article-code-inline/article-code-inline.component.ts","../../../libs/design/article/examples/src/article-hr/article-hr.component.ts","../../../libs/design/article/examples/src/article-ol/article-ol.component.ts","../../../libs/design/article/examples/src/article-ul/article-ul.component.ts","../../../libs/design/article/examples/src/article-meta/article-meta.component.ts","../../../libs/design/article/examples/src/article-link/article-link.component.ts","../../../libs/design/article/examples/src/article-lead/article-lead.component.ts","../../../libs/design/article/examples/src/article-blockquote/article-blockquote.component.ts","../../../libs/design/article/examples/src/article-table/article-table.component.ts","../../../libs/design/article/examples/src/article-code-block/article-code-block.component.ts","../../../libs/design/article/examples/src/examples.ts","../../../libs/design/article/examples/src/article-examples.module.ts","../../../libs/design/article/examples/src/daffodil-design-article-examples.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-headings',\n  templateUrl: './article-headings.component.html',\n})\nexport class ArticleHeadingsComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-code-inline',\n  templateUrl: './article-code-inline.component.html',\n})\nexport class ArticleCodeInlineComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-hr',\n  templateUrl: './article-hr.component.html',\n})\nexport class ArticleHrComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-ol',\n  templateUrl: './article-ol.component.html',\n})\nexport class ArticleOlComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-ul',\n  templateUrl: './article-ul.component.html',\n})\nexport class ArticleUlComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-meta',\n  templateUrl: './article-meta.component.html',\n})\nexport class ArticleMetaComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-link',\n  templateUrl: './article-link.component.html',\n})\nexport class ArticleLinkComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-lead',\n  templateUrl: './article-lead.component.html',\n})\nexport class ArticleLeadComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-blockquote',\n  templateUrl: './article-blockquote.component.html',\n})\nexport class ArticleBlockquoteComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-table',\n  templateUrl: './article-table.component.html',\n})\nexport class ArticleTableComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-code-block',\n  templateUrl: './article-code-block.component.html',\n})\nexport class ArticleCodeBlockComponent {}\n","import { ArticleBlockquoteComponent } from './article-blockquote/article-blockquote.component';\nimport { ArticleCodeBlockComponent } from './article-code-block/article-code-block.component';\nimport { ArticleCodeInlineComponent } from './article-code-inline/article-code-inline.component';\nimport { ArticleHeadingsComponent } from './article-headings/article-headings.component';\nimport { ArticleHrComponent } from './article-hr/article-hr.component';\nimport { ArticleLeadComponent } from './article-lead/article-lead.component';\nimport { ArticleLinkComponent } from './article-link/article-link.component';\nimport { ArticleMetaComponent } from './article-meta/article-meta.component';\nimport { ArticleOlComponent } from './article-ol/article-ol.component';\nimport { ArticleTableComponent } from './article-table/article-table.component';\nimport { ArticleUlComponent } from './article-ul/article-ul.component';\n\nexport const ARTICLE_EXAMPLES = [\n  ArticleBlockquoteComponent,\n  ArticleCodeBlockComponent,\n  ArticleCodeInlineComponent,\n  ArticleHeadingsComponent,\n  ArticleHrComponent,\n  ArticleLeadComponent,\n  ArticleLinkComponent,\n  ArticleMetaComponent,\n  ArticleOlComponent,\n  ArticleUlComponent,\n  ArticleTableComponent,\n];\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffArticleModule } from '@daffodil/design';\n\nimport { ARTICLE_EXAMPLES } from './examples';\n\n@NgModule({\n  declarations: [\n    ...ARTICLE_EXAMPLES,\n  ],\n  imports: [\n    CommonModule,\n    DaffArticleModule,\n  ],\n  entryComponents: [\n    ...ARTICLE_EXAMPLES,\n  ],\n})\nexport class ArticleExamplesModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {ArticleCodeBlockComponent as ɵa} from './article-code-block/article-code-block.component';"],"names":[],"mappings":";;;;MAOa,wBAAwB;;;YALpC,SAAS,SAAC;;gBAET,QAAQ,EAAE,kBAAkB;gBAC5B,uPAAgD;aACjD;;;MCCY,0BAA0B;;;YALtC,SAAS,SAAC;;gBAET,QAAQ,EAAE,qBAAqB;gBAC/B,yMAAmD;aACpD;;;MCCY,kBAAkB;;;YAL9B,SAAS,SAAC;;gBAET,QAAQ,EAAE,YAAY;gBACtB,mDAA0C;aAC3C;;;MCCY,kBAAkB;;;YAL9B,SAAS,SAAC;;gBAET,QAAQ,EAAE,YAAY;gBACtB,sSAA0C;aAC3C;;;MCCY,kBAAkB;;;YAL9B,SAAS,SAAC;;gBAET,QAAQ,EAAE,YAAY;gBACtB,kTAA0C;aAC3C;;;MCCY,oBAAoB;;;YALhC,SAAS,SAAC;;gBAET,QAAQ,EAAE,cAAc;gBACxB,mHAA4C;aAC7C;;;MCCY,oBAAoB;;;YALhC,SAAS,SAAC;;gBAET,QAAQ,EAAE,cAAc;gBACxB,gFAA4C;aAC7C;;;MCCY,oBAAoB;;;YALhC,SAAS,SAAC;;gBAET,QAAQ,EAAE,cAAc;gBACxB,8FAA4C;aAC7C;;;MCCY,0BAA0B;;;YALtC,SAAS,SAAC;;gBAET,QAAQ,EAAE,oBAAoB;gBAC9B,2NAAkD;aACnD;;;MCCY,qBAAqB;;;YALjC,SAAS,SAAC;;gBAET,QAAQ,EAAE,eAAe;gBACzB,wjBAA6C;aAC9C;;;MCCY,yBAAyB;;;YALrC,SAAS,SAAC;;gBAET,QAAQ,EAAE,oBAAoB;gBAC9B,+HAAkD;aACnD;;;MCMY,gBAAgB,GAAG;IAC9B,0BAA0B;IAC1B,yBAAyB;IACzB,0BAA0B;IAC1B,wBAAwB;IACxB,kBAAkB;IAClB,oBAAoB;IACpB,oBAAoB;IACpB,oBAAoB;IACpB,kBAAkB;IAClB,kBAAkB;IAClB,qBAAqB;;;MCJV,qBAAqB;;;YAZjC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,GAAG,gBAAgB;iBACpB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,iBAAiB;iBAClB;gBACD,eAAe,EAAE;oBACf,GAAG,gBAAgB;iBACpB;aACF;;;AClBD;;;;;;"}
+{"version":3,"file":"daffodil-design-article-examples.js","sources":["../../../libs/design/article/examples/src/article-headings/article-headings.component.ts","../../../libs/design/article/examples/src/article-code-inline/article-code-inline.component.ts","../../../libs/design/article/examples/src/article-hr/article-hr.component.ts","../../../libs/design/article/examples/src/article-ol/article-ol.component.ts","../../../libs/design/article/examples/src/article-ul/article-ul.component.ts","../../../libs/design/article/examples/src/article-meta/article-meta.component.ts","../../../libs/design/article/examples/src/article-link/article-link.component.ts","../../../libs/design/article/examples/src/article-lead/article-lead.component.ts","../../../libs/design/article/examples/src/article-blockquote/article-blockquote.component.ts","../../../libs/design/article/examples/src/article-table/article-table.component.ts","../../../libs/design/article/examples/src/article-code-block/article-code-block.component.ts","../../../libs/design/article/examples/src/examples.ts","../../../libs/design/article/examples/src/article-examples.module.ts","../../../libs/design/article/examples/src/daffodil-design-article-examples.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-headings',\n  templateUrl: './article-headings.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ArticleHeadingsComponent {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-code-inline',\n  templateUrl: './article-code-inline.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ArticleCodeInlineComponent {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-hr',\n  templateUrl: './article-hr.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ArticleHrComponent {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-ol',\n  templateUrl: './article-ol.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ArticleOlComponent {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-ul',\n  templateUrl: './article-ul.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ArticleUlComponent {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-meta',\n  templateUrl: './article-meta.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ArticleMetaComponent {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-link',\n  templateUrl: './article-link.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ArticleLinkComponent {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-lead',\n  templateUrl: './article-lead.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ArticleLeadComponent {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-blockquote',\n  templateUrl: './article-blockquote.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ArticleBlockquoteComponent {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-table',\n  templateUrl: './article-table.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ArticleTableComponent {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'article-code-block',\n  templateUrl: './article-code-block.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ArticleCodeBlockComponent {}\n","import { ArticleBlockquoteComponent } from './article-blockquote/article-blockquote.component';\nimport { ArticleCodeBlockComponent } from './article-code-block/article-code-block.component';\nimport { ArticleCodeInlineComponent } from './article-code-inline/article-code-inline.component';\nimport { ArticleHeadingsComponent } from './article-headings/article-headings.component';\nimport { ArticleHrComponent } from './article-hr/article-hr.component';\nimport { ArticleLeadComponent } from './article-lead/article-lead.component';\nimport { ArticleLinkComponent } from './article-link/article-link.component';\nimport { ArticleMetaComponent } from './article-meta/article-meta.component';\nimport { ArticleOlComponent } from './article-ol/article-ol.component';\nimport { ArticleTableComponent } from './article-table/article-table.component';\nimport { ArticleUlComponent } from './article-ul/article-ul.component';\n\nexport const ARTICLE_EXAMPLES = [\n  ArticleBlockquoteComponent,\n  ArticleCodeBlockComponent,\n  ArticleCodeInlineComponent,\n  ArticleHeadingsComponent,\n  ArticleHrComponent,\n  ArticleLeadComponent,\n  ArticleLinkComponent,\n  ArticleMetaComponent,\n  ArticleOlComponent,\n  ArticleUlComponent,\n  ArticleTableComponent,\n];\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffArticleModule } from '@daffodil/design';\n\nimport { ARTICLE_EXAMPLES } from './examples';\n\n@NgModule({\n  declarations: [\n    ...ARTICLE_EXAMPLES,\n  ],\n  imports: [\n    CommonModule,\n    DaffArticleModule,\n  ],\n  entryComponents: [\n    ...ARTICLE_EXAMPLES,\n  ],\n})\nexport class ArticleExamplesModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {ArticleCodeBlockComponent as ɵa} from './article-code-block/article-code-block.component';"],"names":[],"mappings":";;;;MAWa,wBAAwB;;;YANpC,SAAS,SAAC;;gBAET,QAAQ,EAAE,kBAAkB;gBAC5B,uPAAgD;gBAChD,eAAe,EAAE,uBAAuB,CAAC,MAAM;aAChD;;;MCCY,0BAA0B;;;YANtC,SAAS,SAAC;;gBAET,QAAQ,EAAE,qBAAqB;gBAC/B,yMAAmD;gBACnD,eAAe,EAAE,uBAAuB,CAAC,MAAM;aAChD;;;MCCY,kBAAkB;;;YAN9B,SAAS,SAAC;;gBAET,QAAQ,EAAE,YAAY;gBACtB,mDAA0C;gBAC1C,eAAe,EAAE,uBAAuB,CAAC,MAAM;aAChD;;;MCCY,kBAAkB;;;YAN9B,SAAS,SAAC;;gBAET,QAAQ,EAAE,YAAY;gBACtB,sSAA0C;gBAC1C,eAAe,EAAE,uBAAuB,CAAC,MAAM;aAChD;;;MCCY,kBAAkB;;;YAN9B,SAAS,SAAC;;gBAET,QAAQ,EAAE,YAAY;gBACtB,kTAA0C;gBAC1C,eAAe,EAAE,uBAAuB,CAAC,MAAM;aAChD;;;MCCY,oBAAoB;;;YANhC,SAAS,SAAC;;gBAET,QAAQ,EAAE,cAAc;gBACxB,mHAA4C;gBAC5C,eAAe,EAAE,uBAAuB,CAAC,MAAM;aAChD;;;MCCY,oBAAoB;;;YANhC,SAAS,SAAC;;gBAET,QAAQ,EAAE,cAAc;gBACxB,gFAA4C;gBAC5C,eAAe,EAAE,uBAAuB,CAAC,MAAM;aAChD;;;MCCY,oBAAoB;;;YANhC,SAAS,SAAC;;gBAET,QAAQ,EAAE,cAAc;gBACxB,8FAA4C;gBAC5C,eAAe,EAAE,uBAAuB,CAAC,MAAM;aAChD;;;MCCY,0BAA0B;;;YANtC,SAAS,SAAC;;gBAET,QAAQ,EAAE,oBAAoB;gBAC9B,2NAAkD;gBAClD,eAAe,EAAE,uBAAuB,CAAC,MAAM;aAChD;;;MCCY,qBAAqB;;;YANjC,SAAS,SAAC;;gBAET,QAAQ,EAAE,eAAe;gBACzB,wjBAA6C;gBAC7C,eAAe,EAAE,uBAAuB,CAAC,MAAM;aAChD;;;MCCY,yBAAyB;;;YANrC,SAAS,SAAC;;gBAET,QAAQ,EAAE,oBAAoB;gBAC9B,+HAAkD;gBAClD,eAAe,EAAE,uBAAuB,CAAC,MAAM;aAChD;;;MCEY,gBAAgB,GAAG;IAC9B,0BAA0B;IAC1B,yBAAyB;IACzB,0BAA0B;IAC1B,wBAAwB;IACxB,kBAAkB;IAClB,oBAAoB;IACpB,oBAAoB;IACpB,oBAAoB;IACpB,kBAAkB;IAClB,kBAAkB;IAClB,qBAAqB;;;MCJV,qBAAqB;;;YAZjC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,GAAG,gBAAgB;iBACpB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,iBAAiB;iBAClB;gBACD,eAAe,EAAE;oBACf,GAAG,gBAAgB;iBACpB;aACF;;;AClBD;;;;;;"}

package/fesm2015/daffodil-design-button-examples.js

@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { faChevronLeft, faChevronRight, faPlus, faExclamation, faExclamationTriangle, faCheckCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { DaffButtonModule } from '@daffodil/design';
@@ -14,6 +14,7 @@ BasicButtonComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'basic-button',
                 template: "<button daff-button>Default</button>\n<button daff-button color=\"primary\">Primary</button>\n<button daff-button color=\"secondary\">Secondary</button>\n<button daff-button color=\"tertiary\">Tertiary</button>\n<button daff-button color=\"black\">Black</button>\n<button daff-button color=\"white\">White</button>\n<button daff-button color=\"theme\">Theme</button>\n<button daff-button color=\"theme-contrast\">Theme Contrast</button>\n<button daff-button><fa-icon [icon]=\"faChevronLeft\" daffPrefix></fa-icon>Button</button>\n<button daff-button><fa-icon [icon]=\"faChevronRight\" daffSuffix></fa-icon>Button</button>\n<button daff-button disabled>Disabled</button>\n<a href=\"#\" daff-button>Link</a>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [`
     button[daff-button],
     a[daff-button] {
@@ -50,6 +51,7 @@ IconButtonComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'icon-button',
                 template: "<button daff-icon-button><fa-icon [icon]=\"faPlus\"></fa-icon></button>\n<button daff-icon-button color=\"primary\"><fa-icon [icon]=\"faPlus\"></fa-icon></button>\n<button daff-icon-button color=\"secondary\"><fa-icon [icon]=\"faPlus\"></fa-icon></button>\n<button daff-icon-button color=\"tertiary\"><fa-icon [icon]=\"faPlus\"></fa-icon></button>\n<button daff-icon-button color=\"black\"><fa-icon [icon]=\"faPlus\"></fa-icon></button>\n<button daff-icon-button color=\"white\"><fa-icon [icon]=\"faPlus\"></fa-icon></button>\n<button daff-icon-button color=\"theme\"><fa-icon [icon]=\"faPlus\"></fa-icon></button>\n<button daff-icon-button color=\"theme-contrast\"><fa-icon [icon]=\"faPlus\"></fa-icon></button>\n<button daff-icon-button disabled><fa-icon [icon]=\"faPlus\"></fa-icon></button>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [`
     button[daff-button],
     a[daff-button] {
@@ -87,6 +89,7 @@ RaisedButtonComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'raised-button',
                 template: "<button daff-raised-button>Default</button>\n<button daff-raised-button color=\"primary\">Primary</button>\n<button daff-raised-button color=\"secondary\">Secondary</button>\n<button daff-raised-button color=\"tertiary\">Tertiary</button>\n<button daff-raised-button color=\"black\">Black</button>\n<button daff-raised-button color=\"white\">White</button>\n<button daff-raised-button color=\"theme\">Theme</button>\n<button daff-raised-button color=\"theme-contrast\">Theme Contrast</button>\n<button daff-raised-button><fa-icon [icon]=\"faChevronLeft\" daffPrefix></fa-icon>Button</button>\n<button daff-raised-button><fa-icon [icon]=\"faChevronRight\" daffSuffix></fa-icon>Button</button>\n<button daff-raised-button disabled>Disabled</button>\n<a href=\"#\" daff-raised-button>Link</a>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [`
     button[daff-raised-button],
     a[daff-raised-button] {
@@ -123,6 +126,7 @@ SizeableButtonComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'sizeable-button',
                 template: "<h4>Small Buttons</h4>\n\n<button daff-button size=\"sm\">Small Button</button>\n<button daff-raised-button size=\"sm\">Small Raised Button</button>\n<button daff-stroked-button size=\"sm\">Small Stroked Button</button>\n\n<button daff-underline-button size=\"sm\">Small Underline Button</button>\n<button daff-icon-button size=\"sm\"><fa-icon [icon]=\"faPlus\"></fa-icon></button>\n\n<h4>Medium Buttons (Default)</h4>\n\n<button daff-button size=\"md\">Medium Button</button>\n<button daff-raised-button size=\"md\">Medium Raised Button</button>\n<button daff-stroked-button size=\"md\">Medium Stroked Button</button>\n\n<button daff-underline-button size=\"md\">Medium Underline Button</button>\n<button daff-icon-button size=\"md\"><fa-icon [icon]=\"faPlus\"></fa-icon></button>\n\n<h4>Large Buttons</h4>\n\n<button daff-button size=\"lg\">Large Button</button>\n<button daff-raised-button size=\"lg\">Large Raised Button</button>\n<button daff-stroked-button size=\"lg\">Large Stroked Button</button>\n\n\n<button daff-underline-button size=\"lg\">Large Underline Button</button>\n<button daff-icon-button size=\"lg\"><fa-icon [icon]=\"faPlus\"></fa-icon></button>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [`
     button {
       margin: 4px;
@@ -160,6 +164,7 @@ StatusableButtonComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'statusable-button',
                 template: "<h4>Basic Status Buttons</h4>\n<button daff-button status=\"warn\">Warn</button>\n<button daff-button status=\"danger\">Danger</button>\n<button daff-button status=\"success\">Success</button>\n\n<h4>Stroked Status Buttons</h4>\n<button daff-stroked-button status=\"warn\">Warn</button>\n<button daff-stroked-button status=\"danger\">Danger</button>\n<button daff-stroked-button status=\"success\">Success</button>\n\n<h4>Raised Status Buttons</h4>\n<button daff-raised-button status=\"warn\">Warn</button>\n<button daff-raised-button status=\"danger\">Danger</button>\n<button daff-raised-button status=\"success\">Success</button>\n\n<h4>Underline Status Buttons</h4>\n<button daff-underline-button status=\"warn\">Warn</button>\n<button daff-underline-button status=\"danger\">Danger</button>\n<button daff-underline-button status=\"success\">Success</button>\n\n<h4>Icon Status Buttons</h4>\n<button daff-icon-button status=\"warn\"><fa-icon [icon]=\"faExclamation\"></fa-icon></button>\n<button daff-icon-button status=\"danger\"><fa-icon [icon]=\"faExclamationTriangle\"></fa-icon></button>\n<button daff-icon-button status=\"success\"><fa-icon [icon]=\"faCheckCircle\"></fa-icon></button>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [`
     button[daff-button],
     button[daff-stroked-button],
@@ -200,6 +205,7 @@ StrokedButtonComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'stroked-button',
                 template: "<button daff-stroked-button>Default</button>\n<button daff-stroked-button color=\"primary\">Primary</button>\n<button daff-stroked-button color=\"secondary\">Secondary</button>\n<button daff-stroked-button color=\"tertiary\">Tertiary</button>\n<button daff-stroked-button color=\"black\">Black</button>\n<button daff-stroked-button color=\"white\">White</button>\n<button daff-stroked-button color=\"theme\">Theme</button>\n<button daff-stroked-button color=\"theme-contrast\">Theme Contrast</button>\n<button daff-stroked-button><fa-icon [icon]=\"faChevronLeft\" daffPrefix></fa-icon>Button</button>\n<button daff-stroked-button><fa-icon [icon]=\"faChevronRight\" daffSuffix></fa-icon>Button</button>\n<button daff-stroked-button disabled>Disabled</button>\n<a href=\"#\" daff-stroked-button>Link</a>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [`
     button[daff-stroked-button],
     a[daff-stroked-button] {
@@ -237,6 +243,7 @@ UnderlineButtonComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'underline-button',
                 template: "<button daff-underline-button>Default</button>\n<button daff-underline-button color=\"primary\">Primary</button>\n<button daff-underline-button color=\"secondary\">Secondary</button>\n<button daff-underline-button color=\"tertiary\">Tertiary</button>\n<button daff-underline-button color=\"black\">Black</button>\n<button daff-underline-button color=\"white\">White</button>\n<button daff-underline-button color=\"theme\">Theme</button>\n<button daff-underline-button color=\"theme-contrast\">Theme Contrast</button>\n<button daff-underline-button><fa-icon [icon]=\"faChevronLeft\" daffPrefix></fa-icon>Button</button>\n<button daff-underline-button><fa-icon [icon]=\"faChevronRight\" daffSuffix></fa-icon>Button</button>\n<button daff-underline-button disabled>Disabled</button>\n<a href=\"#\" daff-underline-button>Link</a>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [`
     button[daff-underline-button],
     a[daff-underline-button] {

package/fesm2015/daffodil-design-button-examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-button-examples.js","sources":["../../../libs/design/button/examples/src/basic-button/basic-button.component.ts","../../../libs/design/button/examples/src/basic-button/basic-button.module.ts","../../../libs/design/button/examples/src/icon-button/icon-button.component.ts","../../../libs/design/button/examples/src/icon-button/icon-button.module.ts","../../../libs/design/button/examples/src/raised-button/raised-button.component.ts","../../../libs/design/button/examples/src/raised-button/raised-button.module.ts","../../../libs/design/button/examples/src/sizeable-button/sizeable-button.component.ts","../../../libs/design/button/examples/src/sizeable-button/sizeable-button.module.ts","../../../libs/design/button/examples/src/statusable-button/statusable-button.component.ts","../../../libs/design/button/examples/src/statusable-button/statusable-button.module.ts","../../../libs/design/button/examples/src/stroked-button/stroked-button.component.ts","../../../libs/design/button/examples/src/stroked-button/stroked-button.module.ts","../../../libs/design/button/examples/src/underline-button/underline-button.component.ts","../../../libs/design/button/examples/src/underline-button/underline-button.module.ts","../../../libs/design/button/examples/src/public_api.ts","../../../libs/design/button/examples/src/daffodil-design-button-examples.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport {\n  faChevronLeft,\n  faChevronRight,\n} from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'basic-button',\n  templateUrl: './basic-button.component.html',\n  styles: [`\n    button[daff-button],\n    a[daff-button] {\n      margin: 4px;\n    }\n  `],\n})\nexport class BasicButtonComponent {\n  faChevronLeft = faChevronLeft;\n  faChevronRight = faChevronRight;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { BasicButtonComponent } from './basic-button.component';\n\n\n@NgModule({\n  declarations: [\n    BasicButtonComponent,\n  ],\n  exports: [\n    BasicButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class BasicButtonModule { }\n","import { Component } from '@angular/core';\nimport { faPlus } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'icon-button',\n  templateUrl: './icon-button.component.html',\n  styles: [`\n    button[daff-button],\n    a[daff-button] {\n      margin: 4px;\n    }\n  `],\n})\nexport class IconButtonComponent {\n  faPlus = faPlus;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { IconButtonComponent } from './icon-button.component';\n\n\n@NgModule({\n  declarations: [\n    IconButtonComponent,\n  ],\n  exports: [\n    IconButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class IconButtonModule { }\n","import { Component } from '@angular/core';\nimport {\n  faChevronLeft,\n  faChevronRight,\n} from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'raised-button',\n  templateUrl: './raised-button.component.html',\n  styles: [`\n    button[daff-raised-button],\n    a[daff-raised-button] {\n      margin: 4px;\n    }\n  `],\n})\nexport class RaisedButtonComponent {\n  faChevronLeft = faChevronLeft;\n  faChevronRight = faChevronRight;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { RaisedButtonComponent } from './raised-button.component';\n\n\n@NgModule({\n  declarations: [\n    RaisedButtonComponent,\n  ],\n  exports: [\n    RaisedButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class RaisedButtonModule { }\n","import { Component } from '@angular/core';\nimport { faPlus } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'sizeable-button',\n  templateUrl: './sizeable-button.component.html',\n  styles: [`\n    button {\n      margin: 4px;\n    }\n  `],\n})\nexport class SizeableButtonComponent {\n  faPlus = faPlus;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { SizeableButtonComponent } from './sizeable-button.component';\n\n\n@NgModule({\n  declarations: [\n    SizeableButtonComponent,\n  ],\n  exports: [\n    SizeableButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class SizeableButtonModule { }\n","import { Component } from '@angular/core';\nimport {\n  faExclamation,\n  faExclamationTriangle,\n  faCheckCircle,\n} from '@fortawesome/free-solid-svg-icons';\n\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'statusable-button',\n  templateUrl: './statusable-button.component.html',\n  styles: [`\n    button[daff-button],\n    button[daff-stroked-button],\n    button[daff-raised-button],\n    button[daff-underline-button],\n    button[daff-icon-button] {\n      margin: 4px;\n    }\n  `],\n})\nexport class StatusableButtonComponent {\n  faExclamation = faExclamation;\n  faExclamationTriangle = faExclamationTriangle;\n  faCheckCircle = faCheckCircle;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { StatusableButtonComponent } from './statusable-button.component';\n\n\n@NgModule({\n  declarations: [\n    StatusableButtonComponent,\n  ],\n  exports: [\n    StatusableButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class StatusableButtonModule { }\n","import { Component } from '@angular/core';\nimport {\n  faChevronLeft,\n  faChevronRight,\n} from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'stroked-button',\n  templateUrl: './stroked-button.component.html',\n  styles: [`\n    button[daff-stroked-button],\n    a[daff-stroked-button] {\n      margin: 4px;\n    }\n  `],\n})\nexport class StrokedButtonComponent {\n  faChevronLeft = faChevronLeft;\n  faChevronRight = faChevronRight;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { StrokedButtonComponent } from './stroked-button.component';\n\n\n@NgModule({\n  declarations: [\n    StrokedButtonComponent,\n  ],\n  exports: [\n    StrokedButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class StrokedButtonModule { }\n","import { Component } from '@angular/core';\nimport {\n  faChevronLeft,\n  faChevronRight,\n} from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'underline-button',\n  templateUrl: './underline-button.component.html',\n  styles: [`\n    button[daff-underline-button],\n    a[daff-underline-button] {\n      margin: 4px;\n    }\n  `],\n})\nexport class UnderlineButtonComponent {\n  faChevronLeft = faChevronLeft;\n  faChevronRight = faChevronRight;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { UnderlineButtonComponent } from './underline-button.component';\n\n\n@NgModule({\n  declarations: [\n    UnderlineButtonComponent,\n  ],\n  exports: [\n    UnderlineButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class UnderlineButtonModule { }\n","import { BasicButtonComponent } from './basic-button/basic-button.component';\nexport { BasicButtonModule } from './basic-button/basic-button.module';\nimport { IconButtonComponent } from './icon-button/icon-button.component';\nexport { IconButtonModule } from './icon-button/icon-button.module';\nimport { RaisedButtonComponent } from './raised-button/raised-button.component';\nexport { RaisedButtonModule } from './raised-button/raised-button.module';\nimport { SizeableButtonComponent } from './sizeable-button/sizeable-button.component';\nexport { SizeableButtonModule } from './sizeable-button/sizeable-button.module';\nimport { StatusableButtonComponent } from './statusable-button/statusable-button.component';\nexport { StatusableButtonModule } from './statusable-button/statusable-button.module';\nimport { StrokedButtonComponent } from './stroked-button/stroked-button.component';\nexport { StrokedButtonModule } from './stroked-button/stroked-button.module';\nimport { UnderlineButtonComponent } from './underline-button/underline-button.component';\nexport { UnderlineButtonModule } from './underline-button/underline-button.module';\n\nexport const BUTTON_EXAMPLES = [\n  BasicButtonComponent,\n  IconButtonComponent,\n  RaisedButtonComponent,\n  SizeableButtonComponent,\n  StatusableButtonComponent,\n  StrokedButtonComponent,\n  UnderlineButtonComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {BasicButtonComponent as ɵa} from './basic-button/basic-button.component';\nexport {IconButtonComponent as ɵb} from './icon-button/icon-button.component';\nexport {RaisedButtonComponent as ɵc} from './raised-button/raised-button.component';\nexport {SizeableButtonComponent as ɵd} from './sizeable-button/sizeable-button.component';\nexport {StatusableButtonComponent as ɵe} from './statusable-button/statusable-button.component';\nexport {StrokedButtonComponent as ɵf} from './stroked-button/stroked-button.component';\nexport {UnderlineButtonComponent as ɵg} from './underline-button/underline-button.component';"],"names":[],"mappings":"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"}
+{"version":3,"file":"daffodil-design-button-examples.js","sources":["../../../libs/design/button/examples/src/basic-button/basic-button.component.ts","../../../libs/design/button/examples/src/basic-button/basic-button.module.ts","../../../libs/design/button/examples/src/icon-button/icon-button.component.ts","../../../libs/design/button/examples/src/icon-button/icon-button.module.ts","../../../libs/design/button/examples/src/raised-button/raised-button.component.ts","../../../libs/design/button/examples/src/raised-button/raised-button.module.ts","../../../libs/design/button/examples/src/sizeable-button/sizeable-button.component.ts","../../../libs/design/button/examples/src/sizeable-button/sizeable-button.module.ts","../../../libs/design/button/examples/src/statusable-button/statusable-button.component.ts","../../../libs/design/button/examples/src/statusable-button/statusable-button.module.ts","../../../libs/design/button/examples/src/stroked-button/stroked-button.component.ts","../../../libs/design/button/examples/src/stroked-button/stroked-button.module.ts","../../../libs/design/button/examples/src/underline-button/underline-button.component.ts","../../../libs/design/button/examples/src/underline-button/underline-button.module.ts","../../../libs/design/button/examples/src/public_api.ts","../../../libs/design/button/examples/src/daffodil-design-button-examples.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  faChevronLeft,\n  faChevronRight,\n} from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'basic-button',\n  templateUrl: './basic-button.component.html',\n  styles: [`\n    button[daff-button],\n    a[daff-button] {\n      margin: 4px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BasicButtonComponent {\n  faChevronLeft = faChevronLeft;\n  faChevronRight = faChevronRight;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { BasicButtonComponent } from './basic-button.component';\n\n\n@NgModule({\n  declarations: [\n    BasicButtonComponent,\n  ],\n  exports: [\n    BasicButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class BasicButtonModule { }\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport { faPlus } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'icon-button',\n  templateUrl: './icon-button.component.html',\n  styles: [`\n    button[daff-button],\n    a[daff-button] {\n      margin: 4px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IconButtonComponent {\n  faPlus = faPlus;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { IconButtonComponent } from './icon-button.component';\n\n\n@NgModule({\n  declarations: [\n    IconButtonComponent,\n  ],\n  exports: [\n    IconButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class IconButtonModule { }\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  faChevronLeft,\n  faChevronRight,\n} from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'raised-button',\n  templateUrl: './raised-button.component.html',\n  styles: [`\n    button[daff-raised-button],\n    a[daff-raised-button] {\n      margin: 4px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RaisedButtonComponent {\n  faChevronLeft = faChevronLeft;\n  faChevronRight = faChevronRight;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { RaisedButtonComponent } from './raised-button.component';\n\n\n@NgModule({\n  declarations: [\n    RaisedButtonComponent,\n  ],\n  exports: [\n    RaisedButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class RaisedButtonModule { }\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport { faPlus } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'sizeable-button',\n  templateUrl: './sizeable-button.component.html',\n  styles: [`\n    button {\n      margin: 4px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SizeableButtonComponent {\n  faPlus = faPlus;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { SizeableButtonComponent } from './sizeable-button.component';\n\n\n@NgModule({\n  declarations: [\n    SizeableButtonComponent,\n  ],\n  exports: [\n    SizeableButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class SizeableButtonModule { }\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  faExclamation,\n  faExclamationTriangle,\n  faCheckCircle,\n} from '@fortawesome/free-solid-svg-icons';\n\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'statusable-button',\n  templateUrl: './statusable-button.component.html',\n  styles: [`\n    button[daff-button],\n    button[daff-stroked-button],\n    button[daff-raised-button],\n    button[daff-underline-button],\n    button[daff-icon-button] {\n      margin: 4px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StatusableButtonComponent {\n  faExclamation = faExclamation;\n  faExclamationTriangle = faExclamationTriangle;\n  faCheckCircle = faCheckCircle;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { StatusableButtonComponent } from './statusable-button.component';\n\n\n@NgModule({\n  declarations: [\n    StatusableButtonComponent,\n  ],\n  exports: [\n    StatusableButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class StatusableButtonModule { }\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  faChevronLeft,\n  faChevronRight,\n} from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'stroked-button',\n  templateUrl: './stroked-button.component.html',\n  styles: [`\n    button[daff-stroked-button],\n    a[daff-stroked-button] {\n      margin: 4px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StrokedButtonComponent {\n  faChevronLeft = faChevronLeft;\n  faChevronRight = faChevronRight;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { StrokedButtonComponent } from './stroked-button.component';\n\n\n@NgModule({\n  declarations: [\n    StrokedButtonComponent,\n  ],\n  exports: [\n    StrokedButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class StrokedButtonModule { }\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  faChevronLeft,\n  faChevronRight,\n} from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'underline-button',\n  templateUrl: './underline-button.component.html',\n  styles: [`\n    button[daff-underline-button],\n    a[daff-underline-button] {\n      margin: 4px;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class UnderlineButtonComponent {\n  faChevronLeft = faChevronLeft;\n  faChevronRight = faChevronRight;\n}\n","import { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffButtonModule } from '@daffodil/design';\n\nimport { UnderlineButtonComponent } from './underline-button.component';\n\n\n@NgModule({\n  declarations: [\n    UnderlineButtonComponent,\n  ],\n  exports: [\n    UnderlineButtonComponent,\n  ],\n  imports: [\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class UnderlineButtonModule { }\n","import { BasicButtonComponent } from './basic-button/basic-button.component';\nexport { BasicButtonModule } from './basic-button/basic-button.module';\nimport { IconButtonComponent } from './icon-button/icon-button.component';\nexport { IconButtonModule } from './icon-button/icon-button.module';\nimport { RaisedButtonComponent } from './raised-button/raised-button.component';\nexport { RaisedButtonModule } from './raised-button/raised-button.module';\nimport { SizeableButtonComponent } from './sizeable-button/sizeable-button.component';\nexport { SizeableButtonModule } from './sizeable-button/sizeable-button.module';\nimport { StatusableButtonComponent } from './statusable-button/statusable-button.component';\nexport { StatusableButtonModule } from './statusable-button/statusable-button.module';\nimport { StrokedButtonComponent } from './stroked-button/stroked-button.component';\nexport { StrokedButtonModule } from './stroked-button/stroked-button.module';\nimport { UnderlineButtonComponent } from './underline-button/underline-button.component';\nexport { UnderlineButtonModule } from './underline-button/underline-button.module';\n\nexport const BUTTON_EXAMPLES = [\n  BasicButtonComponent,\n  IconButtonComponent,\n  RaisedButtonComponent,\n  SizeableButtonComponent,\n  StatusableButtonComponent,\n  StrokedButtonComponent,\n  UnderlineButtonComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {BasicButtonComponent as ɵa} from './basic-button/basic-button.component';\nexport {IconButtonComponent as ɵb} from './icon-button/icon-button.component';\nexport {RaisedButtonComponent as ɵc} from './raised-button/raised-button.component';\nexport {SizeableButtonComponent as ɵd} from './sizeable-button/sizeable-button.component';\nexport {StatusableButtonComponent as ɵe} from './statusable-button/statusable-button.component';\nexport {StrokedButtonComponent as ɵf} from './stroked-button/stroked-button.component';\nexport {UnderlineButtonComponent as ɵg} from './underline-button/underline-button.component';"],"names":[],"mappings":"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"}

package/fesm2015/daffodil-design-callout-examples.js

@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { faMobile } from '@fortawesome/free-solid-svg-icons';
 import { CommonModule } from '@angular/common';
@@ -26,6 +26,7 @@ CalloutThemingComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'callout-theming',
                 template: "<daff-callout [color]=\"colorControl.value\">\n\t<div class=\"daff-callout-theming__icon\" daffCalloutIcon>\n\t\t<fa-icon [icon]=\"faMobile\"></fa-icon>\n\t</div>\n\t<div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>\n\t<h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>\n\t<div daffCalloutSubtitle>\n\t\t<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>\n\t\t<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>\n\t</div>\n\t<div daffCalloutBody>\n\t\t<a daff-button color=\"theme-contrast\" href=\"https://www.daff.io\">What is Daffodil?</a>\n\t</div>\n</daff-callout>\n\n<select [formControl]=\"colorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".daff-callout-theming__icon{display:flex;background:rgba(var(--daff-theme-rgb),.2);border-radius:50%;color:var(--daff-theme-contrast-rgb);width:48px;height:48px;justify-content:center;align-items:center;padding:12px 0}"]
             },] }
 ];
@@ -64,6 +65,7 @@ CalloutTextAlignmentComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'callout-text-alignment',
                 template: "<daff-callout [textAlignment]=\"textAlignControl.value\">\n\t<daff-container size=\"md\">\n\t\t<div class=\"daff-callout-text-alignment__icon\" daffCalloutIcon>\n\t\t\t<fa-icon [icon]=\"faMobile\"></fa-icon>\n\t\t</div>\n\t\t<div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>\n\t\t<h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>\n\t\t<div daffCalloutSubtitle>\n\t\t\t<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>\n\t\t\t<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>\n\t\t</div>\n\t\t<div daffCalloutBody>\n\t\t\t<a daff-button color=\"theme-contrast\" href=\"https://www.daff.io\">What is Daffodil?</a>\n\t\t</div>\n\t</daff-container>\n</daff-callout>\n\n<select [formControl]=\"textAlignControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".daff-callout-text-alignment__icon{display:flex;background:rgba(var(--daff-theme-rgb),.2);border-radius:50%;color:var(--daff-theme-contrast-rgb);width:48px;height:48px;justify-content:center;align-items:center;padding:12px 0}"]
             },] }
 ];
@@ -96,6 +98,7 @@ CalloutWithGridComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'callout-with-grid',
                 template: "<daff-callout color=\"theme\">\n\t<daff-container class=\"daff-callout-with-grid__grid\">\n\t\t<div class=\"daff-callout-with-grid__image\">\n\t\t\t<img src=\"/assets/design/callout/pwa-illustration.svg\" alt=\"PWA Illustration\">\n\t\t</div>\n\t\t<div class=\"daff-callout-with-grid__content-wrapper\">\n\t\t\t<div class=\"daff-callout-with-grid__icon\" daffCalloutIcon>\n\t\t\t\t<fa-icon [icon]=\"faMobile\"></fa-icon>\n\t\t\t</div>\n\t\t\t<div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>\n\t\t\t<h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>\n\t\t\t<div daffCalloutSubtitle>\n\t\t\t\t<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>\n\t\t\t\t<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>\n\t\t\t</div>\n\t\t\t<div daffCalloutBody>\n\t\t\t\t<div class=\"daff-callout-with-grid__actions\">\n\t\t\t\t\t<a daff-button color=\"theme-contrast\" href=\"https://www.daff.io\" class=\"daff-callout-with-grid__daffodil-action\">What is Daffodil?</a>\n\t\t\t\t\t<a daff-underline-button color=\"theme-contrast\" routerLink=\"/contact\" class=\"daff-callout-with-grid__demo-action\">Sign up for a demo</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</daff-container>\n</daff-callout>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".daff-callout-with-grid__grid{display:grid;grid-template:\"image\" \"content\"/1fr;grid-gap:24px}@media (min-width:768px){.daff-callout-with-grid__grid{grid-template:\"image content\"/1fr 1fr;grid-gap:48px}}.daff-callout-with-grid__image{grid-area:image}.daff-callout-with-grid__content-wrapper{grid-area:content}.daff-callout-with-grid__actions{display:flex;flex-direction:column}@media (min-width:480px){.daff-callout-with-grid__actions{flex-direction:row;align-items:center}}.daff-callout-with-grid__daffodil-action{margin:0 0 24px}@media (min-width:480px){.daff-callout-with-grid__daffodil-action{margin:0 24px 0 0}}.daff-callout-with-grid__icon{display:flex;background:rgba(var(--daff-theme-rgb),.2);border-radius:50%;color:var(--daff-theme-contrast-rgb);width:48px;height:48px;justify-content:center;align-items:center;padding:12px 0}"]
             },] }
 ];
@@ -128,6 +131,7 @@ CompactCalloutComponent.decorators = [
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'compact-callout',
                 template: "<daff-callout [compact]=\"true\">\n\t<daff-container size=\"md\">\n\t\t<div class=\"daff-compact-callout__icon\" daffCalloutIcon>\n\t\t\t<fa-icon [icon]=\"faMobile\"></fa-icon>\n\t\t</div>\n\t\t<div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>\n\t\t<h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>\n\t\t<div daffCalloutSubtitle>\n\t\t\t<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>\n\t\t\t<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>\n\t\t</div>\n\t\t<div daffCalloutBody>\n\t\t\t<a daff-button color=\"theme-contrast\" href=\"https://www.daff.io\">What is Daffodil?</a>\n\t\t</div>\n\t</daff-container>\n</daff-callout>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".daff-compact-callout__icon{display:flex;background:rgba(var(--daff-theme-rgb),.2);border-radius:50%;color:var(--daff-theme-contrast-rgb);width:48px;height:48px;justify-content:center;align-items:center;padding:12px 0}"]
             },] }
 ];

package/fesm2015/daffodil-design-callout-examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-callout-examples.js","sources":["../../../libs/design/callout/examples/src/callout-theming/callout-theming.component.ts","../../../libs/design/callout/examples/src/callout-theming/callout-theming.module.ts","../../../libs/design/callout/examples/src/callout-text-alignment/callout-text-alignment.component.ts","../../../libs/design/callout/examples/src/callout-text-alignment/callout-text-alignment.module.ts","../../../libs/design/callout/examples/src/callout-with-grid/callout-with-grid.component.ts","../../../libs/design/callout/examples/src/callout-with-grid/callout-with-grid.module.ts","../../../libs/design/callout/examples/src/compact-callout/compact-callout.component.ts","../../../libs/design/callout/examples/src/compact-callout/compact-callout.module.ts","../../../libs/design/callout/examples/src/examples.ts","../../../libs/design/callout/examples/src/daffodil-design-callout-examples.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { faMobile } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'callout-theming',\n  templateUrl: './callout-theming.component.html',\n  styleUrls: ['./callout-theming.component.scss'],\n})\nexport class CalloutThemingComponent {\n  faMobile = faMobile;\n  colorControl: FormControl = new FormControl('');\n\n  options = [\n    { value: '', label: 'Default' },\n    { value: 'primary', label: 'Primary' },\n    { value: 'secondary', label: 'Secondary' },\n    { value: 'tertiary', label: 'Tertiary' },\n    { value: 'white', label: 'White' },\n    { value: 'black', label: 'Black' },\n    { value: 'theme', label: 'Theme' },\n    { value: 'theme-contrast', label: 'Theme Contrast' },\n  ];\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport {\n  DaffButtonModule,\n  DaffCalloutModule,\n} from '@daffodil/design';\n\nimport { CalloutThemingComponent } from './callout-theming.component';\n\n@NgModule({\n  declarations: [\n    CalloutThemingComponent,\n  ],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    DaffCalloutModule,\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class CalloutThemingModule { }\n","import { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { faMobile } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'callout-text-alignment',\n  templateUrl: './callout-text-alignment.component.html',\n  styleUrls: ['./callout-text-alignment.component.scss'],\n})\nexport class CalloutTextAlignmentComponent {\n  faMobile = faMobile;\n  textAlignControl: FormControl = new FormControl('');\n\n  options = [\n    { value: '', label: 'Default' },\n    { value: 'left', label: 'Left' },\n    { value: 'center', label: 'Center' },\n    { value: 'right', label: 'Right' },\n  ];\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport {\n  DaffButtonModule,\n  DaffCalloutModule,\n  DaffContainerModule,\n} from '@daffodil/design';\n\nimport { CalloutTextAlignmentComponent } from './callout-text-alignment.component';\n\n@NgModule({\n  declarations: [\n    CalloutTextAlignmentComponent,\n  ],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    DaffCalloutModule,\n    DaffContainerModule,\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class CalloutTextAlignmentModule { }\n","import { Component } from '@angular/core';\nimport { faMobile } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'callout-with-grid',\n  templateUrl: './callout-with-grid.component.html',\n  styleUrls: ['./callout-with-grid.component.scss'],\n})\nexport class CalloutWithGridComponent {\n  faMobile = faMobile;\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport {\n  DaffCalloutModule,\n  DaffContainerModule,\n  DaffButtonModule,\n} from '@daffodil/design';\n\nimport { CalloutWithGridComponent } from './callout-with-grid.component';\n\n@NgModule({\n  declarations: [\n    CalloutWithGridComponent,\n  ],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    DaffCalloutModule,\n    DaffContainerModule,\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class CalloutWithGridModule { }\n","import { Component } from '@angular/core';\nimport { faMobile } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'compact-callout',\n  templateUrl: './compact-callout.component.html',\n  styleUrls: ['./compact-callout.component.scss'],\n})\nexport class CompactCalloutComponent {\n  faMobile = faMobile;\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport {\n  DaffButtonModule,\n  DaffCalloutModule,\n  DaffContainerModule,\n} from '@daffodil/design';\n\nimport { CompactCalloutComponent } from './compact-callout.component';\n\n@NgModule({\n  declarations: [\n    CompactCalloutComponent,\n  ],\n  imports: [\n    CommonModule,\n\n    DaffCalloutModule,\n    DaffContainerModule,\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class CompactCalloutModule { }\n","import { CalloutTextAlignmentComponent } from './callout-text-alignment/callout-text-alignment.component';\nimport { CalloutThemingComponent } from './callout-theming/callout-theming.component';\nimport { CalloutWithGridComponent } from './callout-with-grid/callout-with-grid.component';\nimport { CompactCalloutComponent } from './compact-callout/compact-callout.component';\n\nexport const CALLOUT_EXAMPLES = [\n  CalloutThemingComponent,\n  CalloutTextAlignmentComponent,\n  CalloutWithGridComponent,\n  CompactCalloutComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAUa,uBAAuB;IANpC;QAOE,aAAQ,GAAG,QAAQ,CAAC;QACpB,iBAAY,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QAEhD,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC/B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;YAC1C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE;SACrD,CAAC;KACH;;;YApBA,SAAS,SAAC;;gBAET,QAAQ,EAAE,iBAAiB;gBAC3B,s3BAA+C;;aAEhD;;;MCeY,oBAAoB;;;YAZhC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,uBAAuB;iBACxB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBACnB,iBAAiB;oBACjB,gBAAgB;oBAChB,iBAAiB;iBAClB;aACF;;;MCbY,6BAA6B;IAN1C;QAOE,aAAQ,GAAG,QAAQ,CAAC;QACpB,qBAAgB,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QAEpD,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC/B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;YAChC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;YACpC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;SACnC,CAAC;KACH;;;YAhBA,SAAS,SAAC;;gBAET,QAAQ,EAAE,wBAAwB;gBAClC,09BAAsD;;aAEvD;;;MCiBY,0BAA0B;;;YAbtC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,6BAA6B;iBAC9B;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBACnB,iBAAiB;oBACjB,mBAAmB;oBACnB,gBAAgB;oBAChB,iBAAiB;iBAClB;aACF;;;MChBY,wBAAwB;IANrC;QAOE,aAAQ,GAAG,QAAQ,CAAC;KACrB;;;YARA,SAAS,SAAC;;gBAET,QAAQ,EAAE,mBAAmB;gBAC7B,20CAAiD;;aAElD;;;MCkBY,qBAAqB;;;YAbjC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,wBAAwB;iBACzB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBACnB,iBAAiB;oBACjB,mBAAmB;oBACnB,gBAAgB;oBAChB,iBAAiB;iBAClB;aACF;;;MChBY,uBAAuB;IANpC;QAOE,aAAQ,GAAG,QAAQ,CAAC;KACrB;;;YARA,SAAS,SAAC;;gBAET,QAAQ,EAAE,iBAAiB;gBAC3B,gyBAA+C;;aAEhD;;;MCkBY,oBAAoB;;;YAbhC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,uBAAuB;iBACxB;gBACD,OAAO,EAAE;oBACP,YAAY;oBAEZ,iBAAiB;oBACjB,mBAAmB;oBACnB,gBAAgB;oBAChB,iBAAiB;iBAClB;aACF;;;MCpBY,gBAAgB,GAAG;IAC9B,uBAAuB;IACvB,6BAA6B;IAC7B,wBAAwB;IACxB,uBAAuB;;;ACTzB;;;;;;"}
+{"version":3,"file":"daffodil-design-callout-examples.js","sources":["../../../libs/design/callout/examples/src/callout-theming/callout-theming.component.ts","../../../libs/design/callout/examples/src/callout-theming/callout-theming.module.ts","../../../libs/design/callout/examples/src/callout-text-alignment/callout-text-alignment.component.ts","../../../libs/design/callout/examples/src/callout-text-alignment/callout-text-alignment.module.ts","../../../libs/design/callout/examples/src/callout-with-grid/callout-with-grid.component.ts","../../../libs/design/callout/examples/src/callout-with-grid/callout-with-grid.module.ts","../../../libs/design/callout/examples/src/compact-callout/compact-callout.component.ts","../../../libs/design/callout/examples/src/compact-callout/compact-callout.module.ts","../../../libs/design/callout/examples/src/examples.ts","../../../libs/design/callout/examples/src/daffodil-design-callout-examples.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { faMobile } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'callout-theming',\n  templateUrl: './callout-theming.component.html',\n  styleUrls: ['./callout-theming.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CalloutThemingComponent {\n  faMobile = faMobile;\n  colorControl: FormControl = new FormControl('');\n\n  options = [\n    { value: '', label: 'Default' },\n    { value: 'primary', label: 'Primary' },\n    { value: 'secondary', label: 'Secondary' },\n    { value: 'tertiary', label: 'Tertiary' },\n    { value: 'white', label: 'White' },\n    { value: 'black', label: 'Black' },\n    { value: 'theme', label: 'Theme' },\n    { value: 'theme-contrast', label: 'Theme Contrast' },\n  ];\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport {\n  DaffButtonModule,\n  DaffCalloutModule,\n} from '@daffodil/design';\n\nimport { CalloutThemingComponent } from './callout-theming.component';\n\n@NgModule({\n  declarations: [\n    CalloutThemingComponent,\n  ],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    DaffCalloutModule,\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class CalloutThemingModule { }\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { faMobile } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'callout-text-alignment',\n  templateUrl: './callout-text-alignment.component.html',\n  styleUrls: ['./callout-text-alignment.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CalloutTextAlignmentComponent {\n  faMobile = faMobile;\n  textAlignControl: FormControl = new FormControl('');\n\n  options = [\n    { value: '', label: 'Default' },\n    { value: 'left', label: 'Left' },\n    { value: 'center', label: 'Center' },\n    { value: 'right', label: 'Right' },\n  ];\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport {\n  DaffButtonModule,\n  DaffCalloutModule,\n  DaffContainerModule,\n} from '@daffodil/design';\n\nimport { CalloutTextAlignmentComponent } from './callout-text-alignment.component';\n\n@NgModule({\n  declarations: [\n    CalloutTextAlignmentComponent,\n  ],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    DaffCalloutModule,\n    DaffContainerModule,\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class CalloutTextAlignmentModule { }\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport { faMobile } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'callout-with-grid',\n  templateUrl: './callout-with-grid.component.html',\n  styleUrls: ['./callout-with-grid.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CalloutWithGridComponent {\n  faMobile = faMobile;\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport {\n  DaffCalloutModule,\n  DaffContainerModule,\n  DaffButtonModule,\n} from '@daffodil/design';\n\nimport { CalloutWithGridComponent } from './callout-with-grid.component';\n\n@NgModule({\n  declarations: [\n    CalloutWithGridComponent,\n  ],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    DaffCalloutModule,\n    DaffContainerModule,\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class CalloutWithGridModule { }\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport { faMobile } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'compact-callout',\n  templateUrl: './compact-callout.component.html',\n  styleUrls: ['./compact-callout.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CompactCalloutComponent {\n  faMobile = faMobile;\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport {\n  DaffButtonModule,\n  DaffCalloutModule,\n  DaffContainerModule,\n} from '@daffodil/design';\n\nimport { CompactCalloutComponent } from './compact-callout.component';\n\n@NgModule({\n  declarations: [\n    CompactCalloutComponent,\n  ],\n  imports: [\n    CommonModule,\n\n    DaffCalloutModule,\n    DaffContainerModule,\n    DaffButtonModule,\n    FontAwesomeModule,\n  ],\n})\nexport class CompactCalloutModule { }\n","import { CalloutTextAlignmentComponent } from './callout-text-alignment/callout-text-alignment.component';\nimport { CalloutThemingComponent } from './callout-theming/callout-theming.component';\nimport { CalloutWithGridComponent } from './callout-with-grid/callout-with-grid.component';\nimport { CompactCalloutComponent } from './compact-callout/compact-callout.component';\n\nexport const CALLOUT_EXAMPLES = [\n  CalloutThemingComponent,\n  CalloutTextAlignmentComponent,\n  CalloutWithGridComponent,\n  CompactCalloutComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAca,uBAAuB;IAPpC;QAQE,aAAQ,GAAG,QAAQ,CAAC;QACpB,iBAAY,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QAEhD,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC/B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;YAC1C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE;SACrD,CAAC;KACH;;;YArBA,SAAS,SAAC;;gBAET,QAAQ,EAAE,iBAAiB;gBAC3B,s3BAA+C;gBAE/C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCWY,oBAAoB;;;YAZhC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,uBAAuB;iBACxB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBACnB,iBAAiB;oBACjB,gBAAgB;oBAChB,iBAAiB;iBAClB;aACF;;;MCTY,6BAA6B;IAP1C;QAQE,aAAQ,GAAG,QAAQ,CAAC;QACpB,qBAAgB,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QAEpD,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC/B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;YAChC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;YACpC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;SACnC,CAAC;KACH;;;YAjBA,SAAS,SAAC;;gBAET,QAAQ,EAAE,wBAAwB;gBAClC,09BAAsD;gBAEtD,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCaY,0BAA0B;;;YAbtC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,6BAA6B;iBAC9B;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBACnB,iBAAiB;oBACjB,mBAAmB;oBACnB,gBAAgB;oBAChB,iBAAiB;iBAClB;aACF;;;MCZY,wBAAwB;IAPrC;QAQE,aAAQ,GAAG,QAAQ,CAAC;KACrB;;;YATA,SAAS,SAAC;;gBAET,QAAQ,EAAE,mBAAmB;gBAC7B,20CAAiD;gBAEjD,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCcY,qBAAqB;;;YAbjC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,wBAAwB;iBACzB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBACnB,iBAAiB;oBACjB,mBAAmB;oBACnB,gBAAgB;oBAChB,iBAAiB;iBAClB;aACF;;;MCZY,uBAAuB;IAPpC;QAQE,aAAQ,GAAG,QAAQ,CAAC;KACrB;;;YATA,SAAS,SAAC;;gBAET,QAAQ,EAAE,iBAAiB;gBAC3B,gyBAA+C;gBAE/C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCcY,oBAAoB;;;YAbhC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,uBAAuB;iBACxB;gBACD,OAAO,EAAE;oBACP,YAAY;oBAEZ,iBAAiB;oBACjB,mBAAmB;oBACnB,gBAAgB;oBAChB,iBAAiB;iBAClB;aACF;;;MCpBY,gBAAgB,GAAG;IAC9B,uBAAuB;IACvB,6BAA6B;IAC7B,wBAAwB;IACxB,uBAAuB;;;ACTzB;;;;;;"}

package/fesm2015/daffodil-design-card-examples.js

@@ -1,17 +1,23 @@
-import { Component, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { faMapMarked } from '@fortawesome/free-solid-svg-icons';
 import { CommonModule } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { DaffCardModule, DaffImageModule, DaffButtonModule } from '@daffodil/design';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 class BasicCardComponent {
+    constructor() {
+        this.faMapMarked = faMapMarked;
+    }
 }
 BasicCardComponent.decorators = [
     { type: Component, args: [{
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'basic-card',
-                template: "<daff-card>\n  <daff-image daffCardImage src=\"/assets/card/uber-logo-dark.svg\" alt=\"uber logo\" width=\"340\" height=\"135\"></daff-image>\n  <div daffCardTagline>Card Tagline</div>\n  <h4 daffCardTitle>Title</h4>\n  <p>This is a basic card.</p>\n  <div daffCardActions class=\"daff-basic-card__actions\">\n    <button daff-underline-button>Card Button</button>\n    <button daff-underline-button>Another Card Button</button>\n  </div>\n</daff-card>",
-                styles: [":host{display:block;max-width:340px}.daff-basic-card__actions>*{margin-right:16px}.daff-basic-card__actions>:last-child{margin-right:0}"]
+                template: "<daff-card>\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  <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.</p>\n    <p>The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n  </div>\n  <div daffCardActions>\n    <button daff-button color=\"theme-contrast\">Learn More</button>\n  </div>\n</daff-card>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: ["daff-card{max-width:480px}"]
             },] }
 ];
 
@@ -27,6 +33,7 @@ BasicCardModule.decorators = [
                     DaffCardModule,
                     DaffImageModule,
                     DaffButtonModule,
+                    FontAwesomeModule,
                 ],
                 exports: [
                     BasicCardComponent,
@@ -34,20 +41,72 @@ BasicCardModule.decorators = [
             },] }
 ];
 
+class CardOrientationComponent {
+    constructor() {
+        this.faMapMarked = faMapMarked;
+        this.orientationControl = new FormControl('');
+        this.options = [
+            { value: '', label: 'Default' },
+            { value: 'vertical', label: 'Vertical' },
+            { value: 'horizontal', label: 'Horizontal' },
+        ];
+    }
+}
+CardOrientationComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: 'card-orientation',
+                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>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".daff-card--vertical{max-width:560px}"]
+            },] }
+];
+
+class CardOrientationModule {
+}
+CardOrientationModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    CardOrientationComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    ReactiveFormsModule,
+                    DaffCardModule,
+                    DaffImageModule,
+                    DaffButtonModule,
+                    FontAwesomeModule,
+                ],
+                exports: [
+                    CardOrientationComponent,
+                ],
+            },] }
+];
+
 class CardThemingComponent {
     constructor() {
-        this.color = 'primary';
         this.colorControl = new FormControl('');
+        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: 'black', label: 'Black' },
+            { value: 'white', label: 'White' },
+        ];
     }
 }
 CardThemingComponent.decorators = [
     { type: Component, args: [{
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'card-theming',
-                template: "<daff-card [color]=\"colorControl.value\">\n  <div daffCardTagline>Card Tagline</div>\n  <div daffCardTitle>Title</div>\n  <p>Cards are themable.</p>\n</daff-card>\n\n<select [formControl]=\"colorControl\">\n  <option value=\"\">Default</option>\n  <option value=\"primary\">Primary</option>\n  <option value=\"secondary\">Secondary</option>\n  <option value=\"tertiary\">Tertiary</option>\n  <option value=\"theme\">Theme</option>\n  <option value=\"theme-contrast\">Theme Contrast</option>\n  <option value=\"black\">Black</option>\n  <option value=\"white\">White</option>\n</select>",
+                template: "<daff-card [color]=\"colorControl.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]=\"colorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [`
     daff-card {
-      max-width: 400px;
+      max-width: 480px;
     }
   `]
             },] }
@@ -73,13 +132,29 @@ CardThemingModule.decorators = [
 ];
 
 class LinkableCardComponent {
+    constructor() {
+        this.basicColorControl = new FormControl('');
+        this.raisedColorControl = new FormControl('');
+        this.strokedColorControl = new FormControl('');
+        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: 'black', label: 'Black' },
+            { value: 'white', label: 'White' },
+        ];
+    }
 }
 LinkableCardComponent.decorators = [
     { type: Component, args: [{
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'linkable-card',
-                template: "<a routerLink=\"/\" daff-card>\n\t<daff-image daffCardImage\n\t\tsrc=\"/assets/card/uber-logo-dark.svg\"\n\t\talt=\"uber logo\"\n\t\twidth=\"340\"\n\t\theight=\"135\">\n\t</daff-image>\n\t<div daffCardTagline>Card Tagline</div>\n\t<h4 daffCardTitle>Title</h4>\n\t<p>This is a linkable card.</p>\n</a>\n",
-                styles: [":host{display:block;max-width:340px}"]
+                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]=\"strokedColorControl\">\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>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: ["a.daff-card,a.daff-raised-card,a.daff-stroked-card{max-width:480px}"]
             },] }
 ];
 
@@ -93,6 +168,7 @@ LinkableCardModule.decorators = [
                 imports: [
                     CommonModule,
                     RouterModule,
+                    ReactiveFormsModule,
                     DaffCardModule,
                     DaffImageModule,
                     DaffButtonModule,
@@ -104,13 +180,27 @@ LinkableCardModule.decorators = [
 ];
 
 class RaisedCardComponent {
+    constructor() {
+        this.colorControl = new FormControl('');
+        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: 'black', label: 'Black' },
+            { value: 'white', label: 'White' },
+        ];
+    }
 }
 RaisedCardComponent.decorators = [
     { type: Component, args: [{
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'raised-card',
-                template: "<daff-card [raised]=\"true\">\n\t<daff-image\n\t\tdaffCardImage\n\t\tsrc=\"/assets/card/uber-logo-dark.svg\"\n\t\talt=\"uber logo\"\n\t\twidth=\"340\"\n\t\theight=\"135\"\n\t></daff-image>\n\t<div daffCardTagline>Card Tagline</div>\n\t<h4 daffCardTitle>Title</h4>\n\t<p>This is a raised card.</p>\n</daff-card>\n",
-                styles: [":host{display:block;max-width:340px}"]
+                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>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: ["daff-raised-card{max-width:480px}"]
             },] }
 ];
 
@@ -123,7 +213,7 @@ RaisedCardModule.decorators = [
                 ],
                 imports: [
                     CommonModule,
-                    RouterModule,
+                    ReactiveFormsModule,
                     DaffCardModule,
                     DaffImageModule,
                     DaffButtonModule,
@@ -134,16 +224,64 @@ RaisedCardModule.decorators = [
             },] }
 ];
 
+class StrokedCardComponent {
+    constructor() {
+        this.colorControl = new FormControl('');
+        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: 'black', label: 'Black' },
+            { value: 'white', label: 'White' },
+        ];
+    }
+}
+StrokedCardComponent.decorators = [
+    { type: Component, args: [{
+                // eslint-disable-next-line @angular-eslint/component-selector
+                selector: 'stroked-card',
+                template: "<daff-stroked-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-stroked-card>\n\n<select [formControl]=\"colorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:block;max-width:340px}"]
+            },] }
+];
+
+class StrokedCardModule {
+}
+StrokedCardModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    StrokedCardComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    RouterModule,
+                    ReactiveFormsModule,
+                    DaffCardModule,
+                    DaffImageModule,
+                    DaffButtonModule,
+                ],
+                exports: [
+                    StrokedCardComponent,
+                ],
+            },] }
+];
+
 const CARD_EXAMPLES = [
     BasicCardComponent,
     CardThemingComponent,
     LinkableCardComponent,
     RaisedCardComponent,
+    StrokedCardComponent,
+    CardOrientationComponent,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BasicCardModule, CARD_EXAMPLES, CardThemingModule, LinkableCardModule, RaisedCardModule, BasicCardComponent as ɵa, CardThemingComponent as ɵb, LinkableCardComponent as ɵc, RaisedCardComponent as ɵd };
+export { BasicCardModule, CARD_EXAMPLES, CardOrientationModule, CardThemingModule, LinkableCardModule, RaisedCardModule, StrokedCardModule, BasicCardComponent as ɵa, CardThemingComponent as ɵb, LinkableCardComponent as ɵc, RaisedCardComponent as ɵd, StrokedCardComponent as ɵe, CardOrientationComponent as ɵf };
 //# sourceMappingURL=daffodil-design-card-examples.js.map