@patternfly/elements
Version:
PatternFly Elements
69 lines • 15.1 kB
JavaScript
var _PfCard_slots;
import { __classPrivateFieldGet, __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators/custom-element.js';
import { property } from 'lit/decorators/property.js';
import { classMap } from 'lit/directives/class-map.js';
import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
import { css } from "lit";
const style = css `:host {\n\t--pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06));\n\t--pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);\n\t--pf-c-card__title--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold, 700);\n\t--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card__body--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-card__footer--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1);\n\t--pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));\n\t--pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;\n\t--pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));\n\t--pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));\n\t--pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));\n\t--pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));\n\t--pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));\n\t--pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg, 3px);\n\t--pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n\t--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-card--m-selectable-raised--before--Right: 0;\n\t--pf-c-card--m-selectable-raised--before--Bottom: 0;\n\t--pf-c-card--m-selectable-raised--before--Left: 0;\n\t--pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));\n\t--pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));\n\t--pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));\n\t--pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl, 4px);\n\t--pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;\n\t--pf-c-card--m-selectable-raised--before--Transition: none;\n\t--pf-c-card--m-selectable-raised--before--ScaleY: 1;\n\t--pf-c-card--m-selectable-raised--before--TranslateY: 0;\n\t--pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n\t--pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n\t--pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n\t--pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);\n\t--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));\n\t--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;\n\t--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);\n\t--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));\n\t--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));\n\t--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs, 100);\n\t--pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;\n\t--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;\n\t--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);\n\t--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;\n\t--pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa);\n\t--pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);\n\t--pf-c-card--m-non-selectable-raised--before--ScaleY: 2;\n\t--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200, #d2d2d2);\n\t--pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact--child--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact--child--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl, 1.25rem);\n\t--pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);\n\t--pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n\t--pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n\t--pf-c-card--m-full-height--Height: 100%;\n\t--pf-c-card--m-plain--BoxShadow: none;\n\t--pf-c-card--m-plain--BackgroundColor: transparent;\n\t--pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);\n\t--pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-card__header--m-toggle-right--actions--MarginRight: 0;\n\t--pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100, #06c);\n display: flex;\n flex-direction: column;\n\tbackground-color: var(--pf-c-card--BackgroundColor);\n\tbox-shadow: var(--pf-c-card--BoxShadow);\n}\n\n[hidden],\n.empty {\n display: none !important;\n}\n\nheader {\n padding-block-start: var(--pf-c-card--first-child--PaddingTop);\n padding-block-end: var(--pf-c-card__title--not--last-child--PaddingBottom);\n display: flex;\n flex-flow: row wrap;\n align-items: center;\n}\n\nheader ::slotted(*) {\n margin-block: 0 !important;\n\n font-family: var(--pf-c-card__title--FontFamily) !important;\n font-size: var(--pf-c-card__title--FontSize) !important;\n font-weight: var(--pf-c-card__title--FontWeight) !important;\n}\n\nheader ::slotted(pf-dropdown) {\n margin-inline-start: auto;\n}\n\narticle {\n position: relative;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n[part="header"],\n[part="body"],\n[part="footer"] {\n padding-inline-start: var(--pf-c-card--child--PaddingLeft);\n padding-inline-end: var(--pf-c-card--child--PaddingRight);\n padding-block-end: var(--pf-c-card--child--PaddingBottom);\n}\n\n#title {\n display: block;\n flex: 1 0 100%;\n padding-block-start: var(--pf-c-card__title--not--last-child--PaddingBottom);\n}\n\n[part="body"] {\n font-size: var(--pf-c-card__body--FontSize);\n flex: var(--pf-c-card__body--FullHeight--Flex);\n}\n\n[part="body"] ::slotted(:not([slot]):first-of-type) {\n margin-block-start: 0 !important;\n}\n\n[part="body"] ::slotted(:not([slot]):last-of-type) {\n margin-block-end: 0 !important;\n}\n\n[part="footer"] {\n margin-block-start: auto;\n display: flex;\n gap: 0.5em;\n inset-block-end: 0;\n font-size: var(--pf-c-card__footer--FontSize);\n}\n\n:host([size="compact"]) {\n\t--pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);\n\t--pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);\n\t--pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-compact--first-child--PaddingTop);\n\t--pf-c-card--child--PaddingRight: var(--pf-c-card--m-compact--child--PaddingRight);\n\t--pf-c-card--child--PaddingBottom: var(--pf-c-card--m-compact--child--PaddingBottom);\n\t--pf-c-card--child--PaddingLeft: var(--pf-c-card--m-compact--child--PaddingLeft);\n\t--pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-compact--c-divider--child--PaddingTop);\n\t--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);\n}\n\n:host([size="large"]) {\n\t--pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);\n\t--pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);\n\t--pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);\n\t--pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);\n\t--pf-c-card--child--PaddingLeft: var(--pf-c-card--m-display-lg--child--PaddingLeft);\n\t--pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-display-lg--c-divider--child--PaddingTop);\n\t--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom);\n}\n\n:host([flat]) {\n --pf-c-card--BoxShadow: none;\n border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);\n}\n\n:host([plain]) {\n --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow);\n --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);\n}\n\n:host([rounded]) {\n border-radius: var(--pf-c-card--m-rounded--BorderRadius);\n}\n\n:host([full-height]) {\n height: var(--pf-c-card--m-full-height--Height);\n --pf-c-card__body--FullHeight--Flex: 1 1 auto;\n}\n\n`;
let PfCard = class PfCard extends LitElement {
constructor() {
super(...arguments);
/**
* Optionally apply a border radius for the drop shadow and/or border.
*/
this.rounded = false;
/**
* Optionally allow the card to take up the full height of the parent element.
*/
this.fullHeight = false;
/**
* Optionally remove the border on the card container.
*/
this.plain = false;
_PfCard_slots.set(this, new SlotController(this, 'header', 'title', null, 'footer'));
}
render() {
return html `
<article>
<header id="header"
part="header"
class="${classMap({ empty: __classPrivateFieldGet(this, _PfCard_slots, "f").isEmpty('header') })}">
<slot name="header"></slot>
<slot id="title" name="title" ?hidden="${__classPrivateFieldGet(this, _PfCard_slots, "f").isEmpty('title')}"></slot>
</header>
<div id="body"
part="body"
class="${classMap({ empty: __classPrivateFieldGet(this, _PfCard_slots, "f").isEmpty(null) })}">
<slot></slot>
</div>
<footer id="footer"
part="footer"
class="${classMap({ empty: __classPrivateFieldGet(this, _PfCard_slots, "f").isEmpty('footer') })}">
<slot name="footer"></slot>
</footer>
</article>
`;
}
};
_PfCard_slots = new WeakMap();
PfCard.styles = [style];
PfCard.version = "4.1.0";
__decorate([
property({ reflect: true })
], PfCard.prototype, "size", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], PfCard.prototype, "rounded", void 0);
__decorate([
property({ type: Boolean, reflect: true, attribute: 'full-height' })
], PfCard.prototype, "fullHeight", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], PfCard.prototype, "plain", void 0);
PfCard = __decorate([
customElement('pf-card')
], PfCard);
export { PfCard };
//# sourceMappingURL=pf-card.js.map