@daffodil/design 0.39.9 → 0.39.10

package/card/examples/daffodil-design-card-examples.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"CARD_EXAMPLES":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"}],"BasicCardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCardModule","line":18,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffImageModule","line":19,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffButtonModule","line":20,"character":4},{"__symbolic":"reference","module":"@fortawesome/angular-fontawesome","name":"FontAwesomeModule","line":22,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"CardOrientationModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵf"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCardModule","line":20,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffImageModule","line":21,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffButtonModule","line":22,"character":4},{"__symbolic":"reference","module":"@fortawesome/angular-fontawesome","name":"FontAwesomeModule","line":23,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵf"}]}]}],"members":{}},"CardThemingModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":17,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCardModule","line":18,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffImageModule","line":19,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"LinkableCardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵc"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCardModule","line":21,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffImageModule","line":22,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffButtonModule","line":23,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵc"}]}]}],"members":{}},"RaisedCardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵd"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCardModule","line":20,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffImageModule","line":21,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffButtonModule","line":22,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵd"}]}]}],"members":{}},"StrokedCardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCardModule","line":22,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffImageModule","line":23,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffButtonModule","line":24,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵe"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"basic-card","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":11,"character":19},"member":"OnPush"},"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. 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","styles":["daff-card{max-width:480px}"]}]}],"members":{}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"card-theming","styles":["\n    daff-card {\n      max-width: 480px;\n    }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":15,"character":19},"member":"OnPush"},"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>"}]}],"members":{}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"linkable-card","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":11,"character":19},"member":"OnPush"},"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>","styles":["a daff-card,a daff-raised-card,a daff-stroked-card{max-width:480px}"]}]}],"members":{}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"raised-card","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":11,"character":19},"member":"OnPush"},"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}"]}]}],"members":{}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"stroked-card","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":11,"character":19},"member":"OnPush"},"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>","styles":[":host{display:block;max-width:340px}"]}]}],"members":{}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"card-orientation","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":12,"character":19},"member":"OnPush"},"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}"]}]}],"members":{}}},"origins":{"CARD_EXAMPLES":"./public_api","BasicCardModule":"./basic-card/basic-card.module","CardOrientationModule":"./card-orientation/card-orientation.module","CardThemingModule":"./card-theming/card-theming.module","LinkableCardModule":"./linkable-card/linkable-card.module","RaisedCardModule":"./raised-card/raised-card.module","StrokedCardModule":"./stroked-card/stroked-card.module","ɵa":"./basic-card/basic-card.component","ɵb":"./card-theming/card-theming.component","ɵc":"./linkable-card/linkable-card.component","ɵd":"./raised-card/raised-card.component","ɵe":"./stroked-card/stroked-card.component","ɵf":"./card-orientation/card-orientation.component"},"importAs":"@daffodil/design/card/examples"}
+{"__symbolic":"module","version":4,"metadata":{"CARD_EXAMPLES":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"}],"BasicCardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCardModule","line":18,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffImageModule","line":19,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffButtonModule","line":20,"character":4},{"__symbolic":"reference","module":"@fortawesome/angular-fontawesome","name":"FontAwesomeModule","line":22,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"CardOrientationModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵf"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCardModule","line":20,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffImageModule","line":21,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffButtonModule","line":22,"character":4},{"__symbolic":"reference","module":"@fortawesome/angular-fontawesome","name":"FontAwesomeModule","line":23,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵf"}]}]}],"members":{}},"CardThemingModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":17,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCardModule","line":18,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffImageModule","line":19,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"LinkableCardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵc"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCardModule","line":21,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffImageModule","line":22,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffButtonModule","line":23,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵc"}]}]}],"members":{}},"RaisedCardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵd"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCardModule","line":20,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffImageModule","line":21,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffButtonModule","line":22,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵd"}]}]}],"members":{}},"StrokedCardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCardModule","line":22,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffImageModule","line":23,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffButtonModule","line":24,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵe"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"basic-card","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":11,"character":19},"member":"OnPush"},"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","styles":["daff-card{max-width:480px}"]}]}],"members":{}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"card-theming","styles":["\n    daff-card {\n      max-width: 480px;\n    }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":15,"character":19},"member":"OnPush"},"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>"}]}],"members":{}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"linkable-card","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":11,"character":19},"member":"OnPush"},"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>","styles":["a.daff-card,a.daff-raised-card,a.daff-stroked-card{max-width:480px}"]}]}],"members":{}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"raised-card","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":11,"character":19},"member":"OnPush"},"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}"]}]}],"members":{}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"stroked-card","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":11,"character":19},"member":"OnPush"},"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>","styles":[":host{display:block;max-width:340px}"]}]}],"members":{}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"card-orientation","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":12,"character":19},"member":"OnPush"},"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}"]}]}],"members":{}}},"origins":{"CARD_EXAMPLES":"./public_api","BasicCardModule":"./basic-card/basic-card.module","CardOrientationModule":"./card-orientation/card-orientation.module","CardThemingModule":"./card-theming/card-theming.module","LinkableCardModule":"./linkable-card/linkable-card.module","RaisedCardModule":"./raised-card/raised-card.module","StrokedCardModule":"./stroked-card/stroked-card.module","ɵa":"./basic-card/basic-card.component","ɵb":"./card-theming/card-theming.component","ɵc":"./linkable-card/linkable-card.component","ɵd":"./raised-card/raised-card.component","ɵe":"./stroked-card/stroked-card.component","ɵf":"./card-orientation/card-orientation.component"},"importAs":"@daffodil/design/card/examples"}

