@patternfly/pfe-card
Advanced tools
Comparing version 1.0.0-prerelease.17 to 1.0.0-prerelease.18
@@ -5,2 +5,2 @@ // rollup.config.js | ||
gulpFactory(pfelementPackage.pfelement); | ||
gulpFactory(pfelementPackage); |
@@ -7,3 +7,3 @@ { | ||
}, | ||
"version": "1.0.0-prerelease.17", | ||
"version": "1.0.0-prerelease.18", | ||
"publishConfig": { | ||
@@ -37,7 +37,7 @@ "access": "public" | ||
"dependencies": { | ||
"@patternfly/pfe-sass": "^1.0.0-prerelease.17", | ||
"@patternfly/pfelement": "^1.0.0-prerelease.17" | ||
"@patternfly/pfe-sass": "^1.0.0-prerelease.18", | ||
"@patternfly/pfelement": "^1.0.0-prerelease.18" | ||
}, | ||
"generator-pfelement-version": "0.5.0", | ||
"gitHead": "4382b491b97b4b6b154a35d2c9db47c065eff081" | ||
"gitHead": "36e6fc8b78e70127e7008b72ca23fd990519b0a3" | ||
} |
import PFElement from '../pfelement/pfelement.js'; | ||
/* | ||
/*! | ||
* PatternFly Elements: PfeCard 1.0.0-prerelease.18 | ||
* @license | ||
@@ -105,2 +106,5 @@ * Copyright 2019 Red Hat, Inc. | ||
class PfeCard extends PFElement { | ||
static get version() { | ||
return "1.0.0-prerelease.18"; | ||
} | ||
@@ -169,6 +173,2 @@ get html() { | ||
} | ||
// Initialize the context setting for the children elements | ||
if (this.backgroundColor) { | ||
this._updateContext(this.backgroundColor); | ||
} | ||
@@ -202,4 +202,3 @@ this._observer.observe(this, { childList: true }); | ||
this[attr].value = newValue; | ||
// If the new value has a dark background, update children elements | ||
this._updateContext(newValue); | ||
} | ||
@@ -213,18 +212,2 @@ | ||
// Set the children's context if parent background is dark | ||
_updateContext(context) { | ||
if ( | ||
["darkest", "darker", "dark", "complement", "accent"].includes(context) | ||
) { | ||
["pfe-cta"].forEach(elementName => { | ||
const els = [...this.querySelectorAll(`${elementName}`)]; | ||
els.forEach(el => { | ||
const myContainer = el.closest("[pfe-type=container]"); | ||
if (myContainer === this || myContainer === null) { | ||
el.setAttribute("on", "dark"); | ||
} | ||
}); | ||
}); | ||
} | ||
} | ||
} | ||
@@ -231,0 +214,0 @@ |
import e from"../pfelement/pfelement.min.js"; | ||
/* | ||
/*! | ||
* PatternFly Elements: PfeCard 1.0.0-prerelease.18 | ||
* @license | ||
@@ -25,3 +26,3 @@ * Copyright 2019 Red Hat, Inc. | ||
*/ | ||
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),o=t.length>>>0;if(0===o)return!1;var a,c,l=0|r,i=Math.max(l>=0?l:o-Math.abs(l),0);for(;i<o;){if((a=t[i])===(c=e)||"number"==typeof a&&"number"==typeof c&&isNaN(a)&&isNaN(c))return!0;i++}return!1}});class r extends e{get html(){return'<style>:host{--pfe-card--PaddingTop:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--PaddingRight:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--PaddingBottom:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--PaddingLeft:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--Padding:var(--pfe-card--PaddingTop) var(--pfe-card--PaddingRight) var(--pfe-card--PaddingBottom) var(--pfe-card--PaddingLeft);--pfe-card--spacing:var(--pfe-theme--container-spacer, 1rem);--pfe-card--BorderRadius:var(--pfe-theme--surface--border-radius, 3px);--pfe-card--Border:var(--pfe-card--BorderWeight, 0) var(--pfe-card--BorderStyle, solid) var(--pfe-card--BorderColor, transparent);--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-card--BackgroundPosition:center center;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);--pfe-card__header--BackgroundColor:rgba(45, 45, 45, var(--pfe-theme--opacity, 0.3));--pfe-card__header--Color:var(--pfe-broadcasted--color--text);--pfe-card--padding:var(--pfe-card--Padding);--pfe-card--bg:var(--pfe-card--BackgroundColor)}:host([pfelement]){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;align-self:stretch;padding:var(--pfe-card--Padding);border:var(--pfe-card--Border);border-radius:var(--pfe-card--BorderRadius);overflow:hidden;background-color:var(--pfe-card--BackgroundColor);background-position:var(--pfe-card--BackgroundPosition);color:var(--pfe-broadcasted--color--text)}:host([color=dark]),:host([pfe-color=dark]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([color=darker]),:host([pfe-color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([color=darkest]),:host([pfe-color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([color=light]),:host([pfe-color=light]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([color=lighter]),:host([pfe-color=lighter]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([color=lightest]),:host([pfe-color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([color=complement]),:host([pfe-color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([color=accent]),:host([pfe-color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([pfe-size=small]),:host([size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 1rem)}::slotted([pfe-overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * var(--pfe-card--PaddingTop))!important}:host([has_header]) ::slotted([pfe-overflow~=top]){padding-top:var(--pfe-card--spacing)}::slotted([pfe-overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * var(--pfe-card--PaddingRight))}::slotted([pfe-overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom) + var(--pfe-card--BorderRadius)));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}::slotted([pfe-overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * var(--pfe-card--PaddingLeft))}::slotted(img){max-width:100%}::slotted(img[pfe-overflow~=right]){max-width:calc(100% + 2rem);max-width:calc(100% + var(--pfe-card--PaddingRight))}::slotted(img[pfe-overflow~=left]){max-width:calc(100% + 2rem);max-width:calc(100% + var(--pfe-card--PaddingLeft))}::slotted(img[pfe-overflow~=right][pfe-overflow~=left]){max-width:calc(100% + 4rem);max-width:calc(100% + calc(var(--pfe-card--PaddingRight) + var(--pfe-card--PaddingLeft)))}::slotted(p){margin-top:0}::slotted(h1){margin-top:0}::slotted(h2){margin-top:0}::slotted(h3){margin-top:0}::slotted(h4){margin-top:0}::slotted(h5){margin-top:0}::slotted(h6){margin-top:0}::slotted([slot=pfe-card--header]){display:block;z-index:2;background-color:var(--pfe-card__header--BackgroundColor);color:var(--pfe-card__header--Color);margin-top:-2rem;margin-top:calc(-1 * var(--pfe-card--PaddingTop))!important;margin-right:-2rem;margin-right:calc(-1 * var(--pfe-card--PaddingRight));margin-bottom:var(--pfe-card--spacing);margin-left:-2rem;margin-left:calc(-1 * var(--pfe-card--PaddingLeft));padding-top:var(--pfe-card--spacing);padding-right:var(--pfe-card--PaddingRight);padding-left:var(--pfe-card--PaddingLeft);padding-bottom:var(--pfe-card--spacing)}::slotted(:not([slot])){display:block;margin-bottom:var(--pfe-card--spacing)}::slotted([slot=pfe-card--footer]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column wrap;-ms-flex-flow:column wrap;flex-flow:column wrap;margin-top:auto;justify-self:flex-end}.pfe-card__body:last-child,.pfe-card__header:last-child{margin-bottom:0}</style><slot class="pfe-card__header" name="pfe-card--header"></slot>\n<slot class="pfe-card__body"></slot>\n<slot class="pfe-card__footer" name="pfe-card--footer"></slot>'}static get properties(){return{color:{title:"Background color",type:"string",enum:["lightest","lighter","base","darker","darkest","complement","accent"],default:"base",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")||this.getAttribute("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.backgroundColor&&this._updateContext(this.backgroundColor),this._observer.observe(this,{childList:!0})}disconnectedCallback(){this._observer.disconnect()}attributeChangedCallback(e,r,t){if(super.attributeChangedCallback(e,r,t),this[e=e.replace("pfe-","")]&&this[e].observer){let o=this[this[e].observer].bind(this);"function"==typeof o&&o(e,r,t)}}_basicAttributeChanged(e,r,t){this[e].value=t}_colorChanged(e,r,t){this[e].value=t,this._updateContext(t)}_imgSrcChanged(e,r,t){this.style.backgroundImage=t?`url('${t}')`:""}_updateContext(e){["darkest","darker","dark","complement","accent"].includes(e)&&["pfe-cta"].forEach(e=>{[...this.querySelectorAll(`${e}`)].forEach(e=>{const r=e.closest("[pfe-type=container]");r!==this&&null!==r||e.setAttribute("on","dark")})})}}e.create(r);export default r; | ||
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 o=Object(this),t=o.length>>>0;if(0===t)return!1;var a,c,l=0|r,i=Math.max(l>=0?l:t-Math.abs(l),0);for(;i<t;){if((a=o[i])===(c=e)||"number"==typeof a&&"number"==typeof c&&isNaN(a)&&isNaN(c))return!0;i++}return!1}});class r extends e{static get version(){return"1.0.0-prerelease.18"}get html(){return'<style>:host{--pfe-card--PaddingTop:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--PaddingRight:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--PaddingBottom:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--PaddingLeft:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--Padding:var(--pfe-card--PaddingTop) var(--pfe-card--PaddingRight) var(--pfe-card--PaddingBottom) var(--pfe-card--PaddingLeft);--pfe-card--spacing:var(--pfe-theme--container-spacer, 1rem);--pfe-card--BorderRadius:var(--pfe-theme--surface--border-radius, 3px);--pfe-card--Border:var(--pfe-card--BorderWeight, 0) var(--pfe-card--BorderStyle, solid) var(--pfe-card--BorderColor, transparent);--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-card--BackgroundPosition:center center;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);--pfe-card__header--BackgroundColor:rgba(45, 45, 45, var(--pfe-theme--opacity, 0.3));--pfe-card__header--Color:var(--pfe-broadcasted--color--text);--pfe-card--padding:var(--pfe-card--Padding);--pfe-card--bg:var(--pfe-card--BackgroundColor)}:host([pfelement]){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;align-self:stretch;padding:var(--pfe-card--Padding);border:var(--pfe-card--Border);border-radius:var(--pfe-card--BorderRadius);overflow:hidden;background-color:var(--pfe-card--BackgroundColor);background-position:var(--pfe-card--BackgroundPosition);color:var(--pfe-broadcasted--color--text)}:host([color=dark]),:host([pfe-color=dark]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([color=darker]),:host([pfe-color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([color=darkest]),:host([pfe-color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([color=light]),:host([pfe-color=light]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([color=lighter]),:host([pfe-color=lighter]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([color=lightest]),:host([pfe-color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([color=complement]),:host([pfe-color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([color=accent]),:host([pfe-color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([pfe-size=small]),:host([size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 1rem)}::slotted([pfe-overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * var(--pfe-card--PaddingTop))!important}:host([has_header]) ::slotted([pfe-overflow~=top]){padding-top:var(--pfe-card--spacing)}::slotted([pfe-overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * var(--pfe-card--PaddingRight))}::slotted([pfe-overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom) + var(--pfe-card--BorderRadius)));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}::slotted([pfe-overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * var(--pfe-card--PaddingLeft))}::slotted(img){max-width:100%}::slotted(img[pfe-overflow~=right]){max-width:calc(100% + 2rem);max-width:calc(100% + var(--pfe-card--PaddingRight))}::slotted(img[pfe-overflow~=left]){max-width:calc(100% + 2rem);max-width:calc(100% + var(--pfe-card--PaddingLeft))}::slotted(img[pfe-overflow~=right][pfe-overflow~=left]){max-width:calc(100% + 4rem);max-width:calc(100% + calc(var(--pfe-card--PaddingRight) + var(--pfe-card--PaddingLeft)))}::slotted(p){margin-top:0}::slotted(h1){margin-top:0}::slotted(h2){margin-top:0}::slotted(h3){margin-top:0}::slotted(h4){margin-top:0}::slotted(h5){margin-top:0}::slotted(h6){margin-top:0}::slotted([slot=pfe-card--header]){display:block;z-index:2;background-color:var(--pfe-card__header--BackgroundColor);color:var(--pfe-card__header--Color);margin-top:-2rem;margin-top:calc(-1 * var(--pfe-card--PaddingTop))!important;margin-right:-2rem;margin-right:calc(-1 * var(--pfe-card--PaddingRight));margin-bottom:var(--pfe-card--spacing);margin-left:-2rem;margin-left:calc(-1 * var(--pfe-card--PaddingLeft));padding-top:var(--pfe-card--spacing);padding-right:var(--pfe-card--PaddingRight);padding-left:var(--pfe-card--PaddingLeft);padding-bottom:var(--pfe-card--spacing)}::slotted(:not([slot])){display:block;margin-bottom:var(--pfe-card--spacing)}::slotted([slot=pfe-card--footer]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column wrap;-ms-flex-flow:column wrap;flex-flow:column wrap;margin-top:auto;justify-self:flex-end}.pfe-card__body:last-child,.pfe-card__header:last-child{margin-bottom:0}</style><slot class="pfe-card__header" name="pfe-card--header"></slot>\n<slot class="pfe-card__body"></slot>\n<slot class="pfe-card__footer" name="pfe-card--footer"></slot>'}static get properties(){return{color:{title:"Background color",type:"string",enum:["lightest","lighter","base","darker","darkest","complement","accent"],default:"base",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")||this.getAttribute("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,o){if(super.attributeChangedCallback(e,r,o),this[e=e.replace("pfe-","")]&&this[e].observer){let t=this[this[e].observer].bind(this);"function"==typeof t&&t(e,r,o)}}_basicAttributeChanged(e,r,o){this[e].value=o}_colorChanged(e,r,o){this[e].value=o}_imgSrcChanged(e,r,o){this.style.backgroundImage=o?`url('${o}')`:""}}e.create(r);export default r; | ||
//# sourceMappingURL=pfe-card.min.js.map |
@@ -82,13 +82,4 @@ (function (global, factory) { | ||
var toConsumableArray = function (arr) { | ||
if (Array.isArray(arr)) { | ||
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; | ||
return arr2; | ||
} else { | ||
return Array.from(arr); | ||
} | ||
}; | ||
/* | ||
/*! | ||
* PatternFly Elements: PfeCard 1.0.0-prerelease.18 | ||
* @license | ||
@@ -219,2 +210,7 @@ * Copyright 2019 Red Hat, Inc. | ||
}], [{ | ||
key: 'version', | ||
get: function get$$1() { | ||
return "1.0.0-prerelease.18"; | ||
} | ||
}, { | ||
key: 'properties', | ||
@@ -269,6 +265,2 @@ get: function get$$1() { | ||
} | ||
// Initialize the context setting for the children elements | ||
if (this.backgroundColor) { | ||
this._updateContext(this.backgroundColor); | ||
} | ||
@@ -308,4 +300,2 @@ this._observer.observe(this, { childList: true }); | ||
this[attr].value = newValue; | ||
// If the new value has a dark background, update children elements | ||
this._updateContext(newValue); | ||
} | ||
@@ -321,22 +311,2 @@ | ||
} | ||
// Set the children's context if parent background is dark | ||
}, { | ||
key: '_updateContext', | ||
value: function _updateContext(context) { | ||
var _this2 = this; | ||
if (["darkest", "darker", "dark", "complement", "accent"].includes(context)) { | ||
["pfe-cta"].forEach(function (elementName) { | ||
var els = [].concat(toConsumableArray(_this2.querySelectorAll('' + elementName))); | ||
els.forEach(function (el) { | ||
var myContainer = el.closest("[pfe-type=container]"); | ||
if (myContainer === _this2 || myContainer === null) { | ||
el.setAttribute("on", "dark"); | ||
} | ||
}); | ||
}); | ||
} | ||
} | ||
}]); | ||
@@ -343,0 +313,0 @@ return PfeCard; |
@@ -1,2 +0,2 @@ | ||
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],r):e.PfeCard=r(e.PFElement)}(this,function(r){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var t=function(){function o(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(e,r,t){return r&&o(e.prototype,r),t&&o(e,t),e}}(),c=function e(r,t,o){null===r&&(r=Function.prototype);var a=Object.getOwnPropertyDescriptor(r,t);if(void 0===a){var c=Object.getPrototypeOf(r);return null===c?void 0:e(c,t,o)}if("value"in a)return a.value;var i=a.get;return void 0!==i?i.call(o):void 0};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),o=t.length>>>0;if(0===o)return!1;var a,c,i=0|r,l=Math.max(0<=i?i:o-Math.abs(i),0);for(;l<o;){if((a=t[l])===(c=e)||"number"==typeof a&&"number"==typeof c&&isNaN(a)&&isNaN(c))return!0;l++}return!1}});var e=function(e){function a(){!function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}(this,a);var e=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}(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,a,{type:a.PfeType}));return e._observer=new MutationObserver(function(){e._mapSchemaToSlots(e.tag,e.slots)}),e}return 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)}(a,r),t(a,[{key:"html",get:function(){return'<style>:host{--pfe-card--PaddingTop:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--PaddingRight:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--PaddingBottom:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--PaddingLeft:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--Padding:var(--pfe-card--PaddingTop) var(--pfe-card--PaddingRight) var(--pfe-card--PaddingBottom) var(--pfe-card--PaddingLeft);--pfe-card--spacing:var(--pfe-theme--container-spacer, 1rem);--pfe-card--BorderRadius:var(--pfe-theme--surface--border-radius, 3px);--pfe-card--Border:var(--pfe-card--BorderWeight, 0) var(--pfe-card--BorderStyle, solid) var(--pfe-card--BorderColor, transparent);--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-card--BackgroundPosition:center center;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);--pfe-card__header--BackgroundColor:rgba(45, 45, 45, var(--pfe-theme--opacity, 0.3));--pfe-card__header--Color:var(--pfe-broadcasted--color--text);--pfe-card--padding:var(--pfe-card--Padding);--pfe-card--bg:var(--pfe-card--BackgroundColor)}:host([pfelement]){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;align-self:stretch;padding:var(--pfe-card--Padding);border:var(--pfe-card--Border);border-radius:var(--pfe-card--BorderRadius);overflow:hidden;background-color:var(--pfe-card--BackgroundColor);background-position:var(--pfe-card--BackgroundPosition);color:var(--pfe-broadcasted--color--text)}:host([color=dark]),:host([pfe-color=dark]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([color=darker]),:host([pfe-color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([color=darkest]),:host([pfe-color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([color=light]),:host([pfe-color=light]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([color=lighter]),:host([pfe-color=lighter]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([color=lightest]),:host([pfe-color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([color=complement]),:host([pfe-color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([color=accent]),:host([pfe-color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([pfe-size=small]),:host([size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 1rem)}::slotted([pfe-overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * var(--pfe-card--PaddingTop))!important}:host([has_header]) ::slotted([pfe-overflow~=top]){padding-top:var(--pfe-card--spacing)}::slotted([pfe-overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * var(--pfe-card--PaddingRight))}::slotted([pfe-overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom) + var(--pfe-card--BorderRadius)));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}::slotted([pfe-overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * var(--pfe-card--PaddingLeft))}::slotted(img){max-width:100%}::slotted(img[pfe-overflow~=right]){max-width:calc(100% + 2rem);max-width:calc(100% + var(--pfe-card--PaddingRight))}::slotted(img[pfe-overflow~=left]){max-width:calc(100% + 2rem);max-width:calc(100% + var(--pfe-card--PaddingLeft))}::slotted(img[pfe-overflow~=right][pfe-overflow~=left]){max-width:calc(100% + 4rem);max-width:calc(100% + calc(var(--pfe-card--PaddingRight) + var(--pfe-card--PaddingLeft)))}::slotted(p){margin-top:0}::slotted(h1){margin-top:0}::slotted(h2){margin-top:0}::slotted(h3){margin-top:0}::slotted(h4){margin-top:0}::slotted(h5){margin-top:0}::slotted(h6){margin-top:0}::slotted([slot=pfe-card--header]){display:block;z-index:2;background-color:var(--pfe-card__header--BackgroundColor);color:var(--pfe-card__header--Color);margin-top:-2rem;margin-top:calc(-1 * var(--pfe-card--PaddingTop))!important;margin-right:-2rem;margin-right:calc(-1 * var(--pfe-card--PaddingRight));margin-bottom:var(--pfe-card--spacing);margin-left:-2rem;margin-left:calc(-1 * var(--pfe-card--PaddingLeft));padding-top:var(--pfe-card--spacing);padding-right:var(--pfe-card--PaddingRight);padding-left:var(--pfe-card--PaddingLeft);padding-bottom:var(--pfe-card--spacing)}::slotted(:not([slot])){display:block;margin-bottom:var(--pfe-card--spacing)}::slotted([slot=pfe-card--footer]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column wrap;-ms-flex-flow:column wrap;flex-flow:column wrap;margin-top:auto;justify-self:flex-end}.pfe-card__body:last-child,.pfe-card__header:last-child{margin-bottom:0}</style><slot class="pfe-card__header" name="pfe-card--header"></slot>\n<slot class="pfe-card__body"></slot>\n<slot class="pfe-card__footer" name="pfe-card--footer"></slot>'}},{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")||this.getAttribute("color")||"base"}}],[{key:"properties",get:function(){return{color:{title:"Background color",type:"string",enum:["lightest","lighter","base","darker","darkest","complement","accent"],default:"base",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 r.PfeTypes.Container}}]),t(a,[{key:"connectedCallback",value:function(){c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"connectedCallback",this).call(this),this.imageSrc&&this._imgSrcChanged("pfe-img-src","",this.imageSrc),this.backgroundColor&&this._updateContext(this.backgroundColor),this._observer.observe(this,{childList:!0})}},{key:"disconnectedCallback",value:function(){this._observer.disconnect()}},{key:"attributeChangedCallback",value:function(e,r,t){if(c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"attributeChangedCallback",this).call(this,e,r,t),this[e=e.replace("pfe-","")]&&this[e].observer){var o=this[this[e].observer].bind(this);"function"==typeof o&&o(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._updateContext(t)}},{key:"_imgSrcChanged",value:function(e,r,t){this.style.backgroundImage=t?"url('"+t+"')":""}},{key:"_updateContext",value:function(e){var t=this;["darkest","darker","dark","complement","accent"].includes(e)&&["pfe-cta"].forEach(function(e){[].concat(function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}(t.querySelectorAll(""+e))).forEach(function(e){var r=e.closest("[pfe-type=container]");r!==t&&null!==r||e.setAttribute("on","dark")})})}}]),a}();return r.create(e),e}); | ||
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],r):e.PfeCard=r(e.PFElement)}(this,function(r){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var t=function(){function o(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(e,r,t){return r&&o(e.prototype,r),t&&o(e,t),e}}(),c=function e(r,t,o){null===r&&(r=Function.prototype);var a=Object.getOwnPropertyDescriptor(r,t);if(void 0===a){var c=Object.getPrototypeOf(r);return null===c?void 0:e(c,t,o)}if("value"in a)return a.value;var i=a.get;return void 0!==i?i.call(o):void 0};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),o=t.length>>>0;if(0===o)return!1;var a,c,i=0|r,l=Math.max(0<=i?i:o-Math.abs(i),0);for(;l<o;){if((a=t[l])===(c=e)||"number"==typeof a&&"number"==typeof c&&isNaN(a)&&isNaN(c))return!0;l++}return!1}});var e=function(e){function a(){!function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}(this,a);var e=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}(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,a,{type:a.PfeType}));return e._observer=new MutationObserver(function(){e._mapSchemaToSlots(e.tag,e.slots)}),e}return 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)}(a,r),t(a,[{key:"html",get:function(){return'<style>:host{--pfe-card--PaddingTop:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--PaddingRight:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--PaddingBottom:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--PaddingLeft:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card--Padding:var(--pfe-card--PaddingTop) var(--pfe-card--PaddingRight) var(--pfe-card--PaddingBottom) var(--pfe-card--PaddingLeft);--pfe-card--spacing:var(--pfe-theme--container-spacer, 1rem);--pfe-card--BorderRadius:var(--pfe-theme--surface--border-radius, 3px);--pfe-card--Border:var(--pfe-card--BorderWeight, 0) var(--pfe-card--BorderStyle, solid) var(--pfe-card--BorderColor, transparent);--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-card--BackgroundPosition:center center;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);--pfe-card__header--BackgroundColor:rgba(45, 45, 45, var(--pfe-theme--opacity, 0.3));--pfe-card__header--Color:var(--pfe-broadcasted--color--text);--pfe-card--padding:var(--pfe-card--Padding);--pfe-card--bg:var(--pfe-card--BackgroundColor)}:host([pfelement]){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;align-self:stretch;padding:var(--pfe-card--Padding);border:var(--pfe-card--Border);border-radius:var(--pfe-card--BorderRadius);overflow:hidden;background-color:var(--pfe-card--BackgroundColor);background-position:var(--pfe-card--BackgroundPosition);color:var(--pfe-broadcasted--color--text)}:host([color=dark]),:host([pfe-color=dark]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([color=darker]),:host([pfe-color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([color=darkest]),:host([pfe-color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([color=light]),:host([pfe-color=light]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([color=lighter]),:host([pfe-color=lighter]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([color=lightest]),:host([pfe-color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([color=complement]),:host([pfe-color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([color=accent]),:host([pfe-color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([pfe-size=small]),:host([size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 1rem)}::slotted([pfe-overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * var(--pfe-card--PaddingTop))!important}:host([has_header]) ::slotted([pfe-overflow~=top]){padding-top:var(--pfe-card--spacing)}::slotted([pfe-overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * var(--pfe-card--PaddingRight))}::slotted([pfe-overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom) + var(--pfe-card--BorderRadius)));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}::slotted([pfe-overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * var(--pfe-card--PaddingLeft))}::slotted(img){max-width:100%}::slotted(img[pfe-overflow~=right]){max-width:calc(100% + 2rem);max-width:calc(100% + var(--pfe-card--PaddingRight))}::slotted(img[pfe-overflow~=left]){max-width:calc(100% + 2rem);max-width:calc(100% + var(--pfe-card--PaddingLeft))}::slotted(img[pfe-overflow~=right][pfe-overflow~=left]){max-width:calc(100% + 4rem);max-width:calc(100% + calc(var(--pfe-card--PaddingRight) + var(--pfe-card--PaddingLeft)))}::slotted(p){margin-top:0}::slotted(h1){margin-top:0}::slotted(h2){margin-top:0}::slotted(h3){margin-top:0}::slotted(h4){margin-top:0}::slotted(h5){margin-top:0}::slotted(h6){margin-top:0}::slotted([slot=pfe-card--header]){display:block;z-index:2;background-color:var(--pfe-card__header--BackgroundColor);color:var(--pfe-card__header--Color);margin-top:-2rem;margin-top:calc(-1 * var(--pfe-card--PaddingTop))!important;margin-right:-2rem;margin-right:calc(-1 * var(--pfe-card--PaddingRight));margin-bottom:var(--pfe-card--spacing);margin-left:-2rem;margin-left:calc(-1 * var(--pfe-card--PaddingLeft));padding-top:var(--pfe-card--spacing);padding-right:var(--pfe-card--PaddingRight);padding-left:var(--pfe-card--PaddingLeft);padding-bottom:var(--pfe-card--spacing)}::slotted(:not([slot])){display:block;margin-bottom:var(--pfe-card--spacing)}::slotted([slot=pfe-card--footer]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column wrap;-ms-flex-flow:column wrap;flex-flow:column wrap;margin-top:auto;justify-self:flex-end}.pfe-card__body:last-child,.pfe-card__header:last-child{margin-bottom:0}</style><slot class="pfe-card__header" name="pfe-card--header"></slot>\n<slot class="pfe-card__body"></slot>\n<slot class="pfe-card__footer" name="pfe-card--footer"></slot>'}},{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")||this.getAttribute("color")||"base"}}],[{key:"version",get:function(){return"1.0.0-prerelease.18"}},{key:"properties",get:function(){return{color:{title:"Background color",type:"string",enum:["lightest","lighter","base","darker","darkest","complement","accent"],default:"base",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 r.PfeTypes.Container}}]),t(a,[{key:"connectedCallback",value:function(){c(a.prototype.__proto__||Object.getPrototypeOf(a.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){if(c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"attributeChangedCallback",this).call(this,e,r,t),this[e=e.replace("pfe-","")]&&this[e].observer){var o=this[this[e].observer].bind(this);"function"==typeof o&&o(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}},{key:"_imgSrcChanged",value:function(e,r,t){this.style.backgroundImage=t?"url('"+t+"')":""}}]),a}();return r.create(e),e}); | ||
//# sourceMappingURL=pfe-card.umd.min.js.map |
@@ -130,6 +130,2 @@ import PFElement from "../pfelement/pfelement.js"; | ||
} | ||
// Initialize the context setting for the children elements | ||
if (this.backgroundColor) { | ||
this._updateContext(this.backgroundColor); | ||
} | ||
@@ -163,4 +159,3 @@ this._observer.observe(this, { childList: true }); | ||
this[attr].value = newValue; | ||
// If the new value has a dark background, update children elements | ||
this._updateContext(newValue); | ||
} | ||
@@ -174,18 +169,2 @@ | ||
// Set the children's context if parent background is dark | ||
_updateContext(context) { | ||
if ( | ||
["darkest", "darker", "dark", "complement", "accent"].includes(context) | ||
) { | ||
["pfe-cta"].forEach(elementName => { | ||
const els = [...this.querySelectorAll(`${elementName}`)]; | ||
els.forEach(el => { | ||
const myContainer = el.closest("[pfe-type=container]"); | ||
if (myContainer === this || myContainer === null) { | ||
el.setAttribute("on", "dark"); | ||
} | ||
}); | ||
}); | ||
} | ||
} | ||
} | ||
@@ -192,0 +171,0 @@ |
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
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
244920
1291