diff --git a/elements/pfe-accordion/package.json b/elements/pfe-accordion/package.json
index d7302487f1..ea7387bd91 100644
--- a/elements/pfe-accordion/package.json
+++ b/elements/pfe-accordion/package.json
@@ -4,7 +4,7 @@
"className": "PfeAccordion",
"elementName": "pfe-accordion"
},
- "version": "1.0.0-prerelease.10",
+ "version": "1.0.0-prerelease.11",
"publishConfig": {
"access": "public"
},
@@ -24,8 +24,8 @@
},
"license": "MIT",
"dependencies": {
- "@patternfly/pfe-sass": "^1.0.0-prerelease.10",
- "@patternfly/pfelement": "^1.0.0-prerelease.10"
+ "@patternfly/pfe-sass": "^1.0.0-prerelease.11",
+ "@patternfly/pfelement": "^1.0.0-prerelease.11"
},
"generator-pfelement-version": "0.5.5",
"gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421"
diff --git a/elements/pfe-accordion/pfe-accordion-header.css b/elements/pfe-accordion/pfe-accordion-header.css
new file mode 100644
index 0000000000..9d0f7c74df
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion-header.css
@@ -0,0 +1,175 @@
+/*
+ * Copyright 2018 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.
+ */
+/* Palette of Border Colors */
+/* Palette of Feedback Colors */
+:host {
+ display: block;
+}
+
+:host > * {
+ margin: 0;
+}
+
+:host button {
+ --pfe-accordion--main: transparent;
+ --pfe-accordion--aux: var(--pfe-theme--color--surface--lightest--text, #333);
+ --pfe-accordion--BorderLeft: var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;
+ --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;
+ --pfe-accordion--BorderBottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);
+ --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest--link, #06c);
+ -webkit-appearance: button;
+ margin: 0;
+ width: 100%;
+ height: auto;
+ font-family: inherit;
+ font-weight: 700;
+ font-weight: var(--pfe-theme--font-weight--bold, 700);
+ text-align: left;
+ cursor: pointer;
+ z-index: 1;
+ position: relative;
+ font-size: calc(16px * 1.1);
+ font-size: calc(var(--pfe-theme--font-size, 16px) * 1.1);
+ line-height: 1.5;
+ line-height: var(--pfe-theme--line-height, 1.5);
+ color: var(--pfe-accordion--aux);
+ background-color: var(--pfe-accordion--main);
+ border-left: var(--pfe-accordion--BorderLeft);
+ border-right: var(--pfe-accordion--BorderRight);
+ border-bottom: var(--pfe-accordion--BorderBottom);
+ border-top: 0;
+ padding: 1rem 50px 1rem calc(1rem * 1.5);
+ padding: var(--pfe-theme--container-spacer, 1rem) 50px var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);
+}
+
+:host button:hover {
+ outline: none;
+ border-left-color: var(--pfe-accordion--BorderLeftColor--focus);
+ z-index: 2;
+}
+
+:host button:focus {
+ outline: none;
+ z-index: 2;
+ text-decoration: underline;
+ -webkit-text-decoration-color: #c6c6c6;
+ text-decoration-color: #c6c6c6;
+ -webkit-text-decoration-color: var(--pfe-theme--color--surface--border--darker, #c6c6c6);
+ text-decoration-color: var(--pfe-theme--color--surface--border--darker, #c6c6c6);
+}
+
+:host button::-moz-focus-inner {
+ border: 0;
+}
+
+:host button[aria-expanded="true"] {
+ --pfe-accordion--main: var(--pfe-theme--color--surface--lightest, #fff);
+ --pfe-accordion--aux: var(--pfe-theme--color--surface--lightest--text, #333);
+ --pfe-accordion--focus: var(--pfe-theme--color--surface--lightest--link, #06c);
+ --pfe-accordion--BorderLeft: var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);
+ --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);
+ position: relative;
+ display: block;
+ border-bottom: 0;
+}
+
+:host button[aria-expanded="true"]::after {
+ content: "";
+ position: absolute;
+ top: calc((1rem * 0.75) + 0.55em);
+ top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);
+ display: block;
+ border-style: solid;
+ border-style: var(--pfe-theme--surface--border-style, solid);
+ height: 0.4em;
+ width: 0.4em;
+ text-align: center;
+ -webkit-transition: -webkit-transform 0.15s;
+ transition: -webkit-transform 0.15s;
+ transition: transform 0.15s;
+ transition: transform 0.15s, -webkit-transform 0.15s;
+ border-width: 0.1em 0.1em 0 0;
+ border-bottom: 0;
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ right: calc(1rem * 1.5);
+ right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);
+}
+
+:host button[aria-expanded="false"]::after {
+ content: "";
+ position: absolute;
+ top: calc((1rem * 0.75) + 0.55em);
+ top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);
+ display: block;
+ border-style: solid;
+ border-style: var(--pfe-theme--surface--border-style, solid);
+ height: 0.4em;
+ width: 0.4em;
+ text-align: center;
+ -webkit-transition: -webkit-transform 0.15s;
+ transition: -webkit-transform 0.15s;
+ transition: transform 0.15s;
+ transition: transform 0.15s, -webkit-transform 0.15s;
+ border-width: 0 0.1em 0.1em 0;
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ right: calc(1rem * 1.5);
+ right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);
+}
+
+:host(:first-child) button {
+ border-top: 1px solid #ececec;
+ border-top: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);
+}
+
+:host(:last-of-type) button[aria-expanded="false"] {
+ border-bottom: 1px solid #ececec;
+ border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);
+}
+
+:host(.animating) {
+ -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+ transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+ transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+ transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+ -webkit-transition: -webkit-transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));
+ transition: -webkit-transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));
+ transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));
+ transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)), -webkit-transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));
+}
+
+:host([on="dark"]) button {
+ --pfe-accordion--main: transparent;
+ --pfe-accordion--aux: var(--pfe-theme--color--surface--darkest--text, #fff);
+ --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff);
+}
+
+:host([on="dark"]) button[aria-expanded="true"] {
+ --pfe-accordion--main: var(--pfe-theme--color--surface--darker, #464646);
+ --pfe-accordion--aux: var(--pfe-theme--color--surface--darkest--text, #fff);
+ --pfe-accordion--BorderLeft: var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );
+ --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );
+ --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff);
+}
+
+/*# sourceMappingURL=pfe-accordion-header.css.map */
diff --git a/elements/pfe-accordion/pfe-accordion-header.css.map b/elements/pfe-accordion/pfe-accordion-header.css.map
new file mode 100644
index 0000000000..7a0c0440b8
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion-header.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-accordion-header.css","../../pfe-sass/variables/_colors.scss","pfe-accordion-header.scss","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;AC/HA;EC0ME,cAAc;AHzLhB;;AEjBA;EC4MI,SAAS;AHvLb;;AErBA;ECqRI,0CAA2C;EAC3C,qFAAyC;EAEzC,wIAAuD;EACvD,qIAAyD;EACzD,sLAA2D;EAE3D,+FAA+E;EA3E/E,0BAA0B;EAC1B,SAAS;EACT,WAAW;EACX,YAAY;EACZ,oBAAoB;EACpB,gBAAa;EAAb,qDAAa;EACb,gBAAgB;EAChB,eAAe;EACf,UAAU;EACV,kBAAkB;EAElB,2BAA8C;EAA9C,wDAA8C;EAC9C,gBAAa;EAAb,+CAAa;EAEb,gCAAkB;EAClB,4CAAkB;EAClB,6CAAkB;EAClB,+CAAkB;EAClB,iDAAkB;EAClB,aAAa;EAsBT,wCAAgH;EAAhH,oJAAgH;AHzMxH;;AEjDA;ECuOQ,aAAa;EACb,+DAAmB;EACnB,UAAU;AHlLlB;;AEvDA;EC6OQ,aAAa;EACb,UAAU;EACV,0BAA0B;EAC1B,sCAAuB;UAAvB,8BAAuB;EAAvB,wFAAuB;UAAvB,gFAAuB;AHlL/B;;AE9DA;ECoPQ,SAAS;AHlLjB;;AElEA;EC0SI,oFAA2C;EAC3C,0FAAyC;EACzC,0FAA6C;EAC7C,yLAAuD;EACvD,2LAAyD;EArCzD,kBAAkB;EAClB,cAAc;EACd,gBAAgB;AH9LpB;;AE7EA;ECuTE,WAAW;EACX,kBAAkB;EAClB,iCAAuH;EAAvH,qEAAuH;EACvH,cAAc;EACd,mBAAc;EAAd,4DAAc;EACd,aAAQ;EACR,YAAQ;EACR,kBAAkB;EAClB,2CAA2B;EAA3B,mCAA2B;EAA3B,2BAA2B;EAA3B,oDAA2B;EAEzB,6BAA+E;EAC/E,gBAAgB;EAChB,iCAAyB;UAAzB,yBAAyB;EAKvB,uBAAO;EAAP,2DAAO;AH3Ob;;AE7FA;ECuTE,WAAW;EACX,kBAAkB;EAClB,iCAAuH;EAAvH,qEAAuH;EACvH,cAAc;EACd,mBAAc;EAAd,4DAAc;EACd,aAAQ;EACR,YAAQ;EACR,kBAAkB;EAClB,2CAA2B;EAA3B,mCAA2B;EAA3B,2BAA2B;EAA3B,oDAA2B;EAazB,6BAA+E;EAC/E,gCAAwB;UAAxB,wBAAwB;EAKtB,uBAAO;EAAP,2DAAO;AHtOb;;AEvFA;EC+OE,6BAAuH;EAAvH,mKAAuH;AHpJzH;;AEnFA;ECkOE,gCAA0H;EAA1H,sKAA0H;AH3I5H;;AEjFA;EACE,mFAAuD;EAAvD,2EAAuD;EAAvD,mEAAuD;EAAvD,oIAAuD;EAAvD,uHAAuD;EAAvD,+GAAuD;EAAvD,uGAAuD;EAAvD,4MAAuD;AFoFzD;;AE7EA;ECqOI,0CAA2C;EAC3C,oFAAyC;EACzC,yFAA+E;AHpJnF;;AEnFA;ECuPI,gFAA2C;EAC3C,oFAAyC;EACzC,gLAAuD;EACvD,6KAAyD;EAEzD,yFAA+E;AHjKnF","file":"pfe-accordion-header.css","sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n//\n// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: block;\n}\n\n:host > * {\n margin: 0;\n}\n\n:host button {\n --pfe-accordion--main: transparent;\n --pfe-accordion--aux: var(--pfe-theme--color--surface--lightest--text, #333);\n --pfe-accordion--BorderLeft: var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;\n --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n --pfe-accordion--BorderBottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest--link, #06c);\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: var(--pfe-theme--font-weight--bold, 700);\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n font-size: calc(var(--pfe-theme--font-size, 16px) * 1.1);\n line-height: var(--pfe-theme--line-height, 1.5);\n color: var(--pfe-accordion--aux);\n background-color: var(--pfe-accordion--main);\n border-left: var(--pfe-accordion--BorderLeft);\n border-right: var(--pfe-accordion--BorderRight);\n border-bottom: var(--pfe-accordion--BorderBottom);\n border-top: 0;\n padding: var(--pfe-theme--container-spacer, 1rem) 50px var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);\n}\n\n:host button:hover {\n outline: none;\n border-left-color: var(--pfe-accordion--BorderLeftColor--focus);\n z-index: 2;\n}\n\n:host button:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: var(--pfe-theme--color--surface--border--darker, #c6c6c6);\n}\n\n:host button::-moz-focus-inner {\n border: 0;\n}\n\n:host button[aria-expanded=\"true\"] {\n --pfe-accordion--main: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--lightest--text, #333);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--lightest--link, #06c);\n --pfe-accordion--BorderLeft: var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);\n --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n:host button[aria-expanded=\"true\"]::after {\n content: \"\";\n position: absolute;\n top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);\n display: block;\n border-style: var(--pfe-theme--surface--border-style, solid);\n height: 0.4em;\n width: 0.4em;\n text-align: center;\n transition: transform 0.15s;\n border-width: 0.1em 0.1em 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);\n}\n\n:host button[aria-expanded=\"false\"]::after {\n content: \"\";\n position: absolute;\n top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);\n display: block;\n border-style: var(--pfe-theme--surface--border-style, solid);\n height: 0.4em;\n width: 0.4em;\n text-align: center;\n transition: transform 0.15s;\n border-width: 0 0.1em 0.1em 0;\n transform: rotate(45deg);\n right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);\n}\n\n:host(:first-child) button {\n border-top: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n}\n\n:host(:last-of-type) button[aria-expanded=\"false\"] {\n border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n}\n\n:host(.animating) {\n transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n}\n\n:host([on=\"dark\"]) button {\n --pfe-accordion--main: transparent;\n --pfe-accordion--aux: var(--pfe-theme--color--surface--darkest--text, #fff);\n --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff);\n}\n\n:host([on=\"dark\"]) button[aria-expanded=\"true\"] {\n --pfe-accordion--main: var(--pfe-theme--color--surface--darker, #464646);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--darkest--text, #fff);\n --pfe-accordion--BorderLeft: var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );\n --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );\n --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff);\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: accordion;\n\n/// ===========================================================================\n/// DEFAULT ACCORDION HEADING\n/// ===========================================================================\n\n:host {\n @include pfe-accordion-header;\n\n button {\n @include pfe-trigger-color($component-name: accordion);\n @include pfe-trigger-button;\n\n &[aria-expanded=\"true\"] {\n @include pfe-trigger-color-expanded($component-name: accordion);\n @include pfe-trigger-expanded;\n &::after {\n @include pfe-chevron-expanded;\n }\n }\n\n &[aria-expanded=\"false\"]::after {\n @include pfe-chevron-expanded($state: false);\n }\n }\n}\n\n:host(:first-child) {\n button {\n @include pfe-trigger-button-first($theme: light);\n } \n}\n\n\n// Add border bottom to the last button in an accordion set.\n:host(:last-of-type) {\n button[aria-expanded=\"false\"] {\n @include pfe-trigger-button-last;\n } \n}\n\n:host(.animating) {\n transition: transform 0.3s #{pfe-var(animation-timing)};\n}\n\n/// ===========================================================================\n/// CONTEXT STYLES, ON=DARK\n/// ===========================================================================\n\n:host([on=\"dark\"]) {\n button {\n @include pfe-trigger-color($theme: dark, $component-name: accordion);\n\n &[aria-expanded=\"true\"] {\n @include pfe-trigger-color-expanded($theme: dark, $component-name: accordion);\n }\n }\n}\n","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *, *::before, *::after {\n box-sizing: $boxSize;\n }\n}\n\n@mixin pfe-clearfix {\n &::after {\n clear: both;\n content: \"\";\n display: table;\n }\n}\n\n@mixin pfe-reset-list() {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n@mixin pfe-reset-box() {\n margin: 0;\n padding: 0;\n}\n\n@mixin pfe-sr-only() {\n position: absolute;\n overflow: hidden;\n clip: rect(0,0,0,0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n\n/// ===========================================================================\n/// Theme Color Vars - use with on=\"dark\" to affect light DOM\n/// ===========================================================================\n\n@mixin pfe-theme($theme) {\n // GENERAL CONTEXT-BASED UPDATES, ON=\"DARK\"\n @if $theme == dark {\n --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};\n }\n @else if $theme == light {\n --pfe-broadcasted--color--text: #{pfe-color(text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};\n }\n // MORE SPECIFIC COLOR BASED UPDATES, COLOR=\"DARKER\"\n @else if $theme == darker {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n }\n @else if $theme == darkest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n }\n @else if $theme == accent {\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n }\n @else if $theme == complement {\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n }\n\n @else if $theme == lighter {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n }\n @else if $theme == lightest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\n }\n}\n\n@mixin pfe-transition($properties...) {\n $return: null;\n @each $property in $properties {\n @if length($property) == 1 {\n $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma);\n }\n @else if length($property) == 2 {\n $return: append($return, nth($property, 1) nth($property, 2), comma);\n }\n }\n transition: $return;\n}\n\n// Make a CSS arrow\n@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) {\n $direction: (\n up: 180deg,\n down: 0deg,\n right: -90deg,\n left: 90deg,\n );\n border-style: #{pfe-var(surface--border-style)};\n border-width: $width $height 0;\n border-color: transparent;\n border-top-color: $color;\n transform: rotate(map-get($direction, $type));\n @if $pseudo {\n display: inline-block;\n content: \"\";\n @content;\n }\n}\n\n@mixin pfe-arrow-color($color) {\n border-top-color: $color;\n}\n\n@mixin pfe-print-media {\n @media print {\n @content;\n }\n}\n\n@mixin pfe-print-background {\n -webkit-print-color-adjust: exact;\n color-adjust: exact;\n}\n// scss-lint:disable ImportantRule\n@mixin pfe-no-print-background {\n @include pfe-print-media {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n// scss-lint:enable ImportantRule\n\n@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) {\n border: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-#{$position}-color: $color;\n @if $position == right {\n padding-left: $padding;\n margin-right: $margin;\n }\n @else if $position == left {\n padding-right: $padding;\n margin-left: $margin;\n }\n}\n\n@mixin pfe-retina {\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n @content;\n }\n}\n\n// Mixin for building slot selectors\n@mixin pfe-slot($slot-name, $selector: \"\") {\n // This logic makes it much easier to style default slots in a loop\n // with named slots\n @if $slot-name != default {\n ::slotted([slot=\"#{$slot-name}\"]#{$selector}) {\n @content;\n }\n }\n @else {\n ::slotted(*) {\n @content;\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion Specific SASS Vars\n/// ===========================================================================\n\n$pfe-expand_button--LineHeight: 1.5;\n$pfe-expand_button--padding: #{pfe-var(container-spacer)};\n$pfe-expand_button--padding--factor: .75;\n$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);\n\n$pfe-expand_chevron--size: .4em;\n$pfe-expand_chevron--weight: .1em;\n$pfe-expand_chevron--padding: 3em;\n$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};\n\n@mixin pfe-accordion-header {\n display: block;\n > * {\n margin: 0;\n }\n}\n\n@mixin pfe-trigger-button($align: left) {\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: #{pfe-var(font-weight--bold)};\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n\n font-size: calc(#{pfe-var(font-size)} * 1.1);\n line-height: #{pfe-var(line-height)};\n\n color: #{pfe-local(aux)};\n background-color: #{pfe-local(main)};\n border-left: #{pfe-local(BorderLeft)};\n border-right: #{pfe-local(BorderRight)};\n border-bottom: #{pfe-local(BorderBottom)};\n border-top: 0;\n\n &:hover {\n outline: none;\n border-left-color: #{pfe-local(BorderLeftColor--focus)};\n z-index: 2;\n }\n\n &:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: #{pfe-color(surface--border--darker)};\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n @if $align == right {\n padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;\n } @else {\n padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n}\n\n@mixin pfe-trigger-button-last($theme: light) {\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-button-first($theme: light) {\n border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-expanded {\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n@mixin pfe-trigger-color($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};\n }\n}\n\n@mixin pfe-trigger-color-expanded($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: #{pfe-color(surface--darker)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron-expanded($state: true, $position: after) {\n content: \"\";\n position: absolute;\n top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );\n display: block;\n border-style: #{pfe-var(surface--border-style)};\n height: #{$pfe-expand_chevron--size};\n width: #{$pfe-expand_chevron--size};\n text-align: center;\n transition: transform 0.15s;\n @if $state {\n border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n @else {\n border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;\n transform: rotate(45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion panel\n/// ===========================================================================\n\n@mixin pfe-container {\n position: relative;\n display: block;\n width: 100%;\n\n padding: calc(#{pfe-local(padding--vertical)} / 2) #{pfe-local(padding--horizontal)};\n\n @media (min-width: #{pfe-breakpoint(sm)}) {\n padding: #{pfe-local(Padding)};\n }\n}\n\n@mixin pfe-accordion-panel {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n@mixin pfe-accordion-panel-expanded {\n display: block;\n position: relative;\n}\n\n@mixin pfe-accordion-panel-expanded-style($theme: light) {\n border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;\n @if $theme == dark {\n box-shadow: none;\n background-color: #{pfe-color(surface--darker)};\n border-left-color: #{pfe-color(surface--darkest--text)};\n border-right-color: #{pfe-color(surface--darkest--text)};\n }\n @else {\n box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);\n border-left-color: #{pfe-color(surface--lightest--link)};\n background-color: #{pfe-color(surface--lightest)};\n border-right-color: #{pfe-color(surface--border--lightest)};\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n@mixin pfe-accordion-panel-container-inset($align: left) {\n box-sizing: border-box;\n width: 100%;\n\n @if $align == left {\n padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n @else {\n padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};\n }\n}\n"]}
\ No newline at end of file
diff --git a/elements/pfe-accordion/pfe-accordion-header.css.min.map b/elements/pfe-accordion/pfe-accordion-header.css.min.map
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/pfe-accordion/pfe-accordion-header.min.css b/elements/pfe-accordion/pfe-accordion-header.min.css
new file mode 100644
index 0000000000..4fb08bcd08
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion-header.min.css
@@ -0,0 +1 @@
+:host{display:block}:host>*{margin:0}:host button{--pfe-accordion--main:transparent;--pfe-accordion--aux:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-accordion--BorderBottom:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest--link, #06c);-webkit-appearance:button;margin:0;width:100%;height:auto;font-family:inherit;font-weight:700;font-weight:var(--pfe-theme--font-weight--bold,700);text-align:left;cursor:pointer;z-index:1;position:relative;font-size:calc(16px * 1.1);font-size:calc(var(--pfe-theme--font-size,16px) * 1.1);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);color:var(--pfe-accordion--aux);background-color:var(--pfe-accordion--main);border-left:var(--pfe-accordion--BorderLeft);border-right:var(--pfe-accordion--BorderRight);border-bottom:var(--pfe-accordion--BorderBottom);border-top:0;padding:1rem 50px 1rem calc(1rem * 1.5);padding:var(--pfe-theme--container-spacer,1rem) 50px var(--pfe-theme--container-spacer,1rem) calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host button:hover{outline:0;border-left-color:var(--pfe-accordion--BorderLeftColor--focus);z-index:2}:host button:focus{outline:0;z-index:2;text-decoration:underline;-webkit-text-decoration-color:#c6c6c6;text-decoration-color:#c6c6c6;-webkit-text-decoration-color:var(--pfe-theme--color--surface--border--darker,#c6c6c6);text-decoration-color:var(--pfe-theme--color--surface--border--darker,#c6c6c6)}:host button::-moz-focus-inner{border:0}:host button[aria-expanded=true]{--pfe-accordion--main:var(--pfe-theme--color--surface--lightest, #fff);--pfe-accordion--aux:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-accordion--focus:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);position:relative;display:block;border-bottom:0}:host button[aria-expanded=true]::after{content:"";position:absolute;top:calc((1rem * .75) + .55em);top:calc((var(--pfe-theme--container-spacer,1rem) * .75) + .55em);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:.4em;width:.4em;text-align:center;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:.1em .1em 0 0;border-bottom:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:calc(1rem * 1.5);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host button[aria-expanded=false]::after{content:"";position:absolute;top:calc((1rem * .75) + .55em);top:calc((var(--pfe-theme--container-spacer,1rem) * .75) + .55em);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:.4em;width:.4em;text-align:center;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:0 .1em .1em 0;-webkit-transform:rotate(45deg);transform:rotate(45deg);right:calc(1rem * 1.5);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host(:first-child) button{border-top:1px solid #ececec;border-top:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host(:last-of-type) button[aria-expanded=false]{border-bottom:1px solid #ececec;border-bottom:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host(.animating){-webkit-transition:-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);transition:-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);transition:transform .3s cubic-bezier(.465,.183,.153,.946);transition:transform .3s cubic-bezier(.465,.183,.153,.946),-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);-webkit-transition:-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946)),-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946))}:host([on=dark]) button{--pfe-accordion--main:transparent;--pfe-accordion--aux:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest, #fff)}:host([on=dark]) button[aria-expanded=true]{--pfe-accordion--main:var(--pfe-theme--color--surface--darker, #464646);--pfe-accordion--aux:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest, #fff)}
\ No newline at end of file
diff --git a/elements/pfe-accordion/pfe-accordion-panel.css b/elements/pfe-accordion/pfe-accordion-panel.css
new file mode 100644
index 0000000000..589f3ad7f5
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion-panel.css
@@ -0,0 +1,90 @@
+/*
+ * Copyright 2018 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.
+ */
+/* Palette of Border Colors */
+/* Palette of Feedback Colors */
+:host {
+ display: none;
+ overflow: hidden;
+ will-change: height;
+ border-color: transparent;
+}
+
+:host([expanded]) {
+ display: block;
+ position: relative;
+ border-right: 1px solid transparent;
+ border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;
+ border-left: 3px solid transparent;
+ border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;
+ -webkit-box-shadow: 0 5px 3px rgba(140, 140, 140, 0.35);
+ box-shadow: 0 5px 3px rgba(140, 140, 140, 0.35);
+ -webkit-box-shadow: 0 5px var(--pfe-theme--surface--border-width--heavy, 3px) rgba(140, 140, 140, 0.35);
+ box-shadow: 0 5px var(--pfe-theme--surface--border-width--heavy, 3px) rgba(140, 140, 140, 0.35);
+ border-left-color: #06c;
+ border-left-color: var(--pfe-theme--color--surface--lightest--link, #06c);
+ background-color: #fff;
+ background-color: var(--pfe-theme--color--surface--lightest, #fff);
+ border-right-color: #ececec;
+ border-right-color: var(--pfe-theme--color--surface--border--lightest, #ececec);
+ border-bottom: 1px solid #ececec;
+ border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);
+}
+
+:host([on="dark"][expanded]) {
+ --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff);
+ --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, #99ccff);
+ --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);
+ --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);
+ border-right: 1px solid transparent;
+ border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;
+ border-left: 3px solid transparent;
+ border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ background-color: #464646;
+ background-color: var(--pfe-theme--color--surface--darker, #464646);
+ border-left-color: #fff;
+ border-left-color: var(--pfe-theme--color--surface--darkest--text, #fff);
+ border-right-color: #fff;
+ border-right-color: var(--pfe-theme--color--surface--darkest--text, #fff);
+}
+
+:host(.animating) {
+ display: block;
+ -webkit-transition: height 0.3s ease-in-out;
+ transition: height 0.3s ease-in-out;
+}
+
+.container {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+ padding: 0 3em 1rem calc(1rem * 1.5);
+ padding: 0 3em var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);
+}
+
+:host(:last-of-type[expanded]) {
+ margin-bottom: 0;
+}
+
+/*# sourceMappingURL=pfe-accordion-panel.css.map */
diff --git a/elements/pfe-accordion/pfe-accordion-panel.css.map b/elements/pfe-accordion/pfe-accordion-panel.css.map
new file mode 100644
index 0000000000..6feda457dd
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion-panel.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-accordion-panel.css","../../pfe-sass/variables/_colors.scss","pfe-accordion-panel.scss","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;AC/HA;ECwWE,aAAa;EACb,gBAAgB;EAChB,mBAAmB;EACnB,yBAAyB;AHvV3B;;AEhBA;EC2WE,cAAc;EACd,kBAAkB;EAIlB,mCAA6F;EAA7F,qHAA6F;EAC7F,kCAAmG;EAAnG,2HAAmG;EAQjG,uDAAoF;UAApF,+CAAoF;EAApF,uGAAoF;UAApF,+FAAoF;EACpF,uBAAmB;EAAnB,yEAAmB;EACnB,sBAAkB;EAAlB,kEAAkB;EAClB,2BAAoB;EAApB,+EAAoB;EACpB,gCAA0H;EAA1H,sKAA0H;AHjW9H;;AEvBA;EC2BI,0FAA+B;EAC/B,gGAAkC;EAClC,yGAA2C;EAC3C,uGAAyC;EACzC,uGAAyC;EA4U3C,mCAA6F;EAA7F,qHAA6F;EAC7F,kCAAmG;EAAnG,2HAAmG;EAEjG,wBAAgB;UAAhB,gBAAgB;EAChB,yBAAkB;EAAlB,mEAAkB;EAClB,uBAAmB;EAAnB,wEAAmB;EACnB,wBAAoB;EAApB,yEAAoB;AH5UxB;;AEhCA;EACE,cAAc;EACd,2CAAmC;EAAnC,mCAAmC;AFmCrC;;AEhCA;ECmXE,8BAAsB;UAAtB,sBAAsB;EACtB,WAAW;EAGT,oCAA8G;EAA9G,4GAA8G;AHjVlH;;AElCA;EACE,gBAAgB;AFqClB","file":"pfe-accordion-panel.css","sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n//\n// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n:host([expanded]) {\n display: block;\n position: relative;\n border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;\n box-shadow: 0 5px var(--pfe-theme--surface--border-width--heavy, 3px) rgba(140, 140, 140, 0.35);\n border-left-color: var(--pfe-theme--color--surface--lightest--link, #06c);\n background-color: var(--pfe-theme--color--surface--lightest, #fff);\n border-right-color: var(--pfe-theme--color--surface--border--lightest, #ececec);\n border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n}\n\n:host([on=\"dark\"][expanded]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);\n border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;\n box-shadow: none;\n background-color: var(--pfe-theme--color--surface--darker, #464646);\n border-left-color: var(--pfe-theme--color--surface--darkest--text, #fff);\n border-right-color: var(--pfe-theme--color--surface--darkest--text, #fff);\n}\n\n:host(.animating) {\n display: block;\n transition: height 0.3s ease-in-out;\n}\n\n.container {\n box-sizing: border-box;\n width: 100%;\n padding: 0 3em var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);\n}\n\n:host(:last-of-type[expanded]) {\n margin-bottom: 0;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: accordion;\n\n/// ===========================================================================\n/// DEFAULT ACCORDION PANEL\n/// ===========================================================================\n\n:host {\n @include pfe-accordion-panel;\n}\n\n:host([expanded]) {\n @include pfe-accordion-panel-expanded;\n @include pfe-accordion-panel-expanded-style;\n}\n \n:host([on=\"dark\"][expanded]) {\n @include pfe-theme($theme: \"dark\");\n @include pfe-accordion-panel-expanded-style($theme: dark);\n}\n\n:host(.animating) {\n display: block;\n transition: height 0.3s ease-in-out;\n}\n\n.container {\n @include pfe-accordion-panel-container-inset($align: left);\n}\n\n:host(:last-of-type[expanded]) {\n margin-bottom: 0;\n}\n\n","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *, *::before, *::after {\n box-sizing: $boxSize;\n }\n}\n\n@mixin pfe-clearfix {\n &::after {\n clear: both;\n content: \"\";\n display: table;\n }\n}\n\n@mixin pfe-reset-list() {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n@mixin pfe-reset-box() {\n margin: 0;\n padding: 0;\n}\n\n@mixin pfe-sr-only() {\n position: absolute;\n overflow: hidden;\n clip: rect(0,0,0,0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n\n/// ===========================================================================\n/// Theme Color Vars - use with on=\"dark\" to affect light DOM\n/// ===========================================================================\n\n@mixin pfe-theme($theme) {\n // GENERAL CONTEXT-BASED UPDATES, ON=\"DARK\"\n @if $theme == dark {\n --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};\n }\n @else if $theme == light {\n --pfe-broadcasted--color--text: #{pfe-color(text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};\n }\n // MORE SPECIFIC COLOR BASED UPDATES, COLOR=\"DARKER\"\n @else if $theme == darker {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n }\n @else if $theme == darkest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n }\n @else if $theme == accent {\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n }\n @else if $theme == complement {\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n }\n\n @else if $theme == lighter {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n }\n @else if $theme == lightest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\n }\n}\n\n@mixin pfe-transition($properties...) {\n $return: null;\n @each $property in $properties {\n @if length($property) == 1 {\n $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma);\n }\n @else if length($property) == 2 {\n $return: append($return, nth($property, 1) nth($property, 2), comma);\n }\n }\n transition: $return;\n}\n\n// Make a CSS arrow\n@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) {\n $direction: (\n up: 180deg,\n down: 0deg,\n right: -90deg,\n left: 90deg,\n );\n border-style: #{pfe-var(surface--border-style)};\n border-width: $width $height 0;\n border-color: transparent;\n border-top-color: $color;\n transform: rotate(map-get($direction, $type));\n @if $pseudo {\n display: inline-block;\n content: \"\";\n @content;\n }\n}\n\n@mixin pfe-arrow-color($color) {\n border-top-color: $color;\n}\n\n@mixin pfe-print-media {\n @media print {\n @content;\n }\n}\n\n@mixin pfe-print-background {\n -webkit-print-color-adjust: exact;\n color-adjust: exact;\n}\n// scss-lint:disable ImportantRule\n@mixin pfe-no-print-background {\n @include pfe-print-media {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n// scss-lint:enable ImportantRule\n\n@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) {\n border: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-#{$position}-color: $color;\n @if $position == right {\n padding-left: $padding;\n margin-right: $margin;\n }\n @else if $position == left {\n padding-right: $padding;\n margin-left: $margin;\n }\n}\n\n@mixin pfe-retina {\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n @content;\n }\n}\n\n// Mixin for building slot selectors\n@mixin pfe-slot($slot-name, $selector: \"\") {\n // This logic makes it much easier to style default slots in a loop\n // with named slots\n @if $slot-name != default {\n ::slotted([slot=\"#{$slot-name}\"]#{$selector}) {\n @content;\n }\n }\n @else {\n ::slotted(*) {\n @content;\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion Specific SASS Vars\n/// ===========================================================================\n\n$pfe-expand_button--LineHeight: 1.5;\n$pfe-expand_button--padding: #{pfe-var(container-spacer)};\n$pfe-expand_button--padding--factor: .75;\n$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);\n\n$pfe-expand_chevron--size: .4em;\n$pfe-expand_chevron--weight: .1em;\n$pfe-expand_chevron--padding: 3em;\n$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};\n\n@mixin pfe-accordion-header {\n display: block;\n > * {\n margin: 0;\n }\n}\n\n@mixin pfe-trigger-button($align: left) {\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: #{pfe-var(font-weight--bold)};\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n\n font-size: calc(#{pfe-var(font-size)} * 1.1);\n line-height: #{pfe-var(line-height)};\n\n color: #{pfe-local(aux)};\n background-color: #{pfe-local(main)};\n border-left: #{pfe-local(BorderLeft)};\n border-right: #{pfe-local(BorderRight)};\n border-bottom: #{pfe-local(BorderBottom)};\n border-top: 0;\n\n &:hover {\n outline: none;\n border-left-color: #{pfe-local(BorderLeftColor--focus)};\n z-index: 2;\n }\n\n &:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: #{pfe-color(surface--border--darker)};\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n @if $align == right {\n padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;\n } @else {\n padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n}\n\n@mixin pfe-trigger-button-last($theme: light) {\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-button-first($theme: light) {\n border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-expanded {\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n@mixin pfe-trigger-color($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};\n }\n}\n\n@mixin pfe-trigger-color-expanded($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: #{pfe-color(surface--darker)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron-expanded($state: true, $position: after) {\n content: \"\";\n position: absolute;\n top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );\n display: block;\n border-style: #{pfe-var(surface--border-style)};\n height: #{$pfe-expand_chevron--size};\n width: #{$pfe-expand_chevron--size};\n text-align: center;\n transition: transform 0.15s;\n @if $state {\n border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n @else {\n border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;\n transform: rotate(45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion panel\n/// ===========================================================================\n\n@mixin pfe-container {\n position: relative;\n display: block;\n width: 100%;\n\n padding: calc(#{pfe-local(padding--vertical)} / 2) #{pfe-local(padding--horizontal)};\n\n @media (min-width: #{pfe-breakpoint(sm)}) {\n padding: #{pfe-local(Padding)};\n }\n}\n\n@mixin pfe-accordion-panel {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n@mixin pfe-accordion-panel-expanded {\n display: block;\n position: relative;\n}\n\n@mixin pfe-accordion-panel-expanded-style($theme: light) {\n border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;\n @if $theme == dark {\n box-shadow: none;\n background-color: #{pfe-color(surface--darker)};\n border-left-color: #{pfe-color(surface--darkest--text)};\n border-right-color: #{pfe-color(surface--darkest--text)};\n }\n @else {\n box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);\n border-left-color: #{pfe-color(surface--lightest--link)};\n background-color: #{pfe-color(surface--lightest)};\n border-right-color: #{pfe-color(surface--border--lightest)};\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n@mixin pfe-accordion-panel-container-inset($align: left) {\n box-sizing: border-box;\n width: 100%;\n\n @if $align == left {\n padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n @else {\n padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};\n }\n}\n"]}
\ No newline at end of file
diff --git a/elements/pfe-accordion/pfe-accordion-panel.css.min.map b/elements/pfe-accordion/pfe-accordion-panel.css.min.map
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/pfe-accordion/pfe-accordion-panel.min.css b/elements/pfe-accordion/pfe-accordion-panel.min.css
new file mode 100644
index 0000000000..c5753d2491
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion-panel.min.css
@@ -0,0 +1 @@
+:host{display:none;overflow:hidden;will-change:height;border-color:transparent}:host([expanded]){display:block;position:relative;border-right:1px solid transparent;border-right:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-left:3px solid transparent;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) transparent;-webkit-box-shadow:0 5px 3px rgba(140,140,140,.35);box-shadow:0 5px 3px rgba(140,140,140,.35);-webkit-box-shadow:0 5px var(--pfe-theme--surface--border-width--heavy,3px) rgba(140,140,140,.35);box-shadow:0 5px var(--pfe-theme--surface--border-width--heavy,3px) rgba(140,140,140,.35);border-left-color:#06c;border-left-color:var(--pfe-theme--color--surface--lightest--link,#06c);background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff);border-right-color:#ececec;border-right-color:var(--pfe-theme--color--surface--border--lightest,#ececec);border-bottom:1px solid #ececec;border-bottom:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host([on=dark][expanded]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);border-right:1px solid transparent;border-right:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-left:3px solid transparent;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) transparent;-webkit-box-shadow:none;box-shadow:none;background-color:#464646;background-color:var(--pfe-theme--color--surface--darker,#464646);border-left-color:#fff;border-left-color:var(--pfe-theme--color--surface--darkest--text,#fff);border-right-color:#fff;border-right-color:var(--pfe-theme--color--surface--darkest--text,#fff)}:host(.animating){display:block;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out}.container{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 3em 1rem calc(1rem * 1.5);padding:0 3em var(--pfe-theme--container-spacer,1rem) calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host(:last-of-type[expanded]){margin-bottom:0}
\ No newline at end of file
diff --git a/elements/pfe-accordion/pfe-accordion.css b/elements/pfe-accordion/pfe-accordion.css
new file mode 100644
index 0000000000..2700293816
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion.css
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2018 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.
+ */
+/* Palette of Border Colors */
+/* Palette of Feedback Colors */
+:host {
+ display: block;
+ position: relative;
+ overflow: hidden;
+ margin: 0;
+ color: var(--pfe-broadcasted--color--text);
+}
+
+:host([on="dark"]) {
+ --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff);
+ --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, #99ccff);
+ --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);
+ --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);
+}
+
+:host([on="light"]) {
+ --pfe-broadcasted--color--text: var(--pfe-theme--color--text, #333);
+ --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link, #06c);
+ --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--visited, rebeccapurple);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--hover, #003366);
+ --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--focus, #003366);
+}
+
+/*# sourceMappingURL=pfe-accordion.css.map */
diff --git a/elements/pfe-accordion/pfe-accordion.css.map b/elements/pfe-accordion/pfe-accordion.css.map
new file mode 100644
index 0000000000..e76cd72e4d
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-accordion.css","../../pfe-sass/variables/_colors.scss","pfe-accordion.scss","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACnIA;EACE,cAAc;EACd,kBAAkB;EAClB,gBAAgB;EAChB,SAAS;EACT,0CAAO;AFoBT;;AEjBA;ECgCI,0FAA+B;EAC/B,gGAAkC;EAClC,yGAA2C;EAC3C,uGAAyC;EACzC,uGAAyC;AHX7C;;AErBA;ECmCI,iFAA+B;EAC/B,oFAAkC;EAClC,sGAA2C;EAC3C,8FAAyC;EACzC,8FAAyC;AHV7C","file":"pfe-accordion.css","sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n//\n// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: block;\n position: relative;\n overflow: hidden;\n margin: 0;\n color: var(--pfe-broadcasted--color--text);\n}\n\n:host([on=\"dark\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);\n}\n\n:host([on=\"light\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--focus, #003366);\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: accordion;\n\n:host {\n display: block;\n position: relative;\n overflow: hidden;\n margin: 0;\n color: #{pfe-radio(color--text)};\n}\n\n:host([on=\"dark\"]) {\n @include pfe-theme($theme: \"dark\");\n}\n\n:host([on=\"light\"]) {\n @include pfe-theme($theme: \"light\");\n}\n\n","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *, *::before, *::after {\n box-sizing: $boxSize;\n }\n}\n\n@mixin pfe-clearfix {\n &::after {\n clear: both;\n content: \"\";\n display: table;\n }\n}\n\n@mixin pfe-reset-list() {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n@mixin pfe-reset-box() {\n margin: 0;\n padding: 0;\n}\n\n@mixin pfe-sr-only() {\n position: absolute;\n overflow: hidden;\n clip: rect(0,0,0,0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n\n/// ===========================================================================\n/// Theme Color Vars - use with on=\"dark\" to affect light DOM\n/// ===========================================================================\n\n@mixin pfe-theme($theme) {\n // GENERAL CONTEXT-BASED UPDATES, ON=\"DARK\"\n @if $theme == dark {\n --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};\n }\n @else if $theme == light {\n --pfe-broadcasted--color--text: #{pfe-color(text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};\n }\n // MORE SPECIFIC COLOR BASED UPDATES, COLOR=\"DARKER\"\n @else if $theme == darker {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n }\n @else if $theme == darkest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n }\n @else if $theme == accent {\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n }\n @else if $theme == complement {\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n }\n\n @else if $theme == lighter {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n }\n @else if $theme == lightest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\n }\n}\n\n@mixin pfe-transition($properties...) {\n $return: null;\n @each $property in $properties {\n @if length($property) == 1 {\n $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma);\n }\n @else if length($property) == 2 {\n $return: append($return, nth($property, 1) nth($property, 2), comma);\n }\n }\n transition: $return;\n}\n\n// Make a CSS arrow\n@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) {\n $direction: (\n up: 180deg,\n down: 0deg,\n right: -90deg,\n left: 90deg,\n );\n border-style: #{pfe-var(surface--border-style)};\n border-width: $width $height 0;\n border-color: transparent;\n border-top-color: $color;\n transform: rotate(map-get($direction, $type));\n @if $pseudo {\n display: inline-block;\n content: \"\";\n @content;\n }\n}\n\n@mixin pfe-arrow-color($color) {\n border-top-color: $color;\n}\n\n@mixin pfe-print-media {\n @media print {\n @content;\n }\n}\n\n@mixin pfe-print-background {\n -webkit-print-color-adjust: exact;\n color-adjust: exact;\n}\n// scss-lint:disable ImportantRule\n@mixin pfe-no-print-background {\n @include pfe-print-media {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n// scss-lint:enable ImportantRule\n\n@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) {\n border: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-#{$position}-color: $color;\n @if $position == right {\n padding-left: $padding;\n margin-right: $margin;\n }\n @else if $position == left {\n padding-right: $padding;\n margin-left: $margin;\n }\n}\n\n@mixin pfe-retina {\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n @content;\n }\n}\n\n// Mixin for building slot selectors\n@mixin pfe-slot($slot-name, $selector: \"\") {\n // This logic makes it much easier to style default slots in a loop\n // with named slots\n @if $slot-name != default {\n ::slotted([slot=\"#{$slot-name}\"]#{$selector}) {\n @content;\n }\n }\n @else {\n ::slotted(*) {\n @content;\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion Specific SASS Vars\n/// ===========================================================================\n\n$pfe-expand_button--LineHeight: 1.5;\n$pfe-expand_button--padding: #{pfe-var(container-spacer)};\n$pfe-expand_button--padding--factor: .75;\n$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);\n\n$pfe-expand_chevron--size: .4em;\n$pfe-expand_chevron--weight: .1em;\n$pfe-expand_chevron--padding: 3em;\n$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};\n\n@mixin pfe-accordion-header {\n display: block;\n > * {\n margin: 0;\n }\n}\n\n@mixin pfe-trigger-button($align: left) {\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: #{pfe-var(font-weight--bold)};\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n\n font-size: calc(#{pfe-var(font-size)} * 1.1);\n line-height: #{pfe-var(line-height)};\n\n color: #{pfe-local(aux)};\n background-color: #{pfe-local(main)};\n border-left: #{pfe-local(BorderLeft)};\n border-right: #{pfe-local(BorderRight)};\n border-bottom: #{pfe-local(BorderBottom)};\n border-top: 0;\n\n &:hover {\n outline: none;\n border-left-color: #{pfe-local(BorderLeftColor--focus)};\n z-index: 2;\n }\n\n &:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: #{pfe-color(surface--border--darker)};\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n @if $align == right {\n padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;\n } @else {\n padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n}\n\n@mixin pfe-trigger-button-last($theme: light) {\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-button-first($theme: light) {\n border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-expanded {\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n@mixin pfe-trigger-color($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};\n }\n}\n\n@mixin pfe-trigger-color-expanded($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: #{pfe-color(surface--darker)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron-expanded($state: true, $position: after) {\n content: \"\";\n position: absolute;\n top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );\n display: block;\n border-style: #{pfe-var(surface--border-style)};\n height: #{$pfe-expand_chevron--size};\n width: #{$pfe-expand_chevron--size};\n text-align: center;\n transition: transform 0.15s;\n @if $state {\n border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n @else {\n border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;\n transform: rotate(45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion panel\n/// ===========================================================================\n\n@mixin pfe-container {\n position: relative;\n display: block;\n width: 100%;\n\n padding: calc(#{pfe-local(padding--vertical)} / 2) #{pfe-local(padding--horizontal)};\n\n @media (min-width: #{pfe-breakpoint(sm)}) {\n padding: #{pfe-local(Padding)};\n }\n}\n\n@mixin pfe-accordion-panel {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n@mixin pfe-accordion-panel-expanded {\n display: block;\n position: relative;\n}\n\n@mixin pfe-accordion-panel-expanded-style($theme: light) {\n border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;\n @if $theme == dark {\n box-shadow: none;\n background-color: #{pfe-color(surface--darker)};\n border-left-color: #{pfe-color(surface--darkest--text)};\n border-right-color: #{pfe-color(surface--darkest--text)};\n }\n @else {\n box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);\n border-left-color: #{pfe-color(surface--lightest--link)};\n background-color: #{pfe-color(surface--lightest)};\n border-right-color: #{pfe-color(surface--border--lightest)};\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n@mixin pfe-accordion-panel-container-inset($align: left) {\n box-sizing: border-box;\n width: 100%;\n\n @if $align == left {\n padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n @else {\n padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};\n }\n}\n"]}
\ No newline at end of file
diff --git a/elements/pfe-accordion/pfe-accordion.css.min.map b/elements/pfe-accordion/pfe-accordion.css.min.map
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/pfe-accordion/pfe-accordion.js b/elements/pfe-accordion/pfe-accordion.js
new file mode 100644
index 0000000000..df718db95f
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion.js
@@ -0,0 +1,560 @@
+import PFElement from '../pfelement/pfelement.js';
+
+/*
+ * @license
+ * 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.
+ *
+*/
+
+// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
+if (!Array.prototype.findIndex) {
+ Object.defineProperty(Array.prototype, "findIndex", {
+ value: function(predicate) {
+ // 1. Let O be ? ToObject(this value).
+ if (this == null) {
+ throw new TypeError('"this" is null or not defined');
+ }
+
+ var o = Object(this);
+
+ // 2. Let len be ? ToLength(? Get(O, "length")).
+ var len = o.length >>> 0;
+
+ // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+ if (typeof predicate !== "function") {
+ throw new TypeError("predicate must be a function");
+ }
+
+ // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+ var thisArg = arguments[1];
+
+ // 5. Let k be 0.
+ var k = 0;
+
+ // 6. Repeat, while k < len
+ while (k < len) {
+ // a. Let Pk be ! ToString(k).
+ // b. Let kValue be ? Get(O, Pk).
+ // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+ // d. If testResult is true, return k.
+ var kValue = o[k];
+ if (predicate.call(thisArg, kValue, k, o)) {
+ return k;
+ }
+ // e. Increase k by 1.
+ k++;
+ }
+
+ // 7. Return -1.
+ return -1;
+ }
+ });
+}
+
+function generateId() {
+ return Math.random()
+ .toString(36)
+ .substr(2, 9);
+}
+
+class PfeAccordion extends PFElement {
+
+ get html() {
+ return ``;
+ }
+ static get tag() {
+ return "pfe-accordion";
+ }
+
+ get styleUrl() {
+ return "pfe-accordion.scss";
+ }
+
+ get templateUrl() {
+ return "pfe-accordion.html";
+ }
+
+ static get observedAttributes() {
+ return ["theme", "color", "on"];
+ }
+
+ static get cascadingAttributes() {
+ return {
+ color: "pfe-accordion-header, pfe-accordion-panel",
+ on: "pfe-accordion-header, pfe-accordion-panel"
+ };
+ }
+
+ constructor() {
+ super(PfeAccordion);
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ this.setAttribute("role", "presentation");
+ this.setAttribute("defined", "");
+
+ this.addEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);
+ this.addEventListener("keydown", this._keydownHandler);
+
+ Promise.all([
+ customElements.whenDefined(PfeAccordionHeader.tag),
+ customElements.whenDefined(PfeAccordionPanel.tag)
+ ]).then(this._linkPanels());
+ }
+
+ disconnectedCallback() {
+ this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);
+ this.removeEventListener("keydown", this._keydownHandler);
+ }
+
+ attributeChangedCallback(attr, oldVal, newVal) {
+ super.attributeChangedCallback(attr, oldVal, newVal);
+
+ if (attr === "color") {
+ const headers = this.querySelectorAll(PfeAccordionHeader.tag);
+
+ if (newVal === "striped") {
+ [...headers].forEach((header, index) => {
+ const headerClass = index % 2 ? "even" : "odd";
+ header.classList.add(headerClass);
+ });
+ } else {
+ [...headers].forEach((header, index) => {
+ header.classList.remove("even", "odd");
+ });
+ }
+ }
+ }
+
+ toggle(index) {
+ const headers = this._allHeaders();
+ const panels = this._allPanels();
+ const header = headers[index];
+ const panel = panels[index];
+
+ if (!header || !panel) {
+ return;
+ }
+
+ if (!header.expanded) {
+ this._expandHeader(header);
+ this._expandPanel(panel);
+ } else {
+ this._collapseHeader(header);
+ this._collapsePanel(panel);
+ }
+ }
+
+ expand(index) {
+ const headers = this._allHeaders();
+ const panels = this._allPanels();
+ const header = headers[index];
+ const panel = panels[index];
+
+ if (!header || !panel) {
+ return;
+ }
+
+ this._expandHeader(header);
+ this._expandPanel(panel);
+ }
+
+ expandAll() {
+ const headers = this._allHeaders();
+ const panels = this._allPanels();
+
+ headers.forEach(header => this._expandHeader(header));
+ panels.forEach(panel => this._expandPanel(panel));
+ }
+
+ collapse(index) {
+ const headers = this._allHeaders();
+ const panels = this._allPanels();
+ const header = headers[index];
+ const panel = panels[index];
+
+ if (!header || !panel) {
+ return;
+ }
+
+ this._collapseHeader(header);
+ this._collapsePanel(panel);
+ }
+
+ collapseAll() {
+ const headers = this._allHeaders();
+ const panels = this._allPanels();
+
+ headers.forEach(header => this._collapseHeader(header));
+ panels.forEach(panel => this._collapsePanel(panel));
+ }
+
+ _linkPanels() {
+ const headers = this._allHeaders();
+ headers.forEach(header => {
+ const panel = this._panelForHeader(header);
+
+ header.setAttribute("aria-controls", panel.pfeId);
+ panel.setAttribute("aria-labelledby", header.pfeId);
+ });
+ }
+
+ _changeHandler(evt) {
+ if (this.classList.contains("animating")) {
+ return;
+ }
+
+ const header = evt.target;
+ const panel = evt.target.nextElementSibling;
+
+ if (evt.detail.expanded) {
+ this._expandHeader(header);
+ this._expandPanel(panel);
+ } else {
+ this._collapseHeader(header);
+ this._collapsePanel(panel);
+ }
+ }
+
+ _toggle(header, panel) {}
+
+ _expandHeader(header) {
+ header.expanded = true;
+ }
+
+ _expandPanel(panel) {
+ if (panel.expanded) {
+ return;
+ }
+
+ panel.expanded = true;
+
+ const height = panel.getBoundingClientRect().height;
+ this._animate(panel, 0, height);
+ }
+
+ _collapseHeader(header) {
+ header.expanded = false;
+ }
+
+ _collapsePanel(panel) {
+ if (!panel.expanded) {
+ return;
+ }
+
+ const height = panel.getBoundingClientRect().height;
+ panel.expanded = false;
+
+ this._animate(panel, height, 0);
+ }
+
+ _animate(panel, start, end) {
+ panel.classList.add("animating");
+ panel.style.height = `${start}px`;
+
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ panel.style.height = `${end}px`;
+ panel.classList.add("animating");
+ panel.addEventListener("transitionend", this._transitionEndHandler);
+ });
+ });
+ }
+
+ _keydownHandler(evt) {
+ const currentHeader = evt.target;
+
+ if (!this._isHeader(currentHeader)) {
+ return;
+ }
+
+ let newHeader;
+
+ switch (evt.key) {
+ case "ArrowDown":
+ case "Down":
+ case "ArrowRight":
+ case "Right":
+ newHeader = this._nextHeader();
+ break;
+ case "ArrowUp":
+ case "Up":
+ case "ArrowLeft":
+ case "Left":
+ newHeader = this._previousHeader();
+ break;
+ case "Home":
+ newHeader = this._firstHeader();
+ break;
+ case "End":
+ newHeader = this._lastHeader();
+ break;
+ default:
+ return;
+ }
+
+ newHeader.shadowRoot.querySelector("button").focus();
+ }
+
+ _transitionEndHandler(evt) {
+ evt.target.style.height = "";
+ evt.target.classList.remove("animating");
+ evt.target.removeEventListener("transitionend", this._transitionEndHandler);
+ }
+
+ _allHeaders() {
+ return [...this.querySelectorAll(PfeAccordionHeader.tag)];
+ }
+
+ _allPanels() {
+ return [...this.querySelectorAll(PfeAccordionPanel.tag)];
+ }
+
+ _panelForHeader(header) {
+ const next = header.nextElementSibling;
+
+ if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {
+ console.error(
+ `${PfeAccordion.tag}: Sibling element to a header needs to be a panel`
+ );
+ return;
+ }
+
+ return next;
+ }
+
+ _previousHeader() {
+ const headers = this._allHeaders();
+ let newIndex =
+ headers.findIndex(header => header === document.activeElement) - 1;
+ return headers[(newIndex + headers.length) % headers.length];
+ }
+
+ _nextHeader() {
+ const headers = this._allHeaders();
+ let newIndex =
+ headers.findIndex(header => header === document.activeElement) + 1;
+ return headers[newIndex % headers.length];
+ }
+
+ _firstHeader() {
+ const headers = this._allHeaders();
+ return headers[0];
+ }
+
+ _lastHeader() {
+ const headers = this._allHeaders();
+ return headers[headers.length - 1];
+ }
+
+ _isHeader(element) {
+ return element.tagName.toLowerCase() === PfeAccordionHeader.tag;
+ }
+}
+
+class PfeAccordionHeader extends PFElement {
+
+ get html() {
+ return ``;
+ }
+ static get tag() {
+ return "pfe-accordion-header";
+ }
+
+ get styleUrl() {
+ return "pfe-accordion-header.scss";
+ }
+
+ get templateUrl() {
+ return "pfe-accordion-header.html";
+ }
+
+ get pfeId() {
+ return this.getAttribute("pfe-id");
+ }
+
+ set pfeId(id) {
+ if (!id) {
+ return;
+ }
+
+ this.setAttribute("pfe-id", id);
+ }
+
+ static get observedAttributes() {
+ return ["aria-expanded"];
+ }
+
+ constructor() {
+ super(PfeAccordionHeader);
+ this._clickHandler = this._clickHandler.bind(this);
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ if (!this.hasAttribute("role")) {
+ this.setAttribute("role", "header");
+ }
+
+ if (!this.pfeId) {
+ this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`;
+ }
+
+ this.button = this.shadowRoot.querySelector("button");
+
+ const child = this.children[0];
+ let isHeaderTag = false;
+
+ if (child) {
+ switch (child.tagName) {
+ case "H1":
+ case "H2":
+ case "H3":
+ case "H4":
+ case "H5":
+ case "H6":
+ isHeaderTag = true;
+ break;
+ }
+
+ const wrapperTag = document.createElement(child.tagName);
+ this.button.innerText = child.innerText;
+
+ wrapperTag.appendChild(this.button);
+ this.shadowRoot.appendChild(wrapperTag);
+ } else {
+ this.button.innerText = this.textContent.trim();
+ }
+
+ if (!isHeaderTag) {
+ console.warn(
+ `${
+ PfeAccordionHeader.tag
+ }: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`
+ );
+ }
+
+ this.addEventListener("click", this._clickHandler);
+ }
+
+ disconnectedCallback() {
+ this.removeEventListener("click", this._clickHandler);
+ }
+
+ get expanded() {
+ return this.hasAttribute("aria-expanded");
+ }
+
+ set expanded(val) {
+ val = Boolean(val);
+
+ if (val) {
+ this.setAttribute("aria-expanded", true);
+ this.button.setAttribute("aria-expanded", true);
+ } else {
+ this.removeAttribute("aria-expanded");
+ this.button.setAttribute("aria-expanded", false);
+ }
+ }
+
+ _clickHandler(event) {
+ this.dispatchEvent(
+ new CustomEvent(`${PfeAccordion.tag}:change`, {
+ detail: { expanded: !this.expanded },
+ bubbles: true
+ })
+ );
+ }
+}
+
+class PfeAccordionPanel extends PFElement {
+
+ get html() {
+ return `
+
+
+
+
`;
+ }
+ static get tag() {
+ return "pfe-accordion-panel";
+ }
+
+ get styleUrl() {
+ return "pfe-accordion-panel.scss";
+ }
+
+ get templateUrl() {
+ return "pfe-accordion-panel.html";
+ }
+
+ get pfeId() {
+ return this.getAttribute("pfe-id");
+ }
+
+ set pfeId(id) {
+ if (!id) {
+ return;
+ }
+
+ this.setAttribute("pfe-id", id);
+ }
+
+ constructor() {
+ super(PfeAccordionPanel);
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ if (!this.hasAttribute("role")) {
+ this.setAttribute("role", "region");
+ }
+
+ if (!this.pfeId) {
+ this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`;
+ }
+ }
+
+ get expanded() {
+ return this.hasAttribute("expanded");
+ }
+
+ set expanded(val) {
+ const value = Boolean(val);
+
+ if (value) {
+ this.setAttribute("expanded", "");
+ } else {
+ this.removeAttribute("expanded");
+ }
+ }
+}
+
+PFElement.create(PfeAccordionHeader);
+PFElement.create(PfeAccordionPanel);
+PFElement.create(PfeAccordion);
+
+export default PfeAccordion;
+//# sourceMappingURL=pfe-accordion.js.map
diff --git a/elements/pfe-accordion/pfe-accordion.js.map b/elements/pfe-accordion/pfe-accordion.js.map
new file mode 100644
index 0000000000..5a7f10d9d8
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-accordion.js","sources":["pfe-accordion.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../pfelement/pfelement.js\";\n\n// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex\nif (!Array.prototype.findIndex) {\n Object.defineProperty(Array.prototype, \"findIndex\", {\n value: function(predicate) {\n // 1. Let O be ? ToObject(this value).\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If IsCallable(predicate) is false, throw a TypeError exception.\n if (typeof predicate !== \"function\") {\n throw new TypeError(\"predicate must be a function\");\n }\n\n // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.\n var thisArg = arguments[1];\n\n // 5. Let k be 0.\n var k = 0;\n\n // 6. Repeat, while k < len\n while (k < len) {\n // a. Let Pk be ! ToString(k).\n // b. Let kValue be ? Get(O, Pk).\n // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).\n // d. If testResult is true, return k.\n var kValue = o[k];\n if (predicate.call(thisArg, kValue, k, o)) {\n return k;\n }\n // e. Increase k by 1.\n k++;\n }\n\n // 7. Return -1.\n return -1;\n }\n });\n}\n\nfunction generateId() {\n return Math.random()\n .toString(36)\n .substr(2, 9);\n}\n\nclass PfeAccordion extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-accordion\";\n }\n\n get styleUrl() {\n return \"pfe-accordion.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion.html\";\n }\n\n static get observedAttributes() {\n return [\"theme\", \"color\", \"on\"];\n }\n\n static get cascadingAttributes() {\n return {\n color: \"pfe-accordion-header, pfe-accordion-panel\",\n on: \"pfe-accordion-header, pfe-accordion-panel\"\n };\n }\n\n constructor() {\n super(PfeAccordion);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.setAttribute(\"role\", \"presentation\");\n this.setAttribute(\"defined\", \"\");\n\n this.addEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.addEventListener(\"keydown\", this._keydownHandler);\n\n Promise.all([\n customElements.whenDefined(PfeAccordionHeader.tag),\n customElements.whenDefined(PfeAccordionPanel.tag)\n ]).then(this._linkPanels());\n }\n\n disconnectedCallback() {\n this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.removeEventListener(\"keydown\", this._keydownHandler);\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(attr, oldVal, newVal);\n\n if (attr === \"color\") {\n const headers = this.querySelectorAll(PfeAccordionHeader.tag);\n\n if (newVal === \"striped\") {\n [...headers].forEach((header, index) => {\n const headerClass = index % 2 ? \"even\" : \"odd\";\n header.classList.add(headerClass);\n });\n } else {\n [...headers].forEach((header, index) => {\n header.classList.remove(\"even\", \"odd\");\n });\n }\n }\n }\n\n toggle(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) {\n return;\n }\n\n if (!header.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n expand(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) {\n return;\n }\n\n this._expandHeader(header);\n this._expandPanel(panel);\n }\n\n expandAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach(header => this._expandHeader(header));\n panels.forEach(panel => this._expandPanel(panel));\n }\n\n collapse(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) {\n return;\n }\n\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n\n collapseAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach(header => this._collapseHeader(header));\n panels.forEach(panel => this._collapsePanel(panel));\n }\n\n _linkPanels() {\n const headers = this._allHeaders();\n headers.forEach(header => {\n const panel = this._panelForHeader(header);\n\n header.setAttribute(\"aria-controls\", panel.pfeId);\n panel.setAttribute(\"aria-labelledby\", header.pfeId);\n });\n }\n\n _changeHandler(evt) {\n if (this.classList.contains(\"animating\")) {\n return;\n }\n\n const header = evt.target;\n const panel = evt.target.nextElementSibling;\n\n if (evt.detail.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n _toggle(header, panel) {}\n\n _expandHeader(header) {\n header.expanded = true;\n }\n\n _expandPanel(panel) {\n if (panel.expanded) {\n return;\n }\n\n panel.expanded = true;\n\n const height = panel.getBoundingClientRect().height;\n this._animate(panel, 0, height);\n }\n\n _collapseHeader(header) {\n header.expanded = false;\n }\n\n _collapsePanel(panel) {\n if (!panel.expanded) {\n return;\n }\n\n const height = panel.getBoundingClientRect().height;\n panel.expanded = false;\n\n this._animate(panel, height, 0);\n }\n\n _animate(panel, start, end) {\n panel.classList.add(\"animating\");\n panel.style.height = `${start}px`;\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n panel.style.height = `${end}px`;\n panel.classList.add(\"animating\");\n panel.addEventListener(\"transitionend\", this._transitionEndHandler);\n });\n });\n }\n\n _keydownHandler(evt) {\n const currentHeader = evt.target;\n\n if (!this._isHeader(currentHeader)) {\n return;\n }\n\n let newHeader;\n\n switch (evt.key) {\n case \"ArrowDown\":\n case \"Down\":\n case \"ArrowRight\":\n case \"Right\":\n newHeader = this._nextHeader();\n break;\n case \"ArrowUp\":\n case \"Up\":\n case \"ArrowLeft\":\n case \"Left\":\n newHeader = this._previousHeader();\n break;\n case \"Home\":\n newHeader = this._firstHeader();\n break;\n case \"End\":\n newHeader = this._lastHeader();\n break;\n default:\n return;\n }\n\n newHeader.shadowRoot.querySelector(\"button\").focus();\n }\n\n _transitionEndHandler(evt) {\n evt.target.style.height = \"\";\n evt.target.classList.remove(\"animating\");\n evt.target.removeEventListener(\"transitionend\", this._transitionEndHandler);\n }\n\n _allHeaders() {\n return [...this.querySelectorAll(PfeAccordionHeader.tag)];\n }\n\n _allPanels() {\n return [...this.querySelectorAll(PfeAccordionPanel.tag)];\n }\n\n _panelForHeader(header) {\n const next = header.nextElementSibling;\n\n if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {\n console.error(\n `${PfeAccordion.tag}: Sibling element to a header needs to be a panel`\n );\n return;\n }\n\n return next;\n }\n\n _previousHeader() {\n const headers = this._allHeaders();\n let newIndex =\n headers.findIndex(header => header === document.activeElement) - 1;\n return headers[(newIndex + headers.length) % headers.length];\n }\n\n _nextHeader() {\n const headers = this._allHeaders();\n let newIndex =\n headers.findIndex(header => header === document.activeElement) + 1;\n return headers[newIndex % headers.length];\n }\n\n _firstHeader() {\n const headers = this._allHeaders();\n return headers[0];\n }\n\n _lastHeader() {\n const headers = this._allHeaders();\n return headers[headers.length - 1];\n }\n\n _isHeader(element) {\n return element.tagName.toLowerCase() === PfeAccordionHeader.tag;\n }\n}\n\nclass PfeAccordionHeader extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-accordion-header\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-header.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-header.html\";\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n static get observedAttributes() {\n return [\"aria-expanded\"];\n }\n\n constructor() {\n super(PfeAccordionHeader);\n this._clickHandler = this._clickHandler.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"header\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`;\n }\n\n this.button = this.shadowRoot.querySelector(\"button\");\n\n const child = this.children[0];\n let isHeaderTag = false;\n\n if (child) {\n switch (child.tagName) {\n case \"H1\":\n case \"H2\":\n case \"H3\":\n case \"H4\":\n case \"H5\":\n case \"H6\":\n isHeaderTag = true;\n break;\n }\n\n const wrapperTag = document.createElement(child.tagName);\n this.button.innerText = child.innerText;\n\n wrapperTag.appendChild(this.button);\n this.shadowRoot.appendChild(wrapperTag);\n } else {\n this.button.innerText = this.textContent.trim();\n }\n\n if (!isHeaderTag) {\n console.warn(\n `${\n PfeAccordionHeader.tag\n }: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`\n );\n }\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this._clickHandler);\n }\n\n get expanded() {\n return this.hasAttribute(\"aria-expanded\");\n }\n\n set expanded(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"aria-expanded\", true);\n this.button.setAttribute(\"aria-expanded\", true);\n } else {\n this.removeAttribute(\"aria-expanded\");\n this.button.setAttribute(\"aria-expanded\", false);\n }\n }\n\n _clickHandler(event) {\n this.dispatchEvent(\n new CustomEvent(`${PfeAccordion.tag}:change`, {\n detail: { expanded: !this.expanded },\n bubbles: true\n })\n );\n }\n}\n\nclass PfeAccordionPanel extends PFElement {\n\n get html() {\n return `
\n
\n \n
\n
`;\n }\n static get tag() {\n return \"pfe-accordion-panel\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-panel.html\";\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"region\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`;\n }\n }\n\n get expanded() {\n return this.hasAttribute(\"expanded\");\n }\n\n set expanded(val) {\n const value = Boolean(val);\n\n if (value) {\n this.setAttribute(\"expanded\", \"\");\n } else {\n this.removeAttribute(\"expanded\");\n }\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport { PfeAccordion as default };\n"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-accordion/pfe-accordion.min.css b/elements/pfe-accordion/pfe-accordion.min.css
new file mode 100644
index 0000000000..2898cf5db3
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion.min.css
@@ -0,0 +1 @@
+:host{display:block;position:relative;overflow:hidden;margin:0;color:var(--pfe-broadcasted--color--text)}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)}
\ No newline at end of file
diff --git a/elements/pfe-accordion/pfe-accordion.min.js b/elements/pfe-accordion/pfe-accordion.min.js
new file mode 100644
index 0000000000..4b8865b569
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion.min.js
@@ -0,0 +1,26 @@
+import e from"../pfelement/pfelement.min.js";function t(){return Math.random().toString(36).substr(2,9)}
+/*
+ * @license
+ * 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.
+ *
+*/
+Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),r=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var a=arguments[1],o=0;o:host{display:block;position:relative;overflow:hidden;margin:0;color:var(--pfe-broadcasted--color--text)}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)}"}static get tag(){return"pfe-accordion"}get styleUrl(){return"pfe-accordion.scss"}get templateUrl(){return"pfe-accordion.html"}static get observedAttributes(){return["theme","color","on"]}static get cascadingAttributes(){return{color:"pfe-accordion-header, pfe-accordion-panel",on:"pfe-accordion-header, pfe-accordion-panel"}}constructor(){super(r)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","presentation"),this.setAttribute("defined",""),this.addEventListener(`${r.tag}:change`,this._changeHandler),this.addEventListener("keydown",this._keydownHandler),Promise.all([customElements.whenDefined(a.tag),customElements.whenDefined(o.tag)]).then(this._linkPanels())}disconnectedCallback(){this.removeEventListener(`${r.tag}:change`,this._changeHandler),this.removeEventListener("keydown",this._keydownHandler)}attributeChangedCallback(e,t,r){if(super.attributeChangedCallback(e,t,r),"color"===e){const e=this.querySelectorAll(a.tag);"striped"===r?[...e].forEach((e,t)=>{const r=t%2?"even":"odd";e.classList.add(r)}):[...e].forEach((e,t)=>{e.classList.remove("even","odd")})}}toggle(e){const t=this._allHeaders(),r=this._allPanels(),a=t[e],o=r[e];a&&o&&(a.expanded?(this._collapseHeader(a),this._collapsePanel(o)):(this._expandHeader(a),this._expandPanel(o)))}expand(e){const t=this._allHeaders(),r=this._allPanels(),a=t[e],o=r[e];a&&o&&(this._expandHeader(a),this._expandPanel(o))}expandAll(){const e=this._allHeaders(),t=this._allPanels();e.forEach(e=>this._expandHeader(e)),t.forEach(e=>this._expandPanel(e))}collapse(e){const t=this._allHeaders(),r=this._allPanels(),a=t[e],o=r[e];a&&o&&(this._collapseHeader(a),this._collapsePanel(o))}collapseAll(){const e=this._allHeaders(),t=this._allPanels();e.forEach(e=>this._collapseHeader(e)),t.forEach(e=>this._collapsePanel(e))}_linkPanels(){this._allHeaders().forEach(e=>{const t=this._panelForHeader(e);e.setAttribute("aria-controls",t.pfeId),t.setAttribute("aria-labelledby",e.pfeId)})}_changeHandler(e){if(this.classList.contains("animating"))return;const t=e.target,r=e.target.nextElementSibling;e.detail.expanded?(this._expandHeader(t),this._expandPanel(r)):(this._collapseHeader(t),this._collapsePanel(r))}_toggle(e,t){}_expandHeader(e){e.expanded=!0}_expandPanel(e){if(e.expanded)return;e.expanded=!0;const t=e.getBoundingClientRect().height;this._animate(e,0,t)}_collapseHeader(e){e.expanded=!1}_collapsePanel(e){if(!e.expanded)return;const t=e.getBoundingClientRect().height;e.expanded=!1,this._animate(e,t,0)}_animate(e,t,r){e.classList.add("animating"),e.style.height=`${t}px`,requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.style.height=`${r}px`,e.classList.add("animating"),e.addEventListener("transitionend",this._transitionEndHandler)})})}_keydownHandler(e){const t=e.target;if(!this._isHeader(t))return;let r;switch(e.key){case"ArrowDown":case"Down":case"ArrowRight":case"Right":r=this._nextHeader();break;case"ArrowUp":case"Up":case"ArrowLeft":case"Left":r=this._previousHeader();break;case"Home":r=this._firstHeader();break;case"End":r=this._lastHeader();break;default:return}r.shadowRoot.querySelector("button").focus()}_transitionEndHandler(e){e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler)}_allHeaders(){return[...this.querySelectorAll(a.tag)]}_allPanels(){return[...this.querySelectorAll(o.tag)]}_panelForHeader(e){const t=e.nextElementSibling;if(t.tagName.toLowerCase()===o.tag)return t;console.error(`${r.tag}: Sibling element to a header needs to be a panel`)}_previousHeader(){const e=this._allHeaders();let t=e.findIndex(e=>e===document.activeElement)-1;return e[(t+e.length)%e.length]}_nextHeader(){const e=this._allHeaders();let t=e.findIndex(e=>e===document.activeElement)+1;return e[t%e.length]}_firstHeader(){return this._allHeaders()[0]}_lastHeader(){const e=this._allHeaders();return e[e.length-1]}_isHeader(e){return e.tagName.toLowerCase()===a.tag}}class a extends e{get html(){return''}static get tag(){return"pfe-accordion-header"}get styleUrl(){return"pfe-accordion-header.scss"}get templateUrl(){return"pfe-accordion-header.html"}get pfeId(){return this.getAttribute("pfe-id")}set pfeId(e){e&&this.setAttribute("pfe-id",e)}static get observedAttributes(){return["aria-expanded"]}constructor(){super(a),this._clickHandler=this._clickHandler.bind(this)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","header"),this.pfeId||(this.pfeId=`${a.tag}-${t()}`),this.button=this.shadowRoot.querySelector("button");const e=this.children[0];let r=!1;if(e){switch(e.tagName){case"H1":case"H2":case"H3":case"H4":case"H5":case"H6":r=!0}const t=document.createElement(e.tagName);this.button.innerText=e.innerText,t.appendChild(this.button),this.shadowRoot.appendChild(t)}else this.button.innerText=this.textContent.trim();r||console.warn(`${a.tag}: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`),this.addEventListener("click",this._clickHandler)}disconnectedCallback(){this.removeEventListener("click",this._clickHandler)}get expanded(){return this.hasAttribute("aria-expanded")}set expanded(e){(e=Boolean(e))?(this.setAttribute("aria-expanded",!0),this.button.setAttribute("aria-expanded",!0)):(this.removeAttribute("aria-expanded"),this.button.setAttribute("aria-expanded",!1))}_clickHandler(e){this.dispatchEvent(new CustomEvent(`${r.tag}:change`,{detail:{expanded:!this.expanded},bubbles:!0}))}}class o extends e{get html(){return'
\n
\n \n
\n
'}static get tag(){return"pfe-accordion-panel"}get styleUrl(){return"pfe-accordion-panel.scss"}get templateUrl(){return"pfe-accordion-panel.html"}get pfeId(){return this.getAttribute("pfe-id")}set pfeId(e){e&&this.setAttribute("pfe-id",e)}constructor(){super(o)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","region"),this.pfeId||(this.pfeId=`${o.tag}-${t()}`)}get expanded(){return this.hasAttribute("expanded")}set expanded(e){Boolean(e)?this.setAttribute("expanded",""):this.removeAttribute("expanded")}}e.create(a),e.create(o),e.create(r);export default r;
+//# sourceMappingURL=pfe-accordion.min.js.map
diff --git a/elements/pfe-accordion/pfe-accordion.min.js.map b/elements/pfe-accordion/pfe-accordion.min.js.map
new file mode 100644
index 0000000000..b592c2eac5
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-accordion.min.js","sources":["pfe-accordion.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\n// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex\nif (!Array.prototype.findIndex) {\n Object.defineProperty(Array.prototype, \"findIndex\", {\n value: function(predicate) {\n // 1. Let O be ? ToObject(this value).\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If IsCallable(predicate) is false, throw a TypeError exception.\n if (typeof predicate !== \"function\") {\n throw new TypeError(\"predicate must be a function\");\n }\n\n // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.\n var thisArg = arguments[1];\n\n // 5. Let k be 0.\n var k = 0;\n\n // 6. Repeat, while k < len\n while (k < len) {\n // a. Let Pk be ! ToString(k).\n // b. Let kValue be ? Get(O, Pk).\n // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).\n // d. If testResult is true, return k.\n var kValue = o[k];\n if (predicate.call(thisArg, kValue, k, o)) {\n return k;\n }\n // e. Increase k by 1.\n k++;\n }\n\n // 7. Return -1.\n return -1;\n }\n });\n}\n\nfunction generateId() {\n return Math.random()\n .toString(36)\n .substr(2, 9);\n}\n\nclass PfeAccordion extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-accordion\";\n }\n\n get styleUrl() {\n return \"pfe-accordion.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion.html\";\n }\n\n static get observedAttributes() {\n return [\"theme\", \"color\", \"on\"];\n }\n\n static get cascadingAttributes() {\n return {\n color: \"pfe-accordion-header, pfe-accordion-panel\",\n on: \"pfe-accordion-header, pfe-accordion-panel\"\n };\n }\n\n constructor() {\n super(PfeAccordion);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.setAttribute(\"role\", \"presentation\");\n this.setAttribute(\"defined\", \"\");\n\n this.addEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.addEventListener(\"keydown\", this._keydownHandler);\n\n Promise.all([\n customElements.whenDefined(PfeAccordionHeader.tag),\n customElements.whenDefined(PfeAccordionPanel.tag)\n ]).then(this._linkPanels());\n }\n\n disconnectedCallback() {\n this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.removeEventListener(\"keydown\", this._keydownHandler);\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(attr, oldVal, newVal);\n\n if (attr === \"color\") {\n const headers = this.querySelectorAll(PfeAccordionHeader.tag);\n\n if (newVal === \"striped\") {\n [...headers].forEach((header, index) => {\n const headerClass = index % 2 ? \"even\" : \"odd\";\n header.classList.add(headerClass);\n });\n } else {\n [...headers].forEach((header, index) => {\n header.classList.remove(\"even\", \"odd\");\n });\n }\n }\n }\n\n toggle(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) {\n return;\n }\n\n if (!header.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n expand(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) {\n return;\n }\n\n this._expandHeader(header);\n this._expandPanel(panel);\n }\n\n expandAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach(header => this._expandHeader(header));\n panels.forEach(panel => this._expandPanel(panel));\n }\n\n collapse(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) {\n return;\n }\n\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n\n collapseAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach(header => this._collapseHeader(header));\n panels.forEach(panel => this._collapsePanel(panel));\n }\n\n _linkPanels() {\n const headers = this._allHeaders();\n headers.forEach(header => {\n const panel = this._panelForHeader(header);\n\n header.setAttribute(\"aria-controls\", panel.pfeId);\n panel.setAttribute(\"aria-labelledby\", header.pfeId);\n });\n }\n\n _changeHandler(evt) {\n if (this.classList.contains(\"animating\")) {\n return;\n }\n\n const header = evt.target;\n const panel = evt.target.nextElementSibling;\n\n if (evt.detail.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n _toggle(header, panel) {}\n\n _expandHeader(header) {\n header.expanded = true;\n }\n\n _expandPanel(panel) {\n if (panel.expanded) {\n return;\n }\n\n panel.expanded = true;\n\n const height = panel.getBoundingClientRect().height;\n this._animate(panel, 0, height);\n }\n\n _collapseHeader(header) {\n header.expanded = false;\n }\n\n _collapsePanel(panel) {\n if (!panel.expanded) {\n return;\n }\n\n const height = panel.getBoundingClientRect().height;\n panel.expanded = false;\n\n this._animate(panel, height, 0);\n }\n\n _animate(panel, start, end) {\n panel.classList.add(\"animating\");\n panel.style.height = `${start}px`;\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n panel.style.height = `${end}px`;\n panel.classList.add(\"animating\");\n panel.addEventListener(\"transitionend\", this._transitionEndHandler);\n });\n });\n }\n\n _keydownHandler(evt) {\n const currentHeader = evt.target;\n\n if (!this._isHeader(currentHeader)) {\n return;\n }\n\n let newHeader;\n\n switch (evt.key) {\n case \"ArrowDown\":\n case \"Down\":\n case \"ArrowRight\":\n case \"Right\":\n newHeader = this._nextHeader();\n break;\n case \"ArrowUp\":\n case \"Up\":\n case \"ArrowLeft\":\n case \"Left\":\n newHeader = this._previousHeader();\n break;\n case \"Home\":\n newHeader = this._firstHeader();\n break;\n case \"End\":\n newHeader = this._lastHeader();\n break;\n default:\n return;\n }\n\n newHeader.shadowRoot.querySelector(\"button\").focus();\n }\n\n _transitionEndHandler(evt) {\n evt.target.style.height = \"\";\n evt.target.classList.remove(\"animating\");\n evt.target.removeEventListener(\"transitionend\", this._transitionEndHandler);\n }\n\n _allHeaders() {\n return [...this.querySelectorAll(PfeAccordionHeader.tag)];\n }\n\n _allPanels() {\n return [...this.querySelectorAll(PfeAccordionPanel.tag)];\n }\n\n _panelForHeader(header) {\n const next = header.nextElementSibling;\n\n if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {\n console.error(\n `${PfeAccordion.tag}: Sibling element to a header needs to be a panel`\n );\n return;\n }\n\n return next;\n }\n\n _previousHeader() {\n const headers = this._allHeaders();\n let newIndex =\n headers.findIndex(header => header === document.activeElement) - 1;\n return headers[(newIndex + headers.length) % headers.length];\n }\n\n _nextHeader() {\n const headers = this._allHeaders();\n let newIndex =\n headers.findIndex(header => header === document.activeElement) + 1;\n return headers[newIndex % headers.length];\n }\n\n _firstHeader() {\n const headers = this._allHeaders();\n return headers[0];\n }\n\n _lastHeader() {\n const headers = this._allHeaders();\n return headers[headers.length - 1];\n }\n\n _isHeader(element) {\n return element.tagName.toLowerCase() === PfeAccordionHeader.tag;\n }\n}\n\nclass PfeAccordionHeader extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-accordion-header\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-header.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-header.html\";\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n static get observedAttributes() {\n return [\"aria-expanded\"];\n }\n\n constructor() {\n super(PfeAccordionHeader);\n this._clickHandler = this._clickHandler.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"header\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`;\n }\n\n this.button = this.shadowRoot.querySelector(\"button\");\n\n const child = this.children[0];\n let isHeaderTag = false;\n\n if (child) {\n switch (child.tagName) {\n case \"H1\":\n case \"H2\":\n case \"H3\":\n case \"H4\":\n case \"H5\":\n case \"H6\":\n isHeaderTag = true;\n break;\n }\n\n const wrapperTag = document.createElement(child.tagName);\n this.button.innerText = child.innerText;\n\n wrapperTag.appendChild(this.button);\n this.shadowRoot.appendChild(wrapperTag);\n } else {\n this.button.innerText = this.textContent.trim();\n }\n\n if (!isHeaderTag) {\n console.warn(\n `${\n PfeAccordionHeader.tag\n }: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`\n );\n }\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this._clickHandler);\n }\n\n get expanded() {\n return this.hasAttribute(\"aria-expanded\");\n }\n\n set expanded(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"aria-expanded\", true);\n this.button.setAttribute(\"aria-expanded\", true);\n } else {\n this.removeAttribute(\"aria-expanded\");\n this.button.setAttribute(\"aria-expanded\", false);\n }\n }\n\n _clickHandler(event) {\n this.dispatchEvent(\n new CustomEvent(`${PfeAccordion.tag}:change`, {\n detail: { expanded: !this.expanded },\n bubbles: true\n })\n );\n }\n}\n\nclass PfeAccordionPanel extends PFElement {\n\n get html() {\n return `
\n
\n \n
\n
`;\n }\n static get tag() {\n return \"pfe-accordion-panel\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-panel.html\";\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"region\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`;\n }\n }\n\n get expanded() {\n return this.hasAttribute(\"expanded\");\n }\n\n set expanded(val) {\n const value = Boolean(val);\n\n if (value) {\n this.setAttribute(\"expanded\", \"\");\n } else {\n this.removeAttribute(\"expanded\");\n }\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport default PfeAccordion;\n//# sourceMappingURL=pfe-accordion.js.map\n"],"names":["generateId","Math","random","toString","substr","Array","prototype","findIndex","Object","defineProperty","value","predicate","this","TypeError","o","len","length","thisArg","arguments","k","kValue","call","PfeAccordion","PFElement","html","tag","styleUrl","templateUrl","observedAttributes","cascadingAttributes","color","on","[object Object]","super","connectedCallback","setAttribute","addEventListener","_changeHandler","_keydownHandler","Promise","all","customElements","whenDefined","PfeAccordionHeader","PfeAccordionPanel","then","_linkPanels","removeEventListener","attr","oldVal","newVal","attributeChangedCallback","headers","querySelectorAll","forEach","header","index","headerClass","classList","add","remove","_allHeaders","panels","_allPanels","panel","expanded","_collapseHeader","_collapsePanel","_expandHeader","_expandPanel","_panelForHeader","pfeId","evt","contains","target","nextElementSibling","detail","height","getBoundingClientRect","_animate","start","end","style","requestAnimationFrame","_transitionEndHandler","currentHeader","_isHeader","newHeader","key","_nextHeader","_previousHeader","_firstHeader","_lastHeader","shadowRoot","querySelector","focus","next","tagName","toLowerCase","console","error","newIndex","document","activeElement","element","getAttribute","id","_clickHandler","bind","hasAttribute","button","child","children","isHeaderTag","wrapperTag","createElement","innerText","appendChild","textContent","trim","warn","val","Boolean","removeAttribute","event","dispatchEvent","CustomEvent","bubbles","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-accordion/pfe-accordion.umd.js b/elements/pfe-accordion/pfe-accordion.umd.js
new file mode 100644
index 0000000000..b3f8ca3586
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion.umd.js
@@ -0,0 +1,721 @@
+(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.PfeAccordion = 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);
+ }
+ };
+
+ /*
+ * @license
+ * 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.
+ *
+ */
+
+ // https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
+ if (!Array.prototype.findIndex) {
+ Object.defineProperty(Array.prototype, "findIndex", {
+ value: function value(predicate) {
+ // 1. Let O be ? ToObject(this value).
+ if (this == null) {
+ throw new TypeError('"this" is null or not defined');
+ }
+
+ var o = Object(this);
+
+ // 2. Let len be ? ToLength(? Get(O, "length")).
+ var len = o.length >>> 0;
+
+ // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+ if (typeof predicate !== "function") {
+ throw new TypeError("predicate must be a function");
+ }
+
+ // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+ var thisArg = arguments[1];
+
+ // 5. Let k be 0.
+ var k = 0;
+
+ // 6. Repeat, while k < len
+ while (k < len) {
+ // a. Let Pk be ! ToString(k).
+ // b. Let kValue be ? Get(O, Pk).
+ // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+ // d. If testResult is true, return k.
+ var kValue = o[k];
+ if (predicate.call(thisArg, kValue, k, o)) {
+ return k;
+ }
+ // e. Increase k by 1.
+ k++;
+ }
+
+ // 7. Return -1.
+ return -1;
+ }
+ });
+ }
+
+ function generateId() {
+ return Math.random().toString(36).substr(2, 9);
+ }
+
+ var PfeAccordion = function (_PFElement) {
+ inherits(PfeAccordion, _PFElement);
+ createClass(PfeAccordion, [{
+ key: 'html',
+ get: function get$$1() {
+ return '';
+ }
+ }, {
+ key: 'styleUrl',
+ get: function get$$1() {
+ return "pfe-accordion.scss";
+ }
+ }, {
+ key: 'templateUrl',
+ get: function get$$1() {
+ return "pfe-accordion.html";
+ }
+ }], [{
+ key: 'tag',
+ get: function get$$1() {
+ return "pfe-accordion";
+ }
+ }, {
+ key: 'observedAttributes',
+ get: function get$$1() {
+ return ["theme", "color", "on"];
+ }
+ }, {
+ key: 'cascadingAttributes',
+ get: function get$$1() {
+ return {
+ color: "pfe-accordion-header, pfe-accordion-panel",
+ on: "pfe-accordion-header, pfe-accordion-panel"
+ };
+ }
+ }]);
+
+ function PfeAccordion() {
+ classCallCheck(this, PfeAccordion);
+ return possibleConstructorReturn(this, (PfeAccordion.__proto__ || Object.getPrototypeOf(PfeAccordion)).call(this, PfeAccordion));
+ }
+
+ createClass(PfeAccordion, [{
+ key: 'connectedCallback',
+ value: function connectedCallback() {
+ get(PfeAccordion.prototype.__proto__ || Object.getPrototypeOf(PfeAccordion.prototype), 'connectedCallback', this).call(this);
+
+ this.setAttribute("role", "presentation");
+ this.setAttribute("defined", "");
+
+ this.addEventListener(PfeAccordion.tag + ':change', this._changeHandler);
+ this.addEventListener("keydown", this._keydownHandler);
+
+ Promise.all([customElements.whenDefined(PfeAccordionHeader.tag), customElements.whenDefined(PfeAccordionPanel.tag)]).then(this._linkPanels());
+ }
+ }, {
+ key: 'disconnectedCallback',
+ value: function disconnectedCallback() {
+ this.removeEventListener(PfeAccordion.tag + ':change', this._changeHandler);
+ this.removeEventListener("keydown", this._keydownHandler);
+ }
+ }, {
+ key: 'attributeChangedCallback',
+ value: function attributeChangedCallback(attr, oldVal, newVal) {
+ get(PfeAccordion.prototype.__proto__ || Object.getPrototypeOf(PfeAccordion.prototype), 'attributeChangedCallback', this).call(this, attr, oldVal, newVal);
+
+ if (attr === "color") {
+ var headers = this.querySelectorAll(PfeAccordionHeader.tag);
+
+ if (newVal === "striped") {
+ [].concat(toConsumableArray(headers)).forEach(function (header, index) {
+ var headerClass = index % 2 ? "even" : "odd";
+ header.classList.add(headerClass);
+ });
+ } else {
+ [].concat(toConsumableArray(headers)).forEach(function (header, index) {
+ header.classList.remove("even", "odd");
+ });
+ }
+ }
+ }
+ }, {
+ key: 'toggle',
+ value: function toggle(index) {
+ var headers = this._allHeaders();
+ var panels = this._allPanels();
+ var header = headers[index];
+ var panel = panels[index];
+
+ if (!header || !panel) {
+ return;
+ }
+
+ if (!header.expanded) {
+ this._expandHeader(header);
+ this._expandPanel(panel);
+ } else {
+ this._collapseHeader(header);
+ this._collapsePanel(panel);
+ }
+ }
+ }, {
+ key: 'expand',
+ value: function expand(index) {
+ var headers = this._allHeaders();
+ var panels = this._allPanels();
+ var header = headers[index];
+ var panel = panels[index];
+
+ if (!header || !panel) {
+ return;
+ }
+
+ this._expandHeader(header);
+ this._expandPanel(panel);
+ }
+ }, {
+ key: 'expandAll',
+ value: function expandAll() {
+ var _this2 = this;
+
+ var headers = this._allHeaders();
+ var panels = this._allPanels();
+
+ headers.forEach(function (header) {
+ return _this2._expandHeader(header);
+ });
+ panels.forEach(function (panel) {
+ return _this2._expandPanel(panel);
+ });
+ }
+ }, {
+ key: 'collapse',
+ value: function collapse(index) {
+ var headers = this._allHeaders();
+ var panels = this._allPanels();
+ var header = headers[index];
+ var panel = panels[index];
+
+ if (!header || !panel) {
+ return;
+ }
+
+ this._collapseHeader(header);
+ this._collapsePanel(panel);
+ }
+ }, {
+ key: 'collapseAll',
+ value: function collapseAll() {
+ var _this3 = this;
+
+ var headers = this._allHeaders();
+ var panels = this._allPanels();
+
+ headers.forEach(function (header) {
+ return _this3._collapseHeader(header);
+ });
+ panels.forEach(function (panel) {
+ return _this3._collapsePanel(panel);
+ });
+ }
+ }, {
+ key: '_linkPanels',
+ value: function _linkPanels() {
+ var _this4 = this;
+
+ var headers = this._allHeaders();
+ headers.forEach(function (header) {
+ var panel = _this4._panelForHeader(header);
+
+ header.setAttribute("aria-controls", panel.pfeId);
+ panel.setAttribute("aria-labelledby", header.pfeId);
+ });
+ }
+ }, {
+ key: '_changeHandler',
+ value: function _changeHandler(evt) {
+ if (this.classList.contains("animating")) {
+ return;
+ }
+
+ var header = evt.target;
+ var panel = evt.target.nextElementSibling;
+
+ if (evt.detail.expanded) {
+ this._expandHeader(header);
+ this._expandPanel(panel);
+ } else {
+ this._collapseHeader(header);
+ this._collapsePanel(panel);
+ }
+ }
+ }, {
+ key: '_toggle',
+ value: function _toggle(header, panel) {}
+ }, {
+ key: '_expandHeader',
+ value: function _expandHeader(header) {
+ header.expanded = true;
+ }
+ }, {
+ key: '_expandPanel',
+ value: function _expandPanel(panel) {
+ if (panel.expanded) {
+ return;
+ }
+
+ panel.expanded = true;
+
+ var height = panel.getBoundingClientRect().height;
+ this._animate(panel, 0, height);
+ }
+ }, {
+ key: '_collapseHeader',
+ value: function _collapseHeader(header) {
+ header.expanded = false;
+ }
+ }, {
+ key: '_collapsePanel',
+ value: function _collapsePanel(panel) {
+ if (!panel.expanded) {
+ return;
+ }
+
+ var height = panel.getBoundingClientRect().height;
+ panel.expanded = false;
+
+ this._animate(panel, height, 0);
+ }
+ }, {
+ key: '_animate',
+ value: function _animate(panel, start, end) {
+ var _this5 = this;
+
+ panel.classList.add("animating");
+ panel.style.height = start + 'px';
+
+ requestAnimationFrame(function () {
+ requestAnimationFrame(function () {
+ panel.style.height = end + 'px';
+ panel.classList.add("animating");
+ panel.addEventListener("transitionend", _this5._transitionEndHandler);
+ });
+ });
+ }
+ }, {
+ key: '_keydownHandler',
+ value: function _keydownHandler(evt) {
+ var currentHeader = evt.target;
+
+ if (!this._isHeader(currentHeader)) {
+ return;
+ }
+
+ var newHeader = void 0;
+
+ switch (evt.key) {
+ case "ArrowDown":
+ case "Down":
+ case "ArrowRight":
+ case "Right":
+ newHeader = this._nextHeader();
+ break;
+ case "ArrowUp":
+ case "Up":
+ case "ArrowLeft":
+ case "Left":
+ newHeader = this._previousHeader();
+ break;
+ case "Home":
+ newHeader = this._firstHeader();
+ break;
+ case "End":
+ newHeader = this._lastHeader();
+ break;
+ default:
+ return;
+ }
+
+ newHeader.shadowRoot.querySelector("button").focus();
+ }
+ }, {
+ key: '_transitionEndHandler',
+ value: function _transitionEndHandler(evt) {
+ evt.target.style.height = "";
+ evt.target.classList.remove("animating");
+ evt.target.removeEventListener("transitionend", this._transitionEndHandler);
+ }
+ }, {
+ key: '_allHeaders',
+ value: function _allHeaders() {
+ return [].concat(toConsumableArray(this.querySelectorAll(PfeAccordionHeader.tag)));
+ }
+ }, {
+ key: '_allPanels',
+ value: function _allPanels() {
+ return [].concat(toConsumableArray(this.querySelectorAll(PfeAccordionPanel.tag)));
+ }
+ }, {
+ key: '_panelForHeader',
+ value: function _panelForHeader(header) {
+ var next = header.nextElementSibling;
+
+ if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {
+ console.error(PfeAccordion.tag + ': Sibling element to a header needs to be a panel');
+ return;
+ }
+
+ return next;
+ }
+ }, {
+ key: '_previousHeader',
+ value: function _previousHeader() {
+ var headers = this._allHeaders();
+ var newIndex = headers.findIndex(function (header) {
+ return header === document.activeElement;
+ }) - 1;
+ return headers[(newIndex + headers.length) % headers.length];
+ }
+ }, {
+ key: '_nextHeader',
+ value: function _nextHeader() {
+ var headers = this._allHeaders();
+ var newIndex = headers.findIndex(function (header) {
+ return header === document.activeElement;
+ }) + 1;
+ return headers[newIndex % headers.length];
+ }
+ }, {
+ key: '_firstHeader',
+ value: function _firstHeader() {
+ var headers = this._allHeaders();
+ return headers[0];
+ }
+ }, {
+ key: '_lastHeader',
+ value: function _lastHeader() {
+ var headers = this._allHeaders();
+ return headers[headers.length - 1];
+ }
+ }, {
+ key: '_isHeader',
+ value: function _isHeader(element) {
+ return element.tagName.toLowerCase() === PfeAccordionHeader.tag;
+ }
+ }]);
+ return PfeAccordion;
+ }(PFElement);
+
+ var PfeAccordionHeader = function (_PFElement2) {
+ inherits(PfeAccordionHeader, _PFElement2);
+ createClass(PfeAccordionHeader, [{
+ key: 'html',
+ get: function get$$1() {
+ return '';
+ }
+ }, {
+ key: 'styleUrl',
+ get: function get$$1() {
+ return "pfe-accordion-header.scss";
+ }
+ }, {
+ key: 'templateUrl',
+ get: function get$$1() {
+ return "pfe-accordion-header.html";
+ }
+ }, {
+ key: 'pfeId',
+ get: function get$$1() {
+ return this.getAttribute("pfe-id");
+ },
+ set: function set$$1(id) {
+ if (!id) {
+ return;
+ }
+
+ this.setAttribute("pfe-id", id);
+ }
+ }], [{
+ key: 'tag',
+ get: function get$$1() {
+ return "pfe-accordion-header";
+ }
+ }, {
+ key: 'observedAttributes',
+ get: function get$$1() {
+ return ["aria-expanded"];
+ }
+ }]);
+
+ function PfeAccordionHeader() {
+ classCallCheck(this, PfeAccordionHeader);
+
+ var _this6 = possibleConstructorReturn(this, (PfeAccordionHeader.__proto__ || Object.getPrototypeOf(PfeAccordionHeader)).call(this, PfeAccordionHeader));
+
+ _this6._clickHandler = _this6._clickHandler.bind(_this6);
+ return _this6;
+ }
+
+ createClass(PfeAccordionHeader, [{
+ key: 'connectedCallback',
+ value: function connectedCallback() {
+ get(PfeAccordionHeader.prototype.__proto__ || Object.getPrototypeOf(PfeAccordionHeader.prototype), 'connectedCallback', this).call(this);
+
+ if (!this.hasAttribute("role")) {
+ this.setAttribute("role", "header");
+ }
+
+ if (!this.pfeId) {
+ this.pfeId = PfeAccordionHeader.tag + '-' + generateId();
+ }
+
+ this.button = this.shadowRoot.querySelector("button");
+
+ var child = this.children[0];
+ var isHeaderTag = false;
+
+ if (child) {
+ switch (child.tagName) {
+ case "H1":
+ case "H2":
+ case "H3":
+ case "H4":
+ case "H5":
+ case "H6":
+ isHeaderTag = true;
+ break;
+ }
+
+ var wrapperTag = document.createElement(child.tagName);
+ this.button.innerText = child.innerText;
+
+ wrapperTag.appendChild(this.button);
+ this.shadowRoot.appendChild(wrapperTag);
+ } else {
+ this.button.innerText = this.textContent.trim();
+ }
+
+ if (!isHeaderTag) {
+ console.warn(PfeAccordionHeader.tag + ': The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)');
+ }
+
+ this.addEventListener("click", this._clickHandler);
+ }
+ }, {
+ key: 'disconnectedCallback',
+ value: function disconnectedCallback() {
+ this.removeEventListener("click", this._clickHandler);
+ }
+ }, {
+ key: '_clickHandler',
+ value: function _clickHandler(event) {
+ this.dispatchEvent(new CustomEvent(PfeAccordion.tag + ':change', {
+ detail: { expanded: !this.expanded },
+ bubbles: true
+ }));
+ }
+ }, {
+ key: 'expanded',
+ get: function get$$1() {
+ return this.hasAttribute("aria-expanded");
+ },
+ set: function set$$1(val) {
+ val = Boolean(val);
+
+ if (val) {
+ this.setAttribute("aria-expanded", true);
+ this.button.setAttribute("aria-expanded", true);
+ } else {
+ this.removeAttribute("aria-expanded");
+ this.button.setAttribute("aria-expanded", false);
+ }
+ }
+ }]);
+ return PfeAccordionHeader;
+ }(PFElement);
+
+ var PfeAccordionPanel = function (_PFElement3) {
+ inherits(PfeAccordionPanel, _PFElement3);
+ createClass(PfeAccordionPanel, [{
+ key: 'html',
+ get: function get$$1() {
+ return '
\n
\n \n
\n
';
+ }
+ }, {
+ key: 'styleUrl',
+ get: function get$$1() {
+ return "pfe-accordion-panel.scss";
+ }
+ }, {
+ key: 'templateUrl',
+ get: function get$$1() {
+ return "pfe-accordion-panel.html";
+ }
+ }, {
+ key: 'pfeId',
+ get: function get$$1() {
+ return this.getAttribute("pfe-id");
+ },
+ set: function set$$1(id) {
+ if (!id) {
+ return;
+ }
+
+ this.setAttribute("pfe-id", id);
+ }
+ }], [{
+ key: 'tag',
+ get: function get$$1() {
+ return "pfe-accordion-panel";
+ }
+ }]);
+
+ function PfeAccordionPanel() {
+ classCallCheck(this, PfeAccordionPanel);
+ return possibleConstructorReturn(this, (PfeAccordionPanel.__proto__ || Object.getPrototypeOf(PfeAccordionPanel)).call(this, PfeAccordionPanel));
+ }
+
+ createClass(PfeAccordionPanel, [{
+ key: 'connectedCallback',
+ value: function connectedCallback() {
+ get(PfeAccordionPanel.prototype.__proto__ || Object.getPrototypeOf(PfeAccordionPanel.prototype), 'connectedCallback', this).call(this);
+
+ if (!this.hasAttribute("role")) {
+ this.setAttribute("role", "region");
+ }
+
+ if (!this.pfeId) {
+ this.pfeId = PfeAccordionPanel.tag + '-' + generateId();
+ }
+ }
+ }, {
+ key: 'expanded',
+ get: function get$$1() {
+ return this.hasAttribute("expanded");
+ },
+ set: function set$$1(val) {
+ var value = Boolean(val);
+
+ if (value) {
+ this.setAttribute("expanded", "");
+ } else {
+ this.removeAttribute("expanded");
+ }
+ }
+ }]);
+ return PfeAccordionPanel;
+ }(PFElement);
+
+ PFElement.create(PfeAccordionHeader);
+ PFElement.create(PfeAccordionPanel);
+ PFElement.create(PfeAccordion);
+
+ return PfeAccordion;
+
+})));
+//# sourceMappingURL=pfe-accordion.umd.js.map
diff --git a/elements/pfe-accordion/pfe-accordion.umd.js.map b/elements/pfe-accordion/pfe-accordion.umd.js.map
new file mode 100644
index 0000000000..4ada0b3cd7
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-accordion.umd.js","sources":["pfe-accordion.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\n// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex\nif (!Array.prototype.findIndex) {\n Object.defineProperty(Array.prototype, \"findIndex\", {\n value: function(predicate) {\n // 1. Let O be ? ToObject(this value).\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If IsCallable(predicate) is false, throw a TypeError exception.\n if (typeof predicate !== \"function\") {\n throw new TypeError(\"predicate must be a function\");\n }\n\n // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.\n var thisArg = arguments[1];\n\n // 5. Let k be 0.\n var k = 0;\n\n // 6. Repeat, while k < len\n while (k < len) {\n // a. Let Pk be ! ToString(k).\n // b. Let kValue be ? Get(O, Pk).\n // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).\n // d. If testResult is true, return k.\n var kValue = o[k];\n if (predicate.call(thisArg, kValue, k, o)) {\n return k;\n }\n // e. Increase k by 1.\n k++;\n }\n\n // 7. Return -1.\n return -1;\n }\n });\n}\n\nfunction generateId() {\n return Math.random()\n .toString(36)\n .substr(2, 9);\n}\n\nclass PfeAccordion extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-accordion\";\n }\n\n get styleUrl() {\n return \"pfe-accordion.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion.html\";\n }\n\n static get observedAttributes() {\n return [\"theme\", \"color\", \"on\"];\n }\n\n static get cascadingAttributes() {\n return {\n color: \"pfe-accordion-header, pfe-accordion-panel\",\n on: \"pfe-accordion-header, pfe-accordion-panel\"\n };\n }\n\n constructor() {\n super(PfeAccordion);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.setAttribute(\"role\", \"presentation\");\n this.setAttribute(\"defined\", \"\");\n\n this.addEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.addEventListener(\"keydown\", this._keydownHandler);\n\n Promise.all([\n customElements.whenDefined(PfeAccordionHeader.tag),\n customElements.whenDefined(PfeAccordionPanel.tag)\n ]).then(this._linkPanels());\n }\n\n disconnectedCallback() {\n this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.removeEventListener(\"keydown\", this._keydownHandler);\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(attr, oldVal, newVal);\n\n if (attr === \"color\") {\n const headers = this.querySelectorAll(PfeAccordionHeader.tag);\n\n if (newVal === \"striped\") {\n [...headers].forEach((header, index) => {\n const headerClass = index % 2 ? \"even\" : \"odd\";\n header.classList.add(headerClass);\n });\n } else {\n [...headers].forEach((header, index) => {\n header.classList.remove(\"even\", \"odd\");\n });\n }\n }\n }\n\n toggle(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) {\n return;\n }\n\n if (!header.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n expand(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) {\n return;\n }\n\n this._expandHeader(header);\n this._expandPanel(panel);\n }\n\n expandAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach(header => this._expandHeader(header));\n panels.forEach(panel => this._expandPanel(panel));\n }\n\n collapse(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) {\n return;\n }\n\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n\n collapseAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach(header => this._collapseHeader(header));\n panels.forEach(panel => this._collapsePanel(panel));\n }\n\n _linkPanels() {\n const headers = this._allHeaders();\n headers.forEach(header => {\n const panel = this._panelForHeader(header);\n\n header.setAttribute(\"aria-controls\", panel.pfeId);\n panel.setAttribute(\"aria-labelledby\", header.pfeId);\n });\n }\n\n _changeHandler(evt) {\n if (this.classList.contains(\"animating\")) {\n return;\n }\n\n const header = evt.target;\n const panel = evt.target.nextElementSibling;\n\n if (evt.detail.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n _toggle(header, panel) {}\n\n _expandHeader(header) {\n header.expanded = true;\n }\n\n _expandPanel(panel) {\n if (panel.expanded) {\n return;\n }\n\n panel.expanded = true;\n\n const height = panel.getBoundingClientRect().height;\n this._animate(panel, 0, height);\n }\n\n _collapseHeader(header) {\n header.expanded = false;\n }\n\n _collapsePanel(panel) {\n if (!panel.expanded) {\n return;\n }\n\n const height = panel.getBoundingClientRect().height;\n panel.expanded = false;\n\n this._animate(panel, height, 0);\n }\n\n _animate(panel, start, end) {\n panel.classList.add(\"animating\");\n panel.style.height = `${start}px`;\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n panel.style.height = `${end}px`;\n panel.classList.add(\"animating\");\n panel.addEventListener(\"transitionend\", this._transitionEndHandler);\n });\n });\n }\n\n _keydownHandler(evt) {\n const currentHeader = evt.target;\n\n if (!this._isHeader(currentHeader)) {\n return;\n }\n\n let newHeader;\n\n switch (evt.key) {\n case \"ArrowDown\":\n case \"Down\":\n case \"ArrowRight\":\n case \"Right\":\n newHeader = this._nextHeader();\n break;\n case \"ArrowUp\":\n case \"Up\":\n case \"ArrowLeft\":\n case \"Left\":\n newHeader = this._previousHeader();\n break;\n case \"Home\":\n newHeader = this._firstHeader();\n break;\n case \"End\":\n newHeader = this._lastHeader();\n break;\n default:\n return;\n }\n\n newHeader.shadowRoot.querySelector(\"button\").focus();\n }\n\n _transitionEndHandler(evt) {\n evt.target.style.height = \"\";\n evt.target.classList.remove(\"animating\");\n evt.target.removeEventListener(\"transitionend\", this._transitionEndHandler);\n }\n\n _allHeaders() {\n return [...this.querySelectorAll(PfeAccordionHeader.tag)];\n }\n\n _allPanels() {\n return [...this.querySelectorAll(PfeAccordionPanel.tag)];\n }\n\n _panelForHeader(header) {\n const next = header.nextElementSibling;\n\n if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {\n console.error(\n `${PfeAccordion.tag}: Sibling element to a header needs to be a panel`\n );\n return;\n }\n\n return next;\n }\n\n _previousHeader() {\n const headers = this._allHeaders();\n let newIndex =\n headers.findIndex(header => header === document.activeElement) - 1;\n return headers[(newIndex + headers.length) % headers.length];\n }\n\n _nextHeader() {\n const headers = this._allHeaders();\n let newIndex =\n headers.findIndex(header => header === document.activeElement) + 1;\n return headers[newIndex % headers.length];\n }\n\n _firstHeader() {\n const headers = this._allHeaders();\n return headers[0];\n }\n\n _lastHeader() {\n const headers = this._allHeaders();\n return headers[headers.length - 1];\n }\n\n _isHeader(element) {\n return element.tagName.toLowerCase() === PfeAccordionHeader.tag;\n }\n}\n\nclass PfeAccordionHeader extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-accordion-header\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-header.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-header.html\";\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n static get observedAttributes() {\n return [\"aria-expanded\"];\n }\n\n constructor() {\n super(PfeAccordionHeader);\n this._clickHandler = this._clickHandler.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"header\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`;\n }\n\n this.button = this.shadowRoot.querySelector(\"button\");\n\n const child = this.children[0];\n let isHeaderTag = false;\n\n if (child) {\n switch (child.tagName) {\n case \"H1\":\n case \"H2\":\n case \"H3\":\n case \"H4\":\n case \"H5\":\n case \"H6\":\n isHeaderTag = true;\n break;\n }\n\n const wrapperTag = document.createElement(child.tagName);\n this.button.innerText = child.innerText;\n\n wrapperTag.appendChild(this.button);\n this.shadowRoot.appendChild(wrapperTag);\n } else {\n this.button.innerText = this.textContent.trim();\n }\n\n if (!isHeaderTag) {\n console.warn(\n `${\n PfeAccordionHeader.tag\n }: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`\n );\n }\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this._clickHandler);\n }\n\n get expanded() {\n return this.hasAttribute(\"aria-expanded\");\n }\n\n set expanded(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"aria-expanded\", true);\n this.button.setAttribute(\"aria-expanded\", true);\n } else {\n this.removeAttribute(\"aria-expanded\");\n this.button.setAttribute(\"aria-expanded\", false);\n }\n }\n\n _clickHandler(event) {\n this.dispatchEvent(\n new CustomEvent(`${PfeAccordion.tag}:change`, {\n detail: { expanded: !this.expanded },\n bubbles: true\n })\n );\n }\n}\n\nclass PfeAccordionPanel extends PFElement {\n\n get html() {\n return `
\n
\n \n
\n
`;\n }\n static get tag() {\n return \"pfe-accordion-panel\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-panel.html\";\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"region\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`;\n }\n }\n\n get expanded() {\n return this.hasAttribute(\"expanded\");\n }\n\n set expanded(val) {\n const value = Boolean(val);\n\n if (value) {\n this.setAttribute(\"expanded\", \"\");\n } else {\n this.removeAttribute(\"expanded\");\n }\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport default PfeAccordion;\n//# sourceMappingURL=pfe-accordion.js.map\n"],"names":["Array","prototype","findIndex","Object","defineProperty","value","predicate","TypeError","o","len","length","thisArg","arguments","k","kValue","call","generateId","Math","random","toString","substr","PfeAccordion","color","on","setAttribute","addEventListener","tag","_changeHandler","_keydownHandler","Promise","all","customElements","whenDefined","PfeAccordionHeader","PfeAccordionPanel","then","_linkPanels","removeEventListener","attr","oldVal","newVal","headers","querySelectorAll","forEach","header","index","headerClass","classList","add","remove","_allHeaders","panels","_allPanels","panel","expanded","_expandHeader","_expandPanel","_collapseHeader","_collapsePanel","_panelForHeader","pfeId","evt","contains","target","nextElementSibling","detail","height","getBoundingClientRect","_animate","start","end","style","requestAnimationFrame","_transitionEndHandler","currentHeader","_isHeader","newHeader","key","_nextHeader","_previousHeader","_firstHeader","_lastHeader","shadowRoot","querySelector","focus","next","tagName","toLowerCase","console","error","newIndex","document","activeElement","element","PFElement","getAttribute","id","_clickHandler","bind","hasAttribute","button","child","children","isHeaderTag","wrapperTag","createElement","innerText","appendChild","textContent","trim","warn","event","dispatchEvent","CustomEvent","bubbles","val","Boolean","removeAttribute","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-accordion/pfe-accordion.umd.min.js b/elements/pfe-accordion/pfe-accordion.umd.min.js
new file mode 100644
index 0000000000..6ca404e5ab
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion.umd.min.js
@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],t):e.PfeAccordion=t(e.PFElement)}(this,function(r){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var n=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(){function o(e,t){for(var r=0;r>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var o=arguments[1],a=0;a:host{display:block;position:relative;overflow:hidden;margin:0;color:var(--pfe-broadcasted--color--text)}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)}"}},{key:"styleUrl",get:function(){return"pfe-accordion.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion.html"}}],[{key:"tag",get:function(){return"pfe-accordion"}},{key:"observedAttributes",get:function(){return["theme","color","on"]}},{key:"cascadingAttributes",get:function(){return{color:"pfe-accordion-header, pfe-accordion-panel",on:"pfe-accordion-header, pfe-accordion-panel"}}}]),i(a,[{key:"connectedCallback",value:function(){c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"connectedCallback",this).call(this),this.setAttribute("role","presentation"),this.setAttribute("defined",""),this.addEventListener(a.tag+":change",this._changeHandler),this.addEventListener("keydown",this._keydownHandler),Promise.all([customElements.whenDefined(f.tag),customElements.whenDefined(o.tag)]).then(this._linkPanels())}},{key:"disconnectedCallback",value:function(){this.removeEventListener(a.tag+":change",this._changeHandler),this.removeEventListener("keydown",this._keydownHandler)}},{key:"attributeChangedCallback",value:function(e,t,r){if(c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"attributeChangedCallback",this).call(this,e,t,r),"color"===e){var o=this.querySelectorAll(f.tag);"striped"===r?[].concat(d(o)).forEach(function(e,t){var r=t%2?"even":"odd";e.classList.add(r)}):[].concat(d(o)).forEach(function(e,t){e.classList.remove("even","odd")})}}},{key:"toggle",value:function(e){var t=this._allHeaders(),r=this._allPanels(),o=t[e],a=r[e];o&&a&&(o.expanded?(this._collapseHeader(o),this._collapsePanel(a)):(this._expandHeader(o),this._expandPanel(a)))}},{key:"expand",value:function(e){var t=this._allHeaders(),r=this._allPanels(),o=t[e],a=r[e];o&&a&&(this._expandHeader(o),this._expandPanel(a))}},{key:"expandAll",value:function(){var t=this,e=this._allHeaders(),r=this._allPanels();e.forEach(function(e){return t._expandHeader(e)}),r.forEach(function(e){return t._expandPanel(e)})}},{key:"collapse",value:function(e){var t=this._allHeaders(),r=this._allPanels(),o=t[e],a=r[e];o&&a&&(this._collapseHeader(o),this._collapsePanel(a))}},{key:"collapseAll",value:function(){var t=this,e=this._allHeaders(),r=this._allPanels();e.forEach(function(e){return t._collapseHeader(e)}),r.forEach(function(e){return t._collapsePanel(e)})}},{key:"_linkPanels",value:function(){var r=this;this._allHeaders().forEach(function(e){var t=r._panelForHeader(e);e.setAttribute("aria-controls",t.pfeId),t.setAttribute("aria-labelledby",e.pfeId)})}},{key:"_changeHandler",value:function(e){if(!this.classList.contains("animating")){var t=e.target,r=e.target.nextElementSibling;e.detail.expanded?(this._expandHeader(t),this._expandPanel(r)):(this._collapseHeader(t),this._collapsePanel(r))}}},{key:"_toggle",value:function(e,t){}},{key:"_expandHeader",value:function(e){e.expanded=!0}},{key:"_expandPanel",value:function(e){if(!e.expanded){e.expanded=!0;var t=e.getBoundingClientRect().height;this._animate(e,0,t)}}},{key:"_collapseHeader",value:function(e){e.expanded=!1}},{key:"_collapsePanel",value:function(e){if(e.expanded){var t=e.getBoundingClientRect().height;e.expanded=!1,this._animate(e,t,0)}}},{key:"_animate",value:function(e,t,r){var o=this;e.classList.add("animating"),e.style.height=t+"px",requestAnimationFrame(function(){requestAnimationFrame(function(){e.style.height=r+"px",e.classList.add("animating"),e.addEventListener("transitionend",o._transitionEndHandler)})})}},{key:"_keydownHandler",value:function(e){var t=e.target;if(this._isHeader(t)){var r=void 0;switch(e.key){case"ArrowDown":case"Down":case"ArrowRight":case"Right":r=this._nextHeader();break;case"ArrowUp":case"Up":case"ArrowLeft":case"Left":r=this._previousHeader();break;case"Home":r=this._firstHeader();break;case"End":r=this._lastHeader();break;default:return}r.shadowRoot.querySelector("button").focus()}}},{key:"_transitionEndHandler",value:function(e){e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler)}},{key:"_allHeaders",value:function(){return[].concat(d(this.querySelectorAll(f.tag)))}},{key:"_allPanels",value:function(){return[].concat(d(this.querySelectorAll(o.tag)))}},{key:"_panelForHeader",value:function(e){var t=e.nextElementSibling;if(t.tagName.toLowerCase()===o.tag)return t;console.error(a.tag+": Sibling element to a header needs to be a panel")}},{key:"_previousHeader",value:function(){var e=this._allHeaders(),t=e.findIndex(function(e){return e===document.activeElement})-1;return e[(t+e.length)%e.length]}},{key:"_nextHeader",value:function(){var e=this._allHeaders(),t=e.findIndex(function(e){return e===document.activeElement})+1;return e[t%e.length]}},{key:"_firstHeader",value:function(){return this._allHeaders()[0]}},{key:"_lastHeader",value:function(){var e=this._allHeaders();return e[e.length-1]}},{key:"_isHeader",value:function(e){return e.tagName.toLowerCase()===f.tag}}]),a}(),f=function(e){function o(){n(this,o);var e=l(this,(o.__proto__||Object.getPrototypeOf(o)).call(this,o));return e._clickHandler=e._clickHandler.bind(e),e}return s(o,r),i(o,[{key:"html",get:function(){return''}},{key:"styleUrl",get:function(){return"pfe-accordion-header.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-header.html"}},{key:"pfeId",get:function(){return this.getAttribute("pfe-id")},set:function(e){e&&this.setAttribute("pfe-id",e)}}],[{key:"tag",get:function(){return"pfe-accordion-header"}},{key:"observedAttributes",get:function(){return["aria-expanded"]}}]),i(o,[{key:"connectedCallback",value:function(){c(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"connectedCallback",this).call(this),this.hasAttribute("role")||this.setAttribute("role","header"),this.pfeId||(this.pfeId=o.tag+"-"+a()),this.button=this.shadowRoot.querySelector("button");var e=this.children[0],t=!1;if(e){switch(e.tagName){case"H1":case"H2":case"H3":case"H4":case"H5":case"H6":t=!0}var r=document.createElement(e.tagName);this.button.innerText=e.innerText,r.appendChild(this.button),this.shadowRoot.appendChild(r)}else this.button.innerText=this.textContent.trim();t||console.warn(o.tag+": The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)"),this.addEventListener("click",this._clickHandler)}},{key:"disconnectedCallback",value:function(){this.removeEventListener("click",this._clickHandler)}},{key:"_clickHandler",value:function(e){this.dispatchEvent(new CustomEvent(t.tag+":change",{detail:{expanded:!this.expanded},bubbles:!0}))}},{key:"expanded",get:function(){return this.hasAttribute("aria-expanded")},set:function(e){(e=Boolean(e))?(this.setAttribute("aria-expanded",!0),this.button.setAttribute("aria-expanded",!0)):(this.removeAttribute("aria-expanded"),this.button.setAttribute("aria-expanded",!1))}}]),o}(),o=function(e){function t(){return n(this,t),l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,t))}return s(t,r),i(t,[{key:"html",get:function(){return'
\n
\n \n
\n
'}},{key:"styleUrl",get:function(){return"pfe-accordion-panel.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-panel.html"}},{key:"pfeId",get:function(){return this.getAttribute("pfe-id")},set:function(e){e&&this.setAttribute("pfe-id",e)}}],[{key:"tag",get:function(){return"pfe-accordion-panel"}}]),i(t,[{key:"connectedCallback",value:function(){c(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this),this.hasAttribute("role")||this.setAttribute("role","region"),this.pfeId||(this.pfeId=t.tag+"-"+a())}},{key:"expanded",get:function(){return this.hasAttribute("expanded")},set:function(e){Boolean(e)?this.setAttribute("expanded",""):this.removeAttribute("expanded")}}]),t}();return r.create(f),r.create(o),r.create(t),t});
+//# sourceMappingURL=pfe-accordion.umd.min.js.map
diff --git a/elements/pfe-accordion/pfe-accordion.umd.min.js.map b/elements/pfe-accordion/pfe-accordion.umd.min.js.map
new file mode 100644
index 0000000000..11c1aaae9d
--- /dev/null
+++ b/elements/pfe-accordion/pfe-accordion.umd.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-accordion.umd.min.js","sources":["pfe-accordion.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\n// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex\nif (!Array.prototype.findIndex) {\n Object.defineProperty(Array.prototype, \"findIndex\", {\n value: function(predicate) {\n // 1. Let O be ? ToObject(this value).\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If IsCallable(predicate) is false, throw a TypeError exception.\n if (typeof predicate !== \"function\") {\n throw new TypeError(\"predicate must be a function\");\n }\n\n // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.\n var thisArg = arguments[1];\n\n // 5. Let k be 0.\n var k = 0;\n\n // 6. Repeat, while k < len\n while (k < len) {\n // a. Let Pk be ! ToString(k).\n // b. Let kValue be ? Get(O, Pk).\n // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).\n // d. If testResult is true, return k.\n var kValue = o[k];\n if (predicate.call(thisArg, kValue, k, o)) {\n return k;\n }\n // e. Increase k by 1.\n k++;\n }\n\n // 7. Return -1.\n return -1;\n }\n });\n}\n\nfunction generateId() {\n return Math.random()\n .toString(36)\n .substr(2, 9);\n}\n\nclass PfeAccordion extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-accordion\";\n }\n\n get styleUrl() {\n return \"pfe-accordion.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion.html\";\n }\n\n static get observedAttributes() {\n return [\"theme\", \"color\", \"on\"];\n }\n\n static get cascadingAttributes() {\n return {\n color: \"pfe-accordion-header, pfe-accordion-panel\",\n on: \"pfe-accordion-header, pfe-accordion-panel\"\n };\n }\n\n constructor() {\n super(PfeAccordion);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.setAttribute(\"role\", \"presentation\");\n this.setAttribute(\"defined\", \"\");\n\n this.addEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.addEventListener(\"keydown\", this._keydownHandler);\n\n Promise.all([\n customElements.whenDefined(PfeAccordionHeader.tag),\n customElements.whenDefined(PfeAccordionPanel.tag)\n ]).then(this._linkPanels());\n }\n\n disconnectedCallback() {\n this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.removeEventListener(\"keydown\", this._keydownHandler);\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(attr, oldVal, newVal);\n\n if (attr === \"color\") {\n const headers = this.querySelectorAll(PfeAccordionHeader.tag);\n\n if (newVal === \"striped\") {\n [...headers].forEach((header, index) => {\n const headerClass = index % 2 ? \"even\" : \"odd\";\n header.classList.add(headerClass);\n });\n } else {\n [...headers].forEach((header, index) => {\n header.classList.remove(\"even\", \"odd\");\n });\n }\n }\n }\n\n toggle(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) {\n return;\n }\n\n if (!header.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n expand(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) {\n return;\n }\n\n this._expandHeader(header);\n this._expandPanel(panel);\n }\n\n expandAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach(header => this._expandHeader(header));\n panels.forEach(panel => this._expandPanel(panel));\n }\n\n collapse(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) {\n return;\n }\n\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n\n collapseAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach(header => this._collapseHeader(header));\n panels.forEach(panel => this._collapsePanel(panel));\n }\n\n _linkPanels() {\n const headers = this._allHeaders();\n headers.forEach(header => {\n const panel = this._panelForHeader(header);\n\n header.setAttribute(\"aria-controls\", panel.pfeId);\n panel.setAttribute(\"aria-labelledby\", header.pfeId);\n });\n }\n\n _changeHandler(evt) {\n if (this.classList.contains(\"animating\")) {\n return;\n }\n\n const header = evt.target;\n const panel = evt.target.nextElementSibling;\n\n if (evt.detail.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n _toggle(header, panel) {}\n\n _expandHeader(header) {\n header.expanded = true;\n }\n\n _expandPanel(panel) {\n if (panel.expanded) {\n return;\n }\n\n panel.expanded = true;\n\n const height = panel.getBoundingClientRect().height;\n this._animate(panel, 0, height);\n }\n\n _collapseHeader(header) {\n header.expanded = false;\n }\n\n _collapsePanel(panel) {\n if (!panel.expanded) {\n return;\n }\n\n const height = panel.getBoundingClientRect().height;\n panel.expanded = false;\n\n this._animate(panel, height, 0);\n }\n\n _animate(panel, start, end) {\n panel.classList.add(\"animating\");\n panel.style.height = `${start}px`;\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n panel.style.height = `${end}px`;\n panel.classList.add(\"animating\");\n panel.addEventListener(\"transitionend\", this._transitionEndHandler);\n });\n });\n }\n\n _keydownHandler(evt) {\n const currentHeader = evt.target;\n\n if (!this._isHeader(currentHeader)) {\n return;\n }\n\n let newHeader;\n\n switch (evt.key) {\n case \"ArrowDown\":\n case \"Down\":\n case \"ArrowRight\":\n case \"Right\":\n newHeader = this._nextHeader();\n break;\n case \"ArrowUp\":\n case \"Up\":\n case \"ArrowLeft\":\n case \"Left\":\n newHeader = this._previousHeader();\n break;\n case \"Home\":\n newHeader = this._firstHeader();\n break;\n case \"End\":\n newHeader = this._lastHeader();\n break;\n default:\n return;\n }\n\n newHeader.shadowRoot.querySelector(\"button\").focus();\n }\n\n _transitionEndHandler(evt) {\n evt.target.style.height = \"\";\n evt.target.classList.remove(\"animating\");\n evt.target.removeEventListener(\"transitionend\", this._transitionEndHandler);\n }\n\n _allHeaders() {\n return [...this.querySelectorAll(PfeAccordionHeader.tag)];\n }\n\n _allPanels() {\n return [...this.querySelectorAll(PfeAccordionPanel.tag)];\n }\n\n _panelForHeader(header) {\n const next = header.nextElementSibling;\n\n if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {\n console.error(\n `${PfeAccordion.tag}: Sibling element to a header needs to be a panel`\n );\n return;\n }\n\n return next;\n }\n\n _previousHeader() {\n const headers = this._allHeaders();\n let newIndex =\n headers.findIndex(header => header === document.activeElement) - 1;\n return headers[(newIndex + headers.length) % headers.length];\n }\n\n _nextHeader() {\n const headers = this._allHeaders();\n let newIndex =\n headers.findIndex(header => header === document.activeElement) + 1;\n return headers[newIndex % headers.length];\n }\n\n _firstHeader() {\n const headers = this._allHeaders();\n return headers[0];\n }\n\n _lastHeader() {\n const headers = this._allHeaders();\n return headers[headers.length - 1];\n }\n\n _isHeader(element) {\n return element.tagName.toLowerCase() === PfeAccordionHeader.tag;\n }\n}\n\nclass PfeAccordionHeader extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-accordion-header\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-header.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-header.html\";\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n static get observedAttributes() {\n return [\"aria-expanded\"];\n }\n\n constructor() {\n super(PfeAccordionHeader);\n this._clickHandler = this._clickHandler.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"header\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`;\n }\n\n this.button = this.shadowRoot.querySelector(\"button\");\n\n const child = this.children[0];\n let isHeaderTag = false;\n\n if (child) {\n switch (child.tagName) {\n case \"H1\":\n case \"H2\":\n case \"H3\":\n case \"H4\":\n case \"H5\":\n case \"H6\":\n isHeaderTag = true;\n break;\n }\n\n const wrapperTag = document.createElement(child.tagName);\n this.button.innerText = child.innerText;\n\n wrapperTag.appendChild(this.button);\n this.shadowRoot.appendChild(wrapperTag);\n } else {\n this.button.innerText = this.textContent.trim();\n }\n\n if (!isHeaderTag) {\n console.warn(\n `${\n PfeAccordionHeader.tag\n }: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`\n );\n }\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this._clickHandler);\n }\n\n get expanded() {\n return this.hasAttribute(\"aria-expanded\");\n }\n\n set expanded(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"aria-expanded\", true);\n this.button.setAttribute(\"aria-expanded\", true);\n } else {\n this.removeAttribute(\"aria-expanded\");\n this.button.setAttribute(\"aria-expanded\", false);\n }\n }\n\n _clickHandler(event) {\n this.dispatchEvent(\n new CustomEvent(`${PfeAccordion.tag}:change`, {\n detail: { expanded: !this.expanded },\n bubbles: true\n })\n );\n }\n}\n\nclass PfeAccordionPanel extends PFElement {\n\n get html() {\n return `
\n
\n \n
\n
`;\n }\n static get tag() {\n return \"pfe-accordion-panel\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-panel.html\";\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"region\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`;\n }\n }\n\n get expanded() {\n return this.hasAttribute(\"expanded\");\n }\n\n set expanded(val) {\n const value = Boolean(val);\n\n if (value) {\n this.setAttribute(\"expanded\", \"\");\n } else {\n this.removeAttribute(\"expanded\");\n }\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport default PfeAccordion;\n//# sourceMappingURL=pfe-accordion.js.map\n"],"names":["generateId","Math","random","toString","substr","Array","prototype","findIndex","defineProperty","predicate","this","TypeError","o","Object","len","length","thisArg","arguments","k","kValue","call","PfeAccordion","PFElement","setAttribute","addEventListener","tag","_changeHandler","_keydownHandler","all","customElements","whenDefined","PfeAccordionHeader","PfeAccordionPanel","then","_linkPanels","removeEventListener","attr","oldVal","newVal","headers","querySelectorAll","forEach","header","index","headerClass","classList","add","remove","_allHeaders","panels","_allPanels","panel","expanded","_collapseHeader","_collapsePanel","_expandHeader","_expandPanel","_this2","_this3","_this4","_panelForHeader","pfeId","evt","contains","target","nextElementSibling","detail","height","getBoundingClientRect","_animate","start","end","style","_this5","_transitionEndHandler","currentHeader","_isHeader","newHeader","key","_nextHeader","_previousHeader","_firstHeader","_lastHeader","shadowRoot","querySelector","focus","next","tagName","toLowerCase","error","newIndex","document","activeElement","element","_clickHandler","_this6","bind","getAttribute","id","hasAttribute","button","child","children","isHeaderTag","wrapperTag","createElement","innerText","appendChild","textContent","trim","warn","event","dispatchEvent","CustomEvent","val","Boolean","removeAttribute","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-autocomplete/package.json b/elements/pfe-autocomplete/package.json
index a0d87a8735..d1bfd84c2a 100644
--- a/elements/pfe-autocomplete/package.json
+++ b/elements/pfe-autocomplete/package.json
@@ -4,7 +4,7 @@
"className": "PfeAutocomplete",
"elementName": "pfe-autocomplete"
},
- "version": "1.0.0-prerelease.10",
+ "version": "1.0.0-prerelease.11",
"description": "Autocomplete element for PFElements",
"repository": {
"type": "git",
@@ -24,8 +24,8 @@
},
"license": "MIT",
"dependencies": {
- "@patternfly/pfe-sass": "^1.0.0-prerelease.10",
- "@patternfly/pfelement": "^1.0.0-prerelease.10"
+ "@patternfly/pfe-sass": "^1.0.0-prerelease.11",
+ "@patternfly/pfelement": "^1.0.0-prerelease.11"
},
"generator-pfelement-version": "0.5.5"
}
diff --git a/elements/pfe-autocomplete/pfe-autocomplete.css b/elements/pfe-autocomplete/pfe-autocomplete.css
new file mode 100644
index 0000000000..8ffd7390dc
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-autocomplete.css
@@ -0,0 +1,172 @@
+/*
+ * Copyright 2018 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.
+ */
+/* Palette of Border Colors */
+/* Palette of Feedback Colors */
+:host {
+ display: block;
+ position: relative;
+}
+
+.input-box-wrapper {
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ border: 0;
+}
+
+#input-box-wrapper ::slotted(input) {
+ width: 100%;
+ -webkit-box-flex: 1;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important;
+ box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important;
+ padding-left: 10px;
+ padding-right: 30px;
+ border-radius: 0;
+ background-color: #fff;
+ border: 1px solid #dfdfdf;
+ border: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf);
+ font-size: 16px;
+ /*1rem*/
+ height: 40px;
+ -webkit-transition: border-color ease-in-out 0.15s,-webkit-box-shadow ease-in-out 0.15s;
+ transition: border-color ease-in-out 0.15s,-webkit-box-shadow ease-in-out 0.15s;
+ transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
+ transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s,-webkit-box-shadow ease-in-out 0.15s;
+ opacity: 1;
+ outline: 0;
+}
+
+#input-box-wrapper ::slotted(input:disabled),
+button:disabled {
+ cursor: not-allowed;
+ background-color: transparent;
+ color: #ccc;
+ opacity: 0.5;
+}
+
+#input-box-wrapper button:focus,
+#input-box-wrapper ::slotted(input:focus) {
+ border-color: #66afe9;
+ outline: 0;
+}
+
+#input-box-wrapper ::slotted(input),
+button {
+ -webkit-appearance: none;
+}
+
+#input-box-wrapper ::slotted([type="search"]::-ms-clear) {
+ display: none;
+}
+
+#input-box-wrapper ::slotted(input[type="search"]::-webkit-search-cancel-button),
+#input-box-wrapper ::slotted(input[type="search"]::-webkit-search-decoration) {
+ -webkit-appearance: none;
+}
+
+button {
+ color: #cccccc;
+ background-color: transparent;
+ border: none;
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+ padding: 0px;
+ margin: 0px;
+ cursor: pointer;
+}
+
+button.clear-search {
+ right: 30px;
+ width: 20px;
+ margin: 2px 1px;
+ background-color: #fff;
+}
+
+button.clear-search svg {
+ width: 12px;
+ stroke: #ccc;
+}
+
+button.clear-search:hover svg,
+button.clear-search:focus svg {
+ opacity: 1;
+ stroke: #06c;
+}
+
+button[disabled].clear-search:hover svg,
+button[disabled].clear-search:focus svg {
+ stroke: #ccc;
+}
+
+button.search-button {
+ right: 1px;
+ width: 30px;
+}
+
+button.search-button svg {
+ fill: #06c;
+ width: 16px;
+}
+
+button.search-button:hover svg,
+button.search-button:focus svg {
+ fill: #004080;
+}
+
+button.clear-search:hover {
+ color: #ccc;
+}
+
+button.search-button:disabled svg {
+ fill: #ccc;
+}
+
+.loading {
+ position: absolute;
+ width: 30px;
+ right: 52px;
+ top: 0px;
+ bottom: 0px;
+}
+
+.loading svg {
+ width: 26px;
+ padding-top: 7px;
+}
+
+/*# sourceMappingURL=pfe-autocomplete.css.map */
diff --git a/elements/pfe-autocomplete/pfe-autocomplete.css.map b/elements/pfe-autocomplete/pfe-autocomplete.css.map
new file mode 100644
index 0000000000..770d196ba2
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-autocomplete.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-autocomplete.css","../../pfe-sass/variables/_colors.scss","pfe-autocomplete.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACtIA;EACE,cAAc;EACd,kBAAkB;AFuBpB;;AEpBA;EACE,kBAAkB;EAClB,oBAAY;EAAZ,qBAAY;EAAZ,oBAAY;EAAZ,aAAY;AFuBd;;AEpBA;EACE,kBAAkB;EAClB,UAAU;EACV,WAAW;EACX,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,sBAAsB;EACtB,SAAS;AFuBX;;AEpBA;EACE,WAAW;EACX,mBAAO;EAAP,eAAO;MAAP,WAAO;UAAP,OAAO;EACP,mEAAwD;UAAxD,2DAAwD;EACxD,kBAAkB;EAClB,mBAAmB;EACnB,gBAAgB;EAChB,sBAAsB;EACtB,yBAAgD;EAAhD,mEAAgD;EAChD,eAAe;EAAE,OAAA;EACjB,YAAY;EACZ,uFAAuE;EAAvE,+EAAuE;EAAvE,uEAAuE;EAAvE,4GAAuE;EACvE,UAAU;EACV,UAAU;AFwBZ;;AErBA;;EAEE,mBAAmB;EACnB,6BAA6B;EAC7B,WAAW;EACX,YAAY;AFwBd;;AErBA;;EAEE,qBAAqB;EACrB,UAAU;AFwBZ;;AErBA;;EAEE,wBAAwB;AFwB1B;;AErBA;EACE,aAAa;AFwBf;;AErBA;;EAEE,wBAAwB;AFwB1B;;AErBA;EACE,cAAc;EACd,6BAA6B;EAC7B,YAAY;EACZ,kBAAkB;EAClB,QAAQ;EACR,WAAW;EACX,YAAY;EACZ,WAAW;EACX,eAAe;AFwBjB;;AErBA;EACE,WAAW;EACX,WAAW;EACX,eAAe;EACf,sBAAsB;AFwBxB;;AErBA;EACE,WAAW;EACX,YAAY;AFwBd;;AErBA;;EAEE,UAAU;EACV,YAAY;AFwBd;;AErBA;;EAEE,YAAa;AFwBf;;AErBA;EACE,UAAU;EACV,WAAW;AFwBb;;AErBA;EACE,UAAU;EACV,WAAW;AFwBb;;AErBA;;EAEE,aAAa;AFwBf;;AErBA;EACE,WAAW;AFwBb;;AErBA;EACE,UAAU;AFwBZ;;AErBA;EACE,kBAAkB;EAClB,WAAW;EACX,WAAW;EACX,QAAQ;EACR,WAAW;AFwBb;;AErBA;EACE,WAAW;EACX,gBAAgB;AFwBlB","file":"pfe-autocomplete.css","sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n//\n// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: block;\n position: relative;\n}\n\n.input-box-wrapper {\n position: relative;\n display: flex;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n#input-box-wrapper ::slotted(input) {\n width: 100%;\n flex: 1;\n box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important;\n padding-left: 10px;\n padding-right: 30px;\n border-radius: 0;\n background-color: #fff;\n border: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf);\n font-size: 16px;\n /*1rem*/\n height: 40px;\n transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;\n opacity: 1;\n outline: 0;\n}\n\n#input-box-wrapper ::slotted(input:disabled),\nbutton:disabled {\n cursor: not-allowed;\n background-color: transparent;\n color: #ccc;\n opacity: 0.5;\n}\n\n#input-box-wrapper button:focus,\n#input-box-wrapper ::slotted(input:focus) {\n border-color: #66afe9;\n outline: 0;\n}\n\n#input-box-wrapper ::slotted(input),\nbutton {\n -webkit-appearance: none;\n}\n\n#input-box-wrapper ::slotted([type=\"search\"]::-ms-clear) {\n display: none;\n}\n\n#input-box-wrapper ::slotted(input[type=\"search\"]::-webkit-search-cancel-button),\n#input-box-wrapper ::slotted(input[type=\"search\"]::-webkit-search-decoration) {\n -webkit-appearance: none;\n}\n\nbutton {\n color: #cccccc;\n background-color: transparent;\n border: none;\n position: absolute;\n top: 0px;\n bottom: 0px;\n padding: 0px;\n margin: 0px;\n cursor: pointer;\n}\n\nbutton.clear-search {\n right: 30px;\n width: 20px;\n margin: 2px 1px;\n background-color: #fff;\n}\n\nbutton.clear-search svg {\n width: 12px;\n stroke: #ccc;\n}\n\nbutton.clear-search:hover svg,\nbutton.clear-search:focus svg {\n opacity: 1;\n stroke: #06c;\n}\n\nbutton[disabled].clear-search:hover svg,\nbutton[disabled].clear-search:focus svg {\n stroke: #ccc;\n}\n\nbutton.search-button {\n right: 1px;\n width: 30px;\n}\n\nbutton.search-button svg {\n fill: #06c;\n width: 16px;\n}\n\nbutton.search-button:hover svg,\nbutton.search-button:focus svg {\n fill: #004080;\n}\n\nbutton.clear-search:hover {\n color: #ccc;\n}\n\nbutton.search-button:disabled svg {\n fill: #ccc;\n}\n\n.loading {\n position: absolute;\n width: 30px;\n right: 52px;\n top: 0px;\n bottom: 0px;\n}\n\n.loading svg {\n width: 26px;\n padding-top: 7px;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n:host {\n display: block;\n position: relative;\n}\n\n.input-box-wrapper {\n position: relative;\n display:flex;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n#input-box-wrapper ::slotted(input) {\n width: 100%;\n flex: 1;\n box-shadow: inset 0 0px 0px rgba(0,0,0,0.075) !important;\n padding-left: 10px;\n padding-right: 30px;\n border-radius: 0;\n background-color: #fff;\n border: 1px solid #{pfe-color( surface--border)};\n font-size: 16px; /*1rem*/\n height: 40px;\n transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;\n opacity: 1;\n outline: 0;\n}\n\n#input-box-wrapper ::slotted(input:disabled),\nbutton:disabled {\n cursor: not-allowed;\n background-color: transparent;\n color: #ccc;\n opacity: 0.5;\n}\n\n#input-box-wrapper button:focus,\n#input-box-wrapper ::slotted(input:focus) {\n border-color: #66afe9;\n outline: 0;\n}\n\n#input-box-wrapper ::slotted(input),\nbutton {\n -webkit-appearance: none;\n}\n\n#input-box-wrapper ::slotted([type=\"search\"]::-ms-clear) {\n display: none;\n}\n\n#input-box-wrapper ::slotted(input[type=\"search\"]::-webkit-search-cancel-button),\n#input-box-wrapper ::slotted(input[type=\"search\"]::-webkit-search-decoration) {\n -webkit-appearance: none;\n}\n\nbutton {\n color: #cccccc;\n background-color: transparent;\n border: none;\n position: absolute;\n top: 0px;\n bottom: 0px;\n padding: 0px;\n margin: 0px;\n cursor: pointer;\n}\n\nbutton.clear-search {\n right: 30px;\n width: 20px;\n margin: 2px 1px;\n background-color: #fff;\n}\n\nbutton.clear-search svg {\n width: 12px;\n stroke: #ccc;\n}\n\nbutton.clear-search:hover svg,\nbutton.clear-search:focus svg {\n opacity: 1;\n stroke: #06c;\n}\n\nbutton[disabled].clear-search:hover svg,\nbutton[disabled].clear-search:focus svg {\n stroke: #ccc ;\n}\n\nbutton.search-button {\n right: 1px;\n width: 30px;\n}\n\nbutton.search-button svg {\n fill: #06c;\n width: 16px;\n}\n\nbutton.search-button:hover svg,\nbutton.search-button:focus svg {\n fill: #004080;\n}\n\nbutton.clear-search:hover {\n color: #ccc;\n}\n\nbutton.search-button:disabled svg {\n fill: #ccc;\n}\n\n.loading {\n position: absolute;\n width: 30px;\n right: 52px;\n top: 0px;\n bottom: 0px;\n}\n\n.loading svg {\n width: 26px;\n padding-top: 7px;\n}\n"]}
\ No newline at end of file
diff --git a/elements/pfe-autocomplete/pfe-autocomplete.css.min.map b/elements/pfe-autocomplete/pfe-autocomplete.css.min.map
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/pfe-autocomplete/pfe-autocomplete.js b/elements/pfe-autocomplete/pfe-autocomplete.js
new file mode 100644
index 0000000000..b55adc1e9a
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-autocomplete.js
@@ -0,0 +1,592 @@
+import PFElement from '../pfelement/pfelement.js';
+
+/*
+ * @license
+ * 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.
+ *
+*/
+
+const KEYCODE = {
+ ENTER: 13,
+ DOWN: 40,
+ UP: 38,
+ ESC: 27
+};
+
+// use this variable to debounce api call when user types very fast
+let throttle = false;
+
+class PfeAutocomplete extends PFElement {
+
+ get html() {
+ return `
`;
+ })
+ .join("")}`;
+ }
+
+ static get observedAttributes() {
+ return ["open", "reflow", "active-index"];
+ }
+
+ attributeChangedCallback(attr, oldVal, newVal) {
+ super.attributeChangedCallback();
+
+ if (this[name] !== newVal) {
+ this[name] = newVal;
+ }
+
+ if (attr === "active-index" && oldVal !== newVal) {
+ this._activeIndexChanged();
+ }
+
+ if (attr === "reflow") {
+ this._renderOptions();
+ }
+ }
+
+ _activeIndexChanged() {
+ if (
+ !this.data ||
+ this.data.length === 0 ||
+ this.activeIndex === null ||
+ this.activeIndex === "null"
+ )
+ return;
+
+ // remove active class
+ if (this._ul.querySelector(".active")) {
+ this._ul.querySelector(".active").classList.remove("active");
+ }
+
+ // add active class to selected option
+ let activeOption = this._ul.querySelector(
+ "li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")"
+ );
+
+ activeOption.classList.add("active");
+
+ // scroll to selected element when selected item with keyboard is out of view
+ let ulWrapper = this.shadowRoot.querySelector(".droplist");
+ let activeOptionHeight = activeOption.offsetHeight;
+ activeOptionHeight += parseInt(
+ window.getComputedStyle(activeOption).getPropertyValue("margin-bottom"),
+ 10
+ );
+ ulWrapper.scrollTop =
+ activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;
+ }
+
+ get open() {
+ return this.hasAttribute("open");
+ }
+
+ set open(val) {
+ val = Boolean(val);
+
+ if (val) {
+ this.setAttribute("open", "");
+ } else {
+ this.removeAttribute("open");
+ }
+ }
+
+ get activeIndex() {
+ return this.getAttribute("active-index");
+ }
+
+ set activeIndex(val) {
+ this.setAttribute("active-index", val);
+ }
+
+ get reflow() {
+ return this.hasAttribute("reflow");
+ }
+
+ set reflow(val) {
+ val = Boolean(val);
+
+ if (val) {
+ this.setAttribute("reflow", "");
+ } else {
+ this.removeAttribute("reflow");
+ }
+ }
+}
+
+PFElement.create(PfeSearchDroplist);
+PFElement.create(PfeAutocomplete);
+
+export default PfeAutocomplete;
+//# sourceMappingURL=pfe-autocomplete.js.map
diff --git a/elements/pfe-autocomplete/pfe-autocomplete.js.map b/elements/pfe-autocomplete/pfe-autocomplete.js.map
new file mode 100644
index 0000000000..d474bc6374
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-autocomplete.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-autocomplete.js","sources":["pfe-autocomplete.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\n/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport PFElement from \"../pfelement/pfelement.js\";\n\nconst KEYCODE = {\n ENTER: 13,\n DOWN: 40,\n UP: 38,\n ESC: 27\n};\n\n// use this variable to debounce api call when user types very fast\nlet throttle = false;\n\nclass PfeAutocomplete extends PFElement {\n\n get html() {\n return `
`;\n }\n static get tag() {\n return \"pfe-search-droplist\";\n }\n\n get templateUrl() {\n return \"pfe-search-droplist.html\";\n }\n\n get styleUrl() {\n return \"pfe-search-droplist.scss\";\n }\n\n constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\n \".suggestions-aria-help\"\n );\n\n this.activeIndex = null;\n this._ul = this.shadowRoot.querySelector(\"ul\");\n this._ul.addEventListener(\"mousedown\", this._optionSelected.bind(this));\n }\n\n disconnectedCallback() {\n this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.dispatchEvent(\n new CustomEvent(\"pfe-option-selected\", {\n detail: { optionValue: e.target.innerText },\n bubbles: true,\n composed: true\n })\n );\n }\n }\n\n _renderOptions() {\n this.reflow = \"\";\n\n let options = this.data;\n\n this._ariaAnnounce.innerHTML = `There are ${\n options.length\n } suggestions. Use the up and down arrows to browse.`;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `
${item}
`;\n })\n .join(\"\")}`;\n }\n\n static get observedAttributes() {\n return [\"open\", \"reflow\", \"active-index\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback();\n\n if (this[name] !== newVal) {\n this[name] = newVal;\n }\n\n if (attr === \"active-index\" && oldVal !== newVal) {\n this._activeIndexChanged();\n }\n\n if (attr === \"reflow\") {\n this._renderOptions();\n }\n }\n\n _activeIndexChanged() {\n if (\n !this.data ||\n this.data.length === 0 ||\n this.activeIndex === null ||\n this.activeIndex === \"null\"\n )\n return;\n\n // remove active class\n if (this._ul.querySelector(\".active\")) {\n this._ul.querySelector(\".active\").classList.remove(\"active\");\n }\n\n // add active class to selected option\n let activeOption = this._ul.querySelector(\n \"li:nth-child(\" + (parseInt(this.activeIndex, 10) + 1) + \")\"\n );\n\n activeOption.classList.add(\"active\");\n\n // scroll to selected element when selected item with keyboard is out of view\n let ulWrapper = this.shadowRoot.querySelector(\".droplist\");\n let activeOptionHeight = activeOption.offsetHeight;\n activeOptionHeight += parseInt(\n window.getComputedStyle(activeOption).getPropertyValue(\"margin-bottom\"),\n 10\n );\n ulWrapper.scrollTop =\n activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;\n }\n\n get open() {\n return this.hasAttribute(\"open\");\n }\n\n set open(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"open\", \"\");\n } else {\n this.removeAttribute(\"open\");\n }\n }\n\n get activeIndex() {\n return this.getAttribute(\"active-index\");\n }\n\n set activeIndex(val) {\n this.setAttribute(\"active-index\", val);\n }\n\n get reflow() {\n return this.hasAttribute(\"reflow\");\n }\n\n set reflow(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"reflow\", \"\");\n } else {\n this.removeAttribute(\"reflow\");\n }\n }\n}\n\nPFElement.create(PfeSearchDroplist);\nPFElement.create(PfeAutocomplete);\n\nexport default PfeAutocomplete;\n"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-autocomplete/pfe-autocomplete.min.css b/elements/pfe-autocomplete/pfe-autocomplete.min.css
new file mode 100644
index 0000000000..43e41f3ddf
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-autocomplete.min.css
@@ -0,0 +1 @@
+:host{display:block;position:relative}.input-box-wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 0 rgba(0,0,0,.075)!important;box-shadow:inset 0 0 0 rgba(0,0,0,.075)!important;padding-left:10px;padding-right:30px;border-radius:0;background-color:#fff;border:1px solid #dfdfdf;border:1px solid var(--pfe-theme--color--surface--border,#dfdfdf);font-size:16px;height:40px;-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{border-color:#66afe9;outline:0}#input-box-wrapper ::slotted(input),button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#ccc;background-color:transparent;border:none;position:absolute;top:0;bottom:0;padding:0;margin:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff}button.clear-search svg{width:12px;stroke:#ccc}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#ccc}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080}button.clear-search:hover{color:#ccc}button.search-button:disabled svg{fill:#ccc}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px}
\ No newline at end of file
diff --git a/elements/pfe-autocomplete/pfe-autocomplete.min.js b/elements/pfe-autocomplete/pfe-autocomplete.min.js
new file mode 100644
index 0000000000..5af3b0dca2
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-autocomplete.min.js
@@ -0,0 +1,25 @@
+import t from"../pfelement/pfelement.min.js";
+/*
+ * @license
+ * 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.
+ *
+*/const e={ENTER:13,DOWN:40,UP:38,ESC:27};let i=!1;class s extends t{get html(){return'
'}static get tag(){return"pfe-search-droplist"}get templateUrl(){return"pfe-search-droplist.html"}get styleUrl(){return"pfe-search-droplist.scss"}constructor(){super(o)}connectedCallback(){super.connectedCallback(),this._ariaAnnounce=this.shadowRoot.querySelector(".suggestions-aria-help"),this.activeIndex=null,this._ul=this.shadowRoot.querySelector("ul"),this._ul.addEventListener("mousedown",this._optionSelected.bind(this))}disconnectedCallback(){this._ul.removeEventListener("mousedown",this._optionSelected)}_optionSelected(t){"LI"===t.target.tagName&&this.dispatchEvent(new CustomEvent("pfe-option-selected",{detail:{optionValue:t.target.innerText},bubbles:!0,composed:!0}))}_renderOptions(){this.reflow="";let t=this.data;this._ariaAnnounce.innerHTML=`There are ${t.length} suggestions. Use the up and down arrows to browse.`,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=`${t.map((t,e)=>`
${t}
`).join("")}`}static get observedAttributes(){return["open","reflow","active-index"]}attributeChangedCallback(t,e,i){super.attributeChangedCallback(),this[name]!==i&&(this[name]=i),"active-index"===t&&e!==i&&this._activeIndexChanged(),"reflow"===t&&this._renderOptions()}_activeIndexChanged(){if(!this.data||0===this.data.length||null===this.activeIndex||"null"===this.activeIndex)return;this._ul.querySelector(".active")&&this._ul.querySelector(".active").classList.remove("active");let t=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");t.classList.add("active");let e=this.shadowRoot.querySelector(".droplist"),i=t.offsetHeight;i+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),e.scrollTop=t.offsetTop-e.offsetHeight+i}get open(){return this.hasAttribute("open")}set open(t){(t=Boolean(t))?this.setAttribute("open",""):this.removeAttribute("open")}get activeIndex(){return this.getAttribute("active-index")}set activeIndex(t){this.setAttribute("active-index",t)}get reflow(){return this.hasAttribute("reflow")}set reflow(t){(t=Boolean(t))?this.setAttribute("reflow",""):this.removeAttribute("reflow")}}t.create(o),t.create(s);export default s;
+//# sourceMappingURL=pfe-autocomplete.min.js.map
diff --git a/elements/pfe-autocomplete/pfe-autocomplete.min.js.map b/elements/pfe-autocomplete/pfe-autocomplete.min.js.map
new file mode 100644
index 0000000000..39d16db3de
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-autocomplete.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-autocomplete.min.js","sources":["pfe-autocomplete.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nconst KEYCODE = {\n ENTER: 13,\n DOWN: 40,\n UP: 38,\n ESC: 27\n};\n\n// use this variable to debounce api call when user types very fast\nlet throttle = false;\n\nclass PfeAutocomplete extends PFElement {\n\n get html() {\n return `
`;\n }\n static get tag() {\n return \"pfe-search-droplist\";\n }\n\n get templateUrl() {\n return \"pfe-search-droplist.html\";\n }\n\n get styleUrl() {\n return \"pfe-search-droplist.scss\";\n }\n\n constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\n \".suggestions-aria-help\"\n );\n\n this.activeIndex = null;\n this._ul = this.shadowRoot.querySelector(\"ul\");\n this._ul.addEventListener(\"mousedown\", this._optionSelected.bind(this));\n }\n\n disconnectedCallback() {\n this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.dispatchEvent(\n new CustomEvent(\"pfe-option-selected\", {\n detail: { optionValue: e.target.innerText },\n bubbles: true,\n composed: true\n })\n );\n }\n }\n\n _renderOptions() {\n this.reflow = \"\";\n\n let options = this.data;\n\n this._ariaAnnounce.innerHTML = `There are ${\n options.length\n } suggestions. Use the up and down arrows to browse.`;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `
${item}
`;\n })\n .join(\"\")}`;\n }\n\n static get observedAttributes() {\n return [\"open\", \"reflow\", \"active-index\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback();\n\n if (this[name] !== newVal) {\n this[name] = newVal;\n }\n\n if (attr === \"active-index\" && oldVal !== newVal) {\n this._activeIndexChanged();\n }\n\n if (attr === \"reflow\") {\n this._renderOptions();\n }\n }\n\n _activeIndexChanged() {\n if (\n !this.data ||\n this.data.length === 0 ||\n this.activeIndex === null ||\n this.activeIndex === \"null\"\n )\n return;\n\n // remove active class\n if (this._ul.querySelector(\".active\")) {\n this._ul.querySelector(\".active\").classList.remove(\"active\");\n }\n\n // add active class to selected option\n let activeOption = this._ul.querySelector(\n \"li:nth-child(\" + (parseInt(this.activeIndex, 10) + 1) + \")\"\n );\n\n activeOption.classList.add(\"active\");\n\n // scroll to selected element when selected item with keyboard is out of view\n let ulWrapper = this.shadowRoot.querySelector(\".droplist\");\n let activeOptionHeight = activeOption.offsetHeight;\n activeOptionHeight += parseInt(\n window.getComputedStyle(activeOption).getPropertyValue(\"margin-bottom\"),\n 10\n );\n ulWrapper.scrollTop =\n activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;\n }\n\n get open() {\n return this.hasAttribute(\"open\");\n }\n\n set open(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"open\", \"\");\n } else {\n this.removeAttribute(\"open\");\n }\n }\n\n get activeIndex() {\n return this.getAttribute(\"active-index\");\n }\n\n set activeIndex(val) {\n this.setAttribute(\"active-index\", val);\n }\n\n get reflow() {\n return this.hasAttribute(\"reflow\");\n }\n\n set reflow(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"reflow\", \"\");\n } else {\n this.removeAttribute(\"reflow\");\n }\n }\n}\n\nPFElement.create(PfeSearchDroplist);\nPFElement.create(PfeAutocomplete);\n\nexport default PfeAutocomplete;\n//# sourceMappingURL=pfe-autocomplete.js.map\n"],"names":["KEYCODE","ENTER","DOWN","UP","ESC","throttle","PfeAutocomplete","PFElement","html","tag","templateUrl","styleUrl","[object Object]","super","connectedCallback","this","loading","debounce","slotElems","shadowRoot","querySelector","assignedNodes","filter","n","nodeType","Node","ELEMENT_NODE","_input","addEventListener","_inputChanged","bind","_closeDroplist","setAttribute","_clearBtn","_clear","_searchBtn","_search","_dropdown","data","activeIndex","_inputKeyUp","_optionSelected","removeEventListener","observedAttributes","attr","oldVal","newVal","attributeChangedCallback","value","removeAttribute","isDisabled","selectedValue","getAttribute","val","hasAttribute","Boolean","initValue","_reset","window","setTimeout","_sendAutocompleteRequest","focus","_doSearch","open","e","detail","optionValue","searchQuery","dispatchEvent","CustomEvent","searchValue","bubbles","composed","input","autocompleteRequest","query","_autocompleteCallback","response","reflow","length","_openDroplist","parseInt","innerHTML","key","keyCode","optionsLength","_activeOption","PfeSearchDroplist","_ariaAnnounce","_ul","target","tagName","innerText","options","map","item","index","join","name","_activeIndexChanged","_renderOptions","classList","remove","activeOption","add","ulWrapper","activeOptionHeight","offsetHeight","getComputedStyle","getPropertyValue","scrollTop","offsetTop","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-autocomplete/pfe-autocomplete.umd.js b/elements/pfe-autocomplete/pfe-autocomplete.umd.js
new file mode 100644
index 0000000000..4097f208ab
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-autocomplete.umd.js
@@ -0,0 +1,638 @@
+(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.PfeAutocomplete = 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;
+ };
+
+ /*
+ * @license
+ * 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.
+ *
+ */
+
+ var KEYCODE = {
+ ENTER: 13,
+ DOWN: 40,
+ UP: 38,
+ ESC: 27
+ };
+
+ // use this variable to debounce api call when user types very fast
+ var throttle = false;
+
+ var PfeAutocomplete = function (_PFElement) {
+ inherits(PfeAutocomplete, _PFElement);
+ createClass(PfeAutocomplete, [{
+ key: "html",
+ get: function get$$1() {
+ return "
";
+ }).join("");
+ }
+ }, {
+ key: "attributeChangedCallback",
+ value: function attributeChangedCallback(attr, oldVal, newVal) {
+ get(PfeSearchDroplist.prototype.__proto__ || Object.getPrototypeOf(PfeSearchDroplist.prototype), "attributeChangedCallback", this).call(this);
+
+ if (this[name] !== newVal) {
+ this[name] = newVal;
+ }
+
+ if (attr === "active-index" && oldVal !== newVal) {
+ this._activeIndexChanged();
+ }
+
+ if (attr === "reflow") {
+ this._renderOptions();
+ }
+ }
+ }, {
+ key: "_activeIndexChanged",
+ value: function _activeIndexChanged() {
+ if (!this.data || this.data.length === 0 || this.activeIndex === null || this.activeIndex === "null") return;
+
+ // remove active class
+ if (this._ul.querySelector(".active")) {
+ this._ul.querySelector(".active").classList.remove("active");
+ }
+
+ // add active class to selected option
+ var activeOption = this._ul.querySelector("li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")");
+
+ activeOption.classList.add("active");
+
+ // scroll to selected element when selected item with keyboard is out of view
+ var ulWrapper = this.shadowRoot.querySelector(".droplist");
+ var activeOptionHeight = activeOption.offsetHeight;
+ activeOptionHeight += parseInt(window.getComputedStyle(activeOption).getPropertyValue("margin-bottom"), 10);
+ ulWrapper.scrollTop = activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;
+ }
+ }, {
+ key: "open",
+ get: function get$$1() {
+ return this.hasAttribute("open");
+ },
+ set: function set$$1(val) {
+ val = Boolean(val);
+
+ if (val) {
+ this.setAttribute("open", "");
+ } else {
+ this.removeAttribute("open");
+ }
+ }
+ }, {
+ key: "activeIndex",
+ get: function get$$1() {
+ return this.getAttribute("active-index");
+ },
+ set: function set$$1(val) {
+ this.setAttribute("active-index", val);
+ }
+ }, {
+ key: "reflow",
+ get: function get$$1() {
+ return this.hasAttribute("reflow");
+ },
+ set: function set$$1(val) {
+ val = Boolean(val);
+
+ if (val) {
+ this.setAttribute("reflow", "");
+ } else {
+ this.removeAttribute("reflow");
+ }
+ }
+ }], [{
+ key: "observedAttributes",
+ get: function get$$1() {
+ return ["open", "reflow", "active-index"];
+ }
+ }]);
+ return PfeSearchDroplist;
+ }(PFElement);
+
+ PFElement.create(PfeSearchDroplist);
+ PFElement.create(PfeAutocomplete);
+
+ return PfeAutocomplete;
+
+})));
+//# sourceMappingURL=pfe-autocomplete.umd.js.map
diff --git a/elements/pfe-autocomplete/pfe-autocomplete.umd.js.map b/elements/pfe-autocomplete/pfe-autocomplete.umd.js.map
new file mode 100644
index 0000000000..e5866f6f76
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-autocomplete.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-autocomplete.umd.js","sources":["pfe-autocomplete.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nconst KEYCODE = {\n ENTER: 13,\n DOWN: 40,\n UP: 38,\n ESC: 27\n};\n\n// use this variable to debounce api call when user types very fast\nlet throttle = false;\n\nclass PfeAutocomplete extends PFElement {\n\n get html() {\n return `
'}},{key:"templateUrl",get:function(){return"pfe-search-droplist.html"}},{key:"styleUrl",get:function(){return"pfe-search-droplist.scss"}}],[{key:"tag",get:function(){return"pfe-search-droplist"}}]),n(o,[{key:"connectedCallback",value:function(){a(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"connectedCallback",this).call(this),this._ariaAnnounce=this.shadowRoot.querySelector(".suggestions-aria-help"),this.activeIndex=null,this._ul=this.shadowRoot.querySelector("ul"),this._ul.addEventListener("mousedown",this._optionSelected.bind(this))}},{key:"disconnectedCallback",value:function(){this._ul.removeEventListener("mousedown",this._optionSelected)}},{key:"_optionSelected",value:function(t){"LI"===t.target.tagName&&this.dispatchEvent(new CustomEvent("pfe-option-selected",{detail:{optionValue:t.target.innerText},bubbles:!0,composed:!0}))}},{key:"_renderOptions",value:function(){this.reflow="";var t=this.data;this._ariaAnnounce.innerHTML="There are "+t.length+" suggestions. Use the up and down arrows to browse.",this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+t.map(function(t,e){return'
'+t+"
"}).join("")}},{key:"attributeChangedCallback",value:function(t,e,i){a(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"attributeChangedCallback",this).call(this),this[name]!==i&&(this[name]=i),"active-index"===t&&e!==i&&this._activeIndexChanged(),"reflow"===t&&this._renderOptions()}},{key:"_activeIndexChanged",value:function(){if(this.data&&0!==this.data.length&&null!==this.activeIndex&&"null"!==this.activeIndex){this._ul.querySelector(".active")&&this._ul.querySelector(".active").classList.remove("active");var t=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");t.classList.add("active");var e=this.shadowRoot.querySelector(".droplist"),i=t.offsetHeight;i+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),e.scrollTop=t.offsetTop-e.offsetHeight+i}}},{key:"open",get:function(){return this.hasAttribute("open")},set:function(t){(t=Boolean(t))?this.setAttribute("open",""):this.removeAttribute("open")}},{key:"activeIndex",get:function(){return this.getAttribute("active-index")},set:function(t){this.setAttribute("active-index",t)}},{key:"reflow",get:function(){return this.hasAttribute("reflow")},set:function(t){(t=Boolean(t))?this.setAttribute("reflow",""):this.removeAttribute("reflow")}}],[{key:"observedAttributes",get:function(){return["open","reflow","active-index"]}}]),o}();return e.create(s),e.create(t),t});
+//# sourceMappingURL=pfe-autocomplete.umd.min.js.map
diff --git a/elements/pfe-autocomplete/pfe-autocomplete.umd.min.js.map b/elements/pfe-autocomplete/pfe-autocomplete.umd.min.js.map
new file mode 100644
index 0000000000..914bcc5636
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-autocomplete.umd.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-autocomplete.umd.min.js","sources":["pfe-autocomplete.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nconst KEYCODE = {\n ENTER: 13,\n DOWN: 40,\n UP: 38,\n ESC: 27\n};\n\n// use this variable to debounce api call when user types very fast\nlet throttle = false;\n\nclass PfeAutocomplete extends PFElement {\n\n get html() {\n return `
`;\n }\n static get tag() {\n return \"pfe-search-droplist\";\n }\n\n get templateUrl() {\n return \"pfe-search-droplist.html\";\n }\n\n get styleUrl() {\n return \"pfe-search-droplist.scss\";\n }\n\n constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\n \".suggestions-aria-help\"\n );\n\n this.activeIndex = null;\n this._ul = this.shadowRoot.querySelector(\"ul\");\n this._ul.addEventListener(\"mousedown\", this._optionSelected.bind(this));\n }\n\n disconnectedCallback() {\n this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.dispatchEvent(\n new CustomEvent(\"pfe-option-selected\", {\n detail: { optionValue: e.target.innerText },\n bubbles: true,\n composed: true\n })\n );\n }\n }\n\n _renderOptions() {\n this.reflow = \"\";\n\n let options = this.data;\n\n this._ariaAnnounce.innerHTML = `There are ${\n options.length\n } suggestions. Use the up and down arrows to browse.`;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `
${item}
`;\n })\n .join(\"\")}`;\n }\n\n static get observedAttributes() {\n return [\"open\", \"reflow\", \"active-index\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback();\n\n if (this[name] !== newVal) {\n this[name] = newVal;\n }\n\n if (attr === \"active-index\" && oldVal !== newVal) {\n this._activeIndexChanged();\n }\n\n if (attr === \"reflow\") {\n this._renderOptions();\n }\n }\n\n _activeIndexChanged() {\n if (\n !this.data ||\n this.data.length === 0 ||\n this.activeIndex === null ||\n this.activeIndex === \"null\"\n )\n return;\n\n // remove active class\n if (this._ul.querySelector(\".active\")) {\n this._ul.querySelector(\".active\").classList.remove(\"active\");\n }\n\n // add active class to selected option\n let activeOption = this._ul.querySelector(\n \"li:nth-child(\" + (parseInt(this.activeIndex, 10) + 1) + \")\"\n );\n\n activeOption.classList.add(\"active\");\n\n // scroll to selected element when selected item with keyboard is out of view\n let ulWrapper = this.shadowRoot.querySelector(\".droplist\");\n let activeOptionHeight = activeOption.offsetHeight;\n activeOptionHeight += parseInt(\n window.getComputedStyle(activeOption).getPropertyValue(\"margin-bottom\"),\n 10\n );\n ulWrapper.scrollTop =\n activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;\n }\n\n get open() {\n return this.hasAttribute(\"open\");\n }\n\n set open(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"open\", \"\");\n } else {\n this.removeAttribute(\"open\");\n }\n }\n\n get activeIndex() {\n return this.getAttribute(\"active-index\");\n }\n\n set activeIndex(val) {\n this.setAttribute(\"active-index\", val);\n }\n\n get reflow() {\n return this.hasAttribute(\"reflow\");\n }\n\n set reflow(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"reflow\", \"\");\n } else {\n this.removeAttribute(\"reflow\");\n }\n }\n}\n\nPFElement.create(PfeSearchDroplist);\nPFElement.create(PfeAutocomplete);\n\nexport default PfeAutocomplete;\n//# sourceMappingURL=pfe-autocomplete.js.map\n"],"names":["KEYCODE","throttle","PfeAutocomplete","PFElement","loading","debounce","this","slotElems","shadowRoot","querySelector","assignedNodes","filter","n","nodeType","Node","ELEMENT_NODE","_input","addEventListener","_inputChanged","bind","_closeDroplist","setAttribute","_clearBtn","_clear","_searchBtn","_search","_dropdown","data","activeIndex","_inputKeyUp","_optionSelected","removeEventListener","attr","oldVal","newVal","value","removeAttribute","isDisabled","_reset","hasAttribute","setTimeout","_sendAutocompleteRequest","_this2","focus","_doSearch","open","e","selectedValue","detail","optionValue","searchQuery","dispatchEvent","CustomEvent","searchValue","input","autocompleteRequest","query","_autocompleteCallback","response","reflow","length","_openDroplist","parseInt","innerHTML","key","keyCode","optionsLength","_activeOption","getAttribute","val","Boolean","PfeSearchDroplist","_ariaAnnounce","_ul","target","tagName","innerText","options","map","item","index","join","name","_activeIndexChanged","_renderOptions","classList","remove","activeOption","add","ulWrapper","activeOptionHeight","offsetHeight","window","getComputedStyle","getPropertyValue","scrollTop","offsetTop","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-autocomplete/pfe-search-droplist.css b/elements/pfe-autocomplete/pfe-search-droplist.css
new file mode 100644
index 0000000000..953c1046fb
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-search-droplist.css
@@ -0,0 +1,84 @@
+/*
+ * Copyright 2018 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.
+ */
+/* Palette of Border Colors */
+/* Palette of Feedback Colors */
+:host {
+ position: relative;
+ display: none;
+ font-family: var(--pfe-theme--font-family);
+ font-size: var(--pfe-theme--font-size);
+ line-height: var(--pfe-theme--line-height);
+}
+
+:host([open]) {
+ display: block;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ border: 0;
+}
+
+.droplist {
+ position: absolute;
+ top: 100%;
+ left: 0px;
+ right: 0px;
+ max-height: 250px;
+ z-index: 9999;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ border: 1px solid #ccc;
+ background-color: #fff;
+}
+
+ul {
+ font-family: var(--pfe-theme--font-family);
+ font-size: var(--pfe-theme--font-size);
+ line-height: var(--pfe-theme--line-height);
+ border-top: none;
+ margin: 0px;
+ padding: 0px;
+ list-style: none;
+ cursor: pointer;
+}
+
+ul li {
+ display: list-item;
+ cursor: pointer;
+ padding: 10px;
+ margin: 0px;
+ /*margin needs to be zero otherwise we have blind area on click*/
+}
+
+ul li.active {
+ background-color: #ececec;
+ background-color: var(--pfe-theme--color--surface--lighter, #ececec);
+}
+
+/*# sourceMappingURL=pfe-search-droplist.css.map */
diff --git a/elements/pfe-autocomplete/pfe-search-droplist.css.map b/elements/pfe-autocomplete/pfe-search-droplist.css.map
new file mode 100644
index 0000000000..579c1a4cc9
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-search-droplist.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-search-droplist.css","../../pfe-sass/variables/_colors.scss","pfe-search-droplist.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACrIA;EACE,kBAAkB;EAClB,aAAa;EACb,0CAA0C;EAC1C,sCAAsC;EACtC,0CAA0C;AFsB5C;;AEnBA;EACE,cAAc;AFsBhB;;AEnBA;EACE,kBAAkB;EAClB,UAAU;EACV,WAAW;EACX,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,sBAAsB;EACtB,SAAS;AFsBX;;AEnBA;EACE,kBAAkB;EAClB,SAAS;EACT,SAAS;EACT,UAAU;EACV,iBAAiB;EACjB,aAAa;EACb,kBAAkB;EAClB,kBAAkB;EAClB,sBAAsB;EACtB,sBAAsB;AFsBxB;;AEnBA;EACE,0CAA0C;EAC1C,sCAAsC;EACtC,0CAA0C;EAC1C,gBAAgB;EAChB,WAAW;EACX,YAAY;EACZ,gBAAgB;EAChB,eAAe;AFsBjB;;AE9BA;EAWM,kBAAkB;EAClB,eAAe;EACf,aAAa;EACb,WAAW;EAAE,gEAAA;AFwBnB;;AEtCA;EAgBU,yBAAkB;EAAlB,oEAAkB;AF0B5B","file":"pfe-search-droplist.css","sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n//\n// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n position: relative;\n display: none;\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height);\n}\n\n:host([open]) {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.droplist {\n position: absolute;\n top: 100%;\n left: 0px;\n right: 0px;\n max-height: 250px;\n z-index: 9999;\n overflow-y: scroll;\n overflow-x: hidden;\n border: 1px solid #ccc;\n background-color: #fff;\n}\n\nul {\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height);\n border-top: none;\n margin: 0px;\n padding: 0px;\n list-style: none;\n cursor: pointer;\n}\n\nul li {\n display: list-item;\n cursor: pointer;\n padding: 10px;\n margin: 0px;\n /*margin needs to be zero otherwise we have blind area on click*/\n}\n\nul li.active {\n background-color: var(--pfe-theme--color--surface--lighter, #ececec);\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../pfe-sass/pfe-sass\";\n\n:host {\n position: relative;\n display: none;\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height);\n}\n\n:host([open]) {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.droplist {\n position: absolute;\n top: 100%;\n left: 0px;\n right: 0px;\n max-height: 250px;\n z-index: 9999;\n overflow-y: scroll;\n overflow-x: hidden;\n border: 1px solid #ccc;\n background-color: #fff;\n}\n\nul {\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height);\n border-top: none;\n margin: 0px;\n padding: 0px;\n list-style: none;\n cursor: pointer;\n\n li {\n display: list-item;\n cursor: pointer;\n padding: 10px;\n margin: 0px; /*margin needs to be zero otherwise we have blind area on click*/\n &.active {\n background-color: #{pfe-color( surface--lighter )};;\n }\n }\n}\n"]}
\ No newline at end of file
diff --git a/elements/pfe-autocomplete/pfe-search-droplist.css.min.map b/elements/pfe-autocomplete/pfe-search-droplist.css.min.map
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/pfe-autocomplete/pfe-search-droplist.min.css b/elements/pfe-autocomplete/pfe-search-droplist.min.css
new file mode 100644
index 0000000000..c2490d0e93
--- /dev/null
+++ b/elements/pfe-autocomplete/pfe-search-droplist.min.css
@@ -0,0 +1 @@
+:host{position:relative;display:none;font-family:var(--pfe-theme--font-family);font-size:var(--pfe-theme--font-size);line-height:var(--pfe-theme--line-height)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:var(--pfe-theme--font-family);font-size:var(--pfe-theme--font-size);line-height:var(--pfe-theme--line-height);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#ececec;background-color:var(--pfe-theme--color--surface--lighter,#ececec)}
\ No newline at end of file
diff --git a/elements/pfe-avatar/djb-hash.js b/elements/pfe-avatar/djb-hash.js
new file mode 100644
index 0000000000..8ca6d0ba45
--- /dev/null
+++ b/elements/pfe-avatar/djb-hash.js
@@ -0,0 +1,20 @@
+/**
+ * djb2 string hashing function.
+ *
+ * @see http://www.cse.yorku.ca/~oz/hash.html
+ * @param {String} str the string to hash.
+ * @return {Number} a positive integer
+ */
+
+function hash(str) {
+ let hash = 5381;
+ let i = str.length;
+
+ while (i) {
+ hash = (hash * 33) ^ str.charCodeAt(--i);
+ }
+
+ return hash >>> 0;
+}
+
+export { hash };
diff --git a/elements/pfe-avatar/hslrgb.js b/elements/pfe-avatar/hslrgb.js
new file mode 100644
index 0000000000..8c2a2e6303
--- /dev/null
+++ b/elements/pfe-avatar/hslrgb.js
@@ -0,0 +1,107 @@
+function h2rgb(v1, v2, vH) {
+ if (vH < 0) vH += 1;
+ if (vH > 1) vH -= 1;
+ if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH;
+ if (2 * vH < 1) return v2;
+ if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6;
+ return v1;
+}
+
+/**
+ * Convert an HSL color to RGB.
+ *
+ * @param {Number} H the hue component
+ * @param {Number} S the saturation component
+ * @param {Number} L the luminance component
+ * @return {Array} [R, G, B]
+ *
+ * @see https://www.easyrgb.com/en/math.php
+ */
+export function hsl2rgb(_H, _S, _L) {
+ let R, G, B;
+
+ const H = Math.max(0, Math.min(1, _H));
+ const S = Math.max(0, Math.min(1, _S));
+ const L = Math.max(0, Math.min(1, _L));
+
+ if (S == 0) {
+ R = L * 255;
+ G = L * 255;
+ B = L * 255;
+ } else {
+ let a, b;
+
+ if (L < 0.5) {
+ b = L * (1 + S);
+ } else {
+ b = L + S - S * L;
+ }
+
+ a = 2 * L - b;
+
+ R = 255 * h2rgb(a, b, H + 1 / 3);
+ G = 255 * h2rgb(a, b, H);
+ B = 255 * h2rgb(a, b, H - 1 / 3);
+ }
+
+ return [R, G, B];
+}
+
+/**
+ * Convert an RGBcolor to HSL .
+ *
+ * @param {Number} R the red component
+ * @param {Number} G the green component
+ * @param {Number} B the blue component
+ * @return {Array} [H, S, L]
+ *
+ * @see https://www.easyrgb.com/en/math.php
+ */
+export function rgb2hsl(_R, _G, _B) {
+ let H, S, L;
+
+ const R = Math.max(0, Math.min(255, _R));
+ const G = Math.max(0, Math.min(255, _G));
+ const B = Math.max(0, Math.min(255, _B));
+
+ const r = R / 255;
+ const g = G / 255;
+ const b = B / 255;
+
+ const var_min = Math.min(Math.min(r, g), b);
+ const var_max = Math.max(Math.max(r, g), b);
+ const del_max = var_max - var_min;
+
+ L = (var_max + var_min) / 2;
+
+ if (del_max === 0) {
+ H = 0;
+ S = 0;
+ } else {
+ if (L < 0.5) {
+ S = del_max / (var_max + var_min);
+ } else {
+ S = del_max / (2 - var_max - var_min);
+ }
+
+ const del_r = ((var_max - r) / 6 + del_max / 2) / del_max;
+ const del_g = ((var_max - g) / 6 + del_max / 2) / del_max;
+ const del_b = ((var_max - b) / 6 + del_max / 2) / del_max;
+
+ if (r == var_max) {
+ H = del_b - del_g;
+ } else if (g == var_max) {
+ H = 1 / 3 + del_r - del_b;
+ } else if (b == var_max) {
+ H = 2 / 3 + del_g - del_r;
+ }
+
+ if (H < 0) {
+ H += 1;
+ } else if (H > 1) {
+ H -= 1;
+ }
+ }
+
+ return [H, S, L];
+}
diff --git a/elements/pfe-avatar/package.json b/elements/pfe-avatar/package.json
index d430ee691c..49bc6aabef 100644
--- a/elements/pfe-avatar/package.json
+++ b/elements/pfe-avatar/package.json
@@ -4,7 +4,7 @@
"className": "PfeAvatar",
"elementName": "pfe-avatar"
},
- "version": "1.0.0-prerelease.10",
+ "version": "1.0.0-prerelease.11",
"description": "Avatar element for PFElements",
"repository": {
"type": "git",
@@ -24,8 +24,8 @@
},
"license": "MIT",
"dependencies": {
- "@patternfly/pfe-sass": "^1.0.0-prerelease.10",
- "@patternfly/pfelement": "^1.0.0-prerelease.10"
+ "@patternfly/pfe-sass": "^1.0.0-prerelease.11",
+ "@patternfly/pfelement": "^1.0.0-prerelease.11"
},
"generator-pfelement-version": "0.6.8"
}
diff --git a/elements/pfe-avatar/pfe-avatar.css b/elements/pfe-avatar/pfe-avatar.css
new file mode 100644
index 0000000000..029a6f45d0
--- /dev/null
+++ b/elements/pfe-avatar/pfe-avatar.css
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2018 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.
+ */
+/* Palette of Border Colors */
+/* Palette of Feedback Colors */
+:host {
+ --pfe-avatar--width: 128px;
+ display: block;
+ position: relative;
+ width: var(--pfe-avatar--width);
+ height: var(--pfe-avatar--width);
+}
+
+:host canvas {
+ width: 100%;
+ height: 100%;
+ image-rendering: optimizeSpeed;
+ /* Older versions of FF */
+ image-rendering: -moz-crisp-edges;
+ /* FF 6.0+ */
+ image-rendering: -webkit-optimize-contrast;
+ /* Safari */
+ image-rendering: -o-crisp-edges;
+ /* OS X & Windows Opera (12.02+) */
+ image-rendering: -o-pixelated;
+ image-rendering: pixelated;
+ /* Awesome future-browsers */
+ -ms-interpolation-mode: nearest-neighbor;
+ /* IE */
+}
+
+:host([pfe-shape="rounded"]) img,
+:host([pfe-shape="rounded"]) canvas {
+ border-radius: calc(var(--pfe-avatar--width) / 8 + 1px);
+}
+
+:host([pfe-shape="circle"]) img,
+:host([pfe-shape="circle"]) canvas {
+ border-radius: 50%;
+}
+
+:host([pfe-src]) canvas {
+ display: none;
+}
+
+:host([pfe-src]) img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+
+:host(:not([pfe-src])) img {
+ display: none;
+}
+
+:host([hidden]) {
+ display: none;
+}
+
+/*# sourceMappingURL=pfe-avatar.css.map */
diff --git a/elements/pfe-avatar/pfe-avatar.css.map b/elements/pfe-avatar/pfe-avatar.css.map
new file mode 100644
index 0000000000..90f037250c
--- /dev/null
+++ b/elements/pfe-avatar/pfe-avatar.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-avatar.css","../../pfe-sass/variables/_colors.scss","pfe-avatar.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACrIA;EACE,0BAAoB;EAEpB,cAAc;EACd,kBAAkB;EAElB,+BAA+B;EAC/B,gCAAgC;AFoBlC;;AE3BA;EAUI,WAAW;EACX,YAAY;EAEZ,8BAA8B;EAAE,kCAAA;EAChC,iCAAiC;EAAE,kCAAA;EACnC,0CAA0C;EAAE,kCAAA;EAC5C,+BAA+B;EAAE,kCAAA;EACjC,6BAA0B;EAA1B,0BAA0B;EAAE,kCAAA;EAC5B,wCAAwC;EAAE,kCAAA;AF0B9C;;AEtBA;;EAOI,uDAAuD;AFoB3D;;AEhBA;;EAGI,kBAAkB;AFkBtB;;AEbA;EAEI,aAAa;AFejB;;AEjBA;EAMI,cAAc;EACd,WAAW;EACX,YAAY;EACZ,oBAAiB;KAAjB,iBAAiB;AFerB;;AEVA;EACE,aAAa;AFaf;;AEVA;EACE,aAAa;AFaf","file":"pfe-avatar.css","sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n//\n// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n --pfe-avatar--width: 128px;\n display: block;\n position: relative;\n width: var(--pfe-avatar--width);\n height: var(--pfe-avatar--width);\n}\n\n:host canvas {\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n /* Older versions of FF */\n image-rendering: -moz-crisp-edges;\n /* FF 6.0+ */\n image-rendering: -webkit-optimize-contrast;\n /* Safari */\n image-rendering: -o-crisp-edges;\n /* OS X & Windows Opera (12.02+) */\n image-rendering: pixelated;\n /* Awesome future-browsers */\n -ms-interpolation-mode: nearest-neighbor;\n /* IE */\n}\n\n:host([pfe-shape=\"rounded\"]) img,\n:host([pfe-shape=\"rounded\"]) canvas {\n border-radius: calc(var(--pfe-avatar--width) / 8 + 1px);\n}\n\n:host([pfe-shape=\"circle\"]) img,\n:host([pfe-shape=\"circle\"]) canvas {\n border-radius: 50%;\n}\n\n:host([pfe-src]) canvas {\n display: none;\n}\n\n:host([pfe-src]) img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n:host(:not([pfe-src])) img {\n display: none;\n}\n\n:host([hidden]) {\n display: none;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n:host {\n --pfe-avatar--width: 128px;\n\n display: block;\n position: relative;\n\n width: var(--pfe-avatar--width);\n height: var(--pfe-avatar--width); // not a typo; width == height\n\n canvas {\n width: 100%;\n height: 100%;\n\n image-rendering: optimizeSpeed; /* Older versions of FF */\n image-rendering: -moz-crisp-edges; /* FF 6.0+ */\n image-rendering: -webkit-optimize-contrast; /* Safari */\n image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */\n image-rendering: pixelated; /* Awesome future-browsers */\n -ms-interpolation-mode: nearest-neighbor; /* IE */\n }\n}\n\n:host([pfe-shape=\"rounded\"]) {\n // when border radius lines up with the size of the avatar's random\n // patterns, it looks nice, so make border-radius the same size as the\n // patterns, ie 1/8th the width of the avatars. add 1px beacuse it looks\n // just a little bit better.\n img,\n canvas {\n border-radius: calc(var(--pfe-avatar--width) / 8 + 1px);\n }\n}\n\n:host([pfe-shape=\"circle\"]) {\n img,\n canvas {\n border-radius: 50%;\n }\n}\n\n// when src attribute is provided, show the img but hide the canvas\n:host([pfe-src]) {\n canvas {\n display: none;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n// when src attribute is not present, hide the img\n:host(:not([pfe-src])) img {\n display: none;\n}\n\n:host([hidden]) {\n display: none;\n}\n"]}
\ No newline at end of file
diff --git a/elements/pfe-avatar/pfe-avatar.css.min.map b/elements/pfe-avatar/pfe-avatar.css.min.map
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/pfe-avatar/pfe-avatar.js b/elements/pfe-avatar/pfe-avatar.js
new file mode 100644
index 0000000000..78ac2a90c7
--- /dev/null
+++ b/elements/pfe-avatar/pfe-avatar.js
@@ -0,0 +1,474 @@
+import PFElement from '../pfelement/pfelement.js';
+
+/**
+ * djb2 string hashing function.
+ *
+ * @see http://www.cse.yorku.ca/~oz/hash.html
+ * @param {String} str the string to hash.
+ * @return {Number} a positive integer
+ */
+
+function hash(str) {
+ let hash = 5381;
+ let i = str.length;
+
+ while (i) {
+ hash = (hash * 33) ^ str.charCodeAt(--i);
+ }
+
+ return hash >>> 0;
+}
+
+function h2rgb(v1, v2, vH) {
+ if (vH < 0) vH += 1;
+ if (vH > 1) vH -= 1;
+ if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH;
+ if (2 * vH < 1) return v2;
+ if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6;
+ return v1;
+}
+
+/**
+ * Convert an HSL color to RGB.
+ *
+ * @param {Number} H the hue component
+ * @param {Number} S the saturation component
+ * @param {Number} L the luminance component
+ * @return {Array} [R, G, B]
+ *
+ * @see https://www.easyrgb.com/en/math.php
+ */
+function hsl2rgb(_H, _S, _L) {
+ let R, G, B;
+
+ const H = Math.max(0, Math.min(1, _H));
+ const S = Math.max(0, Math.min(1, _S));
+ const L = Math.max(0, Math.min(1, _L));
+
+ if (S == 0) {
+ R = L * 255;
+ G = L * 255;
+ B = L * 255;
+ } else {
+ let a, b;
+
+ if (L < 0.5) {
+ b = L * (1 + S);
+ } else {
+ b = L + S - S * L;
+ }
+
+ a = 2 * L - b;
+
+ R = 255 * h2rgb(a, b, H + 1 / 3);
+ G = 255 * h2rgb(a, b, H);
+ B = 255 * h2rgb(a, b, H - 1 / 3);
+ }
+
+ return [R, G, B];
+}
+
+/**
+ * Convert an RGBcolor to HSL .
+ *
+ * @param {Number} R the red component
+ * @param {Number} G the green component
+ * @param {Number} B the blue component
+ * @return {Array} [H, S, L]
+ *
+ * @see https://www.easyrgb.com/en/math.php
+ */
+function rgb2hsl(_R, _G, _B) {
+ let H, S, L;
+
+ const R = Math.max(0, Math.min(255, _R));
+ const G = Math.max(0, Math.min(255, _G));
+ const B = Math.max(0, Math.min(255, _B));
+
+ const r = R / 255;
+ const g = G / 255;
+ const b = B / 255;
+
+ const var_min = Math.min(Math.min(r, g), b);
+ const var_max = Math.max(Math.max(r, g), b);
+ const del_max = var_max - var_min;
+
+ L = (var_max + var_min) / 2;
+
+ if (del_max === 0) {
+ H = 0;
+ S = 0;
+ } else {
+ if (L < 0.5) {
+ S = del_max / (var_max + var_min);
+ } else {
+ S = del_max / (2 - var_max - var_min);
+ }
+
+ const del_r = ((var_max - r) / 6 + del_max / 2) / del_max;
+ const del_g = ((var_max - g) / 6 + del_max / 2) / del_max;
+ const del_b = ((var_max - b) / 6 + del_max / 2) / del_max;
+
+ if (r == var_max) {
+ H = del_b - del_g;
+ } else if (g == var_max) {
+ H = 1 / 3 + del_r - del_b;
+ } else if (b == var_max) {
+ H = 2 / 3 + del_g - del_r;
+ }
+
+ if (H < 0) {
+ H += 1;
+ } else if (H > 1) {
+ H -= 1;
+ }
+ }
+
+ return [H, S, L];
+}
+
+/*
+ * @license
+ * 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 PfeAvatar extends PFElement {
+
+ get html() {
+ return `
+`;
+ }
+ static get tag() {
+ return "pfe-avatar";
+ }
+
+ get templateUrl() {
+ return "pfe-avatar.html";
+ }
+
+ get styleUrl() {
+ return "pfe-avatar.scss";
+ }
+
+ static get observedAttributes() {
+ return ["pfe-name", "pfe-pattern", "pfe-src", "pfe-shape"];
+ }
+
+ static get patterns() {
+ return {
+ triangles: "triangles",
+ squares: "squares"
+ };
+ }
+
+ static get defaultColors() {
+ return "#67accf #448087 #709c6b #a35252 #826cbb";
+ }
+
+ get name() {
+ return this.getAttribute("pfe-name");
+ }
+
+ set name(val) {
+ return this.setAttribute("pfe-name", val);
+ }
+
+ get src() {
+ return this.getAttribute("pfe-src");
+ }
+
+ set src(href) {
+ return this.setAttribute("pfe-src", href);
+ }
+
+ get pattern() {
+ return this.getAttribute("pfe-pattern") || PfeAvatar.patterns.squares;
+ }
+
+ set pattern(name) {
+ if (!PfeAvatar.patterns[name]) {
+ this.log(
+ `invalid pattern "${name}", valid patterns are: ${Object.values(
+ PfeAvatar.patterns
+ )}`
+ );
+ return;
+ }
+ return this.setAttribute("pfe-pattern", name);
+ }
+
+ constructor() {
+ super(PfeAvatar);
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ this._initCanvas();
+
+ this.dispatchEvent(
+ new CustomEvent(`${PfeAvatar.tag}:connected`, {
+ bubbles: false
+ })
+ );
+ }
+
+ attributeChangedCallback(attr, oldValue, newValue) {
+ super.attributeChangedCallback(...arguments);
+
+ if (this.connected) {
+ this.update();
+ } else {
+ this.addEventListener(`${PfeAvatar.tag}:connected`, () => this.update());
+ }
+ }
+
+ _initCanvas() {
+ this._canvas = this.shadowRoot.querySelector("canvas");
+ const size = this.var("--pfe-avatar--width").replace(/px$/, "");
+ this._canvas.width = size;
+ this._canvas.height = size;
+
+ this._squareSize = this._canvas.width / 8;
+ this._triangleSize = this._canvas.width / 4;
+
+ this._ctx = this._canvas.getContext("2d");
+ }
+
+ static _registerColors() {
+ this.colors = [];
+ const themeColors = this.var("--pfe-avatar--colors") || this.defaultColors;
+
+ themeColors.split(/\s+/).forEach(colorCode => {
+ let pattern;
+ switch (colorCode.length) {
+ case 4: // ex: "#0fc"
+ pattern = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(colorCode);
+ if (pattern) {
+ pattern.shift();
+ const color = pattern.map(c => parseInt(c + c, 16));
+ this._registerColor(color);
+ } else {
+ this.log(`[pfe-avatar] invalid color ${colorCode}`);
+ }
+ break;
+ case 7: // ex: "#00ffcc"
+ pattern = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(
+ colorCode
+ );
+ if (pattern) {
+ pattern.shift();
+ const color = pattern.map(c => parseInt(c, 16));
+ this._registerColor(color);
+ } else {
+ this.log(`[pfe-avatar] invalid color ${colorCode}`);
+ }
+ }
+ });
+
+ return this.colors;
+ }
+
+ static _registerColor(color) {
+ PfeAvatar.colors.push({
+ color1: `rgb(${color.join(",")})`,
+ color2: `rgb(${this._adjustColor(color).join(",")})`
+ });
+ }
+
+ static _adjustColor(color) {
+ const dark = 0.1;
+ const l_adj = 0.1; // luminance adjustment
+ const hsl = rgb2hsl(...color);
+
+ // if luminance is too dark already, then lighten the alternate color
+ // instead of darkening it.
+ hsl[2] += hsl[2] > dark ? -l_adj : l_adj;
+
+ return hsl2rgb(...hsl);
+ }
+
+ update() {
+ // if we have a src element, update the img, otherwise update the random pattern
+ if (this.hasAttribute("pfe-src")) {
+ this.shadowRoot.querySelector("img").src = this.src;
+ } else {
+ const bitPattern = hash(this.name).toString(2);
+ const arrPattern = bitPattern.split("").map(n => Number(n));
+ this._colorIndex = Math.floor(
+ (PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32)
+ );
+ this.color1 = PfeAvatar.colors[this._colorIndex].color1;
+ this.color2 = PfeAvatar.colors[this._colorIndex].color2;
+
+ this._clear();
+ this._drawBackground();
+ if (this.pattern === PfeAvatar.patterns.squares) {
+ this._drawSquarePattern(arrPattern);
+ } else if (this.pattern === PfeAvatar.patterns.triangles) {
+ this._drawTrianglePattern(arrPattern);
+ }
+ // this._drawGradient();
+ }
+ }
+
+ _clear() {
+ this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+ }
+
+ _drawBackground() {
+ this._ctx.fillStyle = this.color1;
+ this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
+ }
+
+ _drawSquarePattern(pattern) {
+ this._ctx.fillStyle = this.color2;
+ if (this._ctx) {
+ let i = pattern.length;
+ while (i--) {
+ if (pattern[i]) {
+ this._drawMirroredSquare(i % 4, Math.floor(i / 4));
+ }
+ }
+ }
+ }
+
+ /**
+ * Draw a square at the given position, mirrored onto both the left and right half of the canvas.
+ */
+ _drawMirroredSquare(x, y) {
+ if (this._ctx) {
+ this._drawSquare(x, y);
+ this._drawSquare(7 - x, y);
+ }
+ }
+
+ _drawSquare(x, y) {
+ this._ctx.fillRect(
+ this._squareSize * x,
+ this._squareSize * y,
+ this._squareSize,
+ this._squareSize
+ );
+ }
+
+ _drawTrianglePattern(pattern) {
+ this._ctx.fillStyle = this.color2;
+ if (this._ctx) {
+ let i = pattern.length;
+ while (i--) {
+ if (pattern[i]) {
+ const x = Math.floor(i / 2) % 2;
+ const y = Math.floor(i / 4);
+ const alt = i % 4;
+
+ const p1 = [x, y];
+ const p2 = [x, y];
+ const p3 = [x, y];
+
+ switch (alt) {
+ case 0:
+ p2[1]++;
+ p3[0]++;
+ p3[1]++;
+ break;
+ case 1:
+ p2[0]++;
+ p3[0]++;
+ p3[1]++;
+ break;
+ case 2:
+ p2[0]++;
+ p3[1]++;
+ break;
+ case 3:
+ p1[0]++;
+ p2[0]++;
+ p2[1]++;
+ p3[1]++;
+ break;
+ }
+
+ this._drawMirroredTriangle(p1, p2, p3);
+ }
+ }
+ }
+ }
+
+ /**
+ * Draw a square at the given position in the top-left quadrant of the
+ * canvas, and mirrored to the other three quadrants.
+ */
+ _drawMirroredTriangle(p1, p2, p3) {
+ if (this._ctx) {
+ this._drawTriangle(p1, p2, p3);
+ this._drawTriangle(
+ [4 - p1[0], p1[1]],
+ [4 - p2[0], p2[1]],
+ [4 - p3[0], p3[1]]
+ );
+ }
+ }
+
+ _drawTriangle(p1, p2, p3) {
+ this._ctx.beginPath();
+ this._ctx.moveTo(...p1.map(c => c * this._triangleSize));
+ this._ctx.lineTo(...p2.map(c => c * this._triangleSize));
+ this._ctx.lineTo(...p3.map(c => c * this._triangleSize));
+ this._ctx.closePath();
+ this._ctx.fill();
+ this._ctx.fill();
+ }
+
+ _drawGradient() {
+ const gradient = this._ctx.createLinearGradient(
+ 0,
+ this._canvas.height,
+ this._canvas.width,
+ 0
+ );
+ const color = this.color2;
+ let gradientColor1 = color;
+ let gradientColor2 = color;
+ if (/^#[A-f0-9]{3}$/.test(color)) {
+ // color is of the form "#fff"
+ gradientColor1 += "c";
+ gradientColor2 += "0";
+ } else if (/^#[A-f0-9]{6}$/.test(color)) {
+ // color is of the form "#ffffff"
+ gradientColor1 += "cc";
+ gradientColor2 += "00";
+ }
+ gradient.addColorStop(0, gradientColor1);
+ gradient.addColorStop(1, gradientColor2);
+ gradient.addColorStop(1, gradientColor1);
+ this._ctx.fillStyle = gradient;
+ this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
+ }
+}
+
+PfeAvatar._registerColors();
+
+PFElement.create(PfeAvatar);
+
+export default PfeAvatar;
+//# sourceMappingURL=pfe-avatar.js.map
diff --git a/elements/pfe-avatar/pfe-avatar.js.map b/elements/pfe-avatar/pfe-avatar.js.map
new file mode 100644
index 0000000000..d7f079de96
--- /dev/null
+++ b/elements/pfe-avatar/pfe-avatar.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-avatar.js","sources":["djb-hash.js","hslrgb.js","pfe-avatar.js"],"sourcesContent":["/**\n * djb2 string hashing function.\n *\n * @see http://www.cse.yorku.ca/~oz/hash.html\n * @param {String} str the string to hash.\n * @return {Number} a positive integer\n */\n\nfunction hash(str) {\n let hash = 5381;\n let i = str.length;\n\n while (i) {\n hash = (hash * 33) ^ str.charCodeAt(--i);\n }\n\n return hash >>> 0;\n}\n\nexport { hash };\n","function h2rgb(v1, v2, vH) {\n if (vH < 0) vH += 1;\n if (vH > 1) vH -= 1;\n if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH;\n if (2 * vH < 1) return v2;\n if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6;\n return v1;\n}\n\n/**\n * Convert an HSL color to RGB.\n *\n * @param {Number} H the hue component\n * @param {Number} S the saturation component\n * @param {Number} L the luminance component\n * @return {Array} [R, G, B]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nexport function hsl2rgb(_H, _S, _L) {\n let R, G, B;\n\n const H = Math.max(0, Math.min(1, _H));\n const S = Math.max(0, Math.min(1, _S));\n const L = Math.max(0, Math.min(1, _L));\n\n if (S == 0) {\n R = L * 255;\n G = L * 255;\n B = L * 255;\n } else {\n let a, b;\n\n if (L < 0.5) {\n b = L * (1 + S);\n } else {\n b = L + S - S * L;\n }\n\n a = 2 * L - b;\n\n R = 255 * h2rgb(a, b, H + 1 / 3);\n G = 255 * h2rgb(a, b, H);\n B = 255 * h2rgb(a, b, H - 1 / 3);\n }\n\n return [R, G, B];\n}\n\n/**\n * Convert an RGBcolor to HSL .\n *\n * @param {Number} R the red component\n * @param {Number} G the green component\n * @param {Number} B the blue component\n * @return {Array} [H, S, L]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nexport function rgb2hsl(_R, _G, _B) {\n let H, S, L;\n\n const R = Math.max(0, Math.min(255, _R));\n const G = Math.max(0, Math.min(255, _G));\n const B = Math.max(0, Math.min(255, _B));\n\n const r = R / 255;\n const g = G / 255;\n const b = B / 255;\n\n const var_min = Math.min(Math.min(r, g), b);\n const var_max = Math.max(Math.max(r, g), b);\n const del_max = var_max - var_min;\n\n L = (var_max + var_min) / 2;\n\n if (del_max === 0) {\n H = 0;\n S = 0;\n } else {\n if (L < 0.5) {\n S = del_max / (var_max + var_min);\n } else {\n S = del_max / (2 - var_max - var_min);\n }\n\n const del_r = ((var_max - r) / 6 + del_max / 2) / del_max;\n const del_g = ((var_max - g) / 6 + del_max / 2) / del_max;\n const del_b = ((var_max - b) / 6 + del_max / 2) / del_max;\n\n if (r == var_max) {\n H = del_b - del_g;\n } else if (g == var_max) {\n H = 1 / 3 + del_r - del_b;\n } else if (b == var_max) {\n H = 2 / 3 + del_g - del_r;\n }\n\n if (H < 0) {\n H += 1;\n } else if (H > 1) {\n H -= 1;\n }\n }\n\n return [H, S, L];\n}\n","/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../pfelement/pfelement.js\";\nimport { hash } from \"./djb-hash.js\";\nimport { hsl2rgb, rgb2hsl } from \"./hslrgb.js\";\n\nclass PfeAvatar extends PFElement {\n\n get html() {\n return `\n`;\n }\n static get tag() {\n return \"pfe-avatar\";\n }\n\n get templateUrl() {\n return \"pfe-avatar.html\";\n }\n\n get styleUrl() {\n return \"pfe-avatar.scss\";\n }\n\n static get observedAttributes() {\n return [\"pfe-name\", \"pfe-pattern\", \"pfe-src\", \"pfe-shape\"];\n }\n\n static get patterns() {\n return {\n triangles: \"triangles\",\n squares: \"squares\"\n };\n }\n\n static get defaultColors() {\n return \"#67accf #448087 #709c6b #a35252 #826cbb\";\n }\n\n get name() {\n return this.getAttribute(\"pfe-name\");\n }\n\n set name(val) {\n return this.setAttribute(\"pfe-name\", val);\n }\n\n get src() {\n return this.getAttribute(\"pfe-src\");\n }\n\n set src(href) {\n return this.setAttribute(\"pfe-src\", href);\n }\n\n get pattern() {\n return this.getAttribute(\"pfe-pattern\") || PfeAvatar.patterns.squares;\n }\n\n set pattern(name) {\n if (!PfeAvatar.patterns[name]) {\n this.log(\n `invalid pattern \"${name}\", valid patterns are: ${Object.values(\n PfeAvatar.patterns\n )}`\n );\n return;\n }\n return this.setAttribute(\"pfe-pattern\", name);\n }\n\n constructor() {\n super(PfeAvatar);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._initCanvas();\n\n this.dispatchEvent(\n new CustomEvent(`${PfeAvatar.tag}:connected`, {\n bubbles: false\n })\n );\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(...arguments);\n\n if (this.connected) {\n this.update();\n } else {\n this.addEventListener(`${PfeAvatar.tag}:connected`, () => this.update());\n }\n }\n\n _initCanvas() {\n this._canvas = this.shadowRoot.querySelector(\"canvas\");\n const size = this.var(\"--pfe-avatar--width\").replace(/px$/, \"\");\n this._canvas.width = size;\n this._canvas.height = size;\n\n this._squareSize = this._canvas.width / 8;\n this._triangleSize = this._canvas.width / 4;\n\n this._ctx = this._canvas.getContext(\"2d\");\n }\n\n static _registerColors() {\n this.colors = [];\n const themeColors = this.var(\"--pfe-avatar--colors\") || this.defaultColors;\n\n themeColors.split(/\\s+/).forEach(colorCode => {\n let pattern;\n switch (colorCode.length) {\n case 4: // ex: \"#0fc\"\n pattern = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(colorCode);\n if (pattern) {\n pattern.shift();\n const color = pattern.map(c => parseInt(c + c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n break;\n case 7: // ex: \"#00ffcc\"\n pattern = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(\n colorCode\n );\n if (pattern) {\n pattern.shift();\n const color = pattern.map(c => parseInt(c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n }\n });\n\n return this.colors;\n }\n\n static _registerColor(color) {\n PfeAvatar.colors.push({\n color1: `rgb(${color.join(\",\")})`,\n color2: `rgb(${this._adjustColor(color).join(\",\")})`\n });\n }\n\n static _adjustColor(color) {\n const dark = 0.1;\n const l_adj = 0.1; // luminance adjustment\n const hsl = rgb2hsl(...color);\n\n // if luminance is too dark already, then lighten the alternate color\n // instead of darkening it.\n hsl[2] += hsl[2] > dark ? -l_adj : l_adj;\n\n return hsl2rgb(...hsl);\n }\n\n update() {\n // if we have a src element, update the img, otherwise update the random pattern\n if (this.hasAttribute(\"pfe-src\")) {\n this.shadowRoot.querySelector(\"img\").src = this.src;\n } else {\n const bitPattern = hash(this.name).toString(2);\n const arrPattern = bitPattern.split(\"\").map(n => Number(n));\n this._colorIndex = Math.floor(\n (PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32)\n );\n this.color1 = PfeAvatar.colors[this._colorIndex].color1;\n this.color2 = PfeAvatar.colors[this._colorIndex].color2;\n\n this._clear();\n this._drawBackground();\n if (this.pattern === PfeAvatar.patterns.squares) {\n this._drawSquarePattern(arrPattern);\n } else if (this.pattern === PfeAvatar.patterns.triangles) {\n this._drawTrianglePattern(arrPattern);\n }\n // this._drawGradient();\n }\n }\n\n _clear() {\n this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawBackground() {\n this._ctx.fillStyle = this.color1;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawSquarePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n this._drawMirroredSquare(i % 4, Math.floor(i / 4));\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position, mirrored onto both the left and right half of the canvas.\n */\n _drawMirroredSquare(x, y) {\n if (this._ctx) {\n this._drawSquare(x, y);\n this._drawSquare(7 - x, y);\n }\n }\n\n _drawSquare(x, y) {\n this._ctx.fillRect(\n this._squareSize * x,\n this._squareSize * y,\n this._squareSize,\n this._squareSize\n );\n }\n\n _drawTrianglePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n const x = Math.floor(i / 2) % 2;\n const y = Math.floor(i / 4);\n const alt = i % 4;\n\n const p1 = [x, y];\n const p2 = [x, y];\n const p3 = [x, y];\n\n switch (alt) {\n case 0:\n p2[1]++;\n p3[0]++;\n p3[1]++;\n break;\n case 1:\n p2[0]++;\n p3[0]++;\n p3[1]++;\n break;\n case 2:\n p2[0]++;\n p3[1]++;\n break;\n case 3:\n p1[0]++;\n p2[0]++;\n p2[1]++;\n p3[1]++;\n break;\n }\n\n this._drawMirroredTriangle(p1, p2, p3);\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position in the top-left quadrant of the\n * canvas, and mirrored to the other three quadrants.\n */\n _drawMirroredTriangle(p1, p2, p3) {\n if (this._ctx) {\n this._drawTriangle(p1, p2, p3);\n this._drawTriangle(\n [4 - p1[0], p1[1]],\n [4 - p2[0], p2[1]],\n [4 - p3[0], p3[1]]\n );\n }\n }\n\n _drawTriangle(p1, p2, p3) {\n this._ctx.beginPath();\n this._ctx.moveTo(...p1.map(c => c * this._triangleSize));\n this._ctx.lineTo(...p2.map(c => c * this._triangleSize));\n this._ctx.lineTo(...p3.map(c => c * this._triangleSize));\n this._ctx.closePath();\n this._ctx.fill();\n this._ctx.fill();\n }\n\n _drawGradient() {\n const gradient = this._ctx.createLinearGradient(\n 0,\n this._canvas.height,\n this._canvas.width,\n 0\n );\n const color = this.color2;\n let gradientColor1 = color;\n let gradientColor2 = color;\n if (/^#[A-f0-9]{3}$/.test(color)) {\n // color is of the form \"#fff\"\n gradientColor1 += \"c\";\n gradientColor2 += \"0\";\n } else if (/^#[A-f0-9]{6}$/.test(color)) {\n // color is of the form \"#ffffff\"\n gradientColor1 += \"cc\";\n gradientColor2 += \"00\";\n }\n gradient.addColorStop(0, gradientColor1);\n gradient.addColorStop(1, gradientColor2);\n gradient.addColorStop(1, gradientColor1);\n this._ctx.fillStyle = gradient;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n}\n\nPfeAvatar._registerColors();\n\nPFElement.create(PfeAvatar);\n\nexport default PfeAvatar;\n"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-avatar/pfe-avatar.min.css b/elements/pfe-avatar/pfe-avatar.min.css
new file mode 100644
index 0000000000..6ad2148403
--- /dev/null
+++ b/elements/pfe-avatar/pfe-avatar.min.css
@@ -0,0 +1 @@
+:host{--pfe-avatar--width:128px;display:block;position:relative;width:var(--pfe-avatar--width);height:var(--pfe-avatar--width)}:host canvas{width:100%;height:100%;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:-o-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([pfe-shape=rounded]) canvas,:host([pfe-shape=rounded]) img{border-radius:calc(var(--pfe-avatar--width)/ 8 + 1px)}:host([pfe-shape=circle]) canvas,:host([pfe-shape=circle]) img{border-radius:50%}:host([pfe-src]) canvas{display:none}:host([pfe-src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([pfe-src])) img{display:none}:host([hidden]){display:none}
\ No newline at end of file
diff --git a/elements/pfe-avatar/pfe-avatar.min.js b/elements/pfe-avatar/pfe-avatar.min.js
new file mode 100644
index 0000000000..6f9e313873
--- /dev/null
+++ b/elements/pfe-avatar/pfe-avatar.min.js
@@ -0,0 +1,26 @@
+import t from"../pfelement/pfelement.min.js";function e(t,e,a){return a<0&&(a+=1),a>1&&(a-=1),6*a<1?t+6*(e-t)*a:2*a<1?e:3*a<2?t+(e-t)*(2/3-a)*6:t}
+/*
+ * @license
+ * 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 a extends t{get html(){return"\n"}static get tag(){return"pfe-avatar"}get templateUrl(){return"pfe-avatar.html"}get styleUrl(){return"pfe-avatar.scss"}static get observedAttributes(){return["pfe-name","pfe-pattern","pfe-src","pfe-shape"]}static get patterns(){return{triangles:"triangles",squares:"squares"}}static get defaultColors(){return"#67accf #448087 #709c6b #a35252 #826cbb"}get name(){return this.getAttribute("pfe-name")}set name(t){return this.setAttribute("pfe-name",t)}get src(){return this.getAttribute("pfe-src")}set src(t){return this.setAttribute("pfe-src",t)}get pattern(){return this.getAttribute("pfe-pattern")||a.patterns.squares}set pattern(t){if(a.patterns[t])return this.setAttribute("pfe-pattern",t);this.log(`invalid pattern "${t}", valid patterns are: ${Object.values(a.patterns)}`)}constructor(){super(a)}connectedCallback(){super.connectedCallback(),this._initCanvas(),this.dispatchEvent(new CustomEvent(`${a.tag}:connected`,{bubbles:!1}))}attributeChangedCallback(t,e,r){super.attributeChangedCallback(...arguments),this.connected?this.update():this.addEventListener(`${a.tag}:connected`,()=>this.update())}_initCanvas(){this._canvas=this.shadowRoot.querySelector("canvas");const t=this.var("--pfe-avatar--width").replace(/px$/,"");this._canvas.width=t,this._canvas.height=t,this._squareSize=this._canvas.width/8,this._triangleSize=this._canvas.width/4,this._ctx=this._canvas.getContext("2d")}static _registerColors(){return this.colors=[],(this.var("--pfe-avatar--colors")||this.defaultColors).split(/\s+/).forEach(t=>{let e;switch(t.length){case 4:if(e=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t)){e.shift();const t=e.map(t=>parseInt(t+t,16));this._registerColor(t)}else this.log(`[pfe-avatar] invalid color ${t}`);break;case 7:if(e=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t)){e.shift();const t=e.map(t=>parseInt(t,16));this._registerColor(t)}else this.log(`[pfe-avatar] invalid color ${t}`)}}),this.colors}static _registerColor(t){a.colors.push({color1:`rgb(${t.join(",")})`,color2:`rgb(${this._adjustColor(t).join(",")})`})}static _adjustColor(t){const a=function(t,e,a){let r,i,s;const n=Math.max(0,Math.min(255,t))/255,h=Math.max(0,Math.min(255,e))/255,o=Math.max(0,Math.min(255,a))/255,c=Math.min(Math.min(n,h),o),l=Math.max(Math.max(n,h),o),d=l-c;if(s=(l+c)/2,0===d)r=0,i=0;else{i=s<.5?d/(l+c):d/(2-l-c);const t=((l-n)/6+d/2)/d,e=((l-h)/6+d/2)/d,a=((l-o)/6+d/2)/d;n==l?r=a-e:h==l?r=1/3+t-a:o==l&&(r=2/3+e-t),r<0?r+=1:r>1&&(r-=1)}return[r,i,s]}(...t);return a[2]+=a[2]>.1?-.1:.1,function(t,a,r){let i,s,n;const h=Math.max(0,Math.min(1,t)),o=Math.max(0,Math.min(1,a)),c=Math.max(0,Math.min(1,r));if(0==o)i=255*c,s=255*c,n=255*c;else{let t,a;i=255*e(t=2*c-(a=c<.5?c*(1+o):c+o-o*c),a,h+1/3),s=255*e(t,a,h),n=255*e(t,a,h-1/3)}return[i,s,n]}(...a)}update(){if(this.hasAttribute("pfe-src"))this.shadowRoot.querySelector("img").src=this.src;else{const t=function(t){let e=5381,a=t.length;for(;a;)e=33*e^t.charCodeAt(--a);return e>>>0}(this.name).toString(2),e=t.split("").map(t=>Number(t));this._colorIndex=Math.floor(a.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=a.colors[this._colorIndex].color1,this.color2=a.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===a.patterns.squares?this._drawSquarePattern(e):this.pattern===a.patterns.triangles&&this._drawTrianglePattern(e)}}_clear(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}_drawBackground(){this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}_drawSquarePattern(t){if(this._ctx.fillStyle=this.color2,this._ctx){let e=t.length;for(;e--;)t[e]&&this._drawMirroredSquare(e%4,Math.floor(e/4))}}_drawMirroredSquare(t,e){this._ctx&&(this._drawSquare(t,e),this._drawSquare(7-t,e))}_drawSquare(t,e){this._ctx.fillRect(this._squareSize*t,this._squareSize*e,this._squareSize,this._squareSize)}_drawTrianglePattern(t){if(this._ctx.fillStyle=this.color2,this._ctx){let e=t.length;for(;e--;)if(t[e]){const t=Math.floor(e/2)%2,a=Math.floor(e/4),r=[t,a],i=[t,a],s=[t,a];switch(e%4){case 0:i[1]++,s[0]++,s[1]++;break;case 1:i[0]++,s[0]++,s[1]++;break;case 2:i[0]++,s[1]++;break;case 3:r[0]++,i[0]++,i[1]++,s[1]++}this._drawMirroredTriangle(r,i,s)}}}_drawMirroredTriangle(t,e,a){this._ctx&&(this._drawTriangle(t,e,a),this._drawTriangle([4-t[0],t[1]],[4-e[0],e[1]],[4-a[0],a[1]]))}_drawTriangle(t,e,a){this._ctx.beginPath(),this._ctx.moveTo(...t.map(t=>t*this._triangleSize)),this._ctx.lineTo(...e.map(t=>t*this._triangleSize)),this._ctx.lineTo(...a.map(t=>t*this._triangleSize)),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill()}_drawGradient(){const t=this._ctx.createLinearGradient(0,this._canvas.height,this._canvas.width,0),e=this.color2;let a=e,r=e;/^#[A-f0-9]{3}$/.test(e)?(a+="c",r+="0"):/^#[A-f0-9]{6}$/.test(e)&&(a+="cc",r+="00"),t.addColorStop(0,a),t.addColorStop(1,r),t.addColorStop(1,a),this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}}a._registerColors(),t.create(a);export default a;
+//# sourceMappingURL=pfe-avatar.min.js.map
diff --git a/elements/pfe-avatar/pfe-avatar.min.js.map b/elements/pfe-avatar/pfe-avatar.min.js.map
new file mode 100644
index 0000000000..ed38f54afa
--- /dev/null
+++ b/elements/pfe-avatar/pfe-avatar.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-avatar.min.js","sources":["pfe-avatar.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/**\n * djb2 string hashing function.\n *\n * @see http://www.cse.yorku.ca/~oz/hash.html\n * @param {String} str the string to hash.\n * @return {Number} a positive integer\n */\n\nfunction hash(str) {\n let hash = 5381;\n let i = str.length;\n\n while (i) {\n hash = (hash * 33) ^ str.charCodeAt(--i);\n }\n\n return hash >>> 0;\n}\n\nfunction h2rgb(v1, v2, vH) {\n if (vH < 0) vH += 1;\n if (vH > 1) vH -= 1;\n if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH;\n if (2 * vH < 1) return v2;\n if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6;\n return v1;\n}\n\n/**\n * Convert an HSL color to RGB.\n *\n * @param {Number} H the hue component\n * @param {Number} S the saturation component\n * @param {Number} L the luminance component\n * @return {Array} [R, G, B]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nfunction hsl2rgb(_H, _S, _L) {\n let R, G, B;\n\n const H = Math.max(0, Math.min(1, _H));\n const S = Math.max(0, Math.min(1, _S));\n const L = Math.max(0, Math.min(1, _L));\n\n if (S == 0) {\n R = L * 255;\n G = L * 255;\n B = L * 255;\n } else {\n let a, b;\n\n if (L < 0.5) {\n b = L * (1 + S);\n } else {\n b = L + S - S * L;\n }\n\n a = 2 * L - b;\n\n R = 255 * h2rgb(a, b, H + 1 / 3);\n G = 255 * h2rgb(a, b, H);\n B = 255 * h2rgb(a, b, H - 1 / 3);\n }\n\n return [R, G, B];\n}\n\n/**\n * Convert an RGBcolor to HSL .\n *\n * @param {Number} R the red component\n * @param {Number} G the green component\n * @param {Number} B the blue component\n * @return {Array} [H, S, L]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nfunction rgb2hsl(_R, _G, _B) {\n let H, S, L;\n\n const R = Math.max(0, Math.min(255, _R));\n const G = Math.max(0, Math.min(255, _G));\n const B = Math.max(0, Math.min(255, _B));\n\n const r = R / 255;\n const g = G / 255;\n const b = B / 255;\n\n const var_min = Math.min(Math.min(r, g), b);\n const var_max = Math.max(Math.max(r, g), b);\n const del_max = var_max - var_min;\n\n L = (var_max + var_min) / 2;\n\n if (del_max === 0) {\n H = 0;\n S = 0;\n } else {\n if (L < 0.5) {\n S = del_max / (var_max + var_min);\n } else {\n S = del_max / (2 - var_max - var_min);\n }\n\n const del_r = ((var_max - r) / 6 + del_max / 2) / del_max;\n const del_g = ((var_max - g) / 6 + del_max / 2) / del_max;\n const del_b = ((var_max - b) / 6 + del_max / 2) / del_max;\n\n if (r == var_max) {\n H = del_b - del_g;\n } else if (g == var_max) {\n H = 1 / 3 + del_r - del_b;\n } else if (b == var_max) {\n H = 2 / 3 + del_g - del_r;\n }\n\n if (H < 0) {\n H += 1;\n } else if (H > 1) {\n H -= 1;\n }\n }\n\n return [H, S, L];\n}\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nclass PfeAvatar extends PFElement {\n\n get html() {\n return `\n`;\n }\n static get tag() {\n return \"pfe-avatar\";\n }\n\n get templateUrl() {\n return \"pfe-avatar.html\";\n }\n\n get styleUrl() {\n return \"pfe-avatar.scss\";\n }\n\n static get observedAttributes() {\n return [\"pfe-name\", \"pfe-pattern\", \"pfe-src\", \"pfe-shape\"];\n }\n\n static get patterns() {\n return {\n triangles: \"triangles\",\n squares: \"squares\"\n };\n }\n\n static get defaultColors() {\n return \"#67accf #448087 #709c6b #a35252 #826cbb\";\n }\n\n get name() {\n return this.getAttribute(\"pfe-name\");\n }\n\n set name(val) {\n return this.setAttribute(\"pfe-name\", val);\n }\n\n get src() {\n return this.getAttribute(\"pfe-src\");\n }\n\n set src(href) {\n return this.setAttribute(\"pfe-src\", href);\n }\n\n get pattern() {\n return this.getAttribute(\"pfe-pattern\") || PfeAvatar.patterns.squares;\n }\n\n set pattern(name) {\n if (!PfeAvatar.patterns[name]) {\n this.log(\n `invalid pattern \"${name}\", valid patterns are: ${Object.values(\n PfeAvatar.patterns\n )}`\n );\n return;\n }\n return this.setAttribute(\"pfe-pattern\", name);\n }\n\n constructor() {\n super(PfeAvatar);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._initCanvas();\n\n this.dispatchEvent(\n new CustomEvent(`${PfeAvatar.tag}:connected`, {\n bubbles: false\n })\n );\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(...arguments);\n\n if (this.connected) {\n this.update();\n } else {\n this.addEventListener(`${PfeAvatar.tag}:connected`, () => this.update());\n }\n }\n\n _initCanvas() {\n this._canvas = this.shadowRoot.querySelector(\"canvas\");\n const size = this.var(\"--pfe-avatar--width\").replace(/px$/, \"\");\n this._canvas.width = size;\n this._canvas.height = size;\n\n this._squareSize = this._canvas.width / 8;\n this._triangleSize = this._canvas.width / 4;\n\n this._ctx = this._canvas.getContext(\"2d\");\n }\n\n static _registerColors() {\n this.colors = [];\n const themeColors = this.var(\"--pfe-avatar--colors\") || this.defaultColors;\n\n themeColors.split(/\\s+/).forEach(colorCode => {\n let pattern;\n switch (colorCode.length) {\n case 4: // ex: \"#0fc\"\n pattern = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(colorCode);\n if (pattern) {\n pattern.shift();\n const color = pattern.map(c => parseInt(c + c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n break;\n case 7: // ex: \"#00ffcc\"\n pattern = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(\n colorCode\n );\n if (pattern) {\n pattern.shift();\n const color = pattern.map(c => parseInt(c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n }\n });\n\n return this.colors;\n }\n\n static _registerColor(color) {\n PfeAvatar.colors.push({\n color1: `rgb(${color.join(\",\")})`,\n color2: `rgb(${this._adjustColor(color).join(\",\")})`\n });\n }\n\n static _adjustColor(color) {\n const dark = 0.1;\n const l_adj = 0.1; // luminance adjustment\n const hsl = rgb2hsl(...color);\n\n // if luminance is too dark already, then lighten the alternate color\n // instead of darkening it.\n hsl[2] += hsl[2] > dark ? -l_adj : l_adj;\n\n return hsl2rgb(...hsl);\n }\n\n update() {\n // if we have a src element, update the img, otherwise update the random pattern\n if (this.hasAttribute(\"pfe-src\")) {\n this.shadowRoot.querySelector(\"img\").src = this.src;\n } else {\n const bitPattern = hash(this.name).toString(2);\n const arrPattern = bitPattern.split(\"\").map(n => Number(n));\n this._colorIndex = Math.floor(\n (PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32)\n );\n this.color1 = PfeAvatar.colors[this._colorIndex].color1;\n this.color2 = PfeAvatar.colors[this._colorIndex].color2;\n\n this._clear();\n this._drawBackground();\n if (this.pattern === PfeAvatar.patterns.squares) {\n this._drawSquarePattern(arrPattern);\n } else if (this.pattern === PfeAvatar.patterns.triangles) {\n this._drawTrianglePattern(arrPattern);\n }\n // this._drawGradient();\n }\n }\n\n _clear() {\n this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawBackground() {\n this._ctx.fillStyle = this.color1;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawSquarePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n this._drawMirroredSquare(i % 4, Math.floor(i / 4));\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position, mirrored onto both the left and right half of the canvas.\n */\n _drawMirroredSquare(x, y) {\n if (this._ctx) {\n this._drawSquare(x, y);\n this._drawSquare(7 - x, y);\n }\n }\n\n _drawSquare(x, y) {\n this._ctx.fillRect(\n this._squareSize * x,\n this._squareSize * y,\n this._squareSize,\n this._squareSize\n );\n }\n\n _drawTrianglePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n const x = Math.floor(i / 2) % 2;\n const y = Math.floor(i / 4);\n const alt = i % 4;\n\n const p1 = [x, y];\n const p2 = [x, y];\n const p3 = [x, y];\n\n switch (alt) {\n case 0:\n p2[1]++;\n p3[0]++;\n p3[1]++;\n break;\n case 1:\n p2[0]++;\n p3[0]++;\n p3[1]++;\n break;\n case 2:\n p2[0]++;\n p3[1]++;\n break;\n case 3:\n p1[0]++;\n p2[0]++;\n p2[1]++;\n p3[1]++;\n break;\n }\n\n this._drawMirroredTriangle(p1, p2, p3);\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position in the top-left quadrant of the\n * canvas, and mirrored to the other three quadrants.\n */\n _drawMirroredTriangle(p1, p2, p3) {\n if (this._ctx) {\n this._drawTriangle(p1, p2, p3);\n this._drawTriangle(\n [4 - p1[0], p1[1]],\n [4 - p2[0], p2[1]],\n [4 - p3[0], p3[1]]\n );\n }\n }\n\n _drawTriangle(p1, p2, p3) {\n this._ctx.beginPath();\n this._ctx.moveTo(...p1.map(c => c * this._triangleSize));\n this._ctx.lineTo(...p2.map(c => c * this._triangleSize));\n this._ctx.lineTo(...p3.map(c => c * this._triangleSize));\n this._ctx.closePath();\n this._ctx.fill();\n this._ctx.fill();\n }\n\n _drawGradient() {\n const gradient = this._ctx.createLinearGradient(\n 0,\n this._canvas.height,\n this._canvas.width,\n 0\n );\n const color = this.color2;\n let gradientColor1 = color;\n let gradientColor2 = color;\n if (/^#[A-f0-9]{3}$/.test(color)) {\n // color is of the form \"#fff\"\n gradientColor1 += \"c\";\n gradientColor2 += \"0\";\n } else if (/^#[A-f0-9]{6}$/.test(color)) {\n // color is of the form \"#ffffff\"\n gradientColor1 += \"cc\";\n gradientColor2 += \"00\";\n }\n gradient.addColorStop(0, gradientColor1);\n gradient.addColorStop(1, gradientColor2);\n gradient.addColorStop(1, gradientColor1);\n this._ctx.fillStyle = gradient;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n}\n\nPfeAvatar._registerColors();\n\nPFElement.create(PfeAvatar);\n\nexport default PfeAvatar;\n//# sourceMappingURL=pfe-avatar.js.map\n"],"names":["h2rgb","v1","v2","vH","PfeAvatar","PFElement","html","tag","templateUrl","styleUrl","observedAttributes","patterns","triangles","squares","defaultColors","name","this","getAttribute","val","setAttribute","src","href","pattern","log","Object","values","[object Object]","super","connectedCallback","_initCanvas","dispatchEvent","CustomEvent","bubbles","attr","oldValue","newValue","attributeChangedCallback","arguments","connected","update","addEventListener","_canvas","shadowRoot","querySelector","size","var","replace","width","height","_squareSize","_triangleSize","_ctx","getContext","colors","split","forEach","colorCode","length","exec","shift","color","map","c","parseInt","_registerColor","push","color1","join","color2","_adjustColor","hsl","_R","_G","_B","H","S","L","r","Math","max","min","g","b","var_min","var_max","del_max","del_r","del_g","del_b","rgb2hsl","_H","_S","_L","R","G","B","a","hsl2rgb","hasAttribute","bitPattern","str","hash","i","charCodeAt","toString","arrPattern","n","Number","_colorIndex","floor","pow","_clear","_drawBackground","_drawSquarePattern","_drawTrianglePattern","clearRect","fillStyle","fillRect","_drawMirroredSquare","x","y","_drawSquare","p1","p2","p3","_drawMirroredTriangle","_drawTriangle","beginPath","moveTo","lineTo","closePath","fill","gradient","createLinearGradient","gradientColor1","gradientColor2","test","addColorStop","_registerColors","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-avatar/pfe-avatar.umd.js b/elements/pfe-avatar/pfe-avatar.umd.js
new file mode 100644
index 0000000000..393c2bb146
--- /dev/null
+++ b/elements/pfe-avatar/pfe-avatar.umd.js
@@ -0,0 +1,604 @@
+(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.PfeAvatar = 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);
+ }
+ };
+
+ /**
+ * djb2 string hashing function.
+ *
+ * @see http://www.cse.yorku.ca/~oz/hash.html
+ * @param {String} str the string to hash.
+ * @return {Number} a positive integer
+ */
+
+ function hash(str) {
+ var hash = 5381;
+ var i = str.length;
+
+ while (i) {
+ hash = hash * 33 ^ str.charCodeAt(--i);
+ }
+
+ return hash >>> 0;
+ }
+
+ function h2rgb(v1, v2, vH) {
+ if (vH < 0) vH += 1;
+ if (vH > 1) vH -= 1;
+ if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH;
+ if (2 * vH < 1) return v2;
+ if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6;
+ return v1;
+ }
+
+ /**
+ * Convert an HSL color to RGB.
+ *
+ * @param {Number} H the hue component
+ * @param {Number} S the saturation component
+ * @param {Number} L the luminance component
+ * @return {Array} [R, G, B]
+ *
+ * @see https://www.easyrgb.com/en/math.php
+ */
+ function hsl2rgb(_H, _S, _L) {
+ var R = void 0,
+ G = void 0,
+ B = void 0;
+
+ var H = Math.max(0, Math.min(1, _H));
+ var S = Math.max(0, Math.min(1, _S));
+ var L = Math.max(0, Math.min(1, _L));
+
+ if (S == 0) {
+ R = L * 255;
+ G = L * 255;
+ B = L * 255;
+ } else {
+ var a = void 0,
+ b = void 0;
+
+ if (L < 0.5) {
+ b = L * (1 + S);
+ } else {
+ b = L + S - S * L;
+ }
+
+ a = 2 * L - b;
+
+ R = 255 * h2rgb(a, b, H + 1 / 3);
+ G = 255 * h2rgb(a, b, H);
+ B = 255 * h2rgb(a, b, H - 1 / 3);
+ }
+
+ return [R, G, B];
+ }
+
+ /**
+ * Convert an RGBcolor to HSL .
+ *
+ * @param {Number} R the red component
+ * @param {Number} G the green component
+ * @param {Number} B the blue component
+ * @return {Array} [H, S, L]
+ *
+ * @see https://www.easyrgb.com/en/math.php
+ */
+ function rgb2hsl(_R, _G, _B) {
+ var H = void 0,
+ S = void 0,
+ L = void 0;
+
+ var R = Math.max(0, Math.min(255, _R));
+ var G = Math.max(0, Math.min(255, _G));
+ var B = Math.max(0, Math.min(255, _B));
+
+ var r = R / 255;
+ var g = G / 255;
+ var b = B / 255;
+
+ var var_min = Math.min(Math.min(r, g), b);
+ var var_max = Math.max(Math.max(r, g), b);
+ var del_max = var_max - var_min;
+
+ L = (var_max + var_min) / 2;
+
+ if (del_max === 0) {
+ H = 0;
+ S = 0;
+ } else {
+ if (L < 0.5) {
+ S = del_max / (var_max + var_min);
+ } else {
+ S = del_max / (2 - var_max - var_min);
+ }
+
+ var del_r = ((var_max - r) / 6 + del_max / 2) / del_max;
+ var del_g = ((var_max - g) / 6 + del_max / 2) / del_max;
+ var del_b = ((var_max - b) / 6 + del_max / 2) / del_max;
+
+ if (r == var_max) {
+ H = del_b - del_g;
+ } else if (g == var_max) {
+ H = 1 / 3 + del_r - del_b;
+ } else if (b == var_max) {
+ H = 2 / 3 + del_g - del_r;
+ }
+
+ if (H < 0) {
+ H += 1;
+ } else if (H > 1) {
+ H -= 1;
+ }
+ }
+
+ return [H, S, L];
+ }
+
+ /*
+ * @license
+ * 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.
+ *
+ */
+
+ var PfeAvatar = function (_PFElement) {
+ inherits(PfeAvatar, _PFElement);
+ createClass(PfeAvatar, [{
+ key: "html",
+ get: function get$$1() {
+ return "\n";
+ }
+ }, {
+ key: "templateUrl",
+ get: function get$$1() {
+ return "pfe-avatar.html";
+ }
+ }, {
+ key: "styleUrl",
+ get: function get$$1() {
+ return "pfe-avatar.scss";
+ }
+ }, {
+ key: "name",
+ get: function get$$1() {
+ return this.getAttribute("pfe-name");
+ },
+ set: function set$$1(val) {
+ return this.setAttribute("pfe-name", val);
+ }
+ }, {
+ key: "src",
+ get: function get$$1() {
+ return this.getAttribute("pfe-src");
+ },
+ set: function set$$1(href) {
+ return this.setAttribute("pfe-src", href);
+ }
+ }, {
+ key: "pattern",
+ get: function get$$1() {
+ return this.getAttribute("pfe-pattern") || PfeAvatar.patterns.squares;
+ },
+ set: function set$$1(name) {
+ if (!PfeAvatar.patterns[name]) {
+ this.log("invalid pattern \"" + name + "\", valid patterns are: " + Object.values(PfeAvatar.patterns));
+ return;
+ }
+ return this.setAttribute("pfe-pattern", name);
+ }
+ }], [{
+ key: "tag",
+ get: function get$$1() {
+ return "pfe-avatar";
+ }
+ }, {
+ key: "observedAttributes",
+ get: function get$$1() {
+ return ["pfe-name", "pfe-pattern", "pfe-src", "pfe-shape"];
+ }
+ }, {
+ key: "patterns",
+ get: function get$$1() {
+ return {
+ triangles: "triangles",
+ squares: "squares"
+ };
+ }
+ }, {
+ key: "defaultColors",
+ get: function get$$1() {
+ return "#67accf #448087 #709c6b #a35252 #826cbb";
+ }
+ }]);
+
+ function PfeAvatar() {
+ classCallCheck(this, PfeAvatar);
+ return possibleConstructorReturn(this, (PfeAvatar.__proto__ || Object.getPrototypeOf(PfeAvatar)).call(this, PfeAvatar));
+ }
+
+ createClass(PfeAvatar, [{
+ key: "connectedCallback",
+ value: function connectedCallback() {
+ get(PfeAvatar.prototype.__proto__ || Object.getPrototypeOf(PfeAvatar.prototype), "connectedCallback", this).call(this);
+
+ this._initCanvas();
+
+ this.dispatchEvent(new CustomEvent(PfeAvatar.tag + ":connected", {
+ bubbles: false
+ }));
+ }
+ }, {
+ key: "attributeChangedCallback",
+ value: function attributeChangedCallback(attr, oldValue, newValue) {
+ var _this2 = this;
+
+ get(PfeAvatar.prototype.__proto__ || Object.getPrototypeOf(PfeAvatar.prototype), "attributeChangedCallback", this).apply(this, arguments);
+
+ if (this.connected) {
+ this.update();
+ } else {
+ this.addEventListener(PfeAvatar.tag + ":connected", function () {
+ return _this2.update();
+ });
+ }
+ }
+ }, {
+ key: "_initCanvas",
+ value: function _initCanvas() {
+ this._canvas = this.shadowRoot.querySelector("canvas");
+ var size = this.var("--pfe-avatar--width").replace(/px$/, "");
+ this._canvas.width = size;
+ this._canvas.height = size;
+
+ this._squareSize = this._canvas.width / 8;
+ this._triangleSize = this._canvas.width / 4;
+
+ this._ctx = this._canvas.getContext("2d");
+ }
+ }, {
+ key: "update",
+ value: function update() {
+ // if we have a src element, update the img, otherwise update the random pattern
+ if (this.hasAttribute("pfe-src")) {
+ this.shadowRoot.querySelector("img").src = this.src;
+ } else {
+ var bitPattern = hash(this.name).toString(2);
+ var arrPattern = bitPattern.split("").map(function (n) {
+ return Number(n);
+ });
+ this._colorIndex = Math.floor(PfeAvatar.colors.length * parseInt(bitPattern, 2) / Math.pow(2, 32));
+ this.color1 = PfeAvatar.colors[this._colorIndex].color1;
+ this.color2 = PfeAvatar.colors[this._colorIndex].color2;
+
+ this._clear();
+ this._drawBackground();
+ if (this.pattern === PfeAvatar.patterns.squares) {
+ this._drawSquarePattern(arrPattern);
+ } else if (this.pattern === PfeAvatar.patterns.triangles) {
+ this._drawTrianglePattern(arrPattern);
+ }
+ // this._drawGradient();
+ }
+ }
+ }, {
+ key: "_clear",
+ value: function _clear() {
+ this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+ }
+ }, {
+ key: "_drawBackground",
+ value: function _drawBackground() {
+ this._ctx.fillStyle = this.color1;
+ this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
+ }
+ }, {
+ key: "_drawSquarePattern",
+ value: function _drawSquarePattern(pattern) {
+ this._ctx.fillStyle = this.color2;
+ if (this._ctx) {
+ var i = pattern.length;
+ while (i--) {
+ if (pattern[i]) {
+ this._drawMirroredSquare(i % 4, Math.floor(i / 4));
+ }
+ }
+ }
+ }
+
+ /**
+ * Draw a square at the given position, mirrored onto both the left and right half of the canvas.
+ */
+
+ }, {
+ key: "_drawMirroredSquare",
+ value: function _drawMirroredSquare(x, y) {
+ if (this._ctx) {
+ this._drawSquare(x, y);
+ this._drawSquare(7 - x, y);
+ }
+ }
+ }, {
+ key: "_drawSquare",
+ value: function _drawSquare(x, y) {
+ this._ctx.fillRect(this._squareSize * x, this._squareSize * y, this._squareSize, this._squareSize);
+ }
+ }, {
+ key: "_drawTrianglePattern",
+ value: function _drawTrianglePattern(pattern) {
+ this._ctx.fillStyle = this.color2;
+ if (this._ctx) {
+ var i = pattern.length;
+ while (i--) {
+ if (pattern[i]) {
+ var x = Math.floor(i / 2) % 2;
+ var y = Math.floor(i / 4);
+ var alt = i % 4;
+
+ var p1 = [x, y];
+ var p2 = [x, y];
+ var p3 = [x, y];
+
+ switch (alt) {
+ case 0:
+ p2[1]++;
+ p3[0]++;
+ p3[1]++;
+ break;
+ case 1:
+ p2[0]++;
+ p3[0]++;
+ p3[1]++;
+ break;
+ case 2:
+ p2[0]++;
+ p3[1]++;
+ break;
+ case 3:
+ p1[0]++;
+ p2[0]++;
+ p2[1]++;
+ p3[1]++;
+ break;
+ }
+
+ this._drawMirroredTriangle(p1, p2, p3);
+ }
+ }
+ }
+ }
+
+ /**
+ * Draw a square at the given position in the top-left quadrant of the
+ * canvas, and mirrored to the other three quadrants.
+ */
+
+ }, {
+ key: "_drawMirroredTriangle",
+ value: function _drawMirroredTriangle(p1, p2, p3) {
+ if (this._ctx) {
+ this._drawTriangle(p1, p2, p3);
+ this._drawTriangle([4 - p1[0], p1[1]], [4 - p2[0], p2[1]], [4 - p3[0], p3[1]]);
+ }
+ }
+ }, {
+ key: "_drawTriangle",
+ value: function _drawTriangle(p1, p2, p3) {
+ var _ctx,
+ _this3 = this,
+ _ctx2,
+ _ctx3;
+
+ this._ctx.beginPath();
+ (_ctx = this._ctx).moveTo.apply(_ctx, toConsumableArray(p1.map(function (c) {
+ return c * _this3._triangleSize;
+ })));
+ (_ctx2 = this._ctx).lineTo.apply(_ctx2, toConsumableArray(p2.map(function (c) {
+ return c * _this3._triangleSize;
+ })));
+ (_ctx3 = this._ctx).lineTo.apply(_ctx3, toConsumableArray(p3.map(function (c) {
+ return c * _this3._triangleSize;
+ })));
+ this._ctx.closePath();
+ this._ctx.fill();
+ this._ctx.fill();
+ }
+ }, {
+ key: "_drawGradient",
+ value: function _drawGradient() {
+ var gradient = this._ctx.createLinearGradient(0, this._canvas.height, this._canvas.width, 0);
+ var color = this.color2;
+ var gradientColor1 = color;
+ var gradientColor2 = color;
+ if (/^#[A-f0-9]{3}$/.test(color)) {
+ // color is of the form "#fff"
+ gradientColor1 += "c";
+ gradientColor2 += "0";
+ } else if (/^#[A-f0-9]{6}$/.test(color)) {
+ // color is of the form "#ffffff"
+ gradientColor1 += "cc";
+ gradientColor2 += "00";
+ }
+ gradient.addColorStop(0, gradientColor1);
+ gradient.addColorStop(1, gradientColor2);
+ gradient.addColorStop(1, gradientColor1);
+ this._ctx.fillStyle = gradient;
+ this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
+ }
+ }], [{
+ key: "_registerColors",
+ value: function _registerColors() {
+ var _this4 = this;
+
+ this.colors = [];
+ var themeColors = this.var("--pfe-avatar--colors") || this.defaultColors;
+
+ themeColors.split(/\s+/).forEach(function (colorCode) {
+ var pattern = void 0;
+ switch (colorCode.length) {
+ case 4:
+ // ex: "#0fc"
+ pattern = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(colorCode);
+ if (pattern) {
+ pattern.shift();
+ var color = pattern.map(function (c) {
+ return parseInt(c + c, 16);
+ });
+ _this4._registerColor(color);
+ } else {
+ _this4.log("[pfe-avatar] invalid color " + colorCode);
+ }
+ break;
+ case 7:
+ // ex: "#00ffcc"
+ pattern = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(colorCode);
+ if (pattern) {
+ pattern.shift();
+ var _color = pattern.map(function (c) {
+ return parseInt(c, 16);
+ });
+ _this4._registerColor(_color);
+ } else {
+ _this4.log("[pfe-avatar] invalid color " + colorCode);
+ }
+ }
+ });
+
+ return this.colors;
+ }
+ }, {
+ key: "_registerColor",
+ value: function _registerColor(color) {
+ PfeAvatar.colors.push({
+ color1: "rgb(" + color.join(",") + ")",
+ color2: "rgb(" + this._adjustColor(color).join(",") + ")"
+ });
+ }
+ }, {
+ key: "_adjustColor",
+ value: function _adjustColor(color) {
+ var dark = 0.1;
+ var l_adj = 0.1; // luminance adjustment
+ var hsl = rgb2hsl.apply(undefined, toConsumableArray(color));
+
+ // if luminance is too dark already, then lighten the alternate color
+ // instead of darkening it.
+ hsl[2] += hsl[2] > dark ? -l_adj : l_adj;
+
+ return hsl2rgb.apply(undefined, toConsumableArray(hsl));
+ }
+ }]);
+ return PfeAvatar;
+ }(PFElement);
+
+ PfeAvatar._registerColors();
+
+ PFElement.create(PfeAvatar);
+
+ return PfeAvatar;
+
+})));
+//# sourceMappingURL=pfe-avatar.umd.js.map
diff --git a/elements/pfe-avatar/pfe-avatar.umd.js.map b/elements/pfe-avatar/pfe-avatar.umd.js.map
new file mode 100644
index 0000000000..ba365490c7
--- /dev/null
+++ b/elements/pfe-avatar/pfe-avatar.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-avatar.umd.js","sources":["pfe-avatar.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/**\n * djb2 string hashing function.\n *\n * @see http://www.cse.yorku.ca/~oz/hash.html\n * @param {String} str the string to hash.\n * @return {Number} a positive integer\n */\n\nfunction hash(str) {\n let hash = 5381;\n let i = str.length;\n\n while (i) {\n hash = (hash * 33) ^ str.charCodeAt(--i);\n }\n\n return hash >>> 0;\n}\n\nfunction h2rgb(v1, v2, vH) {\n if (vH < 0) vH += 1;\n if (vH > 1) vH -= 1;\n if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH;\n if (2 * vH < 1) return v2;\n if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6;\n return v1;\n}\n\n/**\n * Convert an HSL color to RGB.\n *\n * @param {Number} H the hue component\n * @param {Number} S the saturation component\n * @param {Number} L the luminance component\n * @return {Array} [R, G, B]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nfunction hsl2rgb(_H, _S, _L) {\n let R, G, B;\n\n const H = Math.max(0, Math.min(1, _H));\n const S = Math.max(0, Math.min(1, _S));\n const L = Math.max(0, Math.min(1, _L));\n\n if (S == 0) {\n R = L * 255;\n G = L * 255;\n B = L * 255;\n } else {\n let a, b;\n\n if (L < 0.5) {\n b = L * (1 + S);\n } else {\n b = L + S - S * L;\n }\n\n a = 2 * L - b;\n\n R = 255 * h2rgb(a, b, H + 1 / 3);\n G = 255 * h2rgb(a, b, H);\n B = 255 * h2rgb(a, b, H - 1 / 3);\n }\n\n return [R, G, B];\n}\n\n/**\n * Convert an RGBcolor to HSL .\n *\n * @param {Number} R the red component\n * @param {Number} G the green component\n * @param {Number} B the blue component\n * @return {Array} [H, S, L]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nfunction rgb2hsl(_R, _G, _B) {\n let H, S, L;\n\n const R = Math.max(0, Math.min(255, _R));\n const G = Math.max(0, Math.min(255, _G));\n const B = Math.max(0, Math.min(255, _B));\n\n const r = R / 255;\n const g = G / 255;\n const b = B / 255;\n\n const var_min = Math.min(Math.min(r, g), b);\n const var_max = Math.max(Math.max(r, g), b);\n const del_max = var_max - var_min;\n\n L = (var_max + var_min) / 2;\n\n if (del_max === 0) {\n H = 0;\n S = 0;\n } else {\n if (L < 0.5) {\n S = del_max / (var_max + var_min);\n } else {\n S = del_max / (2 - var_max - var_min);\n }\n\n const del_r = ((var_max - r) / 6 + del_max / 2) / del_max;\n const del_g = ((var_max - g) / 6 + del_max / 2) / del_max;\n const del_b = ((var_max - b) / 6 + del_max / 2) / del_max;\n\n if (r == var_max) {\n H = del_b - del_g;\n } else if (g == var_max) {\n H = 1 / 3 + del_r - del_b;\n } else if (b == var_max) {\n H = 2 / 3 + del_g - del_r;\n }\n\n if (H < 0) {\n H += 1;\n } else if (H > 1) {\n H -= 1;\n }\n }\n\n return [H, S, L];\n}\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nclass PfeAvatar extends PFElement {\n\n get html() {\n return `\n`;\n }\n static get tag() {\n return \"pfe-avatar\";\n }\n\n get templateUrl() {\n return \"pfe-avatar.html\";\n }\n\n get styleUrl() {\n return \"pfe-avatar.scss\";\n }\n\n static get observedAttributes() {\n return [\"pfe-name\", \"pfe-pattern\", \"pfe-src\", \"pfe-shape\"];\n }\n\n static get patterns() {\n return {\n triangles: \"triangles\",\n squares: \"squares\"\n };\n }\n\n static get defaultColors() {\n return \"#67accf #448087 #709c6b #a35252 #826cbb\";\n }\n\n get name() {\n return this.getAttribute(\"pfe-name\");\n }\n\n set name(val) {\n return this.setAttribute(\"pfe-name\", val);\n }\n\n get src() {\n return this.getAttribute(\"pfe-src\");\n }\n\n set src(href) {\n return this.setAttribute(\"pfe-src\", href);\n }\n\n get pattern() {\n return this.getAttribute(\"pfe-pattern\") || PfeAvatar.patterns.squares;\n }\n\n set pattern(name) {\n if (!PfeAvatar.patterns[name]) {\n this.log(\n `invalid pattern \"${name}\", valid patterns are: ${Object.values(\n PfeAvatar.patterns\n )}`\n );\n return;\n }\n return this.setAttribute(\"pfe-pattern\", name);\n }\n\n constructor() {\n super(PfeAvatar);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._initCanvas();\n\n this.dispatchEvent(\n new CustomEvent(`${PfeAvatar.tag}:connected`, {\n bubbles: false\n })\n );\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(...arguments);\n\n if (this.connected) {\n this.update();\n } else {\n this.addEventListener(`${PfeAvatar.tag}:connected`, () => this.update());\n }\n }\n\n _initCanvas() {\n this._canvas = this.shadowRoot.querySelector(\"canvas\");\n const size = this.var(\"--pfe-avatar--width\").replace(/px$/, \"\");\n this._canvas.width = size;\n this._canvas.height = size;\n\n this._squareSize = this._canvas.width / 8;\n this._triangleSize = this._canvas.width / 4;\n\n this._ctx = this._canvas.getContext(\"2d\");\n }\n\n static _registerColors() {\n this.colors = [];\n const themeColors = this.var(\"--pfe-avatar--colors\") || this.defaultColors;\n\n themeColors.split(/\\s+/).forEach(colorCode => {\n let pattern;\n switch (colorCode.length) {\n case 4: // ex: \"#0fc\"\n pattern = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(colorCode);\n if (pattern) {\n pattern.shift();\n const color = pattern.map(c => parseInt(c + c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n break;\n case 7: // ex: \"#00ffcc\"\n pattern = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(\n colorCode\n );\n if (pattern) {\n pattern.shift();\n const color = pattern.map(c => parseInt(c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n }\n });\n\n return this.colors;\n }\n\n static _registerColor(color) {\n PfeAvatar.colors.push({\n color1: `rgb(${color.join(\",\")})`,\n color2: `rgb(${this._adjustColor(color).join(\",\")})`\n });\n }\n\n static _adjustColor(color) {\n const dark = 0.1;\n const l_adj = 0.1; // luminance adjustment\n const hsl = rgb2hsl(...color);\n\n // if luminance is too dark already, then lighten the alternate color\n // instead of darkening it.\n hsl[2] += hsl[2] > dark ? -l_adj : l_adj;\n\n return hsl2rgb(...hsl);\n }\n\n update() {\n // if we have a src element, update the img, otherwise update the random pattern\n if (this.hasAttribute(\"pfe-src\")) {\n this.shadowRoot.querySelector(\"img\").src = this.src;\n } else {\n const bitPattern = hash(this.name).toString(2);\n const arrPattern = bitPattern.split(\"\").map(n => Number(n));\n this._colorIndex = Math.floor(\n (PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32)\n );\n this.color1 = PfeAvatar.colors[this._colorIndex].color1;\n this.color2 = PfeAvatar.colors[this._colorIndex].color2;\n\n this._clear();\n this._drawBackground();\n if (this.pattern === PfeAvatar.patterns.squares) {\n this._drawSquarePattern(arrPattern);\n } else if (this.pattern === PfeAvatar.patterns.triangles) {\n this._drawTrianglePattern(arrPattern);\n }\n // this._drawGradient();\n }\n }\n\n _clear() {\n this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawBackground() {\n this._ctx.fillStyle = this.color1;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawSquarePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n this._drawMirroredSquare(i % 4, Math.floor(i / 4));\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position, mirrored onto both the left and right half of the canvas.\n */\n _drawMirroredSquare(x, y) {\n if (this._ctx) {\n this._drawSquare(x, y);\n this._drawSquare(7 - x, y);\n }\n }\n\n _drawSquare(x, y) {\n this._ctx.fillRect(\n this._squareSize * x,\n this._squareSize * y,\n this._squareSize,\n this._squareSize\n );\n }\n\n _drawTrianglePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n const x = Math.floor(i / 2) % 2;\n const y = Math.floor(i / 4);\n const alt = i % 4;\n\n const p1 = [x, y];\n const p2 = [x, y];\n const p3 = [x, y];\n\n switch (alt) {\n case 0:\n p2[1]++;\n p3[0]++;\n p3[1]++;\n break;\n case 1:\n p2[0]++;\n p3[0]++;\n p3[1]++;\n break;\n case 2:\n p2[0]++;\n p3[1]++;\n break;\n case 3:\n p1[0]++;\n p2[0]++;\n p2[1]++;\n p3[1]++;\n break;\n }\n\n this._drawMirroredTriangle(p1, p2, p3);\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position in the top-left quadrant of the\n * canvas, and mirrored to the other three quadrants.\n */\n _drawMirroredTriangle(p1, p2, p3) {\n if (this._ctx) {\n this._drawTriangle(p1, p2, p3);\n this._drawTriangle(\n [4 - p1[0], p1[1]],\n [4 - p2[0], p2[1]],\n [4 - p3[0], p3[1]]\n );\n }\n }\n\n _drawTriangle(p1, p2, p3) {\n this._ctx.beginPath();\n this._ctx.moveTo(...p1.map(c => c * this._triangleSize));\n this._ctx.lineTo(...p2.map(c => c * this._triangleSize));\n this._ctx.lineTo(...p3.map(c => c * this._triangleSize));\n this._ctx.closePath();\n this._ctx.fill();\n this._ctx.fill();\n }\n\n _drawGradient() {\n const gradient = this._ctx.createLinearGradient(\n 0,\n this._canvas.height,\n this._canvas.width,\n 0\n );\n const color = this.color2;\n let gradientColor1 = color;\n let gradientColor2 = color;\n if (/^#[A-f0-9]{3}$/.test(color)) {\n // color is of the form \"#fff\"\n gradientColor1 += \"c\";\n gradientColor2 += \"0\";\n } else if (/^#[A-f0-9]{6}$/.test(color)) {\n // color is of the form \"#ffffff\"\n gradientColor1 += \"cc\";\n gradientColor2 += \"00\";\n }\n gradient.addColorStop(0, gradientColor1);\n gradient.addColorStop(1, gradientColor2);\n gradient.addColorStop(1, gradientColor1);\n this._ctx.fillStyle = gradient;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n}\n\nPfeAvatar._registerColors();\n\nPFElement.create(PfeAvatar);\n\nexport default PfeAvatar;\n//# sourceMappingURL=pfe-avatar.js.map\n"],"names":["hash","str","i","length","charCodeAt","h2rgb","v1","v2","vH","hsl2rgb","_H","_S","_L","R","G","B","H","Math","max","min","S","L","a","b","rgb2hsl","_R","_G","_B","r","g","var_min","var_max","del_max","del_r","del_g","del_b","PfeAvatar","getAttribute","val","setAttribute","href","patterns","squares","name","log","Object","values","triangles","_initCanvas","dispatchEvent","CustomEvent","tag","bubbles","attr","oldValue","newValue","arguments","connected","update","addEventListener","_canvas","shadowRoot","querySelector","size","var","replace","width","height","_squareSize","_triangleSize","_ctx","getContext","hasAttribute","src","bitPattern","toString","arrPattern","split","map","Number","n","_colorIndex","floor","colors","parseInt","pow","color1","color2","_clear","_drawBackground","pattern","_drawSquarePattern","_drawTrianglePattern","clearRect","fillStyle","fillRect","_drawMirroredSquare","x","y","_drawSquare","alt","p1","p2","p3","_drawMirroredTriangle","_drawTriangle","beginPath","moveTo","c","lineTo","closePath","fill","gradient","createLinearGradient","color","gradientColor1","gradientColor2","test","addColorStop","themeColors","defaultColors","forEach","colorCode","exec","shift","_registerColor","push","join","_adjustColor","dark","l_adj","hsl","PFElement","_registerColors","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-avatar/pfe-avatar.umd.min.js b/elements/pfe-avatar/pfe-avatar.umd.min.js
new file mode 100644
index 0000000000..01c94c9dcd
--- /dev/null
+++ b/elements/pfe-avatar/pfe-avatar.umd.min.js
@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],e):t.PfeAvatar=e(t.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var r=function(){function a(t,e){for(var r=0;r:host{--pfe-avatar--width:128px;display:block;position:relative;width:var(--pfe-avatar--width);height:var(--pfe-avatar--width)}:host canvas{width:100%;height:100%;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:-o-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([pfe-shape=rounded]) canvas,:host([pfe-shape=rounded]) img{border-radius:calc(var(--pfe-avatar--width)/ 8 + 1px)}:host([pfe-shape=circle]) canvas,:host([pfe-shape=circle]) img{border-radius:50%}:host([pfe-src]) canvas{display:none}:host([pfe-src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([pfe-src])) img{display:none}:host([hidden]){display:none}\n"}},{key:"templateUrl",get:function(){return"pfe-avatar.html"}},{key:"styleUrl",get:function(){return"pfe-avatar.scss"}},{key:"name",get:function(){return this.getAttribute("pfe-name")},set:function(t){return this.setAttribute("pfe-name",t)}},{key:"src",get:function(){return this.getAttribute("pfe-src")},set:function(t){return this.setAttribute("pfe-src",t)}},{key:"pattern",get:function(){return this.getAttribute("pfe-pattern")||i.patterns.squares},set:function(t){if(i.patterns[t])return this.setAttribute("pfe-pattern",t);this.log('invalid pattern "'+t+'", valid patterns are: '+Object.values(i.patterns))}}],[{key:"tag",get:function(){return"pfe-avatar"}},{key:"observedAttributes",get:function(){return["pfe-name","pfe-pattern","pfe-src","pfe-shape"]}},{key:"patterns",get:function(){return{triangles:"triangles",squares:"squares"}}},{key:"defaultColors",get:function(){return"#67accf #448087 #709c6b #a35252 #826cbb"}}]),r(i,[{key:"connectedCallback",value:function(){n(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"connectedCallback",this).call(this),this._initCanvas(),this.dispatchEvent(new CustomEvent(i.tag+":connected",{bubbles:!1}))}},{key:"attributeChangedCallback",value:function(t,e,r){var a=this;n(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"attributeChangedCallback",this).apply(this,arguments),this.connected?this.update():this.addEventListener(i.tag+":connected",function(){return a.update()})}},{key:"_initCanvas",value:function(){this._canvas=this.shadowRoot.querySelector("canvas");var t=this.var("--pfe-avatar--width").replace(/px$/,"");this._canvas.width=t,this._canvas.height=t,this._squareSize=this._canvas.width/8,this._triangleSize=this._canvas.width/4,this._ctx=this._canvas.getContext("2d")}},{key:"update",value:function(){if(this.hasAttribute("pfe-src"))this.shadowRoot.querySelector("img").src=this.src;else{var t=function(t){for(var e=5381,r=t.length;r;)e=33*e^t.charCodeAt(--r);return e>>>0}(this.name).toString(2),e=t.split("").map(function(t){return Number(t)});this._colorIndex=Math.floor(i.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=i.colors[this._colorIndex].color1,this.color2=i.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===i.patterns.squares?this._drawSquarePattern(e):this.pattern===i.patterns.triangles&&this._drawTrianglePattern(e)}}},{key:"_clear",value:function(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}},{key:"_drawBackground",value:function(){this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}},{key:"_drawSquarePattern",value:function(t){if(this._ctx.fillStyle=this.color2,this._ctx)for(var e=t.length;e--;)t[e]&&this._drawMirroredSquare(e%4,Math.floor(e/4))}},{key:"_drawMirroredSquare",value:function(t,e){this._ctx&&(this._drawSquare(t,e),this._drawSquare(7-t,e))}},{key:"_drawSquare",value:function(t,e){this._ctx.fillRect(this._squareSize*t,this._squareSize*e,this._squareSize,this._squareSize)}},{key:"_drawTrianglePattern",value:function(t){if(this._ctx.fillStyle=this.color2,this._ctx)for(var e=t.length;e--;)if(t[e]){var r=Math.floor(e/2)%2,a=Math.floor(e/4),i=[r,a],n=[r,a],o=[r,a];switch(e%4){case 0:n[1]++,o[0]++,o[1]++;break;case 1:n[0]++,o[0]++,o[1]++;break;case 2:n[0]++,o[1]++;break;case 3:i[0]++,n[0]++,n[1]++,o[1]++}this._drawMirroredTriangle(i,n,o)}}},{key:"_drawMirroredTriangle",value:function(t,e,r){this._ctx&&(this._drawTriangle(t,e,r),this._drawTriangle([4-t[0],t[1]],[4-e[0],e[1]],[4-r[0],r[1]]))}},{key:"_drawTriangle",value:function(t,e,r){var a,i,n,o=this;this._ctx.beginPath(),(a=this._ctx).moveTo.apply(a,s(t.map(function(t){return t*o._triangleSize}))),(i=this._ctx).lineTo.apply(i,s(e.map(function(t){return t*o._triangleSize}))),(n=this._ctx).lineTo.apply(n,s(r.map(function(t){return t*o._triangleSize}))),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill()}},{key:"_drawGradient",value:function(){var t=this._ctx.createLinearGradient(0,this._canvas.height,this._canvas.width,0),e=this.color2,r=e,a=e;/^#[A-f0-9]{3}$/.test(e)?(r+="c",a+="0"):/^#[A-f0-9]{6}$/.test(e)&&(r+="cc",a+="00"),t.addColorStop(0,r),t.addColorStop(1,a),t.addColorStop(1,r),this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}}],[{key:"_registerColors",value:function(){var i=this;return this.colors=[],(this.var("--pfe-avatar--colors")||this.defaultColors).split(/\s+/).forEach(function(t){var e=void 0;switch(t.length){case 4:if(e=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t)){e.shift();var r=e.map(function(t){return parseInt(t+t,16)});i._registerColor(r)}else i.log("[pfe-avatar] invalid color "+t);break;case 7:if(e=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t)){e.shift();var a=e.map(function(t){return parseInt(t,16)});i._registerColor(a)}else i.log("[pfe-avatar] invalid color "+t)}}),this.colors}},{key:"_registerColor",value:function(t){i.colors.push({color1:"rgb("+t.join(",")+")",color2:"rgb("+this._adjustColor(t).join(",")+")"})}},{key:"_adjustColor",value:function(t){var e=function(t,e,r){var a,i=void 0,n=void 0,o=Math.max(0,Math.min(255,t))/255,s=Math.max(0,Math.min(255,e))/255,c=Math.max(0,Math.min(255,r))/255,l=Math.min(Math.min(o,s),c),h=Math.max(Math.max(o,s),c),u=h-l;if(a=(h+l)/2,0===u)n=i=0;else{n=a<.5?u/(h+l):u/(2-h-l);var f=((h-o)/6+u/2)/u,p=((h-s)/6+u/2)/u,d=((h-c)/6+u/2)/u;o==h?i=d-p:s==h?i=1/3+f-d:c==h&&(i=2/3+p-f),i<0?i+=1:1>> 0;\n}\n\nfunction h2rgb(v1, v2, vH) {\n if (vH < 0) vH += 1;\n if (vH > 1) vH -= 1;\n if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH;\n if (2 * vH < 1) return v2;\n if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6;\n return v1;\n}\n\n/**\n * Convert an HSL color to RGB.\n *\n * @param {Number} H the hue component\n * @param {Number} S the saturation component\n * @param {Number} L the luminance component\n * @return {Array} [R, G, B]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nfunction hsl2rgb(_H, _S, _L) {\n let R, G, B;\n\n const H = Math.max(0, Math.min(1, _H));\n const S = Math.max(0, Math.min(1, _S));\n const L = Math.max(0, Math.min(1, _L));\n\n if (S == 0) {\n R = L * 255;\n G = L * 255;\n B = L * 255;\n } else {\n let a, b;\n\n if (L < 0.5) {\n b = L * (1 + S);\n } else {\n b = L + S - S * L;\n }\n\n a = 2 * L - b;\n\n R = 255 * h2rgb(a, b, H + 1 / 3);\n G = 255 * h2rgb(a, b, H);\n B = 255 * h2rgb(a, b, H - 1 / 3);\n }\n\n return [R, G, B];\n}\n\n/**\n * Convert an RGBcolor to HSL .\n *\n * @param {Number} R the red component\n * @param {Number} G the green component\n * @param {Number} B the blue component\n * @return {Array} [H, S, L]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nfunction rgb2hsl(_R, _G, _B) {\n let H, S, L;\n\n const R = Math.max(0, Math.min(255, _R));\n const G = Math.max(0, Math.min(255, _G));\n const B = Math.max(0, Math.min(255, _B));\n\n const r = R / 255;\n const g = G / 255;\n const b = B / 255;\n\n const var_min = Math.min(Math.min(r, g), b);\n const var_max = Math.max(Math.max(r, g), b);\n const del_max = var_max - var_min;\n\n L = (var_max + var_min) / 2;\n\n if (del_max === 0) {\n H = 0;\n S = 0;\n } else {\n if (L < 0.5) {\n S = del_max / (var_max + var_min);\n } else {\n S = del_max / (2 - var_max - var_min);\n }\n\n const del_r = ((var_max - r) / 6 + del_max / 2) / del_max;\n const del_g = ((var_max - g) / 6 + del_max / 2) / del_max;\n const del_b = ((var_max - b) / 6 + del_max / 2) / del_max;\n\n if (r == var_max) {\n H = del_b - del_g;\n } else if (g == var_max) {\n H = 1 / 3 + del_r - del_b;\n } else if (b == var_max) {\n H = 2 / 3 + del_g - del_r;\n }\n\n if (H < 0) {\n H += 1;\n } else if (H > 1) {\n H -= 1;\n }\n }\n\n return [H, S, L];\n}\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nclass PfeAvatar extends PFElement {\n\n get html() {\n return `\n`;\n }\n static get tag() {\n return \"pfe-avatar\";\n }\n\n get templateUrl() {\n return \"pfe-avatar.html\";\n }\n\n get styleUrl() {\n return \"pfe-avatar.scss\";\n }\n\n static get observedAttributes() {\n return [\"pfe-name\", \"pfe-pattern\", \"pfe-src\", \"pfe-shape\"];\n }\n\n static get patterns() {\n return {\n triangles: \"triangles\",\n squares: \"squares\"\n };\n }\n\n static get defaultColors() {\n return \"#67accf #448087 #709c6b #a35252 #826cbb\";\n }\n\n get name() {\n return this.getAttribute(\"pfe-name\");\n }\n\n set name(val) {\n return this.setAttribute(\"pfe-name\", val);\n }\n\n get src() {\n return this.getAttribute(\"pfe-src\");\n }\n\n set src(href) {\n return this.setAttribute(\"pfe-src\", href);\n }\n\n get pattern() {\n return this.getAttribute(\"pfe-pattern\") || PfeAvatar.patterns.squares;\n }\n\n set pattern(name) {\n if (!PfeAvatar.patterns[name]) {\n this.log(\n `invalid pattern \"${name}\", valid patterns are: ${Object.values(\n PfeAvatar.patterns\n )}`\n );\n return;\n }\n return this.setAttribute(\"pfe-pattern\", name);\n }\n\n constructor() {\n super(PfeAvatar);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._initCanvas();\n\n this.dispatchEvent(\n new CustomEvent(`${PfeAvatar.tag}:connected`, {\n bubbles: false\n })\n );\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(...arguments);\n\n if (this.connected) {\n this.update();\n } else {\n this.addEventListener(`${PfeAvatar.tag}:connected`, () => this.update());\n }\n }\n\n _initCanvas() {\n this._canvas = this.shadowRoot.querySelector(\"canvas\");\n const size = this.var(\"--pfe-avatar--width\").replace(/px$/, \"\");\n this._canvas.width = size;\n this._canvas.height = size;\n\n this._squareSize = this._canvas.width / 8;\n this._triangleSize = this._canvas.width / 4;\n\n this._ctx = this._canvas.getContext(\"2d\");\n }\n\n static _registerColors() {\n this.colors = [];\n const themeColors = this.var(\"--pfe-avatar--colors\") || this.defaultColors;\n\n themeColors.split(/\\s+/).forEach(colorCode => {\n let pattern;\n switch (colorCode.length) {\n case 4: // ex: \"#0fc\"\n pattern = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(colorCode);\n if (pattern) {\n pattern.shift();\n const color = pattern.map(c => parseInt(c + c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n break;\n case 7: // ex: \"#00ffcc\"\n pattern = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(\n colorCode\n );\n if (pattern) {\n pattern.shift();\n const color = pattern.map(c => parseInt(c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n }\n });\n\n return this.colors;\n }\n\n static _registerColor(color) {\n PfeAvatar.colors.push({\n color1: `rgb(${color.join(\",\")})`,\n color2: `rgb(${this._adjustColor(color).join(\",\")})`\n });\n }\n\n static _adjustColor(color) {\n const dark = 0.1;\n const l_adj = 0.1; // luminance adjustment\n const hsl = rgb2hsl(...color);\n\n // if luminance is too dark already, then lighten the alternate color\n // instead of darkening it.\n hsl[2] += hsl[2] > dark ? -l_adj : l_adj;\n\n return hsl2rgb(...hsl);\n }\n\n update() {\n // if we have a src element, update the img, otherwise update the random pattern\n if (this.hasAttribute(\"pfe-src\")) {\n this.shadowRoot.querySelector(\"img\").src = this.src;\n } else {\n const bitPattern = hash(this.name).toString(2);\n const arrPattern = bitPattern.split(\"\").map(n => Number(n));\n this._colorIndex = Math.floor(\n (PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32)\n );\n this.color1 = PfeAvatar.colors[this._colorIndex].color1;\n this.color2 = PfeAvatar.colors[this._colorIndex].color2;\n\n this._clear();\n this._drawBackground();\n if (this.pattern === PfeAvatar.patterns.squares) {\n this._drawSquarePattern(arrPattern);\n } else if (this.pattern === PfeAvatar.patterns.triangles) {\n this._drawTrianglePattern(arrPattern);\n }\n // this._drawGradient();\n }\n }\n\n _clear() {\n this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawBackground() {\n this._ctx.fillStyle = this.color1;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawSquarePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n this._drawMirroredSquare(i % 4, Math.floor(i / 4));\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position, mirrored onto both the left and right half of the canvas.\n */\n _drawMirroredSquare(x, y) {\n if (this._ctx) {\n this._drawSquare(x, y);\n this._drawSquare(7 - x, y);\n }\n }\n\n _drawSquare(x, y) {\n this._ctx.fillRect(\n this._squareSize * x,\n this._squareSize * y,\n this._squareSize,\n this._squareSize\n );\n }\n\n _drawTrianglePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n const x = Math.floor(i / 2) % 2;\n const y = Math.floor(i / 4);\n const alt = i % 4;\n\n const p1 = [x, y];\n const p2 = [x, y];\n const p3 = [x, y];\n\n switch (alt) {\n case 0:\n p2[1]++;\n p3[0]++;\n p3[1]++;\n break;\n case 1:\n p2[0]++;\n p3[0]++;\n p3[1]++;\n break;\n case 2:\n p2[0]++;\n p3[1]++;\n break;\n case 3:\n p1[0]++;\n p2[0]++;\n p2[1]++;\n p3[1]++;\n break;\n }\n\n this._drawMirroredTriangle(p1, p2, p3);\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position in the top-left quadrant of the\n * canvas, and mirrored to the other three quadrants.\n */\n _drawMirroredTriangle(p1, p2, p3) {\n if (this._ctx) {\n this._drawTriangle(p1, p2, p3);\n this._drawTriangle(\n [4 - p1[0], p1[1]],\n [4 - p2[0], p2[1]],\n [4 - p3[0], p3[1]]\n );\n }\n }\n\n _drawTriangle(p1, p2, p3) {\n this._ctx.beginPath();\n this._ctx.moveTo(...p1.map(c => c * this._triangleSize));\n this._ctx.lineTo(...p2.map(c => c * this._triangleSize));\n this._ctx.lineTo(...p3.map(c => c * this._triangleSize));\n this._ctx.closePath();\n this._ctx.fill();\n this._ctx.fill();\n }\n\n _drawGradient() {\n const gradient = this._ctx.createLinearGradient(\n 0,\n this._canvas.height,\n this._canvas.width,\n 0\n );\n const color = this.color2;\n let gradientColor1 = color;\n let gradientColor2 = color;\n if (/^#[A-f0-9]{3}$/.test(color)) {\n // color is of the form \"#fff\"\n gradientColor1 += \"c\";\n gradientColor2 += \"0\";\n } else if (/^#[A-f0-9]{6}$/.test(color)) {\n // color is of the form \"#ffffff\"\n gradientColor1 += \"cc\";\n gradientColor2 += \"00\";\n }\n gradient.addColorStop(0, gradientColor1);\n gradient.addColorStop(1, gradientColor2);\n gradient.addColorStop(1, gradientColor1);\n this._ctx.fillStyle = gradient;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n}\n\nPfeAvatar._registerColors();\n\nPFElement.create(PfeAvatar);\n\nexport default PfeAvatar;\n//# sourceMappingURL=pfe-avatar.js.map\n"],"names":["h2rgb","v1","v2","vH","PfeAvatar","PFElement","this","getAttribute","val","setAttribute","href","patterns","squares","name","log","Object","values","_initCanvas","dispatchEvent","CustomEvent","tag","attr","oldValue","newValue","arguments","connected","update","addEventListener","_this2","_canvas","shadowRoot","querySelector","size","var","replace","width","height","_squareSize","_triangleSize","_ctx","getContext","hasAttribute","src","bitPattern","str","hash","i","length","charCodeAt","toString","arrPattern","split","map","Number","n","_colorIndex","Math","floor","colors","parseInt","pow","color1","color2","_clear","_drawBackground","pattern","_drawSquarePattern","triangles","_drawTrianglePattern","clearRect","fillStyle","fillRect","_drawMirroredSquare","x","y","_drawSquare","p1","p2","p3","_drawMirroredTriangle","_drawTriangle","beginPath","moveTo","c","_this3","lineTo","closePath","fill","gradient","createLinearGradient","color","gradientColor1","gradientColor2","test","addColorStop","defaultColors","forEach","colorCode","exec","shift","_registerColor","push","join","_adjustColor","hsl","_R","_G","_B","L","H","S","r","max","min","g","b","var_min","var_max","del_max","del_r","del_g","del_b","_H","_S","_L","R","G","B","a","_registerColors","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-band/package.json b/elements/pfe-band/package.json
index 3ee95b6c1a..92a1037fa1 100644
--- a/elements/pfe-band/package.json
+++ b/elements/pfe-band/package.json
@@ -10,7 +10,7 @@
"properties": "src/pfe-band-properties.json"
}
},
- "version": "1.0.0-prerelease.10",
+ "version": "1.0.0-prerelease.11",
"description": "Band container for PatternFly Elements",
"repository": {
"type": "git",
@@ -30,8 +30,8 @@
},
"license": "MIT",
"dependencies": {
- "@patternfly/pfe-sass": "^1.0.0-prerelease.10",
- "@patternfly/pfelement": "^1.0.0-prerelease.10"
+ "@patternfly/pfe-sass": "^1.0.0-prerelease.11",
+ "@patternfly/pfelement": "^1.0.0-prerelease.11"
},
"generator-rhelement-version": "0.6.8",
"keywords": [
diff --git a/elements/pfe-band/pfe-band.css b/elements/pfe-band/pfe-band.css
new file mode 100644
index 0000000000..9d026d48a4
--- /dev/null
+++ b/elements/pfe-band/pfe-band.css
@@ -0,0 +1,422 @@
+/*
+ * Copyright 2018 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.
+ */
+/* Palette of Border Colors */
+/* Palette of Feedback Colors */
+:host, .pfe-band__container, .pfe-band__header, .pfe-band__body, .pfe-band__aside, .pfe-band__footer {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-flow: column nowrap;
+ -ms-flex-flow: column nowrap;
+ flex-flow: column nowrap;
+ -webkit-box-align: start;
+ -webkit-align-items: flex-start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+}
+
+.pfe-band__container, .pfe-band__header, .pfe-band__body, .pfe-band__aside, .pfe-band__footer {
+ display: grid;
+ grid-row-gap: var(--pfe-band--gutter--vertical);
+ grid-column-gap: var(--pfe-band--gutter--horizontal);
+ margin-bottom: 0;
+}
+
+:host {
+ display: block;
+ --pfe-band--Padding--vertical: calc( var(--pfe-theme--container-spacer, 1rem) * 4);
+ --pfe-band--Padding--horizontal: calc( var(--pfe-theme--container-spacer, 1rem) * 1);
+ --pfe-band--Padding: var(--pfe-band--Padding--vertical) var(--pfe-band--Padding--horizontal);
+ --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #dfdfdf);
+ --pfe-band--BackgroundPosition: center center;
+ --pfe-band--Border: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;
+ --pfe-band--layout: 1fr;
+ --pfe-band__header--layout: 1fr;
+ --pfe-band__body--layout: 1fr;
+ --pfe-band__footer--layout: 1fr;
+ --pfe-band__aside--layout: 1fr;
+ --pfe-band--gutter--vertical: var(--pfe-theme--container-spacer, 1rem);
+ --pfe-band--gutter--horizontal: calc(var(--pfe-theme--container-spacer, 1rem) * 3);
+ --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--base--text, #333);
+ --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--base--link, #00538c);
+ --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--base--link--visited, #7551a6);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--base--link--hover, #00305b);
+ --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--base--link--focus, #00305b);
+ --pfe-band--Width: auto;
+ --pfe-band--Width__aside--sm: 240px;
+ --pfe-band--Width__aside--lg: 300px;
+ position: relative;
+ padding: calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal);
+ border: var(--pfe-band--Border);
+ background-color: var(--pfe-band--BackgroundColor);
+ background-position: var(--pfe-band--BackgroundPosition);
+ color: var(--pfe-broadcasted--color--text);
+}
+
+@media screen and (min-width: 768px) {
+ :host {
+ --pfe-band--Width: calc( 768px - calc(var(--pfe-band--Padding--horizontal) * 4) );
+ }
+}
+
+@media screen and (min-width: 992px) {
+ :host {
+ --pfe-band--Width: calc( 992px - calc(var(--pfe-band--Padding--horizontal) * 4) );
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ :host {
+ --pfe-band--Width: calc( 1200px - calc(var(--pfe-band--Padding--horizontal) * 4) );
+ }
+}
+
+@media print {
+ :host {
+ --pfe-band--Padding: calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal);
+ }
+}
+
+@media (min-width: 576px) {
+ :host {
+ padding: var(--pfe-band--Padding);
+ }
+}
+
+@media print {
+ :host {
+ background-color: white !important;
+ background-image: none !important;
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+ }
+}
+
+:host *, :host *::before, :host *::after {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+:host([pfe-color="darker"]) {
+ --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #464646);
+ --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darker--text, #fff);
+ --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darker--link, #99ccff);
+ --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);
+ --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darker--link--focus, #cce6ff);
+}
+
+:host([pfe-color="darkest"]) {
+ --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #131313);
+ --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darkest--text, #fff);
+ --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darkest--link, #99ccff);
+ --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);
+ --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff);
+}
+
+:host([pfe-color="accent"]) {
+ --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #fe460d);
+ --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--accent--text, #fff);
+ --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--accent--link, #99ccff);
+ --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);
+ --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--accent--link--focus, #cce6ff);
+}
+
+:host([pfe-color="complement"]) {
+ --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #0477a4);
+ --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--complement--text, #fff);
+ --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--complement--link, #99ccff);
+ --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);
+ --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--complement--link--focus, #cce6ff);
+}
+
+:host([pfe-color="lighter"]) {
+ --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #ececec);
+ --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lighter--text, #333);
+ --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lighter--link, #06c);
+ --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lighter--link--hover, #003366);
+ --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lighter--link--focus, #003366);
+}
+
+:host([pfe-color="lightest"]) {
+ --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);
+ --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lightest--text, #333);
+ --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lightest--link, #06c);
+ --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lightest--link--hover, #003366);
+ --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366);
+}
+
+:host([pfe-size="small"]) {
+ --pfe-band--Padding: calc(var(--pfe-band--Padding--vertical) / 4) var(--pfe-band--Padding--horizontal);
+}
+
+.pfe-band__container {
+ --pfe-band_region--width: calc(calc(1fr - var(--pfe-band--Width__aside--sm)) - var(--pfe-band--gutter--horizontal));
+ --pfe-band--gridTemplateArea_mobile: "body";
+ position: relative;
+ margin: 0 auto;
+ width: 100%;
+ max-width: var(--pfe-band--Width);
+}
+
+.pfe-band__container[pfe-has-aside] {
+ --pfe-band--gridTemplateArea_mobile:
+ "body" "aside";
+ --pfe-band--gridTemplateArea_desktop:
+ "body aside";
+}
+
+@media (min-width: 768px) {
+ .pfe-band__container[pfe-has-aside] {
+ --pfe-band--layout: 1fr var(--pfe-band--Width__aside--sm);
+ }
+}
+
+@media (min-width: 992px) {
+ .pfe-band__container[pfe-has-aside] {
+ --pfe-band--layout: 1fr var(--pfe-band--Width__aside--lg);
+ }
+}
+
+.pfe-band__container[pfe-has-aside][pfe-aside-mobile="top"] {
+ --pfe-band--gridTemplateArea_mobile:
+ "aside" "body";
+}
+
+.pfe-band__container[pfe-has-aside][pfe-aside-desktop="left"] {
+ --pfe-band--gridTemplateArea_desktop:
+ "aside body";
+}
+
+@media (min-width: 768px) {
+ .pfe-band__container[pfe-has-aside][pfe-aside-desktop="left"] {
+ --pfe-band--layout: var(--pfe-band--Width__aside--sm) 1fr;
+ }
+}
+
+@media (min-width: 992px) {
+ .pfe-band__container[pfe-has-aside][pfe-aside-desktop="left"] {
+ --pfe-band--layout: var(--pfe-band--Width__aside--lg) 1fr;
+ }
+}
+
+.pfe-band__container[pfe-has-header] {
+ --pfe-band--gridTemplateArea_mobile:
+ "header" "body";
+}
+
+.pfe-band__container[pfe-has-header][pfe-has-aside] {
+ --pfe-band--gridTemplateArea_mobile:
+ "header"
+ "body" "aside";
+ --pfe-band--gridTemplateArea_desktop:
+ "header header"
+ "body aside";
+}
+
+.pfe-band__container[pfe-has-header][pfe-aside-mobile="top"] {
+ --pfe-band--gridTemplateArea_mobile:
+ "aside"
+ "header"
+ "body";
+}
+
+.pfe-band__container[pfe-has-header][pfe-aside-height="full"] {
+ --pfe-band--gridTemplateArea_desktop:
+ "header aside"
+ "body aside";
+}
+
+.pfe-band__container[pfe-has-header][pfe-aside-desktop="left"] {
+ --pfe-band--gridTemplateArea_desktop:
+ "header header"
+ "aside body";
+}
+
+.pfe-band__container[pfe-has-header][pfe-aside-desktop="left"][pfe-aside-height="full"] {
+ --pfe-band--gridTemplateArea_desktop:
+ "aside header"
+ "aside body";
+}
+
+.pfe-band__container[pfe-has-footer] {
+ --pfe-band--gridTemplateArea_mobile:
+ "body"
+ "footer";
+}
+
+.pfe-band__container[pfe-has-footer][pfe-has-aside] {
+ --pfe-band--gridTemplateArea_mobile:
+ "body"
+ "aside"
+ "footer";
+ --pfe-band--gridTemplateArea_desktop:
+ "body aside"
+ "footer footer";
+}
+
+.pfe-band__container[pfe-has-footer][pfe-aside-mobile="top"] {
+ --pfe-band--gridTemplateArea_mobile:
+ "aside"
+ "body"
+ "footer";
+}
+
+.pfe-band__container[pfe-has-footer][pfe-aside-height="full"] {
+ --pfe-band--gridTemplateArea_desktop:
+ "body aside"
+ "footer aside" ;
+}
+
+.pfe-band__container[pfe-has-footer][pfe-aside-desktop="left"] {
+ --pfe-band--gridTemplateArea_desktop:
+ "aside body"
+ "footer footer";
+}
+
+.pfe-band__container[pfe-has-footer][pfe-aside-desktop="left"][pfe-aside-height="full"] {
+ --pfe-band--gridTemplateArea_desktop:
+ "aside body"
+ "aside footer";
+}
+
+.pfe-band__container[pfe-has-header][pfe-has-footer] {
+ --pfe-band--gridTemplateArea_mobile:
+ "header"
+ "body"
+ "footer";
+}
+
+.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-has-aside] {
+ --pfe-band--gridTemplateArea_mobile:
+ "header"
+ "body"
+ "footer"
+ "aside";
+ --pfe-band--gridTemplateArea_desktop:
+ "header header"
+ "body aside"
+ "footer footer";
+}
+
+.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-mobile="top"] {
+ --pfe-band--gridTemplateArea_mobile:
+ "aside"
+ "header"
+ "body"
+ "footer";
+}
+
+.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-height="full"] {
+ --pfe-band--gridTemplateArea_desktop:
+ "header aside"
+ "body aside"
+ "footer aside" ;
+}
+
+.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop="left"] {
+ --pfe-band--gridTemplateArea_desktop:
+ "header header"
+ "aside body"
+ "footer footer";
+}
+
+.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop="left"][pfe-aside-height="full"] {
+ --pfe-band--gridTemplateArea_desktop:
+ "aside header"
+ "aside body"
+ "aside footer";
+}
+
+@supports (display: grid) {
+ .pfe-band__container {
+ grid-template-columns: var(--pfe-band--layout);
+ grid-template-rows: -webkit-max-content;
+ grid-template-rows: max-content;
+ grid-template-areas: var(--pfe-band--gridTemplateArea_mobile);
+ }
+ @media (min-width: 768px) {
+ .pfe-band__container {
+ grid-template-areas: var(--pfe-band--gridTemplateArea_desktop);
+ }
+ }
+}
+
+.pfe-band__header {
+ margin-bottom: var(--pfe-band--gutter--vertical);
+}
+
+@supports (display: grid) {
+ .pfe-band__header {
+ grid-area: header;
+ grid-template-columns: var(--pfe-band__header--layout);
+ }
+}
+
+.pfe-band__body {
+ margin-bottom: var(--pfe-band--gutter--vertical);
+}
+
+@supports (display: grid) {
+ .pfe-band__body {
+ grid-area: body;
+ grid-template-columns: var(--pfe-band__body--layout);
+ }
+}
+
+.pfe-band__aside {
+ margin-bottom: var(--pfe-band--gutter--vertical);
+}
+
+@supports (display: grid) {
+ .pfe-band__aside {
+ grid-area: aside;
+ grid-template-columns: var(--pfe-band__aside--layout);
+ }
+}
+
+.pfe-band__footer {
+ margin-bottom: var(--pfe-band--gutter--vertical);
+}
+
+@supports (display: grid) {
+ .pfe-band__footer {
+ grid-area: footer;
+ grid-template-columns: var(--pfe-band__footer--layout);
+ }
+}
+
+.pfe-band__aside {
+ -webkit-align-self: stretch;
+ -ms-flex-item-align: stretch;
+ align-self: stretch;
+}
+
+/*# sourceMappingURL=pfe-band.css.map */
diff --git a/elements/pfe-band/pfe-band.css.map b/elements/pfe-band/pfe-band.css.map
new file mode 100644
index 0000000000..12bc6e1fc0
--- /dev/null
+++ b/elements/pfe-band/pfe-band.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-band.css","../../pfe-sass/variables/_colors.scss","pfe-band.scss","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"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","file":"pfe-band.css","sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n//\n// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host, .pfe-band__container, .pfe-band__header, .pfe-band__body, .pfe-band__aside, .pfe-band__footer {\n display: flex;\n flex-flow: column nowrap;\n align-items: flex-start;\n}\n\n.pfe-band__container, .pfe-band__header, .pfe-band__body, .pfe-band__aside, .pfe-band__footer {\n display: grid;\n grid-row-gap: var(--pfe-band--gutter--vertical);\n grid-column-gap: var(--pfe-band--gutter--horizontal);\n margin-bottom: 0;\n}\n\n:host {\n display: block;\n --pfe-band--Padding--vertical: calc( var(--pfe-theme--container-spacer, 1rem) * 4);\n --pfe-band--Padding--horizontal: calc( var(--pfe-theme--container-spacer, 1rem) * 1);\n --pfe-band--Padding: var(--pfe-band--Padding--vertical) var(--pfe-band--Padding--horizontal);\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #dfdfdf);\n --pfe-band--BackgroundPosition: center center;\n --pfe-band--Border: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n --pfe-band--layout: 1fr;\n --pfe-band__header--layout: 1fr;\n --pfe-band__body--layout: 1fr;\n --pfe-band__footer--layout: 1fr;\n --pfe-band__aside--layout: 1fr;\n --pfe-band--gutter--vertical: var(--pfe-theme--container-spacer, 1rem);\n --pfe-band--gutter--horizontal: calc(var(--pfe-theme--container-spacer, 1rem) * 3);\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 --pfe-band--Width: auto;\n --pfe-band--Width__aside--sm: 240px;\n --pfe-band--Width__aside--lg: 300px;\n position: relative;\n padding: calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal);\n border: var(--pfe-band--Border);\n background-color: var(--pfe-band--BackgroundColor);\n background-position: var(--pfe-band--BackgroundPosition);\n color: var(--pfe-broadcasted--color--text);\n}\n\n@media screen and (min-width: 768px) {\n :host {\n --pfe-band--Width: calc( 768px - calc(var(--pfe-band--Padding--horizontal) * 4) );\n }\n}\n\n@media screen and (min-width: 992px) {\n :host {\n --pfe-band--Width: calc( 992px - calc(var(--pfe-band--Padding--horizontal) * 4) );\n }\n}\n\n@media screen and (min-width: 1200px) {\n :host {\n --pfe-band--Width: calc( 1200px - calc(var(--pfe-band--Padding--horizontal) * 4) );\n }\n}\n\n@media print {\n :host {\n --pfe-band--Padding: calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal);\n }\n}\n\n@media (min-width: 576px) {\n :host {\n padding: var(--pfe-band--Padding);\n }\n}\n\n@media print {\n :host {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n\n:host *, :host *::before, :host *::after {\n box-sizing: border-box;\n}\n\n:host([pfe-color=\"darker\"]) {\n --pfe-band--BackgroundColor: 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\n:host([pfe-color=\"darkest\"]) {\n --pfe-band--BackgroundColor: 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\n:host([pfe-color=\"accent\"]) {\n --pfe-band--BackgroundColor: 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\n:host([pfe-color=\"complement\"]) {\n --pfe-band--BackgroundColor: 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\n:host([pfe-color=\"lighter\"]) {\n --pfe-band--BackgroundColor: 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\n:host([pfe-color=\"lightest\"]) {\n --pfe-band--BackgroundColor: 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\n:host([pfe-size=\"small\"]) {\n --pfe-band--Padding: calc(var(--pfe-band--Padding--vertical) / 4) var(--pfe-band--Padding--horizontal);\n}\n\n.pfe-band__container {\n --pfe-band_region--width: calc(calc(1fr - var(--pfe-band--Width__aside--sm)) - var(--pfe-band--gutter--horizontal));\n --pfe-band--gridTemplateArea_mobile: \"body\";\n position: relative;\n margin: 0 auto;\n width: 100%;\n max-width: var(--pfe-band--Width);\n}\n\n.pfe-band__container[pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile:\n \"body\" \"aside\";\n --pfe-band--gridTemplateArea_desktop:\n \"body aside\";\n}\n\n@media (min-width: 768px) {\n .pfe-band__container[pfe-has-aside] {\n --pfe-band--layout: 1fr var(--pfe-band--Width__aside--sm);\n }\n}\n\n@media (min-width: 992px) {\n .pfe-band__container[pfe-has-aside] {\n --pfe-band--layout: 1fr var(--pfe-band--Width__aside--lg);\n }\n}\n\n.pfe-band__container[pfe-has-aside][pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile:\n \"aside\" \"body\";\n}\n\n.pfe-band__container[pfe-has-aside][pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside body\";\n}\n\n@media (min-width: 768px) {\n .pfe-band__container[pfe-has-aside][pfe-aside-desktop=\"left\"] {\n --pfe-band--layout: var(--pfe-band--Width__aside--sm) 1fr;\n }\n}\n\n@media (min-width: 992px) {\n .pfe-band__container[pfe-has-aside][pfe-aside-desktop=\"left\"] {\n --pfe-band--layout: var(--pfe-band--Width__aside--lg) 1fr;\n }\n}\n\n.pfe-band__container[pfe-has-header] {\n --pfe-band--gridTemplateArea_mobile:\n \"header\" \"body\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile: \n \"header\" \n \"body\" \"aside\";\n --pfe-band--gridTemplateArea_desktop: \n \"header header\" \n \"body aside\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile: \n \"aside\" \n \"header\" \n \"body\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header aside\"\n \"body aside\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header header\"\n \"aside body\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-aside-desktop=\"left\"][pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside header\"\n \"aside body\";\n}\n\n.pfe-band__container[pfe-has-footer] {\n --pfe-band--gridTemplateArea_mobile:\n \"body\"\n \"footer\";\n}\n\n.pfe-band__container[pfe-has-footer][pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile:\n \"body\"\n \"aside\"\n \"footer\";\n --pfe-band--gridTemplateArea_desktop:\n \"body aside\"\n \"footer footer\";\n}\n\n.pfe-band__container[pfe-has-footer][pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile:\n \"aside\"\n \"body\"\n \"footer\";\n}\n\n.pfe-band__container[pfe-has-footer][pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"body aside\"\n \"footer aside\" ;\n}\n\n.pfe-band__container[pfe-has-footer][pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside body\"\n \"footer footer\";\n}\n\n.pfe-band__container[pfe-has-footer][pfe-aside-desktop=\"left\"][pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside body\"\n \"aside footer\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-footer] {\n --pfe-band--gridTemplateArea_mobile:\n \"header\"\n \"body\"\n \"footer\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile:\n \"header\"\n \"body\"\n \"footer\"\n \"aside\";\n --pfe-band--gridTemplateArea_desktop:\n \"header header\"\n \"body aside\"\n \"footer footer\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile:\n \"aside\"\n \"header\"\n \"body\"\n \"footer\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header aside\"\n \"body aside\"\n \"footer aside\" ;\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header header\"\n \"aside body\"\n \"footer footer\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=\"left\"][pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside header\"\n \"aside body\"\n \"aside footer\";\n}\n\n@supports (display: grid) {\n .pfe-band__container {\n grid-template-columns: var(--pfe-band--layout);\n grid-template-rows: max-content;\n grid-template-areas: var(--pfe-band--gridTemplateArea_mobile);\n }\n @media (min-width: 768px) {\n .pfe-band__container {\n grid-template-areas: var(--pfe-band--gridTemplateArea_desktop);\n }\n }\n}\n\n.pfe-band__header {\n margin-bottom: var(--pfe-band--gutter--vertical);\n}\n\n@supports (display: grid) {\n .pfe-band__header {\n grid-area: header;\n grid-template-columns: var(--pfe-band__header--layout);\n }\n}\n\n.pfe-band__body {\n margin-bottom: var(--pfe-band--gutter--vertical);\n}\n\n@supports (display: grid) {\n .pfe-band__body {\n grid-area: body;\n grid-template-columns: var(--pfe-band__body--layout);\n }\n}\n\n.pfe-band__aside {\n margin-bottom: var(--pfe-band--gutter--vertical);\n}\n\n@supports (display: grid) {\n .pfe-band__aside {\n grid-area: aside;\n grid-template-columns: var(--pfe-band__aside--layout);\n }\n}\n\n.pfe-band__footer {\n margin-bottom: var(--pfe-band--gutter--vertical);\n}\n\n@supports (display: grid) {\n .pfe-band__footer {\n grid-area: footer;\n grid-template-columns: var(--pfe-band__footer--layout);\n }\n}\n\n.pfe-band__aside {\n align-self: stretch;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: band;\n\n%flex-fallback {\n display: flex;\n flex-flow: column nowrap;\n align-items: flex-start;\n}\n\n%grid-layout {\n display: grid;\n grid-row-gap: #{pfe-local(gutter--vertical)};\n grid-column-gap: #{pfe-local(gutter--horizontal)};\n margin-bottom: 0;\n}\n\n:host {\n display: block;\n\n // Default spacing values\n --pfe-band--Padding--vertical: calc( #{pfe-var(container-spacer)} * 4);\n --pfe-band--Padding--horizontal: calc( #{pfe-var(container-spacer)} * 1);\n // Bring them together for ease of use below\n --pfe-band--Padding: #{pfe-local(Padding--vertical)} #{pfe-local(Padding--horizontal)};\n\n // Surface colors\n --pfe-band--BackgroundColor: #{pfe-color(surface--base)};\n --pfe-band--BackgroundPosition: center center;\n\n // Border settings\n --pfe-band--Border: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n\n // Layouts, grid layouts\n --pfe-band--layout: 1fr;\n --pfe-band__header--layout: 1fr;\n --pfe-band__body--layout: 1fr;\n --pfe-band__footer--layout: 1fr;\n --pfe-band__aside--layout: 1fr;\n\n // Vertical spacing\n --pfe-band--gutter--vertical: #{pfe-var(container-spacer)};\n --pfe-band--gutter--horizontal: calc(#{pfe-var(container-spacer)} * 3);\n\n // Text colors\n --pfe-broadcasted--color--text: #{pfe-color(surface--base--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--base--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--base--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--base--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--base--link--focus)};\n\n // Band width logic\n // Initialize at mobile breakpoint\n --pfe-band--Width: auto;\n --pfe-band--Width__aside--sm: 240px;\n --pfe-band--Width__aside--lg: 300px;\n\n // Loop through the other breakpoints\n @each $size in (md, lg, xl) {\n @media screen and (min-width: pfe-breakpoint(#{$size})) {\n --pfe-band--Width: calc( #{pfe-breakpoint(#{$size})} - calc(#{pfe-local(Padding--horizontal)} * 4) );\n }\n }\n // Reduce padding for print\n @media print {\n --pfe-band--Padding: calc(#{pfe-local(Padding--vertical)} / 2) #{pfe-local(Padding--horizontal)};\n }\n\n // Wrapper sets padding and background visuals\n position: relative;\n @extend %flex-fallback;\n\n // Padding \n padding: calc(#{pfe-local(Padding--vertical)} / 2) #{pfe-local(Padding--horizontal)};\n\n @media (min-width: #{pfe-breakpoint(sm)}) {\n padding: #{pfe-local(Padding)};\n }\n\n // Border styles\n border: #{pfe-local(Border)};\n\n // Base colors\n background-color: #{pfe-local(BackgroundColor)};\n background-position: #{pfe-local(BackgroundPosition)};\n color: #{pfe-radio(color, text)};\n\n // Remove background color for print\n @include pfe-no-print-background;\n\n // Tag element styles\n *, *::before, *::after {\n box-sizing: border-box;\n }\n}\n\n@each $color in (darker, darkest, accent, complement, lighter, lightest) {\n :host([pfe-color=\"#{$color}\"]) {\n --pfe-band--BackgroundColor: #{pfe-color(surface--#{$color})};\n --pfe-broadcasted--color--text: #{pfe-color(surface--#{$color}--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--#{$color}--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--#{$color}--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--#{$color}--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--#{$color}--link--focus)};\n }\n}\n\n// thinner padding on top & bottom\n:host([pfe-size=\"small\"]) {\n --pfe-band--Padding: calc(#{pfe-local(Padding--vertical)} / 4) #{pfe-local(Padding--horizontal)};\n}\n\n.pfe-band {\n &__container {\n // Does not need to be wrapped in @supports because it updates variables\n --pfe-band_region--width: calc(calc(1fr - #{pfe-local(Width__aside--sm)}) - #{pfe-local(gutter--horizontal)});\n --pfe-band--gridTemplateArea_mobile: \"body\";\n // Styles for the different combination of regions\n &[pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile:\n \"body\" \"aside\";\n --pfe-band--gridTemplateArea_desktop:\n \"body aside\";\n @media (min-width: #{pfe-breakpoint(md)}) {\n --pfe-band--layout: 1fr #{pfe-local(Width__aside--sm)};\n }\n @media (min-width: #{pfe-breakpoint(lg)}) {\n --pfe-band--layout: 1fr #{pfe-local(Width__aside--lg)};\n }\n &[pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile:\n \"aside\" \"body\";\n }\n &[pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside body\";\n @media (min-width: #{pfe-breakpoint(md)}) {\n --pfe-band--layout: #{pfe-local(Width__aside--sm)} 1fr;\n }\n @media (min-width: #{pfe-breakpoint(lg)}) {\n --pfe-band--layout: #{pfe-local(Width__aside--lg)} 1fr;\n }\n }\n }\n &[pfe-has-header] {\n --pfe-band--gridTemplateArea_mobile:\n \"header\" \"body\";\n &[pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile: \n \"header\" \n \"body\" \"aside\";\n --pfe-band--gridTemplateArea_desktop: \n \"header header\" \n \"body aside\";\n }\n &[pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile: \n \"aside\" \n \"header\" \n \"body\";\n }\n &[pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header aside\"\n \"body aside\";\n }\n &[pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header header\"\n \"aside body\";\n &[pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside header\"\n \"aside body\";\n }\n }\n }\n &[pfe-has-footer] {\n --pfe-band--gridTemplateArea_mobile:\n \"body\"\n \"footer\";\n &[pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile:\n \"body\"\n \"aside\"\n \"footer\";\n --pfe-band--gridTemplateArea_desktop:\n \"body aside\"\n \"footer footer\";\n }\n &[pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile:\n \"aside\"\n \"body\"\n \"footer\";\n }\n &[pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"body aside\"\n \"footer aside\" ;\n }\n &[pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside body\"\n \"footer footer\";\n &[pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside body\"\n \"aside footer\";\n }\n }\n }\n &[pfe-has-header][pfe-has-footer] {\n --pfe-band--gridTemplateArea_mobile:\n \"header\"\n \"body\"\n \"footer\";\n &[pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile:\n \"header\"\n \"body\"\n \"footer\"\n \"aside\";\n --pfe-band--gridTemplateArea_desktop:\n \"header header\"\n \"body aside\"\n \"footer footer\";\n }\n &[pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile:\n \"aside\"\n \"header\"\n \"body\"\n \"footer\";\n }\n &[pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header aside\"\n \"body aside\"\n \"footer aside\" ;\n }\n &[pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header header\"\n \"aside body\"\n \"footer footer\";\n &[pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside header\"\n \"aside body\"\n \"aside footer\";\n }\n }\n }\n\n position: relative;\n margin: 0 auto;\n width: 100%;\n max-width: #{pfe-local(Width)};\n @extend %flex-fallback;\n\n // Grid support styles\n @supports (display: grid) {\n @extend %grid-layout;\n grid-template-columns: #{pfe-local(layout)};\n grid-template-rows: max-content;\n grid-template-areas: var(--pfe-band--gridTemplateArea_mobile);\n @media (min-width: #{pfe-breakpoint(md)}) {\n grid-template-areas: var(--pfe-band--gridTemplateArea_desktop);\n }\n }\n }\n // For each section in the band layout\n @each $section in (header, body, aside, footer) {\n &__#{$section} { // i.e., pfe-band__header\n @extend %flex-fallback; // Add the flex fallback styles\n margin-bottom: #{pfe-local(gutter--vertical)};\n // Apply the standard grid\n @supports (display: grid) {\n @extend %grid-layout;\n // Apply the section as a named grid-area\n grid-area: #{$section};\n // Allow users to hook into the layout with custom columns\n grid-template-columns: var(--pfe-band__#{$section}--layout);\n }\n }\n }\n\n &__aside {\n align-self: stretch;\n }\n}\n","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *, *::before, *::after {\n box-sizing: $boxSize;\n }\n}\n\n@mixin pfe-clearfix {\n &::after {\n clear: both;\n content: \"\";\n display: table;\n }\n}\n\n@mixin pfe-reset-list() {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n@mixin pfe-reset-box() {\n margin: 0;\n padding: 0;\n}\n\n@mixin pfe-sr-only() {\n position: absolute;\n overflow: hidden;\n clip: rect(0,0,0,0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n\n/// ===========================================================================\n/// Theme Color Vars - use with on=\"dark\" to affect light DOM\n/// ===========================================================================\n\n@mixin pfe-theme($theme) {\n // GENERAL CONTEXT-BASED UPDATES, ON=\"DARK\"\n @if $theme == dark {\n --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};\n }\n @else if $theme == light {\n --pfe-broadcasted--color--text: #{pfe-color(text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};\n }\n // MORE SPECIFIC COLOR BASED UPDATES, COLOR=\"DARKER\"\n @else if $theme == darker {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n }\n @else if $theme == darkest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n }\n @else if $theme == accent {\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n }\n @else if $theme == complement {\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n }\n\n @else if $theme == lighter {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n }\n @else if $theme == lightest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\n }\n}\n\n@mixin pfe-transition($properties...) {\n $return: null;\n @each $property in $properties {\n @if length($property) == 1 {\n $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma);\n }\n @else if length($property) == 2 {\n $return: append($return, nth($property, 1) nth($property, 2), comma);\n }\n }\n transition: $return;\n}\n\n// Make a CSS arrow\n@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) {\n $direction: (\n up: 180deg,\n down: 0deg,\n right: -90deg,\n left: 90deg,\n );\n border-style: #{pfe-var(surface--border-style)};\n border-width: $width $height 0;\n border-color: transparent;\n border-top-color: $color;\n transform: rotate(map-get($direction, $type));\n @if $pseudo {\n display: inline-block;\n content: \"\";\n @content;\n }\n}\n\n@mixin pfe-arrow-color($color) {\n border-top-color: $color;\n}\n\n@mixin pfe-print-media {\n @media print {\n @content;\n }\n}\n\n@mixin pfe-print-background {\n -webkit-print-color-adjust: exact;\n color-adjust: exact;\n}\n// scss-lint:disable ImportantRule\n@mixin pfe-no-print-background {\n @include pfe-print-media {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n// scss-lint:enable ImportantRule\n\n@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) {\n border: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-#{$position}-color: $color;\n @if $position == right {\n padding-left: $padding;\n margin-right: $margin;\n }\n @else if $position == left {\n padding-right: $padding;\n margin-left: $margin;\n }\n}\n\n@mixin pfe-retina {\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n @content;\n }\n}\n\n// Mixin for building slot selectors\n@mixin pfe-slot($slot-name, $selector: \"\") {\n // This logic makes it much easier to style default slots in a loop\n // with named slots\n @if $slot-name != default {\n ::slotted([slot=\"#{$slot-name}\"]#{$selector}) {\n @content;\n }\n }\n @else {\n ::slotted(*) {\n @content;\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion Specific SASS Vars\n/// ===========================================================================\n\n$pfe-expand_button--LineHeight: 1.5;\n$pfe-expand_button--padding: #{pfe-var(container-spacer)};\n$pfe-expand_button--padding--factor: .75;\n$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);\n\n$pfe-expand_chevron--size: .4em;\n$pfe-expand_chevron--weight: .1em;\n$pfe-expand_chevron--padding: 3em;\n$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};\n\n@mixin pfe-accordion-header {\n display: block;\n > * {\n margin: 0;\n }\n}\n\n@mixin pfe-trigger-button($align: left) {\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: #{pfe-var(font-weight--bold)};\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n\n font-size: calc(#{pfe-var(font-size)} * 1.1);\n line-height: #{pfe-var(line-height)};\n\n color: #{pfe-local(aux)};\n background-color: #{pfe-local(main)};\n border-left: #{pfe-local(BorderLeft)};\n border-right: #{pfe-local(BorderRight)};\n border-bottom: #{pfe-local(BorderBottom)};\n border-top: 0;\n\n &:hover {\n outline: none;\n border-left-color: #{pfe-local(BorderLeftColor--focus)};\n z-index: 2;\n }\n\n &:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: #{pfe-color(surface--border--darker)};\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n @if $align == right {\n padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;\n } @else {\n padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n}\n\n@mixin pfe-trigger-button-last($theme: light) {\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-button-first($theme: light) {\n border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-expanded {\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n@mixin pfe-trigger-color($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};\n }\n}\n\n@mixin pfe-trigger-color-expanded($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: #{pfe-color(surface--darker)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron-expanded($state: true, $position: after) {\n content: \"\";\n position: absolute;\n top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );\n display: block;\n border-style: #{pfe-var(surface--border-style)};\n height: #{$pfe-expand_chevron--size};\n width: #{$pfe-expand_chevron--size};\n text-align: center;\n transition: transform 0.15s;\n @if $state {\n border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n @else {\n border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;\n transform: rotate(45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion panel\n/// ===========================================================================\n\n@mixin pfe-container {\n position: relative;\n display: block;\n width: 100%;\n\n padding: calc(#{pfe-local(padding--vertical)} / 2) #{pfe-local(padding--horizontal)};\n\n @media (min-width: #{pfe-breakpoint(sm)}) {\n padding: #{pfe-local(Padding)};\n }\n}\n\n@mixin pfe-accordion-panel {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n@mixin pfe-accordion-panel-expanded {\n display: block;\n position: relative;\n}\n\n@mixin pfe-accordion-panel-expanded-style($theme: light) {\n border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;\n @if $theme == dark {\n box-shadow: none;\n background-color: #{pfe-color(surface--darker)};\n border-left-color: #{pfe-color(surface--darkest--text)};\n border-right-color: #{pfe-color(surface--darkest--text)};\n }\n @else {\n box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);\n border-left-color: #{pfe-color(surface--lightest--link)};\n background-color: #{pfe-color(surface--lightest)};\n border-right-color: #{pfe-color(surface--border--lightest)};\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n@mixin pfe-accordion-panel-container-inset($align: left) {\n box-sizing: border-box;\n width: 100%;\n\n @if $align == left {\n padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n @else {\n padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};\n }\n}\n"]}
\ No newline at end of file
diff --git a/elements/pfe-band/pfe-band.css.min.map b/elements/pfe-band/pfe-band.css.min.map
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/pfe-band/pfe-band.js b/elements/pfe-band/pfe-band.js
new file mode 100644
index 0000000000..efef4d5f91
--- /dev/null
+++ b/elements/pfe-band/pfe-band.js
@@ -0,0 +1,243 @@
+import PFElement from '../pfelement/pfelement.js';
+
+/*
+ * @license
+ * 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 PfeBand extends PFElement {
+
+ get html() {
+ return ` this.has_slot(`pfe-band--${slot}`) ? `pfe-has-${slot}` : "").join(" ")}>
+ ${this.has_slot("pfe-band--aside") && this.asidePosition.mobile === "top" ? `` : ""}
+ ${this.has_slot("pfe-band--header") ? `` : ""}
+
+ ${this.has_slot("pfe-band--aside") && this.asidePosition.mobile !== "top" ? `` : ""}
+ ${this.has_slot("pfe-band--footer") ? `` : ""}
+`;
+ }
+
+ static get properties() {
+ return {"color":{"title":"Background color","type":"string","enum":["lightest","lighter","base","darker","darkest","complement","accent"],"default":"base","observer":"_colorChanged"},"img-src":{"title":"Background image","type":"string","observer":"_imgSrcChanged"},"aside-desktop":{"title":"Aside positioning (desktop)","type":"string","default":"right","enum":["right","left"],"observer":"_basicAttributeChanged","options":{"dependencies":[{"type":"slot","id":"aside"}]}},"aside-mobile":{"title":"Aside positioning (mobile)","type":"string","default":"bottom","enum":["top","bottom"],"observer":"_basicAttributeChanged","options":{"dependencies":[{"type":"slot","id":"aside"}]}},"aside-height":{"title":"Aside height","type":"string","default":"body","enum":["full","body"],"observer":"_basicAttributeChanged","options":{"dependencies":[{"type":"slot","id":"aside"}]}}};
+ }
+
+ static get slots() {
+ return {"header":{"title":"Header","type":"array","namedSlot":true,"maxItems":3,"items":{"title":"Body item","oneOf":[{"$ref":"raw"}]}},"body":{"title":"Body","type":"array","namedSlot":false,"items":{"oneOf":[{"$ref":"pfe-card"},{"$ref":"raw"}]}},"footer":{"title":"Footer","type":"array","namedSlot":true,"maxItems":3,"items":{"oneOf":[{"$ref":"pfe-cta"},{"$ref":"raw"}]}},"aside":{"title":"Aside","type":"array","namedSlot":true,"maxItems":5,"items":{"oneOf":[{"$ref":"pfe-card"},{"$ref":"raw"}]}}};
+ }
+ static get tag() {
+ return "pfe-band";
+ }
+
+ get schemaUrl() {
+ return "pfe-band.json";
+ }
+
+ get templateUrl() {
+ return "pfe-band.html";
+ }
+
+ get styleUrl() {
+ return "pfe-band.scss";
+ }
+
+ get imageSrc() {
+ return this.getAttribute("pfe-img-src");
+ }
+
+ get backgroundColor() {
+ return this.getAttribute("pfe-color");
+ }
+
+ get asidePosition() {
+ return {
+ desktop: this.getAttribute("pfe-aside-desktop"),
+ mobile: this.getAttribute("pfe-aside-mobile"),
+ height: this.getAttribute("pfe-aside-height")
+ };
+ }
+
+ static get observedAttributes() {
+ return [
+ "pfe-aside-desktop",
+ "pfe-aside-mobile",
+ "pfe-aside-height",
+ "pfe-color",
+ "pfe-img-src"
+ ];
+ }
+
+ static get cascadingAttributes() {
+ return {
+ "pfe-aside-desktop": ".pfe-band__container",
+ "pfe-aside-mobile": ".pfe-band__container",
+ "pfe-aside-height": ".pfe-band__container"
+ };
+ }
+
+ // Declare the type of this component
+ static get PfeType() {
+ return PFElement.PfeTypes.Container;
+ }
+
+ constructor() {
+ super(PfeBand, { type: PfeBand.PfeType });
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ // Initialize the background image attachment
+ if (this.imageSrc) {
+ this._imgSrcChanged("pfe-img-src", "", this.imageSrc);
+ }
+ // Initialize the context setting for the children elements
+ if (this.backgroundColor) {
+ this._updateContext(this.backgroundColor);
+ }
+ }
+
+ attributeChangedCallback(attr, oldValue, newValue) {
+ super.attributeChangedCallback(attr, oldValue, newValue);
+ // Strip the prefix form the attribute
+ attr = attr.replace("pfe-", "");
+ // If the observer is defined in the attribute properties
+ if (this[attr] && this[attr].observer) {
+ // Get the observer function
+ let observer = this[this[attr].observer].bind(this);
+ // If it's a function, allow it to run
+ if (typeof observer === "function") observer(attr, oldValue, newValue);
+ }
+ }
+
+ _basicAttributeChanged(attr, oldValue, newValue) {
+ this[attr].value = newValue;
+ }
+
+ // Update the color attribute and contexts
+ _colorChanged(attr, oldValue, newValue) {
+ this[attr].value = newValue;
+ // If the new value has a dark background, update children elements
+ this._updateContext(newValue);
+ }
+
+ // Update the background image
+ _imgSrcChanged(attr, oldValue, newValue) {
+ // Set the image as the background image
+ this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;
+ }
+
+ // Set the children's context if parent background is dark
+ _updateContext(context) {
+ if (["darkest", "darker", "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(PfeBand);
+
+export default PfeBand;
+//# sourceMappingURL=pfe-band.js.map
diff --git a/elements/pfe-band/pfe-band.js.map b/elements/pfe-band/pfe-band.js.map
new file mode 100644
index 0000000000..ba1162b867
--- /dev/null
+++ b/elements/pfe-band/pfe-band.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-band.js","sources":["pfe-band.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../pfelement/pfelement.js\";\n\n// -- Polyfill for supporting Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\nif (!Element.prototype.matches) {\n Element.prototype.matches =\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}\n\n// -- Polyfill for supporting Array.includes\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, \"includes\", {\n value: function(valueToFind, fromIndex) {\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n // 1. Let O be ? ToObject(this value).\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeBand extends PFElement {\n\n get html() {\n return ` this.has_slot(`pfe-band--${slot}`) ? `pfe-has-${slot}` : \"\").join(\" \")}>\n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile === \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--header\") ? `` : \"\"}\n \n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--footer\") ? `` : \"\"}\n`;\n }\n\n static get properties() {\n return {\"color\":{\"title\":\"Background color\",\"type\":\"string\",\"enum\":[\"lightest\",\"lighter\",\"base\",\"darker\",\"darkest\",\"complement\",\"accent\"],\"default\":\"base\",\"observer\":\"_colorChanged\"},\"img-src\":{\"title\":\"Background image\",\"type\":\"string\",\"observer\":\"_imgSrcChanged\"},\"aside-desktop\":{\"title\":\"Aside positioning (desktop)\",\"type\":\"string\",\"default\":\"right\",\"enum\":[\"right\",\"left\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-mobile\":{\"title\":\"Aside positioning (mobile)\",\"type\":\"string\",\"default\":\"bottom\",\"enum\":[\"top\",\"bottom\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-height\":{\"title\":\"Aside height\",\"type\":\"string\",\"default\":\"body\",\"enum\":[\"full\",\"body\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}}};\n }\n\n static get slots() {\n return {\"header\":{\"title\":\"Header\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":3,\"items\":{\"title\":\"Body item\",\"oneOf\":[{\"$ref\":\"raw\"}]}},\"body\":{\"title\":\"Body\",\"type\":\"array\",\"namedSlot\":false,\"items\":{\"oneOf\":[{\"$ref\":\"pfe-card\"},{\"$ref\":\"raw\"}]}},\"footer\":{\"title\":\"Footer\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":3,\"items\":{\"oneOf\":[{\"$ref\":\"pfe-cta\"},{\"$ref\":\"raw\"}]}},\"aside\":{\"title\":\"Aside\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":5,\"items\":{\"oneOf\":[{\"$ref\":\"pfe-card\"},{\"$ref\":\"raw\"}]}}};\n }\n static get tag() {\n return \"pfe-band\";\n }\n\n get schemaUrl() {\n return \"pfe-band.json\";\n }\n\n get templateUrl() {\n return \"pfe-band.html\";\n }\n\n get styleUrl() {\n return \"pfe-band.scss\";\n }\n\n get imageSrc() {\n return this.getAttribute(\"pfe-img-src\");\n }\n\n get backgroundColor() {\n return this.getAttribute(\"pfe-color\");\n }\n\n get asidePosition() {\n return {\n desktop: this.getAttribute(\"pfe-aside-desktop\"),\n mobile: this.getAttribute(\"pfe-aside-mobile\"),\n height: this.getAttribute(\"pfe-aside-height\")\n };\n }\n\n static get observedAttributes() {\n return [\n \"pfe-aside-desktop\",\n \"pfe-aside-mobile\",\n \"pfe-aside-height\",\n \"pfe-color\",\n \"pfe-img-src\"\n ];\n }\n\n static get cascadingAttributes() {\n return {\n \"pfe-aside-desktop\": \".pfe-band__container\",\n \"pfe-aside-mobile\": \".pfe-band__container\",\n \"pfe-aside-height\": \".pfe-band__container\"\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeBand, { type: PfeBand.PfeType });\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Initialize the background image attachment\n if (this.imageSrc) {\n this._imgSrcChanged(\"pfe-img-src\", \"\", this.imageSrc);\n }\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n // Strip the prefix form the attribute\n attr = attr.replace(\"pfe-\", \"\");\n // If the observer is defined in the attribute properties\n if (this[attr] && this[attr].observer) {\n // Get the observer function\n let observer = this[this[attr].observer].bind(this);\n // If it's a function, allow it to run\n if (typeof observer === \"function\") observer(attr, oldValue, newValue);\n }\n }\n\n _basicAttributeChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Update the background image\n _imgSrcChanged(attr, oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"darker\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeBand);\n\nexport { PfeBand as default };\n"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-band/pfe-band.min.css b/elements/pfe-band/pfe-band.min.css
new file mode 100644
index 0000000000..dea66910ad
--- /dev/null
+++ b/elements/pfe-band/pfe-band.min.css
@@ -0,0 +1 @@
+.pfe-band__aside,.pfe-band__body,.pfe-band__container,.pfe-band__footer,.pfe-band__header,:host{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column nowrap;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.pfe-band__aside,.pfe-band__body,.pfe-band__container,.pfe-band__footer,.pfe-band__header{display:grid;grid-row-gap:var(--pfe-band--gutter--vertical);grid-column-gap:var(--pfe-band--gutter--horizontal);margin-bottom:0}:host{display:block;--pfe-band--Padding--vertical:calc( var(--pfe-theme--container-spacer, 1rem) * 4);--pfe-band--Padding--horizontal:calc( var(--pfe-theme--container-spacer, 1rem) * 1);--pfe-band--Padding:var(--pfe-band--Padding--vertical) var(--pfe-band--Padding--horizontal);--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-band--BackgroundPosition:center center;--pfe-band--Border:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-band--layout:1fr;--pfe-band__header--layout:1fr;--pfe-band__body--layout:1fr;--pfe-band__footer--layout:1fr;--pfe-band__aside--layout:1fr;--pfe-band--gutter--vertical:var(--pfe-theme--container-spacer, 1rem);--pfe-band--gutter--horizontal:calc(var(--pfe-theme--container-spacer, 1rem) * 3);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);--pfe-band--Width:auto;--pfe-band--Width__aside--sm:240px;--pfe-band--Width__aside--lg:300px;position:relative;padding:calc(var(--pfe-band--Padding--vertical)/ 2) var(--pfe-band--Padding--horizontal);border:var(--pfe-band--Border);background-color:var(--pfe-band--BackgroundColor);background-position:var(--pfe-band--BackgroundPosition);color:var(--pfe-broadcasted--color--text)}@media screen and (min-width:768px){:host{--pfe-band--Width:calc( 768px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media screen and (min-width:992px){:host{--pfe-band--Width:calc( 992px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media screen and (min-width:1200px){:host{--pfe-band--Width:calc( 1200px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media print{:host{--pfe-band--Padding:calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal)}}@media (min-width:576px){:host{padding:var(--pfe-band--Padding)}}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}:host *,:host ::after,:host ::before{-webkit-box-sizing:border-box;box-sizing:border-box}:host([pfe-color=darker]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([pfe-color=darkest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([pfe-color=accent]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([pfe-color=complement]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([pfe-color=lighter]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([pfe-color=lightest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([pfe-size=small]){--pfe-band--Padding:calc(var(--pfe-band--Padding--vertical) / 4) var(--pfe-band--Padding--horizontal)}.pfe-band__container{--pfe-band_region--width:calc(calc(1fr - var(--pfe-band--Width__aside--sm)) - var(--pfe-band--gutter--horizontal));--pfe-band--gridTemplateArea_mobile:"body";position:relative;margin:0 auto;width:100%;max-width:var(--pfe-band--Width)}.pfe-band__container[pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"body" "aside";--pfe-band--gridTemplateArea_desktop:"body aside"}@media (min-width:768px){.pfe-band__container[pfe-has-aside]{--pfe-band--layout:1fr var(--pfe-band--Width__aside--sm)}}@media (min-width:992px){.pfe-band__container[pfe-has-aside]{--pfe-band--layout:1fr var(--pfe-band--Width__aside--lg)}}.pfe-band__container[pfe-has-aside][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "body"}.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"aside body"}@media (min-width:768px){.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--layout:var(--pfe-band--Width__aside--sm) 1fr}}@media (min-width:992px){.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--layout:var(--pfe-band--Width__aside--lg) 1fr}}.pfe-band__container[pfe-has-header]{--pfe-band--gridTemplateArea_mobile:"header" "body"}.pfe-band__container[pfe-has-header][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"header" "body" "aside";--pfe-band--gridTemplateArea_desktop:"header header" "body aside"}.pfe-band__container[pfe-has-header][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "header" "body"}.pfe-band__container[pfe-has-header][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"header aside" "body aside"}.pfe-band__container[pfe-has-header][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"header header" "aside body"}.pfe-band__container[pfe-has-header][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside header" "aside body"}.pfe-band__container[pfe-has-footer]{--pfe-band--gridTemplateArea_mobile:"body" "footer"}.pfe-band__container[pfe-has-footer][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"body" "aside" "footer";--pfe-band--gridTemplateArea_desktop:"body aside" "footer footer"}.pfe-band__container[pfe-has-footer][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "body" "footer"}.pfe-band__container[pfe-has-footer][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"body aside" "footer aside"}.pfe-band__container[pfe-has-footer][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"aside body" "footer footer"}.pfe-band__container[pfe-has-footer][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside body" "aside footer"}.pfe-band__container[pfe-has-header][pfe-has-footer]{--pfe-band--gridTemplateArea_mobile:"header" "body" "footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"header" "body" "footer" "aside";--pfe-band--gridTemplateArea_desktop:"header header" "body aside" "footer footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "header" "body" "footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"header aside" "body aside" "footer aside"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"header header" "aside body" "footer footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside header" "aside body" "aside footer"}@supports (display:grid){.pfe-band__container{grid-template-columns:var(--pfe-band--layout);grid-template-rows:-webkit-max-content;grid-template-rows:max-content;grid-template-areas:var(--pfe-band--gridTemplateArea_mobile)}@media (min-width:768px){.pfe-band__container{grid-template-areas:var(--pfe-band--gridTemplateArea_desktop)}}}.pfe-band__header{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__header{grid-area:header;grid-template-columns:var(--pfe-band__header--layout)}}.pfe-band__body{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__body{grid-area:body;grid-template-columns:var(--pfe-band__body--layout)}}.pfe-band__aside{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__aside{grid-area:aside;grid-template-columns:var(--pfe-band__aside--layout)}}.pfe-band__footer{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__footer{grid-area:footer;grid-template-columns:var(--pfe-band__footer--layout)}}.pfe-band__aside{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}
\ No newline at end of file
diff --git a/elements/pfe-band/pfe-band.min.js b/elements/pfe-band/pfe-band.min.js
new file mode 100644
index 0000000000..ada770ff89
--- /dev/null
+++ b/elements/pfe-band/pfe-band.min.js
@@ -0,0 +1,26 @@
+import e from"../pfelement/pfelement.min.js";
+/*
+ * @license
+ * 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.
+ *
+*/
+Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var a=this;do{if(a.matches(e))return a;a=a.parentElement||a.parentNode}while(null!==a&&1===a.nodeType);return null}),Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{value:function(e,a){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),r=t.length>>>0;if(0===r)return!1;var o,d,i=0|a,n=Math.max(i>=0?i:r-Math.abs(i),0);for(;n.pfe-band__aside,.pfe-band__body,.pfe-band__container,.pfe-band__footer,.pfe-band__header,:host{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column nowrap;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.pfe-band__aside,.pfe-band__body,.pfe-band__container,.pfe-band__footer,.pfe-band__header{display:grid;grid-row-gap:var(--pfe-band--gutter--vertical);grid-column-gap:var(--pfe-band--gutter--horizontal);margin-bottom:0}:host{display:block;--pfe-band--Padding--vertical:calc( var(--pfe-theme--container-spacer, 1rem) * 4);--pfe-band--Padding--horizontal:calc( var(--pfe-theme--container-spacer, 1rem) * 1);--pfe-band--Padding:var(--pfe-band--Padding--vertical) var(--pfe-band--Padding--horizontal);--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-band--BackgroundPosition:center center;--pfe-band--Border:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-band--layout:1fr;--pfe-band__header--layout:1fr;--pfe-band__body--layout:1fr;--pfe-band__footer--layout:1fr;--pfe-band__aside--layout:1fr;--pfe-band--gutter--vertical:var(--pfe-theme--container-spacer, 1rem);--pfe-band--gutter--horizontal:calc(var(--pfe-theme--container-spacer, 1rem) * 3);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);--pfe-band--Width:auto;--pfe-band--Width__aside--sm:240px;--pfe-band--Width__aside--lg:300px;position:relative;padding:calc(var(--pfe-band--Padding--vertical)/ 2) var(--pfe-band--Padding--horizontal);border:var(--pfe-band--Border);background-color:var(--pfe-band--BackgroundColor);background-position:var(--pfe-band--BackgroundPosition);color:var(--pfe-broadcasted--color--text)}@media screen and (min-width:768px){:host{--pfe-band--Width:calc( 768px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media screen and (min-width:992px){:host{--pfe-band--Width:calc( 992px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media screen and (min-width:1200px){:host{--pfe-band--Width:calc( 1200px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media print{:host{--pfe-band--Padding:calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal)}}@media (min-width:576px){:host{padding:var(--pfe-band--Padding)}}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}:host *,:host ::after,:host ::before{-webkit-box-sizing:border-box;box-sizing:border-box}:host([pfe-color=darker]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([pfe-color=darkest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([pfe-color=accent]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([pfe-color=complement]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([pfe-color=lighter]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([pfe-color=lightest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([pfe-size=small]){--pfe-band--Padding:calc(var(--pfe-band--Padding--vertical) / 4) var(--pfe-band--Padding--horizontal)}.pfe-band__container{--pfe-band_region--width:calc(calc(1fr - var(--pfe-band--Width__aside--sm)) - var(--pfe-band--gutter--horizontal));--pfe-band--gridTemplateArea_mobile:"body";position:relative;margin:0 auto;width:100%;max-width:var(--pfe-band--Width)}.pfe-band__container[pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"body" "aside";--pfe-band--gridTemplateArea_desktop:"body aside"}@media (min-width:768px){.pfe-band__container[pfe-has-aside]{--pfe-band--layout:1fr var(--pfe-band--Width__aside--sm)}}@media (min-width:992px){.pfe-band__container[pfe-has-aside]{--pfe-band--layout:1fr var(--pfe-band--Width__aside--lg)}}.pfe-band__container[pfe-has-aside][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "body"}.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"aside body"}@media (min-width:768px){.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--layout:var(--pfe-band--Width__aside--sm) 1fr}}@media (min-width:992px){.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--layout:var(--pfe-band--Width__aside--lg) 1fr}}.pfe-band__container[pfe-has-header]{--pfe-band--gridTemplateArea_mobile:"header" "body"}.pfe-band__container[pfe-has-header][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"header" "body" "aside";--pfe-band--gridTemplateArea_desktop:"header header" "body aside"}.pfe-band__container[pfe-has-header][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "header" "body"}.pfe-band__container[pfe-has-header][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"header aside" "body aside"}.pfe-band__container[pfe-has-header][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"header header" "aside body"}.pfe-band__container[pfe-has-header][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside header" "aside body"}.pfe-band__container[pfe-has-footer]{--pfe-band--gridTemplateArea_mobile:"body" "footer"}.pfe-band__container[pfe-has-footer][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"body" "aside" "footer";--pfe-band--gridTemplateArea_desktop:"body aside" "footer footer"}.pfe-band__container[pfe-has-footer][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "body" "footer"}.pfe-band__container[pfe-has-footer][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"body aside" "footer aside"}.pfe-band__container[pfe-has-footer][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"aside body" "footer footer"}.pfe-band__container[pfe-has-footer][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside body" "aside footer"}.pfe-band__container[pfe-has-header][pfe-has-footer]{--pfe-band--gridTemplateArea_mobile:"header" "body" "footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"header" "body" "footer" "aside";--pfe-band--gridTemplateArea_desktop:"header header" "body aside" "footer footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "header" "body" "footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"header aside" "body aside" "footer aside"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"header header" "aside body" "footer footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside header" "aside body" "aside footer"}@supports (display:grid){.pfe-band__container{grid-template-columns:var(--pfe-band--layout);grid-template-rows:-webkit-max-content;grid-template-rows:max-content;grid-template-areas:var(--pfe-band--gridTemplateArea_mobile)}@media (min-width:768px){.pfe-band__container{grid-template-areas:var(--pfe-band--gridTemplateArea_desktop)}}}.pfe-band__header{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__header{grid-area:header;grid-template-columns:var(--pfe-band__header--layout)}}.pfe-band__body{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__body{grid-area:body;grid-template-columns:var(--pfe-band__body--layout)}}.pfe-band__aside{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__aside{grid-area:aside;grid-template-columns:var(--pfe-band__aside--layout)}}.pfe-band__footer{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__footer{grid-area:footer;grid-template-columns:var(--pfe-band__footer--layout)}}.pfe-band__aside{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}this.has_slot(`pfe-band--${e}`)?`pfe-has-${e}`:"").join(" ")}>\n ${this.has_slot("pfe-band--aside")&&"top"===this.asidePosition.mobile?'':""}\n ${this.has_slot("pfe-band--header")?'':""}\n \n ${this.has_slot("pfe-band--aside")&&"top"!==this.asidePosition.mobile?'':""}\n ${this.has_slot("pfe-band--footer")?'':""}\n`}static get properties(){return{color:{title:"Background color",type:"string",enum:["lightest","lighter","base","darker","darkest","complement","accent"],default:"base",observer:"_colorChanged"},"img-src":{title:"Background image",type:"string",observer:"_imgSrcChanged"},"aside-desktop":{title:"Aside positioning (desktop)",type:"string",default:"right",enum:["right","left"],observer:"_basicAttributeChanged",options:{dependencies:[{type:"slot",id:"aside"}]}},"aside-mobile":{title:"Aside positioning (mobile)",type:"string",default:"bottom",enum:["top","bottom"],observer:"_basicAttributeChanged",options:{dependencies:[{type:"slot",id:"aside"}]}},"aside-height":{title:"Aside height",type:"string",default:"body",enum:["full","body"],observer:"_basicAttributeChanged",options:{dependencies:[{type:"slot",id:"aside"}]}}}}static get slots(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{title:"Body item",oneOf:[{$ref:"raw"}]}},body:{title:"Body",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"pfe-card"},{$ref:"raw"}]}},footer:{title:"Footer",type:"array",namedSlot:!0,maxItems:3,items:{oneOf:[{$ref:"pfe-cta"},{$ref:"raw"}]}},aside:{title:"Aside",type:"array",namedSlot:!0,maxItems:5,items:{oneOf:[{$ref:"pfe-card"},{$ref:"raw"}]}}}}static get tag(){return"pfe-band"}get schemaUrl(){return"pfe-band.json"}get templateUrl(){return"pfe-band.html"}get styleUrl(){return"pfe-band.scss"}get imageSrc(){return this.getAttribute("pfe-img-src")}get backgroundColor(){return this.getAttribute("pfe-color")}get asidePosition(){return{desktop:this.getAttribute("pfe-aside-desktop"),mobile:this.getAttribute("pfe-aside-mobile"),height:this.getAttribute("pfe-aside-height")}}static get observedAttributes(){return["pfe-aside-desktop","pfe-aside-mobile","pfe-aside-height","pfe-color","pfe-img-src"]}static get cascadingAttributes(){return{"pfe-aside-desktop":".pfe-band__container","pfe-aside-mobile":".pfe-band__container","pfe-aside-height":".pfe-band__container"}}static get PfeType(){return e.PfeTypes.Container}constructor(){super(a,{type:a.PfeType})}connectedCallback(){super.connectedCallback(),this.imageSrc&&this._imgSrcChanged("pfe-img-src","",this.imageSrc),this.backgroundColor&&this._updateContext(this.backgroundColor)}attributeChangedCallback(e,a,t){if(super.attributeChangedCallback(e,a,t),this[e=e.replace("pfe-","")]&&this[e].observer){let r=this[this[e].observer].bind(this);"function"==typeof r&&r(e,a,t)}}_basicAttributeChanged(e,a,t){this[e].value=t}_colorChanged(e,a,t){this[e].value=t,this._updateContext(t)}_imgSrcChanged(e,a,t){this.style.backgroundImage=t?`url('${t}')`:""}_updateContext(e){["darkest","darker","complement","accent"].includes(e)&&["pfe-cta"].forEach(e=>{[...this.querySelectorAll(`${e}`)].forEach(e=>{const a=e.closest("[pfe-type=container]");a!==this&&null!==a||e.setAttribute("on","dark")})})}}e.create(a);export default a;
+//# sourceMappingURL=pfe-band.min.js.map
diff --git a/elements/pfe-band/pfe-band.min.js.map b/elements/pfe-band/pfe-band.min.js.map
new file mode 100644
index 0000000000..f696b566ab
--- /dev/null
+++ b/elements/pfe-band/pfe-band.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-band.min.js","sources":["pfe-band.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\n// -- Polyfill for supporting Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\nif (!Element.prototype.matches) {\n Element.prototype.matches =\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}\n\n// -- Polyfill for supporting Array.includes\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, \"includes\", {\n value: function(valueToFind, fromIndex) {\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n // 1. Let O be ? ToObject(this value).\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeBand extends PFElement {\n\n get html() {\n return ` this.has_slot(`pfe-band--${slot}`) ? `pfe-has-${slot}` : \"\").join(\" \")}>\n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile === \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--header\") ? `` : \"\"}\n \n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--footer\") ? `` : \"\"}\n`;\n }\n\n static get properties() {\n return {\"color\":{\"title\":\"Background color\",\"type\":\"string\",\"enum\":[\"lightest\",\"lighter\",\"base\",\"darker\",\"darkest\",\"complement\",\"accent\"],\"default\":\"base\",\"observer\":\"_colorChanged\"},\"img-src\":{\"title\":\"Background image\",\"type\":\"string\",\"observer\":\"_imgSrcChanged\"},\"aside-desktop\":{\"title\":\"Aside positioning (desktop)\",\"type\":\"string\",\"default\":\"right\",\"enum\":[\"right\",\"left\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-mobile\":{\"title\":\"Aside positioning (mobile)\",\"type\":\"string\",\"default\":\"bottom\",\"enum\":[\"top\",\"bottom\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-height\":{\"title\":\"Aside height\",\"type\":\"string\",\"default\":\"body\",\"enum\":[\"full\",\"body\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}}};\n }\n\n static get slots() {\n return {\"header\":{\"title\":\"Header\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":3,\"items\":{\"title\":\"Body item\",\"oneOf\":[{\"$ref\":\"raw\"}]}},\"body\":{\"title\":\"Body\",\"type\":\"array\",\"namedSlot\":false,\"items\":{\"oneOf\":[{\"$ref\":\"pfe-card\"},{\"$ref\":\"raw\"}]}},\"footer\":{\"title\":\"Footer\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":3,\"items\":{\"oneOf\":[{\"$ref\":\"pfe-cta\"},{\"$ref\":\"raw\"}]}},\"aside\":{\"title\":\"Aside\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":5,\"items\":{\"oneOf\":[{\"$ref\":\"pfe-card\"},{\"$ref\":\"raw\"}]}}};\n }\n static get tag() {\n return \"pfe-band\";\n }\n\n get schemaUrl() {\n return \"pfe-band.json\";\n }\n\n get templateUrl() {\n return \"pfe-band.html\";\n }\n\n get styleUrl() {\n return \"pfe-band.scss\";\n }\n\n get imageSrc() {\n return this.getAttribute(\"pfe-img-src\");\n }\n\n get backgroundColor() {\n return this.getAttribute(\"pfe-color\");\n }\n\n get asidePosition() {\n return {\n desktop: this.getAttribute(\"pfe-aside-desktop\"),\n mobile: this.getAttribute(\"pfe-aside-mobile\"),\n height: this.getAttribute(\"pfe-aside-height\")\n };\n }\n\n static get observedAttributes() {\n return [\n \"pfe-aside-desktop\",\n \"pfe-aside-mobile\",\n \"pfe-aside-height\",\n \"pfe-color\",\n \"pfe-img-src\"\n ];\n }\n\n static get cascadingAttributes() {\n return {\n \"pfe-aside-desktop\": \".pfe-band__container\",\n \"pfe-aside-mobile\": \".pfe-band__container\",\n \"pfe-aside-height\": \".pfe-band__container\"\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeBand, { type: PfeBand.PfeType });\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Initialize the background image attachment\n if (this.imageSrc) {\n this._imgSrcChanged(\"pfe-img-src\", \"\", this.imageSrc);\n }\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n // Strip the prefix form the attribute\n attr = attr.replace(\"pfe-\", \"\");\n // If the observer is defined in the attribute properties\n if (this[attr] && this[attr].observer) {\n // Get the observer function\n let observer = this[this[attr].observer].bind(this);\n // If it's a function, allow it to run\n if (typeof observer === \"function\") observer(attr, oldValue, newValue);\n }\n }\n\n _basicAttributeChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Update the background image\n _imgSrcChanged(attr, oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"darker\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeBand);\n\nexport default PfeBand;\n//# sourceMappingURL=pfe-band.js.map\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","this","parentElement","parentNode","nodeType","Array","includes","Object","defineProperty","value","valueToFind","fromIndex","TypeError","o","len","length","x","y","n","k","Math","max","abs","isNaN","PfeBand","PFElement","html","map","slot","has_slot","join","asidePosition","mobile","properties","color","title","type","enum","default","observer","img-src","aside-desktop","options","dependencies","id","aside-mobile","aside-height","slots","header","namedSlot","maxItems","items","oneOf","$ref","body","footer","aside","tag","schemaUrl","templateUrl","styleUrl","imageSrc","getAttribute","backgroundColor","desktop","height","observedAttributes","cascadingAttributes","pfe-aside-desktop","pfe-aside-mobile","pfe-aside-height","PfeType","PfeTypes","Container","[object Object]","super","connectedCallback","_imgSrcChanged","_updateContext","attr","oldValue","newValue","attributeChangedCallback","replace","bind","style","backgroundImage","context","forEach","elementName","querySelectorAll","myContainer","setAttribute","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-band/pfe-band.umd.js b/elements/pfe-band/pfe-band.umd.js
new file mode 100644
index 0000000000..809d50d62a
--- /dev/null
+++ b/elements/pfe-band/pfe-band.umd.js
@@ -0,0 +1,354 @@
+(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.PfeBand = 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);
+ }
+ };
+
+ /*
+ * @license
+ * 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 PfeBand = function (_PFElement) {
+ inherits(PfeBand, _PFElement);
+ createClass(PfeBand, [{
+ key: 'html',
+ get: function get$$1() {
+ var _this2 = this;
+
+ return '\n ' + (this.has_slot("pfe-band--aside") && this.asidePosition.mobile === "top" ? '' : "") + '\n ' + (this.has_slot("pfe-band--header") ? '' : "") + '\n \n ' + (this.has_slot("pfe-band--aside") && this.asidePosition.mobile !== "top" ? '' : "") + '\n ' + (this.has_slot("pfe-band--footer") ? '' : "") + '\n';
+ }
+ }, {
+ key: 'schemaUrl',
+ get: function get$$1() {
+ return "pfe-band.json";
+ }
+ }, {
+ key: 'templateUrl',
+ get: function get$$1() {
+ return "pfe-band.html";
+ }
+ }, {
+ key: 'styleUrl',
+ get: function get$$1() {
+ return "pfe-band.scss";
+ }
+ }, {
+ key: 'imageSrc',
+ get: function get$$1() {
+ return this.getAttribute("pfe-img-src");
+ }
+ }, {
+ key: 'backgroundColor',
+ get: function get$$1() {
+ return this.getAttribute("pfe-color");
+ }
+ }, {
+ key: 'asidePosition',
+ get: function get$$1() {
+ return {
+ desktop: this.getAttribute("pfe-aside-desktop"),
+ mobile: this.getAttribute("pfe-aside-mobile"),
+ height: this.getAttribute("pfe-aside-height")
+ };
+ }
+ }], [{
+ key: 'properties',
+ get: function get$$1() {
+ return { "color": { "title": "Background color", "type": "string", "enum": ["lightest", "lighter", "base", "darker", "darkest", "complement", "accent"], "default": "base", "observer": "_colorChanged" }, "img-src": { "title": "Background image", "type": "string", "observer": "_imgSrcChanged" }, "aside-desktop": { "title": "Aside positioning (desktop)", "type": "string", "default": "right", "enum": ["right", "left"], "observer": "_basicAttributeChanged", "options": { "dependencies": [{ "type": "slot", "id": "aside" }] } }, "aside-mobile": { "title": "Aside positioning (mobile)", "type": "string", "default": "bottom", "enum": ["top", "bottom"], "observer": "_basicAttributeChanged", "options": { "dependencies": [{ "type": "slot", "id": "aside" }] } }, "aside-height": { "title": "Aside height", "type": "string", "default": "body", "enum": ["full", "body"], "observer": "_basicAttributeChanged", "options": { "dependencies": [{ "type": "slot", "id": "aside" }] } } };
+ }
+ }, {
+ key: 'slots',
+ get: function get$$1() {
+ return { "header": { "title": "Header", "type": "array", "namedSlot": true, "maxItems": 3, "items": { "title": "Body item", "oneOf": [{ "$ref": "raw" }] } }, "body": { "title": "Body", "type": "array", "namedSlot": false, "items": { "oneOf": [{ "$ref": "pfe-card" }, { "$ref": "raw" }] } }, "footer": { "title": "Footer", "type": "array", "namedSlot": true, "maxItems": 3, "items": { "oneOf": [{ "$ref": "pfe-cta" }, { "$ref": "raw" }] } }, "aside": { "title": "Aside", "type": "array", "namedSlot": true, "maxItems": 5, "items": { "oneOf": [{ "$ref": "pfe-card" }, { "$ref": "raw" }] } } };
+ }
+ }, {
+ key: 'tag',
+ get: function get$$1() {
+ return "pfe-band";
+ }
+ }, {
+ key: 'observedAttributes',
+ get: function get$$1() {
+ return ["pfe-aside-desktop", "pfe-aside-mobile", "pfe-aside-height", "pfe-color", "pfe-img-src"];
+ }
+ }, {
+ key: 'cascadingAttributes',
+ get: function get$$1() {
+ return {
+ "pfe-aside-desktop": ".pfe-band__container",
+ "pfe-aside-mobile": ".pfe-band__container",
+ "pfe-aside-height": ".pfe-band__container"
+ };
+ }
+
+ // Declare the type of this component
+
+ }, {
+ key: 'PfeType',
+ get: function get$$1() {
+ return PFElement.PfeTypes.Container;
+ }
+ }]);
+
+ function PfeBand() {
+ classCallCheck(this, PfeBand);
+ return possibleConstructorReturn(this, (PfeBand.__proto__ || Object.getPrototypeOf(PfeBand)).call(this, PfeBand, { type: PfeBand.PfeType }));
+ }
+
+ createClass(PfeBand, [{
+ key: 'connectedCallback',
+ value: function connectedCallback() {
+ get(PfeBand.prototype.__proto__ || Object.getPrototypeOf(PfeBand.prototype), 'connectedCallback', this).call(this);
+ // Initialize the background image attachment
+ if (this.imageSrc) {
+ this._imgSrcChanged("pfe-img-src", "", this.imageSrc);
+ }
+ // Initialize the context setting for the children elements
+ if (this.backgroundColor) {
+ this._updateContext(this.backgroundColor);
+ }
+ }
+ }, {
+ key: 'attributeChangedCallback',
+ value: function attributeChangedCallback(attr, oldValue, newValue) {
+ get(PfeBand.prototype.__proto__ || Object.getPrototypeOf(PfeBand.prototype), 'attributeChangedCallback', this).call(this, attr, oldValue, newValue);
+ // Strip the prefix form the attribute
+ attr = attr.replace("pfe-", "");
+ // If the observer is defined in the attribute properties
+ if (this[attr] && this[attr].observer) {
+ // Get the observer function
+ var observer = this[this[attr].observer].bind(this);
+ // If it's a function, allow it to run
+ if (typeof observer === "function") observer(attr, oldValue, newValue);
+ }
+ }
+ }, {
+ key: '_basicAttributeChanged',
+ value: function _basicAttributeChanged(attr, oldValue, newValue) {
+ this[attr].value = newValue;
+ }
+
+ // Update the color attribute and contexts
+
+ }, {
+ key: '_colorChanged',
+ value: function _colorChanged(attr, oldValue, newValue) {
+ this[attr].value = newValue;
+ // If the new value has a dark background, update children elements
+ this._updateContext(newValue);
+ }
+
+ // Update the background image
+
+ }, {
+ key: '_imgSrcChanged',
+ value: function _imgSrcChanged(attr, oldValue, newValue) {
+ // Set the image as the background image
+ this.style.backgroundImage = newValue ? 'url(\'' + newValue + '\')' : '';
+ }
+
+ // Set the children's context if parent background is dark
+
+ }, {
+ key: '_updateContext',
+ value: function _updateContext(context) {
+ var _this3 = this;
+
+ if (["darkest", "darker", "complement", "accent"].includes(context)) {
+ ["pfe-cta"].forEach(function (elementName) {
+ var els = [].concat(toConsumableArray(_this3.querySelectorAll('' + elementName)));
+ els.forEach(function (el) {
+ var myContainer = el.closest("[pfe-type=container]");
+ if (myContainer === _this3 || myContainer === null) {
+ el.setAttribute("on", "dark");
+ }
+ });
+ });
+ }
+ }
+ }]);
+ return PfeBand;
+ }(PFElement);
+
+ PFElement.create(PfeBand);
+
+ return PfeBand;
+
+})));
+//# sourceMappingURL=pfe-band.umd.js.map
diff --git a/elements/pfe-band/pfe-band.umd.js.map b/elements/pfe-band/pfe-band.umd.js.map
new file mode 100644
index 0000000000..a895da4194
--- /dev/null
+++ b/elements/pfe-band/pfe-band.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-band.umd.js","sources":["pfe-band.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\n// -- Polyfill for supporting Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\nif (!Element.prototype.matches) {\n Element.prototype.matches =\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}\n\n// -- Polyfill for supporting Array.includes\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, \"includes\", {\n value: function(valueToFind, fromIndex) {\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n // 1. Let O be ? ToObject(this value).\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeBand extends PFElement {\n\n get html() {\n return ` this.has_slot(`pfe-band--${slot}`) ? `pfe-has-${slot}` : \"\").join(\" \")}>\n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile === \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--header\") ? `` : \"\"}\n \n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--footer\") ? `` : \"\"}\n`;\n }\n\n static get properties() {\n return {\"color\":{\"title\":\"Background color\",\"type\":\"string\",\"enum\":[\"lightest\",\"lighter\",\"base\",\"darker\",\"darkest\",\"complement\",\"accent\"],\"default\":\"base\",\"observer\":\"_colorChanged\"},\"img-src\":{\"title\":\"Background image\",\"type\":\"string\",\"observer\":\"_imgSrcChanged\"},\"aside-desktop\":{\"title\":\"Aside positioning (desktop)\",\"type\":\"string\",\"default\":\"right\",\"enum\":[\"right\",\"left\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-mobile\":{\"title\":\"Aside positioning (mobile)\",\"type\":\"string\",\"default\":\"bottom\",\"enum\":[\"top\",\"bottom\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-height\":{\"title\":\"Aside height\",\"type\":\"string\",\"default\":\"body\",\"enum\":[\"full\",\"body\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}}};\n }\n\n static get slots() {\n return {\"header\":{\"title\":\"Header\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":3,\"items\":{\"title\":\"Body item\",\"oneOf\":[{\"$ref\":\"raw\"}]}},\"body\":{\"title\":\"Body\",\"type\":\"array\",\"namedSlot\":false,\"items\":{\"oneOf\":[{\"$ref\":\"pfe-card\"},{\"$ref\":\"raw\"}]}},\"footer\":{\"title\":\"Footer\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":3,\"items\":{\"oneOf\":[{\"$ref\":\"pfe-cta\"},{\"$ref\":\"raw\"}]}},\"aside\":{\"title\":\"Aside\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":5,\"items\":{\"oneOf\":[{\"$ref\":\"pfe-card\"},{\"$ref\":\"raw\"}]}}};\n }\n static get tag() {\n return \"pfe-band\";\n }\n\n get schemaUrl() {\n return \"pfe-band.json\";\n }\n\n get templateUrl() {\n return \"pfe-band.html\";\n }\n\n get styleUrl() {\n return \"pfe-band.scss\";\n }\n\n get imageSrc() {\n return this.getAttribute(\"pfe-img-src\");\n }\n\n get backgroundColor() {\n return this.getAttribute(\"pfe-color\");\n }\n\n get asidePosition() {\n return {\n desktop: this.getAttribute(\"pfe-aside-desktop\"),\n mobile: this.getAttribute(\"pfe-aside-mobile\"),\n height: this.getAttribute(\"pfe-aside-height\")\n };\n }\n\n static get observedAttributes() {\n return [\n \"pfe-aside-desktop\",\n \"pfe-aside-mobile\",\n \"pfe-aside-height\",\n \"pfe-color\",\n \"pfe-img-src\"\n ];\n }\n\n static get cascadingAttributes() {\n return {\n \"pfe-aside-desktop\": \".pfe-band__container\",\n \"pfe-aside-mobile\": \".pfe-band__container\",\n \"pfe-aside-height\": \".pfe-band__container\"\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeBand, { type: PfeBand.PfeType });\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Initialize the background image attachment\n if (this.imageSrc) {\n this._imgSrcChanged(\"pfe-img-src\", \"\", this.imageSrc);\n }\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n // Strip the prefix form the attribute\n attr = attr.replace(\"pfe-\", \"\");\n // If the observer is defined in the attribute properties\n if (this[attr] && this[attr].observer) {\n // Get the observer function\n let observer = this[this[attr].observer].bind(this);\n // If it's a function, allow it to run\n if (typeof observer === \"function\") observer(attr, oldValue, newValue);\n }\n }\n\n _basicAttributeChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Update the background image\n _imgSrcChanged(attr, oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"darker\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeBand);\n\nexport default PfeBand;\n//# sourceMappingURL=pfe-band.js.map\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","parentElement","parentNode","nodeType","Array","includes","Object","defineProperty","value","valueToFind","fromIndex","TypeError","o","len","length","n","k","Math","max","abs","sameValueZero","x","y","isNaN","PfeBand","map","has_slot","slot","join","asidePosition","mobile","getAttribute","desktop","height","PFElement","PfeTypes","Container","type","PfeType","imageSrc","_imgSrcChanged","backgroundColor","_updateContext","attr","oldValue","newValue","replace","observer","bind","style","backgroundImage","context","forEach","els","querySelectorAll","elementName","myContainer","setAttribute","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-band/pfe-band.umd.min.js b/elements/pfe-band/pfe-band.umd.min.js
new file mode 100644
index 0000000000..13dbf4c97a
--- /dev/null
+++ b/elements/pfe-band/pfe-band.umd.min.js
@@ -0,0 +1,2 @@
+!function(e,a){"object"==typeof exports&&"undefined"!=typeof module?module.exports=a(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],a):e.PfeBand=a(e.PFElement)}(this,function(a){"use strict";a=a&&a.hasOwnProperty("default")?a.default:a;var t=function(){function r(e,a){for(var t=0;t>>0;if(0===r)return!1;var o,d,i=0|a,n=Math.max(0<=i?i:r-Math.abs(i),0);for(;n.pfe-band__aside,.pfe-band__body,.pfe-band__container,.pfe-band__footer,.pfe-band__header,:host{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column nowrap;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.pfe-band__aside,.pfe-band__body,.pfe-band__container,.pfe-band__footer,.pfe-band__header{display:grid;grid-row-gap:var(--pfe-band--gutter--vertical);grid-column-gap:var(--pfe-band--gutter--horizontal);margin-bottom:0}:host{display:block;--pfe-band--Padding--vertical:calc( var(--pfe-theme--container-spacer, 1rem) * 4);--pfe-band--Padding--horizontal:calc( var(--pfe-theme--container-spacer, 1rem) * 1);--pfe-band--Padding:var(--pfe-band--Padding--vertical) var(--pfe-band--Padding--horizontal);--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-band--BackgroundPosition:center center;--pfe-band--Border:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-band--layout:1fr;--pfe-band__header--layout:1fr;--pfe-band__body--layout:1fr;--pfe-band__footer--layout:1fr;--pfe-band__aside--layout:1fr;--pfe-band--gutter--vertical:var(--pfe-theme--container-spacer, 1rem);--pfe-band--gutter--horizontal:calc(var(--pfe-theme--container-spacer, 1rem) * 3);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);--pfe-band--Width:auto;--pfe-band--Width__aside--sm:240px;--pfe-band--Width__aside--lg:300px;position:relative;padding:calc(var(--pfe-band--Padding--vertical)/ 2) var(--pfe-band--Padding--horizontal);border:var(--pfe-band--Border);background-color:var(--pfe-band--BackgroundColor);background-position:var(--pfe-band--BackgroundPosition);color:var(--pfe-broadcasted--color--text)}@media screen and (min-width:768px){:host{--pfe-band--Width:calc( 768px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media screen and (min-width:992px){:host{--pfe-band--Width:calc( 992px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media screen and (min-width:1200px){:host{--pfe-band--Width:calc( 1200px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media print{:host{--pfe-band--Padding:calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal)}}@media (min-width:576px){:host{padding:var(--pfe-band--Padding)}}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}:host *,:host ::after,:host ::before{-webkit-box-sizing:border-box;box-sizing:border-box}:host([pfe-color=darker]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([pfe-color=darkest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([pfe-color=accent]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([pfe-color=complement]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([pfe-color=lighter]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([pfe-color=lightest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([pfe-size=small]){--pfe-band--Padding:calc(var(--pfe-band--Padding--vertical) / 4) var(--pfe-band--Padding--horizontal)}.pfe-band__container{--pfe-band_region--width:calc(calc(1fr - var(--pfe-band--Width__aside--sm)) - var(--pfe-band--gutter--horizontal));--pfe-band--gridTemplateArea_mobile:"body";position:relative;margin:0 auto;width:100%;max-width:var(--pfe-band--Width)}.pfe-band__container[pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"body" "aside";--pfe-band--gridTemplateArea_desktop:"body aside"}@media (min-width:768px){.pfe-band__container[pfe-has-aside]{--pfe-band--layout:1fr var(--pfe-band--Width__aside--sm)}}@media (min-width:992px){.pfe-band__container[pfe-has-aside]{--pfe-band--layout:1fr var(--pfe-band--Width__aside--lg)}}.pfe-band__container[pfe-has-aside][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "body"}.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"aside body"}@media (min-width:768px){.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--layout:var(--pfe-band--Width__aside--sm) 1fr}}@media (min-width:992px){.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--layout:var(--pfe-band--Width__aside--lg) 1fr}}.pfe-band__container[pfe-has-header]{--pfe-band--gridTemplateArea_mobile:"header" "body"}.pfe-band__container[pfe-has-header][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"header" "body" "aside";--pfe-band--gridTemplateArea_desktop:"header header" "body aside"}.pfe-band__container[pfe-has-header][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "header" "body"}.pfe-band__container[pfe-has-header][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"header aside" "body aside"}.pfe-band__container[pfe-has-header][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"header header" "aside body"}.pfe-band__container[pfe-has-header][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside header" "aside body"}.pfe-band__container[pfe-has-footer]{--pfe-band--gridTemplateArea_mobile:"body" "footer"}.pfe-band__container[pfe-has-footer][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"body" "aside" "footer";--pfe-band--gridTemplateArea_desktop:"body aside" "footer footer"}.pfe-band__container[pfe-has-footer][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "body" "footer"}.pfe-band__container[pfe-has-footer][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"body aside" "footer aside"}.pfe-band__container[pfe-has-footer][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"aside body" "footer footer"}.pfe-band__container[pfe-has-footer][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside body" "aside footer"}.pfe-band__container[pfe-has-header][pfe-has-footer]{--pfe-band--gridTemplateArea_mobile:"header" "body" "footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"header" "body" "footer" "aside";--pfe-band--gridTemplateArea_desktop:"header header" "body aside" "footer footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "header" "body" "footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"header aside" "body aside" "footer aside"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"header header" "aside body" "footer footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside header" "aside body" "aside footer"}@supports (display:grid){.pfe-band__container{grid-template-columns:var(--pfe-band--layout);grid-template-rows:-webkit-max-content;grid-template-rows:max-content;grid-template-areas:var(--pfe-band--gridTemplateArea_mobile)}@media (min-width:768px){.pfe-band__container{grid-template-areas:var(--pfe-band--gridTemplateArea_desktop)}}}.pfe-band__header{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__header{grid-area:header;grid-template-columns:var(--pfe-band__header--layout)}}.pfe-band__body{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__body{grid-area:body;grid-template-columns:var(--pfe-band__body--layout)}}.pfe-band__aside{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__aside{grid-area:aside;grid-template-columns:var(--pfe-band__aside--layout)}}.pfe-band__footer{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__footer{grid-area:footer;grid-template-columns:var(--pfe-band__footer--layout)}}.pfe-band__aside{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}\n "+(this.has_slot("pfe-band--aside")&&"top"===this.asidePosition.mobile?'':"")+"\n "+(this.has_slot("pfe-band--header")?'':"")+'\n \n '+(this.has_slot("pfe-band--aside")&&"top"!==this.asidePosition.mobile?'':"")+"\n "+(this.has_slot("pfe-band--footer")?'':"")+"\n"}},{key:"schemaUrl",get:function(){return"pfe-band.json"}},{key:"templateUrl",get:function(){return"pfe-band.html"}},{key:"styleUrl",get:function(){return"pfe-band.scss"}},{key:"imageSrc",get:function(){return this.getAttribute("pfe-img-src")}},{key:"backgroundColor",get:function(){return this.getAttribute("pfe-color")}},{key:"asidePosition",get:function(){return{desktop:this.getAttribute("pfe-aside-desktop"),mobile:this.getAttribute("pfe-aside-mobile"),height:this.getAttribute("pfe-aside-height")}}}],[{key:"properties",get:function(){return{color:{title:"Background color",type:"string",enum:["lightest","lighter","base","darker","darkest","complement","accent"],default:"base",observer:"_colorChanged"},"img-src":{title:"Background image",type:"string",observer:"_imgSrcChanged"},"aside-desktop":{title:"Aside positioning (desktop)",type:"string",default:"right",enum:["right","left"],observer:"_basicAttributeChanged",options:{dependencies:[{type:"slot",id:"aside"}]}},"aside-mobile":{title:"Aside positioning (mobile)",type:"string",default:"bottom",enum:["top","bottom"],observer:"_basicAttributeChanged",options:{dependencies:[{type:"slot",id:"aside"}]}},"aside-height":{title:"Aside height",type:"string",default:"body",enum:["full","body"],observer:"_basicAttributeChanged",options:{dependencies:[{type:"slot",id:"aside"}]}}}}},{key:"slots",get:function(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{title:"Body item",oneOf:[{$ref:"raw"}]}},body:{title:"Body",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"pfe-card"},{$ref:"raw"}]}},footer:{title:"Footer",type:"array",namedSlot:!0,maxItems:3,items:{oneOf:[{$ref:"pfe-cta"},{$ref:"raw"}]}},aside:{title:"Aside",type:"array",namedSlot:!0,maxItems:5,items:{oneOf:[{$ref:"pfe-card"},{$ref:"raw"}]}}}}},{key:"tag",get:function(){return"pfe-band"}},{key:"observedAttributes",get:function(){return["pfe-aside-desktop","pfe-aside-mobile","pfe-aside-height","pfe-color","pfe-img-src"]}},{key:"cascadingAttributes",get:function(){return{"pfe-aside-desktop":".pfe-band__container","pfe-aside-mobile":".pfe-band__container","pfe-aside-height":".pfe-band__container"}}},{key:"PfeType",get:function(){return a.PfeTypes.Container}}]),t(o,[{key:"connectedCallback",value:function(){d(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"connectedCallback",this).call(this),this.imageSrc&&this._imgSrcChanged("pfe-img-src","",this.imageSrc),this.backgroundColor&&this._updateContext(this.backgroundColor)}},{key:"attributeChangedCallback",value:function(e,a,t){if(d(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"attributeChangedCallback",this).call(this,e,a,t),this[e=e.replace("pfe-","")]&&this[e].observer){var r=this[this[e].observer].bind(this);"function"==typeof r&&r(e,a,t)}}},{key:"_basicAttributeChanged",value:function(e,a,t){this[e].value=t}},{key:"_colorChanged",value:function(e,a,t){this[e].value=t,this._updateContext(t)}},{key:"_imgSrcChanged",value:function(e,a,t){this.style.backgroundImage=t?"url('"+t+"')":""}},{key:"_updateContext",value:function(e){var t=this;["darkest","darker","complement","accent"].includes(e)&&["pfe-cta"].forEach(function(e){[].concat(function(e){if(Array.isArray(e)){for(var a=0,t=Array(e.length);a>> 0;\n\n // 3. If len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeBand extends PFElement {\n\n get html() {\n return ` this.has_slot(`pfe-band--${slot}`) ? `pfe-has-${slot}` : \"\").join(\" \")}>\n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile === \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--header\") ? `` : \"\"}\n \n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--footer\") ? `` : \"\"}\n`;\n }\n\n static get properties() {\n return {\"color\":{\"title\":\"Background color\",\"type\":\"string\",\"enum\":[\"lightest\",\"lighter\",\"base\",\"darker\",\"darkest\",\"complement\",\"accent\"],\"default\":\"base\",\"observer\":\"_colorChanged\"},\"img-src\":{\"title\":\"Background image\",\"type\":\"string\",\"observer\":\"_imgSrcChanged\"},\"aside-desktop\":{\"title\":\"Aside positioning (desktop)\",\"type\":\"string\",\"default\":\"right\",\"enum\":[\"right\",\"left\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-mobile\":{\"title\":\"Aside positioning (mobile)\",\"type\":\"string\",\"default\":\"bottom\",\"enum\":[\"top\",\"bottom\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-height\":{\"title\":\"Aside height\",\"type\":\"string\",\"default\":\"body\",\"enum\":[\"full\",\"body\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}}};\n }\n\n static get slots() {\n return {\"header\":{\"title\":\"Header\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":3,\"items\":{\"title\":\"Body item\",\"oneOf\":[{\"$ref\":\"raw\"}]}},\"body\":{\"title\":\"Body\",\"type\":\"array\",\"namedSlot\":false,\"items\":{\"oneOf\":[{\"$ref\":\"pfe-card\"},{\"$ref\":\"raw\"}]}},\"footer\":{\"title\":\"Footer\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":3,\"items\":{\"oneOf\":[{\"$ref\":\"pfe-cta\"},{\"$ref\":\"raw\"}]}},\"aside\":{\"title\":\"Aside\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":5,\"items\":{\"oneOf\":[{\"$ref\":\"pfe-card\"},{\"$ref\":\"raw\"}]}}};\n }\n static get tag() {\n return \"pfe-band\";\n }\n\n get schemaUrl() {\n return \"pfe-band.json\";\n }\n\n get templateUrl() {\n return \"pfe-band.html\";\n }\n\n get styleUrl() {\n return \"pfe-band.scss\";\n }\n\n get imageSrc() {\n return this.getAttribute(\"pfe-img-src\");\n }\n\n get backgroundColor() {\n return this.getAttribute(\"pfe-color\");\n }\n\n get asidePosition() {\n return {\n desktop: this.getAttribute(\"pfe-aside-desktop\"),\n mobile: this.getAttribute(\"pfe-aside-mobile\"),\n height: this.getAttribute(\"pfe-aside-height\")\n };\n }\n\n static get observedAttributes() {\n return [\n \"pfe-aside-desktop\",\n \"pfe-aside-mobile\",\n \"pfe-aside-height\",\n \"pfe-color\",\n \"pfe-img-src\"\n ];\n }\n\n static get cascadingAttributes() {\n return {\n \"pfe-aside-desktop\": \".pfe-band__container\",\n \"pfe-aside-mobile\": \".pfe-band__container\",\n \"pfe-aside-height\": \".pfe-band__container\"\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeBand, { type: PfeBand.PfeType });\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Initialize the background image attachment\n if (this.imageSrc) {\n this._imgSrcChanged(\"pfe-img-src\", \"\", this.imageSrc);\n }\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n // Strip the prefix form the attribute\n attr = attr.replace(\"pfe-\", \"\");\n // If the observer is defined in the attribute properties\n if (this[attr] && this[attr].observer) {\n // Get the observer function\n let observer = this[this[attr].observer].bind(this);\n // If it's a function, allow it to run\n if (typeof observer === \"function\") observer(attr, oldValue, newValue);\n }\n }\n\n _basicAttributeChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Update the background image\n _imgSrcChanged(attr, oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"darker\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeBand);\n\nexport default PfeBand;\n//# sourceMappingURL=pfe-band.js.map\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","this","parentElement","parentNode","nodeType","Array","includes","defineProperty","valueToFind","fromIndex","TypeError","o","Object","len","length","x","y","n","k","Math","max","abs","isNaN","PfeBand","type","PfeType","PFElement","map","_this2","has_slot","slot","join","asidePosition","mobile","getAttribute","color","title","enum","default","observer","img-src","aside-desktop","options","dependencies","id","aside-mobile","aside-height","header","namedSlot","maxItems","items","oneOf","$ref","body","footer","aside","PfeTypes","Container","imageSrc","_imgSrcChanged","backgroundColor","_updateContext","attr","oldValue","newValue","replace","bind","value","style","backgroundImage","context","forEach","_this3","querySelectorAll","elementName","myContainer","setAttribute","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-card/package.json b/elements/pfe-card/package.json
index 2a8731b587..34661d7a09 100644
--- a/elements/pfe-card/package.json
+++ b/elements/pfe-card/package.json
@@ -4,7 +4,7 @@
"className": "PfeCard",
"elementName": "pfe-card"
},
- "version": "1.0.0-prerelease.10",
+ "version": "1.0.0-prerelease.11",
"publishConfig": {
"access": "public"
},
@@ -24,8 +24,8 @@
},
"license": "MIT",
"dependencies": {
- "@patternfly/pfe-sass": "^1.0.0-prerelease.10",
- "@patternfly/pfelement": "^1.0.0-prerelease.10"
+ "@patternfly/pfe-sass": "^1.0.0-prerelease.11",
+ "@patternfly/pfelement": "^1.0.0-prerelease.11"
},
"generator-pfelement-version": "0.5.0",
"gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421"
diff --git a/elements/pfe-card/pfe-card.css b/elements/pfe-card/pfe-card.css
new file mode 100644
index 0000000000..ca09948418
--- /dev/null
+++ b/elements/pfe-card/pfe-card.css
@@ -0,0 +1,155 @@
+/*
+ * Copyright 2018 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.
+ */
+/* Palette of Border Colors */
+/* Palette of Feedback Colors */
+: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: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ justify-items: flex-start;
+ -webkit-align-self: stretch;
+ -ms-flex-item-align: stretch;
+ align-self: stretch;
+ padding: var(--pfe-card--padding);
+ border: 1px solid transparent;
+ border: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;
+ border-radius: 0;
+ 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;
+}
+
+/*# sourceMappingURL=pfe-card.css.map */
diff --git a/elements/pfe-card/pfe-card.css.map b/elements/pfe-card/pfe-card.css.map
new file mode 100644
index 0000000000..fcf62b70a7
--- /dev/null
+++ b/elements/pfe-card/pfe-card.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-card.css","../../pfe-sass/variables/_colors.scss","pfe-card.scss","../../pfe-sass/functions/_functions.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACrIA;EACE,gGAAoB;EACpB,+FAAwB;EACxB,6FAAe;EACf,gGAA+B;EAC/B,mGAAkC;EAClC,4GAA2C;EAC3C,0GAAyC;EACzC,0GAAyC;EAEzC,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;EAAtB,8BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,yBAAyB;EAEzB,2BAAmB;MAAnB,4BAAmB;UAAnB,mBAAmB;EAEnB,iCAAiC;EACjC,6BAEmB;EAFnB,+GAEmB;EACnB,gBC+M4F;ED/M5F,0DC+M4F;ED5M5F,+BAA+B;EAC/B,0CAA0C;AFe5C;;AEZA;EACE,6CAA6C;AFe/C;;AEZA;EACE,sDAAsD;AFexD;;AEZA;EACE,oDAAoD;AFetD;;AEZA;EACE,oDAAoD;AFetD;;AEZA;EACE,+FAAe;EACf,kGAA+B;EAC/B,qGAAkC;EAClC,8GAA2C;EAC3C,4GAAyC;EACzC,4GAAyC;AFe3C;;AEZA;EACE,gGAAe;EACf,mGAA+B;EAC/B,sGAAkC;EAClC,+GAA2C;EAC3C,6GAAyC;EACzC,6GAAyC;AFe3C;;AEZA;EACE,gGAAe;EACf,mGAA+B;EAC/B,mGAAkC;EAClC,qHAA2C;EAC3C,6GAAyC;EACzC,6GAAyC;AFe3C;;AEZA;EACE,8FAAe;EACf,oGAA+B;EAC/B,oGAAkC;EAClC,sHAA2C;EAC3C,8GAAyC;EACzC,8GAAyC;AFe3C;;AEZA;EACE,mGAAe;EACf,sGAA+B;EAC/B,yGAAkC;EAClC,kHAA2C;EAC3C,gHAAyC;EACzC,gHAAyC;AFe3C;;AEZA;EACE,+FAAe;EACf,kGAA+B;EAC/B,qGAAkC;EAClC,8GAA2C;EAC3C,4GAAyC;EACzC,4GAAyC;AFe3C;;AEZA;EACE,oEAAoB;AFetB;;AEZA;;;EAGE,cAAc;EACd,SAAS;AFeX;;AEZA;;;;;;EAME,wBAAwB;EACxB,uCAAuC;AFezC;;AEZA;EACE,wBAAwB;AFe1B;;AEZA;EAEE,gBAAgB;EAChB,sBAAsB;AFcxB","file":"pfe-card.css","sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n//\n// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/* Palette of Border Colors */\n/* Palette of Feedback Colors */\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 align-self: stretch;\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}\n\na {\n color: var(--pfe-broadcasted--color--ui-link);\n}\n\na:visited {\n color: var(--pfe-broadcasted--color--ui-link--visited);\n}\n\na:hover {\n color: var(--pfe-broadcasted--color--ui-link--hover);\n}\n\na:focus {\n color: var(--pfe-broadcasted--color--ui-link--focus);\n}\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\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\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\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\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\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\n:host([size=\"small\"]) {\n --pfe-card--padding: var(--pfe-theme--container-spacer, 1rem);\n}\n\n.pfe-card__header,\n.pfe-card__body,\n.pfe-card__footer {\n display: block;\n margin: 0;\n}\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\n.pfe-card__body::slotted(*:nth-child(2)) {\n margin-top: 0 !important;\n}\n\n.pfe-card__footer {\n margin-top: auto;\n justify-self: flex-end;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n:host {\n --pfe-card--padding: calc(#{pfe-var(container-spacer)} * 2); // 2x `container-spacer`\n --pfe-card_header--size: #{pfe-var(font-size--heading--gamma)};\n --pfe-card--bg: #{pfe-color(surface--base)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--base--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--base--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--base--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--base--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--base--link--focus)};\n\n display: flex;\n flex-direction: column;\n justify-items: flex-start;\n // This allows the card to fill it's container if necessary\n align-self: stretch;\n\n padding: var(--pfe-card--padding);\n border: pfe-var(surface--border-width)\n pfe-var(surface--border-style)\n transparent;\n border-radius: pfe-var(surface--border-radius);\n\n // Base colors\n background: var(--pfe-card--bg);\n color: var(--pfe-broadcasted--color--text);\n}\n\na {\n color: var(--pfe-broadcasted--color--ui-link);\n}\n\na:visited {\n color: var(--pfe-broadcasted--color--ui-link--visited);\n}\n\na:hover {\n color: var(--pfe-broadcasted--color--ui-link--hover);\n}\n\na:focus {\n color: var(--pfe-broadcasted--color--ui-link--focus);\n}\n\n:host([color=\"dark\"]) {\n --pfe-card--bg: #{pfe-color(surface--darker)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n}\n\n:host([color=\"darkest\"]) {\n --pfe-card--bg: #{pfe-color(surface--darkest)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n}\n\n:host([color=\"light\"]) {\n --pfe-card--bg: #{pfe-color(surface--lighter)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n}\n\n:host([color=\"lightest\"]) {\n --pfe-card--bg: #{pfe-color(surface--lightest)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\n}\n\n:host([color=\"complement\"]) {\n --pfe-card--bg: #{pfe-color(surface--complement)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n}\n\n:host([color=\"accent\"]) {\n --pfe-card--bg: #{pfe-color(surface--accent)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n}\n\n:host([size=\"small\"]) {\n --pfe-card--padding: #{pfe-var(container-spacer)};\n}\n\n.pfe-card__header,\n.pfe-card__body,\n.pfe-card__footer {\n display: block;\n margin: 0;\n}\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; // Specificity issue. Why?!\n font-size: var(--pfe-card_header--size);\n}\n\n.pfe-card__body::slotted(*:nth-child(2)) { // child pseudo-selectors appear to be based on slotted code before upgrade.\n margin-top: 0 !important;\n}\n\n.pfe-card__footer {\n // margin-top: pfe-var(container-spacer);\n margin-top: auto; // This allows the footer to move to the very bottom\n justify-self: flex-end;\n}\n","@function pfe-strip-unit($number) {\n @if type-of($number) == \"number\" and not unitless($number) {\n @return $number / ($number * 0 + 1);\n }\n \n @return $number;\n }\n\n@function pfe-size-pem($pxval, $base: $pfe-global--font-size-root) {\n @return pfe-strip-unit($pxval) / $base * 1em;\n}\n\n@function pfe-size-prem($pxval, $base: $pfe-global--font-size-root) {\n @return pfe-strip-unit($pxval) / $base * 1rem;\n}\n\n@function pfe-size-rem2px($remval, $base: $pfe-global--font-size-root) {\n @return pfe-strip-unit($remval) * ($base / 1px);\n}\n\n/// Map deep get\n/// @author Hugo Giraudel\n/// @access public\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Key chain\n/// @return {*} - Desired value\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n @if type-of($map)==\"map\" {\n $map: map-get($map, $key);\n }\n\n @else {\n @warn \"Map provided is not a map.\"\n }\n }\n\n @return $map;\n}\n\n// Collect all maps and merge them together\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map-merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// New color function to only return theme colors\n@function color($name, $theme: \"light\", $opacity: 1) {\n $map: map-get($color-map, $name);\n $error: false;\n $color: null;\n\n @if $map !=null {\n $color: map-get($map, $theme);\n }\n\n @else {\n $error: true;\n }\n\n @if type-of($color)==color {\n @if $opacity==1 {\n @return $color;\n }\n\n @if $opacity < 1 {\n @return rgba($color, $opacity);\n }\n }\n\n @else {\n $error: true;\n }\n\n @if $error {\n @warn \"#{$name} is not a valid color\";\n }\n}\n\n// https://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/\n// Get the first item in a list\n@function first($list) {\n @return nth($list, 1);\n}\n\n// Get the last item in a list\n@function last($list) {\n @return nth($list, length($list));\n}\n\n@function str-replace($string, $search, $replace: \"\") {\n @if type-of($string)==\"string\"and type-of($search)==\"string\" {\n $index: str-index($string, $search);\n\n @if $index {\n @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);\n }\n }\n\n @return $string;\n}\n\n@function to-string($list, $glue: '', $is-nested: false) {\n $result: null;\n\n @for $i from 1 through length($list) {\n $e: nth($list, $i);\n\n @if type-of($e)==list {\n $result: $result#{to-string($e, $glue, true)};\n }\n\n @else {\n $result: if($i !=length($list) or $is-nested,\n $result#{$e}#{$glue},\n $result#{$e});\n }\n }\n\n @return $result;\n}\n\n@function str-split($string, $separator) {\n // empty array/list\n $split-arr: ();\n // first index of separator in string\n $index: str-index(\"#{$string}\", $separator);\n\n // loop through string\n @while $index !=null {\n // get the substring from the first character to the separator\n $item: str-slice($string, 1, $index - 1);\n // push item to array\n $split-arr: append($split-arr, $item);\n // remove item and separator from string\n $string: str-slice($string, $index + 1);\n // find new index of separator\n $index: str-index($string, $separator);\n }\n\n // add the remaining string to list (the last item) and return\n @return append($split-arr, $string);\n}\n\n// https://github.com/HugoGiraudel/SassyStrings/blob/master/dist/_SassyStrings.scss\n/// Remove all trailing and leading whitespaces from `$string`.\n/// @since 1.2.0\n/// @param {String} $string - string\n/// @return {String}\n\n@function str-trim($string) {\n $start: 1;\n $end: str-length($string);\n\n @for $i from 1 through str-length($string) {\n $first: str-slice($string, $i, $i);\n $last: str-slice($string, -$i, -$i);\n\n @if $first==\" \"and $i+1==$start+1 {\n $start: $i + 1;\n }\n\n @if $last==\" \"and str-length($string) - $i==$end - 1 {\n $end: str-length($string) - $i;\n }\n }\n\n @return str-slice($string, $start, $end);\n}\n\n// https://github.com/HugoGiraudel/SassyStrings/blob/master/dist/_SassyStrings.scss\n/// Check whether `$string` stars with `$needle`.\n/// @param {String} $string - string to check\n/// @param {String} $needle - substring to check\n/// @return {Bool}\n\n@function str-starts-with($string, $needle) {\n @return str-slice($string, 1, str-length($needle))==$needle;\n}\n\n// https://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/#removing-values-from-list\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through length($list) {\n @if type-of(nth($list, $i))==list and $recursive {\n $result: append($result, remove(nth($list, $i), $value, $recursive));\n }\n\n @else if nth($list, $i) !=$value {\n $result: append($result, nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n\n\n/// Var\n///\n/// Returns CSS Var stack with exposed theme Var and respective SCSS fallback\n///\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {Map} $map - SASS Map of variables\n/// @requires {String} $repo - Name of repo, which is \"pfe\"\n/// @use -\n///\n/// 1.look up a color: /elements/pfe-sass/variables/_maps.scss\n/// (FYI, maps references: /elements/pfe-sass/variables/_colors.scss)\n///\n/// 2. use like this:\n/// ```\n/// .my-element {\n/// padding: #{pfe-var( container-spacer )};\n/// font-size: #{pfe-var( font-size )};\n/// }\n/// ```\n@function pfe-var($cssvar, $category: '', $map: $pfe-vars) {\n @if $category !=\"\" {\n $category: \"#{$category}--\";\n }\n\n @return var(--#{$repo}-theme--#{$category}#{$cssvar}, #{map-get($map, $cssvar)});\n}\n\n\n\n/// Var Fallback\n///\n/// Returns the SCSS fallback value only\n///\n/// @param {String} $size - Variable name to be used and prepended with --pfe-theme\n/// @use -\n/// ```\n/// @media screen and (min-width: pfe-breakpoint(sm)) {\n/// --pfe-band--width: #{pfe-breakpoint(sm) - $box-padding * 2};\n/// }\n/// ```\n@function pfe-breakpoint($size, $max: false) {\n $bp: map-get($pfe-vars, grid-breakpoint--#{$size});\n @if $max {\n $bp: (pfe-strip-unit($bp) - 1) * 1px;\n }\n @return $bp;\n}\n\n/// Color\n///\n/// Returns CSS Var stack with exposed theme Var and respective SCSS fallback\n///\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $category - Category name to be appended to variables within the map/system, default is \"color\"\n/// @param {Map} $map - SASS Map of variables\n/// @requires {String} $repo - Name of repo, which is \"pfe\"\n/// @use -\n///\n/// 1.look up a color: /elements/pfe-sass/variables/_maps.scss\n/// (FYI, maps references: /elements/pfe-sass/variables/_colors.scss)\n///\n/// 2. use like this:\n/// ```\n/// .my-element {\n/// color: #{pfe-color( surface--base--text )};\n/// background: #{pfe-color( surface--base )};\n/// }\n/// ```\n@function pfe-color($cssvar,\n$category: 'color',\n$map: $pfe-colors) {\n @if $category !=\"\" {\n $category: \"#{$category}--\";\n }\n\n @return var(--#{$repo}-theme--#{$category}#{$cssvar},\n #{map-get($map, $cssvar)});\n}\n\n/// Local\n///\n/// Returns CSS Var for the local component-scoped variable\n///\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @requires {String} $repo - Name of repo, which is \"pfe\"\n/// @requires {String} $LOCAL - Name of component, this is defined at the top of the sass file for the component\n/// @use -\n/// ```\n/// :host {\n/// padding-top: #{pfe-local(paddingTop`)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n/// ```\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n // Start building the variable declaration\n $var-declaration: \"--#{$repo}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n // If a fallback is defined, pass that in too\n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Radio\n///\n/// Returns CSS Var for a broadcasted variable\n///\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @requires {String} $repo - Name of repo, which is \"pfe\"\n/// @use -\n/// ```\n/// a:visited {\n/// color: #{pfe-radio( ui-link, visited )};\n/// }\n/// ```\n///\n/// @returns - var(--pfe-broadcasted--ui-link--visited);\n///\n@function pfe-radio($cssvar...) {\n @return var(--#{$repo}-broadcasted--#{to-string($cssvar, '--')});\n}"]}
\ No newline at end of file
diff --git a/elements/pfe-card/pfe-card.css.min.map b/elements/pfe-card/pfe-card.css.min.map
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/pfe-card/pfe-card.js b/elements/pfe-card/pfe-card.js
new file mode 100644
index 0000000000..e0a2b613de
--- /dev/null
+++ b/elements/pfe-card/pfe-card.js
@@ -0,0 +1,180 @@
+import PFElement from '../pfelement/pfelement.js';
+
+/*
+ * @license
+ * 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 `
+
+`;
+ }
+ 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
diff --git a/elements/pfe-card/pfe-card.js.map b/elements/pfe-card/pfe-card.js.map
new file mode 100644
index 0000000000..6d1d321913
--- /dev/null
+++ b/elements/pfe-card/pfe-card.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-card.js","sources":["pfe-card.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../pfelement/pfelement.js\";\n\n// -- Polyfill for supporting Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\nif (!Element.prototype.matches) {\n Element.prototype.matches =\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}\n\n// -- Polyfill for supporting Array.includes\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, \"includes\", {\n value: function(valueToFind, fromIndex) {\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n // 1. Let O be ? ToObject(this value).\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeCard extends PFElement {\n\n get html() {\n return `\n\n`;\n }\n static get tag() {\n return \"pfe-card\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get backgroundColor() {\n return this.getAttribute(\"color\") || \"base\";\n }\n\n static get observedAttributes() {\n return [\"color\"];\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeCard, { type: PfeCard.PfeType });\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n if (attr === \"color\") {\n this._colorChanged(attr, oldValue, newValue);\n }\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"dark\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeCard);\n\nexport default PfeCard;\n"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-card/pfe-card.min.css b/elements/pfe-card/pfe-card.min.css
new file mode 100644
index 0000000000..456584d45c
--- /dev/null
+++ b/elements/pfe-card/pfe-card.min.css
@@ -0,0 +1 @@
+: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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding:var(--pfe-card--padding);border:1px solid transparent;border:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-radius:0;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__body,.pfe-card__footer,.pfe-card__header{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}
\ No newline at end of file
diff --git a/elements/pfe-card/pfe-card.min.js b/elements/pfe-card/pfe-card.min.js
new file mode 100644
index 0000000000..9fc3338d17
--- /dev/null
+++ b/elements/pfe-card/pfe-card.min.js
@@ -0,0 +1,26 @@
+import e from"../pfelement/pfelement.min.js";
+/*
+ * @license
+ * 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.
+ *
+*/
+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,f=Math.max(l>=0?l:t-Math.abs(l),0);for(;f: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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding:var(--pfe-card--padding);border:1px solid transparent;border:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-radius:0;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__body,.pfe-card__footer,.pfe-card__header{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}\n\n'}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.min.js.map
diff --git a/elements/pfe-card/pfe-card.min.js.map b/elements/pfe-card/pfe-card.min.js.map
new file mode 100644
index 0000000000..9df7674614
--- /dev/null
+++ b/elements/pfe-card/pfe-card.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-card.min.js","sources":["pfe-card.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\n// -- Polyfill for supporting Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\nif (!Element.prototype.matches) {\n Element.prototype.matches =\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}\n\n// -- Polyfill for supporting Array.includes\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, \"includes\", {\n value: function(valueToFind, fromIndex) {\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n // 1. Let O be ? ToObject(this value).\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeCard extends PFElement {\n\n get html() {\n return `\n\n`;\n }\n static get tag() {\n return \"pfe-card\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get backgroundColor() {\n return this.getAttribute(\"color\") || \"base\";\n }\n\n static get observedAttributes() {\n return [\"color\"];\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeCard, { type: PfeCard.PfeType });\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n if (attr === \"color\") {\n this._colorChanged(attr, oldValue, newValue);\n }\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"dark\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeCard);\n\nexport default PfeCard;\n//# sourceMappingURL=pfe-card.js.map\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","this","parentElement","parentNode","nodeType","Array","includes","Object","defineProperty","value","valueToFind","fromIndex","TypeError","o","len","length","x","y","n","k","Math","max","abs","isNaN","PfeCard","PFElement","html","tag","styleUrl","templateUrl","backgroundColor","getAttribute","observedAttributes","PfeType","PfeTypes","Container","[object Object]","super","type","connectedCallback","_updateContext","attr","oldValue","newValue","attributeChangedCallback","_colorChanged","context","forEach","elementName","querySelectorAll","myContainer","setAttribute","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA4BKA,QAAQC,UAAUC,UACrBF,QAAQC,UAAUC,QAChBF,QAAQC,UAAUE,mBAClBH,QAAQC,UAAUG,uBAGjBJ,QAAQC,UAAUI,UACrBL,QAAQC,UAAUI,QAAU,SAASC,GACnC,IAAIC,EAAKC,KACT,EAAG,CACD,GAAID,EAAGL,QAAQI,GAAI,OAAOC,EAC1BA,EAAKA,EAAGE,eAAiBF,EAAGG,iBACd,OAAPH,GAA+B,IAAhBA,EAAGI,UAC3B,OAAO,OAMNC,MAAMX,UAAUY,UACnBC,OAAOC,eAAeH,MAAMX,UAAW,WAAY,CACjDe,MAAO,SAASC,EAAaC,GAC3B,GAAY,MAARV,KACF,MAAM,IAAIW,UAAU,iCAItB,IAAIC,EAAIN,OAAON,MAGXa,EAAMD,EAAEE,SAAW,EAGvB,GAAY,IAARD,EACF,OAAO,EAKT,IASuBE,EAAGC,EATtBC,EAAgB,EAAZP,EAOJQ,EAAIC,KAAKC,IAAIH,GAAK,EAAIA,EAAIJ,EAAMM,KAAKE,IAAIJ,GAAI,GAajD,KAAOC,EAAIL,GAAK,CAGd,IAdqBE,EAcHH,EAAEM,OAdIF,EAcAP,IAXR,iBAANM,GACO,iBAANC,GACPM,MAAMP,IACNO,MAAMN,GASR,OAAO,EAGTE,IAIF,OAAO,KAKb,MAAMK,UAAgBC,EAEpBC,WACE,MAAO,gsLAITC,iBACE,MAAO,WAGTC,eACE,MAAO,gBAGTC,kBACE,MAAO,gBAGTC,sBACE,OAAO7B,KAAK8B,aAAa,UAAY,OAGvCC,gCACE,MAAO,CAAC,SAIVC,qBACE,OAAOR,EAAUS,SAASC,UAG5BC,cACEC,MAAMb,EAAS,CAAEc,KAAMd,EAAQS,UAGjCG,oBACEC,MAAME,oBAEFtC,KAAK6B,iBACP7B,KAAKuC,eAAevC,KAAK6B,iBAI7BM,yBAAyBK,EAAMC,EAAUC,GACvCN,MAAMO,yBAAyBH,EAAMC,EAAUC,GAClC,UAATF,GACFxC,KAAK4C,cAAcJ,EAAMC,EAAUC,GAKvCP,cAAcK,EAAMC,EAAUC,GAE5B1C,KAAKuC,eAAeG,GAItBP,eAAeU,GACT,CAAC,UAAW,OAAQ,aAAc,UAAUxC,SAASwC,IACvD,CAAC,WAAWC,QAAQC,IACN,IAAI/C,KAAKgD,oBAAoBD,MACrCD,QAAQ/C,IACV,MAAMkD,EAAclD,EAAGF,QAAQ,wBAC3BoD,IAAgBjD,MAAwB,OAAhBiD,GAC1BlD,EAAGmD,aAAa,KAAM,aAQlC1B,EAAU2B,OAAO5B"}
\ No newline at end of file
diff --git a/elements/pfe-card/pfe-card.umd.js b/elements/pfe-card/pfe-card.umd.js
new file mode 100644
index 0000000000..ce657f1c21
--- /dev/null
+++ b/elements/pfe-card/pfe-card.umd.js
@@ -0,0 +1,287 @@
+(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);
+ }
+ };
+
+ /*
+ * @license
+ * 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 '\n\n';
+ }
+ }, {
+ 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
diff --git a/elements/pfe-card/pfe-card.umd.js.map b/elements/pfe-card/pfe-card.umd.js.map
new file mode 100644
index 0000000000..6583bb5b06
--- /dev/null
+++ b/elements/pfe-card/pfe-card.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-card.umd.js","sources":["pfe-card.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\n// -- Polyfill for supporting Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\nif (!Element.prototype.matches) {\n Element.prototype.matches =\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}\n\n// -- Polyfill for supporting Array.includes\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, \"includes\", {\n value: function(valueToFind, fromIndex) {\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n // 1. Let O be ? ToObject(this value).\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeCard extends PFElement {\n\n get html() {\n return `\n\n`;\n }\n static get tag() {\n return \"pfe-card\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get backgroundColor() {\n return this.getAttribute(\"color\") || \"base\";\n }\n\n static get observedAttributes() {\n return [\"color\"];\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeCard, { type: PfeCard.PfeType });\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n if (attr === \"color\") {\n this._colorChanged(attr, oldValue, newValue);\n }\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"dark\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeCard);\n\nexport default PfeCard;\n//# sourceMappingURL=pfe-card.js.map\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","parentElement","parentNode","nodeType","Array","includes","Object","defineProperty","value","valueToFind","fromIndex","TypeError","o","len","length","n","k","Math","max","abs","sameValueZero","x","y","isNaN","PfeCard","getAttribute","PFElement","PfeTypes","Container","type","PfeType","backgroundColor","_updateContext","attr","oldValue","newValue","_colorChanged","context","forEach","els","querySelectorAll","elementName","myContainer","setAttribute","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-card/pfe-card.umd.min.js b/elements/pfe-card/pfe-card.umd.min.js
new file mode 100644
index 0000000000..3544e4e6b6
--- /dev/null
+++ b/elements/pfe-card/pfe-card.umd.min.js
@@ -0,0 +1,2 @@
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],r):e.PfeCard=r(e.PFElement)}(this,function(r){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var t=function(){function o(e,r){for(var t=0;t>>0;if(0===o)return!1;var c,a,l=0|r,f=Math.max(0<=l?l:o-Math.abs(l),0);for(;f: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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding:var(--pfe-card--padding);border:1px solid transparent;border:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-radius:0;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__body,.pfe-card__footer,.pfe-card__header{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}\n\n'}},{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>> 0;\n\n // 3. If len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeCard extends PFElement {\n\n get html() {\n return `\n\n`;\n }\n static get tag() {\n return \"pfe-card\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get backgroundColor() {\n return this.getAttribute(\"color\") || \"base\";\n }\n\n static get observedAttributes() {\n return [\"color\"];\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeCard, { type: PfeCard.PfeType });\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n if (attr === \"color\") {\n this._colorChanged(attr, oldValue, newValue);\n }\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"dark\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeCard);\n\nexport default PfeCard;\n//# sourceMappingURL=pfe-card.js.map\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","this","parentElement","parentNode","nodeType","Array","includes","defineProperty","valueToFind","fromIndex","TypeError","o","Object","len","length","x","y","n","k","Math","max","abs","isNaN","PfeCard","type","PfeType","PFElement","getAttribute","PfeTypes","Container","backgroundColor","_updateContext","attr","oldValue","newValue","_colorChanged","context","forEach","_this2","querySelectorAll","elementName","myContainer","setAttribute","create"],"mappings":"6yBA4BKA,QAAQC,UAAUC,kBACbD,UAAUC,QAChBF,QAAQC,UAAUE,mBAClBH,QAAQC,UAAUG,uBAGjBJ,QAAQC,UAAUI,kBACbJ,UAAUI,QAAU,SAASC,OAC/BC,EAAKC,OACN,IACGD,EAAGL,QAAQI,GAAI,OAAOC,IACrBA,EAAGE,eAAiBF,EAAGG,iBACd,OAAPH,GAA+B,IAAhBA,EAAGI,iBACpB,OAMNC,MAAMX,UAAUY,iBACZC,eAAeF,MAAMX,UAAW,WAAY,OAC1C,SAASc,EAAaC,MACf,MAARR,WACI,IAAIS,UAAU,qCAIlBC,EAAIC,OAAOX,MAGXY,EAAMF,EAAEG,SAAW,KAGX,IAARD,SACK,MAccE,EAAGC,EATtBC,EAAgB,EAAZR,EAOJS,EAAIC,KAAKC,IAAS,GAALH,EAASA,EAAIJ,EAAMM,KAAKE,IAAIJ,GAAI,QAa1CC,EAAIL,GAAK,KAXOE,EAcHJ,EAAEO,OAdIF,EAcAR,IAXR,iBAANO,GACO,iBAANC,GACPM,MAAMP,IACNO,MAAMN,UASD,aAOJ,SAKPO,gWAiCIA,EAAS,CAAEC,KAAMD,EAAQE,8UAjCbC,gxLAYX,0DAIA,+DAIAzB,KAAK0B,aAAa,UAAY,2CAZ9B,4DAgBA,CAAC,gDAKDD,EAAUE,SAASC,8JAUtB5B,KAAK6B,sBACFC,eAAe9B,KAAK6B,kEAIJE,EAAMC,EAAUC,0GACRF,EAAMC,EAAUC,GAClC,UAATF,QACGG,cAAcH,EAAMC,EAAUC,yCAKzBF,EAAMC,EAAUC,QAEvBH,eAAeG,0CAIPE,cACT,CAAC,UAAW,OAAQ,aAAc,UAAU9B,SAAS8B,KACtD,WAAWC,QAAQ,6IACFC,EAAKC,oBAAoBC,KACrCH,QAAQ,gBACJI,EAAczC,EAAGF,QAAQ,wBAC3B2C,IAAgBH,GAAwB,OAAhBG,KACvBC,aAAa,KAAM,4BAQlChB,EAAUiB,OAAOpB"}
\ No newline at end of file
diff --git a/elements/pfe-content-set/package.json b/elements/pfe-content-set/package.json
index f1104540dc..e6749b5678 100644
--- a/elements/pfe-content-set/package.json
+++ b/elements/pfe-content-set/package.json
@@ -4,7 +4,7 @@
"className": "PfeContentSet",
"elementName": "pfe-content-set"
},
- "version": "1.0.0-prerelease.10",
+ "version": "1.0.0-prerelease.11",
"description": "This PatternFly Element dynamically hides and shows content; the style is determined by the available space.",
"repository": {
"type": "git",
@@ -24,9 +24,9 @@
},
"license": "MIT",
"dependencies": {
- "@patternfly/pfe-accordion": "^1.0.0-prerelease.10",
- "@patternfly/pfe-tabs": "^1.0.0-prerelease.10",
- "@patternfly/pfelement": "^1.0.0-prerelease.10"
+ "@patternfly/pfe-accordion": "^1.0.0-prerelease.11",
+ "@patternfly/pfe-tabs": "^1.0.0-prerelease.11",
+ "@patternfly/pfelement": "^1.0.0-prerelease.11"
},
"generator-pfelement-version": "1.1.0"
}
diff --git a/elements/pfe-content-set/pfe-content-set.css b/elements/pfe-content-set/pfe-content-set.css
new file mode 100644
index 0000000000..115881e065
--- /dev/null
+++ b/elements/pfe-content-set/pfe-content-set.css
@@ -0,0 +1,9 @@
+:host {
+ display: block;
+}
+
+:host([hidden]) {
+ display: none;
+}
+
+/*# sourceMappingURL=pfe-content-set.css.map */
diff --git a/elements/pfe-content-set/pfe-content-set.css.map b/elements/pfe-content-set/pfe-content-set.css.map
new file mode 100644
index 0000000000..4d61d0cb79
--- /dev/null
+++ b/elements/pfe-content-set/pfe-content-set.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["pfe-content-set.scss","pfe-content-set.css"],"names":[],"mappings":"AAAA;EACE,cAAc;ACChB;;ADEA;EACE,aAAa;ACCf","file":"pfe-content-set.css","sourcesContent":[":host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n",":host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n"]}
\ No newline at end of file
diff --git a/elements/pfe-content-set/pfe-content-set.css.min.map b/elements/pfe-content-set/pfe-content-set.css.min.map
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/pfe-content-set/pfe-content-set.js b/elements/pfe-content-set/pfe-content-set.js
new file mode 100644
index 0000000000..6c10f6eb92
--- /dev/null
+++ b/elements/pfe-content-set/pfe-content-set.js
@@ -0,0 +1,190 @@
+import PFElement from '../pfelement/pfelement.js';
+import '../pfe-accordion/pfe-accordion.js';
+import '../pfe-tabs/pfe-tabs.js';
+
+/*
+ * @license
+ * 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 PfeContentSet extends PFElement {
+
+ get html() {
+ return ``;
+ }
+ static get tag() {
+ return "pfe-content-set";
+ }
+
+ get templateUrl() {
+ return "pfe-content-set.html";
+ }
+
+ get styleUrl() {
+ return "pfe-content-set.scss";
+ }
+
+ static get pfeType() {
+ return PFElement.pfeType.combo;
+ }
+
+ get isTab() {
+ return this.parentNode
+ ? this.parentNode.offsetWidth > 768
+ : window.outerWidth > 768;
+ }
+
+ get orientation() {
+ return this.hasAttribute("vertical") ? "vertical" : "horizontal";
+ }
+
+ get settings() {
+ let settings = {};
+ const variant = this.getAttribute("pfe-variant");
+ const theme = this.getAttribute("on");
+
+ if (variant) {
+ settings.variant = variant;
+ }
+
+ if (theme) {
+ settings.theme = theme;
+ }
+
+ return settings;
+ }
+
+ constructor() {
+ super(PfeContentSet, { delayRender: true });
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ if (this.isTab) {
+ this._buildTabs();
+ } else {
+ this._buildAccordion();
+ }
+
+ this.render();
+ }
+
+ _buildAccordion() {
+ // Use a document fragment for efficiency
+ const fragment = document.createDocumentFragment();
+ // Create the accordion wrapper component
+ const accordion = document.createElement("pfe-accordion");
+
+ // Iterate over each element in the light DOM
+ [...this.children].forEach(child => {
+ // If one of them has the attribute indicating they belong in the header region
+ if (child.hasAttribute("pfe-content-set--header")) {
+ // Create a header component
+ const header = document.createElement("pfe-accordion-header");
+ // Append the light DOM element to that component
+ header.appendChild(child);
+ // Append the component to the accordion parent
+ accordion.appendChild(header);
+ }
+ // If one of them has the attribute indicating they belong in the panel region
+ if (child.hasAttribute("pfe-content-set--panel")) {
+ // Create a panel component
+ const panel = document.createElement("pfe-accordion-panel");
+ // Append the light DOM element to that component
+ panel.appendChild(child);
+ // Append the component to the accordion parent
+ accordion.appendChild(panel);
+ }
+ });
+
+ // Append the accordion to the document fragment
+ fragment.appendChild(accordion);
+
+ // Pass the theme property down to the accordion component
+ if (this.settings.theme) {
+ accordion.setAttribute("on", this.settings.theme);
+ }
+
+ // Append the fragment to the component
+ this.appendChild(fragment);
+ }
+
+ _buildTabs() {
+ // Use a document fragment for efficiency
+ const fragment = document.createDocumentFragment();
+ // Create the tabs wrapper component
+ const tabs = document.createElement("pfe-tabs");
+
+ // Iterate over each element in the light DOM
+ [...this.children].forEach(child => {
+ // If one of them has the attribute indicating they belong in the header region
+ if (child.hasAttribute("pfe-content-set--header")) {
+ // Create a tab component
+ const header = document.createElement("pfe-tab");
+ // Set the attribute indicating its slot
+ header.setAttribute("slot", "tab");
+ // Append the light DOM element to that component
+ header.appendChild(child);
+ // Append the component to the tabs parent
+ tabs.appendChild(header);
+ }
+ // If one of them has the attribute indicating they belong in the panel region
+ if (child.hasAttribute("pfe-content-set--panel")) {
+ // Create the panel component
+ const panel = document.createElement("pfe-tab-panel");
+ // Set the attribute indicating its slot
+ panel.setAttribute("slot", "panel");
+ // Append the light DOM element to that component
+ panel.appendChild(child);
+ // Append the component to the tabs parent
+ tabs.appendChild(panel);
+ }
+ });
+
+ // Append the tabs to the document fragment
+ fragment.appendChild(tabs);
+
+ // If the orientation is set to vertical, add that attribute to the tabs
+ if (this.orientation === "vertical") {
+ tabs.setAttribute("vertical", true);
+ }
+
+ // Pass the variant attribute down to the tabs component
+ if (this.settings.variant) {
+ tabs.setAttribute("pfe-variant", this.settings.variant);
+ }
+
+ // Pass the theme property down to the accordion component
+ if (this.settings.theme) {
+ tabs.setAttribute("on", this.settings.theme);
+ }
+
+ // Append the fragment to the component
+ this.appendChild(fragment);
+ }
+}
+
+PFElement.create(PfeContentSet);
+
+export default PfeContentSet;
+//# sourceMappingURL=pfe-content-set.js.map
diff --git a/elements/pfe-content-set/pfe-content-set.js.map b/elements/pfe-content-set/pfe-content-set.js.map
new file mode 100644
index 0000000000..d280641c52
--- /dev/null
+++ b/elements/pfe-content-set/pfe-content-set.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-content-set.js","sources":["pfe-content-set.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../pfelement/pfelement.js\";\nimport PfeAccordion from \"../pfe-accordion/pfe-accordion.js\";\nimport PfeTabs from \"../pfe-tabs/pfe-tabs.js\";\n\nclass PfeContentSet extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-content-set\";\n }\n\n get templateUrl() {\n return \"pfe-content-set.html\";\n }\n\n get styleUrl() {\n return \"pfe-content-set.scss\";\n }\n\n static get pfeType() {\n return PFElement.pfeType.combo;\n }\n\n get isTab() {\n return this.parentNode\n ? this.parentNode.offsetWidth > 768\n : window.outerWidth > 768;\n }\n\n get orientation() {\n return this.hasAttribute(\"vertical\") ? \"vertical\" : \"horizontal\";\n }\n\n get settings() {\n let settings = {};\n const variant = this.getAttribute(\"pfe-variant\");\n const theme = this.getAttribute(\"on\");\n\n if (variant) {\n settings.variant = variant;\n }\n\n if (theme) {\n settings.theme = theme \n }\n\n return settings;\n }\n\n constructor() {\n super(PfeContentSet, { delayRender: true });\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.isTab) {\n this._buildTabs();\n } else {\n this._buildAccordion();\n }\n\n this.render();\n }\n\n _buildAccordion() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the accordion wrapper component\n const accordion = document.createElement(\"pfe-accordion\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a header component\n const header = document.createElement(\"pfe-accordion-header\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create a panel component\n const panel = document.createElement(\"pfe-accordion-panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(panel);\n }\n });\n\n // Append the accordion to the document fragment\n fragment.appendChild(accordion);\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n accordion.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n\n _buildTabs() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the tabs wrapper component\n const tabs = document.createElement(\"pfe-tabs\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a tab component\n const header = document.createElement(\"pfe-tab\");\n // Set the attribute indicating its slot\n header.setAttribute(\"slot\", \"tab\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create the panel component\n const panel = document.createElement(\"pfe-tab-panel\");\n // Set the attribute indicating its slot\n panel.setAttribute(\"slot\", \"panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(panel);\n }\n });\n\n // Append the tabs to the document fragment\n fragment.appendChild(tabs);\n\n // If the orientation is set to vertical, add that attribute to the tabs\n if (this.orientation === \"vertical\") {\n tabs.setAttribute(\"vertical\", true);\n }\n\n // Pass the variant attribute down to the tabs component\n if (this.settings.variant) {\n tabs.setAttribute(\"pfe-variant\", this.settings.variant);\n }\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n tabs.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n}\n\nPFElement.create(PfeContentSet);\n\nexport default PfeContentSet;\n"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-content-set/pfe-content-set.min.css b/elements/pfe-content-set/pfe-content-set.min.css
new file mode 100644
index 0000000000..1da45f45db
--- /dev/null
+++ b/elements/pfe-content-set/pfe-content-set.min.css
@@ -0,0 +1 @@
+:host{display:block}:host([hidden]){display:none}
\ No newline at end of file
diff --git a/elements/pfe-content-set/pfe-content-set.min.js b/elements/pfe-content-set/pfe-content-set.min.js
new file mode 100644
index 0000000000..12f0799bc4
--- /dev/null
+++ b/elements/pfe-content-set/pfe-content-set.min.js
@@ -0,0 +1,25 @@
+import t from"../pfelement/pfelement.min.js";import"../pfe-accordion/pfe-accordion.min.js";import"../pfe-tabs/pfe-tabs.min.js";
+/*
+ * @license
+ * 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 e extends t{get html(){return""}static get tag(){return"pfe-content-set"}get templateUrl(){return"pfe-content-set.html"}get styleUrl(){return"pfe-content-set.scss"}static get pfeType(){return t.pfeType.combo}get isTab(){return this.parentNode?this.parentNode.offsetWidth>768:window.outerWidth>768}get orientation(){return this.hasAttribute("vertical")?"vertical":"horizontal"}get settings(){let t={};const e=this.getAttribute("pfe-variant"),n=this.getAttribute("on");return e&&(t.variant=e),n&&(t.theme=n),t}constructor(){super(e,{delayRender:!0})}connectedCallback(){super.connectedCallback(),this.isTab?this._buildTabs():this._buildAccordion(),this.render()}_buildAccordion(){const t=document.createDocumentFragment(),e=document.createElement("pfe-accordion");[...this.children].forEach(t=>{if(t.hasAttribute("pfe-content-set--header")){const n=document.createElement("pfe-accordion-header");n.appendChild(t),e.appendChild(n)}if(t.hasAttribute("pfe-content-set--panel")){const n=document.createElement("pfe-accordion-panel");n.appendChild(t),e.appendChild(n)}}),t.appendChild(e),this.settings.theme&&e.setAttribute("on",this.settings.theme),this.appendChild(t)}_buildTabs(){const t=document.createDocumentFragment(),e=document.createElement("pfe-tabs");[...this.children].forEach(t=>{if(t.hasAttribute("pfe-content-set--header")){const n=document.createElement("pfe-tab");n.setAttribute("slot","tab"),n.appendChild(t),e.appendChild(n)}if(t.hasAttribute("pfe-content-set--panel")){const n=document.createElement("pfe-tab-panel");n.setAttribute("slot","panel"),n.appendChild(t),e.appendChild(n)}}),t.appendChild(e),"vertical"===this.orientation&&e.setAttribute("vertical",!0),this.settings.variant&&e.setAttribute("pfe-variant",this.settings.variant),this.settings.theme&&e.setAttribute("on",this.settings.theme),this.appendChild(t)}}t.create(e);export default e;
+//# sourceMappingURL=pfe-content-set.min.js.map
diff --git a/elements/pfe-content-set/pfe-content-set.min.js.map b/elements/pfe-content-set/pfe-content-set.min.js.map
new file mode 100644
index 0000000000..875dc0d376
--- /dev/null
+++ b/elements/pfe-content-set/pfe-content-set.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-content-set.min.js","sources":["pfe-content-set.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\nimport '../pfe-accordion/pfe-accordion.js';\nimport '../pfe-tabs/pfe-tabs.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nclass PfeContentSet extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-content-set\";\n }\n\n get templateUrl() {\n return \"pfe-content-set.html\";\n }\n\n get styleUrl() {\n return \"pfe-content-set.scss\";\n }\n\n static get pfeType() {\n return PFElement.pfeType.combo;\n }\n\n get isTab() {\n return this.parentNode\n ? this.parentNode.offsetWidth > 768\n : window.outerWidth > 768;\n }\n\n get orientation() {\n return this.hasAttribute(\"vertical\") ? \"vertical\" : \"horizontal\";\n }\n\n get settings() {\n let settings = {};\n const variant = this.getAttribute(\"pfe-variant\");\n const theme = this.getAttribute(\"on\");\n\n if (variant) {\n settings.variant = variant;\n }\n\n if (theme) {\n settings.theme = theme; \n }\n\n return settings;\n }\n\n constructor() {\n super(PfeContentSet, { delayRender: true });\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.isTab) {\n this._buildTabs();\n } else {\n this._buildAccordion();\n }\n\n this.render();\n }\n\n _buildAccordion() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the accordion wrapper component\n const accordion = document.createElement(\"pfe-accordion\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a header component\n const header = document.createElement(\"pfe-accordion-header\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create a panel component\n const panel = document.createElement(\"pfe-accordion-panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(panel);\n }\n });\n\n // Append the accordion to the document fragment\n fragment.appendChild(accordion);\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n accordion.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n\n _buildTabs() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the tabs wrapper component\n const tabs = document.createElement(\"pfe-tabs\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a tab component\n const header = document.createElement(\"pfe-tab\");\n // Set the attribute indicating its slot\n header.setAttribute(\"slot\", \"tab\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create the panel component\n const panel = document.createElement(\"pfe-tab-panel\");\n // Set the attribute indicating its slot\n panel.setAttribute(\"slot\", \"panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(panel);\n }\n });\n\n // Append the tabs to the document fragment\n fragment.appendChild(tabs);\n\n // If the orientation is set to vertical, add that attribute to the tabs\n if (this.orientation === \"vertical\") {\n tabs.setAttribute(\"vertical\", true);\n }\n\n // Pass the variant attribute down to the tabs component\n if (this.settings.variant) {\n tabs.setAttribute(\"pfe-variant\", this.settings.variant);\n }\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n tabs.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n}\n\nPFElement.create(PfeContentSet);\n\nexport default PfeContentSet;\n//# sourceMappingURL=pfe-content-set.js.map\n"],"names":["PfeContentSet","PFElement","html","tag","templateUrl","styleUrl","pfeType","combo","isTab","this","parentNode","offsetWidth","window","outerWidth","orientation","hasAttribute","settings","variant","getAttribute","theme","[object Object]","super","delayRender","connectedCallback","_buildTabs","_buildAccordion","render","fragment","document","createDocumentFragment","accordion","createElement","children","forEach","child","header","appendChild","panel","setAttribute","tabs","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA4BA,MAAMA,UAAsBC,EAE1BC,WACE,MAAO,gFAETC,iBACE,MAAO,kBAGTC,kBACE,MAAO,uBAGTC,eACE,MAAO,uBAGTC,qBACE,OAAOL,EAAUK,QAAQC,MAG3BC,YACE,OAAOC,KAAKC,WACRD,KAAKC,WAAWC,YAAc,IAC9BC,OAAOC,WAAa,IAG1BC,kBACE,OAAOL,KAAKM,aAAa,YAAc,WAAa,aAGtDC,eACE,IAAIA,EAAW,GACf,MAAMC,EAAUR,KAAKS,aAAa,eAC5BC,EAAQV,KAAKS,aAAa,MAUhC,OARID,IACFD,EAASC,QAAUA,GAGjBE,IACFH,EAASG,MAAQA,GAGZH,EAGTI,cACEC,MAAMrB,EAAe,CAAEsB,aAAa,IAGtCF,oBACEC,MAAME,oBAEFd,KAAKD,MACPC,KAAKe,aAELf,KAAKgB,kBAGPhB,KAAKiB,SAGPN,kBAEE,MAAMO,EAAWC,SAASC,yBAEpBC,EAAYF,SAASG,cAAc,iBAGzC,IAAItB,KAAKuB,UAAUC,QAAQC,IAEzB,GAAIA,EAAMnB,aAAa,2BAA4B,CAEjD,MAAMoB,EAASP,SAASG,cAAc,wBAEtCI,EAAOC,YAAYF,GAEnBJ,EAAUM,YAAYD,GAGxB,GAAID,EAAMnB,aAAa,0BAA2B,CAEhD,MAAMsB,EAAQT,SAASG,cAAc,uBAErCM,EAAMD,YAAYF,GAElBJ,EAAUM,YAAYC,MAK1BV,EAASS,YAAYN,GAGjBrB,KAAKO,SAASG,OAChBW,EAAUQ,aAAa,KAAM7B,KAAKO,SAASG,OAI7CV,KAAK2B,YAAYT,GAGnBP,aAEE,MAAMO,EAAWC,SAASC,yBAEpBU,EAAOX,SAASG,cAAc,YAGpC,IAAItB,KAAKuB,UAAUC,QAAQC,IAEzB,GAAIA,EAAMnB,aAAa,2BAA4B,CAEjD,MAAMoB,EAASP,SAASG,cAAc,WAEtCI,EAAOG,aAAa,OAAQ,OAE5BH,EAAOC,YAAYF,GAEnBK,EAAKH,YAAYD,GAGnB,GAAID,EAAMnB,aAAa,0BAA2B,CAEhD,MAAMsB,EAAQT,SAASG,cAAc,iBAErCM,EAAMC,aAAa,OAAQ,SAE3BD,EAAMD,YAAYF,GAElBK,EAAKH,YAAYC,MAKrBV,EAASS,YAAYG,GAGI,aAArB9B,KAAKK,aACPyB,EAAKD,aAAa,YAAY,GAI5B7B,KAAKO,SAASC,SAChBsB,EAAKD,aAAa,cAAe7B,KAAKO,SAASC,SAI7CR,KAAKO,SAASG,OAChBoB,EAAKD,aAAa,KAAM7B,KAAKO,SAASG,OAIxCV,KAAK2B,YAAYT,IAIrB1B,EAAUuC,OAAOxC"}
\ No newline at end of file
diff --git a/elements/pfe-content-set/pfe-content-set.umd.js b/elements/pfe-content-set/pfe-content-set.umd.js
new file mode 100644
index 0000000000..c202bf5541
--- /dev/null
+++ b/elements/pfe-content-set/pfe-content-set.umd.js
@@ -0,0 +1,295 @@
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../pfelement/pfelement.umd'), require('../pfe-accordion/pfe-accordion.umd'), require('../pfe-tabs/pfe-tabs.umd')) :
+ typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd', '../pfe-accordion/pfe-accordion.umd', '../pfe-tabs/pfe-tabs.umd'], factory) :
+ (global.PfeContentSet = 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);
+ }
+ };
+
+ /*
+ * @license
+ * 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.
+ *
+ */
+
+ var PfeContentSet = function (_PFElement) {
+ inherits(PfeContentSet, _PFElement);
+ createClass(PfeContentSet, [{
+ key: 'html',
+ get: function get$$1() {
+ return '';
+ }
+ }, {
+ key: 'templateUrl',
+ get: function get$$1() {
+ return "pfe-content-set.html";
+ }
+ }, {
+ key: 'styleUrl',
+ get: function get$$1() {
+ return "pfe-content-set.scss";
+ }
+ }, {
+ key: 'isTab',
+ get: function get$$1() {
+ return this.parentNode ? this.parentNode.offsetWidth > 768 : window.outerWidth > 768;
+ }
+ }, {
+ key: 'orientation',
+ get: function get$$1() {
+ return this.hasAttribute("vertical") ? "vertical" : "horizontal";
+ }
+ }, {
+ key: 'settings',
+ get: function get$$1() {
+ var settings = {};
+ var variant = this.getAttribute("pfe-variant");
+ var theme = this.getAttribute("on");
+
+ if (variant) {
+ settings.variant = variant;
+ }
+
+ if (theme) {
+ settings.theme = theme;
+ }
+
+ return settings;
+ }
+ }], [{
+ key: 'tag',
+ get: function get$$1() {
+ return "pfe-content-set";
+ }
+ }, {
+ key: 'pfeType',
+ get: function get$$1() {
+ return PFElement.pfeType.combo;
+ }
+ }]);
+
+ function PfeContentSet() {
+ classCallCheck(this, PfeContentSet);
+ return possibleConstructorReturn(this, (PfeContentSet.__proto__ || Object.getPrototypeOf(PfeContentSet)).call(this, PfeContentSet, { delayRender: true }));
+ }
+
+ createClass(PfeContentSet, [{
+ key: 'connectedCallback',
+ value: function connectedCallback() {
+ get(PfeContentSet.prototype.__proto__ || Object.getPrototypeOf(PfeContentSet.prototype), 'connectedCallback', this).call(this);
+
+ if (this.isTab) {
+ this._buildTabs();
+ } else {
+ this._buildAccordion();
+ }
+
+ this.render();
+ }
+ }, {
+ key: '_buildAccordion',
+ value: function _buildAccordion() {
+ // Use a document fragment for efficiency
+ var fragment = document.createDocumentFragment();
+ // Create the accordion wrapper component
+ var accordion = document.createElement("pfe-accordion");
+
+ // Iterate over each element in the light DOM
+ [].concat(toConsumableArray(this.children)).forEach(function (child) {
+ // If one of them has the attribute indicating they belong in the header region
+ if (child.hasAttribute("pfe-content-set--header")) {
+ // Create a header component
+ var header = document.createElement("pfe-accordion-header");
+ // Append the light DOM element to that component
+ header.appendChild(child);
+ // Append the component to the accordion parent
+ accordion.appendChild(header);
+ }
+ // If one of them has the attribute indicating they belong in the panel region
+ if (child.hasAttribute("pfe-content-set--panel")) {
+ // Create a panel component
+ var panel = document.createElement("pfe-accordion-panel");
+ // Append the light DOM element to that component
+ panel.appendChild(child);
+ // Append the component to the accordion parent
+ accordion.appendChild(panel);
+ }
+ });
+
+ // Append the accordion to the document fragment
+ fragment.appendChild(accordion);
+
+ // Pass the theme property down to the accordion component
+ if (this.settings.theme) {
+ accordion.setAttribute("on", this.settings.theme);
+ }
+
+ // Append the fragment to the component
+ this.appendChild(fragment);
+ }
+ }, {
+ key: '_buildTabs',
+ value: function _buildTabs() {
+ // Use a document fragment for efficiency
+ var fragment = document.createDocumentFragment();
+ // Create the tabs wrapper component
+ var tabs = document.createElement("pfe-tabs");
+
+ // Iterate over each element in the light DOM
+ [].concat(toConsumableArray(this.children)).forEach(function (child) {
+ // If one of them has the attribute indicating they belong in the header region
+ if (child.hasAttribute("pfe-content-set--header")) {
+ // Create a tab component
+ var header = document.createElement("pfe-tab");
+ // Set the attribute indicating its slot
+ header.setAttribute("slot", "tab");
+ // Append the light DOM element to that component
+ header.appendChild(child);
+ // Append the component to the tabs parent
+ tabs.appendChild(header);
+ }
+ // If one of them has the attribute indicating they belong in the panel region
+ if (child.hasAttribute("pfe-content-set--panel")) {
+ // Create the panel component
+ var panel = document.createElement("pfe-tab-panel");
+ // Set the attribute indicating its slot
+ panel.setAttribute("slot", "panel");
+ // Append the light DOM element to that component
+ panel.appendChild(child);
+ // Append the component to the tabs parent
+ tabs.appendChild(panel);
+ }
+ });
+
+ // Append the tabs to the document fragment
+ fragment.appendChild(tabs);
+
+ // If the orientation is set to vertical, add that attribute to the tabs
+ if (this.orientation === "vertical") {
+ tabs.setAttribute("vertical", true);
+ }
+
+ // Pass the variant attribute down to the tabs component
+ if (this.settings.variant) {
+ tabs.setAttribute("pfe-variant", this.settings.variant);
+ }
+
+ // Pass the theme property down to the accordion component
+ if (this.settings.theme) {
+ tabs.setAttribute("on", this.settings.theme);
+ }
+
+ // Append the fragment to the component
+ this.appendChild(fragment);
+ }
+ }]);
+ return PfeContentSet;
+ }(PFElement);
+
+ PFElement.create(PfeContentSet);
+
+ return PfeContentSet;
+
+})));
+//# sourceMappingURL=pfe-content-set.umd.js.map
diff --git a/elements/pfe-content-set/pfe-content-set.umd.js.map b/elements/pfe-content-set/pfe-content-set.umd.js.map
new file mode 100644
index 0000000000..a90afcd75d
--- /dev/null
+++ b/elements/pfe-content-set/pfe-content-set.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-content-set.umd.js","sources":["pfe-content-set.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\nimport '../pfe-accordion/pfe-accordion.js';\nimport '../pfe-tabs/pfe-tabs.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nclass PfeContentSet extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-content-set\";\n }\n\n get templateUrl() {\n return \"pfe-content-set.html\";\n }\n\n get styleUrl() {\n return \"pfe-content-set.scss\";\n }\n\n static get pfeType() {\n return PFElement.pfeType.combo;\n }\n\n get isTab() {\n return this.parentNode\n ? this.parentNode.offsetWidth > 768\n : window.outerWidth > 768;\n }\n\n get orientation() {\n return this.hasAttribute(\"vertical\") ? \"vertical\" : \"horizontal\";\n }\n\n get settings() {\n let settings = {};\n const variant = this.getAttribute(\"pfe-variant\");\n const theme = this.getAttribute(\"on\");\n\n if (variant) {\n settings.variant = variant;\n }\n\n if (theme) {\n settings.theme = theme; \n }\n\n return settings;\n }\n\n constructor() {\n super(PfeContentSet, { delayRender: true });\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.isTab) {\n this._buildTabs();\n } else {\n this._buildAccordion();\n }\n\n this.render();\n }\n\n _buildAccordion() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the accordion wrapper component\n const accordion = document.createElement(\"pfe-accordion\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a header component\n const header = document.createElement(\"pfe-accordion-header\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create a panel component\n const panel = document.createElement(\"pfe-accordion-panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(panel);\n }\n });\n\n // Append the accordion to the document fragment\n fragment.appendChild(accordion);\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n accordion.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n\n _buildTabs() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the tabs wrapper component\n const tabs = document.createElement(\"pfe-tabs\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a tab component\n const header = document.createElement(\"pfe-tab\");\n // Set the attribute indicating its slot\n header.setAttribute(\"slot\", \"tab\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create the panel component\n const panel = document.createElement(\"pfe-tab-panel\");\n // Set the attribute indicating its slot\n panel.setAttribute(\"slot\", \"panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(panel);\n }\n });\n\n // Append the tabs to the document fragment\n fragment.appendChild(tabs);\n\n // If the orientation is set to vertical, add that attribute to the tabs\n if (this.orientation === \"vertical\") {\n tabs.setAttribute(\"vertical\", true);\n }\n\n // Pass the variant attribute down to the tabs component\n if (this.settings.variant) {\n tabs.setAttribute(\"pfe-variant\", this.settings.variant);\n }\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n tabs.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n}\n\nPFElement.create(PfeContentSet);\n\nexport default PfeContentSet;\n//# sourceMappingURL=pfe-content-set.js.map\n"],"names":["PfeContentSet","parentNode","offsetWidth","window","outerWidth","hasAttribute","settings","variant","getAttribute","theme","PFElement","pfeType","combo","delayRender","isTab","_buildTabs","_buildAccordion","render","fragment","document","createDocumentFragment","accordion","createElement","children","forEach","child","header","appendChild","panel","setAttribute","tabs","orientation","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIA;;;;;;;;;;;;;;;;;;;;;;;;MAwBMA;;;;6BAEO;EACT;EACD;;;6BAKiB;EAChB,aAAO,sBAAP;EACD;;;6BAEc;EACb,aAAO,sBAAP;EACD;;;6BAMW;EACV,aAAO,KAAKC,UAAL,GACH,KAAKA,UAAL,CAAgBC,WAAhB,GAA8B,GAD3B,GAEHC,OAAOC,UAAP,GAAoB,GAFxB;EAGD;;;6BAEiB;EAChB,aAAO,KAAKC,YAAL,CAAkB,UAAlB,IAAgC,UAAhC,GAA6C,YAApD;EACD;;;6BAEc;EACb,UAAIC,WAAW,EAAf;EACA,UAAMC,UAAU,KAAKC,YAAL,CAAkB,aAAlB,CAAhB;EACA,UAAMC,QAAQ,KAAKD,YAAL,CAAkB,IAAlB,CAAd;;EAEA,UAAID,OAAJ,EAAa;EACXD,iBAASC,OAAT,GAAmBA,OAAnB;EACD;;EAED,UAAIE,KAAJ,EAAW;EACTH,iBAASG,KAAT,GAAiBA,KAAjB;EACD;;EAED,aAAOH,QAAP;EACD;;;6BAxCgB;EACf,aAAO,iBAAP;EACD;;;6BAUoB;EACnB,aAAOI,UAAUC,OAAV,CAAkBC,KAAzB;EACD;;;EA4BD,2BAAc;EAAA;EAAA,wHACNZ,aADM,EACS,EAAEa,aAAa,IAAf,EADT;EAEb;;;;0CAEmB;EAClB;;EAEA,UAAI,KAAKC,KAAT,EAAgB;EACd,aAAKC,UAAL;EACD,OAFD,MAEO;EACL,aAAKC,eAAL;EACD;;EAED,WAAKC,MAAL;EACD;;;wCAEiB;EAChB;EACA,UAAMC,WAAWC,SAASC,sBAAT,EAAjB;EACA;EACA,UAAMC,YAAYF,SAASG,aAAT,CAAuB,eAAvB,CAAlB;;EAEA;EACA,kCAAI,KAAKC,QAAT,GAAmBC,OAAnB,CAA2B,iBAAS;EAClC;EACA,YAAIC,MAAMpB,YAAN,CAAmB,yBAAnB,CAAJ,EAAmD;EACjD;EACA,cAAMqB,SAASP,SAASG,aAAT,CAAuB,sBAAvB,CAAf;EACA;EACAI,iBAAOC,WAAP,CAAmBF,KAAnB;EACA;EACAJ,oBAAUM,WAAV,CAAsBD,MAAtB;EACD;EACD;EACA,YAAID,MAAMpB,YAAN,CAAmB,wBAAnB,CAAJ,EAAkD;EAChD;EACA,cAAMuB,QAAQT,SAASG,aAAT,CAAuB,qBAAvB,CAAd;EACA;EACAM,gBAAMD,WAAN,CAAkBF,KAAlB;EACA;EACAJ,oBAAUM,WAAV,CAAsBC,KAAtB;EACD;EACF,OAnBD;;EAqBA;EACAV,eAASS,WAAT,CAAqBN,SAArB;;EAEA;EACA,UAAI,KAAKf,QAAL,CAAcG,KAAlB,EAAyB;EACvBY,kBAAUQ,YAAV,CAAuB,IAAvB,EAA6B,KAAKvB,QAAL,CAAcG,KAA3C;EACD;;EAED;EACA,WAAKkB,WAAL,CAAiBT,QAAjB;EACD;;;mCAEY;EACX;EACA,UAAMA,WAAWC,SAASC,sBAAT,EAAjB;EACA;EACA,UAAMU,OAAOX,SAASG,aAAT,CAAuB,UAAvB,CAAb;;EAEA;EACA,kCAAI,KAAKC,QAAT,GAAmBC,OAAnB,CAA2B,iBAAS;EAClC;EACA,YAAIC,MAAMpB,YAAN,CAAmB,yBAAnB,CAAJ,EAAmD;EACjD;EACA,cAAMqB,SAASP,SAASG,aAAT,CAAuB,SAAvB,CAAf;EACA;EACAI,iBAAOG,YAAP,CAAoB,MAApB,EAA4B,KAA5B;EACA;EACAH,iBAAOC,WAAP,CAAmBF,KAAnB;EACA;EACAK,eAAKH,WAAL,CAAiBD,MAAjB;EACD;EACD;EACA,YAAID,MAAMpB,YAAN,CAAmB,wBAAnB,CAAJ,EAAkD;EAChD;EACA,cAAMuB,QAAQT,SAASG,aAAT,CAAuB,eAAvB,CAAd;EACA;EACAM,gBAAMC,YAAN,CAAmB,MAAnB,EAA2B,OAA3B;EACA;EACAD,gBAAMD,WAAN,CAAkBF,KAAlB;EACA;EACAK,eAAKH,WAAL,CAAiBC,KAAjB;EACD;EACF,OAvBD;;EAyBA;EACAV,eAASS,WAAT,CAAqBG,IAArB;;EAEA;EACA,UAAI,KAAKC,WAAL,KAAqB,UAAzB,EAAqC;EACnCD,aAAKD,YAAL,CAAkB,UAAlB,EAA8B,IAA9B;EACD;;EAED;EACA,UAAI,KAAKvB,QAAL,CAAcC,OAAlB,EAA2B;EACzBuB,aAAKD,YAAL,CAAkB,aAAlB,EAAiC,KAAKvB,QAAL,CAAcC,OAA/C;EACD;;EAED;EACA,UAAI,KAAKD,QAAL,CAAcG,KAAlB,EAAyB;EACvBqB,aAAKD,YAAL,CAAkB,IAAlB,EAAwB,KAAKvB,QAAL,CAAcG,KAAtC;EACD;;EAED;EACA,WAAKkB,WAAL,CAAiBT,QAAjB;EACD;;;IA3JyBR;;EA8J5BA,UAAUsB,MAAV,CAAiBhC,aAAjB;;;;;;;;"}
\ No newline at end of file
diff --git a/elements/pfe-content-set/pfe-content-set.umd.min.js b/elements/pfe-content-set/pfe-content-set.umd.min.js
new file mode 100644
index 0000000000..b0d7a90492
--- /dev/null
+++ b/elements/pfe-content-set/pfe-content-set.umd.min.js
@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../pfelement/pfelement.umd.min"),require("../pfe-accordion/pfe-accordion.umd.min"),require("../pfe-tabs/pfe-tabs.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min","../pfe-accordion/pfe-accordion.umd.min","../pfe-tabs/pfe-tabs.umd.min"],t):e.PfeContentSet=t(e.PFElement)}(this,function(n){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;var r=function(){function r(e,t){for(var n=0;n:host{display:block}:host([hidden]){display:none}"}},{key:"templateUrl",get:function(){return"pfe-content-set.html"}},{key:"styleUrl",get:function(){return"pfe-content-set.scss"}},{key:"isTab",get:function(){return this.parentNode?768:host{display:block}:host([hidden]){display:none}`;\n }\n static get tag() {\n return \"pfe-content-set\";\n }\n\n get templateUrl() {\n return \"pfe-content-set.html\";\n }\n\n get styleUrl() {\n return \"pfe-content-set.scss\";\n }\n\n static get pfeType() {\n return PFElement.pfeType.combo;\n }\n\n get isTab() {\n return this.parentNode\n ? this.parentNode.offsetWidth > 768\n : window.outerWidth > 768;\n }\n\n get orientation() {\n return this.hasAttribute(\"vertical\") ? \"vertical\" : \"horizontal\";\n }\n\n get settings() {\n let settings = {};\n const variant = this.getAttribute(\"pfe-variant\");\n const theme = this.getAttribute(\"on\");\n\n if (variant) {\n settings.variant = variant;\n }\n\n if (theme) {\n settings.theme = theme; \n }\n\n return settings;\n }\n\n constructor() {\n super(PfeContentSet, { delayRender: true });\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.isTab) {\n this._buildTabs();\n } else {\n this._buildAccordion();\n }\n\n this.render();\n }\n\n _buildAccordion() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the accordion wrapper component\n const accordion = document.createElement(\"pfe-accordion\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a header component\n const header = document.createElement(\"pfe-accordion-header\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create a panel component\n const panel = document.createElement(\"pfe-accordion-panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(panel);\n }\n });\n\n // Append the accordion to the document fragment\n fragment.appendChild(accordion);\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n accordion.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n\n _buildTabs() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the tabs wrapper component\n const tabs = document.createElement(\"pfe-tabs\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a tab component\n const header = document.createElement(\"pfe-tab\");\n // Set the attribute indicating its slot\n header.setAttribute(\"slot\", \"tab\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create the panel component\n const panel = document.createElement(\"pfe-tab-panel\");\n // Set the attribute indicating its slot\n panel.setAttribute(\"slot\", \"panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(panel);\n }\n });\n\n // Append the tabs to the document fragment\n fragment.appendChild(tabs);\n\n // If the orientation is set to vertical, add that attribute to the tabs\n if (this.orientation === \"vertical\") {\n tabs.setAttribute(\"vertical\", true);\n }\n\n // Pass the variant attribute down to the tabs component\n if (this.settings.variant) {\n tabs.setAttribute(\"pfe-variant\", this.settings.variant);\n }\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n tabs.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n}\n\nPFElement.create(PfeContentSet);\n\nexport default PfeContentSet;\n//# sourceMappingURL=pfe-content-set.js.map\n"],"names":["PfeContentSet","delayRender","PFElement","this","parentNode","offsetWidth","window","outerWidth","hasAttribute","settings","variant","getAttribute","theme","pfeType","combo","isTab","_buildTabs","_buildAccordion","render","fragment","document","createDocumentFragment","accordion","createElement","children","forEach","child","header","appendChild","panel","setAttribute","tabs","orientation","create"],"mappings":"k1BA4BMA,gWAgDIA,EAAe,CAAEC,aAAa,wUAhDZC,mKAUjB,8DAIA,4DAQAC,KAAKC,WACsB,IAA9BD,KAAKC,WAAWC,YACI,IAApBC,OAAOC,sDAIJJ,KAAKK,aAAa,YAAc,WAAa,kDAIhDC,EAAW,GACTC,EAAUP,KAAKQ,aAAa,eAC5BC,EAAQT,KAAKQ,aAAa,aAE5BD,MACOA,QAAUA,GAGjBE,MACOA,MAAQA,GAGZH,sCAtCA,yDAYAP,EAAUW,QAAQC,oZAoCrBX,KAAKY,WACFC,kBAEAC,uBAGFC,uDAKCC,EAAWC,SAASC,yBAEpBC,EAAYF,SAASG,cAAc,6BAGrCpB,KAAKqB,WAAUC,QAAQ,eAErBC,EAAMlB,aAAa,2BAA4B,KAE3CmB,EAASP,SAASG,cAAc,0BAE/BK,YAAYF,KAETE,YAAYD,MAGpBD,EAAMlB,aAAa,0BAA2B,KAE1CqB,EAAQT,SAASG,cAAc,yBAE/BK,YAAYF,KAERE,YAAYC,QAKjBD,YAAYN,GAGjBnB,KAAKM,SAASG,SACNkB,aAAa,KAAM3B,KAAKM,SAASG,YAIxCgB,YAAYT,4CAKXA,EAAWC,SAASC,yBAEpBU,EAAOX,SAASG,cAAc,wBAGhCpB,KAAKqB,WAAUC,QAAQ,eAErBC,EAAMlB,aAAa,2BAA4B,KAE3CmB,EAASP,SAASG,cAAc,aAE/BO,aAAa,OAAQ,SAErBF,YAAYF,KAEdE,YAAYD,MAGfD,EAAMlB,aAAa,0BAA2B,KAE1CqB,EAAQT,SAASG,cAAc,mBAE/BO,aAAa,OAAQ,WAErBF,YAAYF,KAEbE,YAAYC,QAKZD,YAAYG,GAGI,aAArB5B,KAAK6B,eACFF,aAAa,YAAY,GAI5B3B,KAAKM,SAASC,WACXoB,aAAa,cAAe3B,KAAKM,SAASC,SAI7CP,KAAKM,SAASG,SACXkB,aAAa,KAAM3B,KAAKM,SAASG,YAInCgB,YAAYT,mBAIrBjB,EAAU+B,OAAOjC"}
\ No newline at end of file
diff --git a/elements/pfe-cta/package.json b/elements/pfe-cta/package.json
index 012e0a1427..fd8d89e807 100644
--- a/elements/pfe-cta/package.json
+++ b/elements/pfe-cta/package.json
@@ -4,7 +4,7 @@
"className": "PfeCta",
"elementName": "pfe-cta"
},
- "version": "1.0.0-prerelease.10",
+ "version": "1.0.0-prerelease.11",
"publishConfig": {
"access": "public"
},
@@ -24,8 +24,8 @@
},
"license": "MIT",
"dependencies": {
- "@patternfly/pfe-sass": "^1.0.0-prerelease.10",
- "@patternfly/pfelement": "^1.0.0-prerelease.10"
+ "@patternfly/pfe-sass": "^1.0.0-prerelease.11",
+ "@patternfly/pfelement": "^1.0.0-prerelease.11"
},
"generator-pfelement-version": "0.5.0",
"gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421"
diff --git a/elements/pfe-cta/pfe-cta.css b/elements/pfe-cta/pfe-cta.css
new file mode 100644
index 0000000000..8a5bd70857
--- /dev/null
+++ b/elements/pfe-cta/pfe-cta.css
@@ -0,0 +1,191 @@
+/*
+ * Copyright 2018 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.
+ */
+/* Palette of Border Colors */
+/* Palette of Feedback Colors */
+:host {
+ --pfe-cta--main: var(--pfe-theme--color--ui-link, #06c);
+ --pfe-cta--main--hover: var(--pfe-theme--color--ui-link--hover, #003366);
+ --pfe-cta--main--focus: var(--pfe-theme--color--ui-link--focus, #003366);
+ --pfe-cta--main--visited: var(--pfe-theme--color--ui-link--visited, rebeccapurple);
+ --pfe-cta--aux: transparent;
+ --pfe-cta--aux--hover: transparent;
+ display: inline-block;
+ font-weight: bold;
+}
+
+:host ::slotted(a) {
+ line-height: inherit;
+ color: var(--pfe-cta--main);
+ -webkit-transition: all cubic-bezier(0.465, 0.183, 0.153, 0.946);
+ transition: all cubic-bezier(0.465, 0.183, 0.153, 0.946);
+ -webkit-transition: all var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));
+ transition: all var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));
+}
+
+:host ::slotted(a)::after {
+ display: block;
+ margin-left: calc(1rem * 0.25);
+ margin-left: calc(var(--pfe-theme--content-spacer, 1rem) * 0.25);
+ vertical-align: middle;
+ border-style: solid;
+ border-style: var(--pfe-theme--surface--border-style, solid);
+ border-width: 0.313em 0.313em 0;
+ border-color: transparent;
+ border-top-color: var(--pfe-cta--main);
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ display: inline-block;
+ content: "";
+}
+
+:host ::slotted(a:hover) {
+ color: var(--pfe-cta--main--hover);
+}
+
+:host ::slotted(a:hover)::after {
+ border-top-color: var(--pfe-cta--main--hover);
+}
+
+:host ::slotted(a:focus) {
+ color: var(--pfe-cta--main--focus);
+}
+
+:host ::slotted(a:focus)::after {
+ border-top-color: var(--pfe-cta--main--focus);
+}
+
+:host([priority="primary"]) {
+ --pfe-cta--main: var(--pfe-theme--color--ui-accent, #fe460d);
+ --pfe-cta--main--hover: var(--pfe-theme--color--ui-accent--hover, #a42701);
+ --pfe-cta--aux: var(--pfe-theme--color--ui-accent--text, #fff);
+ --pfe-cta--aux--hover: var(--pfe-theme--color--ui-accent--text--hover, #fff);
+}
+
+:host([priority="primary"]) ::slotted(a) {
+ display: inline-block;
+ padding: calc(1rem * 0.5) calc(1rem * 2);
+ padding: calc(var(--pfe-theme--container-padding, 1rem) * 0.5) calc(var(--pfe-theme--container-padding, 1rem) * 2);
+ border-radius: calc(2px * 20);
+ border-radius: calc(var(--pfe-theme--ui--border-radius, 2px) * 20);
+ border: 1px solid transparent;
+ border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) transparent;
+ text-decoration: none;
+ line-height: 1.2;
+ border-color: var(--pfe-cta--main);
+ background: var(--pfe-cta--main);
+ color: var(--pfe-cta--aux);
+ --pfe-broadcasted--color--ui-link: var(--pfe-cta--aux);
+}
+
+:host([priority="primary"]) ::slotted(a)::after {
+ display: none;
+}
+
+:host([priority="primary"]) ::slotted(a:hover),
+:host([priority="primary"]) ::slotted(a:focus) {
+ border-color: var(--pfe-cta--main--hover);
+ background: var(--pfe-cta--main--hover);
+ color: var(--pfe-cta--aux--hover);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover);
+}
+
+:host([priority="secondary"]) {
+ --pfe-cta--main: var(--pfe-theme--color--ui-base, #0477a4);
+ --pfe-cta--main--hover: var(--pfe-theme--color--ui-base--hover, #022f40);
+ --pfe-cta--aux: var(--pfe-theme--color--ui-base--text, #fff);
+ --pfe-cta--aux--hover: var(--pfe-theme--color--ui-base--text--hover, #fff);
+}
+
+:host([priority="secondary"]) ::slotted(a) {
+ display: inline-block;
+ padding: calc(1rem * 0.5) calc(1rem * 2);
+ padding: calc(var(--pfe-theme--container-padding, 1rem) * 0.5) calc(var(--pfe-theme--container-padding, 1rem) * 2);
+ border-radius: calc(2px * 20);
+ border-radius: calc(var(--pfe-theme--ui--border-radius, 2px) * 20);
+ border: 1px solid var(--pfe-cta--main);
+ border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-cta--main);
+ text-decoration: none;
+ line-height: 1.2;
+ border-color: var(--pfe-cta--main);
+ background: var(--pfe-cta--aux);
+ color: var(--pfe-cta--main);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--main);
+}
+
+:host([priority="secondary"]) ::slotted(a)::after {
+ display: none;
+}
+
+:host([priority="secondary"]) ::slotted(a:hover),
+:host([priority="secondary"]) ::slotted(a:focus) {
+ border-color: var(--pfe-cta--main--hover);
+ background: var(--pfe-cta--main--hover);
+ color: var(--pfe-cta--aux--hover);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover);
+}
+
+:host([on="dark"]) {
+ --pfe-cta--main: var(--pfe-theme--color--text--on-dark, #fff);
+ --pfe-cta--main--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);
+ --pfe-cta--aux: transparent;
+ --pfe-cta--aux--hover: transparent;
+}
+
+:host([on="dark"][priority="primary"]) {
+ --pfe-cta--main: var(--pfe-theme--color--ui-accent--text, #fff);
+ --pfe-cta--main--hover: var(--pfe-theme--color--ui-accent--text--hover, #fff);
+ --pfe-cta--aux: var(--pfe-theme--color--ui-accent, #fe460d);
+ --pfe-cta--aux--hover: var(--pfe-theme--color--ui-accent--hover, #a42701);
+}
+
+:host([on="dark"][priority="secondary"]) {
+ --pfe-cta--main: var(--pfe-theme--color--ui-base--text, #fff);
+ --pfe-cta--main--hover: var(--pfe-theme--color--ui-base--text--hover, #fff);
+ --pfe-cta--aux: transparent;
+ --pfe-cta--aux--hover: var(--pfe-theme--color--ui-base--hover, #022f40);
+}
+
+:host([color="base"]),
+:host([color="base"][on="dark"]) {
+ --pfe-cta--main: var(--pfe-theme--color--ui-base, #0477a4);
+ --pfe-cta--main--hover: var(--pfe-theme--color--ui-base--hover, #022f40);
+ --pfe-cta--aux: var(--pfe-theme--color--ui-base--text, #fff);
+ --pfe-cta--aux--hover: var(--pfe-theme--color--ui-base--text--hover, #fff);
+}
+
+:host([color="complement"]),
+:host([color="complement"][on="dark"]) {
+ --pfe-cta--main: var(--pfe-theme--color--ui-complement, #464646);
+ --pfe-cta--main--hover: var(--pfe-theme--color--ui-complement--hover, #131313);
+ --pfe-cta--aux: var(--pfe-theme--color--ui-complement--text, #fff);
+ --pfe-cta--aux--hover: var(--pfe-theme--color--ui-complement--text--hover, #fff);
+}
+
+:host([color="accent"]),
+:host([color="accent"][on="dark"]) {
+ --pfe-cta--main: var(--pfe-theme--color--ui-accent, #fe460d);
+ --pfe-cta--main--hover: var(--pfe-theme--color--ui-accent--hover, #a42701);
+ --pfe-cta--aux: var(--pfe-theme--color--ui-accent--text, #fff);
+ --pfe-cta--aux--hover: var(--pfe-theme--color--ui-accent--text--hover, #fff);
+}
+
+/*# sourceMappingURL=pfe-cta.css.map */
diff --git a/elements/pfe-cta/pfe-cta.css.map b/elements/pfe-cta/pfe-cta.css.map
new file mode 100644
index 0000000000..e5774f2b54
--- /dev/null
+++ b/elements/pfe-cta/pfe-cta.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-cta.css","../../pfe-sass/variables/_colors.scss","pfe-cta.scss","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;AC5HA;EACE,2EAAgB;EAChB,qFAAuB;EACvB,qFAAuB;EACvB,6FAAyB;EACzB,gDAAe;EACf,gDAAsB;EAEtB,qBAAqB;EACrB,iBAAiB;AFYnB;;AErBA;EAYI,oBAAoB;EACpB,2BAA2B;EAC3B,gEAA4C;EAA5C,wDAA4C;EAA5C,oGAA4C;EAA5C,4FAA4C;AFahD;;AE3BA;EAiBM,cAAc;EACd,8BAAoD;EAApD,gEAAoD;EACpD,sBAAsB;EC8F1B,mBAAc;EAAd,4DAAc;EACd,+BAA8B;EAC9B,yBAAyB;EACzB,sCDhGkD;ECiGlD,iCAA6C;UAA7C,yBAA6C;EAE3C,qBAAqB;EACrB,WAAW;AHhFf;;AExCA;EAgCI,kCAAkC;AFYtC;;AE5CA;EC8HE,6CD3FwD;AFa1D;;AEhDA;EAwCI,kCAAkC;AFYtC;;AEpDA;EC8HE,6CDnFwD;AFa1D;;AEJA;EACE,qEAAgB;EAChB,4EAAuB;EACvB,wEAAe;EACf,+EAAsB;AFOxB;;AEXA;EAOI,qBAAqB;EACrB,wCAA0F;EAA1F,kHAA0F;EAC1F,6BAAuD;EAAvD,kEAAuD;EACvD,6BAA6E;EAA7E,qGAA6E;EAC7E,qBAAqB;EACrB,gBAAgB;EAEhB,kCAAkC;EAClC,gCAAkC;EAClC,0BAAiC;EAEjC,sDAAkC;AFMtC;;AExBA;EAqBM,aAAa;AFOnB;;AE5BA;;EA2BI,yCAAyC;EACzC,uCAAyC;EACzC,iCAAwC;EAExC,oEAAyC;AFK7C;;AEEA;EACE,mEAAgB;EAChB,0EAAuB;EACvB,sEAAe;EACf,6EAAsB;AFCxB;;AELA;EAOI,qBAAqB;EACrB,wCAA0F;EAA1F,kHAA0F;EAC1F,6BAAuD;EAAvD,kEAAuD;EACvD,sCAAsF;EAAtF,8GAAsF;EACtF,qBAAqB;EACrB,gBAAgB;EAEhB,kCAAkC;EAClC,+BAAiC;EACjC,2BAAkC;EAElC,8DAAyC;AFA7C;;AElBA;EAqBM,aAAa;AFCnB;;AEtBA;;EA2BI,yCAAyC;EACzC,uCAAyC;EACzC,iCAAwC;EAExC,oEAAyC;AFD7C;;AEWA;EACE,oEAAgB;EAChB,iFAAuB;EACvB,mCAAe;EACf,mCAAsB;AFRxB;;AEWA;EACE,sEAAgB;EAChB,6EAAuB;EACvB,mEAAe;EACf,0EAAsB;AFRxB;;AEWA;EACE,oEAAgB;EAChB,2EAAuB;EACvB,mCAAe;EACf,wEAAsB;AFRxB;;AEgBA;;EAEE,iEAAgB;EAChB,wEAAuB;EACvB,oEAAe;EACf,2EAAsB;AFbxB;;AEqBA;;EAEE,uEAAgB;EAChB,8EAAuB;EACvB,0EAAe;EACf,iFAAsB;AFlBxB;;AEyBA;;EAEE,mEAAgB;EAChB,0EAAuB;EACvB,sEAAe;EACf,6EAAsB;AFtBxB","file":"pfe-cta.css","sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n//\n// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n --pfe-cta--main: var(--pfe-theme--color--ui-link, #06c);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-link--hover, #003366);\n --pfe-cta--main--focus: var(--pfe-theme--color--ui-link--focus, #003366);\n --pfe-cta--main--visited: var(--pfe-theme--color--ui-link--visited, rebeccapurple);\n --pfe-cta--aux: transparent;\n --pfe-cta--aux--hover: transparent;\n display: inline-block;\n font-weight: bold;\n}\n\n:host ::slotted(a) {\n line-height: inherit;\n color: var(--pfe-cta--main);\n transition: all var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n}\n\n:host ::slotted(a)::after {\n display: block;\n margin-left: calc(var(--pfe-theme--content-spacer, 1rem) * 0.25);\n vertical-align: middle;\n border-style: var(--pfe-theme--surface--border-style, solid);\n border-width: 0.313em 0.313em 0;\n border-color: transparent;\n border-top-color: var(--pfe-cta--main);\n transform: rotate(-90deg);\n display: inline-block;\n content: \"\";\n}\n\n:host ::slotted(a:hover) {\n color: var(--pfe-cta--main--hover);\n}\n\n:host ::slotted(a:hover)::after {\n border-top-color: var(--pfe-cta--main--hover);\n}\n\n:host ::slotted(a:focus) {\n color: var(--pfe-cta--main--focus);\n}\n\n:host ::slotted(a:focus)::after {\n border-top-color: var(--pfe-cta--main--focus);\n}\n\n:host([priority=\"primary\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-accent, #fe460d);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-accent--hover, #a42701);\n --pfe-cta--aux: var(--pfe-theme--color--ui-accent--text, #fff);\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-accent--text--hover, #fff);\n}\n\n:host([priority=\"primary\"]) ::slotted(a) {\n display: inline-block;\n padding: calc(var(--pfe-theme--container-padding, 1rem) * 0.5) calc(var(--pfe-theme--container-padding, 1rem) * 2);\n border-radius: calc(var(--pfe-theme--ui--border-radius, 2px) * 20);\n border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) transparent;\n text-decoration: none;\n line-height: 1.2;\n border-color: var(--pfe-cta--main);\n background: var(--pfe-cta--main);\n color: var(--pfe-cta--aux);\n --pfe-broadcasted--color--ui-link: var(--pfe-cta--aux);\n}\n\n:host([priority=\"primary\"]) ::slotted(a)::after {\n display: none;\n}\n\n:host([priority=\"primary\"]) ::slotted(a:hover),\n:host([priority=\"primary\"]) ::slotted(a:focus) {\n border-color: var(--pfe-cta--main--hover);\n background: var(--pfe-cta--main--hover);\n color: var(--pfe-cta--aux--hover);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover);\n}\n\n:host([priority=\"secondary\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-base, #0477a4);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-base--hover, #022f40);\n --pfe-cta--aux: var(--pfe-theme--color--ui-base--text, #fff);\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-base--text--hover, #fff);\n}\n\n:host([priority=\"secondary\"]) ::slotted(a) {\n display: inline-block;\n padding: calc(var(--pfe-theme--container-padding, 1rem) * 0.5) calc(var(--pfe-theme--container-padding, 1rem) * 2);\n border-radius: calc(var(--pfe-theme--ui--border-radius, 2px) * 20);\n border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-cta--main);\n text-decoration: none;\n line-height: 1.2;\n border-color: var(--pfe-cta--main);\n background: var(--pfe-cta--aux);\n color: var(--pfe-cta--main);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--main);\n}\n\n:host([priority=\"secondary\"]) ::slotted(a)::after {\n display: none;\n}\n\n:host([priority=\"secondary\"]) ::slotted(a:hover),\n:host([priority=\"secondary\"]) ::slotted(a:focus) {\n border-color: var(--pfe-cta--main--hover);\n background: var(--pfe-cta--main--hover);\n color: var(--pfe-cta--aux--hover);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover);\n}\n\n:host([on=\"dark\"]) {\n --pfe-cta--main: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n --pfe-cta--aux: transparent;\n --pfe-cta--aux--hover: transparent;\n}\n\n:host([on=\"dark\"][priority=\"primary\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-accent--text, #fff);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-accent--text--hover, #fff);\n --pfe-cta--aux: var(--pfe-theme--color--ui-accent, #fe460d);\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-accent--hover, #a42701);\n}\n\n:host([on=\"dark\"][priority=\"secondary\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-base--text, #fff);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-base--text--hover, #fff);\n --pfe-cta--aux: transparent;\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-base--hover, #022f40);\n}\n\n:host([color=\"base\"]),\n:host([color=\"base\"][on=\"dark\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-base, #0477a4);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-base--hover, #022f40);\n --pfe-cta--aux: var(--pfe-theme--color--ui-base--text, #fff);\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-base--text--hover, #fff);\n}\n\n:host([color=\"complement\"]),\n:host([color=\"complement\"][on=\"dark\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-complement, #464646);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-complement--hover, #131313);\n --pfe-cta--aux: var(--pfe-theme--color--ui-complement--text, #fff);\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-complement--text--hover, #fff);\n}\n\n:host([color=\"accent\"]),\n:host([color=\"accent\"][on=\"dark\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-accent, #fe460d);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-accent--hover, #a42701);\n --pfe-cta--aux: var(--pfe-theme--color--ui-accent--text, #fff);\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-accent--text--hover, #fff);\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n/// ===========================================================================\n/// Component Specific SASS Vars\n/// ===========================================================================\n\n$pfe-cta__arrow-size: 0.313em;\n\n/// ===========================================================================\n/// DEFAULT CTA\n/// ===========================================================================\n:host {\n --pfe-cta--main: #{pfe-color(ui-link)};\n --pfe-cta--main--hover: #{pfe-color(ui-link--hover)};\n --pfe-cta--main--focus: #{pfe-color(ui-link--focus)};\n --pfe-cta--main--visited: #{pfe-color(ui-link--visited)};\n --pfe-cta--aux: transparent;\n --pfe-cta--aux--hover: transparent;\n\n display: inline-block;\n font-weight: bold;\n\n ::slotted(a) {\n line-height: inherit;\n color: var(--pfe-cta--main);\n transition: all #{pfe-var(animation-timing)};\n\n &::after {\n display: block;\n margin-left: calc(#{pfe-var(content-spacer)} * 0.25); // 1/4 of the base `content-spacer`\n vertical-align: middle;\n @include pfe-arrow(right, var(--pfe-cta--main), $pfe-cta__arrow-size, $pfe-cta__arrow-size, true);\n }\n }\n\n // & ::slotted(a:visited) {\n // color: var(--pfe-cta--main--visited);\n // &::after {\n // @include pfe-arrow-color(var(--pfe-cta--main--visited));\n // }\n // }\n\n ::slotted(a:hover) {\n color: var(--pfe-cta--main--hover);\n\n &::after {\n @include pfe-arrow-color(var(--pfe-cta--main--hover));\n }\n }\n\n ::slotted(a:focus) {\n color: var(--pfe-cta--main--focus);\n\n &::after {\n @include pfe-arrow-color(var(--pfe-cta--main--focus));\n }\n }\n}\n\n\n/// ===========================================================================\n/// Styles for \"Button\" CTAs\n/// ===========================================================================\n:host([priority=\"primary\"]) {\n --pfe-cta--main: #{pfe-color(ui-accent)};\n --pfe-cta--main--hover: #{pfe-color(ui-accent--hover)};\n --pfe-cta--aux: #{pfe-color(ui-accent--text)};\n --pfe-cta--aux--hover: #{pfe-color(ui-accent--text--hover)};\n\n ::slotted(a) {\n display: inline-block;\n padding: calc(#{pfe-var(container-padding)} * 0.5) calc(#{pfe-var(container-padding)} * 2);\n border-radius: calc(#{pfe-var(ui--border-radius)} * 20);\n border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} transparent;\n text-decoration: none;\n line-height: 1.2;\n\n border-color: var(--pfe-cta--main);\n background: var(--pfe-cta--main);\n color: var(--pfe-cta--aux);\n\n --pfe-broadcasted--color--ui-link: var(--pfe-cta--aux);\n\n &::after {\n display: none;\n }\n }\n\n ::slotted(a:hover),\n ::slotted(a:focus) { // Not sure we can lump these together\n border-color: var(--pfe-cta--main--hover);\n background: var(--pfe-cta--main--hover);\n color: var(--pfe-cta--aux--hover);\n\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover);\n }\n\n // & ::slotted(a:visited), TBD\n\n}\n\n:host([priority=\"secondary\"]) {\n --pfe-cta--main: #{pfe-color(ui-base)};\n --pfe-cta--main--hover: #{pfe-color(ui-base--hover)};\n --pfe-cta--aux: #{pfe-color(ui-base--text)};\n --pfe-cta--aux--hover: #{pfe-color(ui-base--text--hover)};\n\n ::slotted(a) {\n display: inline-block;\n padding: calc(#{pfe-var(container-padding)} * 0.5) calc(#{pfe-var(container-padding)} * 2);\n border-radius: calc(#{pfe-var(ui--border-radius)} * 20);\n border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} var(--pfe-cta--main);\n text-decoration: none;\n line-height: 1.2;\n\n border-color: var(--pfe-cta--main);\n background: var(--pfe-cta--aux);\n color: var(--pfe-cta--main);\n\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--main);\n\n &::after {\n display: none;\n }\n }\n\n ::slotted(a:hover), // Not sure we can lump these together\n ::slotted(a:focus) {\n border-color: var(--pfe-cta--main--hover);\n background: var(--pfe-cta--main--hover);\n color: var(--pfe-cta--aux--hover);\n \n --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover);\n }\n\n // & ::slotted(a:visited), TBD\n}\n\n\n/// ===========================================================================\n/// ON DARK\n/// ===========================================================================\n:host([on=\"dark\"]) {\n --pfe-cta--main: #{pfe-color(text--on-dark)};\n --pfe-cta--main--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-cta--aux: transparent;\n --pfe-cta--aux--hover: transparent;\n}\n\n:host([on=\"dark\"][priority=\"primary\"]) {\n --pfe-cta--main: #{pfe-color(ui-accent--text)};\n --pfe-cta--main--hover: #{pfe-color(ui-accent--text--hover)};\n --pfe-cta--aux: #{pfe-color(ui-accent)};\n --pfe-cta--aux--hover: #{pfe-color(ui-accent--hover)};\n}\n\n:host([on=\"dark\"][priority=\"secondary\"]) {\n --pfe-cta--main: #{pfe-color(ui-base--text)};\n --pfe-cta--main--hover: #{pfe-color(ui-base--text--hover)};\n --pfe-cta--aux: transparent;\n --pfe-cta--aux--hover: #{pfe-color(ui-base--hover)};\n}\n\n\n/// ===========================================================================\n/// COLOR OVERRIDE: BASE\n/// ===========================================================================\n\n:host([color=\"base\"]),\n:host([color=\"base\"][on=\"dark\"]) {\n --pfe-cta--main: #{pfe-color(ui-base)};\n --pfe-cta--main--hover: #{pfe-color(ui-base--hover)};\n --pfe-cta--aux: #{pfe-color(ui-base--text)};\n --pfe-cta--aux--hover: #{pfe-color(ui-base--text--hover)};\n}\n\n\n/// ===========================================================================\n/// COLOR OVERRIDE: COMPLEMENT\n/// ===========================================================================\n\n:host([color=\"complement\"]),\n:host([color=\"complement\"][on=\"dark\"]) {\n --pfe-cta--main: #{pfe-color(ui-complement)};\n --pfe-cta--main--hover: #{pfe-color(ui-complement--hover)};\n --pfe-cta--aux: #{pfe-color(ui-complement--text)};\n --pfe-cta--aux--hover: #{pfe-color(ui-complement--text--hover)};\n}\n\n\n/// ===========================================================================\n/// COLOR OVERRIDE: ACCENT\n/// ===========================================================================\n:host([color=\"accent\"]),\n:host([color=\"accent\"][on=\"dark\"]) {\n --pfe-cta--main: #{pfe-color(ui-accent)};\n --pfe-cta--main--hover: #{pfe-color(ui-accent--hover)};\n --pfe-cta--aux: #{pfe-color(ui-accent--text)};\n --pfe-cta--aux--hover: #{pfe-color(ui-accent--text--hover)};\n}\n","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *, *::before, *::after {\n box-sizing: $boxSize;\n }\n}\n\n@mixin pfe-clearfix {\n &::after {\n clear: both;\n content: \"\";\n display: table;\n }\n}\n\n@mixin pfe-reset-list() {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n@mixin pfe-reset-box() {\n margin: 0;\n padding: 0;\n}\n\n@mixin pfe-sr-only() {\n position: absolute;\n overflow: hidden;\n clip: rect(0,0,0,0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n\n/// ===========================================================================\n/// Theme Color Vars - use with on=\"dark\" to affect light DOM\n/// ===========================================================================\n\n@mixin pfe-theme($theme) {\n // GENERAL CONTEXT-BASED UPDATES, ON=\"DARK\"\n @if $theme == dark {\n --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};\n }\n @else if $theme == light {\n --pfe-broadcasted--color--text: #{pfe-color(text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};\n }\n // MORE SPECIFIC COLOR BASED UPDATES, COLOR=\"DARKER\"\n @else if $theme == darker {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n }\n @else if $theme == darkest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n }\n @else if $theme == accent {\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n }\n @else if $theme == complement {\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n }\n\n @else if $theme == lighter {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n }\n @else if $theme == lightest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\n }\n}\n\n@mixin pfe-transition($properties...) {\n $return: null;\n @each $property in $properties {\n @if length($property) == 1 {\n $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma);\n }\n @else if length($property) == 2 {\n $return: append($return, nth($property, 1) nth($property, 2), comma);\n }\n }\n transition: $return;\n}\n\n// Make a CSS arrow\n@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) {\n $direction: (\n up: 180deg,\n down: 0deg,\n right: -90deg,\n left: 90deg,\n );\n border-style: #{pfe-var(surface--border-style)};\n border-width: $width $height 0;\n border-color: transparent;\n border-top-color: $color;\n transform: rotate(map-get($direction, $type));\n @if $pseudo {\n display: inline-block;\n content: \"\";\n @content;\n }\n}\n\n@mixin pfe-arrow-color($color) {\n border-top-color: $color;\n}\n\n@mixin pfe-print-media {\n @media print {\n @content;\n }\n}\n\n@mixin pfe-print-background {\n -webkit-print-color-adjust: exact;\n color-adjust: exact;\n}\n// scss-lint:disable ImportantRule\n@mixin pfe-no-print-background {\n @include pfe-print-media {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n// scss-lint:enable ImportantRule\n\n@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) {\n border: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-#{$position}-color: $color;\n @if $position == right {\n padding-left: $padding;\n margin-right: $margin;\n }\n @else if $position == left {\n padding-right: $padding;\n margin-left: $margin;\n }\n}\n\n@mixin pfe-retina {\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n @content;\n }\n}\n\n// Mixin for building slot selectors\n@mixin pfe-slot($slot-name, $selector: \"\") {\n // This logic makes it much easier to style default slots in a loop\n // with named slots\n @if $slot-name != default {\n ::slotted([slot=\"#{$slot-name}\"]#{$selector}) {\n @content;\n }\n }\n @else {\n ::slotted(*) {\n @content;\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion Specific SASS Vars\n/// ===========================================================================\n\n$pfe-expand_button--LineHeight: 1.5;\n$pfe-expand_button--padding: #{pfe-var(container-spacer)};\n$pfe-expand_button--padding--factor: .75;\n$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);\n\n$pfe-expand_chevron--size: .4em;\n$pfe-expand_chevron--weight: .1em;\n$pfe-expand_chevron--padding: 3em;\n$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};\n\n@mixin pfe-accordion-header {\n display: block;\n > * {\n margin: 0;\n }\n}\n\n@mixin pfe-trigger-button($align: left) {\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: #{pfe-var(font-weight--bold)};\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n\n font-size: calc(#{pfe-var(font-size)} * 1.1);\n line-height: #{pfe-var(line-height)};\n\n color: #{pfe-local(aux)};\n background-color: #{pfe-local(main)};\n border-left: #{pfe-local(BorderLeft)};\n border-right: #{pfe-local(BorderRight)};\n border-bottom: #{pfe-local(BorderBottom)};\n border-top: 0;\n\n &:hover {\n outline: none;\n border-left-color: #{pfe-local(BorderLeftColor--focus)};\n z-index: 2;\n }\n\n &:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: #{pfe-color(surface--border--darker)};\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n @if $align == right {\n padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;\n } @else {\n padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n}\n\n@mixin pfe-trigger-button-last($theme: light) {\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-button-first($theme: light) {\n border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-expanded {\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n@mixin pfe-trigger-color($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};\n }\n}\n\n@mixin pfe-trigger-color-expanded($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: #{pfe-color(surface--darker)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron-expanded($state: true, $position: after) {\n content: \"\";\n position: absolute;\n top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );\n display: block;\n border-style: #{pfe-var(surface--border-style)};\n height: #{$pfe-expand_chevron--size};\n width: #{$pfe-expand_chevron--size};\n text-align: center;\n transition: transform 0.15s;\n @if $state {\n border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n @else {\n border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;\n transform: rotate(45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion panel\n/// ===========================================================================\n\n@mixin pfe-container {\n position: relative;\n display: block;\n width: 100%;\n\n padding: calc(#{pfe-local(padding--vertical)} / 2) #{pfe-local(padding--horizontal)};\n\n @media (min-width: #{pfe-breakpoint(sm)}) {\n padding: #{pfe-local(Padding)};\n }\n}\n\n@mixin pfe-accordion-panel {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n@mixin pfe-accordion-panel-expanded {\n display: block;\n position: relative;\n}\n\n@mixin pfe-accordion-panel-expanded-style($theme: light) {\n border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;\n @if $theme == dark {\n box-shadow: none;\n background-color: #{pfe-color(surface--darker)};\n border-left-color: #{pfe-color(surface--darkest--text)};\n border-right-color: #{pfe-color(surface--darkest--text)};\n }\n @else {\n box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);\n border-left-color: #{pfe-color(surface--lightest--link)};\n background-color: #{pfe-color(surface--lightest)};\n border-right-color: #{pfe-color(surface--border--lightest)};\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n@mixin pfe-accordion-panel-container-inset($align: left) {\n box-sizing: border-box;\n width: 100%;\n\n @if $align == left {\n padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n @else {\n padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};\n }\n}\n"]}
\ No newline at end of file
diff --git a/elements/pfe-cta/pfe-cta.css.min.map b/elements/pfe-cta/pfe-cta.css.min.map
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/pfe-cta/pfe-cta.js b/elements/pfe-cta/pfe-cta.js
new file mode 100644
index 0000000000..d5de7c3c57
--- /dev/null
+++ b/elements/pfe-cta/pfe-cta.js
@@ -0,0 +1,72 @@
+import PFElement from '../pfelement/pfelement.js';
+
+/*
+ * @license
+ * 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 PfeCta extends PFElement {
+
+ get html() {
+ return ``;
+ }
+ static get tag() {
+ return "pfe-cta";
+ }
+
+ get styleUrl() {
+ return "pfe-cta.scss";
+ }
+
+ get templateUrl() {
+ return "pfe-cta.html";
+ }
+
+ constructor() {
+ super(PfeCta);
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ const firstChild = this.children[0];
+
+ if (!firstChild) {
+ console.warn(
+ "The first child in the light DOM must be an anchor tag ()"
+ );
+ } else if (firstChild && firstChild.tagName.toLowerCase() !== "a") {
+ console.warn(
+ "The first child in the light DOM must be an anchor tag ()"
+ );
+ } else {
+ this.link = this.querySelector("a");
+ }
+ }
+
+ disconnectedCallback() {}
+}
+
+PFElement.create(PfeCta);
+
+export default PfeCta;
+//# sourceMappingURL=pfe-cta.js.map
diff --git a/elements/pfe-cta/pfe-cta.js.map b/elements/pfe-cta/pfe-cta.js.map
new file mode 100644
index 0000000000..7c2716999f
--- /dev/null
+++ b/elements/pfe-cta/pfe-cta.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-cta.js","sources":["pfe-cta.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../pfelement/pfelement.js\";\n\nclass PfeCta extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-cta\";\n }\n\n get styleUrl() {\n return \"pfe-cta.scss\";\n }\n\n get templateUrl() {\n return \"pfe-cta.html\";\n }\n\n constructor() {\n super(PfeCta);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const firstChild = this.children[0];\n\n if (!firstChild) {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else if (firstChild && firstChild.tagName.toLowerCase() !== \"a\") {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else {\n this.link = this.querySelector(\"a\");\n }\n }\n\n disconnectedCallback() {}\n}\n\nPFElement.create(PfeCta);\n\nexport default PfeCta;\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;;;AAuBA,AAEA;AACA,MAAM,MAAM,SAAS,SAAS,CAAC;;EAE7B,IAAI,IAAI,GAAG;IACT,OAAO,CAAC,inLAAinL,CAAC,CAAC;GAC5nL;EACD,WAAW,GAAG,GAAG;IACf,OAAO,SAAS,CAAC;GAClB;;EAED,IAAI,QAAQ,GAAG;IACb,OAAO,cAAc,CAAC;GACvB;;EAED,IAAI,WAAW,GAAG;IAChB,OAAO,cAAc,CAAC;GACvB;;EAED,WAAW,GAAG;IACZ,KAAK,CAAC,MAAM,CAAC,CAAC;GACf;;EAED,iBAAiB,GAAG;IAClB,KAAK,CAAC,iBAAiB,EAAE,CAAC;;IAE1B,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;;IAEpC,IAAI,CAAC,UAAU,EAAE;MACf,OAAO,CAAC,IAAI;QACV,8DAA8D;OAC/D,CAAC;KACH,MAAM,IAAI,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;MACjE,OAAO,CAAC,IAAI;QACV,8DAA8D;OAC/D,CAAC;KACH,MAAM;MACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;KACrC;GACF;;EAED,oBAAoB,GAAG,EAAE;CAC1B;;AAED,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;;;;"}
\ No newline at end of file
diff --git a/elements/pfe-cta/pfe-cta.min.css b/elements/pfe-cta/pfe-cta.min.css
new file mode 100644
index 0000000000..70bfe94952
--- /dev/null
+++ b/elements/pfe-cta/pfe-cta.min.css
@@ -0,0 +1 @@
+:host{--pfe-cta--main:var(--pfe-theme--color--ui-link, #06c);--pfe-cta--main--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-cta--main--focus:var(--pfe-theme--color--ui-link--focus, #003366);--pfe-cta--main--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-cta--aux:transparent;--pfe-cta--aux--hover:transparent;display:inline-block;font-weight:700}:host ::slotted(a){line-height:inherit;color:var(--pfe-cta--main);-webkit-transition:all cubic-bezier(.465,.183,.153,.946);transition:all cubic-bezier(.465,.183,.153,.946);-webkit-transition:all var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:all var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946))}:host ::slotted(a)::after{display:block;margin-left:calc(1rem * .25);margin-left:calc(var(--pfe-theme--content-spacer,1rem) * .25);vertical-align:middle;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);border-width:.313em .313em 0;border-color:transparent;border-top-color:var(--pfe-cta--main);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);display:inline-block;content:""}:host ::slotted(a:hover){color:var(--pfe-cta--main--hover)}:host ::slotted(a:hover)::after{border-top-color:var(--pfe-cta--main--hover)}:host ::slotted(a:focus){color:var(--pfe-cta--main--focus)}:host ::slotted(a:focus)::after{border-top-color:var(--pfe-cta--main--focus)}:host([priority=primary]){--pfe-cta--main:var(--pfe-theme--color--ui-accent, #fe460d);--pfe-cta--main--hover:var(--pfe-theme--color--ui-accent--hover, #a42701);--pfe-cta--aux:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-accent--text--hover, #fff)}:host([priority=primary]) ::slotted(a){display:inline-block;padding:calc(1rem * .5) calc(1rem * 2);padding:calc(var(--pfe-theme--container-padding,1rem) * .5) calc(var(--pfe-theme--container-padding,1rem) * 2);border-radius:calc(2px * 20);border-radius:calc(var(--pfe-theme--ui--border-radius,2px) * 20);border:1px solid transparent;border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) transparent;text-decoration:none;line-height:1.2;border-color:var(--pfe-cta--main);background:var(--pfe-cta--main);color:var(--pfe-cta--aux);--pfe-broadcasted--color--ui-link:var(--pfe-cta--aux)}:host([priority=primary]) ::slotted(a)::after{display:none}:host([priority=primary]) ::slotted(a:focus),:host([priority=primary]) ::slotted(a:hover){border-color:var(--pfe-cta--main--hover);background:var(--pfe-cta--main--hover);color:var(--pfe-cta--aux--hover);--pfe-broadcasted--color--ui-link--hover:var(--pfe-cta--aux--hover)}:host([priority=secondary]){--pfe-cta--main:var(--pfe-theme--color--ui-base, #0477a4);--pfe-cta--main--hover:var(--pfe-theme--color--ui-base--hover, #022f40);--pfe-cta--aux:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-base--text--hover, #fff)}:host([priority=secondary]) ::slotted(a){display:inline-block;padding:calc(1rem * .5) calc(1rem * 2);padding:calc(var(--pfe-theme--container-padding,1rem) * .5) calc(var(--pfe-theme--container-padding,1rem) * 2);border-radius:calc(2px * 20);border-radius:calc(var(--pfe-theme--ui--border-radius,2px) * 20);border:1px solid var(--pfe-cta--main);border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-cta--main);text-decoration:none;line-height:1.2;border-color:var(--pfe-cta--main);background:var(--pfe-cta--aux);color:var(--pfe-cta--main);--pfe-broadcasted--color--ui-link--hover:var(--pfe-cta--main)}:host([priority=secondary]) ::slotted(a)::after{display:none}:host([priority=secondary]) ::slotted(a:focus),:host([priority=secondary]) ::slotted(a:hover){border-color:var(--pfe-cta--main--hover);background:var(--pfe-cta--main--hover);color:var(--pfe-cta--aux--hover);--pfe-broadcasted--color--ui-link--hover:var(--pfe-cta--aux--hover)}:host([on=dark]){--pfe-cta--main:var(--pfe-theme--color--text--on-dark, #fff);--pfe-cta--main--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-cta--aux:transparent;--pfe-cta--aux--hover:transparent}:host([on=dark][priority=primary]){--pfe-cta--main:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--main--hover:var(--pfe-theme--color--ui-accent--text--hover, #fff);--pfe-cta--aux:var(--pfe-theme--color--ui-accent, #fe460d);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-accent--hover, #a42701)}:host([on=dark][priority=secondary]){--pfe-cta--main:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--main--hover:var(--pfe-theme--color--ui-base--text--hover, #fff);--pfe-cta--aux:transparent;--pfe-cta--aux--hover:var(--pfe-theme--color--ui-base--hover, #022f40)}:host([color=base]),:host([color=base][on=dark]){--pfe-cta--main:var(--pfe-theme--color--ui-base, #0477a4);--pfe-cta--main--hover:var(--pfe-theme--color--ui-base--hover, #022f40);--pfe-cta--aux:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-base--text--hover, #fff)}:host([color=complement]),:host([color=complement][on=dark]){--pfe-cta--main:var(--pfe-theme--color--ui-complement, #464646);--pfe-cta--main--hover:var(--pfe-theme--color--ui-complement--hover, #131313);--pfe-cta--aux:var(--pfe-theme--color--ui-complement--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-complement--text--hover, #fff)}:host([color=accent]),:host([color=accent][on=dark]){--pfe-cta--main:var(--pfe-theme--color--ui-accent, #fe460d);--pfe-cta--main--hover:var(--pfe-theme--color--ui-accent--hover, #a42701);--pfe-cta--aux:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-accent--text--hover, #fff)}
\ No newline at end of file
diff --git a/elements/pfe-cta/pfe-cta.min.js b/elements/pfe-cta/pfe-cta.min.js
new file mode 100644
index 0000000000..55985a089f
--- /dev/null
+++ b/elements/pfe-cta/pfe-cta.min.js
@@ -0,0 +1,25 @@
+import e from"../pfelement/pfelement.min.js";
+/*
+ * @license
+ * 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 a extends e{get html(){return''}static get tag(){return"pfe-cta"}get styleUrl(){return"pfe-cta.scss"}get templateUrl(){return"pfe-cta.html"}constructor(){super(a)}connectedCallback(){super.connectedCallback();const e=this.children[0];e?e&&"a"!==e.tagName.toLowerCase()?console.warn("The first child in the light DOM must be an anchor tag ()"):this.link=this.querySelector("a"):console.warn("The first child in the light DOM must be an anchor tag ()")}disconnectedCallback(){}}e.create(a);export default a;
+//# sourceMappingURL=pfe-cta.min.js.map
diff --git a/elements/pfe-cta/pfe-cta.min.js.map b/elements/pfe-cta/pfe-cta.min.js.map
new file mode 100644
index 0000000000..27ee974fd0
--- /dev/null
+++ b/elements/pfe-cta/pfe-cta.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-cta.min.js","sources":["pfe-cta.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nclass PfeCta extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-cta\";\n }\n\n get styleUrl() {\n return \"pfe-cta.scss\";\n }\n\n get templateUrl() {\n return \"pfe-cta.html\";\n }\n\n constructor() {\n super(PfeCta);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const firstChild = this.children[0];\n\n if (!firstChild) {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else if (firstChild && firstChild.tagName.toLowerCase() !== \"a\") {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else {\n this.link = this.querySelector(\"a\");\n }\n }\n\n disconnectedCallback() {}\n}\n\nPFElement.create(PfeCta);\n\nexport default PfeCta;\n//# sourceMappingURL=pfe-cta.js.map\n"],"names":["PfeCta","PFElement","html","tag","styleUrl","templateUrl","[object Object]","super","connectedCallback","firstChild","this","children","tagName","toLowerCase","console","warn","link","querySelector","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAMA,UAAeC,EAEnBC,WACE,MAAO,onLAETC,iBACE,MAAO,UAGTC,eACE,MAAO,eAGTC,kBACE,MAAO,eAGTC,cACEC,MAAMP,GAGRM,oBACEC,MAAMC,oBAEN,MAAMC,EAAaC,KAAKC,SAAS,GAE5BF,EAIMA,GAAmD,MAArCA,EAAWG,QAAQC,cAC1CC,QAAQC,KACN,gEAGFL,KAAKM,KAAON,KAAKO,cAAc,KAR/BH,QAAQC,KACN,gEAWNT,yBAGFL,EAAUiB,OAAOlB"}
\ No newline at end of file
diff --git a/elements/pfe-cta/pfe-cta.umd.js b/elements/pfe-cta/pfe-cta.umd.js
new file mode 100644
index 0000000000..31bb2641c1
--- /dev/null
+++ b/elements/pfe-cta/pfe-cta.umd.js
@@ -0,0 +1,162 @@
+(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.PfeCta = 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;
+ };
+
+ /*
+ * @license
+ * 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.
+ *
+ */
+
+ var PfeCta = function (_PFElement) {
+ inherits(PfeCta, _PFElement);
+ createClass(PfeCta, [{
+ key: "html",
+ get: function get$$1() {
+ return "";
+ }
+ }, {
+ key: "styleUrl",
+ get: function get$$1() {
+ return "pfe-cta.scss";
+ }
+ }, {
+ key: "templateUrl",
+ get: function get$$1() {
+ return "pfe-cta.html";
+ }
+ }], [{
+ key: "tag",
+ get: function get$$1() {
+ return "pfe-cta";
+ }
+ }]);
+
+ function PfeCta() {
+ classCallCheck(this, PfeCta);
+ return possibleConstructorReturn(this, (PfeCta.__proto__ || Object.getPrototypeOf(PfeCta)).call(this, PfeCta));
+ }
+
+ createClass(PfeCta, [{
+ key: "connectedCallback",
+ value: function connectedCallback() {
+ get(PfeCta.prototype.__proto__ || Object.getPrototypeOf(PfeCta.prototype), "connectedCallback", this).call(this);
+
+ var firstChild = this.children[0];
+
+ if (!firstChild) {
+ console.warn("The first child in the light DOM must be an anchor tag ()");
+ } else if (firstChild && firstChild.tagName.toLowerCase() !== "a") {
+ console.warn("The first child in the light DOM must be an anchor tag ()");
+ } else {
+ this.link = this.querySelector("a");
+ }
+ }
+ }, {
+ key: "disconnectedCallback",
+ value: function disconnectedCallback() {}
+ }]);
+ return PfeCta;
+ }(PFElement);
+
+ PFElement.create(PfeCta);
+
+ return PfeCta;
+
+})));
+//# sourceMappingURL=pfe-cta.umd.js.map
diff --git a/elements/pfe-cta/pfe-cta.umd.js.map b/elements/pfe-cta/pfe-cta.umd.js.map
new file mode 100644
index 0000000000..8952336ae5
--- /dev/null
+++ b/elements/pfe-cta/pfe-cta.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-cta.umd.js","sources":["pfe-cta.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nclass PfeCta extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-cta\";\n }\n\n get styleUrl() {\n return \"pfe-cta.scss\";\n }\n\n get templateUrl() {\n return \"pfe-cta.html\";\n }\n\n constructor() {\n super(PfeCta);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const firstChild = this.children[0];\n\n if (!firstChild) {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else if (firstChild && firstChild.tagName.toLowerCase() !== \"a\") {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else {\n this.link = this.querySelector(\"a\");\n }\n }\n\n disconnectedCallback() {}\n}\n\nPFElement.create(PfeCta);\n\nexport default PfeCta;\n//# sourceMappingURL=pfe-cta.js.map\n"],"names":["PfeCta","firstChild","children","console","warn","tagName","toLowerCase","link","querySelector","PFElement","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEA;;;;;;;;;;;;;;;;;;;;;;;;MAwBMA;;;;6BAEO;EACT;EACD;;;6BAKc;EACb,aAAO,cAAP;EACD;;;6BAEiB;EAChB,aAAO,cAAP;EACD;;;6BAVgB;EACf,aAAO,SAAP;EACD;;;EAUD,oBAAc;EAAA;EAAA,0GACNA,MADM;EAEb;;;;0CAEmB;EAClB;;EAEA,UAAMC,aAAa,KAAKC,QAAL,CAAc,CAAd,CAAnB;;EAEA,UAAI,CAACD,UAAL,EAAiB;EACfE,gBAAQC,IAAR,CACE,8DADF;EAGD,OAJD,MAIO,IAAIH,cAAcA,WAAWI,OAAX,CAAmBC,WAAnB,OAAqC,GAAvD,EAA4D;EACjEH,gBAAQC,IAAR,CACE,8DADF;EAGD,OAJM,MAIA;EACL,aAAKG,IAAL,GAAY,KAAKC,aAAL,CAAmB,GAAnB,CAAZ;EACD;EACF;;;6CAEsB;;;IAvCJC;;EA0CrBA,UAAUC,MAAV,CAAiBV,MAAjB;;;;;;;;"}
\ No newline at end of file
diff --git a/elements/pfe-cta/pfe-cta.umd.min.js b/elements/pfe-cta/pfe-cta.umd.min.js
new file mode 100644
index 0000000000..d354f2e9b3
--- /dev/null
+++ b/elements/pfe-cta/pfe-cta.umd.min.js
@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],t):e.PfeCta=t(e.PFElement)}(this,function(r){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var a=function(){function a(e,t){for(var r=0;r:host{--pfe-cta--main:var(--pfe-theme--color--ui-link, #06c);--pfe-cta--main--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-cta--main--focus:var(--pfe-theme--color--ui-link--focus, #003366);--pfe-cta--main--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-cta--aux:transparent;--pfe-cta--aux--hover:transparent;display:inline-block;font-weight:700}:host ::slotted(a){line-height:inherit;color:var(--pfe-cta--main);-webkit-transition:all cubic-bezier(.465,.183,.153,.946);transition:all cubic-bezier(.465,.183,.153,.946);-webkit-transition:all var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:all var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946))}:host ::slotted(a)::after{display:block;margin-left:calc(1rem * .25);margin-left:calc(var(--pfe-theme--content-spacer,1rem) * .25);vertical-align:middle;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);border-width:.313em .313em 0;border-color:transparent;border-top-color:var(--pfe-cta--main);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);display:inline-block;content:""}:host ::slotted(a:hover){color:var(--pfe-cta--main--hover)}:host ::slotted(a:hover)::after{border-top-color:var(--pfe-cta--main--hover)}:host ::slotted(a:focus){color:var(--pfe-cta--main--focus)}:host ::slotted(a:focus)::after{border-top-color:var(--pfe-cta--main--focus)}:host([priority=primary]){--pfe-cta--main:var(--pfe-theme--color--ui-accent, #fe460d);--pfe-cta--main--hover:var(--pfe-theme--color--ui-accent--hover, #a42701);--pfe-cta--aux:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-accent--text--hover, #fff)}:host([priority=primary]) ::slotted(a){display:inline-block;padding:calc(1rem * .5) calc(1rem * 2);padding:calc(var(--pfe-theme--container-padding,1rem) * .5) calc(var(--pfe-theme--container-padding,1rem) * 2);border-radius:calc(2px * 20);border-radius:calc(var(--pfe-theme--ui--border-radius,2px) * 20);border:1px solid transparent;border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) transparent;text-decoration:none;line-height:1.2;border-color:var(--pfe-cta--main);background:var(--pfe-cta--main);color:var(--pfe-cta--aux);--pfe-broadcasted--color--ui-link:var(--pfe-cta--aux)}:host([priority=primary]) ::slotted(a)::after{display:none}:host([priority=primary]) ::slotted(a:focus),:host([priority=primary]) ::slotted(a:hover){border-color:var(--pfe-cta--main--hover);background:var(--pfe-cta--main--hover);color:var(--pfe-cta--aux--hover);--pfe-broadcasted--color--ui-link--hover:var(--pfe-cta--aux--hover)}:host([priority=secondary]){--pfe-cta--main:var(--pfe-theme--color--ui-base, #0477a4);--pfe-cta--main--hover:var(--pfe-theme--color--ui-base--hover, #022f40);--pfe-cta--aux:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-base--text--hover, #fff)}:host([priority=secondary]) ::slotted(a){display:inline-block;padding:calc(1rem * .5) calc(1rem * 2);padding:calc(var(--pfe-theme--container-padding,1rem) * .5) calc(var(--pfe-theme--container-padding,1rem) * 2);border-radius:calc(2px * 20);border-radius:calc(var(--pfe-theme--ui--border-radius,2px) * 20);border:1px solid var(--pfe-cta--main);border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-cta--main);text-decoration:none;line-height:1.2;border-color:var(--pfe-cta--main);background:var(--pfe-cta--aux);color:var(--pfe-cta--main);--pfe-broadcasted--color--ui-link--hover:var(--pfe-cta--main)}:host([priority=secondary]) ::slotted(a)::after{display:none}:host([priority=secondary]) ::slotted(a:focus),:host([priority=secondary]) ::slotted(a:hover){border-color:var(--pfe-cta--main--hover);background:var(--pfe-cta--main--hover);color:var(--pfe-cta--aux--hover);--pfe-broadcasted--color--ui-link--hover:var(--pfe-cta--aux--hover)}:host([on=dark]){--pfe-cta--main:var(--pfe-theme--color--text--on-dark, #fff);--pfe-cta--main--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-cta--aux:transparent;--pfe-cta--aux--hover:transparent}:host([on=dark][priority=primary]){--pfe-cta--main:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--main--hover:var(--pfe-theme--color--ui-accent--text--hover, #fff);--pfe-cta--aux:var(--pfe-theme--color--ui-accent, #fe460d);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-accent--hover, #a42701)}:host([on=dark][priority=secondary]){--pfe-cta--main:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--main--hover:var(--pfe-theme--color--ui-base--text--hover, #fff);--pfe-cta--aux:transparent;--pfe-cta--aux--hover:var(--pfe-theme--color--ui-base--hover, #022f40)}:host([color=base]),:host([color=base][on=dark]){--pfe-cta--main:var(--pfe-theme--color--ui-base, #0477a4);--pfe-cta--main--hover:var(--pfe-theme--color--ui-base--hover, #022f40);--pfe-cta--aux:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-base--text--hover, #fff)}:host([color=complement]),:host([color=complement][on=dark]){--pfe-cta--main:var(--pfe-theme--color--ui-complement, #464646);--pfe-cta--main--hover:var(--pfe-theme--color--ui-complement--hover, #131313);--pfe-cta--aux:var(--pfe-theme--color--ui-complement--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-complement--text--hover, #fff)}:host([color=accent]),:host([color=accent][on=dark]){--pfe-cta--main:var(--pfe-theme--color--ui-accent, #fe460d);--pfe-cta--main--hover:var(--pfe-theme--color--ui-accent--hover, #a42701);--pfe-cta--aux:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-accent--text--hover, #fff)}'}},{key:"styleUrl",get:function(){return"pfe-cta.scss"}},{key:"templateUrl",get:function(){return"pfe-cta.html"}}],[{key:"tag",get:function(){return"pfe-cta"}}]),a(t,[{key:"connectedCallback",value:function(){(function e(t,r,a){null===t&&(t=Function.prototype);var o=Object.getOwnPropertyDescriptor(t,r);if(void 0===o){var c=Object.getPrototypeOf(t);return null===c?void 0:e(c,r,a)}if("value"in o)return o.value;var i=o.get;return void 0!==i?i.call(a):void 0})(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this);var e=this.children[0];e?e&&"a"!==e.tagName.toLowerCase()?console.warn("The first child in the light DOM must be an anchor tag ()"):this.link=this.querySelector("a"):console.warn("The first child in the light DOM must be an anchor tag ()")}},{key:"disconnectedCallback",value:function(){}}]),t}();return r.create(e),e});
+//# sourceMappingURL=pfe-cta.umd.min.js.map
diff --git a/elements/pfe-cta/pfe-cta.umd.min.js.map b/elements/pfe-cta/pfe-cta.umd.min.js.map
new file mode 100644
index 0000000000..de5a74f97a
--- /dev/null
+++ b/elements/pfe-cta/pfe-cta.umd.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-cta.umd.min.js","sources":["pfe-cta.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nclass PfeCta extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-cta\";\n }\n\n get styleUrl() {\n return \"pfe-cta.scss\";\n }\n\n get templateUrl() {\n return \"pfe-cta.html\";\n }\n\n constructor() {\n super(PfeCta);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const firstChild = this.children[0];\n\n if (!firstChild) {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else if (firstChild && firstChild.tagName.toLowerCase() !== \"a\") {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else {\n this.link = this.querySelector(\"a\");\n }\n }\n\n disconnectedCallback() {}\n}\n\nPFElement.create(PfeCta);\n\nexport default PfeCta;\n//# sourceMappingURL=pfe-cta.js.map\n"],"names":["PfeCta","PFElement","firstChild","this","children","tagName","toLowerCase","warn","link","querySelector","create"],"mappings":"gjBA0BMA,gWAkBIA,uUAlBWC,osLAUV,yDAIA,mDARA,4ZAkBDC,EAAaC,KAAKC,SAAS,GAE5BF,EAIMA,GAAmD,MAArCA,EAAWG,QAAQC,sBAClCC,KACN,qEAGGC,KAAOL,KAAKM,cAAc,aARvBF,KACN,gIAcRN,EAAUS,OAAOV"}
\ No newline at end of file
diff --git a/elements/pfe-datetime/package.json b/elements/pfe-datetime/package.json
index 17a3507f1b..a9a90bc3e7 100644
--- a/elements/pfe-datetime/package.json
+++ b/elements/pfe-datetime/package.json
@@ -4,7 +4,7 @@
"className": "PfeDatetime",
"elementName": "pfe-datetime"
},
- "version": "1.0.0-prerelease.10",
+ "version": "1.0.0-prerelease.11",
"publishConfig": {
"access": "public"
},
@@ -24,7 +24,7 @@
},
"license": "MIT",
"dependencies": {
- "@patternfly/pfelement": "^1.0.0-prerelease.10"
+ "@patternfly/pfelement": "^1.0.0-prerelease.11"
},
"generator-pfelement-version": "0.2.8",
"gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421"
diff --git a/elements/pfe-datetime/pfe-datetime.css b/elements/pfe-datetime/pfe-datetime.css
new file mode 100644
index 0000000000..980e5c7df7
--- /dev/null
+++ b/elements/pfe-datetime/pfe-datetime.css
@@ -0,0 +1,5 @@
+:host {
+ display: inline;
+}
+
+/*# sourceMappingURL=pfe-datetime.css.map */
diff --git a/elements/pfe-datetime/pfe-datetime.css.map b/elements/pfe-datetime/pfe-datetime.css.map
new file mode 100644
index 0000000000..04af03d03a
--- /dev/null
+++ b/elements/pfe-datetime/pfe-datetime.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["pfe-datetime.scss","pfe-datetime.css"],"names":[],"mappings":"AAAA;EACI,eAAe;ACCnB","file":"pfe-datetime.css","sourcesContent":[":host {\n display: inline;\n}",":host {\n display: inline;\n}\n"]}
\ No newline at end of file
diff --git a/elements/pfe-datetime/pfe-datetime.css.min.map b/elements/pfe-datetime/pfe-datetime.css.min.map
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/pfe-datetime/pfe-datetime.js b/elements/pfe-datetime/pfe-datetime.js
new file mode 100644
index 0000000000..4cfce48c55
--- /dev/null
+++ b/elements/pfe-datetime/pfe-datetime.js
@@ -0,0 +1,212 @@
+import PFElement from '../pfelement/pfelement.js';
+
+/*
+ * @license
+ * 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 PfeDatetime extends PFElement {
+
+ get html() {
+ return ``;
+ }
+ static get tag() {
+ return "pfe-datetime";
+ }
+
+ get styleUrl() {
+ return "pfe-datetime.scss";
+ }
+
+ get templateUrl() {
+ return "pfe-datetime.html";
+ }
+
+ constructor() {
+ super(PfeDatetime);
+
+ this.type = this.getAttribute("type") || "local";
+ }
+
+ get type() {
+ return this._type;
+ }
+
+ set type(val) {
+ if (this._type === val) {
+ return;
+ }
+
+ this._type = val;
+ }
+
+ get timestamp() {
+ return this._timestamp;
+ }
+
+ set timestamp(val) {
+ if (this._timestamp === val) {
+ return;
+ }
+
+ this._timestamp = val;
+ this.setDate(new Date(val * 1000));
+ }
+
+ get datetime() {
+ return this._datetime;
+ }
+
+ set datetime(val) {
+ if (!Date.parse(val)) {
+ return;
+ }
+
+ if (Date.parse(val) && this._datetime === Date.parse(val)) {
+ return;
+ }
+
+ this.setDate(Date.parse(val));
+ }
+
+ static get observedAttributes() {
+ return ["datetime", "type", "timestamp"];
+ }
+
+ attributeChangedCallback(attr, oldVal, newVal) {
+ this[attr] = newVal;
+ }
+
+ setDate(date) {
+ this._datetime = date;
+ this.shadowRoot.querySelector("span").innerText = window.Intl
+ ? this._getTypeString()
+ : date.toLocaleString();
+ }
+
+ _getOptions() {
+ const props = {
+ weekday: {
+ short: "short",
+ long: "long"
+ },
+ day: {
+ numeric: "numeric",
+ "2-digit": "2-digit"
+ },
+ month: {
+ short: "short",
+ long: "long"
+ },
+ year: {
+ numeric: "numeric",
+ "2-digit": "2-digit"
+ },
+ hour: {
+ numeric: "numeric",
+ "2-digit": "2-digit"
+ },
+ minute: {
+ numeric: "numeric",
+ "2-digit": "2-digit"
+ },
+ second: {
+ numeric: "numeric",
+ "2-digit": "2-digit"
+ },
+ timeZoneName: {
+ short: "short",
+ long: "long"
+ }
+ };
+
+ let options = {};
+
+ for (const prop in props) {
+ const value = props[prop][this.getAttribute(prop)];
+ if (value) {
+ options[prop] = value;
+ }
+ }
+
+ return options;
+ }
+
+ _getTypeString() {
+ const options = this._getOptions();
+ const locale = this.getAttribute("locale") || navigator.language;
+ let dt = "";
+ switch (this.type) {
+ case "local":
+ dt = new Intl.DateTimeFormat(locale, options).format(this._datetime);
+ break;
+ case "relative":
+ dt = this._getTimeRelative(this._datetime - Date.now());
+ break;
+ default:
+ dt = this._datetime;
+ }
+ return dt;
+ }
+
+ _getTimeRelative(ms) {
+ const tense = ms > 0 ? "until" : "ago";
+ let str = "just now";
+ // Based off of Github Relative Time
+ // https://github.com/github/time-elements/blob/master/src/relative-time.js
+ const s = Math.round(Math.abs(ms) / 1000);
+ const min = Math.round(s / 60);
+ const h = Math.round(min / 60);
+ const d = Math.round(h / 24);
+ const m = Math.round(d / 30);
+ const y = Math.round(m / 12);
+ if (m >= 18) {
+ str = y + " years";
+ } else if (m >= 12) {
+ str = "a year";
+ } else if (d >= 45) {
+ str = m + " months";
+ } else if (d >= 30) {
+ str = "a month";
+ } else if (h >= 36) {
+ str = d + " days";
+ } else if (h >= 24) {
+ str = "a day";
+ } else if (min >= 90) {
+ str = h + " hours";
+ } else if (min >= 45) {
+ str = "an hour";
+ } else if (s >= 90) {
+ str = min + " minutes";
+ } else if (s >= 45) {
+ str = "a minute";
+ } else if (s >= 10) {
+ str = s + " seconds";
+ }
+ return str !== "just now" ? `${str} ${tense}` : str;
+ }
+}
+
+PFElement.create(PfeDatetime);
+
+export default PfeDatetime;
+//# sourceMappingURL=pfe-datetime.js.map
diff --git a/elements/pfe-datetime/pfe-datetime.js.map b/elements/pfe-datetime/pfe-datetime.js.map
new file mode 100644
index 0000000000..2029b998dd
--- /dev/null
+++ b/elements/pfe-datetime/pfe-datetime.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-datetime.js","sources":["pfe-datetime.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../pfelement/pfelement.js\";\n\nclass PfeDatetime extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-datetime\";\n }\n\n get styleUrl() {\n return \"pfe-datetime.scss\";\n }\n\n get templateUrl() {\n return \"pfe-datetime.html\";\n }\n\n constructor() {\n super(PfeDatetime);\n\n this.type = this.getAttribute(\"type\") || \"local\";\n }\n\n get type() {\n return this._type;\n }\n\n set type(val) {\n if (this._type === val) {\n return;\n }\n\n this._type = val;\n }\n\n get timestamp() {\n return this._timestamp;\n }\n\n set timestamp(val) {\n if (this._timestamp === val) {\n return;\n }\n\n this._timestamp = val;\n this.setDate(new Date(val * 1000));\n }\n\n get datetime() {\n return this._datetime;\n }\n\n set datetime(val) {\n if (!Date.parse(val)) {\n return;\n }\n\n if (Date.parse(val) && this._datetime === Date.parse(val)) {\n return;\n }\n\n this.setDate(Date.parse(val));\n }\n\n static get observedAttributes() {\n return [\"datetime\", \"type\", \"timestamp\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n this[attr] = newVal;\n }\n\n setDate(date) {\n this._datetime = date;\n this.shadowRoot.querySelector(\"span\").innerText = window.Intl\n ? this._getTypeString()\n : date.toLocaleString();\n }\n\n _getOptions() {\n const props = {\n weekday: {\n short: \"short\",\n long: \"long\"\n },\n day: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n month: {\n short: \"short\",\n long: \"long\"\n },\n year: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n hour: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n minute: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n second: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n timeZoneName: {\n short: \"short\",\n long: \"long\"\n }\n };\n\n let options = {};\n\n for (const prop in props) {\n const value = props[prop][this.getAttribute(prop)];\n if (value) {\n options[prop] = value;\n }\n }\n\n return options;\n }\n\n _getTypeString() {\n const options = this._getOptions();\n const locale = this.getAttribute(\"locale\") || navigator.language;\n let dt = \"\";\n switch (this.type) {\n case \"local\":\n dt = new Intl.DateTimeFormat(locale, options).format(this._datetime);\n break;\n case \"relative\":\n dt = this._getTimeRelative(this._datetime - Date.now());\n break;\n default:\n dt = this._datetime;\n }\n return dt;\n }\n\n _getTimeRelative(ms) {\n const tense = ms > 0 ? \"until\" : \"ago\";\n let str = \"just now\";\n // Based off of Github Relative Time\n // https://github.com/github/time-elements/blob/master/src/relative-time.js\n const s = Math.round(Math.abs(ms) / 1000);\n const min = Math.round(s / 60);\n const h = Math.round(min / 60);\n const d = Math.round(h / 24);\n const m = Math.round(d / 30);\n const y = Math.round(m / 12);\n if (m >= 18) {\n str = y + \" years\";\n } else if (m >= 12) {\n str = \"a year\";\n } else if (d >= 45) {\n str = m + \" months\";\n } else if (d >= 30) {\n str = \"a month\";\n } else if (h >= 36) {\n str = d + \" days\";\n } else if (h >= 24) {\n str = \"a day\";\n } else if (min >= 90) {\n str = h + \" hours\";\n } else if (min >= 45) {\n str = \"an hour\";\n } else if (s >= 90) {\n str = min + \" minutes\";\n } else if (s >= 45) {\n str = \"a minute\";\n } else if (s >= 10) {\n str = s + \" seconds\";\n }\n return str !== \"just now\" ? `${str} ${tense}` : str;\n }\n}\n\nPFElement.create(PfeDatetime);\n\nexport default PfeDatetime;\n"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-datetime/pfe-datetime.min.css b/elements/pfe-datetime/pfe-datetime.min.css
new file mode 100644
index 0000000000..15c9d14db0
--- /dev/null
+++ b/elements/pfe-datetime/pfe-datetime.min.css
@@ -0,0 +1 @@
+:host{display:inline}
\ No newline at end of file
diff --git a/elements/pfe-datetime/pfe-datetime.min.js b/elements/pfe-datetime/pfe-datetime.min.js
new file mode 100644
index 0000000000..79401bfa90
--- /dev/null
+++ b/elements/pfe-datetime/pfe-datetime.min.js
@@ -0,0 +1,25 @@
+import t from"../pfelement/pfelement.min.js";
+/*
+ * @license
+ * 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 e extends t{get html(){return""}static get tag(){return"pfe-datetime"}get styleUrl(){return"pfe-datetime.scss"}get templateUrl(){return"pfe-datetime.html"}constructor(){super(e),this.type=this.getAttribute("type")||"local"}get type(){return this._type}set type(t){this._type!==t&&(this._type=t)}get timestamp(){return this._timestamp}set timestamp(t){this._timestamp!==t&&(this._timestamp=t,this.setDate(new Date(1e3*t)))}get datetime(){return this._datetime}set datetime(t){Date.parse(t)&&(Date.parse(t)&&this._datetime===Date.parse(t)||this.setDate(Date.parse(t)))}static get observedAttributes(){return["datetime","type","timestamp"]}attributeChangedCallback(t,e,i){this[t]=i}setDate(t){this._datetime=t,this.shadowRoot.querySelector("span").innerText=window.Intl?this._getTypeString():t.toLocaleString()}_getOptions(){const t={weekday:{short:"short",long:"long"},day:{numeric:"numeric","2-digit":"2-digit"},month:{short:"short",long:"long"},year:{numeric:"numeric","2-digit":"2-digit"},hour:{numeric:"numeric","2-digit":"2-digit"},minute:{numeric:"numeric","2-digit":"2-digit"},second:{numeric:"numeric","2-digit":"2-digit"},timeZoneName:{short:"short",long:"long"}};let e={};for(const i in t){const s=t[i][this.getAttribute(i)];s&&(e[i]=s)}return e}_getTypeString(){const t=this._getOptions(),e=this.getAttribute("locale")||navigator.language;let i="";switch(this.type){case"local":i=new Intl.DateTimeFormat(e,t).format(this._datetime);break;case"relative":i=this._getTimeRelative(this._datetime-Date.now());break;default:i=this._datetime}return i}_getTimeRelative(t){const e=t>0?"until":"ago";let i="just now";const s=Math.round(Math.abs(t)/1e3),a=Math.round(s/60),r=Math.round(a/60),n=Math.round(r/24),o=Math.round(n/30),m=Math.round(o/12);return o>=18?i=m+" years":o>=12?i="a year":n>=45?i=o+" months":n>=30?i="a month":r>=36?i=n+" days":r>=24?i="a day":a>=90?i=r+" hours":a>=45?i="an hour":s>=90?i=a+" minutes":s>=45?i="a minute":s>=10&&(i=s+" seconds"),"just now"!==i?`${i} ${e}`:i}}t.create(e);export default e;
+//# sourceMappingURL=pfe-datetime.min.js.map
diff --git a/elements/pfe-datetime/pfe-datetime.min.js.map b/elements/pfe-datetime/pfe-datetime.min.js.map
new file mode 100644
index 0000000000..c603d58fac
--- /dev/null
+++ b/elements/pfe-datetime/pfe-datetime.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-datetime.min.js","sources":["pfe-datetime.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nclass PfeDatetime extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-datetime\";\n }\n\n get styleUrl() {\n return \"pfe-datetime.scss\";\n }\n\n get templateUrl() {\n return \"pfe-datetime.html\";\n }\n\n constructor() {\n super(PfeDatetime);\n\n this.type = this.getAttribute(\"type\") || \"local\";\n }\n\n get type() {\n return this._type;\n }\n\n set type(val) {\n if (this._type === val) {\n return;\n }\n\n this._type = val;\n }\n\n get timestamp() {\n return this._timestamp;\n }\n\n set timestamp(val) {\n if (this._timestamp === val) {\n return;\n }\n\n this._timestamp = val;\n this.setDate(new Date(val * 1000));\n }\n\n get datetime() {\n return this._datetime;\n }\n\n set datetime(val) {\n if (!Date.parse(val)) {\n return;\n }\n\n if (Date.parse(val) && this._datetime === Date.parse(val)) {\n return;\n }\n\n this.setDate(Date.parse(val));\n }\n\n static get observedAttributes() {\n return [\"datetime\", \"type\", \"timestamp\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n this[attr] = newVal;\n }\n\n setDate(date) {\n this._datetime = date;\n this.shadowRoot.querySelector(\"span\").innerText = window.Intl\n ? this._getTypeString()\n : date.toLocaleString();\n }\n\n _getOptions() {\n const props = {\n weekday: {\n short: \"short\",\n long: \"long\"\n },\n day: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n month: {\n short: \"short\",\n long: \"long\"\n },\n year: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n hour: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n minute: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n second: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n timeZoneName: {\n short: \"short\",\n long: \"long\"\n }\n };\n\n let options = {};\n\n for (const prop in props) {\n const value = props[prop][this.getAttribute(prop)];\n if (value) {\n options[prop] = value;\n }\n }\n\n return options;\n }\n\n _getTypeString() {\n const options = this._getOptions();\n const locale = this.getAttribute(\"locale\") || navigator.language;\n let dt = \"\";\n switch (this.type) {\n case \"local\":\n dt = new Intl.DateTimeFormat(locale, options).format(this._datetime);\n break;\n case \"relative\":\n dt = this._getTimeRelative(this._datetime - Date.now());\n break;\n default:\n dt = this._datetime;\n }\n return dt;\n }\n\n _getTimeRelative(ms) {\n const tense = ms > 0 ? \"until\" : \"ago\";\n let str = \"just now\";\n // Based off of Github Relative Time\n // https://github.com/github/time-elements/blob/master/src/relative-time.js\n const s = Math.round(Math.abs(ms) / 1000);\n const min = Math.round(s / 60);\n const h = Math.round(min / 60);\n const d = Math.round(h / 24);\n const m = Math.round(d / 30);\n const y = Math.round(m / 12);\n if (m >= 18) {\n str = y + \" years\";\n } else if (m >= 12) {\n str = \"a year\";\n } else if (d >= 45) {\n str = m + \" months\";\n } else if (d >= 30) {\n str = \"a month\";\n } else if (h >= 36) {\n str = d + \" days\";\n } else if (h >= 24) {\n str = \"a day\";\n } else if (min >= 90) {\n str = h + \" hours\";\n } else if (min >= 45) {\n str = \"an hour\";\n } else if (s >= 90) {\n str = min + \" minutes\";\n } else if (s >= 45) {\n str = \"a minute\";\n } else if (s >= 10) {\n str = s + \" seconds\";\n }\n return str !== \"just now\" ? `${str} ${tense}` : str;\n }\n}\n\nPFElement.create(PfeDatetime);\n\nexport default PfeDatetime;\n//# sourceMappingURL=pfe-datetime.js.map\n"],"names":["PfeDatetime","PFElement","html","tag","styleUrl","templateUrl","[object Object]","super","this","type","getAttribute","_type","val","timestamp","_timestamp","setDate","Date","datetime","_datetime","parse","observedAttributes","attr","oldVal","newVal","date","shadowRoot","querySelector","innerText","window","Intl","_getTypeString","toLocaleString","props","weekday","short","long","day","numeric","2-digit","month","year","hour","minute","second","timeZoneName","options","prop","value","_getOptions","locale","navigator","language","dt","DateTimeFormat","format","_getTimeRelative","now","ms","tense","str","s","Math","round","abs","min","h","d","m","y","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAMA,UAAoBC,EAExBC,WACE,MAAO,oDAETC,iBACE,MAAO,eAGTC,eACE,MAAO,oBAGTC,kBACE,MAAO,oBAGTC,cACEC,MAAMP,GAENQ,KAAKC,KAAOD,KAAKE,aAAa,SAAW,QAG3CD,WACE,OAAOD,KAAKG,MAGdF,SAASG,GACHJ,KAAKG,QAAUC,IAInBJ,KAAKG,MAAQC,GAGfC,gBACE,OAAOL,KAAKM,WAGdD,cAAcD,GACRJ,KAAKM,aAAeF,IAIxBJ,KAAKM,WAAaF,EAClBJ,KAAKO,QAAQ,IAAIC,KAAW,IAANJ,KAGxBK,eACE,OAAOT,KAAKU,UAGdD,aAAaL,GACNI,KAAKG,MAAMP,KAIZI,KAAKG,MAAMP,IAAQJ,KAAKU,YAAcF,KAAKG,MAAMP,IAIrDJ,KAAKO,QAAQC,KAAKG,MAAMP,KAG1BQ,gCACE,MAAO,CAAC,WAAY,OAAQ,aAG9Bd,yBAAyBe,EAAMC,EAAQC,GACrCf,KAAKa,GAAQE,EAGfjB,QAAQkB,GACNhB,KAAKU,UAAYM,EACjBhB,KAAKiB,WAAWC,cAAc,QAAQC,UAAYC,OAAOC,KACrDrB,KAAKsB,iBACLN,EAAKO,iBAGXzB,cACE,MAAM0B,EAAQ,CACZC,QAAS,CACPC,MAAO,QACPC,KAAM,QAERC,IAAK,CACHC,QAAS,UACTC,UAAW,WAEbC,MAAO,CACLL,MAAO,QACPC,KAAM,QAERK,KAAM,CACJH,QAAS,UACTC,UAAW,WAEbG,KAAM,CACJJ,QAAS,UACTC,UAAW,WAEbI,OAAQ,CACNL,QAAS,UACTC,UAAW,WAEbK,OAAQ,CACNN,QAAS,UACTC,UAAW,WAEbM,aAAc,CACZV,MAAO,QACPC,KAAM,SAIV,IAAIU,EAAU,GAEd,IAAK,MAAMC,KAAQd,EAAO,CACxB,MAAMe,EAAQf,EAAMc,GAAMtC,KAAKE,aAAaoC,IACxCC,IACFF,EAAQC,GAAQC,GAIpB,OAAOF,EAGTvC,iBACE,MAAMuC,EAAUrC,KAAKwC,cACfC,EAASzC,KAAKE,aAAa,WAAawC,UAAUC,SACxD,IAAIC,EAAK,GACT,OAAQ5C,KAAKC,MACX,IAAK,QACH2C,EAAK,IAAIvB,KAAKwB,eAAeJ,EAAQJ,GAASS,OAAO9C,KAAKU,WAC1D,MACF,IAAK,WACHkC,EAAK5C,KAAK+C,iBAAiB/C,KAAKU,UAAYF,KAAKwC,OACjD,MACF,QACEJ,EAAK5C,KAAKU,UAEd,OAAOkC,EAGT9C,iBAAiBmD,GACf,MAAMC,EAAQD,EAAK,EAAI,QAAU,MACjC,IAAIE,EAAM,WAGV,MAAMC,EAAIC,KAAKC,MAAMD,KAAKE,IAAIN,GAAM,KAC9BO,EAAMH,KAAKC,MAAMF,EAAI,IACrBK,EAAIJ,KAAKC,MAAME,EAAM,IACrBE,EAAIL,KAAKC,MAAMG,EAAI,IACnBE,EAAIN,KAAKC,MAAMI,EAAI,IACnBE,EAAIP,KAAKC,MAAMK,EAAI,IAwBzB,OAvBIA,GAAK,GACPR,EAAMS,EAAI,SACDD,GAAK,GACdR,EAAM,SACGO,GAAK,GACdP,EAAMQ,EAAI,UACDD,GAAK,GACdP,EAAM,UACGM,GAAK,GACdN,EAAMO,EAAI,QACDD,GAAK,GACdN,EAAM,QACGK,GAAO,GAChBL,EAAMM,EAAI,SACDD,GAAO,GAChBL,EAAM,UACGC,GAAK,GACdD,EAAMK,EAAM,WACHJ,GAAK,GACdD,EAAM,WACGC,GAAK,KACdD,EAAMC,EAAI,YAEG,aAARD,KAAwBA,KAAOD,IAAUC,GAIpD1D,EAAUoE,OAAOrE"}
\ No newline at end of file
diff --git a/elements/pfe-datetime/pfe-datetime.umd.js b/elements/pfe-datetime/pfe-datetime.umd.js
new file mode 100644
index 0000000000..a98b1c4907
--- /dev/null
+++ b/elements/pfe-datetime/pfe-datetime.umd.js
@@ -0,0 +1,285 @@
+(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.PfeDatetime = 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 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;
+ };
+
+ /*
+ * @license
+ * 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.
+ *
+ */
+
+ var PfeDatetime = function (_PFElement) {
+ inherits(PfeDatetime, _PFElement);
+ createClass(PfeDatetime, [{
+ key: "html",
+ get: function get$$1() {
+ return "";
+ }
+ }, {
+ key: "styleUrl",
+ get: function get$$1() {
+ return "pfe-datetime.scss";
+ }
+ }, {
+ key: "templateUrl",
+ get: function get$$1() {
+ return "pfe-datetime.html";
+ }
+ }], [{
+ key: "tag",
+ get: function get$$1() {
+ return "pfe-datetime";
+ }
+ }]);
+
+ function PfeDatetime() {
+ classCallCheck(this, PfeDatetime);
+
+ var _this = possibleConstructorReturn(this, (PfeDatetime.__proto__ || Object.getPrototypeOf(PfeDatetime)).call(this, PfeDatetime));
+
+ _this.type = _this.getAttribute("type") || "local";
+ return _this;
+ }
+
+ createClass(PfeDatetime, [{
+ key: "attributeChangedCallback",
+ value: function attributeChangedCallback(attr, oldVal, newVal) {
+ this[attr] = newVal;
+ }
+ }, {
+ key: "setDate",
+ value: function setDate(date) {
+ this._datetime = date;
+ this.shadowRoot.querySelector("span").innerText = window.Intl ? this._getTypeString() : date.toLocaleString();
+ }
+ }, {
+ key: "_getOptions",
+ value: function _getOptions() {
+ var props = {
+ weekday: {
+ short: "short",
+ long: "long"
+ },
+ day: {
+ numeric: "numeric",
+ "2-digit": "2-digit"
+ },
+ month: {
+ short: "short",
+ long: "long"
+ },
+ year: {
+ numeric: "numeric",
+ "2-digit": "2-digit"
+ },
+ hour: {
+ numeric: "numeric",
+ "2-digit": "2-digit"
+ },
+ minute: {
+ numeric: "numeric",
+ "2-digit": "2-digit"
+ },
+ second: {
+ numeric: "numeric",
+ "2-digit": "2-digit"
+ },
+ timeZoneName: {
+ short: "short",
+ long: "long"
+ }
+ };
+
+ var options = {};
+
+ for (var prop in props) {
+ var value = props[prop][this.getAttribute(prop)];
+ if (value) {
+ options[prop] = value;
+ }
+ }
+
+ return options;
+ }
+ }, {
+ key: "_getTypeString",
+ value: function _getTypeString() {
+ var options = this._getOptions();
+ var locale = this.getAttribute("locale") || navigator.language;
+ var dt = "";
+ switch (this.type) {
+ case "local":
+ dt = new Intl.DateTimeFormat(locale, options).format(this._datetime);
+ break;
+ case "relative":
+ dt = this._getTimeRelative(this._datetime - Date.now());
+ break;
+ default:
+ dt = this._datetime;
+ }
+ return dt;
+ }
+ }, {
+ key: "_getTimeRelative",
+ value: function _getTimeRelative(ms) {
+ var tense = ms > 0 ? "until" : "ago";
+ var str = "just now";
+ // Based off of Github Relative Time
+ // https://github.com/github/time-elements/blob/master/src/relative-time.js
+ var s = Math.round(Math.abs(ms) / 1000);
+ var min = Math.round(s / 60);
+ var h = Math.round(min / 60);
+ var d = Math.round(h / 24);
+ var m = Math.round(d / 30);
+ var y = Math.round(m / 12);
+ if (m >= 18) {
+ str = y + " years";
+ } else if (m >= 12) {
+ str = "a year";
+ } else if (d >= 45) {
+ str = m + " months";
+ } else if (d >= 30) {
+ str = "a month";
+ } else if (h >= 36) {
+ str = d + " days";
+ } else if (h >= 24) {
+ str = "a day";
+ } else if (min >= 90) {
+ str = h + " hours";
+ } else if (min >= 45) {
+ str = "an hour";
+ } else if (s >= 90) {
+ str = min + " minutes";
+ } else if (s >= 45) {
+ str = "a minute";
+ } else if (s >= 10) {
+ str = s + " seconds";
+ }
+ return str !== "just now" ? str + " " + tense : str;
+ }
+ }, {
+ key: "type",
+ get: function get$$1() {
+ return this._type;
+ },
+ set: function set$$1(val) {
+ if (this._type === val) {
+ return;
+ }
+
+ this._type = val;
+ }
+ }, {
+ key: "timestamp",
+ get: function get$$1() {
+ return this._timestamp;
+ },
+ set: function set$$1(val) {
+ if (this._timestamp === val) {
+ return;
+ }
+
+ this._timestamp = val;
+ this.setDate(new Date(val * 1000));
+ }
+ }, {
+ key: "datetime",
+ get: function get$$1() {
+ return this._datetime;
+ },
+ set: function set$$1(val) {
+ if (!Date.parse(val)) {
+ return;
+ }
+
+ if (Date.parse(val) && this._datetime === Date.parse(val)) {
+ return;
+ }
+
+ this.setDate(Date.parse(val));
+ }
+ }], [{
+ key: "observedAttributes",
+ get: function get$$1() {
+ return ["datetime", "type", "timestamp"];
+ }
+ }]);
+ return PfeDatetime;
+ }(PFElement);
+
+ PFElement.create(PfeDatetime);
+
+ return PfeDatetime;
+
+})));
+//# sourceMappingURL=pfe-datetime.umd.js.map
diff --git a/elements/pfe-datetime/pfe-datetime.umd.js.map b/elements/pfe-datetime/pfe-datetime.umd.js.map
new file mode 100644
index 0000000000..85651ce43d
--- /dev/null
+++ b/elements/pfe-datetime/pfe-datetime.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-datetime.umd.js","sources":["pfe-datetime.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nclass PfeDatetime extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-datetime\";\n }\n\n get styleUrl() {\n return \"pfe-datetime.scss\";\n }\n\n get templateUrl() {\n return \"pfe-datetime.html\";\n }\n\n constructor() {\n super(PfeDatetime);\n\n this.type = this.getAttribute(\"type\") || \"local\";\n }\n\n get type() {\n return this._type;\n }\n\n set type(val) {\n if (this._type === val) {\n return;\n }\n\n this._type = val;\n }\n\n get timestamp() {\n return this._timestamp;\n }\n\n set timestamp(val) {\n if (this._timestamp === val) {\n return;\n }\n\n this._timestamp = val;\n this.setDate(new Date(val * 1000));\n }\n\n get datetime() {\n return this._datetime;\n }\n\n set datetime(val) {\n if (!Date.parse(val)) {\n return;\n }\n\n if (Date.parse(val) && this._datetime === Date.parse(val)) {\n return;\n }\n\n this.setDate(Date.parse(val));\n }\n\n static get observedAttributes() {\n return [\"datetime\", \"type\", \"timestamp\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n this[attr] = newVal;\n }\n\n setDate(date) {\n this._datetime = date;\n this.shadowRoot.querySelector(\"span\").innerText = window.Intl\n ? this._getTypeString()\n : date.toLocaleString();\n }\n\n _getOptions() {\n const props = {\n weekday: {\n short: \"short\",\n long: \"long\"\n },\n day: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n month: {\n short: \"short\",\n long: \"long\"\n },\n year: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n hour: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n minute: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n second: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n timeZoneName: {\n short: \"short\",\n long: \"long\"\n }\n };\n\n let options = {};\n\n for (const prop in props) {\n const value = props[prop][this.getAttribute(prop)];\n if (value) {\n options[prop] = value;\n }\n }\n\n return options;\n }\n\n _getTypeString() {\n const options = this._getOptions();\n const locale = this.getAttribute(\"locale\") || navigator.language;\n let dt = \"\";\n switch (this.type) {\n case \"local\":\n dt = new Intl.DateTimeFormat(locale, options).format(this._datetime);\n break;\n case \"relative\":\n dt = this._getTimeRelative(this._datetime - Date.now());\n break;\n default:\n dt = this._datetime;\n }\n return dt;\n }\n\n _getTimeRelative(ms) {\n const tense = ms > 0 ? \"until\" : \"ago\";\n let str = \"just now\";\n // Based off of Github Relative Time\n // https://github.com/github/time-elements/blob/master/src/relative-time.js\n const s = Math.round(Math.abs(ms) / 1000);\n const min = Math.round(s / 60);\n const h = Math.round(min / 60);\n const d = Math.round(h / 24);\n const m = Math.round(d / 30);\n const y = Math.round(m / 12);\n if (m >= 18) {\n str = y + \" years\";\n } else if (m >= 12) {\n str = \"a year\";\n } else if (d >= 45) {\n str = m + \" months\";\n } else if (d >= 30) {\n str = \"a month\";\n } else if (h >= 36) {\n str = d + \" days\";\n } else if (h >= 24) {\n str = \"a day\";\n } else if (min >= 90) {\n str = h + \" hours\";\n } else if (min >= 45) {\n str = \"an hour\";\n } else if (s >= 90) {\n str = min + \" minutes\";\n } else if (s >= 45) {\n str = \"a minute\";\n } else if (s >= 10) {\n str = s + \" seconds\";\n }\n return str !== \"just now\" ? `${str} ${tense}` : str;\n }\n}\n\nPFElement.create(PfeDatetime);\n\nexport default PfeDatetime;\n//# sourceMappingURL=pfe-datetime.js.map\n"],"names":["PfeDatetime","type","getAttribute","attr","oldVal","newVal","date","_datetime","shadowRoot","querySelector","innerText","window","Intl","_getTypeString","toLocaleString","props","weekday","short","long","day","numeric","month","year","hour","minute","second","timeZoneName","options","prop","value","_getOptions","locale","navigator","language","dt","DateTimeFormat","format","_getTimeRelative","Date","now","ms","tense","str","s","Math","round","abs","min","h","d","m","y","_type","val","_timestamp","setDate","parse","PFElement","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEA;;;;;;;;;;;;;;;;;;;;;;;;MAwBMA;;;;6BAEO;EACT;EACD;;;6BAKc;EACb,aAAO,mBAAP;EACD;;;6BAEiB;EAChB,aAAO,mBAAP;EACD;;;6BAVgB;EACf,aAAO,cAAP;EACD;;;EAUD,yBAAc;EAAA;;EAAA,yHACNA,WADM;;EAGZ,UAAKC,IAAL,GAAY,MAAKC,YAAL,CAAkB,MAAlB,KAA6B,OAAzC;EAHY;EAIb;;;;+CA+CwBC,MAAMC,QAAQC,QAAQ;EAC7C,WAAKF,IAAL,IAAaE,MAAb;EACD;;;8BAEOC,MAAM;EACZ,WAAKC,SAAL,GAAiBD,IAAjB;EACA,WAAKE,UAAL,CAAgBC,aAAhB,CAA8B,MAA9B,EAAsCC,SAAtC,GAAkDC,OAAOC,IAAP,GAC9C,KAAKC,cAAL,EAD8C,GAE9CP,KAAKQ,cAAL,EAFJ;EAGD;;;oCAEa;EACZ,UAAMC,QAAQ;EACZC,iBAAS;EACPC,iBAAO,OADA;EAEPC,gBAAM;EAFC,SADG;EAKZC,aAAK;EACHC,mBAAS,SADN;EAEH,qBAAW;EAFR,SALO;EASZC,eAAO;EACLJ,iBAAO,OADF;EAELC,gBAAM;EAFD,SATK;EAaZI,cAAM;EACJF,mBAAS,SADL;EAEJ,qBAAW;EAFP,SAbM;EAiBZG,cAAM;EACJH,mBAAS,SADL;EAEJ,qBAAW;EAFP,SAjBM;EAqBZI,gBAAQ;EACNJ,mBAAS,SADH;EAEN,qBAAW;EAFL,SArBI;EAyBZK,gBAAQ;EACNL,mBAAS,SADH;EAEN,qBAAW;EAFL,SAzBI;EA6BZM,sBAAc;EACZT,iBAAO,OADK;EAEZC,gBAAM;EAFM;EA7BF,OAAd;;EAmCA,UAAIS,UAAU,EAAd;;EAEA,WAAK,IAAMC,IAAX,IAAmBb,KAAnB,EAA0B;EACxB,YAAMc,QAAQd,MAAMa,IAAN,EAAY,KAAK1B,YAAL,CAAkB0B,IAAlB,CAAZ,CAAd;EACA,YAAIC,KAAJ,EAAW;EACTF,kBAAQC,IAAR,IAAgBC,KAAhB;EACD;EACF;;EAED,aAAOF,OAAP;EACD;;;uCAEgB;EACf,UAAMA,UAAU,KAAKG,WAAL,EAAhB;EACA,UAAMC,SAAS,KAAK7B,YAAL,CAAkB,QAAlB,KAA+B8B,UAAUC,QAAxD;EACA,UAAIC,KAAK,EAAT;EACA,cAAQ,KAAKjC,IAAb;EACE,aAAK,OAAL;EACEiC,eAAK,IAAItB,KAAKuB,cAAT,CAAwBJ,MAAxB,EAAgCJ,OAAhC,EAAyCS,MAAzC,CAAgD,KAAK7B,SAArD,CAAL;EACA;EACF,aAAK,UAAL;EACE2B,eAAK,KAAKG,gBAAL,CAAsB,KAAK9B,SAAL,GAAiB+B,KAAKC,GAAL,EAAvC,CAAL;EACA;EACF;EACEL,eAAK,KAAK3B,SAAV;EARJ;EAUA,aAAO2B,EAAP;EACD;;;uCAEgBM,IAAI;EACnB,UAAMC,QAAQD,KAAK,CAAL,GAAS,OAAT,GAAmB,KAAjC;EACA,UAAIE,MAAM,UAAV;EACA;EACA;EACA,UAAMC,IAAIC,KAAKC,KAAL,CAAWD,KAAKE,GAAL,CAASN,EAAT,IAAe,IAA1B,CAAV;EACA,UAAMO,MAAMH,KAAKC,KAAL,CAAWF,IAAI,EAAf,CAAZ;EACA,UAAMK,IAAIJ,KAAKC,KAAL,CAAWE,MAAM,EAAjB,CAAV;EACA,UAAME,IAAIL,KAAKC,KAAL,CAAWG,IAAI,EAAf,CAAV;EACA,UAAME,IAAIN,KAAKC,KAAL,CAAWI,IAAI,EAAf,CAAV;EACA,UAAME,IAAIP,KAAKC,KAAL,CAAWK,IAAI,EAAf,CAAV;EACA,UAAIA,KAAK,EAAT,EAAa;EACXR,cAAMS,IAAI,QAAV;EACD,OAFD,MAEO,IAAID,KAAK,EAAT,EAAa;EAClBR,cAAM,QAAN;EACD,OAFM,MAEA,IAAIO,KAAK,EAAT,EAAa;EAClBP,cAAMQ,IAAI,SAAV;EACD,OAFM,MAEA,IAAID,KAAK,EAAT,EAAa;EAClBP,cAAM,SAAN;EACD,OAFM,MAEA,IAAIM,KAAK,EAAT,EAAa;EAClBN,cAAMO,IAAI,OAAV;EACD,OAFM,MAEA,IAAID,KAAK,EAAT,EAAa;EAClBN,cAAM,OAAN;EACD,OAFM,MAEA,IAAIK,OAAO,EAAX,EAAe;EACpBL,cAAMM,IAAI,QAAV;EACD,OAFM,MAEA,IAAID,OAAO,EAAX,EAAe;EACpBL,cAAM,SAAN;EACD,OAFM,MAEA,IAAIC,KAAK,EAAT,EAAa;EAClBD,cAAMK,MAAM,UAAZ;EACD,OAFM,MAEA,IAAIJ,KAAK,EAAT,EAAa;EAClBD,cAAM,UAAN;EACD,OAFM,MAEA,IAAIC,KAAK,EAAT,EAAa;EAClBD,cAAMC,IAAI,UAAV;EACD;EACD,aAAOD,QAAQ,UAAR,GAAwBA,GAAxB,SAA+BD,KAA/B,GAAyCC,GAAhD;EACD;;;6BA5JU;EACT,aAAO,KAAKU,KAAZ;EACD;2BAEQC,KAAK;EACZ,UAAI,KAAKD,KAAL,KAAeC,GAAnB,EAAwB;EACtB;EACD;;EAED,WAAKD,KAAL,GAAaC,GAAb;EACD;;;6BAEe;EACd,aAAO,KAAKC,UAAZ;EACD;2BAEaD,KAAK;EACjB,UAAI,KAAKC,UAAL,KAAoBD,GAAxB,EAA6B;EAC3B;EACD;;EAED,WAAKC,UAAL,GAAkBD,GAAlB;EACA,WAAKE,OAAL,CAAa,IAAIjB,IAAJ,CAASe,MAAM,IAAf,CAAb;EACD;;;6BAEc;EACb,aAAO,KAAK9C,SAAZ;EACD;2BAEY8C,KAAK;EAChB,UAAI,CAACf,KAAKkB,KAAL,CAAWH,GAAX,CAAL,EAAsB;EACpB;EACD;;EAED,UAAIf,KAAKkB,KAAL,CAAWH,GAAX,KAAmB,KAAK9C,SAAL,KAAmB+B,KAAKkB,KAAL,CAAWH,GAAX,CAA1C,EAA2D;EACzD;EACD;;EAED,WAAKE,OAAL,CAAajB,KAAKkB,KAAL,CAAWH,GAAX,CAAb;EACD;;;6BAE+B;EAC9B,aAAO,CAAC,UAAD,EAAa,MAAb,EAAqB,WAArB,CAAP;EACD;;;IAlEuBI;;EAsL1BA,UAAUC,MAAV,CAAiB1D,WAAjB;;;;;;;;"}
\ No newline at end of file
diff --git a/elements/pfe-datetime/pfe-datetime.umd.min.js b/elements/pfe-datetime/pfe-datetime.umd.min.js
new file mode 100644
index 0000000000..500562c26f
--- /dev/null
+++ b/elements/pfe-datetime/pfe-datetime.umd.min.js
@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],e):t.PfeDatetime=e(t.PFElement)}(this,function(n){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;var i=function(){function i(t,e){for(var n=0;n:host{display:inline}"}},{key:"styleUrl",get:function(){return"pfe-datetime.scss"}},{key:"templateUrl",get:function(){return"pfe-datetime.html"}}],[{key:"tag",get:function(){return"pfe-datetime"}}]),i(e,[{key:"attributeChangedCallback",value:function(t,e,n){this[t]=n}},{key:"setDate",value:function(t){this._datetime=t,this.shadowRoot.querySelector("span").innerText=window.Intl?this._getTypeString():t.toLocaleString()}},{key:"_getOptions",value:function(){var t={weekday:{short:"short",long:"long"},day:{numeric:"numeric","2-digit":"2-digit"},month:{short:"short",long:"long"},year:{numeric:"numeric","2-digit":"2-digit"},hour:{numeric:"numeric","2-digit":"2-digit"},minute:{numeric:"numeric","2-digit":"2-digit"},second:{numeric:"numeric","2-digit":"2-digit"},timeZoneName:{short:"short",long:"long"}},e={};for(var n in t){var i=t[n][this.getAttribute(n)];i&&(e[n]=i)}return e}},{key:"_getTypeString",value:function(){var t=this._getOptions(),e=this.getAttribute("locale")||navigator.language,n="";switch(this.type){case"local":n=new Intl.DateTimeFormat(e,t).format(this._datetime);break;case"relative":n=this._getTimeRelative(this._datetime-Date.now());break;default:n=this._datetime}return n}},{key:"_getTimeRelative",value:function(t){var e=0:host{display:inline}`;\n }\n static get tag() {\n return \"pfe-datetime\";\n }\n\n get styleUrl() {\n return \"pfe-datetime.scss\";\n }\n\n get templateUrl() {\n return \"pfe-datetime.html\";\n }\n\n constructor() {\n super(PfeDatetime);\n\n this.type = this.getAttribute(\"type\") || \"local\";\n }\n\n get type() {\n return this._type;\n }\n\n set type(val) {\n if (this._type === val) {\n return;\n }\n\n this._type = val;\n }\n\n get timestamp() {\n return this._timestamp;\n }\n\n set timestamp(val) {\n if (this._timestamp === val) {\n return;\n }\n\n this._timestamp = val;\n this.setDate(new Date(val * 1000));\n }\n\n get datetime() {\n return this._datetime;\n }\n\n set datetime(val) {\n if (!Date.parse(val)) {\n return;\n }\n\n if (Date.parse(val) && this._datetime === Date.parse(val)) {\n return;\n }\n\n this.setDate(Date.parse(val));\n }\n\n static get observedAttributes() {\n return [\"datetime\", \"type\", \"timestamp\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n this[attr] = newVal;\n }\n\n setDate(date) {\n this._datetime = date;\n this.shadowRoot.querySelector(\"span\").innerText = window.Intl\n ? this._getTypeString()\n : date.toLocaleString();\n }\n\n _getOptions() {\n const props = {\n weekday: {\n short: \"short\",\n long: \"long\"\n },\n day: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n month: {\n short: \"short\",\n long: \"long\"\n },\n year: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n hour: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n minute: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n second: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n timeZoneName: {\n short: \"short\",\n long: \"long\"\n }\n };\n\n let options = {};\n\n for (const prop in props) {\n const value = props[prop][this.getAttribute(prop)];\n if (value) {\n options[prop] = value;\n }\n }\n\n return options;\n }\n\n _getTypeString() {\n const options = this._getOptions();\n const locale = this.getAttribute(\"locale\") || navigator.language;\n let dt = \"\";\n switch (this.type) {\n case \"local\":\n dt = new Intl.DateTimeFormat(locale, options).format(this._datetime);\n break;\n case \"relative\":\n dt = this._getTimeRelative(this._datetime - Date.now());\n break;\n default:\n dt = this._datetime;\n }\n return dt;\n }\n\n _getTimeRelative(ms) {\n const tense = ms > 0 ? \"until\" : \"ago\";\n let str = \"just now\";\n // Based off of Github Relative Time\n // https://github.com/github/time-elements/blob/master/src/relative-time.js\n const s = Math.round(Math.abs(ms) / 1000);\n const min = Math.round(s / 60);\n const h = Math.round(min / 60);\n const d = Math.round(h / 24);\n const m = Math.round(d / 30);\n const y = Math.round(m / 12);\n if (m >= 18) {\n str = y + \" years\";\n } else if (m >= 12) {\n str = \"a year\";\n } else if (d >= 45) {\n str = m + \" months\";\n } else if (d >= 30) {\n str = \"a month\";\n } else if (h >= 36) {\n str = d + \" days\";\n } else if (h >= 24) {\n str = \"a day\";\n } else if (min >= 90) {\n str = h + \" hours\";\n } else if (min >= 45) {\n str = \"an hour\";\n } else if (s >= 90) {\n str = min + \" minutes\";\n } else if (s >= 45) {\n str = \"a minute\";\n } else if (s >= 10) {\n str = s + \" seconds\";\n }\n return str !== \"just now\" ? `${str} ${tense}` : str;\n }\n}\n\nPFElement.create(PfeDatetime);\n\nexport default PfeDatetime;\n//# sourceMappingURL=pfe-datetime.js.map\n"],"names":["PfeDatetime","type","_this","getAttribute","PFElement","attr","oldVal","newVal","date","_datetime","shadowRoot","querySelector","innerText","window","Intl","this","_getTypeString","toLocaleString","props","options","prop","value","_getOptions","locale","navigator","language","dt","DateTimeFormat","format","_getTimeRelative","Date","now","ms","tense","str","s","Math","round","abs","min","h","d","m","y","_type","val","_timestamp","setDate","parse","create"],"mappings":"qjBA0BMA,gWAkBIA,aAEDC,KAAOC,EAAKC,aAAa,SAAW,6UApBnBC,oIAUf,8DAIA,wDARA,uEA8DgBC,EAAMC,EAAQC,QAChCF,GAAQE,kCAGPC,QACDC,UAAYD,OACZE,WAAWC,cAAc,QAAQC,UAAYC,OAAOC,KACrDC,KAAKC,iBACLR,EAAKS,2DAIHC,EAAQ,SACH,OACA,aACD,YAEH,SACM,oBACE,iBAEN,OACE,aACD,aAEF,SACK,oBACE,gBAEP,SACK,oBACE,kBAEL,SACG,oBACE,kBAEL,SACG,oBACE,wBAEC,OACL,aACD,SAINC,EAAU,OAET,IAAMC,KAAQF,EAAO,KAClBG,EAAQH,EAAME,GAAML,KAAKZ,aAAaiB,IACxCC,MACMD,GAAQC,UAIbF,+CAIDA,EAAUJ,KAAKO,cACfC,EAASR,KAAKZ,aAAa,WAAaqB,UAAUC,SACpDC,EAAK,UACDX,KAAKd,UACN,UACE,IAAIa,KAAKa,eAAeJ,EAAQJ,GAASS,OAAOb,KAAKN,qBAEvD,aACEM,KAAKc,iBAAiBd,KAAKN,UAAYqB,KAAKC,uBAG5ChB,KAAKN,iBAEPiB,2CAGQM,OACTC,EAAa,EAALD,EAAS,QAAU,MAC7BE,EAAM,WAGJC,EAAIC,KAAKC,MAAMD,KAAKE,IAAIN,GAAM,KAC9BO,EAAMH,KAAKC,MAAMF,EAAI,IACrBK,EAAIJ,KAAKC,MAAME,EAAM,IACrBE,EAAIL,KAAKC,MAAMG,EAAI,IACnBE,EAAIN,KAAKC,MAAMI,EAAI,IACnBE,EAAIP,KAAKC,MAAMK,EAAI,WAChB,IAALA,IACIC,EAAI,SACI,IAALD,IACH,SACQ,IAALD,IACHC,EAAI,UACI,IAALD,IACH,UACQ,IAALD,IACHC,EAAI,QACI,IAALD,IACH,QACU,IAAPD,IACHC,EAAI,SACM,IAAPD,IACH,UACQ,IAALJ,IACHI,EAAM,WACE,IAALJ,IACH,WACQ,IAALA,MACHA,EAAI,YAEG,aAARD,EAAwBA,MAAOD,EAAUC,sCA1JzCnB,KAAK6B,oBAGLC,GACH9B,KAAK6B,QAAUC,SAIdD,MAAQC,4CAIN9B,KAAK+B,yBAGAD,GACR9B,KAAK+B,aAAeD,SAInBC,WAAaD,OACbE,QAAQ,IAAIjB,KAAW,IAANe,6CAIf9B,KAAKN,wBAGDoC,GACNf,KAAKkB,MAAMH,KAIZf,KAAKkB,MAAMH,IAAQ9B,KAAKN,YAAcqB,KAAKkB,MAAMH,SAIhDE,QAAQjB,KAAKkB,MAAMH,wDAIjB,CAAC,WAAY,OAAQ,6BAqHhCzC,EAAU6C,OAAOjD"}
\ No newline at end of file
diff --git a/elements/pfe-health-index/package.json b/elements/pfe-health-index/package.json
index 62f57cb3d3..2e1e7f5f0f 100644
--- a/elements/pfe-health-index/package.json
+++ b/elements/pfe-health-index/package.json
@@ -4,7 +4,7 @@
"className": "PfeHealthIndex",
"elementName": "pfe-health-index"
},
- "version": "1.0.0-prerelease.10",
+ "version": "1.0.0-prerelease.11",
"publishConfig": {
"access": "public"
},
@@ -24,8 +24,8 @@
},
"license": "MIT",
"dependencies": {
- "@patternfly/pfe-sass": "^1.0.0-prerelease.10",
- "@patternfly/pfelement": "^1.0.0-prerelease.10"
+ "@patternfly/pfe-sass": "^1.0.0-prerelease.11",
+ "@patternfly/pfelement": "^1.0.0-prerelease.11"
},
"generator-pfelement-version": "0.6.3",
"gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421"
diff --git a/elements/pfe-health-index/pfe-health-index.css b/elements/pfe-health-index/pfe-health-index.css
new file mode 100644
index 0000000000..56db564e97
--- /dev/null
+++ b/elements/pfe-health-index/pfe-health-index.css
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2018 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.
+ */
+/* Palette of Border Colors */
+/* Palette of Feedback Colors */
+:host {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+:host([hidden]) {
+ display: none;
+}
+
+.box-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ border: 1px solid #dfdfdf;
+ border: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf);
+ margin-left: calc(1rem * 0.5);
+ margin-left: calc(var(--pfe-theme--container-spacer, 1rem) * 0.5);
+}
+
+.box-container .box {
+ background: #fff;
+ width: 10px;
+ height: 20px;
+ border-right: 1px solid #dfdfdf;
+ border-right: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf);
+}
+
+.box-container .box:last-child {
+ border-right: 0;
+}
+
+.box-container .box.active.a {
+ background-color: #3f9c35;
+}
+
+.box-container .box.active.b {
+ background-color: #92d400;
+}
+
+.box-container .box.active.c {
+ background-color: #efaa00;
+}
+
+.box-container .box.active.d {
+ background-color: #ec7a08;
+}
+
+.box-container .box.active.e {
+ background-color: #cc0000;
+}
+
+.box-container .box.active.f {
+ background-color: #a30000;
+}
+
+/*# sourceMappingURL=pfe-health-index.css.map */
diff --git a/elements/pfe-health-index/pfe-health-index.css.map b/elements/pfe-health-index/pfe-health-index.css.map
new file mode 100644
index 0000000000..44f325bfa9
--- /dev/null
+++ b/elements/pfe-health-index/pfe-health-index.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-health-index.css","../../pfe-sass/variables/_colors.scss","pfe-health-index.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACjHA;EACE,2BAAoB;EAApB,4BAAoB;EAApB,2BAAoB;EAApB,oBAAoB;EACpB,yBAAmB;EAAnB,2BAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AFErB;;AECA;EACE,aAAa;AFEf;;AECA;EACE,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,yBAA+C;EAA/C,mEAA+C;EAC/C,6BAAqD;EAArD,iEAAqD;AFEvD;;AELA;EAMI,gBA5BuB;EA6BvB,WAhCoB;EAiCpB,YAhCuC;EAiCvC,+BAAqD;EAArD,yEAAqD;AFGzD;;AEZA;EAYM,eAAe;AFIrB;;AEhBA;EAiBQ,yBArCqB;AFwC7B;;AEpBA;EAqBQ,yBAxCqB;AF2C7B;;AExBA;EAyBQ,yBA3CqB;AF8C7B;;AE5BA;EA6BQ,yBA9CqB;AFiD7B;;AEhCA;EAiCQ,yBAjDqB;AFoD7B;;AEpCA;EAqCQ,yBApDqB;AFuD7B","file":"pfe-health-index.css","sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n//\n// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: inline-flex;\n align-items: center;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.box-container {\n display: flex;\n border: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf);\n margin-left: calc(var(--pfe-theme--container-spacer, 1rem) * 0.5);\n}\n\n.box-container .box {\n background: #fff;\n width: 10px;\n height: 20px;\n border-right: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf);\n}\n\n.box-container .box:last-child {\n border-right: 0;\n}\n\n.box-container .box.active.a {\n background-color: #3f9c35;\n}\n\n.box-container .box.active.b {\n background-color: #92d400;\n}\n\n.box-container .box.active.c {\n background-color: #efaa00;\n}\n\n.box-container .box.active.d {\n background-color: #ec7a08;\n}\n\n.box-container .box.active.e {\n background-color: #cc0000;\n}\n\n.box-container .box.active.f {\n background-color: #a30000;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n/// ===========================================================================\n/// Component Specific SASS Vars\n/// ===========================================================================\n\n$pfe-health--width: 10px;\n$pfe-health--height: $pfe-health--width * 2;\n\n$pfe-health--color-bg: #fff;\n\n$pfe-health--color-a: #3f9c35;\n$pfe-health--color-b: #92d400;\n$pfe-health--color-c: #efaa00;\n$pfe-health--color-d: #ec7a08;\n$pfe-health--color-e: #cc0000;\n$pfe-health--color-f: #a30000;\n\n/// ===========================================================================\n/// WHATEVER\n/// ===========================================================================\n\n:host {\n display: inline-flex;\n align-items: center;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.box-container {\n display: flex;\n border: 1px solid #{pfe-color(surface--border)};\n margin-left: calc(#{pfe-var(container-spacer)} * 0.5);\n\n .box {\n background: $pfe-health--color-bg;\n width: $pfe-health--width;\n height: $pfe-health--height;\n border-right: 1px solid #{pfe-color(surface--border)};\n\n &:last-child {\n border-right: 0;\n }\n\n &.active {\n &.a {\n background-color: $pfe-health--color-a;\n }\n\n &.b {\n background-color: $pfe-health--color-b;\n }\n\n &.c {\n background-color: $pfe-health--color-c;\n }\n\n &.d {\n background-color: $pfe-health--color-d;\n }\n\n &.e {\n background-color: $pfe-health--color-e;\n }\n\n &.f {\n background-color: $pfe-health--color-f;\n }\n }\n }\n}\n"]}
\ No newline at end of file
diff --git a/elements/pfe-health-index/pfe-health-index.css.min.map b/elements/pfe-health-index/pfe-health-index.css.min.map
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/elements/pfe-health-index/pfe-health-index.js b/elements/pfe-health-index/pfe-health-index.js
new file mode 100644
index 0000000000..8742df3ea1
--- /dev/null
+++ b/elements/pfe-health-index/pfe-health-index.js
@@ -0,0 +1,91 @@
+import PFElement from '../pfelement/pfelement.js';
+
+/*
+ * @license
+ * 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 PfeHealthIndex extends PFElement {
+
+ get html() {
+ return `
+