\n
'}static get tag(){return"pfe-accordion-panel"}get styleUrl(){return"pfe-accordion-panel.scss"}get templateUrl(){return"pfe-accordion-panel.html"}static get properties(){return{_id:{type:String,default:e=>`${e.randomId.replace("pfe",e.tag)}`,prefix:!1},role:{type:String,default:"region",prefix:!1},oldPfeId:{type:String,alias:"_id",attr:"pfe-id"},expanded:{title:"Expanded",type:Boolean,default:!1},ariaLabelledby:{type:String,prefix:!1}}}constructor(){super(o)}connectedCallback(){super.connectedCallback()}}e.create(t),e.create(o),e.create(r);export default r;
+//# sourceMappingURL=pfe-accordion.min.js.map
diff --git a/elements/pfe-accordion/dist/pfe-accordion.min.js.map b/elements/pfe-accordion/dist/pfe-accordion.min.js.map
new file mode 100644
index 0000000000..7f6c15393d
--- /dev/null
+++ b/elements/pfe-accordion/dist/pfe-accordion.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-accordion.min.js","sources":["../_temp/polyfills--pfe-accordion.js","../_temp/pfe-accordion.js"],"sourcesContent":["// @POLYFILL Array.prototype.findIndex\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","/*!\n * PatternFly Elements: PfeAccordion 1.3.0\n * @license\n * Copyright 2021 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// Import polyfills: findIndex\nimport \"./polyfills--pfe-accordion.js\";\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeAccordion extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.3.0\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\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 static get properties() {\n return {\n _id: {\n type: String,\n default: el => `${el.randomId.replace(\"pfe\", el.tag)}`,\n prefix: false\n },\n role: {\n type: String,\n default: \"region\",\n prefix: false\n },\n // @TODO Deprecated pfe-id in 1.0\n oldPfeId: {\n type: String,\n alias: \"_id\",\n attr: \"pfe-id\"\n },\n expanded: {\n title: \"Expanded\",\n type: Boolean,\n default: false\n },\n ariaLabelledby: {\n type: String,\n prefix: false\n }\n };\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport { PfeAccordion as default };\n"],"names":["Array","prototype","findIndex","Object","defineProperty","value","predicate","this","TypeError","o","len","length","thisArg","arguments","k","kValue","call","PfeAccordion","PFElement","version","html","tag","meta","title","description","styleUrl","templateUrl","properties","disclosure","type","String","values","observer","cascade","oldDisclosure","alias","attr","role","default","slots","namedSlot","items","oneOf","$ref","events","change","PfeType","PfeTypes","Container","contentTemplate","[object Object]","super","_linkPanels","bind","_observer","MutationObserver","connectedCallback","addEventListener","_changeHandler","_keydownHandler","Promise","all","customElements","whenDefined","PfeAccordionHeader","PfeAccordionPanel","then","hasLightDOM","observe","childList","disconnectedCallback","removeEventListener","disconnect","index","headers","_allHeaders","panels","_allPanels","header","panel","expanded","_collapseHeader","_collapsePanel","_expandHeader","_expandPanel","forEach","oldVal","newVal","setAttribute","_panelForHeader","ariaControls","_id","ariaLabelledby","evt","classList","contains","target","nextElementSibling","detail","console","error","height","getBoundingClientRect","_animate","start","end","previousElementSibling","add","style","requestAnimationFrame","_transitionEndHandler","currentHeader","_isHeader","newHeader","key","_nextHeader","_previousHeader","_firstHeader","_lastHeader","shadowRoot","querySelector","focus","remove","querySelectorAll","next","tagName","toLowerCase","newIndex","document","activeElement","element","el","randomId","replace","prefix","oldPfeId","Boolean","button","_init","_clickHandler","window","ShadyCSS","child","children","isHeaderTag","wrapperTag","createElement","innerText","appendChild","textContent","trim","warn","event","emitEvent","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-accordion/dist/pfe-accordion.umd.js b/elements/pfe-accordion/dist/pfe-accordion.umd.js
new file mode 100644
index 0000000000..75e069433e
--- /dev/null
+++ b/elements/pfe-accordion/dist/pfe-accordion.umd.js
@@ -0,0 +1,901 @@
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../../pfelement/dist/pfelement.umd')) :
+ typeof define === 'function' && define.amd ? define(['../../pfelement/dist/pfelement.umd'], factory) :
+ (global = global || self, global.PfeAccordion = factory(global.PFElement));
+}(this, (function (PFElement) { 'use strict';
+
+ PFElement = PFElement && Object.prototype.hasOwnProperty.call(PFElement, 'default') ? PFElement['default'] : PFElement;
+
+ // @POLYFILL Array.prototype.findIndex
+ // 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;
+ }
+ });
+ }
+
+ 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 defineProperty = function (obj, key, value) {
+ if (key in obj) {
+ Object.defineProperty(obj, key, {
+ value: value,
+ enumerable: true,
+ configurable: true,
+ writable: true
+ });
+ } else {
+ obj[key] = value;
+ }
+
+ return obj;
+ };
+
+ 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);
+ }
+ };
+
+ /*!
+ * PatternFly Elements: PfeAccordion 1.3.0
+ * @license
+ * Copyright 2021 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 PfeAccordion = function (_PFElement) {
+ inherits(PfeAccordion, _PFElement);
+ createClass(PfeAccordion, [{
+ key: "html",
+
+
+ // Injected at build-time
+ get: function get() {
+ return "\n\n\n
\n\n
";
+ }
+ }, {
+ key: "styleUrl",
+ get: function get() {
+ return "pfe-accordion-panel.scss";
+ }
+ }, {
+ key: "templateUrl",
+ get: function get() {
+ return "pfe-accordion-panel.html";
+ }
+ }], [{
+ key: "version",
+
+
+ // Injected at build-time
+ get: function get() {
+ return "1.3.0";
+ }
+ }, {
+ key: "tag",
+ get: function get() {
+ return "pfe-accordion-panel";
+ }
+ }, {
+ key: "properties",
+ get: function get() {
+ return {
+ _id: {
+ type: String,
+ default: function _default(el) {
+ return "" + el.randomId.replace("pfe", el.tag);
+ },
+ prefix: false
+ },
+ role: {
+ type: String,
+ default: "region",
+ prefix: false
+ },
+ // @TODO Deprecated pfe-id in 1.0
+ oldPfeId: {
+ type: String,
+ alias: "_id",
+ attr: "pfe-id"
+ },
+ expanded: {
+ title: "Expanded",
+ type: Boolean,
+ default: false
+ },
+ ariaLabelledby: {
+ type: String,
+ prefix: false
+ }
+ };
+ }
+ }]);
+
+ 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);
+ }
+ }]);
+ 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/dist/pfe-accordion.umd.js.map b/elements/pfe-accordion/dist/pfe-accordion.umd.js.map
new file mode 100644
index 0000000000..991359bc13
--- /dev/null
+++ b/elements/pfe-accordion/dist/pfe-accordion.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-accordion.umd.js","sources":["../_temp/polyfills--pfe-accordion.js","../_temp/pfe-accordion.umd.js"],"sourcesContent":["// @POLYFILL Array.prototype.findIndex\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","/*!\n * PatternFly Elements: PfeAccordion 1.3.0\n * @license\n * Copyright 2021 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// Import polyfills: findIndex\nimport \"./polyfills--pfe-accordion.js\";\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\n\nclass PfeAccordion extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.3.0\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\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 static get properties() {\n return {\n _id: {\n type: String,\n default: el => `${el.randomId.replace(\"pfe\", el.tag)}`,\n prefix: false\n },\n role: {\n type: String,\n default: \"region\",\n prefix: false\n },\n // @TODO Deprecated pfe-id in 1.0\n oldPfeId: {\n type: String,\n alias: \"_id\",\n attr: \"pfe-id\"\n },\n expanded: {\n title: \"Expanded\",\n type: Boolean,\n default: false\n },\n ariaLabelledby: {\n type: String,\n prefix: false\n }\n };\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport { PfeAccordion as default };\n"],"names":["Array","prototype","findIndex","Object","defineProperty","value","predicate","TypeError","o","len","length","thisArg","arguments","k","kValue","call","PfeAccordion","title","description","disclosure","type","String","values","observer","cascade","oldDisclosure","alias","attr","role","default","namedSlot","items","oneOf","$ref","change","tag","PFElement","PfeTypes","Container","PfeType","_linkPanels","bind","_observer","MutationObserver","addEventListener","events","_changeHandler","_keydownHandler","Promise","all","customElements","whenDefined","PfeAccordionHeader","PfeAccordionPanel","then","hasLightDOM","observe","childList","removeEventListener","disconnect","index","headers","_allHeaders","panels","_allPanels","header","panel","expanded","_expandHeader","_expandPanel","_collapseHeader","_collapsePanel","forEach","oldVal","newVal","setAttribute","_panelForHeader","ariaControls","_id","ariaLabelledby","evt","classList","contains","target","nextElementSibling","detail","console","error","height","getBoundingClientRect","_animate","start","end","previousElementSibling","add","style","requestAnimationFrame","_transitionEndHandler","currentHeader","_isHeader","newHeader","key","_nextHeader","_previousHeader","_firstHeader","_lastHeader","shadowRoot","querySelector","focus","remove","querySelectorAll","next","tagName","toLowerCase","newIndex","document","activeElement","element","el","randomId","replace","prefix","oldPfeId","Boolean","button","_init","_clickHandler","window","ShadyCSS","child","children","isHeaderTag","wrapperTag","createElement","innerText","appendChild","textContent","trim","warn","event","emitEvent","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-accordion/dist/pfe-accordion.umd.min.js b/elements/pfe-accordion/dist/pfe-accordion.umd.min.js
new file mode 100644
index 0000000000..ecacbfe83c
--- /dev/null
+++ b/elements/pfe-accordion/dist/pfe-accordion.umd.min.js
@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],t):(e=e||self).PfeAccordion=t(e.PFElement)}(this,function(e){"use strict";e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e,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 o=arguments[1],a=0;a\n
\n\n
'}},{key:"styleUrl",get:function(){return"pfe-accordion-panel.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-panel.html"}}],[{key:"version",get:function(){return"1.3.0"}},{key:"tag",get:function(){return"pfe-accordion-panel"}},{key:"properties",get:function(){return{_id:{type:String,default:function(e){return""+e.randomId.replace("pfe",e.tag)},prefix:!1},role:{type:String,default:"region",prefix:!1},oldPfeId:{type:String,alias:"_id",attr:"pfe-id"},expanded:{title:"Expanded",type:Boolean,default:!1},ariaLabelledby:{type:String,prefix:!1}}}}]),r(h,[{key:"connectedCallback",value:function(){a(h.prototype.__proto__||Object.getPrototypeOf(h.prototype),"connectedCallback",this).call(this)}}]),h);function h(){return t(this,h),c(this,(h.__proto__||Object.getPrototypeOf(h)).call(this,h))}return e.create(l),e.create(f),e.create(d),d});
+//# sourceMappingURL=pfe-accordion.umd.min.js.map
diff --git a/elements/pfe-accordion/dist/pfe-accordion.umd.min.js.map b/elements/pfe-accordion/dist/pfe-accordion.umd.min.js.map
new file mode 100644
index 0000000000..5eb15472e0
--- /dev/null
+++ b/elements/pfe-accordion/dist/pfe-accordion.umd.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-accordion.umd.min.js","sources":["../_temp/polyfills--pfe-accordion.js","../_temp/pfe-accordion.umd.js"],"sourcesContent":["// @POLYFILL Array.prototype.findIndex\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","/*!\n * PatternFly Elements: PfeAccordion 1.3.0\n * @license\n * Copyright 2021 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// Import polyfills: findIndex\nimport \"./polyfills--pfe-accordion.js\";\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\n\nclass PfeAccordion extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.3.0\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\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 static get properties() {\n return {\n _id: {\n type: String,\n default: el => `${el.randomId.replace(\"pfe\", el.tag)}`,\n prefix: false\n },\n role: {\n type: String,\n default: \"region\",\n prefix: false\n },\n // @TODO Deprecated pfe-id in 1.0\n oldPfeId: {\n type: String,\n alias: \"_id\",\n attr: \"pfe-id\"\n },\n expanded: {\n title: \"Expanded\",\n type: Boolean,\n default: false\n },\n ariaLabelledby: {\n type: String,\n prefix: false\n }\n };\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport { PfeAccordion as default };\n"],"names":["Array","prototype","findIndex","defineProperty","predicate","this","TypeError","o","Object","len","length","thisArg","arguments","k","kValue","call","PfeAccordion","PFElement","String","tag","PfeTypes","Container","addEventListener","events","change","_changeHandler","_keydownHandler","all","customElements","whenDefined","PfeAccordionHeader","PfeAccordionPanel","then","_this2","hasLightDOM","_linkPanels","_observer","observe","childList","removeEventListener","disconnect","index","headers","_allHeaders","panels","_allPanels","header","panel","expanded","_collapseHeader","_collapsePanel","_expandHeader","_expandPanel","forEach","_this3","_this4","oldVal","newVal","setAttribute","oldDisclosure","_this5","_panelForHeader","ariaControls","_id","ariaLabelledby","disclosure","evt","classList","contains","target","nextElementSibling","detail","height","getBoundingClientRect","_animate","error","start","end","previousElementSibling","add","style","_this6","_transitionEndHandler","currentHeader","_isHeader","newHeader","key","_nextHeader","_previousHeader","_firstHeader","_lastHeader","shadowRoot","querySelector","focus","remove","querySelectorAll","next","tagName","toLowerCase","newIndex","document","activeElement","element","type","PfeType","_this","bind","MutationObserver","el","randomId","replace","Boolean","_init","_clickHandler","window","ShadyCSS","child","children","isHeaderTag","wrapperTag","createElement","button","innerText","appendChild","textContent","trim","warn","event","emitEvent","_this7","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-accordion/package.json b/elements/pfe-accordion/package.json
index 6c154475e9..15d76c198f 100644
--- a/elements/pfe-accordion/package.json
+++ b/elements/pfe-accordion/package.json
@@ -10,7 +10,7 @@
],
"preview": "accordion.svg"
},
- "version": "1.2.0",
+ "version": "1.3.0",
"publishConfig": {
"access": "public"
},
@@ -60,10 +60,10 @@
],
"license": "MIT",
"dependencies": {
- "@patternfly/pfelement": "^1.2.0"
+ "@patternfly/pfelement": "^1.3.0"
},
"devDependencies": {
- "@patternfly/pfe-sass": "^1.2.0"
+ "@patternfly/pfe-sass": "^1.3.0"
},
"generator-pfelement-version": "0.5.5",
"bugs": {
diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.css.map b/elements/pfe-autocomplete/dist/pfe-autocomplete.css.map
new file mode 100644
index 0000000000..7caf61744c
--- /dev/null
+++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["pfe-autocomplete.scss","../../pfe-sass/extends/_extends.scss","pfe-autocomplete.css","../../pfe-sass/mixins/_mixins.scss","../../pfe-sass/mixins/_custom-properties.scss","../../pfe-sass/functions/_custom-properties.scss"],"names":[],"mappings":"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","file":"pfe-autocomplete.css","sourcesContent":["@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: autocomplete;\n\n$LOCAL-VARIABLES: (\n BoxShadow: pfe-var(box-shadow--inset),\n BackgroundColor: pfe-var(surface--lightest),\n Border: pfe-var(ui--border-width) pfe-var(ui--border-style) pfe-var(surface--border)\n);\n\n@include pfe-contexts; // imports on=\"light\" etc support\n\n:host {\n display: block;\n position: relative;\n font-family: pfe-var(font-family);\n @include pfe-print-local($LOCAL-VARIABLES);\n}\n\n:host([button-text]) {\n display: flex;\n #wrapper {\n flex: 1;\n }\n\n #input-box-wrapper {\n position: relative;\n }\n\n button.clear-search {\n right: 10px;\n }\n}\n\n\n// this isn't working, I don't know why\n:host([button-text]) ::slotted(input[type=\"search\"]::-webkit-search-cancel-button) {\n -webkit-appearance: none;\n}\n\n.sr-only {\n @extend %sr-only;\n}\n\n#input-box-wrapper {\n border-color: pfe-var(feedback--info);\n\n ::slotted(input) {\n width: 100%;\n flex: 1;\n box-shadow: pfe-local(BoxShadow) !important;\n padding-left: 10px;\n padding-right: 30px;\n border-radius: pfe-var(ui--border-radius);\n background-color: pfe-local(BackgroundColor);\n border: pfe-local(Border);\n font-size: pfe-var(font-size);\n font-family: pfe-var(font-family);\n height: calc(#{pfe-var(ui--element--size)} * 2);\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 ::slotted(input:disabled),\n button:disabled {\n cursor: not-allowed;\n // background-color: transparent;\n // @TODO: Replace with a variable\n color: #ccc;\n // opacity: 0.5;\n }\n\n ::slotted(input:disabled) {\n padding-right: 10px;\n }\n\n button:focus,\n ::slotted(input:focus) {\n outline: 0;\n }\n\n ::slotted(input),\n button {\n -webkit-appearance: none;\n }\n\n ::slotted([type=\"search\"]::-ms-clear) {\n display: none;\n }\n\n ::slotted(input[type=\"search\"]::-webkit-search-cancel-button),\n ::slotted(input[type=\"search\"]::-webkit-search-decoration) {\n -webkit-appearance: none;\n }\n}\n\nbutton {\n color: pfe-var(ui-base);\n background-color: transparent;\n border: none;\n position: absolute;\n top: 0;\n bottom: 0;\n cursor: pointer;\n\n &.clear-search {\n right: 30px;\n width: 20px;\n margin: 2px 1px;\n background-color: pfe-var(surface--lightest);\n &:hover {\n color: pfe-var(ui-base);\n }\n svg {\n width: 12px;\n stroke: pfe-var(surface--border);\n }\n &:hover svg,\n &:focus svg {\n opacity: 1;\n stroke: pfe-var(link);\n }\n }\n\n &[disabled].clear-search:hover svg,\n &[disabled].clear-search:focus svg {\n stroke: pfe-var(surface--border);\n }\n\n &.search-button {\n right: 1px;\n width: 30px;\n\n svg {\n fill: pfe-var(link);\n width: 16px;\n }\n\n &:hover svg,\n &:focus svg {\n fill: pfe-var(link--hover);\n }\n\n &:disabled svg {\n fill: pfe-var(ui-disabled);\n }\n }\n}\n\npfe-button.search-button--textual {\n margin-left: 16px;\n}\n\n.loading {\n position: absolute;\n width: 30px;\n right: 52px;\n top: 0px;\n bottom: 0px;\n svg {\n width: 26px;\n padding-top: 7px;\n }\n}\n","// @todo Change to mixins; no efficiency gain with placeholders in web components\n\n/// Clear box element styles\n%reset-box {\n margin: 0;\n padding: 0;\n}\n\n/// Clear list styles\n%reset-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/// Clear button styles\n%reset-button {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n\n/// Set up a container element\n%container {\n position: relative;\n display: block;\n width: 100%;\n padding: pfe-var(container-spacer);\n}\n\n/// Screen-reader only content\n%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/// Fallback surface styles for IE11 only\n%fallback-surface {\n @include browser-query(ie11) {\n background-color: pfe-fetch(surface--lightest) !important;\n color: pfe-fetch(text) !important;\n }\n}\n\n/// Fallback text styles for IE11 only\n%fallback-text {\n @include browser-query(ie11) {\n color: pfe-fetch(text) !important;\n }\n}\n",".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@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n color: #151515 !important;\n }\n}\n\n:host([on=\"dark\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #73bcf7);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #bee1f4);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #bee1f4);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #bee1f4);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-dark, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-dark, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-dark, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);\n}\n\n:host([on=\"saturated\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-saturated, #fff);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-saturated, #fff);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-saturated, #fafafa);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-saturated, #fafafa);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-saturated, underline);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-saturated, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-saturated, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-saturated, underline);\n}\n\n:host([on=\"light\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);\n --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);\n}\n\n:host {\n display: block;\n position: relative;\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);\n --pfe-autocomplete--BoxShadow: var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa);\n --pfe-autocomplete--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-autocomplete--Border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2);\n}\n\n:host([button-text]) {\n display: flex;\n}\n\n:host([button-text]) #wrapper {\n flex: 1;\n}\n\n:host([button-text]) #input-box-wrapper {\n position: relative;\n}\n\n:host([button-text]) button.clear-search {\n right: 10px;\n}\n\n:host([button-text]) ::slotted(input[type=\"search\"]::-webkit-search-cancel-button) {\n -webkit-appearance: none;\n}\n\n#input-box-wrapper {\n border-color: var(--pfe-theme--color--feedback--info, #06c);\n}\n\n#input-box-wrapper ::slotted(input) {\n width: 100%;\n flex: 1;\n box-shadow: var(--pfe-autocomplete--BoxShadow, var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa)) !important;\n padding-left: 10px;\n padding-right: 30px;\n border-radius: var(--pfe-theme--ui--border-radius, 2px);\n background-color: var(--pfe-autocomplete--BackgroundColor, var(--pfe-theme--color--surface--lightest, #fff));\n border: var(--pfe-autocomplete--Border, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2));\n font-size: var(--pfe-theme--font-size, 1rem);\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);\n height: calc(var(--pfe-theme--ui--element--size, 20px) * 2);\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),\n#input-box-wrapper button:disabled {\n cursor: not-allowed;\n color: #ccc;\n}\n\n#input-box-wrapper ::slotted(input:disabled) {\n padding-right: 10px;\n}\n\n#input-box-wrapper button:focus,\n#input-box-wrapper ::slotted(input:focus) {\n outline: 0;\n}\n\n#input-box-wrapper ::slotted(input),\n#input-box-wrapper button {\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: var(--pfe-theme--color--ui-base, #6a6e73);\n background-color: transparent;\n border: none;\n position: absolute;\n top: 0;\n bottom: 0;\n cursor: pointer;\n}\n\nbutton.clear-search {\n right: 30px;\n width: 20px;\n margin: 2px 1px;\n background-color: var(--pfe-theme--color--surface--lightest, #fff);\n}\n\nbutton.clear-search:hover {\n color: var(--pfe-theme--color--ui-base, #6a6e73);\n}\n\nbutton.clear-search svg {\n width: 12px;\n stroke: var(--pfe-theme--color--surface--border, #d2d2d2);\n}\n\nbutton.clear-search:hover svg,\nbutton.clear-search:focus svg {\n opacity: 1;\n stroke: var(--pfe-theme--color--link, #06c);\n}\n\nbutton[disabled].clear-search:hover svg,\nbutton[disabled].clear-search:focus svg {\n stroke: var(--pfe-theme--color--surface--border, #d2d2d2);\n}\n\nbutton.search-button {\n right: 1px;\n width: 30px;\n}\n\nbutton.search-button svg {\n fill: var(--pfe-theme--color--link, #06c);\n width: 16px;\n}\n\nbutton.search-button:hover svg,\nbutton.search-button:focus svg {\n fill: var(--pfe-theme--color--link--hover, #004080);\n}\n\nbutton.search-button:disabled svg {\n fill: var(--pfe-theme--color--ui-disabled, #d2d2d2);\n}\n\npfe-button.search-button--textual {\n margin-left: 16px;\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","@mixin browser-query($browser-list) {\n @each $browser in $browser-list {\n @if $browser == ie11 {\n @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n @content;\n }\n }\n @if $browser == edge12 {\n @supports (-ms-accelerator: true) { /* Microsoft Edge Browser 12+ */\n @content;\n }\n }\n @if $browser == edge {\n @supports (-ms-ime-align: auto) { /* Microsoft Edge Browser 16+ (All) */\n @content;\n }\n }\n @if $browser == firefox {\n @media all and (min--moz-device-pixel-ratio:0) { /* Mozilla Firefox (All) */\n @content;\n }\n }\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\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\n@mixin pfe-hidden {\n @at-root #{&}([hidden]) {\n display: none;\n }\n}\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 pfe-icon($path, $display: flex, $size: 1em) {\n display: #{$display};\n @if $path {\n background: #{$path} no-repeat;\n background-size: contain;\n background-position: center;\n }\n width: #{$size};\n height: #{$size};\n @content;\n}\n\n@mixin pfe-local-debug($map: $LOCAL-VARIABLES) {\n :root {\n @include pfe-print-local($map);\n }\n} ","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// This will print all the broadcast variables, and set the value to the context of your choosing, like on-dark or on-saturated.\n/// @param {String} $context - Look up values from contexts, i.e. \"light\" or \"saturated\"\n/// @param {List | String} $broadcast [$BROADCAST-VARS] - Optionally specify only one broadcast variable instead of the whole set, i.e. \"text\"\n/// @see $custom-prop-prefix\n/// @see $BROADCAST-VARS\n/// @example - scss - Usage in a container component, i.e. pfe-card\n/// :host {\n/// @include pfe-set-broadcast-context(dark);\n/// }\n/// @example - css - Rendered output\n/// :host {\n/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n/// --pfe-broadcasted--link-decoration: none;\n/// --pfe-broadcasted--link-decoration--hover: underline;\n/// --pfe-broadcasted--link-decoration--focus: underline;\n/// --pfe-broadcasted--link-decoration--visited: none;\n/// }\n///\n@mixin pfe-set-broadcast-context($context, $broadcast: $BROADCAST-VARS) {\n @each $type in $broadcast {\n $list: ();\n $string: \"\";\n $context_string: \"\";\n $state: \"\";\n\n @if str-starts-with($type, \"link\") {\n $list: append($list, \"#{$type}\");\n\n @each $s in (hover, focus, visited) {\n $state: \"--#{$s}\";\n $string: \"#{$type}#{$state}\";\n\n @if not index($list, $string) {\n $list: append($list, \"#{$type}#{$state}\");\n }\n }\n } @else {\n @if not index($list, $string) {\n $list: append($list, \"#{$type}\");\n }\n }\n\n @if index($CONTEXTS, $context) != null {\n @if $context != \"light\" {\n $context_string: \"--on-#{$context}\";\n }\n }\n\n @each $item in $list {\n @if not index($BROADCAST-VARS, $type) {\n @warn \"--#{$custom-prop-prefix}-broadcasted--#{$item} variable is not in the $BROADCAST-VARS list.\";\n } @else if not pfe-broadcasted(#{$item}#{$context_string}) {\n @warn \"#{$item}#{$context_string} value does not currently exist.\";\n } @else {\n @if index($CONTEXTS, $context) != null {\n --#{$custom-prop-prefix}-broadcasted--#{$item}: #{pfe-var(#{$item}#{$context_string})};\n } @else {\n @error \"The #{$context} context does not appear to be part of a supported context.\";\n }\n }\n }\n }\n}\n\n/// Returns CSS Variable for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $value - The value of the css variable being defined\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example - scss\n/// :host {\n/// padding-top: pfe-local(paddingTop);\n/// padding-bottom: pfe-local(paddingBottom);\n/// }\n@mixin pfe-print-local($map: $LOCAL-VARIABLES) {\n @each $property, $value in $map {\n $name: \"--#{$property}\";\n $styles: $value;\n\n @if type-of($value) == \"map\" {\n @each $prop, $v in $value {\n $name: \"__#{$property}--#{$prop}\";\n $styles: $v;\n\n // Print the variable definition\n --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n }\n } @else {\n // Print the variable definition\n --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n }\n }\n}\n\n/// Surface properties\n/// This mixin creates an attribute for all the surface colors, then prints the local background color variable for the component, with the correct context colors.\n/// @param {List | String} $surfaces [$SURFACES] - defaults to the global $SURFACES list of all supported colors\n/// @param {String} $attr-name [pfe-var] - defaults to pfe-var, optionally pass in a custom name for the data attribute\n/// @example - scss - In your component stylesheet\n/// $LOCAL: band;\n/// @include pfe-surfaces;\n/// @example - css - Rendered result\n/// :host([color=\"darker\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #464646);\n/// --context: dark;\n/// }\n/// :host([color=\"darkest\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #131313);\n/// --context: dark;\n/// }\n/// :host([color=\"base\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #dfdfdf);\n/// --context: light;\n/// }\n/// :host([color=\"lighter\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #ececec);\n/// --context: light;\n/// }\n/// :host([color=\"lightest\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n/// --context: light;\n/// }\n/// :host([color=\"accent\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #ee0000);\n/// --context: saturated;\n/// }\n/// :host([color=\"complement\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #0477a4);\n/// --context: saturated;\n/// }\n@mixin pfe-surfaces($surfaces: $SURFACE, $attr-name: color) {\n @each $color in $surfaces {\n $context: #{pfe-get-context(surface--#{$color}--context)};\n :host([#{$attr-name}=\"#{$color}\"]) {\n @include pfe-print-local(\n (\n BackgroundColor: pfe-var(surface--#{$color}),\n context: pfe-var(surface--#{$color}--context, #{$context})\n )\n );\n @extend %fallback-surface;\n }\n }\n}\n\n/// Prints the `on` attribute with IE11 fallbacks\n/// @param {List} contexts [$CONTEXTS] - defaults to the global $CONTEXTS list of all supported contexts\n/// @param {Boolean} ie-fallback [true] - defaults to true, prints IE11 fallbacks\n/// @example - scss - In your component styles\n/// @include pfe-contexts; // imports on=\"light\" etc support\n/// @example - css - Rendered outputs\n/// :host([on=\"dark\"]) {\n/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n/// --pfe-broadcasted--link-decoration: none;\n/// --pfe-broadcasted--link-decoration--hover: underline;\n/// --pfe-broadcasted--link-decoration--focus: underline;\n/// --pfe-broadcasted--link-decoration--visited: none;\n/// }\n/// @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n/// :host([on=\"dark\"]) {\n/// color: #fff;\n/// color: var(--pfe-theme--color--text--on-dark, #fff);\n/// }\n/// }\n/// // ...as well as all the values for :host([on=\"saturated\"]) and :host([on=\"light\"])\n@mixin pfe-contexts($contexts: $CONTEXTS, $ie-fallback: true) {\n // Helper attributes to aid in theming\n @each $context in $contexts {\n :host([on=\"#{$context}\"]) {\n @include pfe-set-broadcast-context($context);\n }\n }\n @if $ie-fallback {\n :host {\n @extend %fallback-text;\n }\n }\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\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/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name) {\n $var-name: to-string($name, \"--\");\n @if map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}"],"sourceRoot":"../src"}
\ No newline at end of file
diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.js b/elements/pfe-autocomplete/dist/pfe-autocomplete.js
new file mode 100644
index 0000000000..954b468e60
--- /dev/null
+++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.js
@@ -0,0 +1,606 @@
+import PFElement from '../../pfelement/dist/pfelement.js';
+import '../../pfe-button/dist/pfe-button.js';
+
+/*!
+ * PatternFly Elements: PfeAutocomplete 1.3.0
+ * @license
+ * Copyright 2021 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 {
+
+ // Injected at build-time
+ static get version() {
+ return "1.3.0";
+ }
+
+ // Injected at build-time
+ get html() {
+ return `
+
+\n
\n
+
+
+
+
+
+
`;
+ }
+
+ static get tag() {
+ return "pfe-search-droplist";
+ }
+
+ get templateUrl() {
+ return "pfe-search-droplist.html";
+ }
+
+ get styleUrl() {
+ return "pfe-search-droplist.scss";
+ }
+
+ static get properties() {
+ return {
+ open: {
+ title: "Open",
+ type: Boolean
+ },
+ reflow: {
+ title: "Reflow",
+ type: Boolean,
+ observer: "_renderOptions"
+ },
+ activeIndex: {
+ title: "Active index",
+ type: Number,
+ observer: "_activeIndexChanged"
+ }
+ };
+ }
+
+ constructor() {
+ super(PfeSearchDroplist);
+ }
+
+ 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() {
+ super.disconnectedCallback();
+ this._ul.removeEventListener("mousedown", this._optionSelected);
+ }
+
+ _optionSelected(e) {
+ if (e.target.tagName === "LI") {
+ this.emitEvent(PfeAutocomplete.events.select, {
+ detail: { optionValue: e.target.innerText },
+ composed: true
+ });
+ }
+ }
+
+ _renderOptions() {
+ let options = this.data;
+ let ariaAnnounceText = "";
+
+ if (this._ariaAnnounceTemplate) {
+ ariaAnnounceText = this._ariaAnnounceTemplate.replace("${numOptions}", options.length);
+ }
+
+ this._ariaAnnounce.textContent = ariaAnnounceText;
+ this._ariaAnnounce.setAttribute("aria-live", "polite");
+
+ this._ul.innerHTML = `${options
+ .map((item, index) => {
+ return `-
+
\n
\n\n\n
\n \n
`;\n }\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 static get properties() {\n return {\n open: {\n title: \"Open\",\n type: Boolean\n },\n reflow: {\n title: \"Reflow\",\n type: Boolean,\n observer: \"_renderOptions\"\n },\n activeIndex: {\n title: \"Active index\",\n type: Number,\n observer: \"_activeIndexChanged\"\n }\n };\n }\n\n constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\".suggestions-aria-help\");\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 super.disconnectedCallback();\n this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.emitEvent(PfeAutocomplete.events.select, {\n detail: { optionValue: e.target.innerText },\n composed: true\n });\n }\n }\n\n _renderOptions() {\n let options = this.data;\n let ariaAnnounceText = \"\";\n\n if (this._ariaAnnounceTemplate) {\n ariaAnnounceText = this._ariaAnnounceTemplate.replace(\"${numOptions}\", options.length);\n }\n\n this._ariaAnnounce.textContent = ariaAnnounceText;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `- \n
\n
\n\n\n
\n \n
'}static get tag(){return"pfe-search-droplist"}get templateUrl(){return"pfe-search-droplist.html"}get styleUrl(){return"pfe-search-droplist.scss"}static get properties(){return{open:{title:"Open",type:Boolean},reflow:{title:"Reflow",type:Boolean,observer:"_renderOptions"},activeIndex:{title:"Active index",type:Number,observer:"_activeIndexChanged"}}}constructor(){super(r)}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(){super.disconnectedCallback(),this._ul.removeEventListener("mousedown",this._optionSelected)}_optionSelected(e){"LI"===e.target.tagName&&this.emitEvent(o.events.select,{detail:{optionValue:e.target.innerText},composed:!0})}_renderOptions(){let e=this.data,t="";this._ariaAnnounceTemplate&&(t=this._ariaAnnounceTemplate.replace("${numOptions}",e.length)),this._ariaAnnounce.textContent=t,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=`${e.map((e,t)=>`- \n
\n
\n\n\n
\n \n
`;\n }\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 static get properties() {\n return {\n open: {\n title: \"Open\",\n type: Boolean\n },\n reflow: {\n title: \"Reflow\",\n type: Boolean,\n observer: \"_renderOptions\"\n },\n activeIndex: {\n title: \"Active index\",\n type: Number,\n observer: \"_activeIndexChanged\"\n }\n };\n }\n\n constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\".suggestions-aria-help\");\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 super.disconnectedCallback();\n this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.emitEvent(PfeAutocomplete.events.select, {\n detail: { optionValue: e.target.innerText },\n composed: true\n });\n }\n }\n\n _renderOptions() {\n let options = this.data;\n let ariaAnnounceText = \"\";\n\n if (this._ariaAnnounceTemplate) {\n ariaAnnounceText = this._ariaAnnounceTemplate.replace(\"${numOptions}\", options.length);\n }\n\n this._ariaAnnounce.textContent = ariaAnnounceText;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `- \n
\n
\n\n\n
\n \n
";
+ }
+ }, {
+ key: "templateUrl",
+ get: function get() {
+ return "pfe-search-droplist.html";
+ }
+ }, {
+ key: "styleUrl",
+ get: function get() {
+ return "pfe-search-droplist.scss";
+ }
+ }], [{
+ key: "version",
+
+
+ // Injected at build-time
+ get: function get() {
+ return "1.3.0";
+ }
+ }, {
+ key: "tag",
+ get: function get() {
+ return "pfe-search-droplist";
+ }
+ }, {
+ key: "properties",
+ get: function get() {
+ return {
+ open: {
+ title: "Open",
+ type: Boolean
+ },
+ reflow: {
+ title: "Reflow",
+ type: Boolean,
+ observer: "_renderOptions"
+ },
+ activeIndex: {
+ title: "Active index",
+ type: Number,
+ observer: "_activeIndexChanged"
+ }
+ };
+ }
+ }]);
+
+ function PfeSearchDroplist() {
+ classCallCheck(this, PfeSearchDroplist);
+ return possibleConstructorReturn(this, (PfeSearchDroplist.__proto__ || Object.getPrototypeOf(PfeSearchDroplist)).call(this, PfeSearchDroplist));
+ }
+
+ createClass(PfeSearchDroplist, [{
+ key: "connectedCallback",
+ value: function connectedCallback() {
+ get(PfeSearchDroplist.prototype.__proto__ || Object.getPrototypeOf(PfeSearchDroplist.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 disconnectedCallback() {
+ get(PfeSearchDroplist.prototype.__proto__ || Object.getPrototypeOf(PfeSearchDroplist.prototype), "disconnectedCallback", this).call(this);
+ this._ul.removeEventListener("mousedown", this._optionSelected);
+ }
+ }, {
+ key: "_optionSelected",
+ value: function _optionSelected(e) {
+ if (e.target.tagName === "LI") {
+ this.emitEvent(PfeAutocomplete.events.select, {
+ detail: { optionValue: e.target.innerText },
+ composed: true
+ });
+ }
+ }
+ }, {
+ key: "_renderOptions",
+ value: function _renderOptions() {
+ var options = this.data;
+ var ariaAnnounceText = "";
+
+ if (this._ariaAnnounceTemplate) {
+ ariaAnnounceText = this._ariaAnnounceTemplate.replace("${numOptions}", options.length);
+ }
+
+ this._ariaAnnounce.textContent = ariaAnnounceText;
+ this._ariaAnnounce.setAttribute("aria-live", "polite");
+
+ this._ul.innerHTML = "" + options.map(function (item, index) {
+ return "- \n
\n
\n\n\n
\n \n
`;\n }\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 static get properties() {\n return {\n open: {\n title: \"Open\",\n type: Boolean\n },\n reflow: {\n title: \"Reflow\",\n type: Boolean,\n observer: \"_renderOptions\"\n },\n activeIndex: {\n title: \"Active index\",\n type: Number,\n observer: \"_activeIndexChanged\"\n }\n };\n }\n\n constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\".suggestions-aria-help\");\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 super.disconnectedCallback();\n this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.emitEvent(PfeAutocomplete.events.select, {\n detail: { optionValue: e.target.innerText },\n composed: true\n });\n }\n }\n\n _renderOptions() {\n let options = this.data;\n let ariaAnnounceText = \"\";\n\n if (this._ariaAnnounceTemplate) {\n ariaAnnounceText = this._ariaAnnounceTemplate.replace(\"${numOptions}\", options.length);\n }\n\n this._ariaAnnounce.textContent = ariaAnnounceText;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `- \n
\n
\n\n\n
\n \n
'}},{key:"templateUrl",get:function(){return"pfe-search-droplist.html"}},{key:"styleUrl",get:function(){return"pfe-search-droplist.scss"}}],[{key:"version",get:function(){return"1.3.0"}},{key:"tag",get:function(){return"pfe-search-droplist"}},{key:"properties",get:function(){return{open:{title:"Open",type:Boolean},reflow:{title:"Reflow",type:Boolean,observer:"_renderOptions"},activeIndex:{title:"Active index",type:Number,observer:"_activeIndexChanged"}}}}]),o(f,[{key:"connectedCallback",value:function(){n(f.prototype.__proto__||Object.getPrototypeOf(f.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(){n(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"disconnectedCallback",this).call(this),this._ul.removeEventListener("mousedown",this._optionSelected)}},{key:"_optionSelected",value:function(e){"LI"===e.target.tagName&&this.emitEvent(p.events.select,{detail:{optionValue:e.target.innerText},composed:!0})}},{key:"_renderOptions",value:function(){var e=this.data,t="";this._ariaAnnounceTemplate&&(t=this._ariaAnnounceTemplate.replace("${numOptions}",e.length)),this._ariaAnnounce.textContent=t,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+e.map(function(e,t){return'- \n
\n
\n\n\n
\n \n
`;\n }\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 static get properties() {\n return {\n open: {\n title: \"Open\",\n type: Boolean\n },\n reflow: {\n title: \"Reflow\",\n type: Boolean,\n observer: \"_renderOptions\"\n },\n activeIndex: {\n title: \"Active index\",\n type: Number,\n observer: \"_activeIndexChanged\"\n }\n };\n }\n\n constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\".suggestions-aria-help\");\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 super.disconnectedCallback();\n this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.emitEvent(PfeAutocomplete.events.select, {\n detail: { optionValue: e.target.innerText },\n composed: true\n });\n }\n }\n\n _renderOptions() {\n let options = this.data;\n let ariaAnnounceText = \"\";\n\n if (this._ariaAnnounceTemplate) {\n ariaAnnounceText = this._ariaAnnounceTemplate.replace(\"${numOptions}\", options.length);\n }\n\n this._ariaAnnounce.textContent = ariaAnnounceText;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `- \n
` : ""}
+ ${this.hasSlot("pfe-band--header") ? `
+ ` : ""}
+
+
+ ${this.asideHeight !== "full" && this.hasSlot("pfe-band--aside") && this.asidePosition.mobile !== "top" ? `` : ""}
+ ${this.hasSlot("pfe-band--footer") ? `` : ""}
+ ${this.asideHeight === "full" ? `
` : ""}
+ ${this.asideHeight === "full" && this.hasSlot("pfe-band--aside") && this.asidePosition.mobile !== "top" ? `` : ""}
+` : \"\"}\n ${this.hasSlot(\"pfe-band--header\") ? `\n ` : \"\"}\n \n \n ${this.asideHeight !== \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `\n
` : \"\"}\n ${this.asideHeight === \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `':""}\n ${this.hasSlot("pfe-band--header")?'\n ':""}\n \n \n ${"full"!==this.asideHeight&&this.hasSlot("pfe-band--aside")&&"top"!==this.asidePosition.mobile?'\n
":""}\n ${"full"===this.asideHeight&&this.hasSlot("pfe-band--aside")&&"top"!==this.asidePosition.mobile?'` : \"\"}\n ${this.hasSlot(\"pfe-band--header\") ? `\n ` : \"\"}\n \n \n ${this.asideHeight !== \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `\n
` : \"\"}\n ${this.asideHeight === \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `" : "") + "\n " + (this.hasSlot("pfe-band--header") ? "\n " : "") + "\n \n \n " + (this.asideHeight !== "full" && this.hasSlot("pfe-band--aside") && this.asidePosition.mobile !== "top" ? "\n
" : "") + "\n " + (this.asideHeight === "full" && this.hasSlot("pfe-band--aside") && this.asidePosition.mobile !== "top" ? "` : \"\"}\n ${this.hasSlot(\"pfe-band--header\") ? `\n ` : \"\"}\n \n \n ${this.asideHeight !== \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `\n
` : \"\"}\n ${this.asideHeight === \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `':"")+"\n "+(this.hasSlot("pfe-band--header")?'\n ':"")+'\n \n \n '+("full"!==this.asideHeight&&this.hasSlot("pfe-band--aside")&&"top"!==this.asidePosition.mobile?'\n
":"")+"\n "+("full"===this.asideHeight&&this.hasSlot("pfe-band--aside")&&"top"!==this.asidePosition.mobile?'` : \"\"}\n ${this.hasSlot(\"pfe-band--header\") ? `\n ` : \"\"}\n \n \n ${this.asideHeight !== \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `\n
` : \"\"}\n ${this.asideHeight === \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `
+
+
+
+`;
+ }
+
+ static get tag() {
+ return "pfe-card";
+ }
+
+ static get meta() {
+ return {
+ title: "Card",
+ description:
+ "This element creates a header, body, and footer region in which to place content or other components."
+ };
+ }
+
+ get templateUrl() {
+ return "pfe-card.html";
+ }
+
+ get styleUrl() {
+ return "pfe-card.scss";
+ }
+
+ // @TODO: How do we handle attributes for slotted content?
+ static get properties() {
+ return {
+ color: {
+ title: "Background color",
+ type: String,
+ values: ["lightest", "base", "darker", "darkest", "complement", "accent"],
+ default: "base",
+ observer: "_colorChanged"
+ },
+ // @TODO: Deprecate property in 1.0
+ oldColor: {
+ type: String,
+ prefix: false,
+ alias: "color",
+ attr: "pfe-color"
+ },
+ imgSrc: {
+ title: "Background image",
+ type: String,
+ observer: "_imageSrcChanged"
+ },
+ // @TODO: Deprecate property in 1.0
+ pfeImgSrc: {
+ type: String,
+ prefix: false,
+ alias: "imgSrc"
+ },
+ size: {
+ title: "Padding size",
+ type: String,
+ values: ["small"]
+ },
+ // @TODO: Deprecate property in 1.0
+ pfeSize: {
+ type: String,
+ values: ["small"],
+ prefix: false,
+ alias: "size"
+ },
+ border: {
+ title: "Border",
+ type: Boolean
+ },
+ // @TODO: Deprecate property in 1.0
+ oldBorder: {
+ alias: "border",
+ attr: "pfe-border"
+ }
+ };
+ }
+
+ static get slots() {
+ return {
+ header: {
+ title: "Header",
+ type: "array",
+ namedSlot: true,
+ maxItems: 3,
+ items: {
+ $ref: "raw"
+ }
+ },
+ body: {
+ title: "Body",
+ type: "array",
+ namedSlot: false,
+ items: {
+ $ref: "raw"
+ }
+ },
+ footer: {
+ title: "Footer",
+ type: "array",
+ namedSlot: true,
+ maxItems: 3,
+ items: {
+ oneOf: [
+ {
+ $ref: "pfe-cta"
+ },
+ {
+ $ref: "raw"
+ }
+ ]
+ }
+ }
+ };
+ }
+
+ // Declare the type of this component
+ static get PfeType() {
+ return PFElement.PfeTypes.Container;
+ }
+
+ constructor() {
+ super(PfeCard, { type: PfeCard.PfeType });
+ }
+
+ // If the color changes, update the context
+ _colorChanged() {
+ // Update the context
+ this.resetContext();
+ }
+
+ // Update the background image
+ _imageSrcChanged(oldValue, newValue) {
+ // Set the image as the background image
+ this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;
+ }
+}
+
+PFElement.create(PfeCard);
+
+export default PfeCard;
+//# sourceMappingURL=pfe-card.js.map
diff --git a/elements/pfe-card/dist/pfe-card.js.map b/elements/pfe-card/dist/pfe-card.js.map
new file mode 100644
index 0000000000..5a42c608ca
--- /dev/null
+++ b/elements/pfe-card/dist/pfe-card.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-card.js","sources":["../_temp/polyfills--pfe-card.js","../_temp/pfe-card.js"],"sourcesContent":["// @POLYFILL Element.matches\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches\nif (!Element.prototype.matches) {\n Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;\n}\n\n// @POLYFILL Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\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 * PatternFly Elements: PfeCard 1.3.0\n * @license\n * Copyright 2021 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// Import polyfills: matches, closest, includes\nimport \"./polyfills--pfe-card.js\";\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeCard extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.3.0\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n
\n\n
\n`;\n }\n\n static get tag() {\n return \"pfe-card\";\n }\n\n static get meta() {\n return {\n title: \"Card\",\n description:\n \"This element creates a header, body, and footer region in which to place content or other components.\"\n };\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n // @TODO: How do we handle attributes for slotted content?\n static get properties() {\n return {\n color: {\n title: \"Background color\",\n type: String,\n values: [\"lightest\", \"base\", \"darker\", \"darkest\", \"complement\", \"accent\"],\n default: \"base\",\n observer: \"_colorChanged\"\n },\n // @TODO: Deprecate property in 1.0\n oldColor: {\n type: String,\n prefix: false,\n alias: \"color\",\n attr: \"pfe-color\"\n },\n imgSrc: {\n title: \"Background image\",\n type: String,\n observer: \"_imageSrcChanged\"\n },\n // @TODO: Deprecate property in 1.0\n pfeImgSrc: {\n type: String,\n prefix: false,\n alias: \"imgSrc\"\n },\n size: {\n title: \"Padding size\",\n type: String,\n values: [\"small\"]\n },\n // @TODO: Deprecate property in 1.0\n pfeSize: {\n type: String,\n values: [\"small\"],\n prefix: false,\n alias: \"size\"\n },\n border: {\n title: \"Border\",\n type: Boolean\n },\n // @TODO: Deprecate property in 1.0\n oldBorder: {\n alias: \"border\",\n attr: \"pfe-border\"\n }\n };\n }\n\n static get slots() {\n return {\n header: {\n title: \"Header\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n $ref: \"raw\"\n }\n },\n body: {\n title: \"Body\",\n type: \"array\",\n namedSlot: false,\n items: {\n $ref: \"raw\"\n }\n },\n footer: {\n title: \"Footer\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n oneOf: [\n {\n $ref: \"pfe-cta\"\n },\n {\n $ref: \"raw\"\n }\n ]\n }\n }\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(PfeCard, { type: PfeCard.PfeType });\n }\n\n // If the color changes, update the context\n _colorChanged() {\n // Update the context\n this.resetContext();\n }\n\n // Update the background image\n _imageSrcChanged(oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n}\n\nPFElement.create(PfeCard);\n\nexport { PfeCard as default };\n"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-card/dist/pfe-card.min.css.map b/elements/pfe-card/dist/pfe-card.min.css.map
new file mode 100644
index 0000000000..77796a5643
--- /dev/null
+++ b/elements/pfe-card/dist/pfe-card.min.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../../pfe-sass/mixins/_mixins.scss","../../../pfe-sass/mixins/_custom-properties.scss","../../../pfe-sass/extends/_extends.scss","../../src/pfe-card.scss","pfe-card.css"],"names":[],"mappings":"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","file":"pfe-card.min.css","sourceRoot":"../src","sourcesContent":[null,null,null,null,"@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host([color=\"darker\"]), :host([color=\"darkest\"]), :host([color=\"base\"]), :host([color=\"lighter\"]), :host([color=\"lightest\"]), :host([color=\"accent\"]), :host([color=\"complement\"]) {\n /* IE10+ */\n background-color: #fff !important;\n color: #151515 !important;\n }\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n color: #151515 !important;\n }\n}\n\n:host {\n --context: var(--pfe-card--context, var(--pfe-theme--color--surface--base--context, light));\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n justify-items: flex-start;\n -webkit-align-self: stretch;\n -ms-flex-item-align: stretch;\n -ms-grid-row-align: stretch;\n align-self: stretch;\n padding: calc(1rem * 2) calc(1rem * 2) calc(1rem * 2) calc(1rem * 2);\n padding: var(--pfe-card--Padding, var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2)));\n border: 0 solid #d2d2d2;\n border: var(--pfe-card--Border, var(--pfe-card--BorderWidth, 0) var(--pfe-card--BorderStyle, solid) var(--pfe-card--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2)));\n border-radius: 3px;\n border-radius: var(--pfe-card--BorderRadius, var(--pfe-theme--surface--border-radius, 3px));\n overflow: hidden;\n background-color: #f0f0f0;\n background-color: var(--pfe-card--BackgroundColor, var(--pfe-theme--color--surface--base, #f0f0f0));\n background-position: center center;\n background-position: var(--pfe-card--BackgroundPosition, center center);\n color: #3c3f42;\n color: var(--pfe-broadcasted--text, #3c3f42);\n}\n\n@media print {\n :host {\n background-color: white !important;\n background-image: none !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n }\n}\n\n@media print {\n :host {\n border-radius: 3px;\n border: 1px solid #d2d2d2;\n }\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n background-color: #fff !important;\n background-color: var(--pfe-theme--color--surface--lightest, #fff) !important;\n color: #151515 !important;\n color: var(--pfe-theme--color--text, #151515) !important;\n background-image: none !important;\n border-radius: 3px;\n border: 1px solid #d2d2d2;\n padding: 1rem;\n padding: var(--pfe-theme--container-spacer, 1rem);\n }\n}\n\n:host([color=\"darker\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--darker, #3c3f42);\n --pfe-card--context: var(--pfe-theme--color--surface--darker--context, dark);\n}\n\n:host([color=\"darkest\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--darkest, #151515);\n --pfe-card--context: var(--pfe-theme--color--surface--darkest--context, dark);\n}\n\n:host([color=\"base\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--base, #f0f0f0);\n --pfe-card--context: var(--pfe-theme--color--surface--base--context, light);\n}\n\n:host([color=\"lighter\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--lighter, #f0f0f0);\n --pfe-card--context: var(--pfe-theme--color--surface--lighter--context, light);\n}\n\n:host([color=\"lightest\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-card--context: var(--pfe-theme--color--surface--lightest--context, light);\n}\n\n:host([color=\"accent\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--accent, #004080);\n --pfe-card--context: var(--pfe-theme--color--surface--accent--context, saturated);\n}\n\n:host([color=\"complement\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--complement, #002952);\n --pfe-card--context: var(--pfe-theme--color--surface--complement--context, saturated);\n}\n\n:host([on=\"dark\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #73bcf7);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #bee1f4);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #bee1f4);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #bee1f4);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-dark, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-dark, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-dark, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);\n}\n\n:host([on=\"saturated\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-saturated, #fff);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-saturated, #fff);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-saturated, #fafafa);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-saturated, #fafafa);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-saturated, underline);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-saturated, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-saturated, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-saturated, underline);\n}\n\n:host([on=\"light\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);\n --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);\n}\n\n:host([size=\"small\"]) {\n --pfe-card--PaddingTop: var(--pfe-theme--container-spacer, 1rem);\n --pfe-card--PaddingRight: var(--pfe-theme--container-spacer, 1rem);\n --pfe-card--PaddingBottom: var(--pfe-theme--container-spacer, 1rem);\n --pfe-card--PaddingLeft: var(--pfe-theme--container-spacer, 1rem);\n}\n\n:host([border]:not([border=\"false\"])) {\n --pfe-card--BorderWidth: 1px;\n}\n\n.pfe-card__header ::slotted([overflow~=\"top\"]),\n.pfe-card__header ::slotted([overflow~=\"top\"]), .pfe-card__body ::slotted([overflow~=\"top\"]),\n.pfe-card__body ::slotted([overflow~=\"top\"]), .pfe-card__footer ::slotted([overflow~=\"top\"]),\n.pfe-card__footer ::slotted([overflow~=\"top\"]) {\n z-index: 1;\n margin-top: -2rem;\n margin-top: calc(-1 * calc(1rem * 2)) !important;\n margin-top: calc(-1 * var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important;\n}\n\n:host([has_header]) .pfe-card__header ::slotted([overflow~=\"top\"]), :host([has_header])\n.pfe-card__header ::slotted([overflow~=\"top\"]), :host([has_header]) .pfe-card__body ::slotted([overflow~=\"top\"]), :host([has_header])\n.pfe-card__body ::slotted([overflow~=\"top\"]), :host([has_header]) .pfe-card__footer ::slotted([overflow~=\"top\"]), :host([has_header])\n.pfe-card__footer ::slotted([overflow~=\"top\"]) {\n padding-top: 1rem;\n padding-top: var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem));\n}\n\n.pfe-card__header ::slotted([overflow~=\"right\"]),\n.pfe-card__header ::slotted([overflow~=\"right\"]), .pfe-card__body ::slotted([overflow~=\"right\"]),\n.pfe-card__body ::slotted([overflow~=\"right\"]), .pfe-card__footer ::slotted([overflow~=\"right\"]),\n.pfe-card__footer ::slotted([overflow~=\"right\"]) {\n margin-right: -2rem;\n margin-right: calc(-1 * calc(1rem * 2));\n margin-right: calc(-1 * var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)));\n}\n\n.pfe-card__header ::slotted([overflow~=\"bottom\"]),\n.pfe-card__header ::slotted([overflow~=\"bottom\"]), .pfe-card__body ::slotted([overflow~=\"bottom\"]),\n.pfe-card__body ::slotted([overflow~=\"bottom\"]), .pfe-card__footer ::slotted([overflow~=\"bottom\"]),\n.pfe-card__footer ::slotted([overflow~=\"bottom\"]) {\n margin-bottom: -2rem;\n margin-bottom: calc(-1 * calc(calc(1rem * 2) + 3px));\n margin-bottom: calc(-1 * calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) + var(--pfe-card--BorderRadius, var(--pfe-theme--surface--border-radius, 3px))));\n -webkit-align-self: flex-end;\n -ms-flex-item-align: end;\n align-self: flex-end;\n}\n\n.pfe-card__header ::slotted([overflow~=\"left\"]),\n.pfe-card__header ::slotted([overflow~=\"left\"]), .pfe-card__body ::slotted([overflow~=\"left\"]),\n.pfe-card__body ::slotted([overflow~=\"left\"]), .pfe-card__footer ::slotted([overflow~=\"left\"]),\n.pfe-card__footer ::slotted([overflow~=\"left\"]) {\n margin-left: -2rem;\n margin-left: calc(-1 * calc(1rem * 2));\n margin-left: calc(-1 * var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2)));\n}\n\n.pfe-card__header ::slotted(img), .pfe-card__body ::slotted(img), .pfe-card__footer ::slotted(img) {\n max-width: 100% !important;\n -webkit-align-self: flex-start;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -o-object-fit: cover;\n object-fit: cover;\n}\n\n.pfe-card__header ::slotted(img:not[overflow]),\n.pfe-card__header ::slotted(img:not[overflow]), .pfe-card__body ::slotted(img:not[overflow]),\n.pfe-card__body ::slotted(img:not[overflow]), .pfe-card__footer ::slotted(img:not[overflow]),\n.pfe-card__footer ::slotted(img:not[overflow]) {\n -webkit-align-self: flex-start;\n -ms-flex-item-align: start;\n align-self: flex-start;\n}\n\n.pfe-card__header ::slotted(img[overflow]),\n.pfe-card__header ::slotted(img[overflow]), .pfe-card__body ::slotted(img[overflow]),\n.pfe-card__body ::slotted(img[overflow]), .pfe-card__footer ::slotted(img[overflow]),\n.pfe-card__footer ::slotted(img[overflow]) {\n max-width: unset !important;\n}\n\n.pfe-card__header ::slotted(img[overflow~=\"right\"]),\n.pfe-card__header ::slotted(img[overflow~=\"right\"]), .pfe-card__body ::slotted(img[overflow~=\"right\"]),\n.pfe-card__body ::slotted(img[overflow~=\"right\"]), .pfe-card__footer ::slotted(img[overflow~=\"right\"]),\n.pfe-card__footer ::slotted(img[overflow~=\"right\"]) {\n width: calc(100% + 2rem) !important;\n width: calc(100% + calc(1rem * 2)) !important;\n width: calc(100% + var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important;\n}\n\n.pfe-card__header ::slotted(img[overflow~=\"left\"]),\n.pfe-card__header ::slotted(img[overflow~=\"left\"]), .pfe-card__body ::slotted(img[overflow~=\"left\"]),\n.pfe-card__body ::slotted(img[overflow~=\"left\"]), .pfe-card__footer ::slotted(img[overflow~=\"left\"]),\n.pfe-card__footer ::slotted(img[overflow~=\"left\"]) {\n width: calc(100% + 2rem) !important;\n width: calc(100% + calc(1rem * 2)) !important;\n width: calc(100% + var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important;\n}\n\n.pfe-card__header ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]),\n.pfe-card__header ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]), .pfe-card__body ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]),\n.pfe-card__body ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]), .pfe-card__footer ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]),\n.pfe-card__footer ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]) {\n width: calc(100% + 4rem) !important;\n width: calc(100% + calc(1rem * 2) + calc(1rem * 2)) !important;\n width: calc(100% + var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) + var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important;\n}\n\n.pfe-card__header {\n z-index: 2;\n background-color: rgba(0, 0, 0, 0.09);\n background-color: var(--pfe-card__header--BackgroundColor, rgba(0, 0, 0, var(--pfe-theme--opacity, 0.09)));\n color: #3c3f42;\n color: var(--pfe-card__header--Color, var(--pfe-broadcasted--text, #3c3f42));\n margin-top: calc(calc(1rem * 2) * -1) !important;\n margin-top: calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1) !important;\n margin-right: calc(calc(1rem * 2) * -1);\n margin-right: calc(var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n margin-bottom: 1rem;\n margin-bottom: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)));\n margin-left: calc(calc(1rem * 2) * -1);\n margin-left: calc(var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n padding-top: 1rem;\n padding-top: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)));\n padding-right: calc(1rem * 2);\n padding-right: var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2));\n padding-left: calc(1rem * 2);\n padding-left: var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2));\n padding-bottom: 1rem;\n padding-bottom: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)));\n}\n\n:host([on=\"dark\"]) .pfe-card__header {\n background-color: rgba(255, 255, 255, 0.09);\n background-color: var(--pfe-card__header--BackgroundColor--dark, rgba(255, 255, 255, var(--pfe-theme--opacity, 0.09)));\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pfe-card__header {\n /* IE10+ */\n background-color: #fff !important;\n color: #151515 !important;\n }\n}\n\n:host(:not([has_body]):not([has_footer])) .pfe-card__header {\n margin-bottom: calc(1rem * 2);\n margin-bottom: var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2));\n}\n\n.pfe-card__header ::slotted([overflow~=\"top\"]),\n.pfe-card__header ::slotted([overflow~=\"top\"]) {\n --pfe-card__overflow--MarginTop: calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n:host(:not([has_header])) .pfe-card__header {\n display: none;\n}\n\n:host([has_body], [has_footer]) .pfe-card__header ::slotted([overflow~=\"bottom\"]),\n:host([has_body], [has_footer]) .pfe-card__header ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1);\n}\n\n.pfe-card__header ::slotted([overflow~=\"bottom\"]),\n.pfe-card__header ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n.pfe-card__header ::slotted(h1) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h2) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h3) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h4) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h5) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h6) {\n margin-bottom: 0;\n}\n\n:host(:not([has_header])) .pfe-card__body ::slotted([overflow~=\"top\"]),\n:host(:not([has_header])) .pfe-card__body ::slotted([overflow~=\"top\"]) {\n --pfe-card__overflow--MarginTop: calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n.pfe-card__body ::slotted([overflow~=\"top\"]),\n.pfe-card__body ::slotted([overflow~=\"top\"]) {\n z-index: 1;\n --pfe-card__overflow--MarginTop: calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1);\n}\n\n.pfe-card__body ::slotted([overflow~=\"bottom\"]),\n.pfe-card__body ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n:host([has_footer]) .pfe-card__body ::slotted([overflow~=\"bottom\"]),\n:host([has_footer]) .pfe-card__body ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1);\n}\n\n:host(:not([has_footer])) .pfe-card__body {\n margin-bottom: 0;\n}\n\n.pfe-card__footer {\n margin-top: auto;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n flex-direction: var(--pfe-card__footer--Row, row);\n -webkit-flex-wrap: wrap;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -webkit-flex-wrap: var(--pfe-card__footer--Wrap, wrap);\n -ms-flex-wrap: var(--pfe-card__footer--Wrap, wrap);\n flex-wrap: var(--pfe-card__footer--Wrap, wrap);\n -webkit-box-align: baseline;\n -webkit-align-items: baseline;\n -ms-flex-align: baseline;\n align-items: baseline;\n -webkit-box-align: var(--pfe-card__footer--AlignItems, baseline);\n -webkit-align-items: var(--pfe-card__footer--AlignItems, baseline);\n -ms-flex-align: var(--pfe-card__footer--AlignItems, baseline);\n align-items: var(--pfe-card__footer--AlignItems, baseline);\n}\n\n.pfe-card__footer ::slotted([overflow~=\"bottom\"]),\n.pfe-card__footer ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n:host(:not([has_footer])) .pfe-card__footer {\n display: none;\n}\n\n.pfe-card__header, .pfe-card__body {\n margin-bottom: 1rem;\n margin-bottom: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)));\n}\n\n.pfe-card__header ::slotted(p:first-child), .pfe-card__body ::slotted(p:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h1:first-child), .pfe-card__body ::slotted(h1:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h2:first-child), .pfe-card__body ::slotted(h2:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h3:first-child), .pfe-card__body ::slotted(h3:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h4:first-child), .pfe-card__body ::slotted(h4:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h5:first-child), .pfe-card__body ::slotted(h5:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h6:first-child), .pfe-card__body ::slotted(h6:first-child) {\n margin-top: 0;\n}\n\n/*# sourceMappingURL=pfe-card.css.map */\n"]}
\ No newline at end of file
diff --git a/elements/pfe-card/dist/pfe-card.min.js b/elements/pfe-card/dist/pfe-card.min.js
new file mode 100644
index 0000000000..54777974a6
--- /dev/null
+++ b/elements/pfe-card/dist/pfe-card.min.js
@@ -0,0 +1,26 @@
+import e from"../../pfelement/dist/pfelement.min.js";Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var r=this;do{if(r.matches(e))return r;r=r.parentElement||r.parentNode}while(null!==r&&1===r.nodeType);return null})
+/*!
+ * PatternFly Elements: PfeCard 1.3.0
+ * @license
+ * Copyright 2021 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 r extends e{static get version(){return"1.3.0"}get html(){return'\n\n\n
\n\n
\n'}static get tag(){return"pfe-card"}static get meta(){return{title:"Card",description:"This element creates a header, body, and footer region in which to place content or other components."}}get templateUrl(){return"pfe-card.html"}get styleUrl(){return"pfe-card.scss"}static get properties(){return{color:{title:"Background color",type:String,values:["lightest","base","darker","darkest","complement","accent"],default:"base",observer:"_colorChanged"},oldColor:{type:String,prefix:!1,alias:"color",attr:"pfe-color"},imgSrc:{title:"Background image",type:String,observer:"_imageSrcChanged"},pfeImgSrc:{type:String,prefix:!1,alias:"imgSrc"},size:{title:"Padding size",type:String,values:["small"]},pfeSize:{type:String,values:["small"],prefix:!1,alias:"size"},border:{title:"Border",type:Boolean},oldBorder:{alias:"border",attr:"pfe-border"}}}static get slots(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{$ref:"raw"}},body:{title:"Body",type:"array",namedSlot:!1,items:{$ref:"raw"}},footer:{title:"Footer",type:"array",namedSlot:!0,maxItems:3,items:{oneOf:[{$ref:"pfe-cta"},{$ref:"raw"}]}}}}static get PfeType(){return e.PfeTypes.Container}constructor(){super(r,{type:r.PfeType})}_colorChanged(){this.resetContext()}_imageSrcChanged(e,r){this.style.backgroundImage=r?`url('${r}')`:""}}e.create(r);export default r;
+//# sourceMappingURL=pfe-card.min.js.map
diff --git a/elements/pfe-card/dist/pfe-card.min.js.map b/elements/pfe-card/dist/pfe-card.min.js.map
new file mode 100644
index 0000000000..cedd0bc73c
--- /dev/null
+++ b/elements/pfe-card/dist/pfe-card.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-card.min.js","sources":["../_temp/polyfills--pfe-card.js","../_temp/pfe-card.js"],"sourcesContent":["// @POLYFILL Element.matches\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches\nif (!Element.prototype.matches) {\n Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;\n}\n\n// @POLYFILL Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\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 * PatternFly Elements: PfeCard 1.3.0\n * @license\n * Copyright 2021 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// Import polyfills: matches, closest, includes\nimport \"./polyfills--pfe-card.js\";\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeCard extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.3.0\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n
\n\n
\n`;\n }\n\n static get tag() {\n return \"pfe-card\";\n }\n\n static get meta() {\n return {\n title: \"Card\",\n description:\n \"This element creates a header, body, and footer region in which to place content or other components.\"\n };\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n // @TODO: How do we handle attributes for slotted content?\n static get properties() {\n return {\n color: {\n title: \"Background color\",\n type: String,\n values: [\"lightest\", \"base\", \"darker\", \"darkest\", \"complement\", \"accent\"],\n default: \"base\",\n observer: \"_colorChanged\"\n },\n // @TODO: Deprecate property in 1.0\n oldColor: {\n type: String,\n prefix: false,\n alias: \"color\",\n attr: \"pfe-color\"\n },\n imgSrc: {\n title: \"Background image\",\n type: String,\n observer: \"_imageSrcChanged\"\n },\n // @TODO: Deprecate property in 1.0\n pfeImgSrc: {\n type: String,\n prefix: false,\n alias: \"imgSrc\"\n },\n size: {\n title: \"Padding size\",\n type: String,\n values: [\"small\"]\n },\n // @TODO: Deprecate property in 1.0\n pfeSize: {\n type: String,\n values: [\"small\"],\n prefix: false,\n alias: \"size\"\n },\n border: {\n title: \"Border\",\n type: Boolean\n },\n // @TODO: Deprecate property in 1.0\n oldBorder: {\n alias: \"border\",\n attr: \"pfe-border\"\n }\n };\n }\n\n static get slots() {\n return {\n header: {\n title: \"Header\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n $ref: \"raw\"\n }\n },\n body: {\n title: \"Body\",\n type: \"array\",\n namedSlot: false,\n items: {\n $ref: \"raw\"\n }\n },\n footer: {\n title: \"Footer\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n oneOf: [\n {\n $ref: \"pfe-cta\"\n },\n {\n $ref: \"raw\"\n }\n ]\n }\n }\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(PfeCard, { type: PfeCard.PfeType });\n }\n\n // If the color changes, update the context\n _colorChanged() {\n // Update the context\n this.resetContext();\n }\n\n // Update the background image\n _imageSrcChanged(oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n}\n\nPFElement.create(PfeCard);\n\nexport { PfeCard as default };\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","this","parentElement","parentNode","nodeType","PfeCard","PFElement","version","html","tag","meta","title","description","templateUrl","styleUrl","properties","color","type","String","values","default","observer","oldColor","prefix","alias","attr","imgSrc","pfeImgSrc","size","pfeSize","border","Boolean","oldBorder","slots","header","namedSlot","maxItems","items","$ref","body","footer","oneOf","PfeType","PfeTypes","Container","[object Object]","super","resetContext","oldValue","newValue","style","backgroundImage","create"],"mappings":"qDAEKA,QAAQC,UAAUC,UACrBF,QAAQC,UAAUC,QAAUF,QAAQC,UAAUE,mBAAqBH,QAAQC,UAAUG,uBAKlFJ,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;;;;;;;;;;;;;;;;;;;;;;;;GCeX,MAAMC,UAAgBC,EAGpBC,qBACE,MAAO,QAITC,WACE,MAAO,o4eAaTC,iBACE,MAAO,WAGTC,kBACE,MAAO,CACLC,MAAO,OACPC,YACE,yGAINC,kBACE,MAAO,gBAGTC,eACE,MAAO,gBAITC,wBACE,MAAO,CACLC,MAAO,CACLL,MAAO,mBACPM,KAAMC,OACNC,OAAQ,CAAC,WAAY,OAAQ,SAAU,UAAW,aAAc,UAChEC,QAAS,OACTC,SAAU,iBAGZC,SAAU,CACRL,KAAMC,OACNK,QAAQ,EACRC,MAAO,QACPC,KAAM,aAERC,OAAQ,CACNf,MAAO,mBACPM,KAAMC,OACNG,SAAU,oBAGZM,UAAW,CACTV,KAAMC,OACNK,QAAQ,EACRC,MAAO,UAETI,KAAM,CACJjB,MAAO,eACPM,KAAMC,OACNC,OAAQ,CAAC,UAGXU,QAAS,CACPZ,KAAMC,OACNC,OAAQ,CAAC,SACTI,QAAQ,EACRC,MAAO,QAETM,OAAQ,CACNnB,MAAO,SACPM,KAAMc,SAGRC,UAAW,CACTR,MAAO,SACPC,KAAM,eAKZQ,mBACE,MAAO,CACLC,OAAQ,CACNvB,MAAO,SACPM,KAAM,QACNkB,WAAW,EACXC,SAAU,EACVC,MAAO,CACLC,KAAM,QAGVC,KAAM,CACJ5B,MAAO,OACPM,KAAM,QACNkB,WAAW,EACXE,MAAO,CACLC,KAAM,QAGVE,OAAQ,CACN7B,MAAO,SACPM,KAAM,QACNkB,WAAW,EACXC,SAAU,EACVC,MAAO,CACLI,MAAO,CACL,CACEH,KAAM,WAER,CACEA,KAAM,WASlBI,qBACE,OAAOpC,EAAUqC,SAASC,UAG5BC,cACEC,MAAMzC,EAAS,CAAEY,KAAMZ,EAAQqC,UAIjCG,gBAEE5C,KAAK8C,eAIPF,iBAAiBG,EAAUC,GAEzBhD,KAAKiD,MAAMC,gBAAkBF,UAAmBA,MAAe,IAInE3C,EAAU8C,OAAO/C"}
\ No newline at end of file
diff --git a/elements/pfe-card/dist/pfe-card.umd.js b/elements/pfe-card/dist/pfe-card.umd.js
new file mode 100644
index 0000000000..3d00dfc019
--- /dev/null
+++ b/elements/pfe-card/dist/pfe-card.umd.js
@@ -0,0 +1,275 @@
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../../pfelement/dist/pfelement.umd')) :
+ typeof define === 'function' && define.amd ? define(['../../pfelement/dist/pfelement.umd'], factory) :
+ (global = global || self, global.PfeCard = factory(global.PFElement));
+}(this, (function (PFElement) { 'use strict';
+
+ PFElement = PFElement && Object.prototype.hasOwnProperty.call(PFElement, 'default') ? PFElement['default'] : PFElement;
+
+ // @POLYFILL Element.matches
+ // https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+ if (!Element.prototype.matches) {
+ Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+ }
+
+ // @POLYFILL Element.closest
+ // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
+ 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;
+ };
+ }
+
+ 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;
+ };
+
+ /*!
+ * PatternFly Elements: PfeCard 1.3.0
+ * @license
+ * Copyright 2021 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 PfeCard = function (_PFElement) {
+ inherits(PfeCard, _PFElement);
+ createClass(PfeCard, [{
+ key: "html",
+
+
+ // Injected at build-time
+ get: function get() {
+ return "\n\n\n
\n\n
\n";
+ }
+ }, {
+ key: "templateUrl",
+ get: function get() {
+ return "pfe-card.html";
+ }
+ }, {
+ key: "styleUrl",
+ get: function get() {
+ return "pfe-card.scss";
+ }
+
+ // @TODO: How do we handle attributes for slotted content?
+
+ }], [{
+ key: "version",
+
+
+ // Injected at build-time
+ get: function get() {
+ return "1.3.0";
+ }
+ }, {
+ key: "tag",
+ get: function get() {
+ return "pfe-card";
+ }
+ }, {
+ key: "meta",
+ get: function get() {
+ return {
+ title: "Card",
+ description: "This element creates a header, body, and footer region in which to place content or other components."
+ };
+ }
+ }, {
+ key: "properties",
+ get: function get() {
+ return {
+ color: {
+ title: "Background color",
+ type: String,
+ values: ["lightest", "base", "darker", "darkest", "complement", "accent"],
+ default: "base",
+ observer: "_colorChanged"
+ },
+ // @TODO: Deprecate property in 1.0
+ oldColor: {
+ type: String,
+ prefix: false,
+ alias: "color",
+ attr: "pfe-color"
+ },
+ imgSrc: {
+ title: "Background image",
+ type: String,
+ observer: "_imageSrcChanged"
+ },
+ // @TODO: Deprecate property in 1.0
+ pfeImgSrc: {
+ type: String,
+ prefix: false,
+ alias: "imgSrc"
+ },
+ size: {
+ title: "Padding size",
+ type: String,
+ values: ["small"]
+ },
+ // @TODO: Deprecate property in 1.0
+ pfeSize: {
+ type: String,
+ values: ["small"],
+ prefix: false,
+ alias: "size"
+ },
+ border: {
+ title: "Border",
+ type: Boolean
+ },
+ // @TODO: Deprecate property in 1.0
+ oldBorder: {
+ alias: "border",
+ attr: "pfe-border"
+ }
+ };
+ }
+ }, {
+ key: "slots",
+ get: function get() {
+ return {
+ header: {
+ title: "Header",
+ type: "array",
+ namedSlot: true,
+ maxItems: 3,
+ items: {
+ $ref: "raw"
+ }
+ },
+ body: {
+ title: "Body",
+ type: "array",
+ namedSlot: false,
+ items: {
+ $ref: "raw"
+ }
+ },
+ footer: {
+ title: "Footer",
+ type: "array",
+ namedSlot: true,
+ maxItems: 3,
+ items: {
+ oneOf: [{
+ $ref: "pfe-cta"
+ }, {
+ $ref: "raw"
+ }]
+ }
+ }
+ };
+ }
+
+ // Declare the type of this component
+
+ }, {
+ key: "PfeType",
+ get: function get() {
+ return PFElement.PfeTypes.Container;
+ }
+ }]);
+
+ function PfeCard() {
+ classCallCheck(this, PfeCard);
+ return possibleConstructorReturn(this, (PfeCard.__proto__ || Object.getPrototypeOf(PfeCard)).call(this, PfeCard, { type: PfeCard.PfeType }));
+ }
+
+ // If the color changes, update the context
+
+
+ createClass(PfeCard, [{
+ key: "_colorChanged",
+ value: function _colorChanged() {
+ // Update the context
+ this.resetContext();
+ }
+
+ // Update the background image
+
+ }, {
+ key: "_imageSrcChanged",
+ value: function _imageSrcChanged(oldValue, newValue) {
+ // Set the image as the background image
+ this.style.backgroundImage = newValue ? "url('" + newValue + "')" : "";
+ }
+ }]);
+ return PfeCard;
+ }(PFElement);
+
+ PFElement.create(PfeCard);
+
+ return PfeCard;
+
+})));
+//# sourceMappingURL=pfe-card.umd.js.map
diff --git a/elements/pfe-card/dist/pfe-card.umd.js.map b/elements/pfe-card/dist/pfe-card.umd.js.map
new file mode 100644
index 0000000000..ecd9eed7d4
--- /dev/null
+++ b/elements/pfe-card/dist/pfe-card.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-card.umd.js","sources":["../_temp/polyfills--pfe-card.js","../_temp/pfe-card.umd.js"],"sourcesContent":["// @POLYFILL Element.matches\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches\nif (!Element.prototype.matches) {\n Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;\n}\n\n// @POLYFILL Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\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 * PatternFly Elements: PfeCard 1.3.0\n * @license\n * Copyright 2021 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// Import polyfills: matches, closest, includes\nimport \"./polyfills--pfe-card.js\";\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\n\nclass PfeCard extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.3.0\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n
\n\n
\n`;\n }\n\n static get tag() {\n return \"pfe-card\";\n }\n\n static get meta() {\n return {\n title: \"Card\",\n description:\n \"This element creates a header, body, and footer region in which to place content or other components.\"\n };\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n // @TODO: How do we handle attributes for slotted content?\n static get properties() {\n return {\n color: {\n title: \"Background color\",\n type: String,\n values: [\"lightest\", \"base\", \"darker\", \"darkest\", \"complement\", \"accent\"],\n default: \"base\",\n observer: \"_colorChanged\"\n },\n // @TODO: Deprecate property in 1.0\n oldColor: {\n type: String,\n prefix: false,\n alias: \"color\",\n attr: \"pfe-color\"\n },\n imgSrc: {\n title: \"Background image\",\n type: String,\n observer: \"_imageSrcChanged\"\n },\n // @TODO: Deprecate property in 1.0\n pfeImgSrc: {\n type: String,\n prefix: false,\n alias: \"imgSrc\"\n },\n size: {\n title: \"Padding size\",\n type: String,\n values: [\"small\"]\n },\n // @TODO: Deprecate property in 1.0\n pfeSize: {\n type: String,\n values: [\"small\"],\n prefix: false,\n alias: \"size\"\n },\n border: {\n title: \"Border\",\n type: Boolean\n },\n // @TODO: Deprecate property in 1.0\n oldBorder: {\n alias: \"border\",\n attr: \"pfe-border\"\n }\n };\n }\n\n static get slots() {\n return {\n header: {\n title: \"Header\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n $ref: \"raw\"\n }\n },\n body: {\n title: \"Body\",\n type: \"array\",\n namedSlot: false,\n items: {\n $ref: \"raw\"\n }\n },\n footer: {\n title: \"Footer\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n oneOf: [\n {\n $ref: \"pfe-cta\"\n },\n {\n $ref: \"raw\"\n }\n ]\n }\n }\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(PfeCard, { type: PfeCard.PfeType });\n }\n\n // If the color changes, update the context\n _colorChanged() {\n // Update the context\n this.resetContext();\n }\n\n // Update the background image\n _imageSrcChanged(oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n}\n\nPFElement.create(PfeCard);\n\nexport { PfeCard as default };\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","parentElement","parentNode","nodeType","PfeCard","title","description","color","type","String","values","default","observer","oldColor","prefix","alias","attr","imgSrc","pfeImgSrc","size","pfeSize","border","Boolean","oldBorder","header","namedSlot","maxItems","items","$ref","body","footer","oneOf","PFElement","PfeTypes","Container","PfeType","resetContext","oldValue","newValue","style","backgroundImage","create"],"mappings":"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"}
\ No newline at end of file
diff --git a/elements/pfe-card/dist/pfe-card.umd.min.js b/elements/pfe-card/dist/pfe-card.umd.min.js
new file mode 100644
index 0000000000..0ac4aef7f9
--- /dev/null
+++ b/elements/pfe-card/dist/pfe-card.umd.min.js
@@ -0,0 +1,2 @@
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],r):(e=e||self).PfeCard=r(e.PFElement)}(this,function(e){"use strict";e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e,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}while(null!==(r=r.parentElement||r.parentNode)&&1===r.nodeType);return null});var r=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},t=function(e,r,t){return r&&a(e.prototype,r),t&&a(e,t),e};function a(e,r){for(var t=0;t\n
\n\n
\n'}},{key:"templateUrl",get:function(){return"pfe-card.html"}},{key:"styleUrl",get:function(){return"pfe-card.scss"}}],[{key:"version",get:function(){return"1.3.0"}},{key:"tag",get:function(){return"pfe-card"}},{key:"meta",get:function(){return{title:"Card",description:"This element creates a header, body, and footer region in which to place content or other components."}}},{key:"properties",get:function(){return{color:{title:"Background color",type:String,values:["lightest","base","darker","darkest","complement","accent"],default:"base",observer:"_colorChanged"},oldColor:{type:String,prefix:!1,alias:"color",attr:"pfe-color"},imgSrc:{title:"Background image",type:String,observer:"_imageSrcChanged"},pfeImgSrc:{type:String,prefix:!1,alias:"imgSrc"},size:{title:"Padding size",type:String,values:["small"]},pfeSize:{type:String,values:["small"],prefix:!1,alias:"size"},border:{title:"Border",type:Boolean},oldBorder:{alias:"border",attr:"pfe-border"}}}},{key:"slots",get:function(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{$ref:"raw"}},body:{title:"Body",type:"array",namedSlot:!1,items:{$ref:"raw"}},footer:{title:"Footer",type:"array",namedSlot:!0,maxItems:3,items:{oneOf:[{$ref:"pfe-cta"},{$ref:"raw"}]}}}}},{key:"PfeType",get:function(){return e.PfeTypes.Container}}]),t(c,[{key:"_colorChanged",value:function(){this.resetContext()}},{key:"_imageSrcChanged",value:function(e,r){this.style.backgroundImage=r?"url('"+r+"')":""}}]),c);function c(){return r(this,c),o(this,(c.__proto__||Object.getPrototypeOf(c)).call(this,c,{type:c.PfeType}))}return e.create(t),t});
+//# sourceMappingURL=pfe-card.umd.min.js.map
diff --git a/elements/pfe-card/dist/pfe-card.umd.min.js.map b/elements/pfe-card/dist/pfe-card.umd.min.js.map
new file mode 100644
index 0000000000..66aea87d97
--- /dev/null
+++ b/elements/pfe-card/dist/pfe-card.umd.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-card.umd.min.js","sources":["../_temp/polyfills--pfe-card.js","../_temp/pfe-card.umd.js"],"sourcesContent":["// @POLYFILL Element.matches\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches\nif (!Element.prototype.matches) {\n Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;\n}\n\n// @POLYFILL Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\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 * PatternFly Elements: PfeCard 1.3.0\n * @license\n * Copyright 2021 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// Import polyfills: matches, closest, includes\nimport \"./polyfills--pfe-card.js\";\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\n\nclass PfeCard extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.3.0\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n
\n\n
\n`;\n }\n\n static get tag() {\n return \"pfe-card\";\n }\n\n static get meta() {\n return {\n title: \"Card\",\n description:\n \"This element creates a header, body, and footer region in which to place content or other components.\"\n };\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n // @TODO: How do we handle attributes for slotted content?\n static get properties() {\n return {\n color: {\n title: \"Background color\",\n type: String,\n values: [\"lightest\", \"base\", \"darker\", \"darkest\", \"complement\", \"accent\"],\n default: \"base\",\n observer: \"_colorChanged\"\n },\n // @TODO: Deprecate property in 1.0\n oldColor: {\n type: String,\n prefix: false,\n alias: \"color\",\n attr: \"pfe-color\"\n },\n imgSrc: {\n title: \"Background image\",\n type: String,\n observer: \"_imageSrcChanged\"\n },\n // @TODO: Deprecate property in 1.0\n pfeImgSrc: {\n type: String,\n prefix: false,\n alias: \"imgSrc\"\n },\n size: {\n title: \"Padding size\",\n type: String,\n values: [\"small\"]\n },\n // @TODO: Deprecate property in 1.0\n pfeSize: {\n type: String,\n values: [\"small\"],\n prefix: false,\n alias: \"size\"\n },\n border: {\n title: \"Border\",\n type: Boolean\n },\n // @TODO: Deprecate property in 1.0\n oldBorder: {\n alias: \"border\",\n attr: \"pfe-border\"\n }\n };\n }\n\n static get slots() {\n return {\n header: {\n title: \"Header\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n $ref: \"raw\"\n }\n },\n body: {\n title: \"Body\",\n type: \"array\",\n namedSlot: false,\n items: {\n $ref: \"raw\"\n }\n },\n footer: {\n title: \"Footer\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n oneOf: [\n {\n $ref: \"pfe-cta\"\n },\n {\n $ref: \"raw\"\n }\n ]\n }\n }\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(PfeCard, { type: PfeCard.PfeType });\n }\n\n // If the color changes, update the context\n _colorChanged() {\n // Update the context\n this.resetContext();\n }\n\n // Update the background image\n _imageSrcChanged(oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n}\n\nPFElement.create(PfeCard);\n\nexport { PfeCard as default };\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","this","parentElement","parentNode","nodeType","PfeCard","PFElement","String","Boolean","PfeTypes","Container","resetContext","oldValue","newValue","style","backgroundImage","type","PfeType","create"],"mappings":"wWAEKA,QAAQC,UAAUC,kBACbD,UAAUC,QAAUF,QAAQC,UAAUE,mBAAqBH,QAAQC,UAAUG,uBAKlFJ,QAAQC,UAAUI,kBACbJ,UAAUI,QAAU,SAASC,OAC/BC,EAAKC,WAEHD,EAAGL,QAAQI,GAAI,OAAOC,QAEZ,UADTA,EAAGE,eAAiBF,EAAGG,aACU,IAAhBH,EAAGI,iBACpB,kfCeLC,+TAAgBC,u9eAmCX,uDAIA,wDAnCA,0CAmBA,8CAIA,OACE,mBAEL,kJAcG,OACE,OACE,wBACDC,cACE,CAAC,WAAY,OAAQ,SAAU,UAAW,aAAc,kBACvD,gBACC,0BAGF,MACFA,eACE,QACD,aACD,oBAEA,OACC,wBACDA,gBACI,8BAGD,MACHA,eACE,QACD,eAEH,OACG,oBACDA,cACE,CAAC,kBAGF,MACDA,cACE,CAAC,iBACD,QACD,eAED,OACC,cACDC,mBAGG,OACF,cACD,mDAMH,QACG,OACC,cACD,mBACK,WACD,QACH,MACC,aAGJ,OACG,YACD,mBACK,QACJ,MACC,eAGF,OACC,cACD,mBACK,WACD,QACH,OACE,CACL,MACQ,WAER,MACQ,kDAUTF,EAAUG,SAASC,8DAUrBC,wDAIUC,EAAUC,QAEpBC,MAAMC,gBAAkBF,UAAmBA,wGAZ1CR,EAAS,CAAEW,KAAMX,EAAQY,kBAgBnCX,EAAUY,OAAOb"}
\ No newline at end of file
diff --git a/elements/pfe-card/package.json b/elements/pfe-card/package.json
index d3eaed9d47..700dedcac2 100644
--- a/elements/pfe-card/package.json
+++ b/elements/pfe-card/package.json
@@ -5,7 +5,7 @@
"elementName": "pfe-card",
"preview": "card.svg"
},
- "version": "1.2.0",
+ "version": "1.3.0",
"publishConfig": {
"access": "public"
},
@@ -56,10 +56,10 @@
],
"license": "MIT",
"dependencies": {
- "@patternfly/pfelement": "^1.2.0"
+ "@patternfly/pfelement": "^1.3.0"
},
"devDependencies": {
- "@patternfly/pfe-sass": "^1.2.0"
+ "@patternfly/pfe-sass": "^1.3.0"
},
"generator-pfelement-version": "0.5.0",
"bugs": {
diff --git a/elements/pfe-clipboard/dist/pfe-clipboard.css.map b/elements/pfe-clipboard/dist/pfe-clipboard.css.map
new file mode 100644
index 0000000000..ed5e1d7874
--- /dev/null
+++ b/elements/pfe-clipboard/dist/pfe-clipboard.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["pfe-clipboard.scss","../../pfe-sass/functions/_custom-properties.scss","pfe-clipboard.css","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAoBA;EACE,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,mBAAc;EAAd,sBAAc;MAAd,kBAAc;UAAd,cAAc;EACd,yBAAmB;EAAnB,2BAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,8BAAsB;EAAtB,2BAAsB;EAAtB,sBAAsB;EACtB,sBAAkC;EAAlC,iFAAkC;EAClC,gBCqDkC;EDrDlC,wFCqDkC;EDpDlC,0BAAyC;EAAzC,0DAAyC;EACzC,eAAe;EACf,iBCkDkC;EDlDlC,gDCkDkC;ACrEpC;;AFsBA;EACE,aAAa;AEnBf;;AFwBE;EACE,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,UCuCgC;EDvChC,0ECuCgC;EDrChC,YCqCgC;EDrChC,gDCqCgC;EDpChC,uBCoCgC;EDpChC,2DCoCgC;EDlChC,mGAAkB;AEvBtB;;AFgBG;EAUG,wBAAuC;EAAvC,iGAAuC;AEtB7C;;AFyBE;EACE,sBAAkC;EAAlC,iFAAkC;AEtBtC;;AFyBE;EACE,yBAAiD;EAAjD,iHAAiD;AEtBrD;;AF2BA;;EAEE,wBAAwB;AExB1B;;AF0BA;;EAEE,wBAAwB;AEvB1B;;AF4BA;;EAEE,WAAW;AEzBb;;AF6BA;;EAEE,wGAAuB;AE1BzB;;AF8BA;;EAEE,wGAAuB;AE3BzB;;ACxDM;EAAsF,UAAA;EHuF1F;IAEE,qBAAqB;EE3BvB;EF6BA;IACE,qBAAqB;IACrB,eAAe;EE3BjB;EF6BA;IACE,qBAAqB;EE3BvB;EF6BA;IACE,qBAAqB;EE3BvB;AACF","file":"pfe-clipboard.css","sourcesContent":["// Please see the pfe-sass README for guidance on using these tools\n@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: clipboard;\n\n// This variable is global so that helper functions can reference it\n$LOCAL-VARIABLES: (\n FontSize: 1rem,\n Padding: 6px 16px,\n FontWeight: pfe-var(font-weight--light),\n Color: pfe-broadcasted(link),\n Color--hover: pfe-broadcasted(link--hover),\n Color--focus: pfe-broadcasted(link--focus),\n text--success--Color: pfe-var(feedback--success),\n icon--Width: pfe-var(icon-size),\n icon--Height: auto,\n icon--Margin: 0 0.4825rem 0 0, // 7.72px\n icon--Color: pfe-var(text--muted)\n);\n\n:host {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n max-width: fit-content;\n color: pfe-local(Color) !important;\n font-weight: pfe-local(FontWeight);\n font-size: pfe-local(FontSize) !important;\n cursor: pointer;\n padding: pfe-local(Padding);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n//-- Custom styles applied to slot's shadow element\n.pfe-clipboard {\n &__icon {\n display: flex;\n width: pfe-local(icon--Width);\n // This is needed if the icon isn't square\n height: pfe-local(icon--Height);\n margin: pfe-local(icon--Margin);\n // Customize icon color for pfe-icons\n --pfe-icon--Color: #{pfe-local(icon--Color)};\n svg {\n // Customize icon color of fallback svg icon\n fill: pfe-local(icon--Color) !important;\n }\n }\n &__text {\n color: pfe-local(Color) !important;\n }\n\n &__text--success {\n color: pfe-local(text--success--Color) !important;\n }\n}\n\n// Flipped clipboard text and success text\n:host([copied]) .pfe-clipboard__text,\n.pfe-clipboard[copied] .pfe-clipboard__text {\n display: none !important;\n}\n:host(:not([copied])) .pfe-clipboard__text--success,\n.pfe-clipboard:not([copied]) .pfe-clipboard__text--success {\n display: none !important;\n}\n\n//-- Custom styles applied to slot\n// Targets icon in the shadowdom and lightdom\n::slotted([slot=\"icon\"]),\n.pfe-clipboard__icon > * {\n width: 100%;\n}\n\n// Note: Focus states need to be defined before hover states\n:host(:not([aria-disabled=\"true\"]):focus),\n:host(:not([aria-disabled=\"true\"]).focus-within) {\n --pfe-clipboard--Color: #{pfe-local(Color--focus)};\n}\n\n// Note: Hover states need to be defined after focus states\n:host(:not([aria-disabled=\"true\"]):hover),\n:host(:not([aria-disabled=\"true\"])) ::slotted(:hover) {\n --pfe-clipboard--Color: #{pfe-local(Color--hover)};\n}\n\n@include browser-query(ie11) {\n :host {\n // fallback for inline-flex\n display: inline-block;\n }\n .pfe-clipboard__icon {\n display: inline-block;\n margin-right: 0;\n }\n .pfe-clipboard__text {\n display: inline-block;\n }\n .pfe-clipboard__text--success {\n display: inline-block;\n }\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\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/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name) {\n $var-name: to-string($name, \"--\");\n @if map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}",":host {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n max-width: fit-content;\n color: var(--pfe-clipboard--Color, var(--pfe-broadcasted--link, #06c)) !important;\n font-weight: var(--pfe-clipboard--FontWeight, var(--pfe-theme--font-weight--light, 300));\n font-size: var(--pfe-clipboard--FontSize, 1rem) !important;\n cursor: pointer;\n padding: var(--pfe-clipboard--Padding, 6px 16px);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.pfe-clipboard__icon {\n display: flex;\n width: var(--pfe-clipboard--icon--Width, var(--pfe-theme--icon-size, 1em));\n height: var(--pfe-clipboard--icon--Height, auto);\n margin: var(--pfe-clipboard--icon--Margin, 0 0.4825rem 0 0);\n --pfe-icon--Color: var(--pfe-clipboard--icon--Color, var(--pfe-theme--color--text--muted, #6a6e73));\n}\n\n.pfe-clipboard__icon svg {\n fill: var(--pfe-clipboard--icon--Color, var(--pfe-theme--color--text--muted, #6a6e73)) !important;\n}\n\n.pfe-clipboard__text {\n color: var(--pfe-clipboard--Color, var(--pfe-broadcasted--link, #06c)) !important;\n}\n\n.pfe-clipboard__text--success {\n color: var(--pfe-clipboard--text--success--Color, var(--pfe-theme--color--feedback--success, #3e8635)) !important;\n}\n\n:host([copied]) .pfe-clipboard__text,\n.pfe-clipboard[copied] .pfe-clipboard__text {\n display: none !important;\n}\n\n:host(:not([copied])) .pfe-clipboard__text--success,\n.pfe-clipboard:not([copied]) .pfe-clipboard__text--success {\n display: none !important;\n}\n\n::slotted([slot=\"icon\"]),\n.pfe-clipboard__icon > * {\n width: 100%;\n}\n\n:host(:not([aria-disabled=\"true\"]):focus),\n:host(:not([aria-disabled=\"true\"]).focus-within) {\n --pfe-clipboard--Color: var(--pfe-clipboard--Color--focus, var(--pfe-broadcasted--link--focus, #004080));\n}\n\n:host(:not([aria-disabled=\"true\"]):hover),\n:host(:not([aria-disabled=\"true\"])) ::slotted(:hover) {\n --pfe-clipboard--Color: var(--pfe-clipboard--Color--hover, var(--pfe-broadcasted--link--hover, #004080));\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n /* IE10+ */\n :host {\n display: inline-block;\n }\n .pfe-clipboard__icon {\n display: inline-block;\n margin-right: 0;\n }\n .pfe-clipboard__text {\n display: inline-block;\n }\n .pfe-clipboard__text--success {\n display: inline-block;\n }\n}\n","@mixin browser-query($browser-list) {\n @each $browser in $browser-list {\n @if $browser == ie11 {\n @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n @content;\n }\n }\n @if $browser == edge12 {\n @supports (-ms-accelerator: true) { /* Microsoft Edge Browser 12+ */\n @content;\n }\n }\n @if $browser == edge {\n @supports (-ms-ime-align: auto) { /* Microsoft Edge Browser 16+ (All) */\n @content;\n }\n }\n @if $browser == firefox {\n @media all and (min--moz-device-pixel-ratio:0) { /* Mozilla Firefox (All) */\n @content;\n }\n }\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\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\n@mixin pfe-hidden {\n @at-root #{&}([hidden]) {\n display: none;\n }\n}\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 pfe-icon($path, $display: flex, $size: 1em) {\n display: #{$display};\n @if $path {\n background: #{$path} no-repeat;\n background-size: contain;\n background-position: center;\n }\n width: #{$size};\n height: #{$size};\n @content;\n}\n\n@mixin pfe-local-debug($map: $LOCAL-VARIABLES) {\n :root {\n @include pfe-print-local($map);\n }\n} "],"sourceRoot":"../src"}
\ No newline at end of file
diff --git a/elements/pfe-clipboard/dist/pfe-clipboard.js b/elements/pfe-clipboard/dist/pfe-clipboard.js
new file mode 100644
index 0000000000..c1ccb9cd7f
--- /dev/null
+++ b/elements/pfe-clipboard/dist/pfe-clipboard.js
@@ -0,0 +1,251 @@
+import PFElement from '../../pfelement/dist/pfelement.js';
+
+/*!
+ * PatternFly Elements: PfeClipboard 1.3.0
+ * @license
+ * Copyright 2021 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 PfeClipboard extends PFElement {
+
+ // Injected at build-time
+ static get version() {
+ return "1.3.0";
+ }
+
+ // Injected at build-time
+ get html() {
+ return `
+
+${!this.noIcon ? `
+
+
+
+
+
+` : ""}
+
+ Copy URL
+
+
+ Copied
+
`;
+ }
+
+ static get tag() {
+ return "pfe-clipboard";
+ }
+
+ static get meta() {
+ return {
+ title: "Clipboard",
+ description: "Copy current URL to clipboard."
+ };
+ }
+
+ get templateUrl() {
+ return "pfe-clipboard.html";
+ }
+
+ get styleUrl() {
+ return "pfe-clipboard.scss";
+ }
+
+ static get events() {
+ return {
+ copied: `${this.tag}:copied`
+ };
+ }
+
+ // Declare the type of this component
+ static get PfeType() {
+ return PFElement.PfeTypes.Content;
+ }
+
+ static get properties() {
+ return {
+ noIcon: {
+ title: "No icon",
+ type: Boolean,
+ observer: "_noIconChanged"
+ },
+ copiedDuration: {
+ title: "Success message duration (in seconds)",
+ type: Number,
+ default: 3
+ },
+ role: {
+ type: String,
+ default: "button"
+ },
+ tabindex: {
+ type: Number,
+ default: 0
+ }
+ };
+ }
+
+ static get slots() {
+ return {
+ icon: {
+ title: "Icon",
+ description: "This field can accept an SVG, pfe-icon component, or other format for displaying an icon.",
+ slotName: "icon",
+ slotClass: "pfe-clipboard__icon",
+ slotId: "icon"
+ },
+ text: {
+ title: "Default text",
+ slotName: "text",
+ slotClass: "pfe-clipboard__text",
+ slotId: "text"
+ },
+ textSuccess: {
+ title: "Success message",
+ description: "Shown when the URL is successfully copied to the clipboard.",
+ slotName: "text--success",
+ slotClass: "pfe-clipboard__text--success",
+ slotId: "text--success"
+ }
+ };
+ }
+
+ constructor() {
+ super(PfeClipboard, { type: PfeClipboard.PfeType });
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ // Since this element as the role of button we are going to listen
+ // for click and as well as 'enter' and 'space' commands to trigger
+ // the copy functionality
+ this.addEventListener("click", this._clickHandler.bind(this));
+ this.addEventListener("keydown", this._keydownHandler.bind(this));
+ }
+
+ disconnectedCallback() {
+ this.removeEventListener("click", this._clickHandler.bind(this));
+ this.removeEventListener("keydown", this._keydownHandler.bind(this));
+ this.shadowRoot.removeEventListener("slotchange", this._slotchangeHandler.bind(this));
+ super.disconnectedCallback();
+ }
+
+ _noIconChanged(previousValue) {
+ // dirty check to see if we should rerender the template
+ if (this._rendered && this.noIcon !== previousValue) {
+ this.render();
+ }
+ }
+
+ _clickHandler(event) {
+ // Execute the copy to clipboard functionality
+ this.copyURLToClipboard()
+ .then(url => {
+ // Emit event that lets others know the user has "copied"
+ // the url. We are also going to include the url that was
+ // copied.
+ this.emitEvent(PfeClipboard.events.copied, {
+ detail: {
+ url
+ }
+ });
+ // Toggle the copied state. Use the this._formattedCopiedTimeout function
+ // to an appropraite setTimout length.
+ this.setAttribute("copied", "");
+ setTimeout(() => {
+ this.removeAttribute("copied");
+ }, this._formattedCopiedTimeout());
+ })
+ .catch(error => {
+ this.warn(error);
+ });
+ }
+
+ // Formatted copied timeout value. Use the formattedCopiedTimeout function
+ // to get a type safe, millisecond value of the timeout duration.
+ _formattedCopiedTimeout() {
+ const copiedDuration = Number(this.copiedDuration * 1000);
+ if (!(copiedDuration > -1)) {
+ this.warn(`copied-duration must be a valid number. Defaulting to 3 seconds.`);
+ // default to 3 seconds
+ return 3000;
+ } else {
+ return copiedDuration;
+ }
+ }
+
+ // Listen for keyboard events and map them to their
+ // corresponding mouse events.
+ _keydownHandler(event) {
+ let key = event.key || event.keyCode;
+ switch (key) {
+ case "Enter" :
+ this._clickHandler(event);
+ break;
+ case " " :
+ // Prevent the browser from scolling when the user hits the space key
+ event.stopPropagation();
+ event.preventDefault();
+ this._clickHandler(event);
+ break;
+ }
+ }
+
+ /**
+ * Copy url to the user's system clipboard
+ *
+ * If available, it will use the new Navigator API to access the system clipboard
+ * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard
+ *
+ * If unavailable, it will use the legacy execCommand("copy")
+ * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
+ * @async
+ * @return {Promise\n \n \n \n
\n` : \"\"}\n\n Copy URL \n
\n\n Copied \n
`;\n }\n\n static get tag() {\n return \"pfe-clipboard\";\n }\n\n static get meta() {\n return {\n title: \"Clipboard\",\n description: \"Copy current URL to clipboard.\"\n };\n }\n\n get templateUrl() {\n return \"pfe-clipboard.html\";\n }\n\n get styleUrl() {\n return \"pfe-clipboard.scss\";\n }\n\n static get events() {\n return {\n copied: `${this.tag}:copied`\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Content;\n }\n\n static get properties() {\n return {\n noIcon: {\n title: \"No icon\",\n type: Boolean,\n observer: \"_noIconChanged\"\n },\n copiedDuration: {\n title: \"Success message duration (in seconds)\",\n type: Number,\n default: 3\n },\n role: {\n type: String,\n default: \"button\"\n },\n tabindex: {\n type: Number,\n default: 0\n }\n };\n }\n\n static get slots() {\n return {\n icon: {\n title: \"Icon\",\n description: \"This field can accept an SVG, pfe-icon component, or other format for displaying an icon.\",\n slotName: \"icon\",\n slotClass: \"pfe-clipboard__icon\",\n slotId: \"icon\"\n },\n text: {\n title: \"Default text\",\n slotName: \"text\",\n slotClass: \"pfe-clipboard__text\",\n slotId: \"text\"\n },\n textSuccess: {\n title: \"Success message\",\n description: \"Shown when the URL is successfully copied to the clipboard.\",\n slotName: \"text--success\",\n slotClass: \"pfe-clipboard__text--success\",\n slotId: \"text--success\"\n }\n };\n }\n\n constructor() {\n super(PfeClipboard, { type: PfeClipboard.PfeType });\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Since this element as the role of button we are going to listen\n // for click and as well as 'enter' and 'space' commands to trigger\n // the copy functionality\n this.addEventListener(\"click\", this._clickHandler.bind(this));\n this.addEventListener(\"keydown\", this._keydownHandler.bind(this));\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this._clickHandler.bind(this));\n this.removeEventListener(\"keydown\", this._keydownHandler.bind(this));\n this.shadowRoot.removeEventListener(\"slotchange\", this._slotchangeHandler.bind(this));\n super.disconnectedCallback();\n }\n\n _noIconChanged(previousValue) {\n // dirty check to see if we should rerender the template\n if (this._rendered && this.noIcon !== previousValue) {\n this.render();\n }\n }\n\n _clickHandler(event) {\n // Execute the copy to clipboard functionality\n this.copyURLToClipboard()\n .then(url => {\n // Emit event that lets others know the user has \"copied\"\n // the url. We are also going to include the url that was\n // copied.\n this.emitEvent(PfeClipboard.events.copied, {\n detail: {\n url\n }\n });\n // Toggle the copied state. Use the this._formattedCopiedTimeout function\n // to an appropraite setTimout length.\n this.setAttribute(\"copied\", \"\");\n setTimeout(() => {\n this.removeAttribute(\"copied\");\n }, this._formattedCopiedTimeout());\n })\n .catch(error => {\n this.warn(error);\n });\n }\n\n // Formatted copied timeout value. Use the formattedCopiedTimeout function\n // to get a type safe, millisecond value of the timeout duration.\n _formattedCopiedTimeout() {\n const copiedDuration = Number(this.copiedDuration * 1000);\n if (!(copiedDuration > -1)) {\n this.warn(`copied-duration must be a valid number. Defaulting to 3 seconds.`);\n // default to 3 seconds\n return 3000;\n } else {\n return copiedDuration;\n }\n }\n\n // Listen for keyboard events and map them to their\n // corresponding mouse events.\n _keydownHandler(event) {\n let key = event.key || event.keyCode;\n switch (key) {\n case \"Enter\" || 13:\n this._clickHandler(event);\n break;\n case \" \" || 32:\n // Prevent the browser from scolling when the user hits the space key\n event.stopPropagation();\n event.preventDefault();\n this._clickHandler(event);\n break;\n }\n }\n\n /**\n * Copy url to the user's system clipboard\n *\n * If available, it will use the new Navigator API to access the system clipboard\n * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard\n *\n * If unavailable, it will use the legacy execCommand(\"copy\")\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand\n * @async\n * @return {Promise\n \n \n \n
\n'}\n\n Copy URL \n
\n\n Copied \n
`}static get tag(){return"pfe-clipboard"}static get meta(){return{title:"Clipboard",description:"Copy current URL to clipboard."}}get templateUrl(){return"pfe-clipboard.html"}get styleUrl(){return"pfe-clipboard.scss"}static get events(){return{copied:`${this.tag}:copied`}}static get PfeType(){return e.PfeTypes.Content}static get properties(){return{noIcon:{title:"No icon",type:Boolean,observer:"_noIconChanged"},copiedDuration:{title:"Success message duration (in seconds)",type:Number,default:3},role:{type:String,default:"button"},tabindex:{type:Number,default:0}}}static get slots(){return{icon:{title:"Icon",description:"This field can accept an SVG, pfe-icon component, or other format for displaying an icon.",slotName:"icon",slotClass:"pfe-clipboard__icon",slotId:"icon"},text:{title:"Default text",slotName:"text",slotClass:"pfe-clipboard__text",slotId:"text"},textSuccess:{title:"Success message",description:"Shown when the URL is successfully copied to the clipboard.",slotName:"text--success",slotClass:"pfe-clipboard__text--success",slotId:"text--success"}}}constructor(){super(t,{type:t.PfeType})}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._clickHandler.bind(this)),this.addEventListener("keydown",this._keydownHandler.bind(this))}disconnectedCallback(){this.removeEventListener("click",this._clickHandler.bind(this)),this.removeEventListener("keydown",this._keydownHandler.bind(this)),this.shadowRoot.removeEventListener("slotchange",this._slotchangeHandler.bind(this)),super.disconnectedCallback()}_noIconChanged(e){this._rendered&&this.noIcon!==e&&this.render()}_clickHandler(e){this.copyURLToClipboard().then(e=>{this.emitEvent(t.events.copied,{detail:{url:e}}),this.setAttribute("copied",""),setTimeout(()=>{this.removeAttribute("copied")},this._formattedCopiedTimeout())}).catch(e=>{this.warn(e)})}_formattedCopiedTimeout(){const e=Number(1e3*this.copiedDuration);return e>-1?e:(this.warn("copied-duration must be a valid number. Defaulting to 3 seconds."),3e3)}_keydownHandler(e){switch(e.key||e.keyCode){case"Enter":this._clickHandler(e);break;case" ":e.stopPropagation(),e.preventDefault(),this._clickHandler(e)}}copyURLToClipboard(){return new Promise((e,t)=>{const o=window.location.href;if(navigator.clipboard)navigator.clipboard.writeText(o).then(e(o));else if(document.queryCommandEnabled("copy")){const t=document.createElement("input");document.body.appendChild(t),t.value=o,t.select(),document.execCommand("copy"),document.body.removeChild(t),e(o)}else t(new Error("Your browser does not support copying to the clipboard."))})}}e.create(t);export default t;
+//# sourceMappingURL=pfe-clipboard.min.js.map
diff --git a/elements/pfe-clipboard/dist/pfe-clipboard.min.js.map b/elements/pfe-clipboard/dist/pfe-clipboard.min.js.map
new file mode 100644
index 0000000000..702920a0be
--- /dev/null
+++ b/elements/pfe-clipboard/dist/pfe-clipboard.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"pfe-clipboard.min.js","sources":["../_temp/pfe-clipboard.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeClipboard 1.3.0\n * @license\n * Copyright 2021 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/dist/pfelement.js\";\n\nclass PfeClipboard extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.3.0\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n${!this.noIcon ? `\n \n \n \n \n
\n` : \"\"}\n\n Copy URL \n
\n\n Copied \n
`;\n }\n\n static get tag() {\n return \"pfe-clipboard\";\n }\n\n static get meta() {\n return {\n title: \"Clipboard\",\n description: \"Copy current URL to clipboard.\"\n };\n }\n\n get templateUrl() {\n return \"pfe-clipboard.html\";\n }\n\n get styleUrl() {\n return \"pfe-clipboard.scss\";\n }\n\n static get events() {\n return {\n copied: `${this.tag}:copied`\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Content;\n }\n\n static get properties() {\n return {\n noIcon: {\n title: \"No icon\",\n type: Boolean,\n observer: \"_noIconChanged\"\n },\n copiedDuration: {\n title: \"Success message duration (in seconds)\",\n type: Number,\n default: 3\n },\n role: {\n type: String,\n default: \"button\"\n },\n tabindex: {\n type: Number,\n default: 0\n }\n };\n }\n\n static get slots() {\n return {\n icon: {\n title: \"Icon\",\n description: \"This field can accept an SVG, pfe-icon component, or other format for displaying an icon.\",\n slotName: \"icon\",\n slotClass: \"pfe-clipboard__icon\",\n slotId: \"icon\"\n },\n text: {\n title: \"Default text\",\n slotName: \"text\",\n slotClass: \"pfe-clipboard__text\",\n slotId: \"text\"\n },\n textSuccess: {\n title: \"Success message\",\n description: \"Shown when the URL is successfully copied to the clipboard.\",\n slotName: \"text--success\",\n slotClass: \"pfe-clipboard__text--success\",\n slotId: \"text--success\"\n }\n };\n }\n\n constructor() {\n super(PfeClipboard, { type: PfeClipboard.PfeType });\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Since this element as the role of button we are going to listen\n // for click and as well as 'enter' and 'space' commands to trigger\n // the copy functionality\n this.addEventListener(\"click\", this._clickHandler.bind(this));\n this.addEventListener(\"keydown\", this._keydownHandler.bind(this));\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this._clickHandler.bind(this));\n this.removeEventListener(\"keydown\", this._keydownHandler.bind(this));\n this.shadowRoot.removeEventListener(\"slotchange\", this._slotchangeHandler.bind(this));\n super.disconnectedCallback();\n }\n\n _noIconChanged(previousValue) {\n // dirty check to see if we should rerender the template\n if (this._rendered && this.noIcon !== previousValue) {\n this.render();\n }\n }\n\n _clickHandler(event) {\n // Execute the copy to clipboard functionality\n this.copyURLToClipboard()\n .then(url => {\n // Emit event that lets others know the user has \"copied\"\n // the url. We are also going to include the url that was\n // copied.\n this.emitEvent(PfeClipboard.events.copied, {\n detail: {\n url\n }\n });\n // Toggle the copied state. Use the this._formattedCopiedTimeout function\n // to an appropraite setTimout length.\n this.setAttribute(\"copied\", \"\");\n setTimeout(() => {\n this.removeAttribute(\"copied\");\n }, this._formattedCopiedTimeout());\n })\n .catch(error => {\n this.warn(error);\n });\n }\n\n // Formatted copied timeout value. Use the formattedCopiedTimeout function\n // to get a type safe, millisecond value of the timeout duration.\n _formattedCopiedTimeout() {\n const copiedDuration = Number(this.copiedDuration * 1000);\n if (!(copiedDuration > -1)) {\n this.warn(`copied-duration must be a valid number. Defaulting to 3 seconds.`);\n // default to 3 seconds\n return 3000;\n } else {\n return copiedDuration;\n }\n }\n\n // Listen for keyboard events and map them to their\n // corresponding mouse events.\n _keydownHandler(event) {\n let key = event.key || event.keyCode;\n switch (key) {\n case \"Enter\" || 13:\n this._clickHandler(event);\n break;\n case \" \" || 32:\n // Prevent the browser from scolling when the user hits the space key\n event.stopPropagation();\n event.preventDefault();\n this._clickHandler(event);\n break;\n }\n }\n\n /**\n * Copy url to the user's system clipboard\n *\n * If available, it will use the new Navigator API to access the system clipboard\n * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard\n *\n * If unavailable, it will use the legacy execCommand(\"copy\")\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand\n * @async\n * @return {Promise\n \n \n \n
\n" : "") + "\n\n Copy URL \n
\n\n Copied \n
";
+ }
+ }, {
+ key: "templateUrl",
+ get: function get() {
+ return "pfe-clipboard.html";
+ }
+ }, {
+ key: "styleUrl",
+ get: function get() {
+ return "pfe-clipboard.scss";
+ }
+ }], [{
+ key: "version",
+
+
+ // Injected at build-time
+ get: function get() {
+ return "1.3.0";
+ }
+ }, {
+ key: "tag",
+ get: function get() {
+ return "pfe-clipboard";
+ }
+ }, {
+ key: "meta",
+ get: function get() {
+ return {
+ title: "Clipboard",
+ description: "Copy current URL to clipboard."
+ };
+ }
+ }, {
+ key: "events",
+ get: function get() {
+ return {
+ copied: this.tag + ":copied"
+ };
+ }
+
+ // Declare the type of this component
+
+ }, {
+ key: "PfeType",
+ get: function get() {
+ return PFElement.PfeTypes.Content;
+ }
+ }, {
+ key: "properties",
+ get: function get() {
+ return {
+ noIcon: {
+ title: "No icon",
+ type: Boolean,
+ observer: "_noIconChanged"
+ },
+ copiedDuration: {
+ title: "Success message duration (in seconds)",
+ type: Number,
+ default: 3
+ },
+ role: {
+ type: String,
+ default: "button"
+ },
+ tabindex: {
+ type: Number,
+ default: 0
+ }
+ };
+ }
+ }, {
+ key: "slots",
+ get: function get() {
+ return {
+ icon: {
+ title: "Icon",
+ description: "This field can accept an SVG, pfe-icon component, or other format for displaying an icon.",
+ slotName: "icon",
+ slotClass: "pfe-clipboard__icon",
+ slotId: "icon"
+ },
+ text: {
+ title: "Default text",
+ slotName: "text",
+ slotClass: "pfe-clipboard__text",
+ slotId: "text"
+ },
+ textSuccess: {
+ title: "Success message",
+ description: "Shown when the URL is successfully copied to the clipboard.",
+ slotName: "text--success",
+ slotClass: "pfe-clipboard__text--success",
+ slotId: "text--success"
+ }
+ };
+ }
+ }]);
+
+ function PfeClipboard() {
+ classCallCheck(this, PfeClipboard);
+ return possibleConstructorReturn(this, (PfeClipboard.__proto__ || Object.getPrototypeOf(PfeClipboard)).call(this, PfeClipboard, { type: PfeClipboard.PfeType }));
+ }
+
+ createClass(PfeClipboard, [{
+ key: "connectedCallback",
+ value: function connectedCallback() {
+ get(PfeClipboard.prototype.__proto__ || Object.getPrototypeOf(PfeClipboard.prototype), "connectedCallback", this).call(this);
+
+ // Since this element as the role of button we are going to listen
+ // for click and as well as 'enter' and 'space' commands to trigger
+ // the copy functionality
+ this.addEventListener("click", this._clickHandler.bind(this));
+ this.addEventListener("keydown", this._keydownHandler.bind(this));
+ }
+ }, {
+ key: "disconnectedCallback",
+ value: function disconnectedCallback() {
+ this.removeEventListener("click", this._clickHandler.bind(this));
+ this.removeEventListener("keydown", this._keydownHandler.bind(this));
+ this.shadowRoot.removeEventListener("slotchange", this._slotchangeHandler.bind(this));
+ get(PfeClipboard.prototype.__proto__ || Object.getPrototypeOf(PfeClipboard.prototype), "disconnectedCallback", this).call(this);
+ }
+ }, {
+ key: "_noIconChanged",
+ value: function _noIconChanged(previousValue) {
+ // dirty check to see if we should rerender the template
+ if (this._rendered && this.noIcon !== previousValue) {
+ this.render();
+ }
+ }
+ }, {
+ key: "_clickHandler",
+ value: function _clickHandler(event) {
+ var _this2 = this;
+
+ // Execute the copy to clipboard functionality
+ this.copyURLToClipboard().then(function (url) {
+ // Emit event that lets others know the user has "copied"
+ // the url. We are also going to include the url that was
+ // copied.
+ _this2.emitEvent(PfeClipboard.events.copied, {
+ detail: {
+ url: url
+ }
+ });
+ // Toggle the copied state. Use the this._formattedCopiedTimeout function
+ // to an appropraite setTimout length.
+ _this2.setAttribute("copied", "");
+ setTimeout(function () {
+ _this2.removeAttribute("copied");
+ }, _this2._formattedCopiedTimeout());
+ }).catch(function (error) {
+ _this2.warn(error);
+ });
+ }
+
+ // Formatted copied timeout value. Use the formattedCopiedTimeout function
+ // to get a type safe, millisecond value of the timeout duration.
+
+ }, {
+ key: "_formattedCopiedTimeout",
+ value: function _formattedCopiedTimeout() {
+ var copiedDuration = Number(this.copiedDuration * 1000);
+ if (!(copiedDuration > -1)) {
+ this.warn("copied-duration must be a valid number. Defaulting to 3 seconds.");
+ // default to 3 seconds
+ return 3000;
+ } else {
+ return copiedDuration;
+ }
+ }
+
+ // Listen for keyboard events and map them to their
+ // corresponding mouse events.
+
+ }, {
+ key: "_keydownHandler",
+ value: function _keydownHandler(event) {
+ var key = event.key || event.keyCode;
+ switch (key) {
+ case "Enter" :
+ this._clickHandler(event);
+ break;
+ case " " :
+ // Prevent the browser from scolling when the user hits the space key
+ event.stopPropagation();
+ event.preventDefault();
+ this._clickHandler(event);
+ break;
+ }
+ }
+
+ /**
+ * Copy url to the user's system clipboard
+ *
+ * If available, it will use the new Navigator API to access the system clipboard
+ * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard
+ *
+ * If unavailable, it will use the legacy execCommand("copy")
+ * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
+ * @async
+ * @return {Promise\n \n \n \n
\n` : \"\"}\n\n Copy URL \n
\n\n Copied \n
`;\n }\n\n static get tag() {\n return \"pfe-clipboard\";\n }\n\n static get meta() {\n return {\n title: \"Clipboard\",\n description: \"Copy current URL to clipboard.\"\n };\n }\n\n get templateUrl() {\n return \"pfe-clipboard.html\";\n }\n\n get styleUrl() {\n return \"pfe-clipboard.scss\";\n }\n\n static get events() {\n return {\n copied: `${this.tag}:copied`\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Content;\n }\n\n static get properties() {\n return {\n noIcon: {\n title: \"No icon\",\n type: Boolean,\n observer: \"_noIconChanged\"\n },\n copiedDuration: {\n title: \"Success message duration (in seconds)\",\n type: Number,\n default: 3\n },\n role: {\n type: String,\n default: \"button\"\n },\n tabindex: {\n type: Number,\n default: 0\n }\n };\n }\n\n static get slots() {\n return {\n icon: {\n title: \"Icon\",\n description: \"This field can accept an SVG, pfe-icon component, or other format for displaying an icon.\",\n slotName: \"icon\",\n slotClass: \"pfe-clipboard__icon\",\n slotId: \"icon\"\n },\n text: {\n title: \"Default text\",\n slotName: \"text\",\n slotClass: \"pfe-clipboard__text\",\n slotId: \"text\"\n },\n textSuccess: {\n title: \"Success message\",\n description: \"Shown when the URL is successfully copied to the clipboard.\",\n slotName: \"text--success\",\n slotClass: \"pfe-clipboard__text--success\",\n slotId: \"text--success\"\n }\n };\n }\n\n constructor() {\n super(PfeClipboard, { type: PfeClipboard.PfeType });\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Since this element as the role of button we are going to listen\n // for click and as well as 'enter' and 'space' commands to trigger\n // the copy functionality\n this.addEventListener(\"click\", this._clickHandler.bind(this));\n this.addEventListener(\"keydown\", this._keydownHandler.bind(this));\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this._clickHandler.bind(this));\n this.removeEventListener(\"keydown\", this._keydownHandler.bind(this));\n this.shadowRoot.removeEventListener(\"slotchange\", this._slotchangeHandler.bind(this));\n super.disconnectedCallback();\n }\n\n _noIconChanged(previousValue) {\n // dirty check to see if we should rerender the template\n if (this._rendered && this.noIcon !== previousValue) {\n this.render();\n }\n }\n\n _clickHandler(event) {\n // Execute the copy to clipboard functionality\n this.copyURLToClipboard()\n .then(url => {\n // Emit event that lets others know the user has \"copied\"\n // the url. We are also going to include the url that was\n // copied.\n this.emitEvent(PfeClipboard.events.copied, {\n detail: {\n url\n }\n });\n // Toggle the copied state. Use the this._formattedCopiedTimeout function\n // to an appropraite setTimout length.\n this.setAttribute(\"copied\", \"\");\n setTimeout(() => {\n this.removeAttribute(\"copied\");\n }, this._formattedCopiedTimeout());\n })\n .catch(error => {\n this.warn(error);\n });\n }\n\n // Formatted copied timeout value. Use the formattedCopiedTimeout function\n // to get a type safe, millisecond value of the timeout duration.\n _formattedCopiedTimeout() {\n const copiedDuration = Number(this.copiedDuration * 1000);\n if (!(copiedDuration > -1)) {\n this.warn(`copied-duration must be a valid number. Defaulting to 3 seconds.`);\n // default to 3 seconds\n return 3000;\n } else {\n return copiedDuration;\n }\n }\n\n // Listen for keyboard events and map them to their\n // corresponding mouse events.\n _keydownHandler(event) {\n let key = event.key || event.keyCode;\n switch (key) {\n case \"Enter\" || 13:\n this._clickHandler(event);\n break;\n case \" \" || 32:\n // Prevent the browser from scolling when the user hits the space key\n event.stopPropagation();\n event.preventDefault();\n this._clickHandler(event);\n break;\n }\n }\n\n /**\n * Copy url to the user's system clipboard\n *\n * If available, it will use the new Navigator API to access the system clipboard\n * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard\n *\n * If unavailable, it will use the legacy execCommand(\"copy\")\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand\n * @async\n * @return {Promise\n \n \n \n
\n')+'\n\n Copy URL \n
\n\n Copied \n
'}},{key:"templateUrl",get:function(){return"pfe-clipboard.html"}},{key:"styleUrl",get:function(){return"pfe-clipboard.scss"}}],[{key:"version",get:function(){return"1.3.0"}},{key:"tag",get:function(){return"pfe-clipboard"}},{key:"meta",get:function(){return{title:"Clipboard",description:"Copy current URL to clipboard."}}},{key:"events",get:function(){return{copied:this.tag+":copied"}}},{key:"PfeType",get:function(){return e.PfeTypes.Content}},{key:"properties",get:function(){return{noIcon:{title:"No icon",type:Boolean,observer:"_noIconChanged"},copiedDuration:{title:"Success message duration (in seconds)",type:Number,default:3},role:{type:String,default:"button"},tabindex:{type:Number,default:0}}}},{key:"slots",get:function(){return{icon:{title:"Icon",description:"This field can accept an SVG, pfe-icon component, or other format for displaying an icon.",slotName:"icon",slotClass:"pfe-clipboard__icon",slotId:"icon"},text:{title:"Default text",slotName:"text",slotClass:"pfe-clipboard__text",slotId:"text"},textSuccess:{title:"Success message",description:"Shown when the URL is successfully copied to the clipboard.",slotName:"text--success",slotClass:"pfe-clipboard__text--success",slotId:"text--success"}}}}]),o(a,[{key:"connectedCallback",value:function(){n(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"connectedCallback",this).call(this),this.addEventListener("click",this._clickHandler.bind(this)),this.addEventListener("keydown",this._keydownHandler.bind(this))}},{key:"disconnectedCallback",value:function(){this.removeEventListener("click",this._clickHandler.bind(this)),this.removeEventListener("keydown",this._keydownHandler.bind(this)),this.shadowRoot.removeEventListener("slotchange",this._slotchangeHandler.bind(this)),n(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"disconnectedCallback",this).call(this)}},{key:"_noIconChanged",value:function(e){this._rendered&&this.noIcon!==e&&this.render()}},{key:"_clickHandler",value:function(e){var t=this;this.copyURLToClipboard().then(function(e){t.emitEvent(a.events.copied,{detail:{url:e}}),t.setAttribute("copied",""),setTimeout(function(){t.removeAttribute("copied")},t._formattedCopiedTimeout())}).catch(function(e){t.warn(e)})}},{key:"_formattedCopiedTimeout",value:function(){var e=Number(1e3*this.copiedDuration);return-1\n \n \n \n
\n` : \"\"}\n\n Copy URL \n
\n\n Copied \n
`;\n }\n\n static get tag() {\n return \"pfe-clipboard\";\n }\n\n static get meta() {\n return {\n title: \"Clipboard\",\n description: \"Copy current URL to clipboard.\"\n };\n }\n\n get templateUrl() {\n return \"pfe-clipboard.html\";\n }\n\n get styleUrl() {\n return \"pfe-clipboard.scss\";\n }\n\n static get events() {\n return {\n copied: `${this.tag}:copied`\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Content;\n }\n\n static get properties() {\n return {\n noIcon: {\n title: \"No icon\",\n type: Boolean,\n observer: \"_noIconChanged\"\n },\n copiedDuration: {\n title: \"Success message duration (in seconds)\",\n type: Number,\n default: 3\n },\n role: {\n type: String,\n default: \"button\"\n },\n tabindex: {\n type: Number,\n default: 0\n }\n };\n }\n\n static get slots() {\n return {\n icon: {\n title: \"Icon\",\n description: \"This field can accept an SVG, pfe-icon component, or other format for displaying an icon.\",\n slotName: \"icon\",\n slotClass: \"pfe-clipboard__icon\",\n slotId: \"icon\"\n },\n text: {\n title: \"Default text\",\n slotName: \"text\",\n slotClass: \"pfe-clipboard__text\",\n slotId: \"text\"\n },\n textSuccess: {\n title: \"Success message\",\n description: \"Shown when the URL is successfully copied to the clipboard.\",\n slotName: \"text--success\",\n slotClass: \"pfe-clipboard__text--success\",\n slotId: \"text--success\"\n }\n };\n }\n\n constructor() {\n super(PfeClipboard, { type: PfeClipboard.PfeType });\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Since this element as the role of button we are going to listen\n // for click and as well as 'enter' and 'space' commands to trigger\n // the copy functionality\n this.addEventListener(\"click\", this._clickHandler.bind(this));\n this.addEventListener(\"keydown\", this._keydownHandler.bind(this));\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this._clickHandler.bind(this));\n this.removeEventListener(\"keydown\", this._keydownHandler.bind(this));\n this.shadowRoot.removeEventListener(\"slotchange\", this._slotchangeHandler.bind(this));\n super.disconnectedCallback();\n }\n\n _noIconChanged(previousValue) {\n // dirty check to see if we should rerender the template\n if (this._rendered && this.noIcon !== previousValue) {\n this.render();\n }\n }\n\n _clickHandler(event) {\n // Execute the copy to clipboard functionality\n this.copyURLToClipboard()\n .then(url => {\n // Emit event that lets others know the user has \"copied\"\n // the url. We are also going to include the url that was\n // copied.\n this.emitEvent(PfeClipboard.events.copied, {\n detail: {\n url\n }\n });\n // Toggle the copied state. Use the this._formattedCopiedTimeout function\n // to an appropraite setTimout length.\n this.setAttribute(\"copied\", \"\");\n setTimeout(() => {\n this.removeAttribute(\"copied\");\n }, this._formattedCopiedTimeout());\n })\n .catch(error => {\n this.warn(error);\n });\n }\n\n // Formatted copied timeout value. Use the formattedCopiedTimeout function\n // to get a type safe, millisecond value of the timeout duration.\n _formattedCopiedTimeout() {\n const copiedDuration = Number(this.copiedDuration * 1000);\n if (!(copiedDuration > -1)) {\n this.warn(`copied-duration must be a valid number. Defaulting to 3 seconds.`);\n // default to 3 seconds\n return 3000;\n } else {\n return copiedDuration;\n }\n }\n\n // Listen for keyboard events and map them to their\n // corresponding mouse events.\n _keydownHandler(event) {\n let key = event.key || event.keyCode;\n switch (key) {\n case \"Enter\" || 13:\n this._clickHandler(event);\n break;\n case \" \" || 32:\n // Prevent the browser from scolling when the user hits the space key\n event.stopPropagation();\n event.preventDefault();\n this._clickHandler(event);\n break;\n }\n }\n\n /**\n * Copy url to the user's system clipboard\n *\n * If available, it will use the new Navigator API to access the system clipboard\n * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard\n *\n * If unavailable, it will use the legacy execCommand(\"copy\")\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand\n * @async\n * @return {Promise