package/core/article-encapsulated/article-encapsulated-mixin.d.ts

@@ -0,0 +1,15 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+import { Constructor } from '../constructor/constructor';
+export interface HasElementRef {
+    _elementRef: ElementRef;
+    _renderer: Renderer2;
+}
+/**
+ * A mixin for giving a component the ability to prevent article styles from cascading down.
+ */
+export declare function daffArticleEncapsulatedMixin<T extends Constructor<HasElementRef>>(Base: T): {
+    new (...args: any[]): {
+        _elementRef: ElementRef<any>;
+        _renderer: Renderer2;
+    };
+} & T;

package/core/article-encapsulated/public_api.d.ts

@@ -0,0 +1 @@
+export { daffArticleEncapsulatedMixin } from './article-encapsulated-mixin';

package/core/public_api.d.ts

@@ -8,3 +8,4 @@ export * from './mutable/mutable';
 export * from './text-alignable/text-alignable';
 export * from './compactable/public_api';
 export * from './manage-container-layout/public_api';
+export * from './article-encapsulated/public_api';

package/daff-theme.scss

@@ -178,31 +178,31 @@ $error: #dd0000;
 // 50 apart passes AA level for any size text (except for 10/60)
 
 $daff-blue: (
-	10: #f1f3fc,
-	20: #e4e7fa,
-	30: #bec7f7,
-	40: #95a6f7,
-	50: #6e89fa,
+	10: #ebf1ff,
+	20: #c4d8ff,
+	30: #9dbeff,
+	40: #79a7ff,
+	50: #548fff,
 	60: #1f66ff,
-	70: #174fc9,
-	80: #183b93,
-	90: #132a68,
-	100: #0d1b45
+	70: #093cf3,
+	80: #001bcb,
+	90: #00098a,
+	100: #000033
 );
 
 $daff-primary: $daff-blue;
 
 $daff-purple: (
-	10: #f3f2fc,
-	20: #e7e6fa,
-	30: #c7c4f7,
-	40: #a7a1f7,
-	50: #8e84fa,
+	10: #ebebff,
+	20: #d4d3ff,
+	30: #b7b4ff,
+	40: #a19bff,
+	50: #8b82ff,
 	60: #6a57ff,
-	70: #4d2df3,
-	80: #391dbe,
-	90: #281885,
-	100: #191057
+	70: #5631f3,
+	80: #3c13bd,
+	90: #2c068a,
+	100: #110033
 );
 
 $daff-accent: $daff-purple;
