@patternfly/pfe-card - npm Package Compare versions

Comparing version 1.0.0-prerelease.8 to 1.0.0-prerelease.9

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "1.0.0-prerelease.8",
+  "version": "1.0.0-prerelease.9",
   "publishConfig": {
@@ -28,7 +28,7 @@ "access": "public"
   "dependencies": {
-    "@patternfly/pfe-sass": "^1.0.0-prerelease.8",
-    "@patternfly/pfelement": "^1.0.0-prerelease.8"
+    "@patternfly/pfe-sass": "^1.0.0-prerelease.9",
+    "@patternfly/pfelement": "^1.0.0-prerelease.9"
   },
   "generator-pfelement-version": "0.5.0",
-  "gitHead": "d60adb94c4945f22c939f7806cf7d0718987bddb"
+  "gitHead": "2afa7eb77db4973d5d46090414a4d12932cc735b"
 }

pfe-card.js

@@ -1,158 +0,2 @@
-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.
- * 
-*/
-
-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";
-  }
-
-  constructor() {
-    super(PfeCard);
-  }
-}
-
-PFElement.create(PfeCard);
-
-export default PfeCard;
+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;
 //# sourceMappingURL=pfe-card.js.map

pfe-card.umd.js

@@ -1,2 +0,2 @@
-!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(o){"use strict";o=o&&o.hasOwnProperty("default")?o.default:o;var t=function(){function t(e,r){for(var o=0;o<r.length;o++){var t=r[o];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}return function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e}}(),e=function(e){function r(){return function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}(this,r),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,(r.__proto__||Object.getPrototypeOf(r)).call(this,r))}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)}(r,o),t(r,[{key:"html",get:function(){return'\n<style>\n: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; }\n</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:"tag",get:function(){return"pfe-card"}}]),r}();return o.create(e),e});
+!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});
 //# sourceMappingURL=pfe-card.umd.js.map

src/pfe-card.js

 import PFElement from "../pfelement/pfelement.js";
 
+// -- 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 {
@@ -16,5 +93,54 @@ static get tag() {
 
+  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);
+    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");
+          }
+        });
+      });
+    }
+  }
 }
@@ -21,0 +147,0 @@

New alerts

License Policy Violation

License

This 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 risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70932

increased by29.41%

Lines of code

334

increased by3.41%

Worsened metrics

Number of low supply chain risk alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@patternfly/pfe-sass@^1.0.0-prerelease.9

• Updated@patternfly/pfelement@^1.0.0-prerelease.9