Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@patternfly/pfe-card
Advanced tools
@patternfly/pfe-card - npm Package Compare versions
Comparing version 1.0.0-prerelease.9 to 1.0.0-prerelease.10
@@ -7,4 +7,2 @@ import { storiesOf } from "@storybook/polymer"; | ||
| // import cpTheme from "../../../themes/cp-theme/cp-theme.js"; | ||
| const stories = storiesOf("Card", module); | ||
@@ -11,0 +9,0 @@ |
@@ -7,3 +7,3 @@ { | ||
| }, | ||
| "version": "1.0.0-prerelease.9", | ||
| "version": "1.0.0-prerelease.10", | ||
| "publishConfig": { | ||
@@ -28,7 +28,7 @@ "access": "public" | ||
| "dependencies": { | ||
| "@patternfly/pfe-sass": "^1.0.0-prerelease.9", | ||
| "@patternfly/pfelement": "^1.0.0-prerelease.9" | ||
| "@patternfly/pfe-sass": "^1.0.0-prerelease.10", | ||
| "@patternfly/pfelement": "^1.0.0-prerelease.10" | ||
| }, | ||
| "generator-pfelement-version": "0.5.0", | ||
| "gitHead": "2afa7eb77db4973d5d46090414a4d12932cc735b" | ||
| "gitHead": "b49b74a24aebabbf0987be9e694f119d63e1246e" | ||
| } |
281
pfe-card.js
@@ -1,2 +0,281 @@ | ||
| import e from"../pfelement/pfelement.js";Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var r=this;do{if(r.matches(e))return r;r=r.parentElement||r.parentNode}while(null!==r&&1===r.nodeType);return null}),Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{value:function(e,r){if(null==this)throw new TypeError('"this" is null or not defined');var o=Object(this),t=o.length>>>0;if(0===t)return!1;var c,a,l=0|r,n=Math.max(l>=0?l:t-Math.abs(l),0);for(;n<t;){if((c=o[n])===(a=e)||"number"==typeof c&&"number"==typeof a&&isNaN(c)&&isNaN(a))return!0;n++}return!1}});class r extends e{get html(){return'<style>:host {\n --pfe-card--padding: calc(var(--pfe-theme--container-spacer, 1rem) * 2);\n --pfe-card_header--size: var(--pfe-theme--font-size--heading--gamma, 21px);\n --pfe-card--bg: var(--pfe-theme--color--surface--base, #dfdfdf);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--base--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--base--link, #00538c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--base--link--visited, #7551a6);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--base--link--hover, #00305b);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--base--link--focus, #00305b);\n display: flex;\n flex-direction: column;\n justify-items: flex-start;\n padding: var(--pfe-card--padding);\n border: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n border-radius: var(--pfe-theme--surface--border-radius, 0);\n background: var(--pfe-card--bg);\n color: var(--pfe-broadcasted--color--text); }\n\na {\n color: var(--pfe-broadcasted--color--ui-link); }\n\na:visited {\n color: var(--pfe-broadcasted--color--ui-link--visited); }\n\na:hover {\n color: var(--pfe-broadcasted--color--ui-link--hover); }\n\na:focus {\n color: var(--pfe-broadcasted--color--ui-link--focus); }\n\n:host([color="dark"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--darker, #464646);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darker--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darker--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darker--link--focus, #cce6ff); }\n\n:host([color="darkest"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--darkest, #131313);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darkest--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darkest--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff); }\n\n:host([color="light"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--lighter, #ececec);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lighter--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lighter--link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lighter--link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lighter--link--focus, #003366); }\n\n:host([color="lightest"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lightest--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lightest--link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lightest--link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366); }\n\n:host([color="complement"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--complement, #0477a4);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--complement--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--complement--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--complement--link--focus, #cce6ff); }\n\n:host([color="accent"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--accent, #fe460d);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--accent--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--accent--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--accent--link--focus, #cce6ff); }\n\n:host([size="small"]) {\n --pfe-card--padding: var(--pfe-theme--container-spacer, 1rem); }\n\n.pfe-card__header,\n.pfe-card__body,\n.pfe-card__footer {\n display: block;\n margin: 0; }\n\n.pfe-card__header::slotted(h1:first-child),\n.pfe-card__header::slotted(h2:first-child),\n.pfe-card__header::slotted(h3:first-child),\n.pfe-card__header::slotted(h4:first-child),\n.pfe-card__header::slotted(h5:first-child),\n.pfe-card__header::slotted(h6:first-child) {\n margin-top: 0 !important;\n font-size: var(--pfe-card_header--size); }\n\n.pfe-card__body::slotted(*:nth-child(2)) {\n margin-top: 0 !important; }\n\n.pfe-card__footer {\n margin-top: auto;\n justify-self: flex-end; }</style>\n<slot class="pfe-card__header" name="header"></slot>\n<slot class="pfe-card__body"></slot>\n<slot class="pfe-card__footer" name="footer"></slot>'}static get tag(){return"pfe-card"}get styleUrl(){return"pfe-card.scss"}get templateUrl(){return"pfe-card.html"}get backgroundColor(){return this.getAttribute("color")||"base"}static get observedAttributes(){return["color"]}static get PfeType(){return e.PfeTypes.Container}constructor(){super(r,{type:r.PfeType})}connectedCallback(){super.connectedCallback(),this.backgroundColor&&this._updateContext(this.backgroundColor)}attributeChangedCallback(e,r,o){super.attributeChangedCallback(e,r,o),"color"===e&&this._colorChanged(e,r,o)}_colorChanged(e,r,o){this._updateContext(o)}_updateContext(e){["darkest","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; | ||
| import PFElement from '../pfelement/pfelement.js'; | ||
| /* | ||
| * Copyright 2019 Red Hat, Inc. | ||
| * | ||
| * Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| * of this software and associated documentation files (the "Software"), to deal | ||
| * in the Software without restriction, including without limitation the rights | ||
| * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| * copies of the Software, and to permit persons to whom the Software is | ||
| * furnished to do so, subject to the following conditions: | ||
| * | ||
| * The above copyright notice and this permission notice shall be included in | ||
| * all copies or substantial portions of the Software. | ||
| * | ||
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| * SOFTWARE. | ||
| * | ||
| */ | ||
| // -- Polyfill for supporting Element.closest | ||
| // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest | ||
| if (!Element.prototype.matches) { | ||
| Element.prototype.matches = | ||
| Element.prototype.msMatchesSelector || | ||
| Element.prototype.webkitMatchesSelector; | ||
| } | ||
| if (!Element.prototype.closest) { | ||
| Element.prototype.closest = function(s) { | ||
| var el = this; | ||
| do { | ||
| if (el.matches(s)) return el; | ||
| el = el.parentElement || el.parentNode; | ||
| } while (el !== null && el.nodeType === 1); | ||
| return null; | ||
| }; | ||
| } | ||
| // -- Polyfill for supporting Array.includes | ||
| // https://tc39.github.io/ecma262/#sec-array.prototype.includes | ||
| if (!Array.prototype.includes) { | ||
| Object.defineProperty(Array.prototype, "includes", { | ||
| value: function(valueToFind, fromIndex) { | ||
| if (this == null) { | ||
| throw new TypeError('"this" is null or not defined'); | ||
| } | ||
| // 1. Let O be ? ToObject(this value). | ||
| var o = Object(this); | ||
| // 2. Let len be ? ToLength(? Get(O, "length")). | ||
| var len = o.length >>> 0; | ||
| // 3. If len is 0, return false. | ||
| if (len === 0) { | ||
| return false; | ||
| } | ||
| // 4. Let n be ? ToInteger(fromIndex). | ||
| // (If fromIndex is undefined, this step produces the value 0.) | ||
| var n = fromIndex | 0; | ||
| // 5. If n ≥ 0, then | ||
| // a. Let k be n. | ||
| // 6. Else n < 0, | ||
| // a. Let k be len + n. | ||
| // b. If k < 0, let k be 0. | ||
| var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); | ||
| function sameValueZero(x, y) { | ||
| return ( | ||
| x === y || | ||
| (typeof x === "number" && | ||
| typeof y === "number" && | ||
| isNaN(x) && | ||
| isNaN(y)) | ||
| ); | ||
| } | ||
| // 7. Repeat, while k < len | ||
| while (k < len) { | ||
| // a. Let elementK be the result of ? Get(O, ! ToString(k)). | ||
| // b. If SameValueZero(valueToFind, elementK) is true, return true. | ||
| if (sameValueZero(o[k], valueToFind)) { | ||
| return true; | ||
| } | ||
| // c. Increase k by 1. | ||
| k++; | ||
| } | ||
| // 8. Return false | ||
| return false; | ||
| } | ||
| }); | ||
| } | ||
| class PfeCard extends PFElement { | ||
| get html() { | ||
| return `<style>:host { | ||
| --pfe-card--padding: calc(var(--pfe-theme--container-spacer, 1rem) * 2); | ||
| --pfe-card_header--size: var(--pfe-theme--font-size--heading--gamma, 21px); | ||
| --pfe-card--bg: var(--pfe-theme--color--surface--base, #dfdfdf); | ||
| --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); | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-items: flex-start; | ||
| padding: var(--pfe-card--padding); | ||
| border: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent; | ||
| border-radius: var(--pfe-theme--surface--border-radius, 0); | ||
| background: var(--pfe-card--bg); | ||
| color: var(--pfe-broadcasted--color--text); } | ||
| a { | ||
| color: var(--pfe-broadcasted--color--ui-link); } | ||
| a:visited { | ||
| color: var(--pfe-broadcasted--color--ui-link--visited); } | ||
| a:hover { | ||
| color: var(--pfe-broadcasted--color--ui-link--hover); } | ||
| a:focus { | ||
| color: var(--pfe-broadcasted--color--ui-link--focus); } | ||
| :host([color="dark"]) { | ||
| --pfe-card--bg: 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"]) { | ||
| --pfe-card--bg: 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"]) { | ||
| --pfe-card--bg: 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"]) { | ||
| --pfe-card--bg: 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"]) { | ||
| --pfe-card--bg: 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"]) { | ||
| --pfe-card--bg: 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([size="small"]) { | ||
| --pfe-card--padding: var(--pfe-theme--container-spacer, 1rem); } | ||
| .pfe-card__header, | ||
| .pfe-card__body, | ||
| .pfe-card__footer { | ||
| display: block; | ||
| margin: 0; } | ||
| .pfe-card__header::slotted(h1:first-child), | ||
| .pfe-card__header::slotted(h2:first-child), | ||
| .pfe-card__header::slotted(h3:first-child), | ||
| .pfe-card__header::slotted(h4:first-child), | ||
| .pfe-card__header::slotted(h5:first-child), | ||
| .pfe-card__header::slotted(h6:first-child) { | ||
| margin-top: 0 !important; | ||
| font-size: var(--pfe-card_header--size); } | ||
| .pfe-card__body::slotted(*:nth-child(2)) { | ||
| margin-top: 0 !important; } | ||
| .pfe-card__footer { | ||
| margin-top: auto; | ||
| justify-self: flex-end; }</style> | ||
| <slot class="pfe-card__header" name="header"></slot> | ||
| <slot class="pfe-card__body"></slot> | ||
| <slot class="pfe-card__footer" name="footer"></slot>`; | ||
| } | ||
| static get tag() { | ||
| return "pfe-card"; | ||
| } | ||
| get styleUrl() { | ||
| return "pfe-card.scss"; | ||
| } | ||
| get templateUrl() { | ||
| return "pfe-card.html"; | ||
| } | ||
| get backgroundColor() { | ||
| return this.getAttribute("color") || "base"; | ||
| } | ||
| static get observedAttributes() { | ||
| return ["color"]; | ||
| } | ||
| // Declare the type of this component | ||
| static get PfeType() { | ||
| return PFElement.PfeTypes.Container; | ||
| } | ||
| constructor() { | ||
| super(PfeCard, { type: PfeCard.PfeType }); | ||
| } | ||
| connectedCallback() { | ||
| super.connectedCallback(); | ||
| // Initialize the context setting for the children elements | ||
| if (this.backgroundColor) { | ||
| this._updateContext(this.backgroundColor); | ||
| } | ||
| } | ||
| attributeChangedCallback(attr, oldValue, newValue) { | ||
| super.attributeChangedCallback(attr, oldValue, newValue); | ||
| if (attr === "color") { | ||
| this._colorChanged(attr, oldValue, newValue); | ||
| } | ||
| } | ||
| // Update the color attribute and contexts | ||
| _colorChanged(attr, oldValue, newValue) { | ||
| // If the new value has a dark background, update children elements | ||
| this._updateContext(newValue); | ||
| } | ||
| // Set the children's context if parent background is dark | ||
| _updateContext(context) { | ||
| if (["darkest", "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"); | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| PFElement.create(PfeCard); | ||
| export default PfeCard; | ||
| //# sourceMappingURL=pfe-card.js.map |
@@ -1,2 +0,286 @@ | ||
| !function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("../pfelement/pfelement.umd")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd"],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 c=Object.getOwnPropertyDescriptor(r,t);if(void 0===c){var a=Object.getPrototypeOf(r);return null===a?void 0:e(a,t,o)}if("value"in c)return c.value;var n=c.get;return void 0!==n?n.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 c,a,n=0|r,f=Math.max(0<=n?n:o-Math.abs(n),0);for(;f<o;){if((c=t[f])===(a=e)||"number"==typeof c&&"number"==typeof a&&isNaN(c)&&isNaN(a))return!0;f++}return!1}});var e=function(e){function o(){return function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}(this,o),function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r}(this,(o.__proto__||Object.getPrototypeOf(o)).call(this,o,{type:o.PfeType}))}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)}(o,r),t(o,[{key:"html",get:function(){return'<style>:host {\n --pfe-card--padding: calc(var(--pfe-theme--container-spacer, 1rem) * 2);\n --pfe-card_header--size: var(--pfe-theme--font-size--heading--gamma, 21px);\n --pfe-card--bg: var(--pfe-theme--color--surface--base, #dfdfdf);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--base--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--base--link, #00538c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--base--link--visited, #7551a6);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--base--link--hover, #00305b);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--base--link--focus, #00305b);\n display: flex;\n flex-direction: column;\n justify-items: flex-start;\n padding: var(--pfe-card--padding);\n border: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n border-radius: var(--pfe-theme--surface--border-radius, 0);\n background: var(--pfe-card--bg);\n color: var(--pfe-broadcasted--color--text); }\n\na {\n color: var(--pfe-broadcasted--color--ui-link); }\n\na:visited {\n color: var(--pfe-broadcasted--color--ui-link--visited); }\n\na:hover {\n color: var(--pfe-broadcasted--color--ui-link--hover); }\n\na:focus {\n color: var(--pfe-broadcasted--color--ui-link--focus); }\n\n:host([color="dark"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--darker, #464646);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darker--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darker--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darker--link--focus, #cce6ff); }\n\n:host([color="darkest"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--darkest, #131313);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darkest--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darkest--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff); }\n\n:host([color="light"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--lighter, #ececec);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lighter--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lighter--link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lighter--link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lighter--link--focus, #003366); }\n\n:host([color="lightest"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lightest--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lightest--link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lightest--link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366); }\n\n:host([color="complement"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--complement, #0477a4);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--complement--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--complement--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--complement--link--focus, #cce6ff); }\n\n:host([color="accent"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--accent, #fe460d);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--accent--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--accent--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--accent--link--focus, #cce6ff); }\n\n:host([size="small"]) {\n --pfe-card--padding: var(--pfe-theme--container-spacer, 1rem); }\n\n.pfe-card__header,\n.pfe-card__body,\n.pfe-card__footer {\n display: block;\n margin: 0; }\n\n.pfe-card__header::slotted(h1:first-child),\n.pfe-card__header::slotted(h2:first-child),\n.pfe-card__header::slotted(h3:first-child),\n.pfe-card__header::slotted(h4:first-child),\n.pfe-card__header::slotted(h5:first-child),\n.pfe-card__header::slotted(h6:first-child) {\n margin-top: 0 !important;\n font-size: var(--pfe-card_header--size); }\n\n.pfe-card__body::slotted(*:nth-child(2)) {\n margin-top: 0 !important; }\n\n.pfe-card__footer {\n margin-top: auto;\n justify-self: flex-end; }</style>\n<slot class="pfe-card__header" name="header"></slot>\n<slot class="pfe-card__body"></slot>\n<slot class="pfe-card__footer" name="footer"></slot>'}},{key:"styleUrl",get:function(){return"pfe-card.scss"}},{key:"templateUrl",get:function(){return"pfe-card.html"}},{key:"backgroundColor",get:function(){return this.getAttribute("color")||"base"}}],[{key:"tag",get:function(){return"pfe-card"}},{key:"observedAttributes",get:function(){return["color"]}},{key:"PfeType",get:function(){return r.PfeTypes.Container}}]),t(o,[{key:"connectedCallback",value:function(){c(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"connectedCallback",this).call(this),this.backgroundColor&&this._updateContext(this.backgroundColor)}},{key:"attributeChangedCallback",value:function(e,r,t){c(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"attributeChangedCallback",this).call(this,e,r,t),"color"===e&&this._colorChanged(e,r,t)}},{key:"_colorChanged",value:function(e,r,t){this._updateContext(t)}},{key:"_updateContext",value:function(e){var t=this;["darkest","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")})})}}]),o}();return r.create(e),e}); | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../pfelement/pfelement.umd')) : | ||
| typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd'], factory) : | ||
| (global.PfeCard = factory(global.PFElement)); | ||
| }(this, (function (PFElement) { 'use strict'; | ||
| PFElement = PFElement && PFElement.hasOwnProperty('default') ? PFElement['default'] : PFElement; | ||
| var classCallCheck = function (instance, Constructor) { | ||
| if (!(instance instanceof Constructor)) { | ||
| throw new TypeError("Cannot call a class as a function"); | ||
| } | ||
| }; | ||
| var createClass = function () { | ||
| function defineProperties(target, props) { | ||
| for (var i = 0; i < props.length; i++) { | ||
| var descriptor = props[i]; | ||
| descriptor.enumerable = descriptor.enumerable || false; | ||
| descriptor.configurable = true; | ||
| if ("value" in descriptor) descriptor.writable = true; | ||
| Object.defineProperty(target, descriptor.key, descriptor); | ||
| } | ||
| } | ||
| return function (Constructor, protoProps, staticProps) { | ||
| if (protoProps) defineProperties(Constructor.prototype, protoProps); | ||
| if (staticProps) defineProperties(Constructor, staticProps); | ||
| return Constructor; | ||
| }; | ||
| }(); | ||
| var get = function get(object, property, receiver) { | ||
| if (object === null) object = Function.prototype; | ||
| var desc = Object.getOwnPropertyDescriptor(object, property); | ||
| if (desc === undefined) { | ||
| var parent = Object.getPrototypeOf(object); | ||
| if (parent === null) { | ||
| return undefined; | ||
| } else { | ||
| return get(parent, property, receiver); | ||
| } | ||
| } else if ("value" in desc) { | ||
| return desc.value; | ||
| } else { | ||
| var getter = desc.get; | ||
| if (getter === undefined) { | ||
| return undefined; | ||
| } | ||
| return getter.call(receiver); | ||
| } | ||
| }; | ||
| var inherits = function (subClass, superClass) { | ||
| if (typeof superClass !== "function" && superClass !== null) { | ||
| throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); | ||
| } | ||
| subClass.prototype = Object.create(superClass && superClass.prototype, { | ||
| constructor: { | ||
| value: subClass, | ||
| enumerable: false, | ||
| writable: true, | ||
| configurable: true | ||
| } | ||
| }); | ||
| if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; | ||
| }; | ||
| var possibleConstructorReturn = function (self, call) { | ||
| if (!self) { | ||
| throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); | ||
| } | ||
| return call && (typeof call === "object" || typeof call === "function") ? call : self; | ||
| }; | ||
| 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); | ||
| } | ||
| }; | ||
| /* | ||
| * Copyright 2019 Red Hat, Inc. | ||
| * | ||
| * Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| * of this software and associated documentation files (the "Software"), to deal | ||
| * in the Software without restriction, including without limitation the rights | ||
| * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| * copies of the Software, and to permit persons to whom the Software is | ||
| * furnished to do so, subject to the following conditions: | ||
| * | ||
| * The above copyright notice and this permission notice shall be included in | ||
| * all copies or substantial portions of the Software. | ||
| * | ||
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| * SOFTWARE. | ||
| * | ||
| */ | ||
| // -- Polyfill for supporting Element.closest | ||
| // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest | ||
| if (!Element.prototype.matches) { | ||
| Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; | ||
| } | ||
| if (!Element.prototype.closest) { | ||
| Element.prototype.closest = function (s) { | ||
| var el = this; | ||
| do { | ||
| if (el.matches(s)) return el; | ||
| el = el.parentElement || el.parentNode; | ||
| } while (el !== null && el.nodeType === 1); | ||
| return null; | ||
| }; | ||
| } | ||
| // -- Polyfill for supporting Array.includes | ||
| // https://tc39.github.io/ecma262/#sec-array.prototype.includes | ||
| if (!Array.prototype.includes) { | ||
| Object.defineProperty(Array.prototype, "includes", { | ||
| value: function value(valueToFind, fromIndex) { | ||
| if (this == null) { | ||
| throw new TypeError('"this" is null or not defined'); | ||
| } | ||
| // 1. Let O be ? ToObject(this value). | ||
| var o = Object(this); | ||
| // 2. Let len be ? ToLength(? Get(O, "length")). | ||
| var len = o.length >>> 0; | ||
| // 3. If len is 0, return false. | ||
| if (len === 0) { | ||
| return false; | ||
| } | ||
| // 4. Let n be ? ToInteger(fromIndex). | ||
| // (If fromIndex is undefined, this step produces the value 0.) | ||
| var n = fromIndex | 0; | ||
| // 5. If n ≥ 0, then | ||
| // a. Let k be n. | ||
| // 6. Else n < 0, | ||
| // a. Let k be len + n. | ||
| // b. If k < 0, let k be 0. | ||
| var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); | ||
| function sameValueZero(x, y) { | ||
| return x === y || typeof x === "number" && typeof y === "number" && isNaN(x) && isNaN(y); | ||
| } | ||
| // 7. Repeat, while k < len | ||
| while (k < len) { | ||
| // a. Let elementK be the result of ? Get(O, ! ToString(k)). | ||
| // b. If SameValueZero(valueToFind, elementK) is true, return true. | ||
| if (sameValueZero(o[k], valueToFind)) { | ||
| return true; | ||
| } | ||
| // c. Increase k by 1. | ||
| k++; | ||
| } | ||
| // 8. Return false | ||
| return false; | ||
| } | ||
| }); | ||
| } | ||
| var PfeCard = function (_PFElement) { | ||
| inherits(PfeCard, _PFElement); | ||
| createClass(PfeCard, [{ | ||
| key: 'html', | ||
| get: function get$$1() { | ||
| return '<style>:host {\n --pfe-card--padding: calc(var(--pfe-theme--container-spacer, 1rem) * 2);\n --pfe-card_header--size: var(--pfe-theme--font-size--heading--gamma, 21px);\n --pfe-card--bg: var(--pfe-theme--color--surface--base, #dfdfdf);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--base--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--base--link, #00538c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--base--link--visited, #7551a6);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--base--link--hover, #00305b);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--base--link--focus, #00305b);\n display: flex;\n flex-direction: column;\n justify-items: flex-start;\n padding: var(--pfe-card--padding);\n border: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n border-radius: var(--pfe-theme--surface--border-radius, 0);\n background: var(--pfe-card--bg);\n color: var(--pfe-broadcasted--color--text); }\n\na {\n color: var(--pfe-broadcasted--color--ui-link); }\n\na:visited {\n color: var(--pfe-broadcasted--color--ui-link--visited); }\n\na:hover {\n color: var(--pfe-broadcasted--color--ui-link--hover); }\n\na:focus {\n color: var(--pfe-broadcasted--color--ui-link--focus); }\n\n:host([color="dark"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--darker, #464646);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darker--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darker--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darker--link--focus, #cce6ff); }\n\n:host([color="darkest"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--darkest, #131313);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darkest--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darkest--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff); }\n\n:host([color="light"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--lighter, #ececec);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lighter--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lighter--link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lighter--link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lighter--link--focus, #003366); }\n\n:host([color="lightest"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lightest--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lightest--link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lightest--link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366); }\n\n:host([color="complement"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--complement, #0477a4);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--complement--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--complement--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--complement--link--focus, #cce6ff); }\n\n:host([color="accent"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--accent, #fe460d);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--accent--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--accent--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--accent--link--focus, #cce6ff); }\n\n:host([size="small"]) {\n --pfe-card--padding: var(--pfe-theme--container-spacer, 1rem); }\n\n.pfe-card__header,\n.pfe-card__body,\n.pfe-card__footer {\n display: block;\n margin: 0; }\n\n.pfe-card__header::slotted(h1:first-child),\n.pfe-card__header::slotted(h2:first-child),\n.pfe-card__header::slotted(h3:first-child),\n.pfe-card__header::slotted(h4:first-child),\n.pfe-card__header::slotted(h5:first-child),\n.pfe-card__header::slotted(h6:first-child) {\n margin-top: 0 !important;\n font-size: var(--pfe-card_header--size); }\n\n.pfe-card__body::slotted(*:nth-child(2)) {\n margin-top: 0 !important; }\n\n.pfe-card__footer {\n margin-top: auto;\n justify-self: flex-end; }</style>\n<slot class="pfe-card__header" name="header"></slot>\n<slot class="pfe-card__body"></slot>\n<slot class="pfe-card__footer" name="footer"></slot>'; | ||
| } | ||
| }, { | ||
| key: 'styleUrl', | ||
| get: function get$$1() { | ||
| return "pfe-card.scss"; | ||
| } | ||
| }, { | ||
| key: 'templateUrl', | ||
| get: function get$$1() { | ||
| return "pfe-card.html"; | ||
| } | ||
| }, { | ||
| key: 'backgroundColor', | ||
| get: function get$$1() { | ||
| return this.getAttribute("color") || "base"; | ||
| } | ||
| }], [{ | ||
| key: 'tag', | ||
| get: function get$$1() { | ||
| return "pfe-card"; | ||
| } | ||
| }, { | ||
| key: 'observedAttributes', | ||
| get: function get$$1() { | ||
| return ["color"]; | ||
| } | ||
| // Declare the type of this component | ||
| }, { | ||
| key: 'PfeType', | ||
| get: function get$$1() { | ||
| return PFElement.PfeTypes.Container; | ||
| } | ||
| }]); | ||
| function PfeCard() { | ||
| classCallCheck(this, PfeCard); | ||
| return possibleConstructorReturn(this, (PfeCard.__proto__ || Object.getPrototypeOf(PfeCard)).call(this, PfeCard, { type: PfeCard.PfeType })); | ||
| } | ||
| createClass(PfeCard, [{ | ||
| key: 'connectedCallback', | ||
| value: function connectedCallback() { | ||
| get(PfeCard.prototype.__proto__ || Object.getPrototypeOf(PfeCard.prototype), 'connectedCallback', this).call(this); | ||
| // Initialize the context setting for the children elements | ||
| if (this.backgroundColor) { | ||
| this._updateContext(this.backgroundColor); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'attributeChangedCallback', | ||
| value: function attributeChangedCallback(attr, oldValue, newValue) { | ||
| get(PfeCard.prototype.__proto__ || Object.getPrototypeOf(PfeCard.prototype), 'attributeChangedCallback', this).call(this, attr, oldValue, newValue); | ||
| if (attr === "color") { | ||
| this._colorChanged(attr, oldValue, newValue); | ||
| } | ||
| } | ||
| // Update the color attribute and contexts | ||
| }, { | ||
| key: '_colorChanged', | ||
| value: function _colorChanged(attr, oldValue, newValue) { | ||
| // If the new value has a dark background, update children elements | ||
| this._updateContext(newValue); | ||
| } | ||
| // Set the children's context if parent background is dark | ||
| }, { | ||
| key: '_updateContext', | ||
| value: function _updateContext(context) { | ||
| var _this2 = this; | ||
| if (["darkest", "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"); | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
| } | ||
| }]); | ||
| return PfeCard; | ||
| }(PFElement); | ||
| PFElement.create(PfeCard); | ||
| return PfeCard; | ||
| }))); | ||
| //# sourceMappingURL=pfe-card.umd.js.map |
@@ -1,2 +0,2 @@ | ||
| # WIP 🐣: PFElements Card Element | ||
| PFElements Card Element | ||
@@ -3,0 +3,0 @@ ## Usage |
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
New alerts
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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by149.41%
176915
- Number of package files
- increased by42.11%
27
- Lines of code
- increased by193.41%
980
Worsened metrics
- Number of low supply chain risk alerts
- increased by33.33%
4