@@ -247,8 +247,8 @@ $daff-red: (
 );
 
 $daff-bronze: (
-	10: #fbf2ec,
-	20: #f7e1d3,
+	10: #fcf2eb,
+	20: #f7dac6,
 	30: #f2c093,
 	40: #e49d40,
 	50: #d2801a,
@@ -260,14 +260,14 @@ $daff-bronze: (
 );
 
 $daff-green: (
-	10: #dafcde,
-	20: #a9fbb5,
-	30: #4ee56e,
-	40: #35c457,
-	50: #1da943,
+	10: #c4ffcc,
+	20: #6aff86,
+	30: #00db57,
+	40: #13c049,
+	50: #00aa3c,
 	60: #00852e,
-	70: #0e6726,
-	80: #0f4c1e,
+	70: #006b23,
+	80: #004b17,
 	90: #0c3515,
 	100: #07230d,
 );
@@ -1215,31 +1215,31 @@ $error: #dd0000;
 // 50 apart passes AA level for any size text (except for 10/60)
 
 $daff-blue: (
-	10: #f1f3fc,
-	20: #e4e7fa,
-	30: #bec7f7,
-	40: #95a6f7,
-	50: #6e89fa,
+	10: #ebf1ff,
+	20: #c4d8ff,
+	30: #9dbeff,
+	40: #79a7ff,
+	50: #548fff,
 	60: #1f66ff,
-	70: #174fc9,
-	80: #183b93,
-	90: #132a68,
-	100: #0d1b45
+	70: #093cf3,
+	80: #001bcb,
+	90: #00098a,
+	100: #000033
 );
 
 $daff-primary: $daff-blue;
 
 $daff-purple: (
-	10: #f3f2fc,
-	20: #e7e6fa,
-	30: #c7c4f7,
-	40: #a7a1f7,
-	50: #8e84fa,
+	10: #ebebff,
+	20: #d4d3ff,
+	30: #b7b4ff,
+	40: #a19bff,
+	50: #8b82ff,
 	60: #6a57ff,
-	70: #4d2df3,
-	80: #391dbe,
-	90: #281885,
-	100: #191057
+	70: #5631f3,
+	80: #3c13bd,
+	90: #2c068a,
+	100: #110033
 );
 
 $daff-accent: $daff-purple;
@@ -1284,8 +1284,8 @@ $daff-red: (
 );
 
 $daff-bronze: (
-	10: #fbf2ec,
-	20: #f7e1d3,
+	10: #fcf2eb,
+	20: #f7dac6,
 	30: #f2c093,
 	40: #e49d40,
 	50: #d2801a,
@@ -1297,14 +1297,14 @@ $daff-bronze: (
 );
 
 $daff-green: (
-	10: #dafcde,
-	20: #a9fbb5,
-	30: #4ee56e,
-	40: #35c457,
-	50: #1da943,
+	10: #c4ffcc,
+	20: #6aff86,
+	30: #00db57,
+	40: #13c049,
+	50: #00aa3c,
 	60: #00852e,
-	70: #0e6726,
-	80: #0f4c1e,
+	70: #006b23,
+	80: #004b17,
 	90: #0c3515,
 	100: #07230d,
 );
@@ -1850,31 +1850,31 @@ $error: #dd0000;
 // 50 apart passes AA level for any size text (except for 10/60)
 
 $daff-blue: (
-	10: #f1f3fc,
-	20: #e4e7fa,
-	30: #bec7f7,
-	40: #95a6f7,
-	50: #6e89fa,
+	10: #ebf1ff,
+	20: #c4d8ff,
+	30: #9dbeff,
+	40: #79a7ff,
+	50: #548fff,
 	60: #1f66ff,
-	70: #174fc9,
-	80: #183b93,
-	90: #132a68,
-	100: #0d1b45
+	70: #093cf3,
+	80: #001bcb,
+	90: #00098a,
+	100: #000033
 );
 
 $daff-primary: $daff-blue;
 
 $daff-purple: (
-	10: #f3f2fc,
-	20: #e7e6fa,
-	30: #c7c4f7,
-	40: #a7a1f7,
-	50: #8e84fa,
+	10: #ebebff,
+	20: #d4d3ff,
+	30: #b7b4ff,
+	40: #a19bff,
+	50: #8b82ff,
 	60: #6a57ff,
-	70: #4d2df3,
-	80: #391dbe,
-	90: #281885,
-	100: #191057
+	70: #5631f3,
+	80: #3c13bd,
+	90: #2c068a,
+	100: #110033
 );
 
 $daff-accent: $daff-purple;
@@ -1919,8 +1919,8 @@ $daff-red: (
 );
 
 $daff-bronze: (
-	10: #fbf2ec,
-	20: #f7e1d3,
+	10: #fcf2eb,
+	20: #f7dac6,
 	30: #f2c093,
 	40: #e49d40,
 	50: #d2801a,
@@ -1932,14 +1932,14 @@ $daff-bronze: (
 );
 
 $daff-green: (
-	10: #dafcde,
-	20: #a9fbb5,
-	30: #4ee56e,
-	40: #35c457,
-	50: #1da943,
+	10: #c4ffcc,
+	20: #6aff86,
+	30: #00db57,
+	40: #13c049,
+	50: #00aa3c,
 	60: #00852e,
-	70: #0e6726,
-	80: #0f4c1e,
+	70: #006b23,
+	80: #004b17,
 	90: #0c3515,
 	100: #07230d,
 );
@@ -2537,7 +2537,7 @@ $supported-theme-types: (
 		&.daff-theme-contrast {
 			@include daff-icon-button-theme-variant(
 				$base-contrast,
-				daff-illuminate($base-contrast, $daff-gray, 1)
+				daff-illuminate($base-contrast, $daff-gray, 1),
 				daff-illuminate($base-contrast, $daff-gray, 2)
 			);
 		}
@@ -2981,6 +2981,15 @@ $supported-theme-types: (
 	}
 }
 
+@mixin stopsArticleCascade($selector...) {
+	#{$selector} {
+		&:not(.daff-ae *, .daff-ae) {
+			@content;
+		}
+	}
+}
+
+
 @mixin daff-article-theme($theme) {
 	$primary: map-get($theme, primary);
 	$secondary: map-get($theme, secondary);
@@ -2999,22 +3008,15 @@ $supported-theme-types: (
 			color: daff-illuminate($base-contrast, $gray, 3);
 		}
 
-		a {
+		@include stopsArticleCascade(a) {
 			color: daff-color($primary);
 		}
 
-		> {
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6 {
-				color: $text-color;
-			}
+		@include stopsArticleCascade(h1, h2, h3, h4, h5, h6) {
+			color: $text-color;
 		}
 
-		> p {
+		@include stopsArticleCascade(p) {
 			color: $text-color;
 		}
 
@@ -3448,44 +3450,44 @@ $supported-theme-types: (
 	$secondary: map-get($theme, secondary);
 	$tertiary: map-get($theme, tertiary);
 	$base: daff-map-deep-get($theme, 'core.base');
+	$base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
 	$white: daff-map-deep-get($theme, 'core.white');
 	$black: daff-map-deep-get($theme, 'core.black');
+	$gray: daff-configure-palette($daff-gray, 60);
 
 	.daff-navbar {
-		@include daff-navbar-theme-variant($base);
+		@include daff-navbar-theme-variant(daff-illuminate($base, $daff-gray, 1));
 
-		&--shadowed {
-			box-shadow: 0 3px 10px rgba($black, 0.08);
+		&--raised {
+			box-shadow: 0 4px 10px rgba($black, 0.08);
 		}
 
 		&.daff-primary {
-			@include daff-navbar-theme-variant(
-				daff-color($primary)
-			);
+			@include daff-navbar-theme-variant(daff-color($primary));
 		}
 
 		&.daff-secondary {
-			@include daff-navbar-theme-variant(
-				daff-color($secondary)
-			);
+			@include daff-navbar-theme-variant(daff-color($secondary));
 		}
 
 		&.daff-tertiary {
-			@include daff-navbar-theme-variant(
-				daff-color($tertiary)
-			);
+			@include daff-navbar-theme-variant(daff-color($tertiary));
 		}
 
 		&.daff-black {
-			@include daff-navbar-theme-variant(
-				$black
-			);
+			@include daff-navbar-theme-variant($black);
 		}
 
 		&.daff-white {
-			@include daff-navbar-theme-variant(
-				$white
-			);
+			@include daff-navbar-theme-variant($white);
+		}
+
+		&.daff-theme {
+			@include daff-navbar-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-navbar-theme-variant($base-contrast);
 		}
 	}
 }