@patternfly/pfe-card
Advanced tools
Comparing version 1.0.0-prerelease.56 to 1.0.0
@@ -6,5 +6,3 @@ import PFElement from '../../pfelement/dist/pfelement.js'; | ||
if (!Element.prototype.matches) { | ||
Element.prototype.matches = | ||
Element.prototype.msMatchesSelector || | ||
Element.prototype.webkitMatchesSelector; | ||
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; | ||
} | ||
@@ -25,62 +23,4 @@ | ||
// @POLYFILL Array.includes | ||
// https://tc39.github.io/ecma262/#sec-array.prototype.includes | ||
if (!Array.prototype.includes) { | ||
Object.defineProperty(Array.prototype, "includes", { | ||
value: function(valueToFind, fromIndex) { | ||
if (this == null) { | ||
throw new TypeError('"this" is null or not defined'); | ||
} | ||
// 1. Let O be ? ToObject(this value). | ||
var o = Object(this); | ||
// 2. Let len be ? ToLength(? Get(O, "length")). | ||
var len = o.length >>> 0; | ||
// 3. If len is 0, return false. | ||
if (len === 0) { | ||
return false; | ||
} | ||
// 4. Let n be ? ToInteger(fromIndex). | ||
// (If fromIndex is undefined, this step produces the value 0.) | ||
var n = fromIndex | 0; | ||
// 5. If n ≥ 0, then | ||
// a. Let k be n. | ||
// 6. Else n < 0, | ||
// a. Let k be len + n. | ||
// b. If k < 0, let k be 0. | ||
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); | ||
function sameValueZero(x, y) { | ||
return ( | ||
x === y || | ||
(typeof x === "number" && | ||
typeof y === "number" && | ||
isNaN(x) && | ||
isNaN(y)) | ||
); | ||
} | ||
// 7. Repeat, while k < len | ||
while (k < len) { | ||
// a. Let elementK be the result of ? Get(O, ! ToString(k)). | ||
// b. If SameValueZero(valueToFind, elementK) is true, return true. | ||
if (sameValueZero(o[k], valueToFind)) { | ||
return true; | ||
} | ||
// c. Increase k by 1. | ||
k++; | ||
} | ||
// 8. Return false | ||
return false; | ||
} | ||
}); | ||
} | ||
/*! | ||
* PatternFly Elements: PfeCard 1.0.0-prerelease.55 | ||
* PatternFly Elements: PfeCard 1.0.0 | ||
* @license | ||
@@ -110,10 +50,13 @@ * Copyright 2020 Red Hat, Inc. | ||
class PfeCard extends PFElement { | ||
// Injected at build-time | ||
static get version() { | ||
return "1.0.0-prerelease.55"; | ||
return "1.0.0"; | ||
} | ||
// Injected at build-time | ||
get html() { | ||
return `<style>@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([pfe-color=accent]),:host([pfe-color=base]),:host([pfe-color=complement]),:host([pfe-color=darker]),:host([pfe-color=darkest]),:host([pfe-color=lightest]){background-color:#fff!important;color:#151515!important}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host{--theme:var(--pfe-card--theme, var(--pfe-theme--color--surface--base--theme, light));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:calc(16px * 2) calc(16px * 2) calc(16px * 2) calc(16px * 2);padding:var(--pfe-card--Padding,var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)));border:0 solid #d2d2d2;border:var(--pfe-card--Border,var(--pfe-card--BorderWidth,0) var(--pfe-card--BorderStyle,solid) var(--pfe-card--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2)));border-radius:3px;border-radius:var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px));overflow:hidden;background-color:#f0f0f0;background-color:var(--pfe-card--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));background-position:center center;background-position:var(--pfe-card--BackgroundPosition,center center);color:#3c3f42;color:var(--pfe-broadcasted--text,#3c3f42)}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}@media print{:host{border-radius:3px;border:1px solid #d2d2d2}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{background-color:#fff!important;background-color:var(--pfe-theme--color--surface--lightest,#fff)!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important;background-image:none!important;border-radius:3px;border:1px solid #d2d2d2;padding:16px;padding:var(--pfe-theme--container-spacer,16px)}}:host([pfe-color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #3c3f42);--pfe-card--theme:var(--pfe-theme--color--surface--darker--theme, dark)}:host([pfe-color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515);--pfe-card--theme:var(--pfe-theme--color--surface--darkest--theme, dark)}:host([pfe-color=base]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #f0f0f0);--pfe-card--theme:var(--pfe-theme--color--surface--base--theme, light)}:host([pfe-color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-card--theme:var(--pfe-theme--color--surface--lightest--theme, light)}:host([pfe-color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #004080);--pfe-card--theme:var(--pfe-theme--color--surface--accent--theme, saturated)}:host([pfe-color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #002952);--pfe-card--theme:var(--pfe-theme--color--surface--complement--theme, saturated)}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #8476d1);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([pfe-size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 16px)}:host([pfe-border]:not([pfe-border=false])){--pfe-card--BorderWidth:1px}.pfe-card__body ::slotted([pfe-overflow~=top]),.pfe-card__footer ::slotted([pfe-overflow~=top]),.pfe-card__header ::slotted([pfe-overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * calc(16px * 2))!important;margin-top:calc(-1 * var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}:host([has_header]) .pfe-card__body ::slotted([pfe-overflow~=top]),:host([has_header]) .pfe-card__footer ::slotted([pfe-overflow~=top]),:host([has_header]) .pfe-card__header ::slotted([pfe-overflow~=top]){padding-top:16px;padding-top:var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px))}.pfe-card__body ::slotted([pfe-overflow~=right]),.pfe-card__footer ::slotted([pfe-overflow~=right]),.pfe-card__header ::slotted([pfe-overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * calc(16px * 2));margin-right:calc(-1 * var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted([pfe-overflow~=bottom]),.pfe-card__footer ::slotted([pfe-overflow~=bottom]),.pfe-card__header ::slotted([pfe-overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(calc(16px * 2) + 3px));margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px))));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.pfe-card__body ::slotted([pfe-overflow~=left]),.pfe-card__footer ::slotted([pfe-overflow~=left]),.pfe-card__header ::slotted([pfe-overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * calc(16px * 2));margin-left:calc(-1 * var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted(img),.pfe-card__footer ::slotted(img),.pfe-card__header ::slotted(img){max-width:100%!important;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-o-object-fit:cover;object-fit:cover}.pfe-card__body ::slotted(img:not[pfe-overflow]),.pfe-card__footer ::slotted(img:not[pfe-overflow]),.pfe-card__header ::slotted(img:not[pfe-overflow]){-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.pfe-card__body ::slotted(img[pfe-overflow~=right]),.pfe-card__footer ::slotted(img[pfe-overflow~=right]),.pfe-card__header ::slotted(img[pfe-overflow~=right]){max-width:calc(100% + 2rem)!important;max-width:calc(100% + calc(16px * 2))!important;max-width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[pfe-overflow~=left]),.pfe-card__footer ::slotted(img[pfe-overflow~=left]),.pfe-card__header ::slotted(img[pfe-overflow~=left]){max-width:calc(100% + 2rem)!important;max-width:calc(100% + calc(16px * 2))!important;max-width:calc(100% + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]),.pfe-card__footer ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]),.pfe-card__header ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]){max-width:calc(100% + 4rem)!important;max-width:calc(100% + calc(calc(16px * 2) + calc(16px * 2)))!important;max-width:calc(100% + calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2))))!important}.pfe-card__header{z-index:2;background-color:rgba(0,0,0,.09);background-color:var(--pfe-card__header--BackgroundColor,rgba(0,0,0,var(--pfe-theme--opacity,.09)));color:#3c3f42;color:var(--pfe-card__header--Color,var(--pfe-broadcasted--text,#3c3f42));margin-top:calc(calc(16px * 2) * -1)!important;margin-top:calc(var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1)!important;margin-right:calc(calc(16px * 2) * -1);margin-right:calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));margin-left:calc(calc(16px * 2) * -1);margin-left:calc(var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);padding-top:16px;padding-top:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));padding-right:calc(16px * 2);padding-right:var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-left:calc(16px * 2);padding-left:var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-bottom:16px;padding-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}:host([on=dark]) .pfe-card__header{background-color:rgba(255,255,255,.09);background-color:var(--pfe-card__header--BackgroundColor--dark,rgba(255,255,255,var(--pfe-theme--opacity,.09)))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pfe-card__header{background-color:#fff!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important}}:host(:not([has_body]):not([has_footer])) .pfe-card__header{margin-bottom:calc(16px * 2);margin-bottom:var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2))}.pfe-card__header ::slotted([pfe-overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_header])) .pfe-card__header{display:none}:host([has_body],[has_footer]) .pfe-card__header ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__header ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__header ::slotted(h1){margin-bottom:0}.pfe-card__header ::slotted(h2){margin-bottom:0}.pfe-card__header ::slotted(h3){margin-bottom:0}.pfe-card__header ::slotted(h4){margin-bottom:0}.pfe-card__header ::slotted(h5){margin-bottom:0}.pfe-card__header ::slotted(h6){margin-bottom:0}:host(:not([has_header])) .pfe-card__body ::slotted([pfe-overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__body ::slotted([pfe-overflow~=top]){z-index:1;--pfe-card__overflow--MarginTop:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__body ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host([has_footer]) .pfe-card__body ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}:host(:not([has_footer])) .pfe-card__body{margin-bottom:0}.pfe-card__footer{margin-top:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-direction:var(--pfe-card__footer--Row,row);-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:var(--pfe-card__footer--Wrap,wrap);-ms-flex-wrap:var(--pfe-card__footer--Wrap,wrap);flex-wrap:var(--pfe-card__footer--Wrap,wrap);-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-align:var(--pfe-card__footer--AlignItems,baseline);-webkit-align-items:var(--pfe-card__footer--AlignItems,baseline);-ms-flex-align:var(--pfe-card__footer--AlignItems,baseline);align-items:var(--pfe-card__footer--AlignItems,baseline)}.pfe-card__footer ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_footer])) .pfe-card__footer{display:none}.pfe-card__body,.pfe-card__header{margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}.pfe-card__body ::slotted(p:first-child),.pfe-card__header ::slotted(p:first-child){margin-top:0}.pfe-card__body ::slotted(h1:first-child),.pfe-card__header ::slotted(h1:first-child){margin-top:0}.pfe-card__body ::slotted(h2:first-child),.pfe-card__header ::slotted(h2:first-child){margin-top:0}.pfe-card__body ::slotted(h3:first-child),.pfe-card__header ::slotted(h3:first-child){margin-top:0}.pfe-card__body ::slotted(h4:first-child),.pfe-card__header ::slotted(h4:first-child){margin-top:0}.pfe-card__body ::slotted(h5:first-child),.pfe-card__header ::slotted(h5:first-child){margin-top:0}.pfe-card__body ::slotted(h6:first-child),.pfe-card__header ::slotted(h6:first-child){margin-top:0} | ||
/*# sourceMappingURL=pfe-card.min.css.map */ | ||
</style><div class="pfe-card__header"> | ||
return ` | ||
<style>@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([color=accent]),:host([color=base]),:host([color=complement]),:host([color=darker]),:host([color=darkest]),:host([color=lightest]){background-color:#fff!important;color:#151515!important}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host{--context:var(--pfe-card--context, var(--pfe-theme--color--surface--base--context, light));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:calc(16px * 2) calc(16px * 2) calc(16px * 2) calc(16px * 2);padding:var(--pfe-card--Padding,var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)));border:0 solid #d2d2d2;border:var(--pfe-card--Border,var(--pfe-card--BorderWidth,0) var(--pfe-card--BorderStyle,solid) var(--pfe-card--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2)));border-radius:3px;border-radius:var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px));overflow:hidden;background-color:#f0f0f0;background-color:var(--pfe-card--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));background-position:center center;background-position:var(--pfe-card--BackgroundPosition,center center);color:#3c3f42;color:var(--pfe-broadcasted--text,#3c3f42)}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}@media print{:host{border-radius:3px;border:1px solid #d2d2d2}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{background-color:#fff!important;background-color:var(--pfe-theme--color--surface--lightest,#fff)!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important;background-image:none!important;border-radius:3px;border:1px solid #d2d2d2;padding:16px;padding:var(--pfe-theme--container-spacer,16px)}}:host([color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #3c3f42);--pfe-card--context:var(--pfe-theme--color--surface--darker--context, dark)}:host([color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515);--pfe-card--context:var(--pfe-theme--color--surface--darkest--context, dark)}:host([color=base]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #f0f0f0);--pfe-card--context:var(--pfe-theme--color--surface--base--context, light)}:host([color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-card--context:var(--pfe-theme--color--surface--lightest--context, light)}:host([color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #004080);--pfe-card--context:var(--pfe-theme--color--surface--accent--context, saturated)}:host([color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #002952);--pfe-card--context:var(--pfe-theme--color--surface--complement--context, saturated)}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 16px)}:host([border]:not([border=false])){--pfe-card--BorderWidth:1px}.pfe-card__body ::slotted([overflow~=top]),.pfe-card__footer ::slotted([overflow~=top]),.pfe-card__header ::slotted([overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * calc(16px * 2))!important;margin-top:calc(-1 * var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}:host([has_header]) .pfe-card__body ::slotted([overflow~=top]),:host([has_header]) .pfe-card__footer ::slotted([overflow~=top]),:host([has_header]) .pfe-card__header ::slotted([overflow~=top]){padding-top:16px;padding-top:var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px))}.pfe-card__body ::slotted([overflow~=right]),.pfe-card__footer ::slotted([overflow~=right]),.pfe-card__header ::slotted([overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * calc(16px * 2));margin-right:calc(-1 * var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted([overflow~=bottom]),.pfe-card__footer ::slotted([overflow~=bottom]),.pfe-card__header ::slotted([overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(calc(16px * 2) + 3px));margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px))));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.pfe-card__body ::slotted([overflow~=left]),.pfe-card__footer ::slotted([overflow~=left]),.pfe-card__header ::slotted([overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * calc(16px * 2));margin-left:calc(-1 * var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted(img),.pfe-card__footer ::slotted(img),.pfe-card__header ::slotted(img){max-width:100%!important;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-o-object-fit:cover;object-fit:cover}.pfe-card__body ::slotted(img:not[overflow]),.pfe-card__footer ::slotted(img:not[overflow]),.pfe-card__header ::slotted(img:not[overflow]){-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.pfe-card__body ::slotted(img[overflow]),.pfe-card__footer ::slotted(img[overflow]),.pfe-card__header ::slotted(img[overflow]){max-width:unset!important}.pfe-card__body ::slotted(img[overflow~=right]),.pfe-card__footer ::slotted(img[overflow~=right]),.pfe-card__header ::slotted(img[overflow~=right]){width:calc(100% + 2rem)!important;width:calc(100% + calc(16px * 2))!important;width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[overflow~=left]),.pfe-card__footer ::slotted(img[overflow~=left]),.pfe-card__header ::slotted(img[overflow~=left]){width:calc(100% + 2rem)!important;width:calc(100% + calc(16px * 2))!important;width:calc(100% + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__footer ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__header ::slotted(img[overflow~=right][overflow~=left]){width:calc(100% + 4rem)!important;width:calc(100% + calc(16px * 2) + calc(16px * 2))!important;width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__header{z-index:2;background-color:rgba(0,0,0,.09);background-color:var(--pfe-card__header--BackgroundColor,rgba(0,0,0,var(--pfe-theme--opacity,.09)));color:#3c3f42;color:var(--pfe-card__header--Color,var(--pfe-broadcasted--text,#3c3f42));margin-top:calc(calc(16px * 2) * -1)!important;margin-top:calc(var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1)!important;margin-right:calc(calc(16px * 2) * -1);margin-right:calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));margin-left:calc(calc(16px * 2) * -1);margin-left:calc(var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);padding-top:16px;padding-top:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));padding-right:calc(16px * 2);padding-right:var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-left:calc(16px * 2);padding-left:var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-bottom:16px;padding-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}:host([on=dark]) .pfe-card__header{background-color:rgba(255,255,255,.09);background-color:var(--pfe-card__header--BackgroundColor--dark,rgba(255,255,255,var(--pfe-theme--opacity,.09)))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pfe-card__header{background-color:#fff!important;color:#151515!important}}:host(:not([has_body]):not([has_footer])) .pfe-card__header{margin-bottom:calc(16px * 2);margin-bottom:var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2))}.pfe-card__header ::slotted([overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_header])) .pfe-card__header{display:none}:host([has_body],[has_footer]) .pfe-card__header ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__header ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__header ::slotted(h1){margin-bottom:0}.pfe-card__header ::slotted(h2){margin-bottom:0}.pfe-card__header ::slotted(h3){margin-bottom:0}.pfe-card__header ::slotted(h4){margin-bottom:0}.pfe-card__header ::slotted(h5){margin-bottom:0}.pfe-card__header ::slotted(h6){margin-bottom:0}:host(:not([has_header])) .pfe-card__body ::slotted([overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__body ::slotted([overflow~=top]){z-index:1;--pfe-card__overflow--MarginTop:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__body ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host([has_footer]) .pfe-card__body ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}:host(:not([has_footer])) .pfe-card__body{margin-bottom:0}.pfe-card__footer{margin-top:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-direction:var(--pfe-card__footer--Row,row);-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:var(--pfe-card__footer--Wrap,wrap);-ms-flex-wrap:var(--pfe-card__footer--Wrap,wrap);flex-wrap:var(--pfe-card__footer--Wrap,wrap);-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-align:var(--pfe-card__footer--AlignItems,baseline);-webkit-align-items:var(--pfe-card__footer--AlignItems,baseline);-ms-flex-align:var(--pfe-card__footer--AlignItems,baseline);align-items:var(--pfe-card__footer--AlignItems,baseline)}.pfe-card__footer ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_footer])) .pfe-card__footer{display:none}.pfe-card__body,.pfe-card__header{margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}.pfe-card__body ::slotted(p:first-child),.pfe-card__header ::slotted(p:first-child){margin-top:0}.pfe-card__body ::slotted(h1:first-child),.pfe-card__header ::slotted(h1:first-child){margin-top:0}.pfe-card__body ::slotted(h2:first-child),.pfe-card__header ::slotted(h2:first-child){margin-top:0}.pfe-card__body ::slotted(h3:first-child),.pfe-card__header ::slotted(h3:first-child){margin-top:0}.pfe-card__body ::slotted(h4:first-child),.pfe-card__header ::slotted(h4:first-child){margin-top:0}.pfe-card__body ::slotted(h5:first-child),.pfe-card__header ::slotted(h5:first-child){margin-top:0}.pfe-card__body ::slotted(h6:first-child),.pfe-card__header ::slotted(h6:first-child){margin-top:0} /*# sourceMappingURL=pfe-card.min.css.map */</style> | ||
<div class="pfe-card__header"> | ||
<slot name="pfe-card--header"></slot> | ||
@@ -129,9 +72,2 @@ </div> | ||
static get properties() { | ||
return {"color":{"title":"Background color","type":"string","enum":["lightest","base","darker","darkest","complement","accent"],"default":"base","prefixed":true,"observer":"_colorChanged"},"img-src":{"title":"Background image","type":"string","observer":"_imgSrcChanged"},"size":{"title":"Padding size","type":"string","enum":["small"],"observer":"_basicAttributeChanged"}}; | ||
} | ||
static get slots() { | ||
return {"header":{"title":"Header","type":"array","namedSlot":true,"maxItems":3,"items":{"title":"Body item","oneOf":[{"$ref":"raw"}]}},"body":{"title":"Body","type":"array","namedSlot":false,"items":{"oneOf":[{"$ref":"pfe-card"},{"$ref":"raw"}]}},"footer":{"title":"Footer","type":"array","namedSlot":true,"maxItems":3,"items":{"oneOf":[{"$ref":"pfe-cta"},{"$ref":"raw"}]}}}; | ||
} | ||
static get tag() { | ||
@@ -141,4 +77,8 @@ return "pfe-card"; | ||
get schemaUrl() { | ||
return "pfe-card.json"; | ||
static get meta() { | ||
return { | ||
title: "Card", | ||
description: | ||
"This element creates a header, body, and footer region in which to place content or other components." | ||
}; | ||
} | ||
@@ -154,14 +94,92 @@ | ||
get imageSrc() { | ||
return this.getAttribute("pfe-img-src"); | ||
// @TODO: How do we handle attributes for slotted content? | ||
static get properties() { | ||
return { | ||
color: { | ||
title: "Background color", | ||
type: String, | ||
values: ["lightest", "base", "darker", "darkest", "complement", "accent"], | ||
default: "base", | ||
observer: "_colorChanged" | ||
}, | ||
// @TODO: Deprecate property in 1.0 | ||
oldColor: { | ||
type: String, | ||
prefix: false, | ||
alias: "color", | ||
attr: "pfe-color" | ||
}, | ||
imgSrc: { | ||
title: "Background image", | ||
type: String, | ||
observer: "_imageSrcChanged" | ||
}, | ||
// @TODO: Deprecate property in 1.0 | ||
pfeImgSrc: { | ||
type: String, | ||
prefix: false, | ||
alias: "imgSrc" | ||
}, | ||
size: { | ||
title: "Padding size", | ||
type: String, | ||
values: ["small"] | ||
}, | ||
// @TODO: Deprecate property in 1.0 | ||
pfeSize: { | ||
type: String, | ||
values: ["small"], | ||
prefix: false, | ||
alias: "size" | ||
}, | ||
border: { | ||
title: "Border", | ||
type: Boolean | ||
}, | ||
// @TODO: Deprecate property in 1.0 | ||
oldBorder: { | ||
alias: "border", | ||
attr: "pfe-border" | ||
} | ||
}; | ||
} | ||
get backgroundColor() { | ||
return this.getAttribute("pfe-color") || "base"; | ||
static get slots() { | ||
return { | ||
header: { | ||
title: "Header", | ||
type: "array", | ||
namedSlot: true, | ||
maxItems: 3, | ||
items: { | ||
$ref: "raw" | ||
} | ||
}, | ||
body: { | ||
title: "Body", | ||
type: "array", | ||
namedSlot: false, | ||
items: { | ||
$ref: "raw" | ||
} | ||
}, | ||
footer: { | ||
title: "Footer", | ||
type: "array", | ||
namedSlot: true, | ||
maxItems: 3, | ||
items: { | ||
oneOf: [ | ||
{ | ||
$ref: "pfe-cta" | ||
}, | ||
{ | ||
$ref: "raw" | ||
} | ||
] | ||
} | ||
} | ||
}; | ||
} | ||
static get observedAttributes() { | ||
return ["pfe-color", "pfe-img-src", "pfe-size"]; | ||
} | ||
// Declare the type of this component | ||
@@ -174,48 +192,12 @@ static get PfeType() { | ||
super(PfeCard, { type: PfeCard.PfeType }); | ||
this._observer = new MutationObserver(() => { | ||
this._mapSchemaToSlots(this.tag, this.slots); | ||
}); | ||
} | ||
connectedCallback() { | ||
super.connectedCallback(); | ||
// Initialize the background image attachment | ||
if (this.imageSrc) { | ||
this._imgSrcChanged("pfe-img-src", "", this.imageSrc); | ||
} | ||
this._observer.observe(this, { childList: true }); | ||
// If the color changes, update the context | ||
_colorChanged() { | ||
// Update the context | ||
this.resetContext(); | ||
} | ||
disconnectedCallback() { | ||
this._observer.disconnect(); | ||
} | ||
attributeChangedCallback(attr, oldValue, newValue) { | ||
super.attributeChangedCallback(attr, oldValue, newValue); | ||
// Strip the prefix from the attribute | ||
attr = attr.replace("pfe-", ""); | ||
// If the observer is defined in the attribute properties | ||
if (this[attr] && this[attr].observer) { | ||
// Get the observer function | ||
let observer = this[this[attr].observer].bind(this); | ||
// If it's a function, allow it to run | ||
if (typeof observer === "function") observer(attr, oldValue, newValue); | ||
} | ||
} | ||
_basicAttributeChanged(attr, oldValue, newValue) { | ||
this[attr].value = newValue; | ||
} | ||
// Update the color attribute and contexts | ||
_colorChanged(attr, oldValue, newValue) { | ||
this[attr].value = newValue; | ||
// Trigger an update in nested components | ||
this.context_update(); | ||
} | ||
// Update the background image | ||
_imgSrcChanged(attr, oldValue, newValue) { | ||
_imageSrcChanged(oldValue, newValue) { | ||
// Set the image as the background image | ||
@@ -222,0 +204,0 @@ this.style.backgroundImage = newValue ? `url('${newValue}')` : ``; |
@@ -1,4 +0,4 @@ | ||
import e from"../../pfelement/dist/pfelement.min.js";Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var r=this;do{if(r.matches(e))return r;r=r.parentElement||r.parentNode}while(null!==r&&1===r.nodeType);return null}),Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{value:function(e,r){if(null==this)throw new TypeError('"this" is null or not defined');var a=Object(this),t=a.length>>>0;if(0===t)return!1;var o,c,d=0|r,p=Math.max(d>=0?d:t-Math.abs(d),0);for(;p<t;){if((o=a[p])===(c=e)||"number"==typeof o&&"number"==typeof c&&isNaN(o)&&isNaN(c))return!0;p++}return!1}}) | ||
import e from"../../pfelement/dist/pfelement.min.js";Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var r=this;do{if(r.matches(e))return r;r=r.parentElement||r.parentNode}while(null!==r&&1===r.nodeType);return null}) | ||
/*! | ||
* PatternFly Elements: PfeCard 1.0.0-prerelease.55 | ||
* PatternFly Elements: PfeCard 1.0.0 | ||
* @license | ||
@@ -25,3 +25,3 @@ * Copyright 2020 Red Hat, Inc. | ||
* | ||
*/;class r extends e{static get version(){return"1.0.0-prerelease.55"}get html(){return'<style>@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([pfe-color=accent]),:host([pfe-color=base]),:host([pfe-color=complement]),:host([pfe-color=darker]),:host([pfe-color=darkest]),:host([pfe-color=lightest]){background-color:#fff!important;color:#151515!important}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host{--theme:var(--pfe-card--theme, var(--pfe-theme--color--surface--base--theme, light));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:calc(16px * 2) calc(16px * 2) calc(16px * 2) calc(16px * 2);padding:var(--pfe-card--Padding,var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)));border:0 solid #d2d2d2;border:var(--pfe-card--Border,var(--pfe-card--BorderWidth,0) var(--pfe-card--BorderStyle,solid) var(--pfe-card--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2)));border-radius:3px;border-radius:var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px));overflow:hidden;background-color:#f0f0f0;background-color:var(--pfe-card--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));background-position:center center;background-position:var(--pfe-card--BackgroundPosition,center center);color:#3c3f42;color:var(--pfe-broadcasted--text,#3c3f42)}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}@media print{:host{border-radius:3px;border:1px solid #d2d2d2}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{background-color:#fff!important;background-color:var(--pfe-theme--color--surface--lightest,#fff)!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important;background-image:none!important;border-radius:3px;border:1px solid #d2d2d2;padding:16px;padding:var(--pfe-theme--container-spacer,16px)}}:host([pfe-color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #3c3f42);--pfe-card--theme:var(--pfe-theme--color--surface--darker--theme, dark)}:host([pfe-color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515);--pfe-card--theme:var(--pfe-theme--color--surface--darkest--theme, dark)}:host([pfe-color=base]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #f0f0f0);--pfe-card--theme:var(--pfe-theme--color--surface--base--theme, light)}:host([pfe-color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-card--theme:var(--pfe-theme--color--surface--lightest--theme, light)}:host([pfe-color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #004080);--pfe-card--theme:var(--pfe-theme--color--surface--accent--theme, saturated)}:host([pfe-color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #002952);--pfe-card--theme:var(--pfe-theme--color--surface--complement--theme, saturated)}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #8476d1);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([pfe-size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 16px)}:host([pfe-border]:not([pfe-border=false])){--pfe-card--BorderWidth:1px}.pfe-card__body ::slotted([pfe-overflow~=top]),.pfe-card__footer ::slotted([pfe-overflow~=top]),.pfe-card__header ::slotted([pfe-overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * calc(16px * 2))!important;margin-top:calc(-1 * var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}:host([has_header]) .pfe-card__body ::slotted([pfe-overflow~=top]),:host([has_header]) .pfe-card__footer ::slotted([pfe-overflow~=top]),:host([has_header]) .pfe-card__header ::slotted([pfe-overflow~=top]){padding-top:16px;padding-top:var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px))}.pfe-card__body ::slotted([pfe-overflow~=right]),.pfe-card__footer ::slotted([pfe-overflow~=right]),.pfe-card__header ::slotted([pfe-overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * calc(16px * 2));margin-right:calc(-1 * var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted([pfe-overflow~=bottom]),.pfe-card__footer ::slotted([pfe-overflow~=bottom]),.pfe-card__header ::slotted([pfe-overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(calc(16px * 2) + 3px));margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px))));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.pfe-card__body ::slotted([pfe-overflow~=left]),.pfe-card__footer ::slotted([pfe-overflow~=left]),.pfe-card__header ::slotted([pfe-overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * calc(16px * 2));margin-left:calc(-1 * var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted(img),.pfe-card__footer ::slotted(img),.pfe-card__header ::slotted(img){max-width:100%!important;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-o-object-fit:cover;object-fit:cover}.pfe-card__body ::slotted(img:not[pfe-overflow]),.pfe-card__footer ::slotted(img:not[pfe-overflow]),.pfe-card__header ::slotted(img:not[pfe-overflow]){-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.pfe-card__body ::slotted(img[pfe-overflow~=right]),.pfe-card__footer ::slotted(img[pfe-overflow~=right]),.pfe-card__header ::slotted(img[pfe-overflow~=right]){max-width:calc(100% + 2rem)!important;max-width:calc(100% + calc(16px * 2))!important;max-width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[pfe-overflow~=left]),.pfe-card__footer ::slotted(img[pfe-overflow~=left]),.pfe-card__header ::slotted(img[pfe-overflow~=left]){max-width:calc(100% + 2rem)!important;max-width:calc(100% + calc(16px * 2))!important;max-width:calc(100% + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]),.pfe-card__footer ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]),.pfe-card__header ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]){max-width:calc(100% + 4rem)!important;max-width:calc(100% + calc(calc(16px * 2) + calc(16px * 2)))!important;max-width:calc(100% + calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2))))!important}.pfe-card__header{z-index:2;background-color:rgba(0,0,0,.09);background-color:var(--pfe-card__header--BackgroundColor,rgba(0,0,0,var(--pfe-theme--opacity,.09)));color:#3c3f42;color:var(--pfe-card__header--Color,var(--pfe-broadcasted--text,#3c3f42));margin-top:calc(calc(16px * 2) * -1)!important;margin-top:calc(var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1)!important;margin-right:calc(calc(16px * 2) * -1);margin-right:calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));margin-left:calc(calc(16px * 2) * -1);margin-left:calc(var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);padding-top:16px;padding-top:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));padding-right:calc(16px * 2);padding-right:var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-left:calc(16px * 2);padding-left:var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-bottom:16px;padding-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}:host([on=dark]) .pfe-card__header{background-color:rgba(255,255,255,.09);background-color:var(--pfe-card__header--BackgroundColor--dark,rgba(255,255,255,var(--pfe-theme--opacity,.09)))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pfe-card__header{background-color:#fff!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important}}:host(:not([has_body]):not([has_footer])) .pfe-card__header{margin-bottom:calc(16px * 2);margin-bottom:var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2))}.pfe-card__header ::slotted([pfe-overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_header])) .pfe-card__header{display:none}:host([has_body],[has_footer]) .pfe-card__header ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__header ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__header ::slotted(h1){margin-bottom:0}.pfe-card__header ::slotted(h2){margin-bottom:0}.pfe-card__header ::slotted(h3){margin-bottom:0}.pfe-card__header ::slotted(h4){margin-bottom:0}.pfe-card__header ::slotted(h5){margin-bottom:0}.pfe-card__header ::slotted(h6){margin-bottom:0}:host(:not([has_header])) .pfe-card__body ::slotted([pfe-overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__body ::slotted([pfe-overflow~=top]){z-index:1;--pfe-card__overflow--MarginTop:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__body ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host([has_footer]) .pfe-card__body ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}:host(:not([has_footer])) .pfe-card__body{margin-bottom:0}.pfe-card__footer{margin-top:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-direction:var(--pfe-card__footer--Row,row);-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:var(--pfe-card__footer--Wrap,wrap);-ms-flex-wrap:var(--pfe-card__footer--Wrap,wrap);flex-wrap:var(--pfe-card__footer--Wrap,wrap);-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-align:var(--pfe-card__footer--AlignItems,baseline);-webkit-align-items:var(--pfe-card__footer--AlignItems,baseline);-ms-flex-align:var(--pfe-card__footer--AlignItems,baseline);align-items:var(--pfe-card__footer--AlignItems,baseline)}.pfe-card__footer ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_footer])) .pfe-card__footer{display:none}.pfe-card__body,.pfe-card__header{margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}.pfe-card__body ::slotted(p:first-child),.pfe-card__header ::slotted(p:first-child){margin-top:0}.pfe-card__body ::slotted(h1:first-child),.pfe-card__header ::slotted(h1:first-child){margin-top:0}.pfe-card__body ::slotted(h2:first-child),.pfe-card__header ::slotted(h2:first-child){margin-top:0}.pfe-card__body ::slotted(h3:first-child),.pfe-card__header ::slotted(h3:first-child){margin-top:0}.pfe-card__body ::slotted(h4:first-child),.pfe-card__header ::slotted(h4:first-child){margin-top:0}.pfe-card__body ::slotted(h5:first-child),.pfe-card__header ::slotted(h5:first-child){margin-top:0}.pfe-card__body ::slotted(h6:first-child),.pfe-card__header ::slotted(h6:first-child){margin-top:0}\n/*# sourceMappingURL=pfe-card.min.css.map */\n</style><div class="pfe-card__header">\n <slot name="pfe-card--header"></slot>\n</div>\n<div class="pfe-card__body">\n <slot></slot>\n</div>\n<div class="pfe-card__footer">\n <slot name="pfe-card--footer"></slot>\n</div>'}static get properties(){return{color:{title:"Background color",type:"string",enum:["lightest","base","darker","darkest","complement","accent"],default:"base",prefixed:!0,observer:"_colorChanged"},"img-src":{title:"Background image",type:"string",observer:"_imgSrcChanged"},size:{title:"Padding size",type:"string",enum:["small"],observer:"_basicAttributeChanged"}}}static get slots(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{title:"Body item",oneOf:[{$ref:"raw"}]}},body:{title:"Body",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"pfe-card"},{$ref:"raw"}]}},footer:{title:"Footer",type:"array",namedSlot:!0,maxItems:3,items:{oneOf:[{$ref:"pfe-cta"},{$ref:"raw"}]}}}}static get tag(){return"pfe-card"}get schemaUrl(){return"pfe-card.json"}get templateUrl(){return"pfe-card.html"}get styleUrl(){return"pfe-card.scss"}get imageSrc(){return this.getAttribute("pfe-img-src")}get backgroundColor(){return this.getAttribute("pfe-color")||"base"}static get observedAttributes(){return["pfe-color","pfe-img-src","pfe-size"]}static get PfeType(){return e.PfeTypes.Container}constructor(){super(r,{type:r.PfeType}),this._observer=new MutationObserver(()=>{this._mapSchemaToSlots(this.tag,this.slots)})}connectedCallback(){super.connectedCallback(),this.imageSrc&&this._imgSrcChanged("pfe-img-src","",this.imageSrc),this._observer.observe(this,{childList:!0})}disconnectedCallback(){this._observer.disconnect()}attributeChangedCallback(e,r,a){if(super.attributeChangedCallback(e,r,a),this[e=e.replace("pfe-","")]&&this[e].observer){let t=this[this[e].observer].bind(this);"function"==typeof t&&t(e,r,a)}}_basicAttributeChanged(e,r,a){this[e].value=a}_colorChanged(e,r,a){this[e].value=a,this.context_update()}_imgSrcChanged(e,r,a){this.style.backgroundImage=a?`url('${a}')`:""}}e.create(r);export default r; | ||
*/;class r extends e{static get version(){return"1.0.0"}get html(){return'\n<style>@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([color=accent]),:host([color=base]),:host([color=complement]),:host([color=darker]),:host([color=darkest]),:host([color=lightest]){background-color:#fff!important;color:#151515!important}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host{--context:var(--pfe-card--context, var(--pfe-theme--color--surface--base--context, light));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:calc(16px * 2) calc(16px * 2) calc(16px * 2) calc(16px * 2);padding:var(--pfe-card--Padding,var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)));border:0 solid #d2d2d2;border:var(--pfe-card--Border,var(--pfe-card--BorderWidth,0) var(--pfe-card--BorderStyle,solid) var(--pfe-card--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2)));border-radius:3px;border-radius:var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px));overflow:hidden;background-color:#f0f0f0;background-color:var(--pfe-card--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));background-position:center center;background-position:var(--pfe-card--BackgroundPosition,center center);color:#3c3f42;color:var(--pfe-broadcasted--text,#3c3f42)}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}@media print{:host{border-radius:3px;border:1px solid #d2d2d2}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{background-color:#fff!important;background-color:var(--pfe-theme--color--surface--lightest,#fff)!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important;background-image:none!important;border-radius:3px;border:1px solid #d2d2d2;padding:16px;padding:var(--pfe-theme--container-spacer,16px)}}:host([color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #3c3f42);--pfe-card--context:var(--pfe-theme--color--surface--darker--context, dark)}:host([color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515);--pfe-card--context:var(--pfe-theme--color--surface--darkest--context, dark)}:host([color=base]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #f0f0f0);--pfe-card--context:var(--pfe-theme--color--surface--base--context, light)}:host([color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-card--context:var(--pfe-theme--color--surface--lightest--context, light)}:host([color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #004080);--pfe-card--context:var(--pfe-theme--color--surface--accent--context, saturated)}:host([color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #002952);--pfe-card--context:var(--pfe-theme--color--surface--complement--context, saturated)}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 16px)}:host([border]:not([border=false])){--pfe-card--BorderWidth:1px}.pfe-card__body ::slotted([overflow~=top]),.pfe-card__footer ::slotted([overflow~=top]),.pfe-card__header ::slotted([overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * calc(16px * 2))!important;margin-top:calc(-1 * var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}:host([has_header]) .pfe-card__body ::slotted([overflow~=top]),:host([has_header]) .pfe-card__footer ::slotted([overflow~=top]),:host([has_header]) .pfe-card__header ::slotted([overflow~=top]){padding-top:16px;padding-top:var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px))}.pfe-card__body ::slotted([overflow~=right]),.pfe-card__footer ::slotted([overflow~=right]),.pfe-card__header ::slotted([overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * calc(16px * 2));margin-right:calc(-1 * var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted([overflow~=bottom]),.pfe-card__footer ::slotted([overflow~=bottom]),.pfe-card__header ::slotted([overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(calc(16px * 2) + 3px));margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px))));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.pfe-card__body ::slotted([overflow~=left]),.pfe-card__footer ::slotted([overflow~=left]),.pfe-card__header ::slotted([overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * calc(16px * 2));margin-left:calc(-1 * var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted(img),.pfe-card__footer ::slotted(img),.pfe-card__header ::slotted(img){max-width:100%!important;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-o-object-fit:cover;object-fit:cover}.pfe-card__body ::slotted(img:not[overflow]),.pfe-card__footer ::slotted(img:not[overflow]),.pfe-card__header ::slotted(img:not[overflow]){-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.pfe-card__body ::slotted(img[overflow]),.pfe-card__footer ::slotted(img[overflow]),.pfe-card__header ::slotted(img[overflow]){max-width:unset!important}.pfe-card__body ::slotted(img[overflow~=right]),.pfe-card__footer ::slotted(img[overflow~=right]),.pfe-card__header ::slotted(img[overflow~=right]){width:calc(100% + 2rem)!important;width:calc(100% + calc(16px * 2))!important;width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[overflow~=left]),.pfe-card__footer ::slotted(img[overflow~=left]),.pfe-card__header ::slotted(img[overflow~=left]){width:calc(100% + 2rem)!important;width:calc(100% + calc(16px * 2))!important;width:calc(100% + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__footer ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__header ::slotted(img[overflow~=right][overflow~=left]){width:calc(100% + 4rem)!important;width:calc(100% + calc(16px * 2) + calc(16px * 2))!important;width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__header{z-index:2;background-color:rgba(0,0,0,.09);background-color:var(--pfe-card__header--BackgroundColor,rgba(0,0,0,var(--pfe-theme--opacity,.09)));color:#3c3f42;color:var(--pfe-card__header--Color,var(--pfe-broadcasted--text,#3c3f42));margin-top:calc(calc(16px * 2) * -1)!important;margin-top:calc(var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1)!important;margin-right:calc(calc(16px * 2) * -1);margin-right:calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));margin-left:calc(calc(16px * 2) * -1);margin-left:calc(var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);padding-top:16px;padding-top:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));padding-right:calc(16px * 2);padding-right:var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-left:calc(16px * 2);padding-left:var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-bottom:16px;padding-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}:host([on=dark]) .pfe-card__header{background-color:rgba(255,255,255,.09);background-color:var(--pfe-card__header--BackgroundColor--dark,rgba(255,255,255,var(--pfe-theme--opacity,.09)))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pfe-card__header{background-color:#fff!important;color:#151515!important}}:host(:not([has_body]):not([has_footer])) .pfe-card__header{margin-bottom:calc(16px * 2);margin-bottom:var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2))}.pfe-card__header ::slotted([overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_header])) .pfe-card__header{display:none}:host([has_body],[has_footer]) .pfe-card__header ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__header ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__header ::slotted(h1){margin-bottom:0}.pfe-card__header ::slotted(h2){margin-bottom:0}.pfe-card__header ::slotted(h3){margin-bottom:0}.pfe-card__header ::slotted(h4){margin-bottom:0}.pfe-card__header ::slotted(h5){margin-bottom:0}.pfe-card__header ::slotted(h6){margin-bottom:0}:host(:not([has_header])) .pfe-card__body ::slotted([overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__body ::slotted([overflow~=top]){z-index:1;--pfe-card__overflow--MarginTop:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__body ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host([has_footer]) .pfe-card__body ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}:host(:not([has_footer])) .pfe-card__body{margin-bottom:0}.pfe-card__footer{margin-top:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-direction:var(--pfe-card__footer--Row,row);-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:var(--pfe-card__footer--Wrap,wrap);-ms-flex-wrap:var(--pfe-card__footer--Wrap,wrap);flex-wrap:var(--pfe-card__footer--Wrap,wrap);-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-align:var(--pfe-card__footer--AlignItems,baseline);-webkit-align-items:var(--pfe-card__footer--AlignItems,baseline);-ms-flex-align:var(--pfe-card__footer--AlignItems,baseline);align-items:var(--pfe-card__footer--AlignItems,baseline)}.pfe-card__footer ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_footer])) .pfe-card__footer{display:none}.pfe-card__body,.pfe-card__header{margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}.pfe-card__body ::slotted(p:first-child),.pfe-card__header ::slotted(p:first-child){margin-top:0}.pfe-card__body ::slotted(h1:first-child),.pfe-card__header ::slotted(h1:first-child){margin-top:0}.pfe-card__body ::slotted(h2:first-child),.pfe-card__header ::slotted(h2:first-child){margin-top:0}.pfe-card__body ::slotted(h3:first-child),.pfe-card__header ::slotted(h3:first-child){margin-top:0}.pfe-card__body ::slotted(h4:first-child),.pfe-card__header ::slotted(h4:first-child){margin-top:0}.pfe-card__body ::slotted(h5:first-child),.pfe-card__header ::slotted(h5:first-child){margin-top:0}.pfe-card__body ::slotted(h6:first-child),.pfe-card__header ::slotted(h6:first-child){margin-top:0} /*# sourceMappingURL=pfe-card.min.css.map */</style>\n<div class="pfe-card__header">\n <slot name="pfe-card--header"></slot>\n</div>\n<div class="pfe-card__body">\n <slot></slot>\n</div>\n<div class="pfe-card__footer">\n <slot name="pfe-card--footer"></slot>\n</div>'}static get tag(){return"pfe-card"}static get meta(){return{title:"Card",description:"This element creates a header, body, and footer region in which to place content or other components."}}get templateUrl(){return"pfe-card.html"}get styleUrl(){return"pfe-card.scss"}static get properties(){return{color:{title:"Background color",type:String,values:["lightest","base","darker","darkest","complement","accent"],default:"base",observer:"_colorChanged"},oldColor:{type:String,prefix:!1,alias:"color",attr:"pfe-color"},imgSrc:{title:"Background image",type:String,observer:"_imageSrcChanged"},pfeImgSrc:{type:String,prefix:!1,alias:"imgSrc"},size:{title:"Padding size",type:String,values:["small"]},pfeSize:{type:String,values:["small"],prefix:!1,alias:"size"},border:{title:"Border",type:Boolean},oldBorder:{alias:"border",attr:"pfe-border"}}}static get slots(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{$ref:"raw"}},body:{title:"Body",type:"array",namedSlot:!1,items:{$ref:"raw"}},footer:{title:"Footer",type:"array",namedSlot:!0,maxItems:3,items:{oneOf:[{$ref:"pfe-cta"},{$ref:"raw"}]}}}}static get PfeType(){return e.PfeTypes.Container}constructor(){super(r,{type:r.PfeType})}_colorChanged(){this.resetContext()}_imageSrcChanged(e,r){this.style.backgroundImage=r?`url('${r}')`:""}}e.create(r);export default r; | ||
//# sourceMappingURL=pfe-card.min.js.map |
@@ -28,54 +28,2 @@ (function (global, factory) { | ||
// @POLYFILL Array.includes | ||
// https://tc39.github.io/ecma262/#sec-array.prototype.includes | ||
if (!Array.prototype.includes) { | ||
Object.defineProperty(Array.prototype, "includes", { | ||
value: function value(valueToFind, fromIndex) { | ||
if (this == null) { | ||
throw new TypeError('"this" is null or not defined'); | ||
} | ||
// 1. Let O be ? ToObject(this value). | ||
var o = Object(this); | ||
// 2. Let len be ? ToLength(? Get(O, "length")). | ||
var len = o.length >>> 0; | ||
// 3. If len is 0, return false. | ||
if (len === 0) { | ||
return false; | ||
} | ||
// 4. Let n be ? ToInteger(fromIndex). | ||
// (If fromIndex is undefined, this step produces the value 0.) | ||
var n = fromIndex | 0; | ||
// 5. If n ≥ 0, then | ||
// a. Let k be n. | ||
// 6. Else n < 0, | ||
// a. Let k be len + n. | ||
// b. If k < 0, let k be 0. | ||
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); | ||
function sameValueZero(x, y) { | ||
return x === y || typeof x === "number" && typeof y === "number" && isNaN(x) && isNaN(y); | ||
} | ||
// 7. Repeat, while k < len | ||
while (k < len) { | ||
// a. Let elementK be the result of ? Get(O, ! ToString(k)). | ||
// b. If SameValueZero(valueToFind, elementK) is true, return true. | ||
if (sameValueZero(o[k], valueToFind)) { | ||
return true; | ||
} | ||
// c. Increase k by 1. | ||
k++; | ||
} | ||
// 8. Return false | ||
return false; | ||
} | ||
}); | ||
} | ||
var classCallCheck = function (instance, Constructor) { | ||
@@ -105,27 +53,2 @@ if (!(instance instanceof Constructor)) { | ||
var get = function get(object, property, receiver) { | ||
if (object === null) object = Function.prototype; | ||
var desc = Object.getOwnPropertyDescriptor(object, property); | ||
if (desc === undefined) { | ||
var parent = Object.getPrototypeOf(object); | ||
if (parent === null) { | ||
return undefined; | ||
} else { | ||
return get(parent, property, receiver); | ||
} | ||
} else if ("value" in desc) { | ||
return desc.value; | ||
} else { | ||
var getter = desc.get; | ||
if (getter === undefined) { | ||
return undefined; | ||
} | ||
return getter.call(receiver); | ||
} | ||
}; | ||
var inherits = function (subClass, superClass) { | ||
@@ -156,3 +79,3 @@ if (typeof superClass !== "function" && superClass !== null) { | ||
/*! | ||
* PatternFly Elements: PfeCard 1.0.0-prerelease.55 | ||
* PatternFly Elements: PfeCard 1.0.0 | ||
* @license | ||
@@ -185,11 +108,9 @@ * Copyright 2020 Red Hat, Inc. | ||
key: "html", | ||
// Injected at build-time | ||
get: function get$$1() { | ||
return "<style>@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([pfe-color=accent]),:host([pfe-color=base]),:host([pfe-color=complement]),:host([pfe-color=darker]),:host([pfe-color=darkest]),:host([pfe-color=lightest]){background-color:#fff!important;color:#151515!important}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host{--theme:var(--pfe-card--theme, var(--pfe-theme--color--surface--base--theme, light));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:calc(16px * 2) calc(16px * 2) calc(16px * 2) calc(16px * 2);padding:var(--pfe-card--Padding,var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)));border:0 solid #d2d2d2;border:var(--pfe-card--Border,var(--pfe-card--BorderWidth,0) var(--pfe-card--BorderStyle,solid) var(--pfe-card--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2)));border-radius:3px;border-radius:var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px));overflow:hidden;background-color:#f0f0f0;background-color:var(--pfe-card--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));background-position:center center;background-position:var(--pfe-card--BackgroundPosition,center center);color:#3c3f42;color:var(--pfe-broadcasted--text,#3c3f42)}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}@media print{:host{border-radius:3px;border:1px solid #d2d2d2}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{background-color:#fff!important;background-color:var(--pfe-theme--color--surface--lightest,#fff)!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important;background-image:none!important;border-radius:3px;border:1px solid #d2d2d2;padding:16px;padding:var(--pfe-theme--container-spacer,16px)}}:host([pfe-color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #3c3f42);--pfe-card--theme:var(--pfe-theme--color--surface--darker--theme, dark)}:host([pfe-color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515);--pfe-card--theme:var(--pfe-theme--color--surface--darkest--theme, dark)}:host([pfe-color=base]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #f0f0f0);--pfe-card--theme:var(--pfe-theme--color--surface--base--theme, light)}:host([pfe-color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-card--theme:var(--pfe-theme--color--surface--lightest--theme, light)}:host([pfe-color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #004080);--pfe-card--theme:var(--pfe-theme--color--surface--accent--theme, saturated)}:host([pfe-color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #002952);--pfe-card--theme:var(--pfe-theme--color--surface--complement--theme, saturated)}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #8476d1);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([pfe-size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 16px)}:host([pfe-border]:not([pfe-border=false])){--pfe-card--BorderWidth:1px}.pfe-card__body ::slotted([pfe-overflow~=top]),.pfe-card__footer ::slotted([pfe-overflow~=top]),.pfe-card__header ::slotted([pfe-overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * calc(16px * 2))!important;margin-top:calc(-1 * var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}:host([has_header]) .pfe-card__body ::slotted([pfe-overflow~=top]),:host([has_header]) .pfe-card__footer ::slotted([pfe-overflow~=top]),:host([has_header]) .pfe-card__header ::slotted([pfe-overflow~=top]){padding-top:16px;padding-top:var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px))}.pfe-card__body ::slotted([pfe-overflow~=right]),.pfe-card__footer ::slotted([pfe-overflow~=right]),.pfe-card__header ::slotted([pfe-overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * calc(16px * 2));margin-right:calc(-1 * var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted([pfe-overflow~=bottom]),.pfe-card__footer ::slotted([pfe-overflow~=bottom]),.pfe-card__header ::slotted([pfe-overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(calc(16px * 2) + 3px));margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px))));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.pfe-card__body ::slotted([pfe-overflow~=left]),.pfe-card__footer ::slotted([pfe-overflow~=left]),.pfe-card__header ::slotted([pfe-overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * calc(16px * 2));margin-left:calc(-1 * var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted(img),.pfe-card__footer ::slotted(img),.pfe-card__header ::slotted(img){max-width:100%!important;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-o-object-fit:cover;object-fit:cover}.pfe-card__body ::slotted(img:not[pfe-overflow]),.pfe-card__footer ::slotted(img:not[pfe-overflow]),.pfe-card__header ::slotted(img:not[pfe-overflow]){-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.pfe-card__body ::slotted(img[pfe-overflow~=right]),.pfe-card__footer ::slotted(img[pfe-overflow~=right]),.pfe-card__header ::slotted(img[pfe-overflow~=right]){max-width:calc(100% + 2rem)!important;max-width:calc(100% + calc(16px * 2))!important;max-width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[pfe-overflow~=left]),.pfe-card__footer ::slotted(img[pfe-overflow~=left]),.pfe-card__header ::slotted(img[pfe-overflow~=left]){max-width:calc(100% + 2rem)!important;max-width:calc(100% + calc(16px * 2))!important;max-width:calc(100% + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]),.pfe-card__footer ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]),.pfe-card__header ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]){max-width:calc(100% + 4rem)!important;max-width:calc(100% + calc(calc(16px * 2) + calc(16px * 2)))!important;max-width:calc(100% + calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2))))!important}.pfe-card__header{z-index:2;background-color:rgba(0,0,0,.09);background-color:var(--pfe-card__header--BackgroundColor,rgba(0,0,0,var(--pfe-theme--opacity,.09)));color:#3c3f42;color:var(--pfe-card__header--Color,var(--pfe-broadcasted--text,#3c3f42));margin-top:calc(calc(16px * 2) * -1)!important;margin-top:calc(var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1)!important;margin-right:calc(calc(16px * 2) * -1);margin-right:calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));margin-left:calc(calc(16px * 2) * -1);margin-left:calc(var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);padding-top:16px;padding-top:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));padding-right:calc(16px * 2);padding-right:var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-left:calc(16px * 2);padding-left:var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-bottom:16px;padding-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}:host([on=dark]) .pfe-card__header{background-color:rgba(255,255,255,.09);background-color:var(--pfe-card__header--BackgroundColor--dark,rgba(255,255,255,var(--pfe-theme--opacity,.09)))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pfe-card__header{background-color:#fff!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important}}:host(:not([has_body]):not([has_footer])) .pfe-card__header{margin-bottom:calc(16px * 2);margin-bottom:var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2))}.pfe-card__header ::slotted([pfe-overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_header])) .pfe-card__header{display:none}:host([has_body],[has_footer]) .pfe-card__header ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__header ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__header ::slotted(h1){margin-bottom:0}.pfe-card__header ::slotted(h2){margin-bottom:0}.pfe-card__header ::slotted(h3){margin-bottom:0}.pfe-card__header ::slotted(h4){margin-bottom:0}.pfe-card__header ::slotted(h5){margin-bottom:0}.pfe-card__header ::slotted(h6){margin-bottom:0}:host(:not([has_header])) .pfe-card__body ::slotted([pfe-overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__body ::slotted([pfe-overflow~=top]){z-index:1;--pfe-card__overflow--MarginTop:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__body ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host([has_footer]) .pfe-card__body ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}:host(:not([has_footer])) .pfe-card__body{margin-bottom:0}.pfe-card__footer{margin-top:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-direction:var(--pfe-card__footer--Row,row);-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:var(--pfe-card__footer--Wrap,wrap);-ms-flex-wrap:var(--pfe-card__footer--Wrap,wrap);flex-wrap:var(--pfe-card__footer--Wrap,wrap);-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-align:var(--pfe-card__footer--AlignItems,baseline);-webkit-align-items:var(--pfe-card__footer--AlignItems,baseline);-ms-flex-align:var(--pfe-card__footer--AlignItems,baseline);align-items:var(--pfe-card__footer--AlignItems,baseline)}.pfe-card__footer ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_footer])) .pfe-card__footer{display:none}.pfe-card__body,.pfe-card__header{margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}.pfe-card__body ::slotted(p:first-child),.pfe-card__header ::slotted(p:first-child){margin-top:0}.pfe-card__body ::slotted(h1:first-child),.pfe-card__header ::slotted(h1:first-child){margin-top:0}.pfe-card__body ::slotted(h2:first-child),.pfe-card__header ::slotted(h2:first-child){margin-top:0}.pfe-card__body ::slotted(h3:first-child),.pfe-card__header ::slotted(h3:first-child){margin-top:0}.pfe-card__body ::slotted(h4:first-child),.pfe-card__header ::slotted(h4:first-child){margin-top:0}.pfe-card__body ::slotted(h5:first-child),.pfe-card__header ::slotted(h5:first-child){margin-top:0}.pfe-card__body ::slotted(h6:first-child),.pfe-card__header ::slotted(h6:first-child){margin-top:0}\n/*# sourceMappingURL=pfe-card.min.css.map */\n</style><div class=\"pfe-card__header\">\n <slot name=\"pfe-card--header\"></slot>\n</div>\n<div class=\"pfe-card__body\">\n <slot></slot>\n</div>\n<div class=\"pfe-card__footer\">\n <slot name=\"pfe-card--footer\"></slot>\n</div>"; | ||
return "\n<style>@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([color=accent]),:host([color=base]),:host([color=complement]),:host([color=darker]),:host([color=darkest]),:host([color=lightest]){background-color:#fff!important;color:#151515!important}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host{--context:var(--pfe-card--context, var(--pfe-theme--color--surface--base--context, light));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:calc(16px * 2) calc(16px * 2) calc(16px * 2) calc(16px * 2);padding:var(--pfe-card--Padding,var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)));border:0 solid #d2d2d2;border:var(--pfe-card--Border,var(--pfe-card--BorderWidth,0) var(--pfe-card--BorderStyle,solid) var(--pfe-card--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2)));border-radius:3px;border-radius:var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px));overflow:hidden;background-color:#f0f0f0;background-color:var(--pfe-card--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));background-position:center center;background-position:var(--pfe-card--BackgroundPosition,center center);color:#3c3f42;color:var(--pfe-broadcasted--text,#3c3f42)}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}@media print{:host{border-radius:3px;border:1px solid #d2d2d2}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{background-color:#fff!important;background-color:var(--pfe-theme--color--surface--lightest,#fff)!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important;background-image:none!important;border-radius:3px;border:1px solid #d2d2d2;padding:16px;padding:var(--pfe-theme--container-spacer,16px)}}:host([color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #3c3f42);--pfe-card--context:var(--pfe-theme--color--surface--darker--context, dark)}:host([color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515);--pfe-card--context:var(--pfe-theme--color--surface--darkest--context, dark)}:host([color=base]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #f0f0f0);--pfe-card--context:var(--pfe-theme--color--surface--base--context, light)}:host([color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-card--context:var(--pfe-theme--color--surface--lightest--context, light)}:host([color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #004080);--pfe-card--context:var(--pfe-theme--color--surface--accent--context, saturated)}:host([color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #002952);--pfe-card--context:var(--pfe-theme--color--surface--complement--context, saturated)}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 16px)}:host([border]:not([border=false])){--pfe-card--BorderWidth:1px}.pfe-card__body ::slotted([overflow~=top]),.pfe-card__footer ::slotted([overflow~=top]),.pfe-card__header ::slotted([overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * calc(16px * 2))!important;margin-top:calc(-1 * var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}:host([has_header]) .pfe-card__body ::slotted([overflow~=top]),:host([has_header]) .pfe-card__footer ::slotted([overflow~=top]),:host([has_header]) .pfe-card__header ::slotted([overflow~=top]){padding-top:16px;padding-top:var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px))}.pfe-card__body ::slotted([overflow~=right]),.pfe-card__footer ::slotted([overflow~=right]),.pfe-card__header ::slotted([overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * calc(16px * 2));margin-right:calc(-1 * var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted([overflow~=bottom]),.pfe-card__footer ::slotted([overflow~=bottom]),.pfe-card__header ::slotted([overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(calc(16px * 2) + 3px));margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px))));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.pfe-card__body ::slotted([overflow~=left]),.pfe-card__footer ::slotted([overflow~=left]),.pfe-card__header ::slotted([overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * calc(16px * 2));margin-left:calc(-1 * var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted(img),.pfe-card__footer ::slotted(img),.pfe-card__header ::slotted(img){max-width:100%!important;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-o-object-fit:cover;object-fit:cover}.pfe-card__body ::slotted(img:not[overflow]),.pfe-card__footer ::slotted(img:not[overflow]),.pfe-card__header ::slotted(img:not[overflow]){-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.pfe-card__body ::slotted(img[overflow]),.pfe-card__footer ::slotted(img[overflow]),.pfe-card__header ::slotted(img[overflow]){max-width:unset!important}.pfe-card__body ::slotted(img[overflow~=right]),.pfe-card__footer ::slotted(img[overflow~=right]),.pfe-card__header ::slotted(img[overflow~=right]){width:calc(100% + 2rem)!important;width:calc(100% + calc(16px * 2))!important;width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[overflow~=left]),.pfe-card__footer ::slotted(img[overflow~=left]),.pfe-card__header ::slotted(img[overflow~=left]){width:calc(100% + 2rem)!important;width:calc(100% + calc(16px * 2))!important;width:calc(100% + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__footer ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__header ::slotted(img[overflow~=right][overflow~=left]){width:calc(100% + 4rem)!important;width:calc(100% + calc(16px * 2) + calc(16px * 2))!important;width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__header{z-index:2;background-color:rgba(0,0,0,.09);background-color:var(--pfe-card__header--BackgroundColor,rgba(0,0,0,var(--pfe-theme--opacity,.09)));color:#3c3f42;color:var(--pfe-card__header--Color,var(--pfe-broadcasted--text,#3c3f42));margin-top:calc(calc(16px * 2) * -1)!important;margin-top:calc(var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1)!important;margin-right:calc(calc(16px * 2) * -1);margin-right:calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));margin-left:calc(calc(16px * 2) * -1);margin-left:calc(var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);padding-top:16px;padding-top:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));padding-right:calc(16px * 2);padding-right:var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-left:calc(16px * 2);padding-left:var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-bottom:16px;padding-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}:host([on=dark]) .pfe-card__header{background-color:rgba(255,255,255,.09);background-color:var(--pfe-card__header--BackgroundColor--dark,rgba(255,255,255,var(--pfe-theme--opacity,.09)))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pfe-card__header{background-color:#fff!important;color:#151515!important}}:host(:not([has_body]):not([has_footer])) .pfe-card__header{margin-bottom:calc(16px * 2);margin-bottom:var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2))}.pfe-card__header ::slotted([overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_header])) .pfe-card__header{display:none}:host([has_body],[has_footer]) .pfe-card__header ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__header ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__header ::slotted(h1){margin-bottom:0}.pfe-card__header ::slotted(h2){margin-bottom:0}.pfe-card__header ::slotted(h3){margin-bottom:0}.pfe-card__header ::slotted(h4){margin-bottom:0}.pfe-card__header ::slotted(h5){margin-bottom:0}.pfe-card__header ::slotted(h6){margin-bottom:0}:host(:not([has_header])) .pfe-card__body ::slotted([overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__body ::slotted([overflow~=top]){z-index:1;--pfe-card__overflow--MarginTop:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__body ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host([has_footer]) .pfe-card__body ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}:host(:not([has_footer])) .pfe-card__body{margin-bottom:0}.pfe-card__footer{margin-top:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-direction:var(--pfe-card__footer--Row,row);-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:var(--pfe-card__footer--Wrap,wrap);-ms-flex-wrap:var(--pfe-card__footer--Wrap,wrap);flex-wrap:var(--pfe-card__footer--Wrap,wrap);-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-align:var(--pfe-card__footer--AlignItems,baseline);-webkit-align-items:var(--pfe-card__footer--AlignItems,baseline);-ms-flex-align:var(--pfe-card__footer--AlignItems,baseline);align-items:var(--pfe-card__footer--AlignItems,baseline)}.pfe-card__footer ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_footer])) .pfe-card__footer{display:none}.pfe-card__body,.pfe-card__header{margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}.pfe-card__body ::slotted(p:first-child),.pfe-card__header ::slotted(p:first-child){margin-top:0}.pfe-card__body ::slotted(h1:first-child),.pfe-card__header ::slotted(h1:first-child){margin-top:0}.pfe-card__body ::slotted(h2:first-child),.pfe-card__header ::slotted(h2:first-child){margin-top:0}.pfe-card__body ::slotted(h3:first-child),.pfe-card__header ::slotted(h3:first-child){margin-top:0}.pfe-card__body ::slotted(h4:first-child),.pfe-card__header ::slotted(h4:first-child){margin-top:0}.pfe-card__body ::slotted(h5:first-child),.pfe-card__header ::slotted(h5:first-child){margin-top:0}.pfe-card__body ::slotted(h6:first-child),.pfe-card__header ::slotted(h6:first-child){margin-top:0} /*# sourceMappingURL=pfe-card.min.css.map */</style>\n<div class=\"pfe-card__header\">\n <slot name=\"pfe-card--header\"></slot>\n</div>\n<div class=\"pfe-card__body\">\n <slot></slot>\n</div>\n<div class=\"pfe-card__footer\">\n <slot name=\"pfe-card--footer\"></slot>\n</div>"; | ||
} | ||
}, { | ||
key: "schemaUrl", | ||
get: function get$$1() { | ||
return "pfe-card.json"; | ||
} | ||
}, { | ||
key: "templateUrl", | ||
@@ -204,36 +125,113 @@ get: function get$$1() { | ||
} | ||
}, { | ||
key: "imageSrc", | ||
get: function get$$1() { | ||
return this.getAttribute("pfe-img-src"); | ||
} | ||
}, { | ||
key: "backgroundColor", | ||
get: function get$$1() { | ||
return this.getAttribute("pfe-color") || "base"; | ||
} | ||
// @TODO: How do we handle attributes for slotted content? | ||
}], [{ | ||
key: "version", | ||
// Injected at build-time | ||
get: function get$$1() { | ||
return "1.0.0-prerelease.55"; | ||
return "1.0.0"; | ||
} | ||
}, { | ||
key: "properties", | ||
key: "tag", | ||
get: function get$$1() { | ||
return { "color": { "title": "Background color", "type": "string", "enum": ["lightest", "base", "darker", "darkest", "complement", "accent"], "default": "base", "prefixed": true, "observer": "_colorChanged" }, "img-src": { "title": "Background image", "type": "string", "observer": "_imgSrcChanged" }, "size": { "title": "Padding size", "type": "string", "enum": ["small"], "observer": "_basicAttributeChanged" } }; | ||
return "pfe-card"; | ||
} | ||
}, { | ||
key: "slots", | ||
key: "meta", | ||
get: function get$$1() { | ||
return { "header": { "title": "Header", "type": "array", "namedSlot": true, "maxItems": 3, "items": { "title": "Body item", "oneOf": [{ "$ref": "raw" }] } }, "body": { "title": "Body", "type": "array", "namedSlot": false, "items": { "oneOf": [{ "$ref": "pfe-card" }, { "$ref": "raw" }] } }, "footer": { "title": "Footer", "type": "array", "namedSlot": true, "maxItems": 3, "items": { "oneOf": [{ "$ref": "pfe-cta" }, { "$ref": "raw" }] } } }; | ||
return { | ||
title: "Card", | ||
description: "This element creates a header, body, and footer region in which to place content or other components." | ||
}; | ||
} | ||
}, { | ||
key: "tag", | ||
key: "properties", | ||
get: function get$$1() { | ||
return "pfe-card"; | ||
return { | ||
color: { | ||
title: "Background color", | ||
type: String, | ||
values: ["lightest", "base", "darker", "darkest", "complement", "accent"], | ||
default: "base", | ||
observer: "_colorChanged" | ||
}, | ||
// @TODO: Deprecate property in 1.0 | ||
oldColor: { | ||
type: String, | ||
prefix: false, | ||
alias: "color", | ||
attr: "pfe-color" | ||
}, | ||
imgSrc: { | ||
title: "Background image", | ||
type: String, | ||
observer: "_imageSrcChanged" | ||
}, | ||
// @TODO: Deprecate property in 1.0 | ||
pfeImgSrc: { | ||
type: String, | ||
prefix: false, | ||
alias: "imgSrc" | ||
}, | ||
size: { | ||
title: "Padding size", | ||
type: String, | ||
values: ["small"] | ||
}, | ||
// @TODO: Deprecate property in 1.0 | ||
pfeSize: { | ||
type: String, | ||
values: ["small"], | ||
prefix: false, | ||
alias: "size" | ||
}, | ||
border: { | ||
title: "Border", | ||
type: Boolean | ||
}, | ||
// @TODO: Deprecate property in 1.0 | ||
oldBorder: { | ||
alias: "border", | ||
attr: "pfe-border" | ||
} | ||
}; | ||
} | ||
}, { | ||
key: "observedAttributes", | ||
key: "slots", | ||
get: function get$$1() { | ||
return ["pfe-color", "pfe-img-src", "pfe-size"]; | ||
return { | ||
header: { | ||
title: "Header", | ||
type: "array", | ||
namedSlot: true, | ||
maxItems: 3, | ||
items: { | ||
$ref: "raw" | ||
} | ||
}, | ||
body: { | ||
title: "Body", | ||
type: "array", | ||
namedSlot: false, | ||
items: { | ||
$ref: "raw" | ||
} | ||
}, | ||
footer: { | ||
title: "Footer", | ||
type: "array", | ||
namedSlot: true, | ||
maxItems: 3, | ||
items: { | ||
oneOf: [{ | ||
$ref: "pfe-cta" | ||
}, { | ||
$ref: "raw" | ||
}] | ||
} | ||
} | ||
}; | ||
} | ||
@@ -252,56 +250,13 @@ | ||
classCallCheck(this, PfeCard); | ||
return possibleConstructorReturn(this, (PfeCard.__proto__ || Object.getPrototypeOf(PfeCard)).call(this, PfeCard, { type: PfeCard.PfeType })); | ||
} | ||
var _this = possibleConstructorReturn(this, (PfeCard.__proto__ || Object.getPrototypeOf(PfeCard)).call(this, PfeCard, { type: PfeCard.PfeType })); | ||
// If the color changes, update the context | ||
_this._observer = new MutationObserver(function () { | ||
_this._mapSchemaToSlots(_this.tag, _this.slots); | ||
}); | ||
return _this; | ||
} | ||
createClass(PfeCard, [{ | ||
key: "connectedCallback", | ||
value: function connectedCallback() { | ||
get(PfeCard.prototype.__proto__ || Object.getPrototypeOf(PfeCard.prototype), "connectedCallback", this).call(this); | ||
// Initialize the background image attachment | ||
if (this.imageSrc) { | ||
this._imgSrcChanged("pfe-img-src", "", this.imageSrc); | ||
} | ||
this._observer.observe(this, { childList: true }); | ||
} | ||
}, { | ||
key: "disconnectedCallback", | ||
value: function disconnectedCallback() { | ||
this._observer.disconnect(); | ||
} | ||
}, { | ||
key: "attributeChangedCallback", | ||
value: function attributeChangedCallback(attr, oldValue, newValue) { | ||
get(PfeCard.prototype.__proto__ || Object.getPrototypeOf(PfeCard.prototype), "attributeChangedCallback", this).call(this, attr, oldValue, newValue); | ||
// Strip the prefix from the attribute | ||
attr = attr.replace("pfe-", ""); | ||
// If the observer is defined in the attribute properties | ||
if (this[attr] && this[attr].observer) { | ||
// Get the observer function | ||
var observer = this[this[attr].observer].bind(this); | ||
// If it's a function, allow it to run | ||
if (typeof observer === "function") observer(attr, oldValue, newValue); | ||
} | ||
} | ||
}, { | ||
key: "_basicAttributeChanged", | ||
value: function _basicAttributeChanged(attr, oldValue, newValue) { | ||
this[attr].value = newValue; | ||
} | ||
// Update the color attribute and contexts | ||
}, { | ||
key: "_colorChanged", | ||
value: function _colorChanged(attr, oldValue, newValue) { | ||
this[attr].value = newValue; | ||
// Trigger an update in nested components | ||
this.context_update(); | ||
value: function _colorChanged() { | ||
// Update the context | ||
this.resetContext(); | ||
} | ||
@@ -312,4 +267,4 @@ | ||
}, { | ||
key: "_imgSrcChanged", | ||
value: function _imgSrcChanged(attr, oldValue, newValue) { | ||
key: "_imageSrcChanged", | ||
value: function _imageSrcChanged(oldValue, newValue) { | ||
// Set the image as the background image | ||
@@ -316,0 +271,0 @@ this.style.backgroundImage = newValue ? "url('" + newValue + "')" : ""; |
@@ -1,2 +0,2 @@ | ||
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("../../pfelement/dist/pfelement.umd")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd"],r):e.PfeCard=r(e.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var r=this;do{if(r.matches(e))return r;r=r.parentElement||r.parentNode}while(null!==r&&1===r.nodeType);return null}),Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{value:function(e,r){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),a=t.length>>>0;if(0==a)return!1;var o,c,d=0|r,n=Math.max(0<=d?d:a-Math.abs(d),0);for(;n<a;){if((o=t[n])===(c=e)||"number"==typeof o&&"number"==typeof c&&isNaN(o)&&isNaN(c))return!0;n++}return!1}});var r=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},t=function(e,r,t){return r&&a(e.prototype,r),t&&a(e,t),e};function a(e,r){for(var t=0;t<r.length;t++){var a=r[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function d(e,r,t){null===e&&(e=Function.prototype);var a=Object.getOwnPropertyDescriptor(e,r);if(void 0===a){var o=Object.getPrototypeOf(e);return null===o?void 0:d(o,r,t)}if("value"in a)return a.value;var c=a.get;return void 0!==c?c.call(t):void 0}var o=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},c=(function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)}(n,e),t(n,[{key:"html",get:function(){return'<style>@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([pfe-color=accent]),:host([pfe-color=base]),:host([pfe-color=complement]),:host([pfe-color=darker]),:host([pfe-color=darkest]),:host([pfe-color=lightest]){background-color:#fff!important;color:#151515!important}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host{--theme:var(--pfe-card--theme, var(--pfe-theme--color--surface--base--theme, light));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:calc(16px * 2) calc(16px * 2) calc(16px * 2) calc(16px * 2);padding:var(--pfe-card--Padding,var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)));border:0 solid #d2d2d2;border:var(--pfe-card--Border,var(--pfe-card--BorderWidth,0) var(--pfe-card--BorderStyle,solid) var(--pfe-card--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2)));border-radius:3px;border-radius:var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px));overflow:hidden;background-color:#f0f0f0;background-color:var(--pfe-card--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));background-position:center center;background-position:var(--pfe-card--BackgroundPosition,center center);color:#3c3f42;color:var(--pfe-broadcasted--text,#3c3f42)}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}@media print{:host{border-radius:3px;border:1px solid #d2d2d2}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{background-color:#fff!important;background-color:var(--pfe-theme--color--surface--lightest,#fff)!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important;background-image:none!important;border-radius:3px;border:1px solid #d2d2d2;padding:16px;padding:var(--pfe-theme--container-spacer,16px)}}:host([pfe-color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #3c3f42);--pfe-card--theme:var(--pfe-theme--color--surface--darker--theme, dark)}:host([pfe-color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515);--pfe-card--theme:var(--pfe-theme--color--surface--darkest--theme, dark)}:host([pfe-color=base]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #f0f0f0);--pfe-card--theme:var(--pfe-theme--color--surface--base--theme, light)}:host([pfe-color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-card--theme:var(--pfe-theme--color--surface--lightest--theme, light)}:host([pfe-color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #004080);--pfe-card--theme:var(--pfe-theme--color--surface--accent--theme, saturated)}:host([pfe-color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #002952);--pfe-card--theme:var(--pfe-theme--color--surface--complement--theme, saturated)}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #8476d1);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([pfe-size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 16px)}:host([pfe-border]:not([pfe-border=false])){--pfe-card--BorderWidth:1px}.pfe-card__body ::slotted([pfe-overflow~=top]),.pfe-card__footer ::slotted([pfe-overflow~=top]),.pfe-card__header ::slotted([pfe-overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * calc(16px * 2))!important;margin-top:calc(-1 * var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}:host([has_header]) .pfe-card__body ::slotted([pfe-overflow~=top]),:host([has_header]) .pfe-card__footer ::slotted([pfe-overflow~=top]),:host([has_header]) .pfe-card__header ::slotted([pfe-overflow~=top]){padding-top:16px;padding-top:var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px))}.pfe-card__body ::slotted([pfe-overflow~=right]),.pfe-card__footer ::slotted([pfe-overflow~=right]),.pfe-card__header ::slotted([pfe-overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * calc(16px * 2));margin-right:calc(-1 * var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted([pfe-overflow~=bottom]),.pfe-card__footer ::slotted([pfe-overflow~=bottom]),.pfe-card__header ::slotted([pfe-overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(calc(16px * 2) + 3px));margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px))));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.pfe-card__body ::slotted([pfe-overflow~=left]),.pfe-card__footer ::slotted([pfe-overflow~=left]),.pfe-card__header ::slotted([pfe-overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * calc(16px * 2));margin-left:calc(-1 * var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted(img),.pfe-card__footer ::slotted(img),.pfe-card__header ::slotted(img){max-width:100%!important;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-o-object-fit:cover;object-fit:cover}.pfe-card__body ::slotted(img:not[pfe-overflow]),.pfe-card__footer ::slotted(img:not[pfe-overflow]),.pfe-card__header ::slotted(img:not[pfe-overflow]){-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.pfe-card__body ::slotted(img[pfe-overflow~=right]),.pfe-card__footer ::slotted(img[pfe-overflow~=right]),.pfe-card__header ::slotted(img[pfe-overflow~=right]){max-width:calc(100% + 2rem)!important;max-width:calc(100% + calc(16px * 2))!important;max-width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[pfe-overflow~=left]),.pfe-card__footer ::slotted(img[pfe-overflow~=left]),.pfe-card__header ::slotted(img[pfe-overflow~=left]){max-width:calc(100% + 2rem)!important;max-width:calc(100% + calc(16px * 2))!important;max-width:calc(100% + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]),.pfe-card__footer ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]),.pfe-card__header ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]){max-width:calc(100% + 4rem)!important;max-width:calc(100% + calc(calc(16px * 2) + calc(16px * 2)))!important;max-width:calc(100% + calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2))))!important}.pfe-card__header{z-index:2;background-color:rgba(0,0,0,.09);background-color:var(--pfe-card__header--BackgroundColor,rgba(0,0,0,var(--pfe-theme--opacity,.09)));color:#3c3f42;color:var(--pfe-card__header--Color,var(--pfe-broadcasted--text,#3c3f42));margin-top:calc(calc(16px * 2) * -1)!important;margin-top:calc(var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1)!important;margin-right:calc(calc(16px * 2) * -1);margin-right:calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));margin-left:calc(calc(16px * 2) * -1);margin-left:calc(var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);padding-top:16px;padding-top:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));padding-right:calc(16px * 2);padding-right:var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-left:calc(16px * 2);padding-left:var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-bottom:16px;padding-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}:host([on=dark]) .pfe-card__header{background-color:rgba(255,255,255,.09);background-color:var(--pfe-card__header--BackgroundColor--dark,rgba(255,255,255,var(--pfe-theme--opacity,.09)))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pfe-card__header{background-color:#fff!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important}}:host(:not([has_body]):not([has_footer])) .pfe-card__header{margin-bottom:calc(16px * 2);margin-bottom:var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2))}.pfe-card__header ::slotted([pfe-overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_header])) .pfe-card__header{display:none}:host([has_body],[has_footer]) .pfe-card__header ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__header ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__header ::slotted(h1){margin-bottom:0}.pfe-card__header ::slotted(h2){margin-bottom:0}.pfe-card__header ::slotted(h3){margin-bottom:0}.pfe-card__header ::slotted(h4){margin-bottom:0}.pfe-card__header ::slotted(h5){margin-bottom:0}.pfe-card__header ::slotted(h6){margin-bottom:0}:host(:not([has_header])) .pfe-card__body ::slotted([pfe-overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__body ::slotted([pfe-overflow~=top]){z-index:1;--pfe-card__overflow--MarginTop:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__body ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host([has_footer]) .pfe-card__body ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}:host(:not([has_footer])) .pfe-card__body{margin-bottom:0}.pfe-card__footer{margin-top:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-direction:var(--pfe-card__footer--Row,row);-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:var(--pfe-card__footer--Wrap,wrap);-ms-flex-wrap:var(--pfe-card__footer--Wrap,wrap);flex-wrap:var(--pfe-card__footer--Wrap,wrap);-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-align:var(--pfe-card__footer--AlignItems,baseline);-webkit-align-items:var(--pfe-card__footer--AlignItems,baseline);-ms-flex-align:var(--pfe-card__footer--AlignItems,baseline);align-items:var(--pfe-card__footer--AlignItems,baseline)}.pfe-card__footer ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_footer])) .pfe-card__footer{display:none}.pfe-card__body,.pfe-card__header{margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}.pfe-card__body ::slotted(p:first-child),.pfe-card__header ::slotted(p:first-child){margin-top:0}.pfe-card__body ::slotted(h1:first-child),.pfe-card__header ::slotted(h1:first-child){margin-top:0}.pfe-card__body ::slotted(h2:first-child),.pfe-card__header ::slotted(h2:first-child){margin-top:0}.pfe-card__body ::slotted(h3:first-child),.pfe-card__header ::slotted(h3:first-child){margin-top:0}.pfe-card__body ::slotted(h4:first-child),.pfe-card__header ::slotted(h4:first-child){margin-top:0}.pfe-card__body ::slotted(h5:first-child),.pfe-card__header ::slotted(h5:first-child){margin-top:0}.pfe-card__body ::slotted(h6:first-child),.pfe-card__header ::slotted(h6:first-child){margin-top:0}\n/*# sourceMappingURL=pfe-card.min.css.map */\n</style><div class="pfe-card__header">\n <slot name="pfe-card--header"></slot>\n</div>\n<div class="pfe-card__body">\n <slot></slot>\n</div>\n<div class="pfe-card__footer">\n <slot name="pfe-card--footer"></slot>\n</div>'}},{key:"schemaUrl",get:function(){return"pfe-card.json"}},{key:"templateUrl",get:function(){return"pfe-card.html"}},{key:"styleUrl",get:function(){return"pfe-card.scss"}},{key:"imageSrc",get:function(){return this.getAttribute("pfe-img-src")}},{key:"backgroundColor",get:function(){return this.getAttribute("pfe-color")||"base"}}],[{key:"version",get:function(){return"1.0.0-prerelease.55"}},{key:"properties",get:function(){return{color:{title:"Background color",type:"string",enum:["lightest","base","darker","darkest","complement","accent"],default:"base",prefixed:!0,observer:"_colorChanged"},"img-src":{title:"Background image",type:"string",observer:"_imgSrcChanged"},size:{title:"Padding size",type:"string",enum:["small"],observer:"_basicAttributeChanged"}}}},{key:"slots",get:function(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{title:"Body item",oneOf:[{$ref:"raw"}]}},body:{title:"Body",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"pfe-card"},{$ref:"raw"}]}},footer:{title:"Footer",type:"array",namedSlot:!0,maxItems:3,items:{oneOf:[{$ref:"pfe-cta"},{$ref:"raw"}]}}}}},{key:"tag",get:function(){return"pfe-card"}},{key:"observedAttributes",get:function(){return["pfe-color","pfe-img-src","pfe-size"]}},{key:"PfeType",get:function(){return e.PfeTypes.Container}}]),t(n,[{key:"connectedCallback",value:function(){d(n.prototype.__proto__||Object.getPrototypeOf(n.prototype),"connectedCallback",this).call(this),this.imageSrc&&this._imgSrcChanged("pfe-img-src","",this.imageSrc),this._observer.observe(this,{childList:!0})}},{key:"disconnectedCallback",value:function(){this._observer.disconnect()}},{key:"attributeChangedCallback",value:function(e,r,t){var a;d(n.prototype.__proto__||Object.getPrototypeOf(n.prototype),"attributeChangedCallback",this).call(this,e,r,t),this[e=e.replace("pfe-","")]&&this[e].observer&&"function"==typeof(a=this[this[e].observer].bind(this))&&a(e,r,t)}},{key:"_basicAttributeChanged",value:function(e,r,t){this[e].value=t}},{key:"_colorChanged",value:function(e,r,t){this[e].value=t,this.context_update()}},{key:"_imgSrcChanged",value:function(e,r,t){this.style.backgroundImage=t?"url('"+t+"')":""}}]),n);function n(){r(this,n);var e=o(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,n,{type:n.PfeType}));return e._observer=new MutationObserver(function(){e._mapSchemaToSlots(e.tag,e.slots)}),e}return e.create(c),c}); | ||
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],r):e.PfeCard=r(e.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var r=this;do{if(r.matches(e))return r}while(null!==(r=r.parentElement||r.parentNode)&&1===r.nodeType);return null});var r=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},a=function(e,r,a){return r&&t(e.prototype,r),a&&t(e,a),e};function t(e,r){for(var a=0;a<r.length;a++){var t=r[a];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}var o=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},a=(function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)}(c,e),a(c,[{key:"html",get:function(){return'\n<style>@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([color=accent]),:host([color=base]),:host([color=complement]),:host([color=darker]),:host([color=darkest]),:host([color=lightest]){background-color:#fff!important;color:#151515!important}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host{--context:var(--pfe-card--context, var(--pfe-theme--color--surface--base--context, light));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:calc(16px * 2) calc(16px * 2) calc(16px * 2) calc(16px * 2);padding:var(--pfe-card--Padding,var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)));border:0 solid #d2d2d2;border:var(--pfe-card--Border,var(--pfe-card--BorderWidth,0) var(--pfe-card--BorderStyle,solid) var(--pfe-card--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2)));border-radius:3px;border-radius:var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px));overflow:hidden;background-color:#f0f0f0;background-color:var(--pfe-card--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));background-position:center center;background-position:var(--pfe-card--BackgroundPosition,center center);color:#3c3f42;color:var(--pfe-broadcasted--text,#3c3f42)}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}@media print{:host{border-radius:3px;border:1px solid #d2d2d2}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{background-color:#fff!important;background-color:var(--pfe-theme--color--surface--lightest,#fff)!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important;background-image:none!important;border-radius:3px;border:1px solid #d2d2d2;padding:16px;padding:var(--pfe-theme--container-spacer,16px)}}:host([color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #3c3f42);--pfe-card--context:var(--pfe-theme--color--surface--darker--context, dark)}:host([color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515);--pfe-card--context:var(--pfe-theme--color--surface--darkest--context, dark)}:host([color=base]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #f0f0f0);--pfe-card--context:var(--pfe-theme--color--surface--base--context, light)}:host([color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-card--context:var(--pfe-theme--color--surface--lightest--context, light)}:host([color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #004080);--pfe-card--context:var(--pfe-theme--color--surface--accent--context, saturated)}:host([color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #002952);--pfe-card--context:var(--pfe-theme--color--surface--complement--context, saturated)}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 16px);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 16px)}:host([border]:not([border=false])){--pfe-card--BorderWidth:1px}.pfe-card__body ::slotted([overflow~=top]),.pfe-card__footer ::slotted([overflow~=top]),.pfe-card__header ::slotted([overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * calc(16px * 2))!important;margin-top:calc(-1 * var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}:host([has_header]) .pfe-card__body ::slotted([overflow~=top]),:host([has_header]) .pfe-card__footer ::slotted([overflow~=top]),:host([has_header]) .pfe-card__header ::slotted([overflow~=top]){padding-top:16px;padding-top:var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px))}.pfe-card__body ::slotted([overflow~=right]),.pfe-card__footer ::slotted([overflow~=right]),.pfe-card__header ::slotted([overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * calc(16px * 2));margin-right:calc(-1 * var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted([overflow~=bottom]),.pfe-card__footer ::slotted([overflow~=bottom]),.pfe-card__header ::slotted([overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(calc(16px * 2) + 3px));margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px))));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.pfe-card__body ::slotted([overflow~=left]),.pfe-card__footer ::slotted([overflow~=left]),.pfe-card__header ::slotted([overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * calc(16px * 2));margin-left:calc(-1 * var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))}.pfe-card__body ::slotted(img),.pfe-card__footer ::slotted(img),.pfe-card__header ::slotted(img){max-width:100%!important;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-o-object-fit:cover;object-fit:cover}.pfe-card__body ::slotted(img:not[overflow]),.pfe-card__footer ::slotted(img:not[overflow]),.pfe-card__header ::slotted(img:not[overflow]){-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.pfe-card__body ::slotted(img[overflow]),.pfe-card__footer ::slotted(img[overflow]),.pfe-card__header ::slotted(img[overflow]){max-width:unset!important}.pfe-card__body ::slotted(img[overflow~=right]),.pfe-card__footer ::slotted(img[overflow~=right]),.pfe-card__header ::slotted(img[overflow~=right]){width:calc(100% + 2rem)!important;width:calc(100% + calc(16px * 2))!important;width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[overflow~=left]),.pfe-card__footer ::slotted(img[overflow~=left]),.pfe-card__header ::slotted(img[overflow~=left]){width:calc(100% + 2rem)!important;width:calc(100% + calc(16px * 2))!important;width:calc(100% + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__body ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__footer ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__header ::slotted(img[overflow~=right][overflow~=left]){width:calc(100% + 4rem)!important;width:calc(100% + calc(16px * 2) + calc(16px * 2))!important;width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)))!important}.pfe-card__header{z-index:2;background-color:rgba(0,0,0,.09);background-color:var(--pfe-card__header--BackgroundColor,rgba(0,0,0,var(--pfe-theme--opacity,.09)));color:#3c3f42;color:var(--pfe-card__header--Color,var(--pfe-broadcasted--text,#3c3f42));margin-top:calc(calc(16px * 2) * -1)!important;margin-top:calc(var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1)!important;margin-right:calc(calc(16px * 2) * -1);margin-right:calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));margin-left:calc(calc(16px * 2) * -1);margin-left:calc(var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2)) * -1);padding-top:16px;padding-top:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)));padding-right:calc(16px * 2);padding-right:var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-left:calc(16px * 2);padding-left:var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,16px) * 2));padding-bottom:16px;padding-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}:host([on=dark]) .pfe-card__header{background-color:rgba(255,255,255,.09);background-color:var(--pfe-card__header--BackgroundColor--dark,rgba(255,255,255,var(--pfe-theme--opacity,.09)))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pfe-card__header{background-color:#fff!important;color:#151515!important}}:host(:not([has_body]):not([has_footer])) .pfe-card__header{margin-bottom:calc(16px * 2);margin-bottom:var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,16px) * 2))}.pfe-card__header ::slotted([overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_header])) .pfe-card__header{display:none}:host([has_body],[has_footer]) .pfe-card__header ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__header ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__header ::slotted(h1){margin-bottom:0}.pfe-card__header ::slotted(h2){margin-bottom:0}.pfe-card__header ::slotted(h3){margin-bottom:0}.pfe-card__header ::slotted(h4){margin-bottom:0}.pfe-card__header ::slotted(h5){margin-bottom:0}.pfe-card__header ::slotted(h6){margin-bottom:0}:host(:not([has_header])) .pfe-card__body ::slotted([overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}.pfe-card__body ::slotted([overflow~=top]){z-index:1;--pfe-card__overflow--MarginTop:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}.pfe-card__body ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host([has_footer]) .pfe-card__body ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 16px))) * -1)}:host(:not([has_footer])) .pfe-card__body{margin-bottom:0}.pfe-card__footer{margin-top:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-direction:var(--pfe-card__footer--Row,row);-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:var(--pfe-card__footer--Wrap,wrap);-ms-flex-wrap:var(--pfe-card__footer--Wrap,wrap);flex-wrap:var(--pfe-card__footer--Wrap,wrap);-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-align:var(--pfe-card__footer--AlignItems,baseline);-webkit-align-items:var(--pfe-card__footer--AlignItems,baseline);-ms-flex-align:var(--pfe-card__footer--AlignItems,baseline);align-items:var(--pfe-card__footer--AlignItems,baseline)}.pfe-card__footer ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 16px) * 2)) * -1)}:host(:not([has_footer])) .pfe-card__footer{display:none}.pfe-card__body,.pfe-card__header{margin-bottom:16px;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,16px)))}.pfe-card__body ::slotted(p:first-child),.pfe-card__header ::slotted(p:first-child){margin-top:0}.pfe-card__body ::slotted(h1:first-child),.pfe-card__header ::slotted(h1:first-child){margin-top:0}.pfe-card__body ::slotted(h2:first-child),.pfe-card__header ::slotted(h2:first-child){margin-top:0}.pfe-card__body ::slotted(h3:first-child),.pfe-card__header ::slotted(h3:first-child){margin-top:0}.pfe-card__body ::slotted(h4:first-child),.pfe-card__header ::slotted(h4:first-child){margin-top:0}.pfe-card__body ::slotted(h5:first-child),.pfe-card__header ::slotted(h5:first-child){margin-top:0}.pfe-card__body ::slotted(h6:first-child),.pfe-card__header ::slotted(h6:first-child){margin-top:0} /*# sourceMappingURL=pfe-card.min.css.map */</style>\n<div class="pfe-card__header">\n <slot name="pfe-card--header"></slot>\n</div>\n<div class="pfe-card__body">\n <slot></slot>\n</div>\n<div class="pfe-card__footer">\n <slot name="pfe-card--footer"></slot>\n</div>'}},{key:"templateUrl",get:function(){return"pfe-card.html"}},{key:"styleUrl",get:function(){return"pfe-card.scss"}}],[{key:"version",get:function(){return"1.0.0"}},{key:"tag",get:function(){return"pfe-card"}},{key:"meta",get:function(){return{title:"Card",description:"This element creates a header, body, and footer region in which to place content or other components."}}},{key:"properties",get:function(){return{color:{title:"Background color",type:String,values:["lightest","base","darker","darkest","complement","accent"],default:"base",observer:"_colorChanged"},oldColor:{type:String,prefix:!1,alias:"color",attr:"pfe-color"},imgSrc:{title:"Background image",type:String,observer:"_imageSrcChanged"},pfeImgSrc:{type:String,prefix:!1,alias:"imgSrc"},size:{title:"Padding size",type:String,values:["small"]},pfeSize:{type:String,values:["small"],prefix:!1,alias:"size"},border:{title:"Border",type:Boolean},oldBorder:{alias:"border",attr:"pfe-border"}}}},{key:"slots",get:function(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{$ref:"raw"}},body:{title:"Body",type:"array",namedSlot:!1,items:{$ref:"raw"}},footer:{title:"Footer",type:"array",namedSlot:!0,maxItems:3,items:{oneOf:[{$ref:"pfe-cta"},{$ref:"raw"}]}}}}},{key:"PfeType",get:function(){return e.PfeTypes.Container}}]),a(c,[{key:"_colorChanged",value:function(){this.resetContext()}},{key:"_imageSrcChanged",value:function(e,r){this.style.backgroundImage=r?"url('"+r+"')":""}}]),c);function c(){return r(this,c),o(this,(c.__proto__||Object.getPrototypeOf(c)).call(this,c,{type:c.PfeType}))}return e.create(a),a}); | ||
//# sourceMappingURL=pfe-card.umd.min.js.map |
@@ -7,3 +7,3 @@ { | ||
}, | ||
"version": "1.0.0-prerelease.56", | ||
"version": "1.0.0", | ||
"publishConfig": { | ||
@@ -50,6 +50,6 @@ "access": "public" | ||
"dependencies": { | ||
"@patternfly/pfelement": "^1.0.0-prerelease.56" | ||
"@patternfly/pfelement": "^1.0.0" | ||
}, | ||
"devDependencies": { | ||
"@patternfly/pfe-sass": "^1.0.0-prerelease.56" | ||
"@patternfly/pfe-sass": "^1.0.0" | ||
}, | ||
@@ -60,3 +60,3 @@ "generator-pfelement-version": "0.5.0", | ||
}, | ||
"gitHead": "efed86135e85925182445801ab89570b3bcec5ca" | ||
"gitHead": "e1e22f995b03e9134d1fd57a583d7a9b7f0350d9" | ||
} |
@@ -42,3 +42,3 @@ # PFElements Card Element | ||
- `pfe-color`: Options include darkest, darker, accent, complement, lighter, lightest. The card has a default value of `#dfdfdf`. Your theme will influence these colors so check there first if you are seeing inconsistencies. | ||
- `color`: Options include darkest, darker, accent, complement, lighter, lightest. The card has a default value of `#dfdfdf`. Your context will influence these colors so check there first if you are seeing inconsistencies. | ||
@@ -55,6 +55,6 @@ | color | hex | | ||
- `pfe-img-src`: Optional background image applied to the entire card container. Alignment of this image can be managed using the `--pfe-card--BackgroundPosition` variable which is set to `center center` by default. | ||
- `pfe-size`: Optionally adjusts the padding on the container. Accepts: `small`. | ||
- `pfe-overflow`: Optionally allows an image or element to overflow the padding on the container. This property should be added to the direct child of the slotm such as on an image tag; should be added to the element that you want to overflow the container. Accepts: `top`, `right`, `bottom`, `left`. | ||
- `pfe-border`: Optionally apply a border color and weight to the entire card container. The default color and weight is `#d2d2d2` and `1px`, respectively. | ||
- `img-src`: Optional background image applied to the entire card container. Alignment of this image can be managed using the `--pfe-card--BackgroundPosition` variable which is set to `center center` by default. | ||
- `size`: Optionally adjusts the padding on the container. Accepts: `small`. | ||
- `overflow`: Optionally allows an image or element to overflow the padding on the container. This property should be added to the direct child of the slotm such as on an image tag; should be added to the element that you want to overflow the container. Accepts: `top`, `right`, `bottom`, `left`. | ||
- `border`: Optionally apply a border color and weight to the entire card container. The default color and weight is `#d2d2d2` and `1px`, respectively. | ||
@@ -64,3 +64,3 @@ ## Variables | ||
- **Background color**: Though using the `pfe-color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable. If you update this value manually, you should also update the `--theme` context variable to invoke the right theme on it and it's child elements. Supported themes include: `light`, `dark`, and `saturated`. | ||
- **Background color**: Though using the `pfe-color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable. If you update this value manually, you should also update the `--context` context variable to invoke the right context on it and it's child elements. Supported contexts include: `light`, `dark`, and `saturated`. | ||
- **Background position**: This is designed for use with the `pfe-img-src` attribute to allow you to align your background image. Default value is `center center`. **Variable name:** `--pfe-card--BackgroundPosition`. | ||
@@ -67,0 +67,0 @@ - **Border**: This allows the customization of a border around the entire container. There is a variable for the entire border shorthand (transparent by default) or you can hook into the individual properties. **Variable name:** `--pfe-card--BorderRadius` and `--pfe-card--Border` or `--pfe-card--BorderWeight`, `--pfe-card--BorderStyle`, `--pfe-card--BorderColor`. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
2
181133
14
722
1
Updated@patternfly/pfelement@^1.0.0