@patternfly/pfe-card
Advanced tools
Comparing version 2.0.0-next.0 to 2.0.0-next.1
{ | ||
"name": "@patternfly/pfe-card", | ||
"license": "MIT", | ||
"version": "2.0.0-next.0", | ||
"version": "2.0.0-next.1", | ||
"description": "Cards for PatternFly Elements", | ||
@@ -12,10 +12,4 @@ "customElements": "custom-elements.json", | ||
"exports": { | ||
".": { | ||
"esbuild": "./pfe-card.ts", | ||
"default": "./pfe-card.js" | ||
}, | ||
"./*": { | ||
"esbuild": "./*.ts", | ||
"default": "./*.js" | ||
} | ||
".": "./pfe-card.js", | ||
"./*": "./*.js" | ||
}, | ||
@@ -78,5 +72,5 @@ "publishConfig": { | ||
"dependencies": { | ||
"@patternfly/pfe-core": "^2.0.0-next.0", | ||
"@patternfly/pfe-core": "^2.0.0-next.3", | ||
"lit": "^2.1.2" | ||
} | ||
} |
269
pfe-card.js
@@ -1,269 +0,2 @@ | ||
var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(c,e,t,d)=>{for(var o=d>1?void 0:d?m(e,t):e,p=c.length-1,l;p>=0;p--)(l=c[p])&&(o=(d?l(e,t,o):l(o))||o);return d&&o&&n(e,t,o),o};import{LitElement as v,html as g}from"lit";import{customElement as w,property as f}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{observed as b,pfelement as u}from"@patternfly/pfe-core/decorators.js";import{SlotController as y}from"@patternfly/pfe-core/controllers/slot-controller.js";import{css as h}from"lit";var _=h`:host { | ||
--context: var(--pfe-card--context, var(--pfe-theme--color--surface--base--context, light)); | ||
display: flex; | ||
flex-direction: column; | ||
justify-items: flex-start; | ||
align-self: stretch; | ||
padding: var(--pfe-card--Padding, var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2))); | ||
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: var(--pfe-card--BorderRadius, var(--pfe-theme--surface--border-radius, 3px)); | ||
overflow: hidden; | ||
background-color: var(--pfe-card--BackgroundColor, var(--pfe-theme--color--surface--base, #f0f0f0)); | ||
background-position: var(--pfe-card--BackgroundPosition, center center); | ||
color: var(--pfe-broadcasted--text, #3c3f42); | ||
} | ||
@media print { | ||
:host { | ||
background-color: white !important; | ||
background-image: none !important; | ||
box-shadow: none !important; | ||
} | ||
} | ||
@media print { | ||
:host { | ||
border-radius: 3px; | ||
border: 1px solid #d2d2d2; | ||
} | ||
} | ||
: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=lighter]) { | ||
--pfe-card--BackgroundColor: var(--pfe-theme--color--surface--lighter, #f0f0f0); | ||
--pfe-card--context: var(--pfe-theme--color--surface--lighter--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([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); | ||
} | ||
:host([pfe-border]:not([pfe-border=false])), | ||
:host([border]:not([border=false])) { | ||
--pfe-card--BorderWidth: 1px; | ||
} | ||
.pfe-card__header ::slotted([pfe-overflow~=top]), | ||
.pfe-card__header ::slotted([overflow~=top]), .pfe-card__body ::slotted([pfe-overflow~=top]), | ||
.pfe-card__body ::slotted([overflow~=top]), .pfe-card__footer ::slotted([pfe-overflow~=top]), | ||
.pfe-card__footer ::slotted([overflow~=top]) { | ||
z-index: 1; | ||
margin-top: -2rem; | ||
margin-top: calc(-1 * var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important; | ||
} | ||
:host(.has-header) .pfe-card__header ::slotted([pfe-overflow~=top]), | ||
:host(.has-header) .pfe-card__header ::slotted([overflow~=top]), :host(.has-header) .pfe-card__body ::slotted([pfe-overflow~=top]), | ||
:host(.has-header) .pfe-card__body ::slotted([overflow~=top]), :host(.has-header) .pfe-card__footer ::slotted([pfe-overflow~=top]), | ||
:host(.has-header) .pfe-card__footer ::slotted([overflow~=top]) { | ||
padding-top: var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)); | ||
} | ||
.pfe-card__header ::slotted([pfe-overflow~=right]), | ||
.pfe-card__header ::slotted([overflow~=right]), .pfe-card__body ::slotted([pfe-overflow~=right]), | ||
.pfe-card__body ::slotted([overflow~=right]), .pfe-card__footer ::slotted([pfe-overflow~=right]), | ||
.pfe-card__footer ::slotted([overflow~=right]) { | ||
margin-right: -2rem; | ||
margin-right: calc(-1 * var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2))); | ||
} | ||
.pfe-card__header ::slotted([pfe-overflow~=bottom]), | ||
.pfe-card__header ::slotted([overflow~=bottom]), .pfe-card__body ::slotted([pfe-overflow~=bottom]), | ||
.pfe-card__body ::slotted([overflow~=bottom]), .pfe-card__footer ::slotted([pfe-overflow~=bottom]), | ||
.pfe-card__footer ::slotted([overflow~=bottom]) { | ||
margin-bottom: -2rem; | ||
margin-bottom: calc(-1 * (var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) + var(--pfe-card--BorderRadius, var(--pfe-theme--surface--border-radius, 3px)))); | ||
align-self: flex-end; | ||
} | ||
.pfe-card__header ::slotted([pfe-overflow~=left]), | ||
.pfe-card__header ::slotted([overflow~=left]), .pfe-card__body ::slotted([pfe-overflow~=left]), | ||
.pfe-card__body ::slotted([overflow~=left]), .pfe-card__footer ::slotted([pfe-overflow~=left]), | ||
.pfe-card__footer ::slotted([overflow~=left]) { | ||
margin-left: -2rem; | ||
margin-left: calc(-1 * var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2))); | ||
} | ||
.pfe-card__header ::slotted(img), .pfe-card__body ::slotted(img), .pfe-card__footer ::slotted(img) { | ||
max-width: 100% !important; | ||
align-self: flex-start; | ||
object-fit: cover; | ||
} | ||
.pfe-card__header ::slotted(img:not[pfe-overflow]), | ||
.pfe-card__header ::slotted(img:not[overflow]), .pfe-card__body ::slotted(img:not[pfe-overflow]), | ||
.pfe-card__body ::slotted(img:not[overflow]), .pfe-card__footer ::slotted(img:not[pfe-overflow]), | ||
.pfe-card__footer ::slotted(img:not[overflow]) { | ||
align-self: flex-start; | ||
} | ||
.pfe-card__header ::slotted(img[pfe-overflow]), | ||
.pfe-card__header ::slotted(img[overflow]), .pfe-card__body ::slotted(img[pfe-overflow]), | ||
.pfe-card__body ::slotted(img[overflow]), .pfe-card__footer ::slotted(img[pfe-overflow]), | ||
.pfe-card__footer ::slotted(img[overflow]) { | ||
max-width: unset !important; | ||
} | ||
.pfe-card__header ::slotted(img[pfe-overflow~=right]), | ||
.pfe-card__header ::slotted(img[overflow~=right]), .pfe-card__body ::slotted(img[pfe-overflow~=right]), | ||
.pfe-card__body ::slotted(img[overflow~=right]), .pfe-card__footer ::slotted(img[pfe-overflow~=right]), | ||
.pfe-card__footer ::slotted(img[overflow~=right]) { | ||
width: calc(100% + 2rem) !important; | ||
width: calc(100% + var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important; | ||
} | ||
.pfe-card__header ::slotted(img[pfe-overflow~=left]), | ||
.pfe-card__header ::slotted(img[overflow~=left]), .pfe-card__body ::slotted(img[pfe-overflow~=left]), | ||
.pfe-card__body ::slotted(img[overflow~=left]), .pfe-card__footer ::slotted(img[pfe-overflow~=left]), | ||
.pfe-card__footer ::slotted(img[overflow~=left]) { | ||
width: calc(100% + 2rem) !important; | ||
width: calc(100% + var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important; | ||
} | ||
.pfe-card__header ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]), | ||
.pfe-card__header ::slotted(img[overflow~=right][overflow~=left]), .pfe-card__body ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]), | ||
.pfe-card__body ::slotted(img[overflow~=right][overflow~=left]), .pfe-card__footer ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]), | ||
.pfe-card__footer ::slotted(img[overflow~=right][overflow~=left]) { | ||
width: calc(100% + 4rem) !important; | ||
width: calc(100% + var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) + var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important; | ||
} | ||
.pfe-card__header { | ||
z-index: 2; | ||
background-color: var(--pfe-card__header--BackgroundColor, rgba(0, 0, 0, var(--pfe-theme--opacity, 0.09))); | ||
color: var(--pfe-card__header--Color, var(--pfe-broadcasted--text, #3c3f42)); | ||
margin-top: calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1) !important; | ||
margin-right: calc(var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1); | ||
margin-bottom: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))); | ||
margin-left: calc(var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1); | ||
padding-top: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))); | ||
padding-right: var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)); | ||
padding-left: var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2)); | ||
padding-bottom: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))); | ||
} | ||
:host([on=dark]) .pfe-card__header { | ||
background-color: var(--pfe-card__header--BackgroundColor--dark, rgba(255, 255, 255, var(--pfe-theme--opacity, 0.09))); | ||
} | ||
.pfe-card__header:not(.has-body, .has-footer) { | ||
margin-bottom: var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)); | ||
} | ||
.pfe-card__header ::slotted([pfe-overflow~=top]), | ||
.pfe-card__header ::slotted([overflow~=top]) { | ||
--pfe-card__overflow--MarginTop: calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1); | ||
} | ||
.pfe-card__header:not(.has-header) { | ||
display: none; | ||
} | ||
.pfe-card__header.has-body, .pfe-card__header.has-footer ::slotted([overflow~=bottom]) { | ||
--pfe-card__overflow--MarginBottom: calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1); | ||
} | ||
.pfe-card__header ::slotted([overflow~=bottom]) { | ||
--pfe-card__overflow--MarginBottom: calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 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; | ||
} | ||
.pfe-card__body:not(.has-header) ::slotted([pfe-overflow~=top]), .pfe-card__body:not(.has-header) ::slotted([overflow~=top]) { | ||
--pfe-card__overflow--MarginTop: calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1); | ||
} | ||
.pfe-card__body ::slotted([pfe-overflow~=top]), | ||
.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, 1rem))) * -1); | ||
} | ||
.pfe-card__body ::slotted([pfe-overflow~=bottom]), | ||
.pfe-card__body ::slotted([overflow~=bottom]) { | ||
--pfe-card__overflow--MarginBottom: calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1); | ||
} | ||
.pfe-card__body.has-footer ::slotted([overflow~=bottom]) { | ||
--pfe-card__overflow--MarginBottom: calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1); | ||
} | ||
.pfe-card__body:not(.has-footer) { | ||
margin-bottom: 0; | ||
} | ||
.pfe-card__footer { | ||
margin-top: auto; | ||
display: flex; | ||
flex-direction: var(--pfe-card__footer--Row, row); | ||
flex-wrap: var(--pfe-card__footer--Wrap, wrap); | ||
align-items: var(--pfe-card__footer--AlignItems, baseline); | ||
} | ||
.pfe-card__footer ::slotted([pfe-overflow~=bottom]), | ||
.pfe-card__footer ::slotted([overflow~=bottom]) { | ||
--pfe-card__overflow--MarginBottom: calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1); | ||
} | ||
.pfe-card__footer:not(.has-footer) { | ||
display: none; | ||
} | ||
.pfe-card__header, .pfe-card__body { | ||
margin-bottom: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))); | ||
} | ||
.pfe-card__header ::slotted(p:first-child), .pfe-card__body ::slotted(p:first-child) { | ||
margin-top: 0; | ||
} | ||
.pfe-card__header ::slotted(h1:first-child), .pfe-card__body ::slotted(h1:first-child) { | ||
margin-top: 0; | ||
} | ||
.pfe-card__header ::slotted(h2:first-child), .pfe-card__body ::slotted(h2:first-child) { | ||
margin-top: 0; | ||
} | ||
.pfe-card__header ::slotted(h3:first-child), .pfe-card__body ::slotted(h3:first-child) { | ||
margin-top: 0; | ||
} | ||
.pfe-card__header ::slotted(h4:first-child), .pfe-card__body ::slotted(h4:first-child) { | ||
margin-top: 0; | ||
} | ||
.pfe-card__header ::slotted(h5:first-child), .pfe-card__body ::slotted(h5:first-child) { | ||
margin-top: 0; | ||
} | ||
.pfe-card__header ::slotted(h6:first-child), .pfe-card__body ::slotted(h6:first-child) { | ||
margin-top: 0; | ||
}`,i=_;var r=class extends v{constructor(){super(...arguments);this.color="base";this.border=!1;this.slots=new y(this,{slots:["header",null,"footer"],deprecations:{header:"pfe-card--header",footer:"pfe-card--footer"}})}render(){let e={"has-header":this.slots.hasSlotted("header","pfe-card--header"),"has-footer":this.slots.hasSlotted("footer","pfe-card--footer"),"has-body":this.slots.hasSlotted()};return g` | ||
<!-- pfe-card --> | ||
<div class="pfe-card__header ${s(e)}" part="header"> | ||
<slot name="header"></slot> | ||
<slot name="pfe-card--header"></slot> | ||
</div> | ||
<div class="pfe-card__body ${s(e)}" part="body"> | ||
<slot></slot> | ||
</div> | ||
<div class="pfe-card__footer ${s(e)}" part="footer"> | ||
<slot name="footer"></slot> | ||
<slot name="pfe-card--footer"></slot> | ||
</div> | ||
`}_imgSrcChanged(e,t){typeof this.imgSrc=="string"&&(this.style.backgroundImage=t?`url('${t}')`:"")}};r.version="2.0.0-next.0",r.styles=[i],a([b,f({attribute:"img-src",reflect:!0})],r.prototype,"imgSrc",2),a([f({reflect:!0})],r.prototype,"color",2),a([f({reflect:!0})],r.prototype,"size",2),a([f({type:Boolean,reflect:!0})],r.prototype,"border",2),r=a([w("pfe-card"),u()],r);export{r as PfeCard}; | ||
var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(c,e,t,d)=>{for(var o=d>1?void 0:d?m(e,t):e,p=c.length-1,l;p>=0;p--)(l=c[p])&&(o=(d?l(e,t,o):l(o))||o);return d&&o&&n(e,t,o),o};import{LitElement as v,html as g}from"lit";import{customElement as b,property as f}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{observed as w,pfelement as u}from"@patternfly/pfe-core/decorators.js";import{SlotController as y}from"@patternfly/pfe-core/controllers/slot-controller.js";import{css as h}from"lit";var _=h`:host{--context:var(--pfe-card--context, var(--pfe-theme--color--surface--base--context, light));display:flex;flex-direction:column;justify-items:flex-start;align-self:stretch;padding:var(--pfe-card--Padding,var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,1rem) * 2)) var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,1rem) * 2)) var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,1rem) * 2)) var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,1rem) * 2)));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:var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px));overflow:hidden;background-color:var(--pfe-card--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));background-position:var(--pfe-card--BackgroundPosition,center center);color:var(--pfe-broadcasted--text,#3c3f42)}@media print{:host{background-color:#fff!important;background-image:none!important;box-shadow:none!important}}@media print{:host{border-radius:3px;border:1px solid #d2d2d2}}: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=lighter]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lighter, #f0f0f0);--pfe-card--context:var(--pfe-theme--color--surface--lighter--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([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)}:host([border]:not([border=false])),:host([pfe-border]:not([pfe-border=false])){--pfe-card--BorderWidth:1px}.pfe-card__body ::slotted([overflow~=top]),.pfe-card__body ::slotted([pfe-overflow~=top]),.pfe-card__footer ::slotted([overflow~=top]),.pfe-card__footer ::slotted([pfe-overflow~=top]),.pfe-card__header ::slotted([overflow~=top]),.pfe-card__header ::slotted([pfe-overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,1rem) * 2)))!important}:host(.has-header) .pfe-card__body ::slotted([overflow~=top]),:host(.has-header) .pfe-card__body ::slotted([pfe-overflow~=top]),:host(.has-header) .pfe-card__footer ::slotted([overflow~=top]),:host(.has-header) .pfe-card__footer ::slotted([pfe-overflow~=top]),:host(.has-header) .pfe-card__header ::slotted([overflow~=top]),:host(.has-header) .pfe-card__header ::slotted([pfe-overflow~=top]){padding-top:var(--pfe-card--spacing,var(--pfe-theme--container-spacer,1rem))}.pfe-card__body ::slotted([overflow~=right]),.pfe-card__body ::slotted([pfe-overflow~=right]),.pfe-card__footer ::slotted([overflow~=right]),.pfe-card__footer ::slotted([pfe-overflow~=right]),.pfe-card__header ::slotted([overflow~=right]),.pfe-card__header ::slotted([pfe-overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,1rem) * 2)))}.pfe-card__body ::slotted([overflow~=bottom]),.pfe-card__body ::slotted([pfe-overflow~=bottom]),.pfe-card__footer ::slotted([overflow~=bottom]),.pfe-card__footer ::slotted([pfe-overflow~=bottom]),.pfe-card__header ::slotted([overflow~=bottom]),.pfe-card__header ::slotted([pfe-overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * (var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,1rem) * 2)) + var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px))));align-self:flex-end}.pfe-card__body ::slotted([overflow~=left]),.pfe-card__body ::slotted([pfe-overflow~=left]),.pfe-card__footer ::slotted([overflow~=left]),.pfe-card__footer ::slotted([pfe-overflow~=left]),.pfe-card__header ::slotted([overflow~=left]),.pfe-card__header ::slotted([pfe-overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,1rem) * 2)))}.pfe-card__body ::slotted(img),.pfe-card__footer ::slotted(img),.pfe-card__header ::slotted(img){max-width:100%!important;align-self:flex-start;object-fit:cover}.pfe-card__body ::slotted(img:not[overflow]),.pfe-card__body ::slotted(img:not[pfe-overflow]),.pfe-card__footer ::slotted(img:not[overflow]),.pfe-card__footer ::slotted(img:not[pfe-overflow]),.pfe-card__header ::slotted(img:not[overflow]),.pfe-card__header ::slotted(img:not[pfe-overflow]){align-self:flex-start}.pfe-card__body ::slotted(img[overflow]),.pfe-card__body ::slotted(img[pfe-overflow]),.pfe-card__footer ::slotted(img[overflow]),.pfe-card__footer ::slotted(img[pfe-overflow]),.pfe-card__header ::slotted(img[overflow]),.pfe-card__header ::slotted(img[pfe-overflow]){max-width:unset!important}.pfe-card__body ::slotted(img[overflow~=right]),.pfe-card__body ::slotted(img[pfe-overflow~=right]),.pfe-card__footer ::slotted(img[overflow~=right]),.pfe-card__footer ::slotted(img[pfe-overflow~=right]),.pfe-card__header ::slotted(img[overflow~=right]),.pfe-card__header ::slotted(img[pfe-overflow~=right]){width:calc(100% + 2rem)!important;width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,1rem) * 2)))!important}.pfe-card__body ::slotted(img[overflow~=left]),.pfe-card__body ::slotted(img[pfe-overflow~=left]),.pfe-card__footer ::slotted(img[overflow~=left]),.pfe-card__footer ::slotted(img[pfe-overflow~=left]),.pfe-card__header ::slotted(img[overflow~=left]),.pfe-card__header ::slotted(img[pfe-overflow~=left]){width:calc(100% + 2rem)!important;width:calc(100% + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,1rem) * 2)))!important}.pfe-card__body ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__body ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]),.pfe-card__footer ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__footer ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]),.pfe-card__header ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__header ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]){width:calc(100% + 4rem)!important;width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,1rem) * 2)) + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,1rem) * 2)))!important}.pfe-card__header{z-index:2;background-color:var(--pfe-card__header--BackgroundColor,rgba(0,0,0,var(--pfe-theme--opacity,.09)));color:var(--pfe-card__header--Color,var(--pfe-broadcasted--text,#3c3f42));margin-top:calc(var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,1rem) * 2)) * -1)!important;margin-right:calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,1rem) * 2)) * -1);margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,1rem)));margin-left:calc(var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,1rem) * 2)) * -1);padding-top:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,1rem)));padding-right:var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,1rem) * 2));padding-left:var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,1rem) * 2));padding-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,1rem)))}:host([on=dark]) .pfe-card__header{background-color:var(--pfe-card__header--BackgroundColor--dark,rgba(255,255,255,var(--pfe-theme--opacity,.09)))}.pfe-card__header:not(.has-body,.has-footer){margin-bottom:var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,1rem) * 2))}.pfe-card__header ::slotted([overflow~=top]),.pfe-card__header ::slotted([pfe-overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1)}.pfe-card__header:not(.has-header){display:none}.pfe-card__header.has-body,.pfe-card__header.has-footer ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1)}.pfe-card__header ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 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}.pfe-card__body:not(.has-header) ::slotted([overflow~=top]),.pfe-card__body:not(.has-header) ::slotted([pfe-overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1)}.pfe-card__body ::slotted([overflow~=top]),.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, 1rem))) * -1)}.pfe-card__body ::slotted([overflow~=bottom]),.pfe-card__body ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1)}.pfe-card__body.has-footer ::slotted([overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1)}.pfe-card__body:not(.has-footer){margin-bottom:0}.pfe-card__footer{margin-top:auto;display:flex;flex-direction:var(--pfe-card__footer--Row,row);flex-wrap:var(--pfe-card__footer--Wrap,wrap);align-items:var(--pfe-card__footer--AlignItems,baseline)}.pfe-card__footer ::slotted([overflow~=bottom]),.pfe-card__footer ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1)}.pfe-card__footer:not(.has-footer){display:none}.pfe-card__body,.pfe-card__header{margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,1rem)))}.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}`,i=_;var r=class extends v{constructor(){super(...arguments);this.color="base";this.border=!1;this.slots=new y(this,{slots:["header",null,"footer"],deprecations:{header:"pfe-card--header",footer:"pfe-card--footer"}})}render(){let e={"has-header":this.slots.hasSlotted("header","pfe-card--header"),"has-footer":this.slots.hasSlotted("footer","pfe-card--footer"),"has-body":this.slots.hasSlotted()};return g`<div class="pfe-card__header ${s(e)}" part="header"><slot name="header"></slot><slot name="pfe-card--header"></slot></div><div class="pfe-card__body ${s(e)}" part="body"><slot></slot></div><div class="pfe-card__footer ${s(e)}" part="footer"><slot name="footer"></slot><slot name="pfe-card--footer"></slot></div>`}_imgSrcChanged(e,t){typeof this.imgSrc=="string"&&(this.style.backgroundImage=t?`url('${t}')`:"")}};r.version="{{version}}",r.styles=[i],a([w,f({attribute:"img-src",reflect:!0})],r.prototype,"imgSrc",2),a([f({reflect:!0})],r.prototype,"color",2),a([f({reflect:!0})],r.prototype,"size",2),a([f({type:Boolean,reflect:!0})],r.prototype,"border",2),r=a([b("pfe-card"),u()],r);export{r as PfeCard}; | ||
//# sourceMappingURL=pfe-card.js.map |
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
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
0
45402
375